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

Merge pull request 'Svelte select dropdown fix bugfix/98-dropdowns' (#100) from bugfix/98-dropdowns into dev
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source 
Reviewed-on: #100
This commit is contained in:
Nicolai Ort 2021-03-18 16:30:11 +00:00
commit a7fb2b8a1a
10 changed files with 203 additions and 171 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/components/donations/AddDonationModal.svelte
View File

@ -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;
donor = donors[0].id || 0;
donors = val.map((r) => {
return { label: getDonorLabel(r), value: r };
});
});
RunnerService.runnerControllerGetAll().then((val) => {
runners = val;
runner = runners[0].id || 0;
runners = val.map((r) => {
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:clear={()=>(donors = null)} />
on:select={(selectedValue) => (donor = selectedValue.detail.value.id)}
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:clear={()=>(runner = null)} />
on:select={(selectedValue) => (runner = selectedValue.detail.value.id)}
on:clear={() => (runner = null)} />
</div>
{/if}
<div class="col-span-6">

35
src/components/donations/DonationDetail.svelte
View File

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

23
src/components/orgs/OrgDetail.svelte
View File

@ -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) => {
contacts = val;
GroupContactService.groupContactControllerGetAll().then((val) => {
contacts = val.map((r) => {
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>
<!-- -->

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

59
src/components/runners/ImportRunnerModal.svelte
View File

@ -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;
if(opened_from === 'OrgOverview'){
selected_org = orgs[0].id
}
});
let teams = [];
RunnerTeamService.runnerTeamControllerGetAll().then((val) => {
teams = val;
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
}
const orgs = val.map((r) => {
return { label: r.name, value: `ORG_${r.id}` };
});
groups = groups.concat(orgs);
RunnerTeamService.runnerTeamControllerGetAll().then((val) => {
const teams = val.map((r) => {
return { label: `${r.parentGroup.name} > ${r.name}`, value: `TEAM_${r.id}` };
});
groups = groups.concat(teams);
});
});
let selected_org;
$: selected_org_or_team = "";
@ -264,21 +261,23 @@
{/if}
{#if opened_from === 'RunnerOverview'}
<p>{$_('group')}</p>
<select
name="team"
bind:value={selected_org_or_team}
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">
{#each teams as team}
<option value="TEAM_{team.id}">
{team.parentGroup.name}
&gt;
{team.name}
</option>
{/each}
{#each orgs as org}
<option value="ORG_{org.id}">{org.name}</option>
{/each}
</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"
itemFilter={(label, filterText, option) => label
.toLowerCase()
.includes(
filterText.toLowerCase()
) || 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')}
on:select={(selectedValue) => {
selected_org_or_team = selectedValue.detail.value;
}}
on:clear={() => (selected_org_or_team = null)} />
{/if}
{#if opened_from === 'OrgDetail'}
<p>

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

@ -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 = [];
RunnerOrganizationService.runnerOrganizationControllerGetAll().then((val) => {
orgs = val;
});
let teams = [];
RunnerTeamService.runnerTeamControllerGetAll().then((val) => {
teams = val;
});
let groups = [];
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())}
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.id}}
on:clear={() => (editable.group = null)} />
</div>
<div class="text-sm w-full">

44
src/components/scanstations/AddScanStationModal.svelte
View File

@ -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;
track = tracks[0].id;
tracks = val.map((t) => {
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;
copy_modal_open=true;
new_station = result;
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
name="track"
bind:value={track}
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">
{#each tracks as t}
<option value={t.id}>{t.name || t.distance}</option>
{/each}
</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"
itemFilter={(label, filterText, option) => label
.toLowerCase()
.includes(
filterText.toLowerCase()
) || option.value.id
.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>

47
src/components/scanstations/ScanStationDetail.svelte
View File

@ -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) => {
tracks = val;
TrackService.trackControllerGetAll().then((val) => {
tracks = val.map((t) => {
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
name="track"
bind:value={editable.track}
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">
{#each tracks as t}
<option value={t.id}>{t.name || t.distance}</option>
{/each}
</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"
itemFilter={(label, filterText, option) => label
.toLowerCase()
.includes(
filterText.toLowerCase()
) || option.value.id
.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"

14
src/components/teams/AddTeamModal.svelte
View File

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

48
src/components/teams/TeamDetail.svelte
View File

@ -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) => {
orgs = val;
});
GroupContactService.groupContactControllerGetAll().then((val) => {
contacts = val;
RunnerOrganizationService.runnerOrganizationControllerGetAll().then((val) => {
orgs = val.map((r) => {
return { label: r.name, value: r };
});
group = orgs.find((g) => g.value.id == teamdata.parentGroup.id);
});
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>