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

add group filtering to table

Browse Source 
ref #146
This commit is contained in:
Philipp Dormann 2023-02-16 15:05:41 +01:00
parent 81b8fbf4e3
commit 14d64b6070
2 changed files with 86 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

108
src/components/runners/RunnersOverview.svelte
View File

@ -5,25 +5,20 @@
RunnerTeamService, RunnerTeamService,
RunnerOrganizationService, RunnerOrganizationService,
} from "@odit/lfk-client-js"; } from "@odit/lfk-client-js";
import ThFilterGroup from "./ThFilterGroup.svelte";
import { DataHandler, Datatable, Th, ThFilter } from "@vincjo/datatables";
import store from "../../store"; import store from "../../store";
import RunnersEmptyState from "./RunnersEmptyState.svelte";
import Select from "svelte-select";
import GenerateSponsoringContracts from "../pdf_generation/GenerateSponsoringContracts.svelte"; import GenerateSponsoringContracts from "../pdf_generation/GenerateSponsoringContracts.svelte";
import GenerateRunnerCards from "../pdf_generation/GenerateRunnerCards.svelte"; import GenerateRunnerCards from "../pdf_generation/GenerateRunnerCards.svelte";
import GenerateRunnerCertificates from "../pdf_generation/GenerateRunnerCertificates.svelte"; import GenerateRunnerCertificates from "../pdf_generation/GenerateRunnerCertificates.svelte";
let pageLoaded = false;
$: searchvalue = "";
$: active_deletes = []; $: active_deletes = [];
export let current_runners = []; export let current_runners = [];
const handler = new DataHandler(current_runners, { rowsPerPage: 50 });
const rows = handler.getRows();
const runners_promise = RunnerService.runnerControllerGetAll().then((val) => { const runners_promise = RunnerService.runnerControllerGetAll().then((val) => {
console.log(val);
current_runners = val; current_runners = val;
pageLoaded = true;
}); });
$: selectedFilter_teams = null;
$: selectedFilter = null;
$: filter__teams = selectedFilter_teams || [];
$: filter__orgs = selectedFilter || [];
$: filterGroupIDs = filter__teams.concat(filter__orgs).map((i) => i.value);
$: sponsoring_contracts_show = current_runners.some( $: sponsoring_contracts_show = current_runners.some(
(r) => r.is_selected === true (r) => r.is_selected === true
); );
@ -47,10 +42,6 @@
RunnerOrganizationService.runnerOrganizationControllerGetAll().then((val) => { RunnerOrganizationService.runnerOrganizationControllerGetAll().then((val) => {
orgs = val; orgs = val;
}); });
// ===
import { DataHandler, Datatable, Th, ThFilter } from "@vincjo/datatables";
const handler = new DataHandler(current_runners, { rowsPerPage: 50 });
const rows = handler.getRows();
</script> </script>
{#if store.state.jwtinfo.userdetails.permissions.includes("RUNNER:GET")} {#if store.state.jwtinfo.userdetails.permissions.includes("RUNNER:GET")}
@ -98,7 +89,7 @@
<ThFilter {handler} filterBy="firstname" /> <ThFilter {handler} filterBy="firstname" />
<ThFilter {handler} filterBy="middlename" /> <ThFilter {handler} filterBy="middlename" />
<ThFilter {handler} filterBy="lastname" /> <ThFilter {handler} filterBy="lastname" />
<ThFilter {handler} filterBy="group" /> <ThFilterGroup groups={selectgroups} {handler} />
<th /> <th />
<th /> <th />
</tr> </tr>
@ -133,47 +124,48 @@
{/if}</td {/if}</td
> >
<td>{row.distance / 1000} km</td> <td>{row.distance / 1000} km</td>
<td /> <td>
<!-- <td> {#if active_deletes[row.id] === true}
{#if active_deletes[row.id] === true} <button
<button on:click={() => {
on:click={() => { active_deletes[row.id] = false;
active_deletes[row.id] = false; }}
}} tabindex="0"
tabindex="0" class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer"
class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer" >{$_("cancel-delete")}</button
>{$_("cancel-delete")}</button >
> <button
<button on:click={() => {
on:click={() => { RunnerService.runnerControllerRemove(row.id, true)
RunnerService.runnerControllerRemove(row.id, true) .then((resp) => {
.then((resp) => { current_runners = current_runners.filter(
current_runners = current_runners.filter( (obj) => obj.id !== row.id
(obj) => obj.id !== row.id );
); })
}) .catch((err) => {});
.catch((err) => {}); }}
}} tabindex="0"
tabindex="0" class="ml-4 text-red-600 hover:text-red-900 cursor-pointer"
class="ml-4 text-red-600 hover:text-red-900 cursor-pointer" >{$_("confirm-delete")}</button
>{$_("confirm-delete")}</button >
> {:else}
{:else} <a
<a href="./{row.id}" class="text-indigo-600 hover:text-indigo-900" href="./{row.id}"
>{$_("details")}</a class="text-indigo-600 hover:text-indigo-900"
> >{$_("details")}</a
{#if store.state.jwtinfo.userdetails.permissions.includes("RUNNER:DELETE")} >
<button {#if store.state.jwtinfo.userdetails.permissions.includes("RUNNER:DELETE")}
on:click={() => { <button
active_deletes[row.id] = true; on:click={() => {
}} active_deletes[row.id] = true;
tabindex="0" }}
class="ml-4 text-red-600 hover:text-red-900 cursor-pointer" tabindex="0"
>{$_("delete")}</button class="ml-4 text-red-600 hover:text-red-900 cursor-pointer"
> >{$_("delete")}</button
{/if} >
{/if} {/if}
</td> --> {/if}
</td>
</tr> </tr>
{/each} {/each}
</tbody> </tbody>
@ -186,6 +178,10 @@
thead { thead {
background: #fff; background: #fff;
} }
thead {
position: sticky;
inset-block-start: 0;
}
tbody td { tbody td {
padding: 4px; padding: 4px;
} }

34
src/components/runners/ThFilterGroup.svelte Normal file
View File

@ -0,0 +1,34 @@
<script>
export let groups;
export let handler;
let selected = "all";
</script>
<th>
<select
on:input={() => {
setTimeout(() => {
if (`${selected}`.trim()) {
const value = selected;
handler.filter(value, (runner) => {
if (
runner.group.id === value ||
runner?.group?.parentGroup?.id === value ||
value === "all"
)
return runner;
return "";
});
}
}, 50);
}}
bind:value={selected}
name="groupfilter"
id="groupfilter"
>
<option value="all">Alle</option>
{#each groups as g}
<option value={g.value}>{g.label}</option>
{/each}
</select>
</th>