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 isMobilePhone from "validator/es/lib/isMobilePhone";
import Toastify from "toastify-js";
import Select from "svelte-select";
import AddDonationModal from "../donations/AddDonationModal.svelte";
export let modal_open;
export let current_runners;
$: selected_team = undefined;
@ -206,7 +208,7 @@
class="block text-sm font-medium text-gray-700">{$_('last-name')}</label>
<input
autocomplete="off"
placeholder="{$_('last-name')}"
placeholder={$_('last-name')}
class:border-red-500={!isLastnameValid}
class:focus:border-red-500={!isLastnameValid}
class:focus:ring-red-500={!isLastnameValid}
@ -226,21 +228,33 @@
<label
for="team"
class="block text-sm font-medium text-gray-700">{$_('team')}</label>
<select
name="team"
bind:value={selected_team}
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 teams as team}
<option value={team.id}>
{team.parentGroup.name}
&gt;
{team.name}
</option>
{/each}
{#each orgs as org}
<option value={org.id}>{org.name}</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) => {
if(option.responseType == "RUNNERORGANIZATION"){
return option.name;
}
return `${option.parentGroup.name} &gt; ${option.name}`
}}
getOptionLabel={(option) => {
if(option.responseType == "RUNNERORGANIZATION"){
return option.name;
}
return `${option.parentGroup.name} &gt; ${option.name}`
}}
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 class="col-span-6">
<label
@ -248,7 +262,7 @@
class="block text-sm font-medium text-gray-700">{$_('phone')}</label>
<input
autocomplete="off"
placeholder="{$_('phone')}"
placeholder={$_('phone')}
class:border-red-500={!isPhoneValidOrEmpty}
class:focus:border-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",
"you-have-to-provide-an-organization": "You have to provide an organization",
"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"
}