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

✨ RunnersOverview - basic working filter

Browse Source 
ref #52
This commit is contained in:
Philipp Dormann 2021-02-12 18:47:46 +01:00
parent e23821a7cb
commit 575b4ce970
1 changed files with 14 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
src/components/RunnersOverview.svelte
View File

@ -12,40 +12,26 @@
current_runners = val; current_runners = val;
}); });
$: selectedFilter_teams = null; $: selectedFilter_teams = null;
$: selectedFilter_orgs = null; $: selectedFilter = null;
$: filter__teams = selectedFilter_teams||[]; $: filter__teams = selectedFilter_teams||[];
$: filter__orgs = selectedFilter_orgs||[]; $: filter__orgs = selectedFilter||[];
$:filterGroupIDs=filter__teams.concat(filter__orgs).map(i=>i.value) $:filterGroupIDs=filter__teams.concat(filter__orgs).map(i=>i.value)
$: allteams = [];
$: teams = []; $: teams = [];
$: orgs = []; $: orgs = [];
$:selectgroups=orgs.map(function(g){ $:mappedteams=teams.map(function(g){
return {value:g.id,label:g.name} return {value:g.id,label:g.parentGroup.name+" > "+g.name}
}) })
$:selectteams=teams.map(function(g){ $:selectgroups=(orgs.map(function(g){
return {value:g.id,label:g.name} return {value:g.id,label:g.name}
}) })).concat(mappedteams)
RunnerTeamService.runnerTeamControllerGetAll().then((val) => { RunnerTeamService.runnerTeamControllerGetAll().then((val) => {
allteams = val; teams = val;
RunnerOrganizationService.runnerOrganizationControllerGetAll().then((val) => { });
orgs = val; RunnerOrganizationService.runnerOrganizationControllerGetAll().then((val) => {
teams = allteams; orgs = val;
const org_ids=orgs.map(o=>o.id)
for (const i of org_ids) {
teams=teams.filter(t=>t.parentGroup.id!==i)
}
});
}); });
</script> </script>
<hr>
<h4>DEBUG</h4>
{JSON.stringify(filterGroupIDs)}
<hr>
{JSON.stringify(teams)}
<hr>
{JSON.stringify(orgs)}
<hr>
{#if store.state.jwtinfo.userdetails.permissions.includes('RUNNER:GET')} {#if store.state.jwtinfo.userdetails.permissions.includes('RUNNER:GET')}
{#await runners_promise} {#await runners_promise}
<div <div
@ -65,24 +51,10 @@
aria-label={$_('datatable.search')} aria-label={$_('datatable.search')}
class="gridjs-input gridjs-search-input mb-4" /> class="gridjs-input gridjs-search-input mb-4" />
<div class="block mb-1"> <div class="block mb-1">
<label for="country" class="text-sm font-medium text-gray-700">Filter by Organization</label> <label for="country" class="text-sm font-medium text-gray-700">Filter by Organization/ Team</label>
<Select on:select={(event)=>{ <Select on:select={(event)=>{
console.log("change!"); selectedFilter=event.detail
selectedFilter_orgs=event.detail }} selectedValue={selectedFilter} placeholder="Filter by Organization/ Team" containerClasses="mt-1 py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" items={selectgroups} isMulti={true}></Select>
selectedFilter_teams=null;
teams = allteams;
console.log(teams);
const org_ids=orgs.map(o=>o.id)
console.log(org_ids);
for (const i of org_ids) {
teams=teams.filter(t=>t.parentGroup.id!==i)
}
console.log(teams);
}} selectedValue={selectedFilter_orgs} placeholder="Filter by Organization" containerClasses="mt-1 py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" items={selectgroups} isMulti={true}></Select>
<label for="country" class="text-sm font-medium text-gray-700">Filter by Team</label>
<Select on:select={(event)=>{
selectedFilter_teams=event.detail
}} selectedValue={selectedFilter_teams} placeholder="Filter by Team" containerClasses="mt-1 py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" items={selectteams} isMulti={true}></Select>
</div> </div>
<div <div
class="shadow border-b border-gray-200 sm:rounded-lg overflow-x-scroll"> class="shadow border-b border-gray-200 sm:rounded-lg overflow-x-scroll">
@ -120,7 +92,7 @@ selectedFilter_teams=event.detail
.toString() .toString()
.toLowerCase() .toLowerCase()
.includes(searchvalue)} .includes(searchvalue)}
{#if filterGroupIDs.includes(runner.group.id)||filterGroupIDs.length===0} {#if filterGroupIDs.includes(runner.group.id)||filterGroupIDs.includes(runner.group.parentGroup?.id)||filterGroupIDs.length===0}
<tr data-rowid="user_{runner.id}" data-groupid={runner.group.id}> <tr data-rowid="user_{runner.id}" data-groupid={runner.group.id}>
<td class="px-6 py-4 whitespace-nowrap"> <td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center"> <div class="flex items-center">