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.value.id.toString().startsWith(filterText.toLowerCase());
+    option.id.toString().startsWith(filterText.toLowerCase());
   function focus(el) {
     el.focus();
   }
@@ -25,14 +25,12 @@
   $: runners = [];
   $: is_fixed = false;
   DonorService.donorControllerGetAll().then((val) => {
-    donors = val.map((r) => {
+    donors = val;
-      return { label: getDonorLabel(r), value: r };
+    donor = donors[0].id || 0;
-    });
   });
   RunnerService.runnerControllerGetAll().then((val) => {
-    runners = val.map((r) => {
+    runners = val;
-      return { label: getDonorLabel(r), value: r };
+    runner = runners[0].id || 0;
-    });
   });
   $: amount_input = 0;
   $: processed_last_submit = true;
@@ -186,6 +184,7 @@
             </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}
@@ -214,13 +213,15 @@
                     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.value.id)}
+                    on:select={(selectedValue) => (donor = selectedValue.detail.id)}
-                    on:clear={() => (donors = null)} />
+                    on:clear={()=>(donors = null)} />
                 </div>
                 {#if !is_fixed}
                   <div class="col-span-6">
@@ -229,13 +230,15 @@
                       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.value.id)}
+                      on:select={(selectedValue) => (runner = selectedValue.detail.id)}
-                      on:clear={() => (runner = null)} />
+                      on:clear={()=>(runner = null)} />
                   </div>
                 {/if}
                 <div class="col-span-6">

src/components/donations/DonationDetail.svelte

@@ -14,8 +14,6 @@
   $: delete_triggered = false;
   $: original_data = {};
   $: editable = {};
-  $: donor = {};
-  $: runner = {};
   $: current_donors = [];
   $: current_runners = [];
   $: amount_input = 0;
@@ -32,7 +30,12 @@
     (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) => {
@@ -41,27 +44,15 @@
     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.value.id.toString().startsWith(filterText.toLowerCase());
+    option.id.toString().startsWith(filterText.toLowerCase());
 
   function submit() {
     if (data_loaded === true && save_enabled) {
@@ -125,7 +116,7 @@
   }
 </script>
 
-{#await promise}
+{#await donor_promise && runner_promise && promise}
   {$_('loading-donation-details')}
 {:then}
   <section class="container p-5 select-none">
@@ -226,13 +217,14 @@
         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={donor}
+        bind:selectedValue={editable.donor}
-        on:select={(selectedValue) => (editable.donor = selectedValue.detail.value)}
         on:clear={() => (editable.donor = null)} />
     </div>
     {#if original_data.responseType == 'DISTANCEDONATION'}
@@ -242,13 +234,14 @@
           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={runner}
+          bind:selectedValue={editable.runner}
-          on:select={(selectedValue) => (editable.runner = selectedValue.detail.value)}
           on:clear={() => (editable.runner = null)} />
       </div>
     {/if}

src/components/orgs/OrgDetail.svelte

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

src/components/runners/AddRunnerModal.svelte

@@ -11,6 +11,7 @@
   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;
@@ -21,15 +22,11 @@
   let email_input;
   let teams = [];
   RunnerTeamService.runnerTeamControllerGetAll().then((val) => {
-    teams = val.map((r) => {
+    teams = val;
-      return { label: `${r.parentGroup.name} > ${r.name}`, value: r };
-    });
   });
   let orgs = [];
   RunnerOrganizationService.runnerOrganizationControllerGetAll().then((val) => {
-    orgs = val.map((r) => {
+    orgs = val;
-      return { label: r.name, value: r };
-    });
   });
   function focus(el) {
     el.focus();
@@ -233,18 +230,30 @@
                     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.value.id
+                        ) || option.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.value.id)}
+                    on:select={(selectedValue) => (selected_team = selectedValue.detail.id)}
                     on:clear={() => (selected_team = null)} />
                 </div>
                 <div class="col-span-6">

src/components/runners/ImportRunnerModal.svelte

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

src/components/runners/RunnerDetail.svelte

@@ -1,5 +1,6 @@
 <script>
   import { getLocaleFromNavigator, _ } from "svelte-i18n";
+  import lodashIsEqual from "lodash.isequal";
   import store from "../../store";
   import {
     RunnerService,
@@ -18,39 +19,19 @@
   $: original_data_pdf = {};
   $: original_data = {};
   $: editable = {};
-  $: group = {}
+  $: changes_performed = !lodashIsEqual(original_data, editable);
-  $: 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 &&
+    changes_performed && isFirstnameValid && isLastnameValid && isEmailValid && (editable.group != null);
-    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 (
@@ -60,7 +41,14 @@
       sponsoring_contracts_download_open = false;
     }
   });
-  let groups = [];
+  let orgs = [];
+  RunnerOrganizationService.runnerOrganizationControllerGetAll().then((val) => {
+    orgs = val;
+  });
+  let teams = [];
+  RunnerTeamService.runnerTeamControllerGetAll().then((val) => {
+    teams = val;
+  });
   function submit() {
     if (data_loaded === true && save_enabled) {
       Toastify({
@@ -69,6 +57,7 @@
       }).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);
@@ -374,17 +363,28 @@
       <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.value.toString().startsWith(filterText.toLowerCase())}
+            ) || option.id.toString().startsWith(filterText.toLowerCase())}
-        items={groups}
+        items={orgs.concat(orgs, teams)}
         showChevron={true}
         placeholder={$_('search-for-an-organization-or-team-by-name-or-id')}
         noOptionsMessage={$_('no-organization-or-team-found')}
-        bind:selectedValue={group}
+        bind:selectedValue={editable.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,16 +4,14 @@
   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.map((t) => {
+    tracks = val;
-      return { label: t.name || `#${t.id}`, value: t };
+    track = tracks[0].id;
-    });
   });
   function focus(el) {
     el.focus();
@@ -41,7 +39,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 = {
@@ -57,14 +55,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) => {
           //
@@ -113,7 +111,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">
@@ -129,21 +127,14 @@
                   <label
                     for="track"
                     class="block text-sm font-medium text-gray-700">Track</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"
+                    name="track"
-                    itemFilter={(label, filterText, option) => label
+                    bind:value={track}
-                        .toLowerCase()
+                    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">
-                        .includes(
+                    {#each tracks as t}
-                          filterText.toLowerCase()
+                      <option value={t.id}>{t.name || t.distance}</option>
-                        ) || option.value.id
+                    {/each}
-                        .toString()
+                  </select>
-                        .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
@@ -152,7 +143,7 @@
                   <input
                     use:focus
                     autocomplete="off"
-                    placeholder={$_('description')}
+                    placeholder="{$_('description')}"
                     bind:value={description}
                     type="text"
                     name="description"
@@ -173,8 +164,7 @@
                       type="checkbox"
                       checked={enabled}
                       class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded" />
-                    {$_('this-scanstation-is')}
+                    {$_('this-scanstation-is')} {#if enabled}{$_('enabled')}{:else}{$_('disabled')}{/if}
-                    {#if enabled}{$_('enabled')}{:else}{$_('disabled')}{/if}
                   </p>
                 </div>
               </div>

src/components/scanstations/ScanStationDetail.svelte

@@ -1,11 +1,10 @@
 <script>
-  import { t, _ } from "svelte-i18n";
+  import { _ } 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;
@@ -14,7 +13,6 @@
   $: original_data = {};
   $: editable = {};
   $: tracks = [];
-  $: track = {};
   $: changes_performed = !(
     JSON.stringify(original_data) === JSON.stringify(editable)
   );
@@ -26,17 +24,14 @@
     data.track = data.track.id;
     original_data = Object.assign(original_data, data);
     editable = Object.assign(editable, original_data);
-    TrackService.trackControllerGetAll().then((val) => {
+  });
-      tracks = val.map((t) => {
+  TrackService.trackControllerGetAll().then((val) => {
-        return { label: t.name || `#{t.id}`, value: t };
+    tracks = val;
-      });
-      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)
@@ -44,7 +39,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();
@@ -57,7 +52,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();
@@ -87,7 +82,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
@@ -152,22 +147,14 @@
       <label
         for="track"
         class="block text-sm font-medium text-gray-700">Track</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"
+        name="track"
-        itemFilter={(label, filterText, option) => label
+        bind:value={editable.track}
-            .toLowerCase()
+        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">
-            .includes(
+        {#each tracks as t}
-              filterText.toLowerCase()
+          <option value={t.id}>{t.name || t.distance}</option>
-            ) || option.value.id
+        {/each}
-            .toString()
+      </select>
-            .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
@@ -175,7 +162,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,9 +35,7 @@
   $: parentGroup = undefined;
   $: orgs = [];
   RunnerOrganizationService.runnerOrganizationControllerGetAll().then((val) => {
-    orgs = val.map((r) => {
+    orgs = val;
-      return { label: r.name, value: r };
-    });
   });
   function submit() {
     if (processed_last_submit === true) {
@@ -150,18 +148,24 @@
                     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.value.id
+                        ) || option.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.value.id)}
+                    on:select={(selectedValue) => (parentGroup = selectedValue.detail.id)}
                     on:clear={() => (parentGroup = null)} />
                   {#if !parentGroup}
                     <span

src/components/teams/TeamDetail.svelte

@@ -11,7 +11,6 @@
   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] = [
     {},
     {},
@@ -23,12 +22,10 @@ import Teams from "./Teams.svelte";
   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;
@@ -38,23 +35,12 @@ import Teams from "./Teams.svelte";
     data_loaded = true;
     teamdata = Object.assign(teamdata, value);
     original = Object.assign(original, value);
-    RunnerOrganizationService.runnerOrganizationControllerGetAll().then((val) => {
+  });
-      orgs = val.map((r) => {
+  RunnerOrganizationService.runnerOrganizationControllerGetAll().then((val) => {
-        return { label: r.name, value: r };
+    orgs = val;
-      });
+  });
-      group = orgs.find((g) => g.value.id == teamdata.parentGroup.id);
+  GroupContactService.groupContactControllerGetAll().then((val) => {
-    });
+    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 (
@@ -355,19 +341,18 @@ import Teams from "./Teams.svelte";
         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.value.id
+            ) || option.id.toString().startsWith(filterText.toLowerCase())}
-            .toString()
-            .startsWith(filterText.toLowerCase())}
         items={contacts}
         showChevron={true}
         placeholder={$_('no-contact-selected')}
         noOptionsMessage={$_('no-contact-found')}
-        bind:selectedValue={contact}
+        bind:selectedValue={teamdata.contact}
-        on:select={(selectedValue)=> teamdata.contact = selectedValue.detail.value}
         on:clear={() => (teamdata.contact = null)} />
     </div>
     <div class="text-sm w-full">
@@ -376,17 +361,22 @@ import Teams from "./Teams.svelte";
         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.value.toString().startsWith(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={group}
+        bind:selectedValue={teamdata.parentGroup}
-        on:select={(selectedValue)=> teamdata.parentGroup = selectedValue.detail.value}
         on:clear={() => (teamdata.parentGroup = null)} />
     </div>
   </section>