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

Make dropdowns (selects) searchable feature/91-searchable_dropdowns #97

Merged
niggl merged 35 commits from feature/91-searchable_dropdowns into dev 2021-03-17 16:05:21 +00:00
Conversation 1 Commits 35 Files Changed 14 +21 -4
1 changed files with 21 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit fe16c66cf2 - Show all commits

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

@ -7,9 +7,13 @@
DonorService, DonorService,
RunnerService, RunnerService,
} from "@odit/lfk-client-js"; } from "@odit/lfk-client-js";
import Select from "svelte-select";
import Toastify from "toastify-js"; import Toastify from "toastify-js";
export let modal_open; export let modal_open;
export let current_donations; export let current_donations;
const getOptionLabel = (option) =>
option.firstname + " " + (option.middlename || "") + " " + option.lastname;
const getSelectionLabel = getOptionLabel;
function focus(el) { function focus(el) {
el.focus(); el.focus();
} }
@ -179,7 +183,9 @@
<div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left"> <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"> <h3 class="text-lg leading-6 font-medium text-gray-900">
<!-- TODO: --> <!-- TODO: -->
{#if is_fixed}{$_('create-a-new-fixed-donation')}{:else}{$_('create-a-new-distance-donation')}{/if} {#if is_fixed}
{$_('create-a-new-fixed-donation')}
{:else}{$_('create-a-new-distance-donation')}{/if}
</h3> </h3>
<label class="content-center align-middle object-center"> <label class="content-center align-middle object-center">
<span <span
@ -203,7 +209,16 @@
<label <label
for="donor" for="donor"
class="block text-sm font-medium text-gray-700">{$_('donor')}</label> class="block text-sm font-medium text-gray-700">{$_('donor')}</label>
<select <Select
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"
{getSelectionLabel}
{getOptionLabel}
items={donors}
showChevron={true}
placeholder="Search for donor..."
on:select={(selected) => (donor = selected.detail.id)} />
<!-- <select
bind:value={donor} bind:value={donor}
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"> 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 donors as d} {#each donors as d}
@ -213,7 +228,7 @@
{d.lastname} {d.lastname}
</option> </option>
{/each} {/each}
</select> </select> -->
</div> </div>
{#if !is_fixed} {#if !is_fixed}
<div class="col-span-6"> <div class="col-span-6">
@ -237,7 +252,9 @@
<label <label
for="donation_amount_eur" for="donation_amount_eur"
class="block text-sm font-medium text-gray-700"> class="block text-sm font-medium text-gray-700">
{#if !is_fixed}{$_('amount-per-kilometer')}{:else}{$_('donation-amount')}{/if}</label> {#if !is_fixed}
{$_('amount-per-kilometer')}
{:else}{$_('donation-amount')}{/if}</label>
<div class="mt-1 flex rounded-md shadow-sm"> <div class="mt-1 flex rounded-md shadow-sm">
<input <input
autocomplete="off" autocomplete="off"