From 6b590671bcb95c8c223860137ffbf2c82d05a144 Mon Sep 17 00:00:00 2001
From: Nicolai Ort <info@nicolai-ort.com>
Date: Wed, 17 Mar 2021 11:02:43 +0100
Subject: [PATCH] Org detail now uses svelte select

ref #91
---
 src/components/orgs/OrgDetail.svelte | 54 ++++++++++++++++------------
 1 file changed, 32 insertions(+), 22 deletions(-)

diff --git a/src/components/orgs/OrgDetail.svelte b/src/components/orgs/OrgDetail.svelte
index 1616c08c..ca14e5f0 100644
--- a/src/components/orgs/OrgDetail.svelte
+++ b/src/components/orgs/OrgDetail.svelte
@@ -9,6 +9,7 @@
   import ConfirmOrgDeletion from "./ConfirmOrgDeletion.svelte";
   import ImportRunnerModal from "../runners/ImportRunnerModal.svelte";
   import PromiseError from "../base/PromiseError.svelte";
+  import Select from "svelte-select";
   $: delete_triggered = false;
   $: address_valid_or_none =
     (isAddress1Valid && iszipcodevalid && iscityvalid) ||
@@ -25,16 +26,12 @@
   $: iszipcodevalid = editable.address?.postalcode?.trim().length !== 0;
   $: iscityvalid = editable.address?.city?.trim().length !== 0;
   $: sponsoring_contracts_download_open = false;
-  
+  const getContactLabel = (option) =>
+    option.firstname + " " + (option.middlename || "") + " " + option.lastname;
   const promise = RunnerOrganizationService.runnerOrganizationControllerGetOne(
     params.orgid
   ).then((value) => {
     data_loaded = true;
-    if (value.contact) {
-      if (value.contact !== "null") {
-        value.contact = value.contact.id;
-      }
-    }
     value.address_checked = value.address.address1 !== null;
     if (value.address_checked === false) {
       value.address = {
@@ -91,13 +88,14 @@
       if (postdata.address_checked === false) {
         postdata.address = null;
       }
-      postdata.contact = postdata.contact === "null" ? null : postdata.contact;
+      postdata.contact = postdata.contact?.id;
       RunnerOrganizationService.runnerOrganizationControllerPut(
         original_object.id,
         postdata
       )
         .then((resp) => {
-          original = JSON.stringify(editable);
+          original_object = Object.assign({}, editable);
+          original = JSON.stringify(original_object);
           Toastify({
             text: $_("updated-organization"),
             duration: 2500,
@@ -188,7 +186,17 @@
               aria-haspopup="true"
               aria-expanded="true">
               {$_('generate-sponsoring-contracts')}
-              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="-mr-1 ml-2 h-5 w-5"><path fill="none" d="M0 0h24v24H0z"/><path fill="currentColor" d="M3 19h18v2H3v-2zm10-5.83l6.07-6.07 1.42 1.41L12 17 3.52 8.52l1.4-1.42L11 13.17V2h2v11.17z"/></svg>
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="24"
+                height="24"
+                viewBox="0 0 24 24"
+                class="-mr-1 ml-2 h-5 w-5"><path
+                  fill="none"
+                  d="M0 0h24v24H0z" />
+                <path
+                  fill="currentColor"
+                  d="M3 19h18v2H3v-2zm10-5.83l6.07-6.07 1.42 1.41L12 17 3.52 8.52l1.4-1.42L11 13.17V2h2v11.17z" /></svg>
             </button>
           </div>
           {#if sponsoring_contracts_download_open}
@@ -349,19 +357,21 @@
       <label
         for="contact"
         class="font-medium text-gray-700">{$_('contact')}</label>
-      <select
-        name="contact"
-        bind:value={editable.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>
+      <Select
+        containerClasses="rounded-l-md 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"
+        getSelectionLabel={(option) => getContactLabel(option)}
+        getOptionLabel={(option) => getContactLabel(option)}
+        itemFilter={(label, filterText, option) => label
+            .toLowerCase()
+            .includes(
+              filterText.toLowerCase()
+            ) || option.id.toString().startsWith(filterText.toLowerCase())}
+        items={contacts}
+        showChevron={true}
+        placeholder={$_('no-contact-selected')}
+        noOptionsMessage={$_('no-contact-found')}
+        bind:selectedValue={editable.contact}
+        on:clear={() => (editable.contact = null)} />
     </div>
     <!--  -->
     <div class="flex items-start mt-2">