diff --git a/package.json b/package.json index 7a8212d3..0b6d2cf1 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,7 @@ }, "license": "CC-BY-NC-SA-4.0", "devDependencies": { + "@vincjo/datatables": "^1.1.0", "@odit/lfk-client-js": "0.13.1", "@odit/license-exporter": "0.0.11", "@sveltejs/vite-plugin-svelte": "1.0.0-next.6", diff --git a/src/components/pdf_generation/GenerateRunnerCards.svelte b/src/components/pdf_generation/GenerateRunnerCards.svelte index 47159841..1be03b5f 100644 --- a/src/components/pdf_generation/GenerateRunnerCards.svelte +++ b/src/components/pdf_generation/GenerateRunnerCards.svelte @@ -369,7 +369,7 @@ {#if cards_dropdown_open}
{#if certificates_dropdown_open}
{#if sponsoring_contracts_download_open}
- import { getLocaleFromNavigator, _ } from "svelte-i18n"; + import { _ } from "svelte-i18n"; import { RunnerService, RunnerTeamService, RunnerOrganizationService, } from "@odit/lfk-client-js"; + import ThFilterGroup from "./ThFilterGroup.svelte"; + import { DataHandler, Datatable, Th, ThFilter } from "@vincjo/datatables"; import store from "../../store"; - import RunnersEmptyState from "./RunnersEmptyState.svelte"; - import Select from "svelte-select"; import GenerateSponsoringContracts from "../pdf_generation/GenerateSponsoringContracts.svelte"; import GenerateRunnerCards from "../pdf_generation/GenerateRunnerCards.svelte"; import GenerateRunnerCertificates from "../pdf_generation/GenerateRunnerCertificates.svelte"; - $: searchvalue = ""; + import { onMount } from "svelte"; $: 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); - $: sponsoring_contracts_show = current_runners.some( - (r) => r.is_selected === true - ); - $: cards_show = current_runners.some( - (r) => r.is_selected === true - ); - $: certificates_show = current_runners.some( - (r) => r.is_selected === true - ); - $: generate_runners = current_runners.filter((r) => r.is_selected === true); + let dataLoaded = false; + let current_runners = []; + const handler = new DataHandler(current_runners, { rowsPerPage: 50 }); + const rows = handler.getRows(); + $: sponsoring_contracts_show = generate_runners.length > 0; + $: cards_show = generate_runners.length > 0; + $: certificates_show = generate_runners.length > 0; + $: generate_runners = []; //current_runners.filter((r) => r.selected === true); $: teams = []; $: orgs = []; $: mappedteams = teams.map(function (g) { @@ -42,222 +31,193 @@ return { value: g.id, label: g.name }; }) .concat(mappedteams); - - RunnerTeamService.runnerTeamControllerGetAll().then((val) => { - teams = val; + onMount(() => { + RunnerService.runnerControllerGetAll().then((val) => { + current_runners = val; + dataLoaded = true; + handler.setRows(val); + }); + RunnerTeamService.runnerTeamControllerGetAll().then((val) => { + teams = val; + }); + RunnerOrganizationService.runnerOrganizationControllerGetAll().then( + (val) => { + orgs = 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; - } -{#if store.state.jwtinfo.userdetails.permissions.includes('RUNNER:GET')} - {#await runners_promise} +{#if store.state.jwtinfo.userdetails.permissions.includes("RUNNER:GET")} + {#if !dataLoaded} - {:then} - {#if current_runners.length === 0} - - {:else} - -
- - { + if (generate_runners.length != current_runners.length) { + generate_runners = current_runners; + } else { + generate_runners = []; + } + }} + /> + + ID + First Name + Middle Name + Last Name + Gruppe + Distanz + {$_("action")} + + + + + + + + + + + + + + {#each $rows as row} - - + i.id == row.id).length > 0} on:click={() => { - const newstate = !current_runners.some((r) => r.is_selected === true); - current_runners = current_runners.map((r) => { - r.is_selected = newstate; - return r; - }); + if ( + generate_runners.findIndex((i) => i.id == row.id) == -1 + ) { + generate_runners.push(row); + generate_runners = generate_runners; + } else { + generate_runners = generate_runners.filter( + (r) => r.id != row.id + ); + } + console.log(generate_runners) }} - class="underline cursor-pointer select-none">{#if current_runners.some((r) => r.is_selected === true)} - {$_('deselect-all')} - {:else}{$_('select-all')}{/if} - - - - {$_('name')} - - - {$_('contact-information')} - - - {$_('group')} - - - {$_('distance-in-km')} - - - {$_('action')} - - - - - {#each current_runners as runner} - {#if runner.firstname - .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} - - - - - -
-
-
- {runner.firstname} - {runner.middlename || ''} - {runner.lastname} -
-
-
- - - {#if runner.email} -
{runner.email}
- {/if} - {#if runner.phone} -
{runner.phone}
- {/if} - {#if runner.address.address1 !== null} - {runner.address.address1}
- {runner.address.address2 || ''}
- {runner.address.postalcode} - {runner.address.city} - {runner.address.country} - {/if} - - - {#if runner.group.responseType === 'RUNNERTEAM'} - {runner.group.parentGroup.name} > {runner.group.name} - {/if} - {#if runner.group.responseType === 'RUNNERORGANIZATION'} - {runner.group.name} - {/if} - - - {runner.distance /1000 } km - - {#if active_deletes[runner.id] === true} - - - - - {:else} - - {$_('details')} - {#if store.state.jwtinfo.userdetails.permissions.includes('RUNNER:DELETE')} - - {/if} - - {/if} - + /> + + {row.id} + {row.firstname} + {row.middlename || ""} + {row.lastname} + {#if row.group.responseType === "RUNNERTEAM"} + {row.group.parentGroup.name} > {row.group.name} {/if} - {/if} - {/each} - - -
- {/if} - {:catch error} -
- - {$_('general_promise_error')} - {error} - -
- {/await} + {#if row.group.responseType === "RUNNERORGANIZATION"} + {row.group.name} + {/if} + {row.distance / 1000} km + + {#if active_deletes[row.id] === true} + + + {:else} + {$_("details")} + {#if store.state.jwtinfo.userdetails.permissions.includes("RUNNER:DELETE")} + + {/if} + {/if} + + + {/each} + + + + {/if} {/if} + + diff --git a/src/components/runners/ThFilterGroup.svelte b/src/components/runners/ThFilterGroup.svelte new file mode 100644 index 00000000..3c466c6f --- /dev/null +++ b/src/components/runners/ThFilterGroup.svelte @@ -0,0 +1,34 @@ + + + + +