Switched import modal over to svelte select

ref #98
This commit is contained in:
Nicolai Ort 2021-03-18 16:24:59 +01:00
parent 82423ec467
commit bd3ea721c3

View File

@ -11,6 +11,7 @@
RunnerOrganizationService, RunnerOrganizationService,
} from "@odit/lfk-client-js"; } from "@odit/lfk-client-js";
import { createEventDispatcher } from "svelte"; import { createEventDispatcher } from "svelte";
import Select from "svelte-select";
export let opened_from; export let opened_from;
export let passed_org; export let passed_org;
export let passed_orgs; export let passed_orgs;
@ -35,22 +36,18 @@
} }
}; };
})(); })();
let orgs = []; let groups = [];
RunnerOrganizationService.runnerOrganizationControllerGetAll().then((val) => { RunnerOrganizationService.runnerOrganizationControllerGetAll().then((val) => {
orgs = val; const orgs = val.map((r) => {
if(opened_from === 'OrgOverview'){ return { label: r.name, value: `ORG_${r.id}` };
selected_org = orgs[0].id
}
}); });
let teams = []; groups = groups.concat(orgs);
RunnerTeamService.runnerTeamControllerGetAll().then((val) => { RunnerTeamService.runnerTeamControllerGetAll().then((val) => {
teams = val; const teams = val.map((r) => {
if (opened_from === "RunnerOverview" && teams.length>0) { return { label: `${r.parentGroup.name} > ${r.name}`, value: `TEAM_${r.id}` };
selected_org_or_team = "TEAM_" + teams[0].id; });
} groups = groups.concat(teams);
if(teams.length==0 && orgs.length>0){ });
selected_org_or_team = "ORG_" + orgs[0].id
}
}); });
let selected_org; let selected_org;
$: selected_org_or_team = ""; $: selected_org_or_team = "";
@ -264,21 +261,23 @@
{/if} {/if}
{#if opened_from === 'RunnerOverview'} {#if opened_from === 'RunnerOverview'}
<p>{$_('group')}</p> <p>{$_('group')}</p>
<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_org_or_team} itemFilter={(label, filterText, option) => label
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"> .toLowerCase()
{#each teams as team} .includes(
<option value="TEAM_{team.id}"> filterText.toLowerCase()
{team.parentGroup.name} ) || option.id.value
&gt; .toString()
{team.name} .startsWith(filterText.toLowerCase())}
</option> items={groups}
{/each} showChevron={true}
{#each orgs as org} placeholder={$_('search-for-an-organization-or-team-by-name-or-id')}
<option value="ORG_{org.id}">{org.name}</option> noOptionsMessage={$_('no-organization-or-team-found')}
{/each} on:select={(selectedValue) => {
</select> selected_org_or_team = selectedValue.detail.value;
}}
on:clear={() => (selected_org_or_team = null)} />
{/if} {/if}
{#if opened_from === 'OrgDetail'} {#if opened_from === 'OrgDetail'}
<p> <p>