Merge branch 'experiment/tanstack' of git.odit.services:lfk/frontend into experiment/tanstack
This commit is contained in:
commit
adec38b50b
GPG Key ID:
13AFA55AF62F269F
@ -214,7 +214,7 @@
|
||||
/>
|
||||
</th>
|
||||
{#each headerGroup.headers as header}
|
||||
<TableHeader {header}></TableHeader>
|
||||
<TableHeader {header} />
|
||||
{/each}
|
||||
</tr>
|
||||
{/each}
|
||||
@ -245,7 +245,6 @@
|
||||
</table>
|
||||
</div>
|
||||
<div class="h-2" />
|
||||
|
||||
{/if}
|
||||
{/if}
|
||||
<TableBottom {table} {selected}></TableBottom>
|
||||
<TableBottom {table} {selected} />
|
||||
|
||||
@ -2,19 +2,42 @@
|
||||
import { _ } from "svelte-i18n";
|
||||
import { ScanService, TrackService } from "@odit/lfk-client-js";
|
||||
import store from "../../store";
|
||||
import {
|
||||
createSvelteTable,
|
||||
flexRender,
|
||||
getCoreRowModel,
|
||||
getFilteredRowModel,
|
||||
getPaginationRowModel,
|
||||
getSortedRowModel,
|
||||
renderComponent,
|
||||
} from "@tanstack/svelte-table";
|
||||
import { onMount } from "svelte";
|
||||
import { writable } from "svelte/store";
|
||||
import Toastify from "toastify-js";
|
||||
import TableBottom from "../shared/TableBottom.svelte";
|
||||
import TableHeader from "../shared/TableHeader.svelte";
|
||||
import ScansEmptyState from "./ScansEmptyState.svelte";
|
||||
import ThFilterRunner from "./ThFilterRunner.svelte";
|
||||
import ThFilterTrack from "./ThFilterTrack.svelte";
|
||||
import InputElement from "../shared/InputElement.svelte";
|
||||
import TableActions from "../shared/TableActions.svelte";
|
||||
|
||||
$: selectedScans =
|
||||
$table?.getSelectedRowModel().rows.map((row) => row.original) || [];
|
||||
$: selected =
|
||||
$table?.getSelectedRowModel().rows.map((row) => row.index) || [];
|
||||
|
||||
$: active_delete = undefined;
|
||||
$: active_deletes = [];
|
||||
export let current_scans = [];
|
||||
const handler = new DataHandler(current_scans, { rowsPerPage: 20 });
|
||||
const rows = handler.getRows();
|
||||
const scans_promise = ScanService.scanControllerGetAll().then((val) => {
|
||||
current_scans = val;
|
||||
handler.setRows(val);
|
||||
// handler.setRows(val);
|
||||
current_scans = val;
|
||||
options.update((options) => ({
|
||||
...options,
|
||||
data: current_scans,
|
||||
}));
|
||||
});
|
||||
$: allTracks = [];
|
||||
let allTracks = [];
|
||||
TrackService.trackControllerGetAll().then((val) => {
|
||||
allTracks = val;
|
||||
});
|
||||
@ -38,6 +61,85 @@
|
||||
Math.floor(laptime / 60) * 60
|
||||
}`;
|
||||
}
|
||||
|
||||
const columns = [
|
||||
{
|
||||
accessorKey: "id",
|
||||
header: () => "id",
|
||||
filterFn: `equalsString`,
|
||||
},
|
||||
{
|
||||
accessorKey: "runner",
|
||||
header: () => $_("runner"),
|
||||
cell: (info) => {
|
||||
const runner = info.getValue();
|
||||
return `#${runner.id} - ${runner.firstname} ${runner.lastname}`;
|
||||
},
|
||||
enableColumnFilter: true,
|
||||
},
|
||||
{
|
||||
accessorKey: "lapTime",
|
||||
header: () => $_("laptime"),
|
||||
cell: (info) => {
|
||||
return format_laptime(info.getValue());
|
||||
},
|
||||
enableColumnFilter: false,
|
||||
},
|
||||
{
|
||||
accessorKey: "distance",
|
||||
header: () => $_("distance"),
|
||||
cell: (info) => {
|
||||
if (info.getValue() < 1000) {
|
||||
return `${info.getValue()}m`;
|
||||
}
|
||||
return `${(info.getValue() / 1000).toFixed(1)}km`;
|
||||
},
|
||||
enableColumnFilter: false,
|
||||
},
|
||||
{
|
||||
accessorKey: "track",
|
||||
header: () => $_("track"),
|
||||
cell: (info) => {
|
||||
const track = info.getValue();
|
||||
return track.name;
|
||||
},
|
||||
enableColumnFilter: true,
|
||||
},
|
||||
{
|
||||
accessorKey: "actions",
|
||||
header: () => $_("action"),
|
||||
cell: (info) => {
|
||||
return renderComponent(TableActions, {
|
||||
detailsLink: `./${info.row.original.id}`,
|
||||
deleteAction: () => {
|
||||
active_delete =
|
||||
current_scans[
|
||||
current_scans.findIndex((r) => r.id == info.row.original.id)
|
||||
];
|
||||
},
|
||||
deleteEnabled:
|
||||
store.state.jwtinfo.userdetails.permissions.includes("SCAN:DELETE"),
|
||||
});
|
||||
},
|
||||
enableColumnFilter: false,
|
||||
enableSorting: false,
|
||||
},
|
||||
];
|
||||
const options = writable({
|
||||
data: [],
|
||||
columns: columns,
|
||||
initialState: {
|
||||
pagination: {
|
||||
pageSize: 50,
|
||||
},
|
||||
},
|
||||
enableRowSelection: true,
|
||||
getCoreRowModel: getCoreRowModel(),
|
||||
getFilteredRowModel: getFilteredRowModel(),
|
||||
getPaginationRowModel: getPaginationRowModel(),
|
||||
getSortedRowModel: getSortedRowModel(),
|
||||
});
|
||||
const table = createSvelteTable(options);
|
||||
</script>
|
||||
|
||||
{#if store.state.jwtinfo.userdetails.permissions.includes("SCAN:GET")}
|
||||
@ -53,171 +155,51 @@
|
||||
{#if current_scans.length === 0}
|
||||
<ScansEmptyState />
|
||||
{:else}
|
||||
<div
|
||||
class="shadow border-b border-gray-200 sm:rounded-lg overflow-x-scroll"
|
||||
>
|
||||
<table class="divide-y divide-gray-200 w-full">
|
||||
<thead class="bg-gray-50">
|
||||
<tr>
|
||||
<Th {handler} orderBy="id">ID</Th>
|
||||
<Th {handler}>
|
||||
{$_("runner")}
|
||||
</Th>
|
||||
<Th {handler}>
|
||||
{$_("distance")}
|
||||
</Th>
|
||||
<Th {handler}>
|
||||
{$_("track")}
|
||||
</Th>
|
||||
<Th {handler}>
|
||||
{$_("laptime")}
|
||||
</Th>
|
||||
<Th {handler}>
|
||||
{$_("status")}
|
||||
</Th>
|
||||
<th
|
||||
scope="col"
|
||||
class="relative px-6 py-3"
|
||||
style="border-bottom: 1px solid #ddd;"
|
||||
>
|
||||
{$_("action")}
|
||||
</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<ThFilter {handler} filterBy="id" />
|
||||
<ThFilterRunner {handler} />
|
||||
<th style="border-bottom: 1px solid #ddd;" />
|
||||
<ThFilterTrack tracks={allTracks} {handler} />
|
||||
<!-- <th style="border-bottom: 1px solid #ddd;" /> -->
|
||||
<th style="border-bottom: 1px solid #ddd;" />
|
||||
<th style="border-bottom: 1px solid #ddd;" />
|
||||
<!-- TODO: filter status -->
|
||||
<th style="border-bottom: 1px solid #ddd;" />
|
||||
</tr>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full">
|
||||
<thead>
|
||||
{#each $table.getHeaderGroups() as headerGroup}
|
||||
<tr class="select-none">
|
||||
<th class="inset-y-0 left-0 px-4 py-2 text-left w-px">
|
||||
<InputElement
|
||||
type="checkbox"
|
||||
checked={$table.getIsAllRowsSelected()}
|
||||
indeterminate={$table.getIsSomeRowsSelected()}
|
||||
on:change={() => $table.toggleAllRowsSelected()}
|
||||
/>
|
||||
</th>
|
||||
{#each headerGroup.headers as header}
|
||||
<TableHeader {header} />
|
||||
{/each}
|
||||
</tr>
|
||||
{/each}
|
||||
</thead>
|
||||
<tbody class="divide-y divide-gray-200">
|
||||
{#each $rows as scan}
|
||||
<tr data-rowid="scan_{scan.id}">
|
||||
<td class="px-6 py-4 whitespace-nowrap text-left">
|
||||
<div class="text-sm font-medium text-gray-900">
|
||||
{scan.id}
|
||||
</div>
|
||||
<tbody>
|
||||
{#each $table.getRowModel().rows as row}
|
||||
<tr>
|
||||
<td class="inset-y-0 left-0 px-4 py-2 text-center w-px">
|
||||
<InputElement
|
||||
type="checkbox"
|
||||
checked={row.getIsSelected()}
|
||||
on:change={() => row.toggleSelected()}
|
||||
/>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<div class="flex items-center">
|
||||
<a
|
||||
href="../runners/{scan.runner.id}"
|
||||
class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800"
|
||||
>{scan.runner.firstname}
|
||||
{scan.runner.middlename || ""}
|
||||
{scan.runner.lastname}</a
|
||||
>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-left">
|
||||
<div class="text-sm font-medium text-gray-900">
|
||||
{#if scan.distance < 1000}
|
||||
{scan.distance}m
|
||||
{:else}{scan.distance / 1000}km{/if}
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-left">
|
||||
<div class="text-sm font-medium text-gray-900">
|
||||
{#if scan.track}
|
||||
<a
|
||||
href="../tracks"
|
||||
class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800"
|
||||
>{scan.track.name}
|
||||
</a>
|
||||
{/if}
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-left">
|
||||
{#if scan.responseType === "TRACKSCAN"}
|
||||
<div class="text-sm font-medium text-gray-900">
|
||||
{format_laptime(scan.lapTime)}
|
||||
</div>
|
||||
{:else}
|
||||
<div class="text-sm font-medium text-gray-900">
|
||||
{$_("scan-with-fixed-distance")}
|
||||
</div>
|
||||
{/if}
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<div class="flex items-center">
|
||||
{#if scan.valid}
|
||||
<span
|
||||
class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800"
|
||||
>{$_("valid")}</span
|
||||
>
|
||||
{:else}
|
||||
<span
|
||||
class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800"
|
||||
>{$_("invalid")}</span
|
||||
>
|
||||
{/if}
|
||||
</div>
|
||||
</td>
|
||||
|
||||
{#if active_deletes[scan.id] === true}
|
||||
<td
|
||||
class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"
|
||||
>
|
||||
<button
|
||||
on:click={() => {
|
||||
active_deletes[scan.id] = false;
|
||||
}}
|
||||
tabindex="0"
|
||||
class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer"
|
||||
>{$_("cancel-delete")}</button
|
||||
>
|
||||
<button
|
||||
on:click={() => {
|
||||
ScanService.scanControllerRemove(scan.id, false).then(
|
||||
(resp) => {
|
||||
current_scans = current_scans.filter(
|
||||
(obj) => obj.id !== scan.id
|
||||
);
|
||||
Toastify({
|
||||
text: "Scan deleted",
|
||||
duration: 500,
|
||||
backgroundColor:
|
||||
"linear-gradient(to right, #00b09b, #96c93d)",
|
||||
}).showToast();
|
||||
}
|
||||
);
|
||||
}}
|
||||
tabindex="0"
|
||||
class="ml-4 text-red-600 hover:text-red-900 cursor-pointer"
|
||||
>{$_("confirm-delete")}</button
|
||||
>
|
||||
{#each row.getVisibleCells() as cell}
|
||||
<td>
|
||||
<svelte:component
|
||||
this={flexRender(
|
||||
cell.column.columnDef.cell,
|
||||
cell.getContext()
|
||||
)}
|
||||
/>
|
||||
</td>
|
||||
{:else}
|
||||
<td
|
||||
class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"
|
||||
>
|
||||
<a
|
||||
href="./{scan.id}"
|
||||
class="text-indigo-600 hover:text-indigo-900"
|
||||
>{$_("details")}</a
|
||||
>
|
||||
{#if store.state.jwtinfo.userdetails.permissions.includes("SCAN:DELETE")}
|
||||
<button
|
||||
on:click={() => {
|
||||
active_deletes[scan.id] = true;
|
||||
}}
|
||||
tabindex="0"
|
||||
class="ml-4 text-red-600 hover:text-red-900 cursor-pointer"
|
||||
>{$_("delete")}</button
|
||||
>
|
||||
{/if}
|
||||
</td>
|
||||
{/if}
|
||||
{/each}
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<TableBottom {table} {selected} />
|
||||
{/if}
|
||||
{:catch error}
|
||||
<div class="text-white px-6 py-4 border-0 rounded relative mb-4 bg-red-500">
|
||||
|
||||
@ -1,71 +1,71 @@
|
||||
<script>
|
||||
|
||||
export let table;
|
||||
export let selected;
|
||||
export let table;
|
||||
export let selected;
|
||||
</script>
|
||||
|
||||
<div class="flex items-center gap-2">
|
||||
<button
|
||||
class="border rounded p-1"
|
||||
on:click={() => $table.setPageIndex(0)}
|
||||
disabled={!$table.getCanPreviousPage()}
|
||||
>
|
||||
{"<<"}
|
||||
</button>
|
||||
<button
|
||||
class="border rounded p-1"
|
||||
on:click={() => $table.previousPage()}
|
||||
disabled={!$table.getCanPreviousPage()}
|
||||
>
|
||||
{"<"}
|
||||
</button>
|
||||
<button
|
||||
class="border rounded p-1"
|
||||
on:click={() => $table.nextPage()}
|
||||
disabled={!$table.getCanNextPage()}
|
||||
>
|
||||
{">"}
|
||||
</button>
|
||||
<button
|
||||
class="border rounded p-1"
|
||||
on:click={() => $table.setPageIndex($table.getPageCount() - 1)}
|
||||
disabled={!$table.getCanNextPage()}
|
||||
>
|
||||
{">>"}
|
||||
</button>
|
||||
<span class="flex items-center gap-1">
|
||||
<div>Page</div>
|
||||
<strong>
|
||||
{$table.getState().pagination.pageIndex + 1} of{" "}
|
||||
{$table.getPageCount()}
|
||||
</strong>
|
||||
</span>
|
||||
<span class="flex items-center gap-1">
|
||||
| Go to page:
|
||||
<input
|
||||
type="number"
|
||||
defaultValue={$table.getState().pagination.pageIndex + 1}
|
||||
on:change={(e) => {
|
||||
const page = e.target.value ? Number(e.target.value) - 1 : 0;
|
||||
$table.setPageIndex(page);
|
||||
}}
|
||||
class="border p-1 rounded w-16"
|
||||
/>
|
||||
</span>
|
||||
<select
|
||||
value={$table.getState().pagination.pageSize}
|
||||
on:input={(e) => {
|
||||
const ps = Number(e.target.value);
|
||||
console.log({ ps });
|
||||
$table.setPageSize(Number(e.target.value));
|
||||
<button
|
||||
class="border rounded p-1"
|
||||
on:click={() => $table.setPageIndex(0)}
|
||||
disabled={!$table.getCanPreviousPage()}
|
||||
>
|
||||
{"<<"}
|
||||
</button>
|
||||
<button
|
||||
class="border rounded p-1"
|
||||
on:click={() => $table.previousPage()}
|
||||
disabled={!$table.getCanPreviousPage()}
|
||||
>
|
||||
{"<"}
|
||||
</button>
|
||||
<button
|
||||
class="border rounded p-1"
|
||||
on:click={() => $table.nextPage()}
|
||||
disabled={!$table.getCanNextPage()}
|
||||
>
|
||||
{">"}
|
||||
</button>
|
||||
<button
|
||||
class="border rounded p-1"
|
||||
on:click={() => $table.setPageIndex($table.getPageCount() - 1)}
|
||||
disabled={!$table.getCanNextPage()}
|
||||
>
|
||||
{">>"}
|
||||
</button>
|
||||
<span class="flex items-center gap-1">
|
||||
<div>Page</div>
|
||||
<strong>
|
||||
{$table.getState().pagination.pageIndex + 1} of{" "}
|
||||
{$table.getPageCount()}
|
||||
</strong>
|
||||
</span>
|
||||
<span class="flex items-center gap-1">
|
||||
| Go to page:
|
||||
<input
|
||||
type="number"
|
||||
defaultValue={$table.getState().pagination.pageIndex + 1}
|
||||
on:change={(e) => {
|
||||
const page = e.target.value ? Number(e.target.value) - 1 : 0;
|
||||
$table.setPageIndex(page);
|
||||
}}
|
||||
>
|
||||
{#each [25, 50, 100, 250, 500] as pageSize}
|
||||
<option value={pageSize}>{pageSize}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</div>
|
||||
<!-- <pre>{JSON.stringify($table.getState(), null, 2)}</pre> -->
|
||||
<div>
|
||||
{Object.keys(selected).length} of{" "}
|
||||
{$table.getPreFilteredRowModel().rows.length} Total Rows Selected
|
||||
</div>
|
||||
class="border p-1 rounded w-16"
|
||||
/>
|
||||
</span>
|
||||
<select
|
||||
value={$table.getState().pagination.pageSize}
|
||||
on:input={(e) => {
|
||||
const ps = Number(e.target.value);
|
||||
console.log({ ps });
|
||||
$table.setPageSize(Number(e.target.value));
|
||||
}}
|
||||
>
|
||||
{#each [25, 50, 100, 250, 500] as pageSize}
|
||||
<option value={pageSize}>{pageSize}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</div>
|
||||
<!-- <pre>{JSON.stringify($table.getState(), null, 2)}</pre> -->
|
||||
<div>
|
||||
{Object.keys(selected).length} of{" "}
|
||||
{$table.getPreFilteredRowModel().rows.length} Total Rows Selected
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user