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

New fancy selects for donation details

Browse Source 
ref #91
This commit is contained in:
Nicolai Ort 2021-03-14 19:08:56 +01:00
parent 8c4a54eb07
commit 76be8d5a87
1 changed files with 31 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -8,6 +8,7 @@
} from "@odit/lfk-client-js"; } from "@odit/lfk-client-js";
import Toastify from "toastify-js"; import Toastify from "toastify-js";
import PromiseError from "../base/PromiseError.svelte"; import PromiseError from "../base/PromiseError.svelte";
import Select from "svelte-select";
let data_loaded = false; let data_loaded = false;
export let params; export let params;
$: delete_triggered = false; $: delete_triggered = false;
@ -46,6 +47,11 @@
} }
original_comparison_string = JSON.stringify(editable); original_comparison_string = JSON.stringify(editable);
}); });
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());
function submit() { function submit() {
if (data_loaded === true && save_enabled) { if (data_loaded === true && save_enabled) {
@ -62,6 +68,7 @@
.then((resp) => { .then((resp) => {
Object.assign(original_data, resp); Object.assign(original_data, resp);
original_data = original_data; original_data = original_data;
original_comparison_string = JSON.stringify(editable);
Toastify({ Toastify({
text: "updated donation", text: "updated donation",
duration: 2500, duration: 2500,
@ -192,7 +199,8 @@
</div> </div>
<!-- --> <!-- -->
<div> <div>
<span class="font-medium text-gray-700">{$_('total-donation-amount')}:</span> <span
class="font-medium text-gray-700">{$_('total-donation-amount')}:</span>
<span>{(editable.amount / 100) <span>{(editable.amount / 100)
.toFixed(2) .toFixed(2)
.toLocaleString('de-DE', { valute: 'EUR' })}€</span> .toLocaleString('de-DE', { valute: 'EUR' })}€</span>
@ -201,34 +209,34 @@
<label <label
for="donor" for="donor"
class="block font-medium text-gray-700">{$_('donor')}</label> class="block font-medium text-gray-700">{$_('donor')}</label>
<select <Select
bind:value={editable.donor} 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"
class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm: border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"> getSelectionLabel={(option) => getDonorLabel(option)}
{#each current_donors as d} getOptionLabel={(option) => getDonorLabel(option)}
<option value={d.id}> itemFilter={(label, filterText, option) => filterDonors(label, filterText, option)}
{d.firstname} items={current_donors}
{d.middlename || ''} showChevron={true}
{d.lastname} placeholder={$_('search-for-donor-name-or-id')}
</option> noOptionsMessage={$_('no-donors-found')}
{/each} selectedValue={current_donors.find((d) => (d.id == editable.donor))}
</select> on:select={(selectedValue) => (editable.donor = selectedValue.detail.id)} />
</div> </div>
{#if original_data.responseType == 'DISTANCEDONATION'} {#if original_data.responseType == 'DISTANCEDONATION'}
<div class=" w-full"> <div class=" w-full">
<label <label
for="donor" for="donor"
class="block font-medium text-gray-700">{$_('runner')}</label> class="block font-medium text-gray-700">{$_('runner')}</label>
<select <Select
bind:value={editable.runner} 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"
class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm: border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"> getSelectionLabel={(option) => getDonorLabel(option)}
{#each current_runners as r} getOptionLabel={(option) => getDonorLabel(option)}
<option value={r.id}> itemFilter={(label, filterText, option) => filterDonors(label, filterText, option)}
{r.firstname} items={current_runners}
{r.middlename || ''} showChevron={true}
{r.lastname} placeholder={$_('search-for-runner-by-name-or-id')}
</option> noOptionsMessage={$_('no-runners-found')}
{/each} selectedValue={undefined || current_runners.find((r) => (r.id = original_data.runner.id))}
</select> on:select={(selectedValue) => (editable.runner == selectedValue.detail.id)} />
</div> </div>
{/if} {/if}
<div class=" w-full"> <div class=" w-full">