lfk/frontend
2
0
Fork 0
Code Issues 3 Pull Requests Actions Projects Releases Wiki Activity

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

Browse Source 
ref #98
This commit is contained in:
Nicolai Ort 2021-03-18 15:35:39 +01:00
parent b541c93797
commit 0386d4e88a
2 changed files with 30 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/components/runners/AddRunnerModal.svelte
View File

@ -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">

44
src/components/runners/RunnerDetail.svelte
View File

@ -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">