Applied the select fix to all things runner 🏃‍♀️🏃‍♂️

ref #98

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/RunnerDetail.svelte

@@ -19,6 +19,7 @@
   $: original_data_pdf = {};
   $: original_data = {};
   $: editable = {};
+  $: group = {}
   $: changes_performed = !lodashIsEqual(original_data, editable);
   $: isEmailValid =
     (editable.email || "") === "" ||
@@ -26,7 +27,11 @@
   $: 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);
@@ -41,13 +46,19 @@
       sponsoring_contracts_download_open = false;
     }
   });
-  let orgs = [];
+  let groups = [];
   RunnerOrganizationService.runnerOrganizationControllerGetAll().then((val) => {
-    orgs = val;
+    const orgs = val.map((r) => {
-  });
+      return { label: r.name, value: r };
-  let teams = [];
+    });
-  RunnerTeamService.runnerTeamControllerGetAll().then((val) => {
+    groups = groups.concat(orgs);
-    teams = val;
+    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.id)
+    });
   });
   function submit() {
     if (data_loaded === true && save_enabled) {
@@ -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}}
         on:clear={() => (editable.group = null)} />
     </div>
     <div class="text-sm w-full">