From 0386d4e88ab57457fa981399627b2b61f38bb1ae Mon Sep 17 00:00:00 2001
From: Nicolai Ort <info@nicolai-ort.com>
Date: Thu, 18 Mar 2021 15:35:39 +0100
Subject: [PATCH] =?UTF-8?q?Applied=20the=20select=20fix=20to=20all=20thing?=
 =?UTF-8?q?s=20runner=20=F0=9F=8F=83=E2=80=8D=E2=99=80=EF=B8=8F?=
 =?UTF-8?q?=F0=9F=8F=83=E2=80=8D=E2=99=82=EF=B8=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

ref #98
---
 src/components/runners/AddRunnerModal.svelte | 25 ++++-------
 src/components/runners/RunnerDetail.svelte   | 44 ++++++++++----------
 2 files changed, 30 insertions(+), 39 deletions(-)

diff --git a/src/components/runners/AddRunnerModal.svelte b/src/components/runners/AddRunnerModal.svelte
index b84d425c..2ee98810 100644
--- a/src/components/runners/AddRunnerModal.svelte
+++ b/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">
diff --git a/src/components/runners/RunnerDetail.svelte b/src/components/runners/RunnerDetail.svelte
index 2fa6b275..bc2198ac 100644
--- a/src/components/runners/RunnerDetail.svelte
+++ b/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;
-  });
-  let teams = [];
-  RunnerTeamService.runnerTeamControllerGetAll().then((val) => {
-    teams = 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.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())}
-        items={orgs.concat(orgs, teams)}
+            ) || option.id.value.toString().startsWith(filterText.toLowerCase())}
+        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">