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

Org detail now uses svelte select

Browse Source 
ref #91
This commit is contained in:
Nicolai Ort 2021-03-17 11:02:43 +01:00
parent cee1ab1347
commit 6b590671bc
1 changed files with 32 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -9,6 +9,7 @@
import ConfirmOrgDeletion from "./ConfirmOrgDeletion.svelte"; import ConfirmOrgDeletion from "./ConfirmOrgDeletion.svelte";
import ImportRunnerModal from "../runners/ImportRunnerModal.svelte"; import ImportRunnerModal from "../runners/ImportRunnerModal.svelte";
import PromiseError from "../base/PromiseError.svelte"; import PromiseError from "../base/PromiseError.svelte";
import Select from "svelte-select";
$: delete_triggered = false; $: delete_triggered = false;
$: address_valid_or_none = $: address_valid_or_none =
(isAddress1Valid && iszipcodevalid && iscityvalid) || (isAddress1Valid && iszipcodevalid && iscityvalid) ||
@ -25,16 +26,12 @@
$: iszipcodevalid = editable.address?.postalcode?.trim().length !== 0; $: iszipcodevalid = editable.address?.postalcode?.trim().length !== 0;
$: iscityvalid = editable.address?.city?.trim().length !== 0; $: iscityvalid = editable.address?.city?.trim().length !== 0;
$: sponsoring_contracts_download_open = false; $: sponsoring_contracts_download_open = false;
const getContactLabel = (option) =>
option.firstname + " " + (option.middlename || "") + " " + option.lastname;
const promise = RunnerOrganizationService.runnerOrganizationControllerGetOne( const promise = RunnerOrganizationService.runnerOrganizationControllerGetOne(
params.orgid params.orgid
).then((value) => { ).then((value) => {
data_loaded = true; data_loaded = true;
if (value.contact) {
if (value.contact !== "null") {
value.contact = value.contact.id;
}
}
value.address_checked = value.address.address1 !== null; value.address_checked = value.address.address1 !== null;
if (value.address_checked === false) { if (value.address_checked === false) {
value.address = { value.address = {
@ -91,13 +88,14 @@
if (postdata.address_checked === false) { if (postdata.address_checked === false) {
postdata.address = null; postdata.address = null;
} }
postdata.contact = postdata.contact === "null" ? null : postdata.contact; postdata.contact = postdata.contact?.id;
RunnerOrganizationService.runnerOrganizationControllerPut( RunnerOrganizationService.runnerOrganizationControllerPut(
original_object.id, original_object.id,
postdata postdata
) )
.then((resp) => { .then((resp) => {
original = JSON.stringify(editable); original_object = Object.assign({}, editable);
original = JSON.stringify(original_object);
Toastify({ Toastify({
text: $_("updated-organization"), text: $_("updated-organization"),
duration: 2500, duration: 2500,
@ -188,7 +186,17 @@
aria-haspopup="true" aria-haspopup="true"
aria-expanded="true"> aria-expanded="true">
{$_('generate-sponsoring-contracts')} {$_('generate-sponsoring-contracts')}
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="-mr-1 ml-2 h-5 w-5"><path fill="none" d="M0 0h24v24H0z"/><path fill="currentColor" d="M3 19h18v2H3v-2zm10-5.83l6.07-6.07 1.42 1.41L12 17 3.52 8.52l1.4-1.42L11 13.17V2h2v11.17z"/></svg> <svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
class="-mr-1 ml-2 h-5 w-5"><path
fill="none"
d="M0 0h24v24H0z" />
<path
fill="currentColor"
d="M3 19h18v2H3v-2zm10-5.83l6.07-6.07 1.42 1.41L12 17 3.52 8.52l1.4-1.42L11 13.17V2h2v11.17z" /></svg>
</button> </button>
</div> </div>
{#if sponsoring_contracts_download_open} {#if sponsoring_contracts_download_open}
@ -349,19 +357,21 @@
<label <label
for="contact" for="contact"
class="font-medium text-gray-700">{$_('contact')}</label> class="font-medium text-gray-700">{$_('contact')}</label>
<select <Select
name="contact" 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"
bind:value={editable.contact} getSelectionLabel={(option) => getContactLabel(option)}
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"> getOptionLabel={(option) => getContactLabel(option)}
<option value="null">no contact</option> itemFilter={(label, filterText, option) => label
{#each contacts as c} .toLowerCase()
<option value={c.id}> .includes(
{c.firstname} filterText.toLowerCase()
{c.middlename || ''} ) || option.id.toString().startsWith(filterText.toLowerCase())}
{c.lastname} items={contacts}
</option> showChevron={true}
{/each} placeholder={$_('no-contact-selected')}
</select> noOptionsMessage={$_('no-contact-found')}
bind:selectedValue={editable.contact}
on:clear={() => (editable.contact = null)} />
</div> </div>
<!-- --> <!-- -->
<div class="flex items-start mt-2"> <div class="flex items-start mt-2">