🏬 OrgDetail ui

ref #16

src/components/OrgDetail.svelte

@@ -1,14 +1,55 @@
 <script>
+  import { RunnerOrganisationService } from "@odit/lfk-client-js";
+  import { _ } from "svelte-i18n";
+  import store from "../store";
+  import PromiseError from "./PromiseError.svelte";
+  $: delete_triggered = false;
+  $: save_enabled = false;
   export let params;
+  console.log(params);
+  let data_original = {};
+  $: data_loaded = false;
+  const promise = RunnerOrganisationService.runnerOrganisationControllerGetOne(
+    params.orgid
+  ).then((value) => {
+    data_loaded = true;
+    data_original = Object.assign(data_original, value);
+  });
 </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">
+      {data_original.name}
+      <span data-id="org_actions_${data_original.id}">
+        {#if store.state.jwtinfo.userdetails.permissions.includes('USER:DELETE')}
+          {#if delete_triggered}
+            <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">{$_('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-user')}</button>
+          {/if}
+        {/if}
+        {#if !delete_triggered}
+          <button
+            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 +121,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={data_original.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={data_original.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={data_original.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

@@ -1,6 +1,6 @@
 <script>
   import { _ } from "svelte-i18n";
-  import { UserService, RunnerOrganisationService } from "@odit/lfk-client-js";
+  import { RunnerOrganisationService } from "@odit/lfk-client-js";
   import "gridjs/dist/theme/mermaid.css";
   import store from "../store";
   import OrgsEmptyState from "./OrgsEmptyState.svelte";

src/locales/en.json

@@ -125,5 +125,7 @@
   "welcome_wavinghand": "Welcome 👋",
   "your_profile": "Your Profile",
   "organizations": "Organizations",
-  "create-organization": "Create Organization"
+  "create-organization": "Create Organization",
+  "contact": "Contact",
+  "address": "Address"
 }