From e1d5d54cfb1fb20e56f0e971e2cfd196e9a913ac Mon Sep 17 00:00:00 2001
From: Philipp Dormann <philipp.dormann1@gmail.com>
Date: Sun, 10 Jan 2021 13:30:04 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=A7=B9=20simplified=20UsersOverview=20tab?=
 =?UTF-8?q?le?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

ref #12
---
 src/components/UsersOverview.svelte | 204 ++++++++--------------------
 1 file changed, 54 insertions(+), 150 deletions(-)

diff --git a/src/components/UsersOverview.svelte b/src/components/UsersOverview.svelte
index 33b0d867..ccbbb5dc 100644
--- a/src/components/UsersOverview.svelte
+++ b/src/components/UsersOverview.svelte
@@ -1,25 +1,19 @@
 <script>
-  import { _, json } from "svelte-i18n";
+  import { _ } from "svelte-i18n";
   import Toastify from "toastify-js";
-  import TracksEmptyState from "./TracksEmptyState.svelte";
-  import { TrackService, UserService } from "@odit/lfk-client-js";
+  import { UserService } from "@odit/lfk-client-js";
   const users_promise = UserService.userControllerGetAll();
-  import { getlang } from "./datatable_i18n";
-  import { Grid, html } from "gridjs";
   import "gridjs/dist/theme/mermaid.css";
-  import { tracks as tracksstore } from "../store.js";
+  import { users as usersstore } from "../store.js";
   import UsersEmptyState from "./UsersEmptyState.svelte";
+  $: searchvalue = "";
   $: userscache = [];
-  $: blocked = [];
-  let table;
-  let datatable;
-  let datatable_inited = false;
-  tracksstore.subscribe((val) => {
+  usersstore.subscribe((val) => {
     userscache = val;
   });
   users_promise.then((data) => {
     console.log(data);
-    tracksstore.set(data);
+    usersstore.set(data);
   });
 </script>
 
@@ -44,11 +38,6 @@
               class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
               Name
             </th>
-            <th
-              scope="col"
-              class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-              Title
-            </th>
             <th
               scope="col"
               class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
@@ -66,145 +55,60 @@
         </thead>
         <tbody class="divide-y divide-gray-200">
           {#each users as u}
-            <tr>
-              <td class="px-6 py-4 whitespace-nowrap">
-                <div class="flex items-center">
-                  {#if u.profilePic}
-                    <div class="flex-shrink-0 h-10 w-10">
-                      <img
-                        class="h-10 w-10 rounded-full"
-                        src={u.profilePic}
-                        alt="" />
-                    </div>
-                  {/if}
-                  <div class="ml-4">
-                    <div
-                      class="text-sm font-medium text-gray-900 dark:text-gray-100">
-                      {u.firstname}
-                      {u.middlename || ''}
-                      {u.lastname}
-                    </div>
-                    <div class="text-sm text-gray-500">
-                      {u.email || u.username}
+              <tr>
+                <td class="px-6 py-4 whitespace-nowrap">
+                  <div class="flex items-center">
+                    {#if u.profilePic}
+                      <div class="flex-shrink-0 h-10 w-10">
+                        <img
+                          class="h-10 w-10 rounded-full"
+                          src={u.profilePic}
+                          alt="" />
+                      </div>
+                    {/if}
+                    <div class="ml-4">
+                      <div
+                        class="text-sm font-medium text-gray-900 dark:text-gray-100">
+                        {u.firstname}
+                        {u.middlename || ''}
+                        {u.lastname}
+                      </div>
+                      <div class="text-sm text-gray-500">
+                        {u.email || u.username}
+                      </div>
                     </div>
                   </div>
-                </div>
-              </td>
-              <td class="px-6 py-4 whitespace-nowrap">
-                <div class="text-sm text-gray-900 dark:text-gray-100">
-                  Regional Paradigm Technician
-                </div>
-                <div class="text-sm text-gray-500">Optimization</div>
-              </td>
-              <td class="px-6 py-4 whitespace-nowrap">
-                {#if u.enabled}
-                  <span
-                    class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Active</span>
-                {:else}
-                  <span
-                    class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">Inactive</span>
-                {/if}
-              </td>
-              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
-                {#each u.groups as g}
+                </td>
+                <td class="px-6 py-4 whitespace-nowrap">
+                  {#if u.enabled}
+                    <span
+                      class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Active</span>
+                  {:else}
+                    <span
+                      class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">Inactive</span>
+                  {/if}
+                </td>
+                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                  {#each u.groups as g}
+                    <a
+                      href="../groups/{g.id}"
+                      class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">{g.name}</a>
+                  {/each}
+                </td>
+                <td
+                  class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                   <a
-                    href="../groups/{g.id}"
-                    class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">{g.name}</a>
-                {/each}
-              </td>
-              <td
-                class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
-                <a
-                  href="./{u.id}"
-                  class="text-indigo-600 hover:text-indigo-900">Edit</a>
-                <span
-                  tabindex="0"
-                  href="#"
-                  class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">Delete</span>
-              </td>
-            </tr>
+                    href="./{u.id}"
+                    class="text-indigo-600 hover:text-indigo-900">Edit</a>
+                  <span
+                    tabindex="0"
+                    href="#"
+                    class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">Delete</span>
+                </td>
+              </tr>
           {/each}
         </tbody>
       </table>
-      <div
-        class="grid px-4 py-3 text-xs font-semibold tracking-wide text-gray-500 uppercase border-t dark:border-gray-700 bg-gray-50 sm:grid-cols-9 dark:text-gray-400 dark:bg-gray-900">
-        <span class="flex items-center col-span-3"> Showing 21-30 of 100 </span>
-        <span class="col-span-2" />
-        <!-- Pagination -->
-        <span class="flex col-span-4 mt-2 sm:mt-auto sm:justify-end">
-          <nav aria-label="Table navigation">
-            <ul class="inline-flex items-center">
-              <li>
-                <button
-                  class="px-3 py-1 rounded-md rounded-l-lg focus:outline-none focus:shadow-outline-purple"
-                  aria-label="Previous">
-                  <svg
-                    aria-hidden="true"
-                    class="w-4 h-4 fill-current"
-                    viewBox="0 0 20 20">
-                    <path
-                      d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
-                      clip-rule="evenodd"
-                      fill-rule="evenodd" />
-                  </svg>
-                </button>
-              </li>
-              <li>
-                <button
-                  class="px-3 py-1 rounded-md focus:outline-none focus:shadow-outline-purple">
-                  1
-                </button>
-              </li>
-              <li>
-                <button
-                  class="px-3 py-1 rounded-md focus:outline-none focus:shadow-outline-purple">
-                  2
-                </button>
-              </li>
-              <li>
-                <button
-                  class="px-3 py-1 text-white transition-colors duration-150 bg-purple-600 border border-r-0 border-purple-600 rounded-md focus:outline-none focus:shadow-outline-purple">
-                  3
-                </button>
-              </li>
-              <li>
-                <button
-                  class="px-3 py-1 rounded-md focus:outline-none focus:shadow-outline-purple">
-                  4
-                </button>
-              </li>
-              <li><span class="px-3 py-1">...</span></li>
-              <li>
-                <button
-                  class="px-3 py-1 rounded-md focus:outline-none focus:shadow-outline-purple">
-                  8
-                </button>
-              </li>
-              <li>
-                <button
-                  class="px-3 py-1 rounded-md focus:outline-none focus:shadow-outline-purple">
-                  9
-                </button>
-              </li>
-              <li>
-                <button
-                  class="px-3 py-1 rounded-md rounded-r-lg focus:outline-none focus:shadow-outline-purple"
-                  aria-label="Next">
-                  <svg
-                    class="w-4 h-4 fill-current"
-                    aria-hidden="true"
-                    viewBox="0 0 20 20">
-                    <path
-                      d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
-                      clip-rule="evenodd"
-                      fill-rule="evenodd" />
-                  </svg>
-                </button>
-              </li>
-            </ul>
-          </nav>
-        </span>
-      </div>
     </div>
   {/if}
 {:catch error}