Merge pull request 'feature/16-org-management' (#32) from feature/16-org-management into dev

Reviewed-on: #32
❌ close #16

src/components/AddOrgModal.svelte

@@ -0,0 +1,162 @@
+<script>
+  import { _ } from "svelte-i18n";
+  import { clickOutside } from "./outsideclick";
+  import { focusTrap } from "svelte-focus-trap";
+  import { RunnerOrganisationService } from "@odit/lfk-client-js";
+  import Toastify from "toastify-js";
+  export let modal_open;
+  export let current_organizations;
+  let name_input_dom;
+  function focus(el) {
+    el.focus();
+  }
+  $: name = "";
+  $: processed_last_submit = true;
+  $: isOrgnameValid = name.trim().length !== 0;
+  $: createbtnenabled = isOrgnameValid;
+  (() => {
+    document.onkeydown = (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: "Organization is being added...",
+        duration: -1,
+      }).showToast();
+      RunnerOrganisationService.runnerOrganisationControllerPost({
+        name,
+        address: undefined,
+        contact: undefined,
+      })
+        .then((result) => {
+          console.log(result);
+          name = "";
+          modal_open = false;
+          //
+          Toastify({
+            text: "Organization added",
+            duration: 500,
+            backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
+          }).showToast();
+          current_organizations = current_organizations.concat([result]);
+        })
+        .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="currentColor"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+                width="24"
+                height="24"><path
+                  d="M17 19h2v-8h-6v8h2v-6h2v6zM3 19V4a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v5h2v10h1v2H2v-2h1zm4-8v2h2v-2H7zm0 4v2h2v-2H7zm0-8v2h2V7H7z" /></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 Organization
+              </h3>
+              <div class="mt-2 mb-6">
+                <p class="text-sm text-gray-500">
+                  Please provide the required information to add a new
+                  organization.
+                </p>
+              </div>
+              <div class="grid grid-cols-6 gap-6">
+                <div class="col-span-6">
+                  <label
+                    for="firstname"
+                    class="block text-sm font-medium text-gray-700">Name</label>
+                  <input
+                    use:focus
+                    autocomplete="off"
+                    placeholder="Name"
+                    class:border-red-500={!isOrgnameValid}
+                    class:focus:border-red-500={!isOrgnameValid}
+                    class:focus:ring-red-500={!isOrgnameValid}
+                    bind:value={name}
+                    bind:this={name_input_dom}
+                    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 !isOrgnameValid}
+                    <span
+                      class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
+                      Organization name is required
+                    </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}

src/components/OrgDetail.svelte

@@ -1,14 +1,95 @@
 <script>
+  import { RunnerOrganisationService } from "@odit/lfk-client-js";
+  import { _ } from "svelte-i18n";
+  import Toastify from "toastify-js";
+  import store from "../store";
+  import PromiseError from "./PromiseError.svelte";
+  $: delete_triggered = false;
+  $: save_enabled = !data_changed;
   export let params;
+  let orgdata = {};
+  let original = {};
+  $: data_loaded = false;
+  $: data_changed = JSON.stringify(orgdata) === JSON.stringify(original);
+  const promise = RunnerOrganisationService.runnerOrganisationControllerGetOne(
+    params.orgid
+  ).then((value) => {
+    data_loaded = true;
+    orgdata = Object.assign(orgdata, value);
+    original = Object.assign(original, value);
+  });
+  function deleteOrganisation() {
+    RunnerOrganisationService.runnerOrganisationControllerRemove(
+      original.id,
+      true
+    )
+      .then((resp) => {
+        location.replace("./");
+      })
+      .catch((err) => {});
+  }
+  function submit() {
+    if (data_loaded === true && save_enabled) {
+      Toastify({
+        text: "updating organization",
+        duration: 2500,
+      }).showToast();
+      RunnerOrganisationService.runnerOrganisationControllerPut(
+        original.id,
+        orgdata
+      )
+        .then((resp) => {
+          Object.assign(original, orgdata);
+          original = orgdata;
+          Object.assign(original, orgdata);
+          //
+          Toastify({
+            text: "updated organization",
+            duration: 2500,
+            backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
+          }).showToast();
+        })
+        .catch((err) => {});
+    } else {
+    }
+  }
 </script>
 
-<section class="container p-5">
-  <span class="mb-1 text-3xl font-extrabold leading-tight">
-    Orgs
+{#if data_loaded}
+  <section class="container p-5">
+    <div class="mb-8 text-3xl font-extrabold leading-tight">
+      {original.name}
+      <span data-id="org_actions_${orgdata.id}">
+        {#if store.state.jwtinfo.userdetails.permissions.includes('USER:DELETE')}
+          {#if delete_triggered}
+            <button
+              on:click={deleteOrganisation}
+              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">{$_('confirm-delete')}</button>
+            <button
+              on:click={() => {
+                delete_triggered = !delete_triggered;
+              }}
+              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-400 text-base font-medium text-white sm:w-auto sm:text-sm">{$_('cancel')}</button>
+          {/if}
+          {#if !delete_triggered}
+            <button
+              on:click={() => {
+                delete_triggered = true;
+              }}
+              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-organization')}</button>
+          {/if}
+        {/if}
+        {#if !delete_triggered}
+          <button
+            on:click={submit}
+            disabled={!save_enabled}
+            class:opacity-50={!save_enabled}
+            type="button"
+            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>
+        {/if}
       </span>
-  <p class="mb-8 text-lg text-gray-500">
-    configure the tracks & minimum lap times
-  </p>
+    </div>
     <div class="flex flex-row mb-4">
       <div class="w-full">
         <nav class="w-full flex">
@@ -80,4 +161,45 @@
         </nav>
       </div>
     </div>
-</section>
+    <div class="text-sm w-full">
+      <label for="name" class="font-medium text-gray-700">Name</label>
+      <input
+        autocomplete="off"
+        placeholder="Name"
+        type="text"
+        bind:value={orgdata.name}
+        name="name"
+        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
+        for="contact"
+        class="font-medium text-gray-700">{$_('contact')}</label>
+      <input
+        autocomplete="off"
+        placeholder={$_('contact')}
+        type="text"
+        bind:value={orgdata.contact}
+        name="contact"
+        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
+        for="address"
+        class="font-medium text-gray-700">{$_('address')}</label>
+      <input
+        autocomplete="off"
+        placeholder={$_('address')}
+        type="text"
+        bind:value={orgdata.address}
+        name="address"
+        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>
+{:else}
+  {#await promise}
+    organization detail is being loaded...
+  {:catch error}
+    <PromiseError />
+  {/await}
+{/if}

src/components/OrgOverview.svelte

@@ -0,0 +1,157 @@
+<script>
+  import { _ } from "svelte-i18n";
+  import { RunnerOrganisationService } from "@odit/lfk-client-js";
+  import "gridjs/dist/theme/mermaid.css";
+  import store from "../store";
+  import OrgsEmptyState from "./OrgsEmptyState.svelte";
+  $: searchvalue = "";
+  $: active_deletes = [];
+  export let current_organizations = [];
+
+  const promise = RunnerOrganisationService.runnerOrganisationControllerGetAll().then(
+    (val) => {
+      current_organizations = val;
+    }
+  );
+</script>
+
+{#if store.state.jwtinfo.userdetails.permissions.includes('ORGANISATION:GET')}
+  {#await 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">organizations are being loaded...</p>
+      <p class="text-sm">{$_('this-might-take-a-moment')}</p>
+    </div>
+  {:then}
+    {#if current_organizations.length === 0}
+      <OrgsEmptyState />
+    {:else}
+      <input
+        type="search"
+        bind:value={searchvalue}
+        placeholder={$_('datatable.search')}
+        aria-label={$_('datatable.search')}
+        class="gridjs-input gridjs-search-input mb-4" />
+      <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">
+                Address
+              </th>
+              <th
+                scope="col"
+                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                Contact
+              </th>
+              <th scope="col" class="relative px-6 py-3">
+                <span class="sr-only">Action</span>
+              </th>
+            </tr>
+          </thead>
+          <tbody class="divide-y divide-gray-200">
+            {#each current_organizations as o}
+              {#if Object.values(o)
+                .toString()
+                .toLowerCase()
+                .includes(searchvalue)}
+                <tr data-rowid="org_{o.id}">
+                  <td class="px-6 py-4 whitespace-nowrap">
+                    <div class="flex items-center">
+                      <div class="ml-4">
+                        <div
+                          class="text-sm font-medium text-gray-900 dark:text-gray-100">
+                          {o.name}
+                        </div>
+                      </div>
+                    </div>
+                  </td>
+                  <td class="px-6 py-4 whitespace-nowrap">
+                    <div class="flex items-center">
+                      <div class="ml-4">
+                        <div
+                          class="text-sm font-medium text-gray-900 dark:text-gray-100">
+                          {#if o.address}
+                            {JSON.stringify(o.address)}
+                          {:else}no address specified{/if}
+                        </div>
+                      </div>
+                    </div>
+                  </td>
+                  <td class="px-6 py-4 whitespace-nowrap">
+                    <div class="flex items-center">
+                      <div class="ml-4">
+                        <div
+                          class="text-sm font-medium text-gray-900 dark:text-gray-100">
+                          {#if o.contact}
+                            {JSON.stringify(o.contact)}
+                          {:else}no contact specified{/if}
+                        </div>
+                      </div>
+                    </div>
+                  </td>
+                  {#if active_deletes[o.id] === true}
+                    <td
+                      class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
+                      <button
+                        on:click={() => {
+                          active_deletes[o.id] = false;
+                        }}
+                        tabindex="0"
+                        class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer">Cancel
+                        Delete</button>
+                      <button
+                        on:click={() => {
+                          RunnerOrganisationService.runnerOrganisationControllerRemove(o.id, true)
+                            .then((resp) => {
+                              current_organizations = current_organizations.filter((obj) => obj.id !== o.id);
+                            })
+                            .catch((err) => {
+                              // error deleting user
+                            });
+                        }}
+                        tabindex="0"
+                        class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">Confirm
+                        Delete</button>
+                    </td>
+                  {:else}
+                    <td
+                      class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
+                      <a
+                        href="./{o.id}"
+                        class="text-indigo-600 hover:text-indigo-900">Edit</a>
+                      {#if store.state.jwtinfo.userdetails.permissions.includes('ORGANISATION:DELETE')}
+                        <button
+                          on:click={() => {
+                            active_deletes[o.id] = true;
+                          }}
+                          tabindex="0"
+                          class="ml-4 text-red-600 hover:text-red-900 cursor-pointer">Delete</button>
+                      {/if}
+                    </td>
+                  {/if}
+                </tr>
+              {/if}
+            {/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}
+{/if}

src/components/Orgs.svelte

@@ -1,13 +1,31 @@
 <script>
   import { _ } from "svelte-i18n";
+  import store from "../store";
+  import AddOrgModal from "./AddOrgModal.svelte";
+  export let modal_open = false;
+  import OrgOverview from "./OrgOverview.svelte";
+  console.log(store.state.jwtinfo.userdetails.permissions);
+  let current_organizations = [];
 </script>
 
 <section class="container p-5">
   <span class="mb-1 text-3xl font-extrabold leading-tight">
-    Orgs
+    {$_('organizations')}
+    {#if store.state.jwtinfo.userdetails.permissions.includes('ORGANISATION:CREATE')}
+      <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-organization')}
+      </button>
+    {/if}
   </span>
-  <p class="mb-8 text-lg text-gray-500">
-    add, delete, edit organizations
-  </p>
-  <nav><a class="underline" href="./1">Org 1</a></nav>
+  <p class="mb-8 text-lg text-gray-500">manage runner organizations</p>
+  <OrgOverview bind:current_organizations />
 </section>
+
+{#if store.state.jwtinfo.userdetails.permissions.includes('ORGANISATION:CREATE')}
+  <AddOrgModal bind:current_organizations bind:modal_open />
+{/if}

src/components/OrgsEmptyState.svelte

@@ -0,0 +1,15 @@
+<script>
+  import { _ } from "svelte-i18n";
+  import AddOrgModal from "./AddOrgModal.svelte";
+  let modal_open = false;
+  let current_organizations = [];
+</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 organizations added yet.</span><br />
+    <span>Add your first organization</span>
+  </p>
+</div>
+
+<AddOrgModal bind:modal_open bind:current_organizations />

src/locales/en.json

@@ -123,5 +123,10 @@
   "users": "Users",
   "valid-email-is-required": "valid email is required",
   "welcome_wavinghand": "Welcome 👋",
-    "your_profile": "Your Profile"
+  "your_profile": "Your Profile",
+  "organizations": "Organizations",
+  "create-organization": "Create Organization",
+  "contact": "Contact",
+  "address": "Address",
+  "delete-organization": "Delete Organization"
 }