Added select workaround for all things team🏠

ref #98

src/components/teams/AddTeamModal.svelte

@@ -35,7 +35,9 @@
   $: parentGroup = undefined;
   $: orgs = [];
   RunnerOrganizationService.runnerOrganizationControllerGetAll().then((val) => {
-    orgs = val;
+    orgs = val.map((r) => {
+      return { label: r.name, value: r };
+    });
   });
   function submit() {
     if (processed_last_submit === true) {
@@ -148,24 +150,18 @@
                     class="block text-sm font-medium text-gray-700">{$_('organization')}</label>
                   <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;
-                    }}
-                    getOptionLabel={(option) => {
-                      return option.name;
-                    }}
                     itemFilter={(label, filterText, option) => label
                         .toLowerCase()
                         .includes(
                           filterText.toLowerCase()
-                        ) || option.id
+                        ) || option.value.id
                         .toString()
                         .startsWith(filterText.toLowerCase())}
                     items={orgs}
                     showChevron={true}
                     placeholder={$_('search-for-an-organization-by-name-or-id')}
                     noOptionsMessage={$_('no-organizations-found')}
-                    on:select={(selectedValue) => (parentGroup = selectedValue.detail.id)}
+                    on:select={(selectedValue) => (parentGroup = selectedValue.detail.value.id)}
                     on:clear={() => (parentGroup = null)} />
                   {#if !parentGroup}
                     <span

src/components/teams/TeamDetail.svelte

@@ -11,6 +11,7 @@
   import ImportRunnerModal from "../runners/ImportRunnerModal.svelte";
   import PromiseError from "../base/PromiseError.svelte";
   import ConfirmTeamDeletion from "./ConfirmTeamDeletion.svelte";
+import Teams from "./Teams.svelte";
   let [teamdata, original, delete_team, orgs, contacts, modal_open] = [
     {},
     {},
@@ -22,10 +23,12 @@
   export let params;
   export let import_modal_open = false;
   $: delete_triggered = false;
-  $: save_enabled = !data_changed && (teamdata.parentGroup != null);
+  $: save_enabled = !data_changed && teamdata.parentGroup != null;
   $: data_loaded = false;
   $: data_changed = JSON.stringify(teamdata) === JSON.stringify(original);
   $: sponsoring_contracts_download_open = false;
+  $: group = {};
+  $: contact = {};
   //
   const getContactLabel = (option) =>
     option.firstname + " " + (option.middlename || "") + " " + option.lastname;
@@ -37,10 +40,21 @@
     original = Object.assign(original, value);
   });
   RunnerOrganizationService.runnerOrganizationControllerGetAll().then((val) => {
-    orgs = val;
+    orgs = val.map((r) => {
+      return { label: r.name, value: r };
+    });
+    group = orgs.find((g) => g.value.id == teamdata.parentGroup.id);
   });
   GroupContactService.groupContactControllerGetAll().then((val) => {
-    contacts = val;
+    contacts = val.map((r) => {
+      return { label: getContactLabel(r), value: r };
+    });
+    if(teamdata.contact){
+      contact = contacts.find((g) => g.value.id == teamdata.contact.id);
+    }
+    else{
+      contact = null;
+    }
   });
   document.addEventListener("click", function (e) {
     if (
@@ -341,18 +355,19 @@
         class="font-medium text-gray-700">{$_('contact')}</label>
       <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())}
+            ) || option.value.id
+            .toString()
+            .startsWith(filterText.toLowerCase())}
         items={contacts}
         showChevron={true}
         placeholder={$_('no-contact-selected')}
         noOptionsMessage={$_('no-contact-found')}
-        bind:selectedValue={teamdata.contact}
+        bind:selectedValue={contact}
+        on:select={(selectedValue)=> teamdata.contact = selectedValue.detail.value}
         on:clear={() => (teamdata.contact = null)} />
     </div>
     <div class="text-sm w-full">
@@ -361,22 +376,17 @@
         class="font-medium text-gray-700">{$_('organization')}</label>
       <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;
-        }}
-        getOptionLabel={(option) => {
-          return option.name;
-        }}
         itemFilter={(label, filterText, option) => label
             .toLowerCase()
             .includes(
               filterText.toLowerCase()
-            ) || option.id.toString().startsWith(filterText.toLowerCase())}
+            ) || option.id.value.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}
+        bind:selectedValue={group}
+        on:select={(selectedValue)=> teamdata.parentGroup = selectedValue.detail.value}
         on:clear={() => (teamdata.parentGroup = null)} />
     </div>
   </section>