Merge pull request 'Svelte select dropdown fix bugfix/98-dropdowns' (#100) from bugfix/98-dropdowns into dev

Reviewed-on: #100

src/components/donations/AddDonationModal.svelte

@@ -15,7 +15,7 @@
     option.firstname + " " + (option.middlename || "") + " " + option.lastname;
   const filterDonors = (label, filterText, option) =>
     label.toLowerCase().includes(filterText.toLowerCase()) ||
-    option.id.toString().startsWith(filterText.toLowerCase());
+    option.value.id.toString().startsWith(filterText.toLowerCase());
   function focus(el) {
     el.focus();
   }
@@ -25,12 +25,14 @@
   $: runners = [];
   $: is_fixed = false;
   DonorService.donorControllerGetAll().then((val) => {
-    donors = val;
+    donors = val.map((r) => {
-    donor = donors[0].id || 0;
+      return { label: getDonorLabel(r), value: r };
+    });
   });
   RunnerService.runnerControllerGetAll().then((val) => {
-    runners = val;
+    runners = val.map((r) => {
-    runner = runners[0].id || 0;
+      return { label: getDonorLabel(r), value: r };
+    });
   });
   $: amount_input = 0;
   $: processed_last_submit = true;
@@ -184,7 +186,6 @@
             </div>
             <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
               <h3 class="text-lg leading-6 font-medium text-gray-900">
-                <!-- TODO: -->
                 {#if is_fixed}
                   {$_('create-a-new-fixed-donation')}
                 {:else}{$_('create-a-new-distance-donation')}{/if}
@@ -213,15 +214,13 @@
                     class="block text-sm font-medium text-gray-700">{$_('donor')}</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) => getDonorLabel(option)}
-                    getOptionLabel={(option) => getDonorLabel(option)}
                     itemFilter={(label, filterText, option) => filterDonors(label, filterText, option)}
                     items={donors}
                     showChevron={true}
                     placeholder={$_('search-for-donor-name-or-id')}
                     noOptionsMessage={$_('no-donors-found')}
-                    on:select={(selectedValue) => (donor = selectedValue.detail.id)}
+                    on:select={(selectedValue) => (donor = selectedValue.detail.value.id)}
-                    on:clear={()=>(donors = null)} />
+                    on:clear={() => (donors = null)} />
                 </div>
                 {#if !is_fixed}
                   <div class="col-span-6">
@@ -230,15 +229,13 @@
                       class="block text-sm font-medium text-gray-700">{$_('runner')}</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) => getDonorLabel(option)}
-                      getOptionLabel={(option) => getDonorLabel(option)}
                       itemFilter={(label, filterText, option) => filterDonors(label, filterText, option)}
                       items={runners}
                       showChevron={true}
                       placeholder={$_('search-for-runner-by-name-or-id')}
                       noOptionsMessage={$_('no-runners-found')}
-                      on:select={(selectedValue) => (runner = selectedValue.detail.id)}
+                      on:select={(selectedValue) => (runner = selectedValue.detail.value.id)}
-                      on:clear={()=>(runner = null)} />
+                      on:clear={() => (runner = null)} />
                   </div>
                 {/if}
                 <div class="col-span-6">

src/components/donations/DonationDetail.svelte

@@ -14,6 +14,8 @@
   $: delete_triggered = false;
   $: original_data = {};
   $: editable = {};
+  $: donor = {};
+  $: runner = {};
   $: current_donors = [];
   $: current_runners = [];
   $: amount_input = 0;
@@ -30,12 +32,7 @@
     (original_data.responseType !== "DISTANCEDONATION" &&
       !(Math.floor(amount_input * 100) === original_data.amount));
   $: save_enabled = changes_performed && is_amount_valid && is_everything_set;
-  const donor_promise = DonorService.donorControllerGetAll().then((val) => {
+
-    current_donors = val;
-  });
-  const runner_promise = RunnerService.runnerControllerGetAll().then((val) => {
-    current_runners = val;
-  });
   const promise = DonationService.donationControllerGetOne(
     params.donationid
   ).then((data) => {
@@ -44,15 +41,27 @@
     editable = Object.assign(editable, original_data);
     if (data.responseType == "DISTANCEDONATION") {
       amount_input = data.amountPerDistance / 100;
+      RunnerService.runnerControllerGetAll().then((val) => {
+        current_runners = val.map((r) => {
+          return { label: getDonorLabel(r), value: r };
+        });
+        runner = current_runners.find((g) => g.value.id == editable.runner.id);
+      });
     } else {
       amount_input = data.amount / 100;
     }
+    DonorService.donorControllerGetAll().then((val) => {
+      current_donors = val.map((r) => {
+        return { label: getDonorLabel(r), value: r };
+      });
+      donor = current_donors.find((g) => g.value.id == editable.donor.id);
+    });
   });
   const getDonorLabel = (option) =>
     option.firstname + " " + (option.middlename || "") + " " + option.lastname;
   const filterDonors = (label, filterText, option) =>
     label.toLowerCase().includes(filterText.toLowerCase()) ||
-    option.id.toString().startsWith(filterText.toLowerCase());
+    option.value.id.toString().startsWith(filterText.toLowerCase());
 
   function submit() {
     if (data_loaded === true && save_enabled) {
@@ -116,7 +125,7 @@
   }
 </script>
 
-{#await donor_promise && runner_promise && promise}
+{#await promise}
   {$_('loading-donation-details')}
 {:then}
   <section class="container p-5 select-none">
@@ -217,14 +226,13 @@
         class="block  font-medium text-gray-700">{$_('donor')}</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) => getDonorLabel(option)}
-        getOptionLabel={(option) => getDonorLabel(option)}
         itemFilter={(label, filterText, option) => filterDonors(label, filterText, option)}
         items={current_donors}
         showChevron={true}
         placeholder={$_('search-for-donor-name-or-id')}
         noOptionsMessage={$_('no-donors-found')}
-        bind:selectedValue={editable.donor}
+        bind:selectedValue={donor}
+        on:select={(selectedValue) => (editable.donor = selectedValue.detail.value)}
         on:clear={() => (editable.donor = null)} />
     </div>
     {#if original_data.responseType == 'DISTANCEDONATION'}
@@ -234,14 +242,13 @@
           class="block  font-medium text-gray-700">{$_('runner')}</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) => getDonorLabel(option)}
-          getOptionLabel={(option) => getDonorLabel(option)}
           itemFilter={(label, filterText, option) => filterDonors(label, filterText, option)}
           items={current_runners}
           showChevron={true}
           placeholder={$_('search-for-runner-by-name-or-id')}
           noOptionsMessage={$_('no-runners-found')}
-          bind:selectedValue={editable.runner}
+          bind:selectedValue={runner}
+          on:select={(selectedValue) => (editable.runner = selectedValue.detail.value)}
           on:clear={() => (editable.runner = null)} />
       </div>
     {/if}

src/components/orgs/OrgDetail.svelte

@@ -20,6 +20,7 @@
   let contacts = [];
   export let params;
   $: editable = {};
+  $: contact = {};
   $: data_loaded = false;
   $: data_changed = !(JSON.stringify(editable) === original);
   $: isAddress1Valid = editable.address?.address1?.trim().length !== 0;
@@ -46,9 +47,16 @@
     editable = editable;
     original_object = Object.assign(editable, value);
     original = JSON.stringify(value);
-  });
+    GroupContactService.groupContactControllerGetAll().then((val) => {
-  GroupContactService.groupContactControllerGetAll().then((val) => {
+      contacts = val.map((r) => {
-    contacts = val;
+        return { label: getContactLabel(r), value: r };
+      });
+      if (editable.contact) {
+        contact = contacts.find((g) => g.value.id == editable.contact.id);
+      } else {
+        contact = null;
+      }
+    });
   });
   let modal_open = false;
   let delete_org = {};
@@ -359,18 +367,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={editable.contact}
+        bind:selectedValue={contact}
+        on:select={(selectedValue) => (editable.contact = selectedValue.detail.value)}
         on:clear={() => (editable.contact = null)} />
     </div>
     <!--  -->

src/components/runners/AddRunnerModal.svelte

@@ -11,7 +11,6 @@
   import isMobilePhone from "validator/es/lib/isMobilePhone";
   import Toastify from "toastify-js";
   import Select from "svelte-select";
-  import AddDonationModal from "../donations/AddDonationModal.svelte";
   export let modal_open;
   export let current_runners;
   $: selected_team = undefined;
@@ -22,11 +21,15 @@
   let email_input;
   let teams = [];
   RunnerTeamService.runnerTeamControllerGetAll().then((val) => {
-    teams = val;
+    teams = val.map((r) => {
+      return { label: `${r.parentGroup.name} > ${r.name}`, value: r };
+    });
   });
   let orgs = [];
   RunnerOrganizationService.runnerOrganizationControllerGetAll().then((val) => {
-    orgs = val;
+    orgs = val.map((r) => {
+      return { label: r.name, value: r };
+    });
   });
   function focus(el) {
     el.focus();
@@ -230,30 +233,18 @@
                     class="block text-sm font-medium text-gray-700">{$_('team')}</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) => {
-                      if (option.responseType == 'RUNNERORGANIZATION') {
-                        return option.name;
-                      }
-                      return `${option.parentGroup.name} &gt; ${option.name}`;
-                    }}
-                    getOptionLabel={(option) => {
-                      if (option.responseType == 'RUNNERORGANIZATION') {
-                        return option.name;
-                      }
-                      return `${option.parentGroup.name} &gt; ${option.name}`;
-                    }}
                     itemFilter={(label, filterText, option) => label
                         .toLowerCase()
                         .includes(
                           filterText.toLowerCase()
-                        ) || option.id
+                        ) || option.value.id
                         .toString()
                         .startsWith(filterText.toLowerCase())}
                     items={orgs.concat(teams)}
                     showChevron={true}
                     placeholder={$_('search-for-an-organization-or-team-by-name-or-id')}
                     noOptionsMessage={$_('no-organization-or-team-found')}
-                    on:select={(selectedValue) => (selected_team = selectedValue.detail.id)}
+                    on:select={(selectedValue) => (selected_team = selectedValue.detail.value.id)}
                     on:clear={() => (selected_team = null)} />
                 </div>
                 <div class="col-span-6">

src/components/runners/ImportRunnerModal.svelte

@@ -11,6 +11,7 @@
     RunnerOrganizationService,
   } from "@odit/lfk-client-js";
   import { createEventDispatcher } from "svelte";
+  import Select from "svelte-select";
   export let opened_from;
   export let passed_org;
   export let passed_orgs;
@@ -35,22 +36,18 @@
       }
     };
   })();
-  let orgs = [];
+  let groups = [];
   RunnerOrganizationService.runnerOrganizationControllerGetAll().then((val) => {
-    orgs = val;
+    const orgs = val.map((r) => {
-    if(opened_from === 'OrgOverview'){
+      return { label: r.name, value: `ORG_${r.id}` };
-    selected_org = orgs[0].id
+    });
-  }
+    groups = groups.concat(orgs);
-  });
+    RunnerTeamService.runnerTeamControllerGetAll().then((val) => {
-  let teams = [];
+      const teams = val.map((r) => {
-  RunnerTeamService.runnerTeamControllerGetAll().then((val) => {
+        return { label: `${r.parentGroup.name} > ${r.name}`, value: `TEAM_${r.id}` };
-    teams = val;
+      });
-    if (opened_from === "RunnerOverview" && teams.length>0) {
+      groups = groups.concat(teams);
-      selected_org_or_team = "TEAM_" + teams[0].id;
+    });
-    }
-    if(teams.length==0 && orgs.length>0){
-      selected_org_or_team = "ORG_" + orgs[0].id
-    }
   });
   let selected_org;
   $: selected_org_or_team = "";
@@ -264,21 +261,23 @@
               {/if}
               {#if opened_from === 'RunnerOverview'}
                 <p>{$_('group')}</p>
-                <select
+                <Select
-                  name="team"
+                  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={selected_org_or_team}
+                  itemFilter={(label, filterText, option) => label
-                  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">
+                      .toLowerCase()
-                  {#each teams as team}
+                      .includes(
-                    <option value="TEAM_{team.id}">
+                        filterText.toLowerCase()
-                      {team.parentGroup.name}
+                      ) || option.id.value
-                      &gt;
+                      .toString()
-                      {team.name}
+                      .startsWith(filterText.toLowerCase())}
-                    </option>
+                  items={groups}
-                  {/each}
+                  showChevron={true}
-                  {#each orgs as org}
+                  placeholder={$_('search-for-an-organization-or-team-by-name-or-id')}
-                    <option value="ORG_{org.id}">{org.name}</option>
+                  noOptionsMessage={$_('no-organization-or-team-found')}
-                  {/each}
+                  on:select={(selectedValue) => {
-                </select>
+                    selected_org_or_team = selectedValue.detail.value;
+                  }}
+                  on:clear={() => (selected_org_or_team = null)} />
               {/if}
               {#if opened_from === 'OrgDetail'}
                 <p>

src/components/runners/RunnerDetail.svelte

@@ -1,6 +1,5 @@
 <script>
   import { getLocaleFromNavigator, _ } from "svelte-i18n";
-  import lodashIsEqual from "lodash.isequal";
   import store from "../../store";
   import {
     RunnerService,
@@ -19,19 +18,39 @@
   $: original_data_pdf = {};
   $: original_data = {};
   $: editable = {};
-  $: changes_performed = !lodashIsEqual(original_data, editable);
+  $: group = {}
+  $: changes_performed = !(JSON.stringify(original_data) == JSON.stringify(editable));
   $: isEmailValid =
     (editable.email || "") === "" ||
     (editable.email && isEmail(editable.email || ""));
   $: isFirstnameValid = editable.firstname !== "";
   $: isLastnameValid = editable.lastname !== "";
   $: save_enabled =
-    changes_performed && isFirstnameValid && isLastnameValid && isEmailValid && (editable.group != null);
+    changes_performed &&
+    isFirstnameValid &&
+    isLastnameValid &&
+    isEmailValid &&
+    editable.group != null;
   runner_promise.then((data) => {
     data_loaded = true;
     original_data_pdf = Object.assign(original_data_pdf, data);
+    data.group = data.group.id;
     original_data = Object.assign(original_data, data);
     editable = Object.assign(editable, original_data);
+
+    RunnerOrganizationService.runnerOrganizationControllerGetAll().then((val) => {
+      const orgs = val.map((r) => {
+        return { label: r.name, value: r };
+      });
+      groups = groups.concat(orgs);
+      RunnerTeamService.runnerTeamControllerGetAll().then((val) => {
+        const teams = val.map((r) => {
+          return { label: `${r.parentGroup.name} > ${r.name}`, value: r };
+        });
+        groups = groups.concat(teams);
+        group = groups.find(g => g.value.id == editable.group)
+      });
+    });
   });
   document.addEventListener("click", function (e) {
     if (
@@ -41,14 +60,7 @@
       sponsoring_contracts_download_open = false;
     }
   });
-  let orgs = [];
+  let groups = [];
-  RunnerOrganizationService.runnerOrganizationControllerGetAll().then((val) => {
-    orgs = val;
-  });
-  let teams = [];
-  RunnerTeamService.runnerTeamControllerGetAll().then((val) => {
-    teams = val;
-  });
   function submit() {
     if (data_loaded === true && save_enabled) {
       Toastify({
@@ -57,7 +69,6 @@
       }).showToast();
       let postdata = {};
       postdata = Object.assign(postdata, editable);
-      postdata.group = postdata.group.id;
       RunnerService.runnerControllerPut(original_data.id, postdata)
         .then((resp) => {
           Object.assign(original_data, editable);
@@ -363,28 +374,17 @@
       <span class="font-medium text-gray-700">{$_('group')}</span>
       <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) => {
-          if (option.responseType == 'RUNNERORGANIZATION') {
-            return option.name;
-          }
-          return `${option.parentGroup.name} &gt; ${option.name}`;
-        }}
-        getOptionLabel={(option) => {
-          if (option.responseType == 'RUNNERORGANIZATION') {
-            return option.name;
-          }
-          return `${option.parentGroup.name} &gt; ${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.concat(orgs, teams)}
+        items={groups}
         showChevron={true}
         placeholder={$_('search-for-an-organization-or-team-by-name-or-id')}
         noOptionsMessage={$_('no-organization-or-team-found')}
-        bind:selectedValue={editable.group}
+        bind:selectedValue={group}
+        on:select={(selectedValue) => {editable.group = selectedValue.detail.value.id}}
         on:clear={() => (editable.group = null)} />
     </div>
     <div class="text-sm w-full">

src/components/scanstations/AddScanStationModal.svelte

@@ -4,14 +4,16 @@
   import { focusTrap } from "svelte-focus-trap";
   import { ScanStationService, TrackService } from "@odit/lfk-client-js";
   import Toastify from "toastify-js";
+  import Select from "svelte-select";
   export let modal_open;
   export let new_station;
   export let current_stations;
   export let copy_modal_open;
   let tracks = [];
   TrackService.trackControllerGetAll().then((val) => {
-    tracks = val;
+    tracks = val.map((t) => {
-    track = tracks[0].id;
+      return { label: t.name || `#${t.id}`, value: t };
+    });
   });
   function focus(el) {
     el.focus();
@@ -39,7 +41,7 @@
     if (processed_last_submit === true) {
       processed_last_submit = false;
       const toast = Toastify({
-        text: $_('scanstation-is-being-added'),
+        text: $_("scanstation-is-being-added"),
         duration: -1,
       }).showToast();
       let postdata = {
@@ -55,14 +57,14 @@
           modal_open = false;
           //
           Toastify({
-            text: $_('scanstation-added'),
+            text: $_("scanstation-added"),
             duration: 500,
             backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
           }).showToast();
           current_stations.push(result);
           current_stations = current_stations;
-          new_station=result;
+          new_station = result;
-          copy_modal_open=true;
+          copy_modal_open = true;
         })
         .catch((err) => {
           //
@@ -111,7 +113,7 @@
                 width="24"
                 height="24"><path fill="none" d="M0 0h24v24H0z" />
                 <path
-                d="M4 5v11h16V5H4zM2 4a1 1 0 011-1h18a1 1 0 011 1v14H2V4zM1 19h22v2H1v-2z" /></svg>
+                  d="M4 5v11h16V5H4zM2 4a1 1 0 011-1h18a1 1 0 011 1v14H2V4zM1 19h22v2H1v-2z" /></svg>
             </div>
             <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
               <h3 class="text-lg leading-6 font-medium text-gray-900">
@@ -127,14 +129,21 @@
                   <label
                     for="track"
                     class="block text-sm font-medium text-gray-700">Track</label>
-                  <select
+                  <Select
-                    name="track"
+                    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={track}
+                    itemFilter={(label, filterText, option) => label
-                    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">
+                        .toLowerCase()
-                    {#each tracks as t}
+                        .includes(
-                      <option value={t.id}>{t.name || t.distance}</option>
+                          filterText.toLowerCase()
-                    {/each}
+                        ) || option.value.id
-                  </select>
+                        .toString()
+                        .startsWith(filterText.toLowerCase())}
+                    items={tracks}
+                    showChevron={true}
+                    placeholder="Search for a track (by name or id)."
+                    noOptionsMessage="No track found"
+                    on:select={(selectedValue) => (track = selectedValue.detail.value.id)}
+                    on:clear={() => (track = null)} />
                 </div>
                 <div class="col-span-6">
                   <label
@@ -143,7 +152,7 @@
                   <input
                     use:focus
                     autocomplete="off"
-                    placeholder="{$_('description')}"
+                    placeholder={$_('description')}
                     bind:value={description}
                     type="text"
                     name="description"
@@ -164,7 +173,8 @@
                       type="checkbox"
                       checked={enabled}
                       class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded" />
-                    {$_('this-scanstation-is')} {#if enabled}{$_('enabled')}{:else}{$_('disabled')}{/if}
+                    {$_('this-scanstation-is')}
+                    {#if enabled}{$_('enabled')}{:else}{$_('disabled')}{/if}
                   </p>
                 </div>
               </div>

src/components/scanstations/ScanStationDetail.svelte

@@ -1,10 +1,11 @@
 <script>
-  import { _ } from "svelte-i18n";
+  import { t, _ } from "svelte-i18n";
   import store from "../../store";
   import { ScanStationService, TrackService } from "@odit/lfk-client-js";
   import Toastify from "toastify-js";
   import PromiseError from "../base/PromiseError.svelte";
   import ConfirmScanStationDeletion from "./ConfirmScanStationDeletion.svelte";
+  import Select from "svelte-select";
   let data_loaded = false;
   let modal_open;
   let delete_station;
@@ -13,6 +14,7 @@
   $: original_data = {};
   $: editable = {};
   $: tracks = [];
+  $: track = {};
   $: changes_performed = !(
     JSON.stringify(original_data) === JSON.stringify(editable)
   );
@@ -24,14 +26,17 @@
     data.track = data.track.id;
     original_data = Object.assign(original_data, data);
     editable = Object.assign(editable, original_data);
-  });
+    TrackService.trackControllerGetAll().then((val) => {
-  TrackService.trackControllerGetAll().then((val) => {
+      tracks = val.map((t) => {
-    tracks = val;
+        return { label: t.name || `#{t.id}`, value: t };
+      });
+      track = tracks.find((t) => t.value.id == editable.track);
+    });
   });
   function submit() {
     if (data_loaded === true && save_enabled) {
       Toastify({
-        text: $_('station-is-being-updated'),
+        text: $_("station-is-being-updated"),
         duration: 2500,
       }).showToast();
       ScanStationService.scanStationControllerPut(original_data.id, editable)
@@ -39,7 +44,7 @@
           Object.assign(original_data, editable);
           original_data = original_data;
           Toastify({
-            text: $_('updated-station'),
+            text: $_("updated-station"),
             duration: 2500,
             backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
           }).showToast();
@@ -52,7 +57,7 @@
     ScanStationService.scanStationControllerRemove(original_data.id, false)
       .then((resp) => {
         Toastify({
-          text: $_('station-deleted'),
+          text: $_("station-deleted"),
           duration: 500,
           backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
         }).showToast();
@@ -82,7 +87,7 @@
                 width="24"
                 height="24"><path fill="none" d="M0 0h24v24H0z" />
                 <path
-                d="M4 5v11h16V5H4zM2 4a1 1 0 011-1h18a1 1 0 011 1v14H2V4zM1 19h22v2H1v-2z" /></svg>
+                  d="M4 5v11h16V5H4zM2 4a1 1 0 011-1h18a1 1 0 011 1v14H2V4zM1 19h22v2H1v-2z" /></svg>
             </li>
             <li class="flex items-center ml-2">
               <a class="mr-2" href="./">{$_('scanstation')}</a><svg
@@ -147,14 +152,22 @@
       <label
         for="track"
         class="block text-sm font-medium text-gray-700">Track</label>
-      <select
+      <Select
-        name="track"
+        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={editable.track}
+        itemFilter={(label, filterText, option) => label
-        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">
+            .toLowerCase()
-        {#each tracks as t}
+            .includes(
-          <option value={t.id}>{t.name || t.distance}</option>
+              filterText.toLowerCase()
-        {/each}
+            ) || option.value.id
-      </select>
+            .toString()
+            .startsWith(filterText.toLowerCase())}
+        items={tracks}
+        showChevron={true}
+        placeholder="Search for a track (by name or id)."
+        noOptionsMessage="No track found"
+        bind:selectedValue={track}
+        on:select={(selectedValue) => (editable.track = selectedValue.detail.value.id)}
+        on:clear={() => (track = null)} />
     </div>
     <div class="text-sm w-full">
       <label
@@ -162,7 +175,7 @@
         class="font-medium text-gray-700">{$_('description')}</label>
       <input
         autocomplete="off"
-        placeholder="{$_('description')}"
+        placeholder={$_('description')}
         type="text"
         bind:value={editable.description}
         name="description"

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;
@@ -35,12 +38,23 @@
     data_loaded = true;
     teamdata = Object.assign(teamdata, value);
     original = Object.assign(original, value);
-  });
+    RunnerOrganizationService.runnerOrganizationControllerGetAll().then((val) => {
-  RunnerOrganizationService.runnerOrganizationControllerGetAll().then((val) => {
+      orgs = val.map((r) => {
-    orgs = val;
+        return { label: r.name, value: r };
-  });
+      });
-  GroupContactService.groupContactControllerGetAll().then((val) => {
+      group = orgs.find((g) => g.value.id == teamdata.parentGroup.id);
-    contacts = val;
+    });
+    GroupContactService.groupContactControllerGetAll().then((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>