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 +34 -18
2 changed files with 34 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 0e682bf630 - Show all commits

48
src/components/runners/AddRunnerModal.svelte
View File

@ -10,6 +10,8 @@
import isEmail from "validator/es/lib/isEmail"; import isEmail from "validator/es/lib/isEmail";
import isMobilePhone from "validator/es/lib/isMobilePhone"; import isMobilePhone from "validator/es/lib/isMobilePhone";
import Toastify from "toastify-js"; import Toastify from "toastify-js";
import Select from "svelte-select";
import AddDonationModal from "../donations/AddDonationModal.svelte";
export let modal_open; export let modal_open;
export let current_runners; export let current_runners;
$: selected_team = undefined; $: selected_team = undefined;
@ -206,7 +208,7 @@
class="block text-sm font-medium text-gray-700">{$_('last-name')}</label> class="block text-sm font-medium text-gray-700">{$_('last-name')}</label>
<input <input
autocomplete="off" autocomplete="off"
placeholder="{$_('last-name')}" placeholder={$_('last-name')}
class:border-red-500={!isLastnameValid} class:border-red-500={!isLastnameValid}
class:focus:border-red-500={!isLastnameValid} class:focus:border-red-500={!isLastnameValid}
class:focus:ring-red-500={!isLastnameValid} class:focus:ring-red-500={!isLastnameValid}
@ -226,21 +228,33 @@
<label <label
for="team" for="team"
class="block text-sm font-medium text-gray-700">{$_('team')}</label> class="block text-sm font-medium text-gray-700">{$_('team')}</label>
<select <Select
name="team" 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={selected_team} getSelectionLabel={(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"> if(option.responseType == "RUNNERORGANIZATION"){
{#each teams as team} return option.name;
<option value={team.id}> }
{team.parentGroup.name} return `${option.parentGroup.name} &gt; ${option.name}`
&gt; }}
{team.name} getOptionLabel={(option) => {
</option> if(option.responseType == "RUNNERORGANIZATION"){
{/each} return option.name;
{#each orgs as org} }
<option value={org.id}>{org.name}</option> return `${option.parentGroup.name} &gt; ${option.name}`
{/each} }}
</select> itemFilter={(label, filterText, option) => label
.toLowerCase()
.includes(
filterText.toLowerCase()
) || option.id
.toString()
.startsWith(filterText.toLowerCase())}
items={orgs.concat(orgs, teams)}
showChevron={true}
placeholder={$_('search-for-an-organization-or-team-by-name-or-id')}
noOptionsMessage={$_('no-organization-or-team-found')}
on:select={(selectedValue) => (selected_team = selectedValue.detail.id)}
on:clear={() => (selected_team = null)} />
</div> </div>
<div class="col-span-6"> <div class="col-span-6">
<label <label
@ -248,7 +262,7 @@
class="block text-sm font-medium text-gray-700">{$_('phone')}</label> class="block text-sm font-medium text-gray-700">{$_('phone')}</label>
<input <input
autocomplete="off" autocomplete="off"
placeholder="{$_('phone')}" placeholder={$_('phone')}
class:border-red-500={!isPhoneValidOrEmpty} class:border-red-500={!isPhoneValidOrEmpty}
class:focus:border-red-500={!isPhoneValidOrEmpty} class:focus:border-red-500={!isPhoneValidOrEmpty}
class:focus:ring-red-500={!isPhoneValidOrEmpty} class:focus:ring-red-500={!isPhoneValidOrEmpty}

4
src/locales/en.json
View File

@ -316,5 +316,7 @@
"no-organizations-found": "No organizations found", "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-found": "No contact found",
"no-contact-selected": "No contact selected" "no-contact-selected": "No contact selected",
"search-for-an-organization-or-team-by-name-or-id": "Search for an organization or team (by name or id)",
"no-organization-or-team-found": "No organization or team found"
} }