Added contact selection via svelte select

ref #91

src/components/teams/TeamDetail.svelte

@@ -7,7 +7,7 @@
   import { getLocaleFromNavigator, _ } from "svelte-i18n";
   import Toastify from "toastify-js";
   import store from "../../store";
-  import Select from "svelte-select"
+  import Select from "svelte-select";
   import ImportRunnerModal from "../runners/ImportRunnerModal.svelte";
   import PromiseError from "../base/PromiseError.svelte";
   import ConfirmTeamDeletion from "./ConfirmTeamDeletion.svelte";
@@ -27,15 +27,12 @@
   $: data_changed = JSON.stringify(teamdata) === JSON.stringify(original);
   $: sponsoring_contracts_download_open = false;
   //
+  const getContactLabel = (option) =>
+    option.firstname + " " + (option.middlename || "") + " " + option.lastname;
   const promise = RunnerTeamService.runnerTeamControllerGetOne(
     params.teamid
   ).then((value) => {
     data_loaded = true;
-    if (value.contact) {
-      if (value.contact !== "null") {
-        value.contact = value.contact.id;
-      }
-    }
     teamdata = Object.assign(teamdata, value);
     original = Object.assign(original, value);
   });
@@ -76,13 +73,11 @@
       }).showToast();
       let postdata = teamdata;
       postdata.parentGroup = teamdata.parentGroup.id;
-      postdata.contact = postdata.contact === "null" ? null : postdata.contact;
+      postdata.contact = teamdata.contact?.id;
       RunnerTeamService.runnerTeamControllerPut(original.id, postdata)
         .then((resp) => {
           Object.assign(original, teamdata);
-          original = teamdata;
+          original = original;
-          Object.assign(original, teamdata);
-          //
           Toastify({
             text: "updated team",
             duration: 2500,
@@ -344,37 +339,45 @@
       <label
         for="contact"
         class="font-medium text-gray-700">{$_('contact')}</label>
-      <select
+      <Select
-        name="contact"
+        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"
-        bind:value={teamdata.contact}
+        getSelectionLabel={(option) => getContactLabel(option)}
-        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">
+        getOptionLabel={(option) => getContactLabel(option)}
-        <option value="null">no contact</option>
+        itemFilter={(label, filterText, option) => label
-        {#each contacts as c}
+            .toLowerCase()
-          <option value={c.id}>
+            .includes(
-            {c.firstname}
+              filterText.toLowerCase()
-            {c.middlename || ''}
+            ) || option.id.toString().startsWith(filterText.toLowerCase())}
-            {c.lastname}
+        items={contacts}
-          </option>
+        showChevron={true}
-        {/each}
+        placeholder={$_('no-contact-selected')}
-      </select>
+        noOptionsMessage={$_('no-contact-found')}
+        bind:selectedValue={teamdata.contact}
+        on:clear={() => (teamdata.contact = null)} />
     </div>
     <div class="text-sm w-full">
       <label
         for="org"
         class="font-medium text-gray-700">{$_('organization')}</label>
-        <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) => {return option.name}}
+        getSelectionLabel={(option) => {
-        getOptionLabel={(option) => {return option.name}}
+          return option.name;
-        itemFilter={(label, filterText, option) =>
+        }}
-          label.toLowerCase().includes(filterText.toLowerCase()) ||
+        getOptionLabel={(option) => {
-          option.id.toString().startsWith(filterText.toLowerCase())}
+          return option.name;
+        }}
+        itemFilter={(label, filterText, option) => label
+            .toLowerCase()
+            .includes(
+              filterText.toLowerCase()
+            ) || option.id.toString().startsWith(filterText.toLowerCase())}
         items={orgs}
         showChevron={true}
         placeholder={$_('search-for-an-organization-by-name-or-id')}
         noOptionsMessage={$_('no-organizations-found')}
         bind:selectedValue={teamdata.parentGroup}
-        on:clear={()=>(teamdata.parentGroup = null)} />
+        on:clear={() => (teamdata.parentGroup = null)} />
     </div>
   </section>
 {:else}

src/locales/en.json

@@ -314,5 +314,7 @@
   "no-runners-found": "No runners found",
   "search-for-an-organization-by-name-or-id": "Search for an organization (by name or id)",
   "no-organizations-found": "No organizations found",
-  "you-have-to-provide-an-organization": "You have to provide an organization"
+  "you-have-to-provide-an-organization": "You have to provide an organization",
+  "no-contact-found": "No contact found",
+  "no-contact-selected": "No contact selected"
 }