Now using svelte-select

ref #91
This commit is contained in:
Nicolai Ort 2021-03-15 16:05:06 +01:00
parent ee0c1496e6
commit 2a644d7070

View File

@ -7,6 +7,7 @@
import { getLocaleFromNavigator, _ } from "svelte-i18n"; import { getLocaleFromNavigator, _ } from "svelte-i18n";
import Toastify from "toastify-js"; import Toastify from "toastify-js";
import store from "../../store"; import store from "../../store";
import Select from "svelte-select"
import ImportRunnerModal from "../runners/ImportRunnerModal.svelte"; import ImportRunnerModal from "../runners/ImportRunnerModal.svelte";
import PromiseError from "../base/PromiseError.svelte"; import PromiseError from "../base/PromiseError.svelte";
import ConfirmTeamDeletion from "./ConfirmTeamDeletion.svelte"; import ConfirmTeamDeletion from "./ConfirmTeamDeletion.svelte";
@ -170,7 +171,17 @@
aria-haspopup="true" aria-haspopup="true"
aria-expanded="true"> aria-expanded="true">
{$_('generate-sponsoring-contracts')} {$_('generate-sponsoring-contracts')}
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="-mr-1 ml-2 h-5 w-5"><path fill="none" d="M0 0h24v24H0z"/><path fill="currentColor" d="M3 19h18v2H3v-2zm10-5.83l6.07-6.07 1.42 1.41L12 17 3.52 8.52l1.4-1.42L11 13.17V2h2v11.17z"/></svg> <svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
class="-mr-1 ml-2 h-5 w-5"><path
fill="none"
d="M0 0h24v24H0z" />
<path
fill="currentColor"
d="M3 19h18v2H3v-2zm10-5.83l6.07-6.07 1.42 1.41L12 17 3.52 8.52l1.4-1.42L11 13.17V2h2v11.17z" /></svg>
</button> </button>
</div> </div>
{#if sponsoring_contracts_download_open} {#if sponsoring_contracts_download_open}
@ -351,14 +362,20 @@
<label <label
for="org" for="org"
class="font-medium text-gray-700">{$_('organization')}</label> class="font-medium text-gray-700">{$_('organization')}</label>
<select <Select
name="org" 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={teamdata.parentGroup} getSelectionLabel={(option) => {return option.name}}
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"> getOptionLabel={(option) => {return option.name}}
{#each orgs as o} itemFilter={(label, filterText, option) =>
<option value={o.id}>{o.name}</option> label.toLowerCase().includes(filterText.toLowerCase()) ||
{/each} option.id.toString().startsWith(filterText.toLowerCase())}
</select> items={orgs}
showChevron={true}
placeholder={$_('search-for-runner-by-name-or-id')}
noOptionsMessage={$_('no-runners-found')}
selectedValue={undefined || orgs.find((r) => (r.id = original.parentGroup.id))}
on:select={(selectedValue) => (teamdata.parentGroup == selectedValue.detail)}
on:clear={()=>(teamdata.parentGroup = null)} />
</div> </div>
</section> </section>
{:else} {:else}