UserDetailOne sample ui

ref #12

src/App.svelte

@@ -48,6 +48,7 @@
   import OrgDetail from "./components/OrgDetail.svelte";
   import Teams from "./components/Teams.svelte";
   import { OpenAPI, AuthService } from "@odit/lfk-client-js";
+  import UserDetailOne from "./components/UserDetailOne.svelte";
   OpenAPI.BASE = config.baseurl;
   store.init();
 
@@ -80,8 +81,13 @@
         <Route path="/">
           <MainDashContent />
         </Route>
-        <Route path="/users">
+        <Route path="/users/*">
-          <Users />
+          <Route path="/">
+            <Users />
+          </Route>
+          <Route path="/:userid" let:params>
+            <UserDetailOne {params} />
+          </Route>
         </Route>
         <Route path="/tracks/*">
           <Route path="/">

src/components/PromiseError.svelte

@@ -0,0 +1,11 @@
+<script>
+  import { _ } from "svelte-i18n";
+  export let error;
+</script>
+
+<div class="text-white px-6 py-4 border-0 rounded relative mb-4 bg-red-500">
+  <span class="inline-block align-middle mr-8">
+    <b class="capitalize">{$_('general_promise_error')}</b>
+    {error}
+  </span>
+</div>

src/components/UserDetailOne.svelte

@@ -0,0 +1,86 @@
+<script>
+  import { _, json } from "svelte-i18n";
+  import Toastify from "toastify-js";
+  import TracksEmptyState from "./TracksEmptyState.svelte";
+  import { TrackService, UserService } from "@odit/lfk-client-js";
+  import { getlang } from "./datatable_i18n";
+  import { Grid, html } from "gridjs";
+  import "gridjs/dist/theme/mermaid.css";
+  import { tracks as tracksstore } from "../store.js";
+  import UsersEmptyState from "./UsersEmptyState.svelte";
+  import PromiseError from "./PromiseError.svelte";
+  $: userscache = [];
+  $: blocked = [];
+  let table;
+  let datatable;
+  let datatable_inited = false;
+  export let params;
+  const user_promise = UserService.userControllerGetOne(params.userid);
+  tracksstore.subscribe((val) => {
+    userscache = val;
+  });
+  user_promise.then((data) => {
+    console.log(data);
+    tracksstore.set(data);
+  });
+</script>
+
+{#await user_promise}
+  <!--  -->
+{:then user}
+  <section class="container p-5 select-none">
+    <span
+      class="mb-4 text-3xl font-extrabold leading-tight text-gray-900">{user.firstname}
+      {user.middlename}
+      {user.lastname}
+      <button
+        type="button"
+        class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm">Delete
+        User</button></span>
+    <!--  -->
+    <div class="mt-2 flex items-center">
+      <span
+        class="inline-block h-12 w-12 rounded-full overflow-hidden bg-gray-100"><svg
+          class="h-full w-full text-gray-300"
+          fill="currentColor"
+          viewBox="0 0 24 24"><path
+            d="M24 20.993V24H0v-2.996A14.977 14.977 0 0112.004 15c4.904 0 9.26 2.354 11.996 5.993zM16.002 8.999a4 4 0 11-8 0 4 4 0 018 0z" /></svg></span>
+      <button
+        type="button"
+        class="ml-5 bg-white py-2 px-3 border border-gray-300 rounded-md shadow-sm text-sm leading-4 font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">Change</button>
+    </div>
+    <!--  -->
+    <div class="mt-3 text-sm w-full">
+      <input
+        id="enabled"
+        name="enabled"
+        type="checkbox"
+        class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded" />
+      <label
+        for="enabled"
+        class="ml-1 font-medium text-gray-700">Active?</label>
+      <p class="text-gray-500">set the user active/ inactive</p>
+    </div>
+    <div class="text-sm w-full">
+      <label for="firstname" class="font-medium text-gray-700">First name</label>
+      <input
+        autocomplete="off"
+        placeholder="First name"
+        type="text"
+        name="firstname"
+        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
+    </div>
+    <div class="text-sm w-full">
+      <label for="lastname" class="font-medium text-gray-700">Last name</label>
+      <input
+        autocomplete="off"
+        placeholder="Last name"
+        type="text"
+        name="lastname"
+        class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
+    </div>
+  </section>
+{:catch error}
+  <!-- promise was rejected -->
+  <PromiseError {error} />
+{/await}

src/components/UsersDetail.svelte

@@ -57,10 +57,10 @@
             <th
               scope="col"
               class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-              Role
+              Groups
             </th>
             <th scope="col" class="relative px-6 py-3">
-              <span class="sr-only">Edit</span>
+              <span class="sr-only">Action</span>
             </th>
           </tr>
         </thead>
@@ -111,14 +111,74 @@
               <td
                 class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                 <a
-                  href="#"
+                  href="./{u.id}"
                   class="text-indigo-600 hover:text-indigo-900">Edit</a>
-                <a href="#" class="text-red-600 hover:text-red-900">Delete</a>
+                <a href="#" class="ml-4 text-red-600 hover:text-red-900">Delete</a>
               </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-800">
+        <span class="flex items-center col-span-3">
+          Showing 21-30 of 100
+        </span>
+        <span class="col-span-2"></span>
+        <!-- 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"></path>
+                  </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"></path>
+                  </svg>
+                </button>
+              </li>
+            </ul>
+          </nav>
+        </span>
+      </div>
     </div>
   {/if}
 {:catch error}