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

dependency update, drop focusTrap, first tanstack experiment in RunnersOverview

Browse Source
This commit is contained in:
Philipp Dormann
2023-04-12 15:20:38 +02:00
parent 70307a9e82
commit 9bec95ede8
32 changed files with 2188 additions and 1195 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,5 +1,53 @@
<script>
import { _ } from "svelte-i18n";
import { writable } from "svelte/store";
import {
createSvelteTable,
flexRender,
getCoreRowModel,
} from "@tanstack/svelte-table";
const columns = [
// {
// accessorKey: "id",
// cell: (info) => info.getValue(),
// footer: (info) => info.column.id,
// },
// {
// accessorFn: (row) => row.lastName,
// id: "lastName",
// cell: (info) => info.getValue(),
// header: () => "Last Name",
// footer: (info) => info.column.id,
// },
{
accessorKey: "id",
header: () => "id",
},
{
accessorKey: "firstname",
header: () => "firstname",
},
// {
// accessorKey: "middlename",
// header: () => "middlename",
// },
{
accessorKey: "lastname",
header: () => "lastname",
},
{
accessorKey: "group.name",
header: () => "group",
},
{
accessorKey: "distance",
header: () => "distance",
},
];
//
import {
RunnerService,
RunnerTeamService,
@@ -14,7 +62,7 @@
import { onMount } from "svelte";
$: active_deletes = [];
let dataLoaded = false;
let current_runners = [];
export let current_runners = [];
const handler = new DataHandler(current_runners, { rowsPerPage: 50 });
const rows = handler.getRows();
$: sponsoring_contracts_show = generate_runners.length > 0;
@@ -31,11 +79,22 @@
return { value: g.id, label: g.name };
})
.concat(mappedteams);
const options = writable({
data: [],
columns: columns,
getCoreRowModel: getCoreRowModel(),
});
const table = createSvelteTable(options);
onMount(() => {
RunnerService.runnerControllerGetAll().then((val) => {
current_runners = val;
dataLoaded = true;
handler.setRows(val);
options.update((options) => ({
...options,
data: current_runners,
}));
});
RunnerTeamService.runnerTeamControllerGetAll().then((val) => {
teams = val;
@@ -69,134 +128,44 @@
bind:generate_runners
/>
</div>
<Datatable {handler}>
<table>
<thead>
<!-- <Datatable {handler}> -->
<table>
<thead>
{#each $table.getHeaderGroups() as headerGroup}
<tr>
<th style="border-bottom: 1px solid #ddd;">
<input
type="checkbox"
class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
checked={generate_runners.length == current_runners.length}
on:click={() => {
if (generate_runners.length != current_runners.length) {
generate_runners = current_runners;
} else {
generate_runners = [];
}
}}
/>
</th>
<Th {handler} orderBy="id">ID</Th>
<Th {handler} orderBy="firstname">First Name</Th>
<Th {handler} orderBy="middlename">Middle Name</Th>
<Th {handler} orderBy="lastname">Last Name</Th>
<th style="border-bottom: 1px solid #ddd;">Gruppe</th>
<Th {handler} orderBy="distance">Distanz</Th>
<th style="border-bottom: 1px solid #ddd;">{$_("action")}</th>
{#each headerGroup.headers as header}
<th>
{#if !header.isPlaceholder}
<svelte:component
this={flexRender(
header.column.columnDef.header,
header.getContext()
)}
/>
{/if}
</th>
{/each}
</tr>
{/each}
</thead>
<tbody>
{#each $table.getRowModel().rows as row}
<tr>
<th style="border-bottom: 1px solid #ddd;" />
<ThFilter {handler} filterBy="id" />
<ThFilter {handler} filterBy="firstname" />
<ThFilter {handler} filterBy="middlename" />
<ThFilter {handler} filterBy="lastname" />
<ThFilterGroup groups={selectgroups} {handler} />
<th style="border-bottom: 1px solid #ddd;" />
<th style="border-bottom: 1px solid #ddd;" />
</tr>
</thead>
<tbody>
{#each $rows as row}
<tr>
{#each row.getVisibleCells() as cell}
<td>
<input
type="checkbox"
class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
checked={generate_runners.filter((i)=>i.id == row.id).length > 0}
on:click={() => {
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)
}}
<svelte:component
this={flexRender(
cell.column.columnDef.cell,
cell.getContext()
)}
/>
</td>
<td>{row.id}</td>
<td>{row.firstname}</td>
<td>{row.middlename || ""}</td>
<td>{row.lastname}</td>
<td
>{#if row.group.responseType === "RUNNERTEAM"}
<a
href="../teams/{row.group.id}"
class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800"
>{row.group.parentGroup.name} &gt; {row.group.name}</a
>
{/if}
{#if row.group.responseType === "RUNNERORGANIZATION"}
<a
href="../orgs/{row.group.id}"
class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800"
>{row.group.name}</a
>
{/if}</td
>
<td>{row.distance / 1000} km</td>
<td>
{#if active_deletes[row.id] === true}
<button
on:click={() => {
active_deletes[row.id] = false;
}}
tabindex="0"
class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer"
>{$_("cancel-delete")}</button
>
<button
on:click={() => {
RunnerService.runnerControllerRemove(row.id, true)
.then((resp) => {
current_runners = current_runners.filter(
(obj) => obj.id !== row.id
);
})
.catch((err) => {});
}}
tabindex="0"
class="ml-4 text-red-600 hover:text-red-900 cursor-pointer"
>{$_("confirm-delete")}</button
>
{:else}
<a
href="./{row.id}"
class="text-indigo-600 hover:text-indigo-900"
>{$_("details")}</a
>
{#if store.state.jwtinfo.userdetails.permissions.includes("RUNNER:DELETE")}
<button
on:click={() => {
active_deletes[row.id] = true;
}}
tabindex="0"
class="ml-4 text-red-600 hover:text-red-900 cursor-pointer"
>{$_("delete")}</button
>
{/if}
{/if}
</td>
</tr>
{/each}
</tbody>
</table>
</Datatable>
{/each}
</tr>
{/each}
</tbody>
</table>
<!-- </Datatable> -->
{/if}
{/if}