From 65e89988943807c1606a8b6aea49564b13d52537 Mon Sep 17 00:00:00 2001 From: Philipp Dormann Date: Thu, 16 Feb 2023 11:26:37 +0100 Subject: [PATCH 01/11] set table-layout:fixed + display when loaded ref #146 --- src/components/runners/RunnersOverview.svelte | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/src/components/runners/RunnersOverview.svelte b/src/components/runners/RunnersOverview.svelte index c93f3f89..d16321e3 100644 --- a/src/components/runners/RunnersOverview.svelte +++ b/src/components/runners/RunnersOverview.svelte @@ -1,5 +1,5 @@ -{#if store.state.jwtinfo.userdetails.permissions.includes('RUNNER:GET')} +{#if store.state.jwtinfo.userdetails.permissions.includes("RUNNER:GET")} {#await runners_promise} {:then} {#if current_runners.length === 0} @@ -74,33 +71,35 @@ + placeholder={$_("datatable.search")} + aria-label={$_("datatable.search")} + class="gridjs-input gridjs-search-input mb-4" + />
- + + class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded" + />
{runner.firstname} - {runner.middlename || ''} + {runner.middlename || ""} {runner.lastname}
@@ -187,60 +196,80 @@ {/if} {#if runner.address.address1 !== null} {runner.address.address1}
- {runner.address.address2 || ''}
+ {runner.address.address2 || ""}
{runner.address.postalcode} {runner.address.city} {runner.address.country} {/if} - {#if runner.group.responseType === 'RUNNERTEAM'} + {#if runner.group.responseType === "RUNNERTEAM"} {runner.group.parentGroup.name} > {runner.group.name} + class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800" + >{runner.group.parentGroup.name} > {runner.group + .name} {/if} - {#if runner.group.responseType === 'RUNNERORGANIZATION'} + {#if runner.group.responseType === "RUNNERORGANIZATION"} {runner.group.name} + class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800" + >{runner.group.name} {/if} - {runner.distance /1000 } km + {runner.distance / 1000} km {#if active_deletes[runner.id] === true} + class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium" + > + class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer" + >{$_("cancel-delete")} + class="ml-4 text-red-600 hover:text-red-900 cursor-pointer" + >{$_("confirm-delete")} {:else} + class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium" + > {$_('details')} - {#if store.state.jwtinfo.userdetails.permissions.includes('RUNNER:DELETE')} + class="text-indigo-600 hover:text-indigo-900" + >{$_("details")} + {#if store.state.jwtinfo.userdetails.permissions.includes("RUNNER:DELETE")} + class="ml-4 text-red-600 hover:text-red-900 cursor-pointer" + >{$_("delete")} {/if} {/if} @@ -255,7 +284,7 @@ {:catch error}
- {$_('general_promise_error')} + {$_("general_promise_error")} {error}
From 81b8fbf4e341e6f2998a6e9e2053972c5c225021 Mon Sep 17 00:00:00 2001 From: Philipp Dormann Date: Thu, 16 Feb 2023 12:27:45 +0100 Subject: [PATCH 05/11] 1st datatable try with @vincjo/datatables --- package.json | 1 + src/components/runners/RunnersOverview.svelte | 363 +++++++----------- 2 files changed, 137 insertions(+), 227 deletions(-) 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/runners/RunnersOverview.svelte b/src/components/runners/RunnersOverview.svelte index 8263eff3..51496409 100644 --- a/src/components/runners/RunnersOverview.svelte +++ b/src/components/runners/RunnersOverview.svelte @@ -47,12 +47,10 @@ 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; - } + // === + import { DataHandler, Datatable, Th, ThFilter } from "@vincjo/datatables"; + const handler = new DataHandler(current_runners, { rowsPerPage: 50 }); + const rows = handler.getRows(); {#if store.state.jwtinfo.userdetails.permissions.includes("RUNNER:GET")} @@ -65,228 +63,139 @@

{$_("this-might-take-a-moment")}

{:then} - {#if current_runners.length === 0} - - {:else} - + + + -
- - - - -
-
-
- {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} - - {/if} - {/if} - {/each} - - -
- {/if} - {:catch error} -
- - {$_("general_promise_error")} - {error} -
+ + + + + + + + + + + + + + + + + + {#each $rows as row} + + + + + + + + + + {/each} + +
+ + IDFirst NameMiddle NameLast NameGruppeDistanz{$_("action")}
+ + + + + + + +
+ + {row.id}{row.firstname}{row.middlename || ""}{row.lastname}{#if row.group.responseType === "RUNNERTEAM"} + {row.group.parentGroup.name} > {row.group.name} + {/if} + {#if row.group.responseType === "RUNNERORGANIZATION"} + {row.group.name} + {/if}{row.distance / 1000} km + +
+ {/await} {/if} + + From 14d64b6070d98e6368da5709e9ff8221e8a621c7 Mon Sep 17 00:00:00 2001 From: Philipp Dormann Date: Thu, 16 Feb 2023 15:05:41 +0100 Subject: [PATCH 06/11] add group filtering to table ref #146 --- src/components/runners/RunnersOverview.svelte | 108 +++++++++--------- src/components/runners/ThFilterGroup.svelte | 34 ++++++ 2 files changed, 86 insertions(+), 56 deletions(-) create mode 100644 src/components/runners/ThFilterGroup.svelte diff --git a/src/components/runners/RunnersOverview.svelte b/src/components/runners/RunnersOverview.svelte index 51496409..e772871e 100644 --- a/src/components/runners/RunnersOverview.svelte +++ b/src/components/runners/RunnersOverview.svelte @@ -5,25 +5,20 @@ 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"; - let pageLoaded = false; - $: searchvalue = ""; $: active_deletes = []; export let current_runners = []; + const handler = new DataHandler(current_runners, { rowsPerPage: 50 }); + const rows = handler.getRows(); const runners_promise = RunnerService.runnerControllerGetAll().then((val) => { + console.log(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( (r) => r.is_selected === true ); @@ -47,10 +42,6 @@ RunnerOrganizationService.runnerOrganizationControllerGetAll().then((val) => { orgs = val; }); - // === - import { DataHandler, Datatable, Th, ThFilter } from "@vincjo/datatables"; - const handler = new DataHandler(current_runners, { rowsPerPage: 50 }); - const rows = handler.getRows(); {#if store.state.jwtinfo.userdetails.permissions.includes("RUNNER:GET")} @@ -98,7 +89,7 @@ - + @@ -133,47 +124,48 @@ {/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} @@ -186,6 +178,10 @@ thead { background: #fff; } + thead { + position: sticky; + inset-block-start: 0; + } tbody td { padding: 4px; } 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 @@ + + + + + From 2e075eafab5c4d78fd9aa9d66834b477b2685bfc Mon Sep 17 00:00:00 2001 From: Philipp Dormann Date: Thu, 16 Feb 2023 15:43:11 +0100 Subject: [PATCH 07/11] RunnersOverview loading fix ref #146 --- src/components/runners/RunnersOverview.svelte | 44 +++++++++++-------- 1 file changed, 25 insertions(+), 19 deletions(-) diff --git a/src/components/runners/RunnersOverview.svelte b/src/components/runners/RunnersOverview.svelte index e772871e..998b6582 100644 --- a/src/components/runners/RunnersOverview.svelte +++ b/src/components/runners/RunnersOverview.svelte @@ -11,20 +11,18 @@ import GenerateSponsoringContracts from "../pdf_generation/GenerateSponsoringContracts.svelte"; import GenerateRunnerCards from "../pdf_generation/GenerateRunnerCards.svelte"; import GenerateRunnerCertificates from "../pdf_generation/GenerateRunnerCertificates.svelte"; + import { onMount } from "svelte"; $: active_deletes = []; - export let current_runners = []; + let dataLoaded = false; + let current_runners = []; const handler = new DataHandler(current_runners, { rowsPerPage: 50 }); const rows = handler.getRows(); - const runners_promise = RunnerService.runnerControllerGetAll().then((val) => { - console.log(val); - current_runners = val; - }); $: sponsoring_contracts_show = current_runners.some( - (r) => r.is_selected === true + (r) => r.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); + $: cards_show = current_runners.some((r) => r.selected === true); + $: certificates_show = current_runners.some((r) => r.selected === true); + $: generate_runners = current_runners.filter((r) => r.selected === true); $: teams = []; $: orgs = []; $: mappedteams = teams.map(function (g) { @@ -35,17 +33,25 @@ return { value: g.id, label: g.name }; }) .concat(mappedteams); - - RunnerTeamService.runnerTeamControllerGetAll().then((val) => { - teams = val; - }); - RunnerOrganizationService.runnerOrganizationControllerGetAll().then((val) => { - orgs = 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; + } + ); }); {#if store.state.jwtinfo.userdetails.permissions.includes("RUNNER:GET")} - {#await runners_promise} + {#if !dataLoaded} - {:then} + {:else}
First Name Middle Name Last Name - Gruppe + Gruppe Distanz {$_("action")} @@ -171,7 +177,7 @@ - {/await} + {/if} {/if}