Initial component sort/cleanup

ref #68

src/components/orgs/OrgDetail.svelte

@@ -0,0 +1,259 @@
+<script>
+  import {
+    GroupContactService,
+    RunnerOrganizationService,
+  } from "@odit/lfk-client-js";
+  import { _ } from "svelte-i18n";
+  import Toastify from "toastify-js";
+  import store from "../../store";
+  import ConfirmOrgDeletion from "./ConfirmOrgDeletion.svelte";
+  import ImportRunnerModal from "../runners/ImportRunnerModal.svelte";
+  import PromiseError from "../base/PromiseError.svelte";
+  $: delete_triggered = false;
+  $: save_enabled = !data_changed;
+  export let params;
+  let orgdata = {};
+  let original = {};
+  let contacts = [];
+  $: data_loaded = false;
+  $: data_changed = JSON.stringify(orgdata) === JSON.stringify(original);
+  const promise = RunnerOrganizationService.runnerOrganizationControllerGetOne(
+    params.orgid
+  ).then((value) => {
+    data_loaded = true;
+    if (value.contact) {
+      if (value.contact !== "null") {
+        value.contact = value.contact.id;
+      }
+    }
+    orgdata = Object.assign(orgdata, value);
+    original = Object.assign(original, value);
+  });
+  GroupContactService.groupContactControllerGetAll().then((val) => {
+    contacts = val;
+  });
+  let modal_open = false;
+  let delete_org = {};
+  function deleteOrganization() {
+    // RunnerOrganizationService.runnerOrganizationControllerRemove(
+    //   original.id,
+    //   false
+    // )
+    //   .then((resp) => {
+    //     Toastify({
+    //       text: "Organization deleted",
+    //       duration: 500,
+    //       backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
+    //     }).showToast();
+    //     location.replace("./");
+    //   })
+    //   .catch((err) => {
+    modal_open = true;
+    delete_org = original;
+    // });
+  }
+  function submit() {
+    if (data_loaded === true && save_enabled) {
+      Toastify({
+        text: "updating organization",
+        duration: 2500,
+      }).showToast();
+      let postdata = orgdata;
+      postdata.contact = postdata.contact === "null" ? null : postdata.contact;
+      RunnerOrganizationService.runnerOrganizationControllerPut(
+        original.id,
+        postdata
+      )
+        .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 {
+    }
+  }
+  export let import_modal_open = false;
+</script>
+
+<ImportRunnerModal
+  on:cancelDelete={(event) => {
+    import_modal_open = false;
+  }}
+  current_runners={[]}
+  passed_team={{}}
+  passed_orgs={[]}
+  passed_org={orgdata}
+  opened_from="OrgDetail"
+  bind:import_modal_open />
+<ConfirmOrgDeletion bind:modal_open bind:delete_org />
+{#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('RUNNER:IMPORT')}
+          <button
+            on:click={() => {
+              import_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">
+            {$_('import-runners')}
+          </button>
+        {/if}
+        {#if store.state.jwtinfo.userdetails.permissions.includes('USER:DELETE')}
+          {#if delete_triggered}
+            <button
+              on:click={deleteOrganization}
+              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>
+    </div>
+    <div class="flex flex-row mb-4">
+      <div class="w-full">
+        <nav class="w-full flex">
+          <ol class="list-none flex flex-row items-center justify-start">
+            <li class="mr-2 flex items-center">
+              <svg
+                stroke="currentColor"
+                fill="none"
+                stroke-width="2"
+                viewBox="0 0 24 24"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                class="h-3 w-3 stroke-current"
+                height="1em"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"><path
+                  d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
+                <polyline points="9 22 9 12 15 12 15 22" /></svg>
+            </li>
+            <li class="flex items-center">
+              <a class="mr-2" href="/">Home</a><svg
+                stroke="currentColor"
+                fill="none"
+                stroke-width="2"
+                viewBox="0 0 24 24"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                class="h-3 w-3 mr-2 stroke-current"
+                height="1em"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"><line
+                  x1="5"
+                  y1="12"
+                  x2="19"
+                  y2="12" />
+                <polyline points="12 5 19 12 12 19" /></svg>
+            </li>
+            <li class="mr-2 flex items-center">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+                width="24"
+                height="24"><path fill="none" d="M0 0h24v24H0z" />
+                <path
+                  d="M21 20h2v2H1v-2h2V3a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v17zm-2 0V4H5v16h14zM8 11h3v2H8v-2zm0-4h3v2H8V7zm0 8h3v2H8v-2zm5 0h3v2h-3v-2zm0-4h3v2h-3v-2zm0-4h3v2h-3V7z" /></svg>
+            </li>
+            <li class="flex items-center">
+              <a class="mr-2" href="./">Orgs</a><svg
+                stroke="currentColor"
+                fill="none"
+                stroke-width="2"
+                viewBox="0 0 24 24"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                class="h-3 w-3 mr-2 stroke-current"
+                height="1em"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"><line
+                  x1="5"
+                  y1="12"
+                  x2="19"
+                  y2="12" />
+                <polyline points="12 5 19 12 12 19" /></svg>
+            </li>
+            <li class="flex items-center">
+              <span class="mr-2">Org-Details #{params.orgid}</span>
+            </li>
+          </ol>
+        </nav>
+      </div>
+    </div>
+    <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 rounded-md p-2" />
+    </div>
+    <div class="text-sm w-full">
+      <label
+        for="contact"
+        class="font-medium text-gray-700">{$_('contact')}</label>
+      <select
+        name="contact"
+        bind:value={orgdata.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 rounded-md p-2">
+        <option value="null">no contact</option>
+        {#each contacts as c}
+          <option value={c.id}>
+            {c.firstname}
+            {c.middlename || ''}
+            {c.lastname}
+          </option>
+        {/each}
+      </select>
+    </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 rounded-md p-2" />
+    </div>
+  </section>
+{:else}
+  {#await promise}
+    organization detail is being loaded...
+  {:catch error}
+    <PromiseError />
+  {/await}
+{/if}