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

feature/52-runner-filters #63

Merged
philipp merged 4 commits from feature/52-runner-filters into dev 2021-02-12 18:09:24 +00:00
Conversation 1 Commits 4 Files Changed 2 +39 -6
2 changed files with 39 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -22,6 +22,7 @@
"svelte-filepond": "0.0.1",
"svelte-focus-trap": "1.0.1",
"svelte-i18n": "3.3.0",
"svelte-select": "^3.16.1",
"tailwindcss": "2.0.2",
"tinro": "0.5.12",
"toastify-js": "1.9.3",

44
src/components/RunnersOverview.svelte
View File

@ -1,14 +1,41 @@
<script>
import { _ } from "svelte-i18n";
import { RunnerService } from "@odit/lfk-client-js";
import { RunnerService,RunnerTeamService,
RunnerOrganizationService, } from "@odit/lfk-client-js";
import store from "../store";
import RunnersEmptyState from "./RunnersEmptyState.svelte";
import Select from 'svelte-select';
$: searchvalue = "";
$: active_deletes = [];
export let current_runners = [];
const runners_promise = RunnerService.runnerControllerGetAll().then((val) => {
current_runners = val;
});
$: selectedFilter_teams = null;
$: selectedFilter = null;
$: filter__teams = selectedFilter_teams||[];
$: filter__orgs = selectedFilter||[];
$:filterGroupIDs=filter__teams.concat(filter__orgs).map(i=>i.value)
$: teams = [];
$: orgs = [];
$:mappedteams=teams.map(function(g){
return {value:g.id,label:g.parentGroup.name+" > "+g.name}
})
$:selectgroups=(orgs.map(function(g){
return {value:g.id,label:g.name}
})).concat(mappedteams)
RunnerTeamService.runnerTeamControllerGetAll().then((val) => {
teams = val;
});
RunnerOrganizationService.runnerOrganizationControllerGetAll().then((val) => {
orgs = val;
});
function should_display_based_on_id(id) {
if(searchvalue.toString().slice(-1)==="*"){
return id.toString().startsWith(searchvalue.replace("*",""))
}
return id.toString()===searchvalue;
}
</script>
{#if store.state.jwtinfo.userdetails.permissions.includes('RUNNER:GET')}
@ -29,6 +56,12 @@
placeholder={$_('datatable.search')}
aria-label={$_('datatable.search')}
class="gridjs-input gridjs-search-input mb-4" />
<div class="block mb-1">
<label for="country" class="text-sm font-medium text-gray-700">Filter by Organization/ Team</label>
<Select on:select={(event)=>{
selectedFilter=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>
</div>
<div
class="shadow border-b border-gray-200 sm:rounded-lg overflow-x-scroll">
<table class="divide-y divide-gray-200 w-full">
@ -61,11 +94,9 @@
</thead>
<tbody class="divide-y divide-gray-200">
{#each current_runners as runner}
{#if Object.values(runner)
.toString()
.toLowerCase()
.includes(searchvalue)}
<tr data-rowid="user_{runner.id}">
{#if runner.firstname.toLowerCase().includes(searchvalue.toLowerCase())||runner.middlename.toLowerCase().includes(searchvalue.toLowerCase())||runner.lastname.toLowerCase().includes(searchvalue.toLowerCase())||should_display_based_on_id(runner.id)}
{#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}>
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="ml-4">
@ -139,6 +170,7 @@
{/if}
</tr>
{/if}
{/if}
{/each}
</tbody>
</table>