CHANGELOG.md

@@ -2,25 +2,11 @@
 
 All notable changes to this project will be documented in this file. Dates are displayed in UTC.
 
-#### [0.1.3](https://git.odit.services/lfk/frontend/compare/0.1.2...0.1.3)
-
-- 🌎 improved i18n for AddUserModal and UserDetail [`1c356a4`](https://git.odit.services/lfk/frontend/commit/1c356a41f54a954afaa69ed524f62c1676f7bbee)
-- 🧹 simplified UsersOverview table [`e1d5d54`](https://git.odit.services/lfk/frontend/commit/e1d5d54cfb1fb20e56f0e971e2cfd196e9a913ac)
-- 🌎 added i18n for UsersOverview [`3754f09`](https://git.odit.services/lfk/frontend/commit/3754f09b2f395a82ff8c3a9c655ab8a782e7eb71)
-- 🖊 add basic UserDetail editing reactivity [`6012d05`](https://git.odit.services/lfk/frontend/commit/6012d0577e2ae6caf44aaee54335188bc767fff7)
-- AddUserModal - data validation [`264e0d7`](https://git.odit.services/lfk/frontend/commit/264e0d7ed98c5000da543af154d6e36a6b956e4a)
-- ✨ sample layout for advanced search [`5ec1dfa`](https://git.odit.services/lfk/frontend/commit/5ec1dfa8b0da4619f14e73794b9a9e22872aa330)
-- userdetail - dynamic buttons [`ded3198`](https://git.odit.services/lfk/frontend/commit/ded31980bfbf9f09afa2818bdcc8cc3e40748441)
-- 🔍 UsersOverview table - basic fuzzy search [`b9e0be4`](https://git.odit.services/lfk/frontend/commit/b9e0be448398d087005e220d08e34461490be14e)
-
 #### [0.1.2](https://git.odit.services/lfk/frontend/compare/0.1.2-1...0.1.2)
 
-> 10 January 2021
-
 - Merge commit '2a37dfafa426e070aa136d171a1a01aa7f609d18' into dev [`#29`](https://git.odit.services/lfk/frontend/issues/29)
 - Merge commit '5810b4ec4396ad650d90493fb48e2a8320865b42' into dev [`#4`](https://git.odit.services/lfk/frontend/issues/4)
 - 🔒 added basic manual refresh every 4mins [`d92c6c0`](https://git.odit.services/lfk/frontend/commit/d92c6c0de9d6b72027b8aa27b22e3dc7b5116af1)
-- 🚀RELEASE v0.1.2 [`242b5af`](https://git.odit.services/lfk/frontend/commit/242b5afbe93a6100826b0340f821ad2a2c4de343)
 - dropped redundant console.log [`2a37dfa`](https://git.odit.services/lfk/frontend/commit/2a37dfafa426e070aa136d171a1a01aa7f609d18)
 - 💾 save new auth data to localstorage [`2cbb431`](https://git.odit.services/lfk/frontend/commit/2cbb431acc0fe1aa333ddedb76510486a5fcf191)
 - new license file version [CI SKIP] [`519ba79`](https://git.odit.services/lfk/frontend/commit/519ba79e1d5d97e2f59f769ef952a649481b55c0)

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@odit/lfk-frontend",
-	"version": "0.1.3",
+	"version": "0.1.2",
 	"scripts": {
 		"i18n-order": "node order.js",
 		"dev": "snowpack dev",
@@ -15,7 +15,6 @@
 		"filepond": "4.25.1",
 		"gridjs": "3.2.1",
 		"localforage": "1.9.0",
-		"lodash.isequal": "^4.5.0",
 		"svelte-filepond": "0.0.1",
 		"svelte-focus-trap": "1.0.1",
 		"svelte-i18n": "3.3.0",

src/components/AddUserModal.svelte

@@ -3,10 +3,11 @@
   import { clickOutside } from "./outsideclick";
   import { focusTrap } from "svelte-focus-trap";
   import { tracks as tracksstore } from "../store.js";
-  import { UserService } from "@odit/lfk-client-js";
+  import { TrackService, UserService } from "@odit/lfk-client-js";
   import isEmail from "validator/es/lib/isEmail";
   import Toastify from "toastify-js";
   import "toastify-js/src/toastify.css";
+  import About from "./About.svelte";
   export let modal_open;
   let firstname_input;
   let lastname_input;
@@ -21,13 +22,14 @@
   $: email_input_value = "";
   $: lastname_input_value = "";
   $: firstname_input_value = "";
+  $: track_min_duration = 0;
+  $: tracklength = 0;
   $: processed_last_submit = true;
-  $: isPasswordValid = password_input_value.trim().length !== 0;
+  $: isPasswordValid = password_input_value.trim().length === 0;
   $: isEmailValid = isEmail(email_input_value);
-  $: isLastnameValid = lastname_input_value.trim().length !== 0;
+  $: isLastnameValid = lastname_input_value.trim().length === 0;
-  $: isFirstnameValid = firstname_input_value.trim().length !== 0;
+  $: isFirstnameValid = firstname_input_value.trim().length === 0;
-  $: createbtnenabled =
+  $: createbtnenabled = !isFirstnameValid && !isLastnameValid;
-    isFirstnameValid && isLastnameValid && isEmailValid && isPasswordValid;
   (function () {
     document.onkeydown = function (e) {
       e = e || window.event;
@@ -53,8 +55,7 @@
         firstname: firstname_input_value,
         lastname: lastname_input_value,
         middlename: middlename_input_value,
-        email: email_input_value,
+        email:email_input_value,password:password_input_value
-        password: password_input_value,
       })
         .then((result) => {
           firstname_input_value = "";
@@ -136,33 +137,33 @@
                 <div class="col-span-6">
                   <label
                     for="firstname"
-                    class="block text-sm font-medium text-gray-700">{$_('first-name')}</label>
+                    class="block text-sm font-medium text-gray-700">First Name</label>
                   <input
                     use:focus
                     autocomplete="off"
-                    placeholder={$_('first-name')}
+                    placeholder="First Name"
-                    class:border-red-500={!isFirstnameValid}
+                    class:border-red-500={isFirstnameValid}
-                    class:focus:border-red-500={!isFirstnameValid}
+                    class:focus:border-red-500={isFirstnameValid}
-                    class:focus:ring-red-500={!isFirstnameValid}
+                    class:focus:ring-red-500={isFirstnameValid}
                     bind:value={firstname_input_value}
                     bind:this={firstname_input}
                     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" />
-                  {#if !isFirstnameValid}
+                  {#if isFirstnameValid}
                     <span
                       class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
-                      {$_('first-name-is-required')}
+                      First Name is required
                     </span>
                   {/if}
                 </div>
                 <div class="col-span-6">
                   <label
                     for="trackname"
-                    class="block text-sm font-medium text-gray-700">{$_('middle-name')}</label>
+                    class="block text-sm font-medium text-gray-700">Middle Name</label>
                   <input
                     autocomplete="off"
-                    placeholder={$_('middle-name')}
+                    placeholder="Middle Name"
                     bind:value={middlename_input_value}
                     bind:this={middlename_input}
                     type="text"
@@ -176,50 +177,50 @@
                   <input
                     autocomplete="off"
                     placeholder="Last Name"
-                    class:border-red-500={!isLastnameValid}
+                    class:border-red-500={isLastnameValid}
-                    class:focus:border-red-500={!isLastnameValid}
+                    class:focus:border-red-500={isLastnameValid}
-                    class:focus:ring-red-500={!isLastnameValid}
+                    class:focus:ring-red-500={isLastnameValid}
                     bind:value={lastname_input_value}
                     bind:this={lastname_input}
                     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" />
-                  {#if !isLastnameValid}
+                  {#if isLastnameValid}
                     <span
                       class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
-                      {$_('last-name-is-required')}
+                      Last Name is required
                     </span>
                   {/if}
                 </div>
                 <div class="col-span-6">
                   <label
                     for="password"
-                    class="block text-sm font-medium text-gray-700">{$_('password')}</label>
+                    class="block text-sm font-medium text-gray-700">Password</label>
                   <input
                     autocomplete="off"
-                    placeholder={$_('password')}
+                    placeholder="Password"
-                    class:border-red-500={!isPasswordValid}
+                    class:border-red-500={isPasswordValid}
-                    class:focus:border-red-500={!isPasswordValid}
+                    class:focus:border-red-500={isPasswordValid}
-                    class:focus:ring-red-500={!isPasswordValid}
+                    class:focus:ring-red-500={isPasswordValid}
                     bind:value={password_input_value}
                     bind:this={password_input}
                     type="password"
                     name="password"
                     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" />
-                  {#if !isPasswordValid}
+                  {#if isPasswordValid}
                     <span
                       class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
-                      {$_('password-is-required')}
+                      Password is required
                     </span>
                   {/if}
                 </div>
                 <div class="col-span-6">
                   <label
                     for="email"
-                    class="block text-sm font-medium text-gray-700">{$_('e-mail-adress')}</label>
+                    class="block text-sm font-medium text-gray-700">E-Mail</label>
                   <input
                     autocomplete="off"
-                    placeholder={$_('e-mail-adress')}
+                    placeholder="E-Mail"
                     class:border-red-500={!isEmailValid}
                     class:focus:border-red-500={!isEmailValid}
                     class:focus:ring-red-500={!isEmailValid}
@@ -231,7 +232,7 @@
                   {#if !isEmailValid}
                     <span
                       class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
-                      {$_('valid-email-is-required')}
+                      valid email is required
                     </span>
                   {/if}
                 </div>
@@ -246,7 +247,7 @@
             on:click={submit}
             type="button"
             class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">
-            {$_('create')}
+            Create
           </button>
           <button
             on:click={() => {
@@ -254,7 +255,7 @@
             }}
             type="button"
             class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
-            {$_('cancel')}
+            Cancel
           </button>
         </div>
       </div>

src/components/UserDetail.svelte

@@ -1,28 +1,15 @@
 <script>
   import { _ } from "svelte-i18n";
-  import lodashIsEqual from "lodash.isequal";
   import { UserService } from "@odit/lfk-client-js";
   import "gridjs/dist/theme/mermaid.css";
+  import { tracks as tracksstore } from "../store.js";
   import PromiseError from "./PromiseError.svelte";
   export let params;
   const user_promise = UserService.userControllerGetOne(params.userid);
-  let data_loaded = false;
-  let original_data = undefined;
-  $: editable_userdata = undefined;
   user_promise.then((data) => {
-    data_loaded = true;
+    console.log(data);
-    original_data = data;
+    tracksstore.set(data);
-    editable_userdata = data;
   });
-  // $: changes_performed = lodashIsEqual(original_data, editable_userdata);
-  $: changes_performed = !lodashIsEqual({ test: 1 }, { test: 1 });
-  function submit() {
-    if (data_loaded === true && changes_performed === true) {
-      console.log("ok, submitting...");
-    } else {
-      console.log("no changes performed");
-    }
-  }
 </script>
 
 {#await user_promise}
@@ -71,31 +58,14 @@
         </nav>
       </div>
     </div>
-    <div class="mb-8 text-3xl font-extrabold leading-tight">
+    <span
-      {user.firstname}
+      class="mb-4 text-3xl font-extrabold leading-tight">{user.firstname}
       {user.middlename || ''}
       {user.lastname}
-      <span data-id="user_actions_${user.id}">
+      <button
-        <button
+        type="button"
-          class="hidden w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-green-400 text-base font-medium text-white sm:w-auto sm:text-sm"
+        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
-          data-userid="${user.id}"
+        User</button></span>
-          onclick="user__delete_cancel()">{$_('cancel')}</button>
-        <button
-          class="hidden w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-500 text-base font-medium text-white sm:w-auto sm:text-sm"
-          data-userid="${user.id}"
-          onclick="user__delete_confirm()">{$_('confirm-delete')}</button>
-        <button
-          type="button"
-          class="w-full 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>
-        <button
-          disabled={!changes_performed}
-          class:opacity-50={!changes_performed}
-          type="button"
-          on:click={submit}
-          class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">{$_('save-changes')}</button>
-      </span>
-    </div>
-
     <!--  -->
     <div class="mt-2 flex items-center">
       <img
@@ -116,13 +86,8 @@
     <div class="mt-3 text-sm w-full">
       <input
         id="enabled"
-        on:change={() => {
-          editable_userdata.enabled = !editable_userdata.enabled;
-          // TODO: this reactive set does not work?
-        }}
         name="enabled"
         type="checkbox"
-        checked={editable_userdata.enabled}
         class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded" />
       <label
         for="enabled"
@@ -130,42 +95,34 @@
       <p class="text-gray-500">set the user active/ inactive</p>
     </div>
     <div class="text-sm w-full">
-      <label
+      <label for="firstname" class="font-medium text-gray-700">First name</label>
-        for="firstname"
-        class="font-medium text-gray-700">{$_('first-name')}</label>
       <input
         autocomplete="off"
-        placeholder={$_('first-name')}
+        placeholder="First name"
         type="text"
-        bind:value={editable_userdata.firstname}
         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 dark:bg-gray-900 dark:text-gray-100 rounded-md p-2" />
     </div>
     <div class="text-sm w-full">
-      <label
+      <label for="middlename" class="font-medium text-gray-700">Middle name</label>
-        for="middlename"
-        class="font-medium text-gray-700">{$_('middle-name')}</label>
       <input
         autocomplete="off"
-        placeholder={$_('middle-name')}
+        placeholder="Middle name"
         type="text"
-        bind:value={editable_userdata.middlename}
         name="middlename"
         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 dark:bg-gray-900 dark:text-gray-100 rounded-md p-2" />
     </div>
     <div class="text-sm w-full">
-      <label
+      <label for="lastname" class="font-medium text-gray-700">Last name</label>
-        for="lastname"
-        class="font-medium text-gray-700">{$_('last-name')}</label>
       <input
         autocomplete="off"
-        placeholder={$_('last-name')}
+        placeholder="Last name"
         type="text"
-        bind:value={editable_userdata.lastname}
         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 dark:bg-gray-900 dark:text-gray-100 rounded-md p-2" />
     </div>
   </section>
 {:catch error}
+  <!-- promise was rejected -->
   <PromiseError {error} />
 {/await}

src/components/Users.svelte

@@ -7,17 +7,19 @@
 
 <section class="container p-5">
   <span class="mb-1 text-3xl font-extrabold leading-tight">
-    {$_('users')}
+    Users
     <button
       on:click={() => {
         modal_open = true;
       }}
       type="button"
       class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">
-      {$_('create-user')}
+      Create User
     </button>
   </span>
-  <p class="mb-8 text-lg text-gray-500">{$_('manage-admin-users')}</p>
+  <p class="mb-8 text-lg text-gray-500">
+    manage admin users
+  </p>
   <UsersOverview />
 </section>
 <AddUserModal bind:modal_open />

src/components/UsersOverview.svelte

@@ -1,20 +1,25 @@
 <script>
-  import { _ } from "svelte-i18n";
+  import { _, json } from "svelte-i18n";
   import Toastify from "toastify-js";
-  import { UserService } from "@odit/lfk-client-js";
+  import TracksEmptyState from "./TracksEmptyState.svelte";
+  import { TrackService, 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 { users as usersstore } from "../store.js";
+  import { tracks as tracksstore } from "../store.js";
   import UsersEmptyState from "./UsersEmptyState.svelte";
-  $: searchvalue = "";
   $: userscache = [];
-  $: advanced_search = false;
+  $: blocked = [];
-  usersstore.subscribe((val) => {
+  let table;
+  let datatable;
+  let datatable_inited = false;
+  tracksstore.subscribe((val) => {
     userscache = val;
   });
   users_promise.then((data) => {
     console.log(data);
-    usersstore.set(data);
+    tracksstore.set(data);
   });
 </script>
 
@@ -29,26 +34,6 @@
   {#if userscache.length === 0}
     <UsersEmptyState />
   {:else}
-    {#if advanced_search}
-      advanced search
-    {:else}
-      <input
-        type="search"
-        bind:value={searchvalue}
-        placeholder={$_('datatable.search')}
-        aria-label={$_('datatable.search')}
-        class="gridjs-input gridjs-search-input mb-4" />
-    {/if}
-    <button
-      on:click={() => {
-        advanced_search = !advanced_search;
-      }}
-      type="button"
-      class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-gray-600 text-base font-medium text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 sm:ml-3 sm:w-auto sm:text-sm">
-      {#if advanced_search}
-        toggle simple search
-      {:else}toggle advanced search{/if}
-    </button>
     <div
       class="shadow border-b border-gray-200 sm:rounded-lg overflow-x-scroll">
       <table class="divide-y divide-gray-200 w-full">
@@ -59,6 +44,11 @@
               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">
@@ -76,65 +66,145 @@
         </thead>
         <tbody class="divide-y divide-gray-200">
           {#each users as u}
-            {#if Object.values(u)
+            <tr>
-              .toString()
+              <td class="px-6 py-4 whitespace-nowrap">
-              .toLowerCase()
+                <div class="flex items-center">
-              .includes(searchvalue)}
+                  {#if u.profilePic}
-              <tr>
+                    <div class="flex-shrink-0 h-10 w-10">
-                <td class="px-6 py-4 whitespace-nowrap">
+                      <img
-                  <div class="flex items-center">
+                        class="h-10 w-10 rounded-full"
-                    {#if u.profilePic}
+                        src={u.profilePic}
-                      <div class="flex-shrink-0 h-10 w-10">
+                        alt="" />
-                        <img
+                    </div>
-                          class="h-10 w-10 rounded-full"
+                  {/if}
-                          src={u.profilePic}
+                  <div class="ml-4">
-                          alt="" />
+                    <div
-                      </div>
+                      class="text-sm font-medium text-gray-900 dark:text-gray-100">
-                    {/if}
+                      {u.firstname}
-                    <div class="ml-4">
+                      {u.middlename || ''}
-                      <div
+                      {u.lastname}
-                        class="text-sm font-medium text-gray-900 dark:text-gray-100">
+                    </div>
-                        {u.firstname}
+                    <div class="text-sm text-gray-500">
-                        {u.middlename || ''}
+                      {u.email || u.username}
-                        {u.lastname}
-                      </div>
-                      <div class="text-sm text-gray-500">
-                        {u.email || u.username}
-                      </div>
                     </div>
                   </div>
-                </td>
+                </div>
-                <td class="px-6 py-4 whitespace-nowrap">
+              </td>
-                  {#if u.enabled}
+              <td class="px-6 py-4 whitespace-nowrap">
-                    <span
+                <div class="text-sm text-gray-900 dark:text-gray-100">
-                      class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Active</span>
+                  Regional Paradigm Technician
-                  {:else}
+                </div>
-                    <span
+                <div class="text-sm text-gray-500">Optimization</div>
-                      class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">Inactive</span>
+              </td>
-                  {/if}
+              <td class="px-6 py-4 whitespace-nowrap">
-                </td>
+                {#if u.enabled}
-                <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="./{u.id}"
-                    class="text-indigo-600 hover:text-indigo-900">Edit</a>
                   <span
-                    tabindex="0"
+                    class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Active</span>
-                    href="#"
+                {:else}
-                    class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">Delete</span>
+                  <span
-                </td>
+                    class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">Inactive</span>
-              </tr>
+                {/if}
-            {/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="./{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}

src/locales/en.json

@@ -7,15 +7,11 @@
     "application_name": "Lauf für Kaya! - Admin",
     "author": "Author",
     "by": "by",
-    "cancel": "Cancel",
     "cannot-reset-your-password-directly": "Bummer. We unfortunately cannot reset your password directly. Please send us a mail and confirm your identity",
     "changelog": "Changelog",
-    "confirm-delete": "Confirm Delete",
     "count_organizations": "# Organizations",
     "count_teams": "# Teams",
-    "create": "Create",
     "create-a-new-track": "Create a new Track",
-    "create-user": "Create User",
     "credits": "Credits",
     "dashboard-greeting": "hello there",
     "dashboard-title": "Dashboard",
@@ -34,7 +30,6 @@
         "no_matching_records_found": "No matching records found",
         "an_error_happened_while_fetching_the_data": "An error happened while fetching the data"
     },
-    "delete-user": "Delete User",
     "dependency_name": "Name",
     "dont-have-your-email-connected": "Don't have your email connected?",
     "dont-panic-were-resetting-it": "Don't panic, we're resetting it ✌",
@@ -42,8 +37,6 @@
     "email_address_or_username": "Email / username",
     "error_on_login": "Error on login",
     "faq": "FAQ",
-    "first-name": "First name",
-    "first-name-is-required": "First Name is required",
     "forgot_password?": "Forgot your password?",
     "general-stats": "General Stats",
     "general_promise_error": "😢 Error",
@@ -51,8 +44,6 @@
     "hallo": "hello",
     "installed-version": "Installed version",
     "invalid-mail-reset": "the provided email is invalid",
-    "last-name": "Last name",
-    "last-name-is-required": "Last Name is required",
     "lfk-is-os": "The \"Lauf für Kaya!\" Frontend is (like all other projects for the \"LfK!\" Also) an open source project.",
     "license": "License",
     "log_in": "Log in",
@@ -60,15 +51,12 @@
     "login_is_checked": "Login is being checked...",
     "logout": "Logout",
     "mail-validation-in-progress": "mail validation in progress...",
-    "manage-admin-users": "manage admin users",
-    "middle-name": "Middle name",
     "minimum-lap-time-in-s": "minimum lap time in s",
     "no-license-text-could-be-found": "No license text could be found 😢",
     "no-tracks-added-yet": "there are no tracks added yet.",
     "orgs": "Orgs",
     "oss_credit_description": "We use a lot of open source software on these projects, and would like to thank the following projects and contributors who help make open source great!",
     "password": "Password",
-    "password-is-required": "Password is required",
     "please-provide-the-required-information-to-add-a-new-track": "Please provide the required information to add a new track.",
     "profile-picture": "Profile Picture",
     "read-license": "Read License",
@@ -76,7 +64,6 @@
     "repo_link": "Link",
     "reset-my-password": "Reset my password",
     "runners": "Runners",
-    "save-changes": "Save Changes",
     "send-a-mail-to-lfk-odit-services": "send a mail to lfk@odit.services",
     "settings": "Settings",
     "signout": "Sign out",
@@ -93,7 +80,6 @@
     "track-name": "Track name",
     "tracks": "Tracks",
     "users": "Users",
-    "valid-email-is-required": "valid email is required",
     "welcome_wavinghand": "Welcome 👋",
     "your_profile": "Your Profile"
 }