From 08278b36a5ed8096ae1d8eed6d10dcc1abdc5943 Mon Sep 17 00:00:00 2001
From: Philipp Dormann <philipp.dormann1@gmail.com>
Date: Fri, 8 Jan 2021 21:19:43 +0100
Subject: [PATCH] basic User Components

ref #12
---
 src/components/AddUserModal.svelte    | 224 ++++++++++++++++++++++++++
 src/components/Users.svelte           |  19 ++-
 src/components/UsersDetail.svelte     | 131 +++++++++++++++
 src/components/UsersEmptyState.svelte |  14 ++
 src/store.js                          |   1 +
 5 files changed, 387 insertions(+), 2 deletions(-)
 create mode 100644 src/components/AddUserModal.svelte
 create mode 100644 src/components/UsersDetail.svelte
 create mode 100644 src/components/UsersEmptyState.svelte

diff --git a/src/components/AddUserModal.svelte b/src/components/AddUserModal.svelte
new file mode 100644
index 00000000..05a2b8f8
--- /dev/null
+++ b/src/components/AddUserModal.svelte
@@ -0,0 +1,224 @@
+<script>
+  import { _ } from "svelte-i18n";
+  import { clickOutside } from "./outsideclick";
+  import { focusTrap } from "svelte-focus-trap";
+  import { tracks as tracksstore } from "../store.js";
+  import { TrackService } from "@odit/lfk-client-js";
+  import Toastify from "toastify-js";
+  import "toastify-js/src/toastify.css";
+  export let modal_open;
+  let trackname_input;
+  function focus(el) {
+    el.focus();
+  }
+  $: trackname_input_value = "";
+  $: track_min_duration = 0;
+  $: tracklength = 0;
+  $: processed_last_submit = true;
+  $: smart_track_min_duration_placeholder = parseInt(tracklength || 0) * 0.369;
+  $: isTracknameValid = trackname_input_value.trim().length === 0;
+  $: isTracklengthValid = tracklength <= 0;
+  $: trackMintimevalid = track_min_duration >= 0;
+  $: createbtnenabled = !isTracknameValid && !isTracklengthValid;
+  (function () {
+    document.onkeydown = function (e) {
+      e = e || window.event;
+      if (e.key === "Escape") {
+        modal_open = false;
+      }
+      if (e.keyCode === 13) {
+        if (createbtnenabled === true) {
+          createbtnenabled = false;
+          submit();
+        }
+      }
+    };
+  })();
+  function submit() {
+    if (processed_last_submit === true) {
+      processed_last_submit = false;
+      const toast = Toastify({
+        text: $_("track-is-being-added"),
+        duration: -1,
+      }).showToast();
+      TrackService.trackControllerPost({
+        distance: parseInt(tracklength),
+        name: trackname_input_value,
+        minimumLapTime: track_min_duration,
+      })
+        .then((result) => {
+          trackname_input_value = "";
+          track_min_duration = 0;
+          tracklength = 0;
+          modal_open = false;
+          //
+          Toastify({
+            text: $_("track-added"),
+            duration: 500,
+            backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
+          }).showToast();
+          let storeval = [];
+          tracksstore.subscribe((val) => {
+            storeval = val;
+          });
+          storeval.push(result);
+          tracksstore.set(storeval);
+        })
+        .catch((err) => {
+          //
+        })
+        .finally(() => {
+          processed_last_submit = true;
+          //
+          toast.hideToast();
+        });
+    }
+  }
+</script>
+
+{#if modal_open}
+  <div
+    class="fixed z-10 inset-0 overflow-y-auto"
+    use:focusTrap
+    use:clickOutside
+    on:click_outside={() => {
+      modal_open = false;
+    }}>
+    <div
+      class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
+      <div class="fixed inset-0 transition-opacity" aria-hidden="true">
+        <div
+          class="absolute inset-0 bg-gray-500 opacity-75"
+          data-id="modal_backdrop" />
+      </div>
+      <span
+        class="hidden sm:inline-block sm:align-middle sm:h-screen"
+        aria-hidden="true">&#8203;</span>
+      <div
+        class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="modal-headline">
+        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+          <div class="sm:flex sm:items-start">
+            <div
+              class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10">
+              <svg
+                class="h-6 w-6 text-blue-600"
+                fill="none"
+                width="24"
+                height="24"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 640 512"><path
+                  fill="currentColor"
+                  d="M635.7 167.2L556.1 31.7c-8.8-15-28.3-20.1-43.5-11.5l-69 39.1L503.3 161c2.2 3.8.9 8.5-2.9 10.7l-13.8 7.8c-3.8 2.2-8.7.9-10.9-2.9L416 75l-55.2 31.3 27.9 47.4c2.2 3.8.9 8.5-2.9 10.7l-13.8 7.8c-3.8 2.2-8.7.9-10.9-2.9L333.2 122 278 153.3 337.8 255c2.2 3.7.9 8.5-2.9 10.7l-13.8 7.8c-3.8 2.2-8.7.9-10.9-2.9l-59.7-101.7-55.2 31.3 27.9 47.4c2.2 3.8.9 8.5-2.9 10.7l-13.8 7.8c-3.8 2.2-8.7.9-10.9-2.9l-27.9-47.5-55.2 31.3 59.7 101.7c2.2 3.7.9 8.5-2.9 10.7l-13.8 7.8c-3.8 2.2-8.7.9-10.9-2.9L84.9 262.9l-69 39.1C.7 310.7-4.6 329.8 4.2 344.8l79.6 135.6c8.8 15 28.3 20.1 43.5 11.5L624.1 210c15.2-8.6 20.4-27.8 11.6-42.8z" /></svg>
+            </div>
+            <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
+              <h3 class="text-lg leading-6 font-medium text-gray-900">
+                {$_('create-a-new-track')}
+              </h3>
+              <div class="mt-2 mb-6">
+                <p class="text-sm text-gray-500">
+                  {$_('please-provide-the-required-information-to-add-a-new-track')}
+                </p>
+              </div>
+              <div class="grid grid-cols-6 gap-6">
+                <div class="col-span-6">
+                  <label
+                    for="trackname"
+                    class="block text-sm font-medium text-gray-700">{$_('track-name')}</label>
+                  <input
+                    use:focus
+                    autocomplete="off"
+                    placeholder={$_('track-name')}
+                    class:border-red-500={isTracknameValid}
+                    class:focus:border-red-500={isTracknameValid}
+                    class:focus:ring-red-500={isTracknameValid}
+                    bind:value={trackname_input_value}
+                    bind:this={trackname_input}
+                    type="text"
+                    name="trackname"
+                    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 isTracknameValid}
+                    <span
+                      class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
+                      Track name must not be empty
+                    </span>
+                  {/if}
+                </div>
+                <div class="col-span-6">
+                  <label
+                    for="track_length_m"
+                    class="block text-sm font-medium text-gray-700">{$_('track-length-in-m')}</label>
+                  <div class="mt-1 flex rounded-md shadow-sm">
+                    <input
+                      autocomplete="off"
+                      class:border-red-500={isTracklengthValid}
+                      class:focus:border-red-500={isTracklengthValid}
+                      class:focus:ring-red-500={isTracklengthValid}
+                      bind:value={tracklength}
+                      type="number"
+                      name="track_length_m"
+                      class="focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full rounded-none rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 p-2"
+                      placeholder="1000" />
+                    <span
+                      class="inline-flex items-center px-3 rounded-r-md border border-gray-300 bg-gray-50 text-gray-500 text-sm">m</span>
+                  </div>
+                  {#if isTracklengthValid}
+                    <span
+                      class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
+                      Track length must be greater than 0
+                    </span>
+                  {/if}
+                </div>
+                <div class="col-span-6">
+                  <label
+                    for="track_min_duration"
+                    class="block text-sm font-medium text-gray-700">{$_('minimum-lap-time-in-s')}</label>
+                  <div class="mt-1 flex rounded-md shadow-sm">
+                    <input
+                      autocomplete="off"
+                      class:border-red-500={!trackMintimevalid}
+                      class:focus:border-red-500={!trackMintimevalid}
+                      class:focus:ring-red-500={!trackMintimevalid}
+                      bind:value={track_min_duration}
+                      type="number"
+                      name="track_min_duration"
+                      class="focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full rounded-none rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 p-2"
+                      placeholder={smart_track_min_duration_placeholder} />
+                    <span
+                      class="inline-flex items-center px-3 rounded-r-md border border-gray-300 bg-gray-50 text-gray-500 text-sm">s</span>
+                  </div>
+                  {#if !trackMintimevalid}
+                    <span
+                      class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
+                      minimum lap time must be a positive number or 0
+                    </span>
+                  {/if}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
+          <button
+            disabled={!createbtnenabled}
+            class:opacity-50={!createbtnenabled}
+            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
+          </button>
+          <button
+            on:click={() => {
+              modal_open = false;
+            }}
+            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
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+{/if}
diff --git a/src/components/Users.svelte b/src/components/Users.svelte
index 9d134223..3dea5a90 100644
--- a/src/components/Users.svelte
+++ b/src/components/Users.svelte
@@ -1,10 +1,25 @@
 <script>
   import { _ } from "svelte-i18n";
+  import AddUserModal from "./AddUserModal.svelte";
+  export let modal_open = false;
+  import UsersDetail from "./UsersDetail.svelte";
 </script>
 
 <section class="container p-5">
   <span class="mb-1 text-3xl font-extrabold leading-tight text-gray-900">
-    {$_('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
+    </button>
   </span>
-  <p class="mb-8 text-lg text-gray-500">admin users</p>
+  <p class="mb-8 text-lg text-gray-500">
+    manage admin users
+  </p>
+  <UsersDetail />
 </section>
+<AddUserModal bind:modal_open />
diff --git a/src/components/UsersDetail.svelte b/src/components/UsersDetail.svelte
new file mode 100644
index 00000000..9f0a2c30
--- /dev/null
+++ b/src/components/UsersDetail.svelte
@@ -0,0 +1,131 @@
+<script>
+  import { _, json } from "svelte-i18n";
+  import Toastify from "toastify-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 { tracks as tracksstore } from "../store.js";
+  import UsersEmptyState from "./UsersEmptyState.svelte";
+  $: userscache = [];
+  $: blocked = [];
+  let table;
+  let datatable;
+  let datatable_inited = false;
+  tracksstore.subscribe((val) => {
+    userscache = val;
+  });
+  users_promise.then((data) => {
+    console.log(data);
+    tracksstore.set(data);
+  });
+</script>
+
+{#await users_promise}
+  <div
+    class="bg-teal-lightest border-t-4 border-teal rounded-b text-teal-darkest px-4 py-3 shadow-md my-2"
+    role="alert">
+    <p class="font-bold">users are being loaded...</p>
+    <p class="text-sm">{$_('this-might-take-a-moment')}</p>
+  </div>
+{:then users}
+  {#if userscache.length === 0}
+    <UsersEmptyState />
+  {:else}
+    <div
+      class="shadow border-b border-gray-200 sm:rounded-lg overflow-x-scroll">
+      <table class="divide-y divide-gray-200 w-full">
+        <thead class="bg-gray-50">
+          <tr>
+            <th
+              scope="col"
+              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">
+              Status
+            </th>
+            <th
+              scope="col"
+              class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+              Role
+            </th>
+            <th scope="col" class="relative px-6 py-3">
+              <span class="sr-only">Edit</span>
+            </th>
+          </tr>
+        </thead>
+        <tbody class="bg-white 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">
+                      {u.firstname}
+                    </div>
+                    <div class="text-sm text-gray-500">
+                      {u.email || u.username}
+                    </div>
+                  </div>
+                </div>
+              </td>
+              <td class="px-6 py-4 whitespace-nowrap">
+                <div class="text-sm text-gray-900">
+                  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}
+                  <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="#"
+                  class="text-indigo-600 hover:text-indigo-900">Edit</a>
+                <a href="#" class="text-red-600 hover:text-red-900">Delete</a>
+              </td>
+            </tr>
+          {/each}
+        </tbody>
+      </table>
+    </div>
+  {/if}
+{:catch error}
+  <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>
+{/await}
diff --git a/src/components/UsersEmptyState.svelte b/src/components/UsersEmptyState.svelte
new file mode 100644
index 00000000..a4bd3ba7
--- /dev/null
+++ b/src/components/UsersEmptyState.svelte
@@ -0,0 +1,14 @@
+<script>
+  import { _ } from "svelte-i18n";
+  import AddUserModal from "./AddUserModal.svelte";
+  let modal_open = false;
+</script>
+
+<div class="text-center items-center justify-center">
+  <p class="mb-16 text-lg text-gray-500">
+    <span class="font-bold">There are no users added yet.</span><br />
+    <span>Add your first user</span>
+  </p>
+</div>
+
+<AddUserModal bind:modal_open />
diff --git a/src/store.js b/src/store.js
index 2131e521..d4dd9ba9 100644
--- a/src/store.js
+++ b/src/store.js
@@ -1,5 +1,6 @@
 import { writable } from 'svelte/store';
 
+export let users = writable([]);
 export let tracks = writable([]);
 const store = () => {
 	const state = {