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";
import Toastify from "toastify-js";
import PromiseError from "../base/PromiseError.svelte";
import Select from "svelte-select";
let data_loaded = false;
export let params;
$: delete_triggered = false;
@ -46,6 +47,11 @@
}
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() {
if (data_loaded === true && save_enabled) {
@ -62,6 +68,7 @@
.then((resp) => {
Object.assign(original_data, resp);
original_data = original_data;
original_comparison_string = JSON.stringify(editable);
Toastify({
text: "updated donation",
duration: 2500,
@ -192,7 +199,8 @@
</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)
.toFixed(2)
.toLocaleString('de-DE', { valute: 'EUR' })}€</span>
@ -201,34 +209,34 @@
<label
for="donor"
class="block font-medium text-gray-700">{$_('donor')}</label>
<select
bind:value={editable.donor}
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">
{#each current_donors as d}
<option value={d.id}>
{d.firstname}
{d.middlename || ''}
{d.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) => 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')}
selectedValue={current_donors.find((d) => (d.id == editable.donor))}
on:select={(selectedValue) => (editable.donor = selectedValue.detail.id)} />
</div>
{#if original_data.responseType == 'DISTANCEDONATION'}
<div class=" w-full">
<label
for="donor"
class="block font-medium text-gray-700">{$_('runner')}</label>
<select
bind:value={editable.runner}
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">
{#each current_runners as r}
<option value={r.id}>
{r.firstname}
{r.middlename || ''}
{r.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) => 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')}
selectedValue={undefined || current_runners.find((r) => (r.id = original_data.runner.id))}
on:select={(selectedValue) => (editable.runner == selectedValue.detail.id)} />
</div>
{/if}
<div class=" w-full">