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

Added contact selection via svelte select

Browse Source 
ref #91
This commit is contained in:
Nicolai Ort 2021-03-17 10:29:20 +01:00
parent d3a3de2eac
commit 7edc3427e1
2 changed files with 36 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -7,7 +7,7 @@
import { getLocaleFromNavigator, _ } from "svelte-i18n";
import Toastify from "toastify-js";
import store from "../../store";
import Select from "svelte-select"
import Select from "svelte-select";
import ImportRunnerModal from "../runners/ImportRunnerModal.svelte";
import PromiseError from "../base/PromiseError.svelte";
import ConfirmTeamDeletion from "./ConfirmTeamDeletion.svelte";
@ -27,15 +27,12 @@
$: data_changed = JSON.stringify(teamdata) === JSON.stringify(original);
$: sponsoring_contracts_download_open = false;
//
const getContactLabel = (option) =>
option.firstname + " " + (option.middlename || "") + " " + option.lastname;
const promise = RunnerTeamService.runnerTeamControllerGetOne(
params.teamid
).then((value) => {
data_loaded = true;
if (value.contact) {
if (value.contact !== "null") {
value.contact = value.contact.id;
}
}
teamdata = Object.assign(teamdata, value);
original = Object.assign(original, value);
});
@ -76,13 +73,11 @@
}).showToast();
let postdata = teamdata;
postdata.parentGroup = teamdata.parentGroup.id;
postdata.contact = postdata.contact === "null" ? null : postdata.contact;
postdata.contact = teamdata.contact?.id;
RunnerTeamService.runnerTeamControllerPut(original.id, postdata)
.then((resp) => {
Object.assign(original, teamdata);
original = teamdata;
Object.assign(original, teamdata);
//
original = original;
Toastify({
text: "updated team",
duration: 2500,
@ -344,19 +339,21 @@
<label
for="contact"
class="font-medium text-gray-700">{$_('contact')}</label>
<select
name="contact"
bind:value={teamdata.contact}
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">
<option value="null">no contact</option>
{#each contacts as c}
<option value={c.id}>
{c.firstname}
{c.middlename || ''}
{c.lastname}
</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"
getSelectionLabel={(option) => getContactLabel(option)}
getOptionLabel={(option) => getContactLabel(option)}
itemFilter={(label, filterText, option) => label
.toLowerCase()
.includes(
filterText.toLowerCase()
) || option.id.toString().startsWith(filterText.toLowerCase())}
items={contacts}
showChevron={true}
placeholder={$_('no-contact-selected')}
noOptionsMessage={$_('no-contact-found')}
bind:selectedValue={teamdata.contact}
on:clear={() => (teamdata.contact = null)} />
</div>
<div class="text-sm w-full">
<label
@ -364,11 +361,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())}
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())}
items={orgs}
showChevron={true}
placeholder={$_('search-for-an-organization-by-name-or-id')}

4
src/locales/en.json
View File

@ -314,5 +314,7 @@
"no-runners-found": "No runners found",
"search-for-an-organization-by-name-or-id": "Search for an organization (by name or id)",
"no-organizations-found": "No organizations found",
"you-have-to-provide-an-organization": "You have to provide an organization"
"you-have-to-provide-an-organization": "You have to provide an organization",
"no-contact-found": "No contact found",
"no-contact-selected": "No contact selected"
}