dependency update, drop focusTrap, first tanstack experiment in RunnersOverview

This commit is contained in:
Philipp Dormann 2023-04-12 15:20:38 +02:00
parent 70307a9e82
commit 9bec95ede8
Signed by: philipp
GPG Key ID: 3BB9ADD52DCA4314
32 changed files with 2188 additions and 1195 deletions

View File

@ -1,6 +1,7 @@
{
"name": "@odit/lfk-frontend",
"version": "0.17.3",
"type": "module",
"scripts": {
"i18n-order": "node order.js",
"dev": "vite",
@ -10,18 +11,17 @@
},
"license": "CC-BY-NC-SA-4.0",
"devDependencies": {
"@sveltejs/vite-plugin-svelte": "1.0.0-next.6",
"@odit/license-exporter": "0.0.12",
"@sveltejs/vite-plugin-svelte": "2.0.4",
"@types/html-minifier": "4.0.2",
"auto-changelog": "2.4.0",
"autoprefixer": "10.4.14",
"html-minifier": "4.0.0",
"postcss": "8.4.21",
"release-it": "14.6.1",
"svelte-preprocess": "4.7.0",
"release-it": "15.10.1",
"svelte-select": "3.17.0",
"tailwindcss": "3.2.7",
"vite": "2.1.5"
"tailwindcss": "3.3.1",
"vite": "4.2.1"
},
"release-it": {
"git": {
@ -41,21 +41,22 @@
}
},
"dependencies": {
"tinro": "0.6.12",
"toastify-js": "1.12.0",
"validator": "13.9.0",
"xlsx": "0.16.9",
"@odit/lfk-client-js": "0.14.0",
"@vincjo/datatables": "^1.4.0",
"@odit/lfk-client-js": "0.14.3",
"@paralleldrive/cuid2": "^2.2.0",
"@tanstack/svelte-table": "^8.8.5",
"@tanstack/table-core": "^8.8.5",
"@vincjo/datatables": "^1.5.2",
"check-password-strength": "2.0.7",
"csvtojson": "2.0.10",
"gridjs": "3.4.0",
"localforage": "1.10.0",
"marked": "2.0.3",
"svelte": "3.37.0",
"svelte-focus-trap": "1.2.0",
"svelte-i18n": "3.3.9",
"@paralleldrive/cuid2": "^2.2.0"
"svelte": "3.58.0",
"svelte-i18n": "3.6.0",
"tinro": "0.6.12",
"toastify-js": "1.12.0",
"validator": "13.9.0",
"xlsx": "0.18.5"
},
"volta": {
"node": "19.7.0"

3005
pnpm-lock.yaml generated

File diff suppressed because it is too large Load Diff

View File

@ -1,7 +1,7 @@
<script>
import { _ } from "svelte-i18n";
import { clickOutside } from "../base/outsideclick";
import { focusTrap } from "svelte-focus-trap";
import { RunnerCardService } from "@odit/lfk-client-js";
import Toastify from "toastify-js";
export let bulk_modal_open;
@ -133,7 +133,7 @@
{#if bulk_modal_open}
<div
class="fixed z-10 inset-0 overflow-y-auto"
use:focusTrap
use:clickOutside
on:click_outside={() => {
bulk_modal_open = false;

View File

@ -1,7 +1,7 @@
<script>
import { _ } from "svelte-i18n";
import { clickOutside } from "../base/outsideclick";
import { focusTrap } from "svelte-focus-trap";
import {
RunnerCardService,
RunnerService,
@ -97,7 +97,7 @@
{#if modal_open}
<div
class="fixed z-10 inset-0 overflow-y-auto"
use:focusTrap
use:clickOutside
on:click_outside={() => {
modal_open = false;

View File

@ -1,7 +1,7 @@
<script>
import { _ } from "svelte-i18n";
import { clickOutside } from "../base/outsideclick";
import { focusTrap } from "svelte-focus-trap";
import { RunnerCardService, RunnerService } from "@odit/lfk-client-js";
import Select from "svelte-select";
import Toastify from "toastify-js";
@ -94,7 +94,7 @@
{#if edit_modal_open}
<div
class="fixed z-10 inset-0 overflow-y-auto"
use:focusTrap
use:clickOutside
on:click_outside={() => {
edit_modal_open = false;

View File

@ -1,7 +1,7 @@
<script>
import { _ } from "svelte-i18n";
import { clickOutside } from "../base/outsideclick";
import { focusTrap } from "svelte-focus-trap";
import {
GroupContactService,
RunnerTeamService,
@ -145,7 +145,7 @@
{#if modal_open}
<div
class="fixed z-10 inset-0 overflow-y-auto"
use:focusTrap
use:clickOutside
on:click_outside={() => {
modal_open = false;

View File

@ -1,7 +1,7 @@
<script>
import { _ } from "svelte-i18n";
import { clickOutside } from "../base/outsideclick";
import { focusTrap } from "svelte-focus-trap";
import {
DonationService,
DonorService,
@ -156,7 +156,7 @@ import { is_promise } from "svelte/internal";
{#if modal_open}
<div
class="fixed z-10 inset-0 overflow-y-auto"
use:focusTrap
use:clickOutside
on:click_outside={() => {
modal_open = false;

View File

@ -1,7 +1,7 @@
<script>
import { _ } from "svelte-i18n";
import { clickOutside } from "../base/outsideclick";
import { focusTrap } from "svelte-focus-trap";
import { DonationService } from "@odit/lfk-client-js";
import Toastify from "toastify-js";
export let payment_modal_open = false;
@ -96,7 +96,7 @@
{#if payment_modal_open}
<div
class="fixed z-10 inset-0 overflow-y-auto"
use:focusTrap
use:clickOutside
on:click_outside={() => {
payment_modal_open = false;

View File

@ -1,7 +1,7 @@
<script>
import { _ } from "svelte-i18n";
import { clickOutside } from "../base/outsideclick";
import { focusTrap } from "svelte-focus-trap";
import {
DonorService
} from "@odit/lfk-client-js";
@ -134,7 +134,7 @@
{#if modal_open}
<div
class="fixed z-10 inset-0 overflow-y-auto"
use:focusTrap
use:clickOutside
on:click_outside={() => {
modal_open = false;

View File

@ -1,7 +1,7 @@
<script>
import { _ } from "svelte-i18n";
import { clickOutside } from "../base/outsideclick";
import { focusTrap } from "svelte-focus-trap";
import { DonorService } from "@odit/lfk-client-js";
import Toastify from "toastify-js";
import { createEventDispatcher } from "svelte";
@ -32,7 +32,7 @@
{#if modal_open}
<div
class="fixed z-10 inset-0 overflow-y-auto"
use:focusTrap
use:clickOutside
on:click_outside={cancelDelete}>
<div

View File

@ -1,7 +1,7 @@
<script>
import { _ } from "svelte-i18n";
import { clickOutside } from "../base/outsideclick";
import { focusTrap } from "svelte-focus-trap";
export let modal_open;
(function () {
document.onkeydown = function (e) {
@ -25,7 +25,7 @@
{#if modal_open}
<div
class="fixed z-10 inset-0 overflow-y-auto"
use:focusTrap
use:clickOutside
on:click_outside={() => {
modal_open = false;

View File

@ -2,7 +2,7 @@
import { _, getLocaleFromNavigator } from "svelte-i18n";
import marked from "marked";
import Footer from "./Footer.svelte";
import * as css from "../base/simple.css";
// import * as css from "../base/simple.css?inline";
let html = "";
async function load() {
let md = await fetch("/privacy_" + getLocaleFromNavigator() + ".md");

View File

@ -1,7 +1,7 @@
<script>
import { _ } from "svelte-i18n";
import { clickOutside } from "../base/outsideclick";
import { focusTrap } from "svelte-focus-trap";
import Toastify from "toastify-js";
import { UserGroupService } from "@odit/lfk-client-js";
export let modal_open;
@ -69,7 +69,7 @@
{#if modal_open}
<div
class="fixed z-10 inset-0 overflow-y-auto"
use:focusTrap
use:clickOutside
on:click_outside={() => {
modal_open = false;

View File

@ -1,7 +1,7 @@
<script>
import { _ } from "svelte-i18n";
import { clickOutside } from "../base/outsideclick";
import { focusTrap } from "svelte-focus-trap";
import { RunnerOrganizationService } from "@odit/lfk-client-js";
import Toastify from "toastify-js";
export let modal_open;
@ -89,7 +89,7 @@
{#if modal_open}
<div
class="fixed z-10 inset-0 overflow-y-auto"
use:focusTrap
use:clickOutside
on:click_outside={() => {
modal_open = false;

View File

@ -1,7 +1,7 @@
<script>
import { _ } from "svelte-i18n";
import { clickOutside } from "../base/outsideclick";
import { focusTrap } from "svelte-focus-trap";
import { RunnerOrganizationService } from "@odit/lfk-client-js";
import Toastify from "toastify-js";
import { createEventDispatcher } from "svelte";
@ -32,7 +32,7 @@
{#if modal_open}
<div
class="fixed z-10 inset-0 overflow-y-auto"
use:focusTrap
use:clickOutside
on:click_outside={cancelDelete}>
<div

View File

@ -1,7 +1,7 @@
<script>
import { _ } from "svelte-i18n";
import { clickOutside } from "../base/outsideclick";
import { focusTrap } from "svelte-focus-trap";
import {
RunnerService,
RunnerTeamService,
@ -125,7 +125,7 @@
{#if modal_open}
<div
class="fixed z-10 inset-0 overflow-y-auto"
use:focusTrap
use:clickOutside
on:click_outside={() => {
modal_open = false;

View File

@ -3,7 +3,7 @@
import { read as readXlsx, utils as xlsx_utils } from "xlsx";
import { _ } from "svelte-i18n";
import { clickOutside } from "../base/outsideclick";
import { focusTrap } from "svelte-focus-trap";
import Toastify from "toastify-js";
import {
ImportService,
@ -228,7 +228,7 @@
{#if import_modal_open}
<div
class="fixed z-10 inset-0 overflow-y-auto"
use:focusTrap
use:clickOutside
on:click_outside={() => {
cancelModal();

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}>
<!-- <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 = [];
}
}}
{#each headerGroup.headers as header}
<th>
{#if !header.isPlaceholder}
<svelte:component
this={flexRender(
header.column.columnDef.header,
header.getContext()
)}
/>
{/if}
</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>
</tr>
<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;" />
{/each}
</tr>
{/each}
</thead>
<tbody>
{#each $rows as row}
{#each $table.getRowModel().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>
{/each}
</tr>
{/each}
</tbody>
</table>
</Datatable>
<!-- </Datatable> -->
{/if}
{/if}

View File

@ -1,7 +1,7 @@
<script>
import { _ } from "svelte-i18n";
import { clickOutside } from "../base/outsideclick";
import { focusTrap } from "svelte-focus-trap";
import {
RunnerService,
ScanService,
@ -81,7 +81,7 @@
{#if modal_open}
<div
class="fixed z-10 inset-0 overflow-y-auto"
use:focusTrap
use:clickOutside
on:click_outside={() => {
modal_open = false;

View File

@ -1,7 +1,7 @@
<script>
import { _ } from "svelte-i18n";
import { clickOutside } from "../base/outsideclick";
import { focusTrap } from "svelte-focus-trap";
import { ScanStationService, TrackService } from "@odit/lfk-client-js";
import Toastify from "toastify-js";
import Select from "svelte-select";
@ -81,7 +81,7 @@
{#if modal_open}
<div
class="fixed z-10 inset-0 overflow-y-auto"
use:focusTrap
use:clickOutside
on:click_outside={() => {
modal_open = false;

View File

@ -1,7 +1,7 @@
<script>
import { _ } from "svelte-i18n";
import { clickOutside } from "../base/outsideclick";
import { focusTrap } from "svelte-focus-trap";
import { ScanStationService } from "@odit/lfk-client-js";
import Toastify from "toastify-js";
import { createEventDispatcher } from "svelte";
@ -32,7 +32,7 @@
{#if modal_open}
<div
class="fixed z-10 inset-0 overflow-y-auto"
use:focusTrap
use:clickOutside
on:click_outside={cancelDelete}>
<div

View File

@ -1,6 +1,6 @@
<script>
import { _ } from "svelte-i18n";
import { focusTrap } from "svelte-focus-trap";
import Toastify from "toastify-js";
import { tick, createEventDispatcher } from "svelte";
export let copy_modal_open;
@ -46,7 +46,7 @@
{#if valueCopy != null}
<textarea bind:this={areaDom}>{valueCopy}</textarea>
{/if}
<div class="fixed z-10 inset-0 overflow-y-auto" use:focusTrap>
<div class="fixed z-10 inset-0 overflow-y-auto" >
<div
class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
<div class="fixed inset-0 transition-opacity" aria-hidden="true">

View File

@ -1,7 +1,7 @@
<script>
import { _ } from "svelte-i18n";
import { clickOutside } from "../base/outsideclick";
import { focusTrap } from "svelte-focus-trap";
import { MeService } from "@odit/lfk-client-js";
import Toastify from "toastify-js";
import { createEventDispatcher } from "svelte";
@ -30,7 +30,7 @@
{#if modal_open}
<div
class="fixed z-10 inset-0 overflow-y-auto"
use:focusTrap
use:clickOutside
on:click_outside={cancelDelete}>
<div

View File

@ -1,7 +1,7 @@
<script>
import { _ } from "svelte-i18n";
import { clickOutside } from "../base/outsideclick";
import { focusTrap } from "svelte-focus-trap";
import { StatsClientService } from "@odit/lfk-client-js";
import Toastify from "toastify-js";
export let modal_open;
@ -66,7 +66,7 @@
{#if modal_open}
<div
class="fixed z-10 inset-0 overflow-y-auto"
use:focusTrap
use:clickOutside
on:click_outside={() => {
modal_open = false;

View File

@ -1,7 +1,7 @@
<script>
import { _ } from "svelte-i18n";
import { clickOutside } from "../base/outsideclick";
import { focusTrap } from "svelte-focus-trap";
import { ScanStationService } from "@odit/lfk-client-js";
import Toastify from "toastify-js";
import { createEventDispatcher } from "svelte";
@ -32,7 +32,7 @@
{#if modal_open}
<div
class="fixed z-10 inset-0 overflow-y-auto"
use:focusTrap
use:clickOutside
on:click_outside={cancelDelete}>
<div

View File

@ -1,6 +1,6 @@
<script>
import { _ } from "svelte-i18n";
import { focusTrap } from "svelte-focus-trap";
import Toastify from "toastify-js";
import { tick, createEventDispatcher } from "svelte";
export let copy_modal_open;
@ -46,7 +46,7 @@
{#if valueCopy != null}
<textarea bind:this={areaDom}>{valueCopy}</textarea>
{/if}
<div class="fixed z-10 inset-0 overflow-y-auto" use:focusTrap>
<div class="fixed z-10 inset-0 overflow-y-auto" >
<div
class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
<div class="fixed inset-0 transition-opacity" aria-hidden="true">

View File

@ -1,7 +1,7 @@
<script>
import { _ } from "svelte-i18n";
import { clickOutside } from "../base/outsideclick";
import { focusTrap } from "svelte-focus-trap";
import {
RunnerOrganizationService,
RunnerTeamService,
@ -77,7 +77,7 @@
{#if modal_open}
<div
class="fixed z-10 inset-0 overflow-y-auto"
use:focusTrap
use:clickOutside
on:click_outside={() => {
modal_open = false;

View File

@ -1,7 +1,7 @@
<script>
import { _ } from "svelte-i18n";
import { clickOutside } from "../base/outsideclick";
import { focusTrap } from "svelte-focus-trap";
import { RunnerTeamService } from "@odit/lfk-client-js";
import Toastify from "toastify-js";
import { createEventDispatcher } from "svelte";
@ -29,7 +29,7 @@
{#if modal_open}
<div
class="fixed z-10 inset-0 overflow-y-auto"
use:focusTrap
use:clickOutside
on:click_outside={cancelDelete}>
<div

View File

@ -1,7 +1,7 @@
<script>
import { _ } from "svelte-i18n";
import { clickOutside } from "../base/outsideclick";
import { focusTrap } from "svelte-focus-trap";
import { tracks as tracksstore } from "../../store.js";
import { TrackService } from "@odit/lfk-client-js";
import Toastify from "toastify-js";
@ -75,7 +75,7 @@
{#if modal_open}
<div
class="fixed z-10 inset-0 overflow-y-auto"
use:focusTrap
use:clickOutside
on:click_outside={() => {
modal_open = false;

View File

@ -1,7 +1,7 @@
<script>
import { _ } from "svelte-i18n";
import { clickOutside } from "../base/outsideclick";
import { focusTrap } from "svelte-focus-trap";
import { UserService } from "@odit/lfk-client-js";
import isEmail from "validator/es/lib/isEmail";
import Toastify from "toastify-js";
@ -92,7 +92,7 @@
{#if modal_open}
<div
class="fixed z-10 inset-0 overflow-y-auto"
use:focusTrap
use:clickOutside
on:click_outside={() => {
modal_open = false;

View File

@ -1,6 +1,6 @@
module.exports = {
mode: 'jit',
purge: [ './src/**/*.svelte' ],
content: [ './src/**/*.svelte' ],
theme: {
extend: {
colors: {

View File

@ -1,39 +1,11 @@
import svelte from '@sveltejs/vite-plugin-svelte';
import { minify } from 'html-minifier';
// vite.config.js
import { defineConfig } from 'vite';
//
const indexReplace = () => {
return {
name: 'html-transform',
transformIndexHtml(html) {
return minify(html, {
collapseWhitespace: true
});
}
};
};
import { svelte } from '@sveltejs/vite-plugin-svelte';
export default defineConfig(({ command, mode }) => {
const isProduction = mode === 'production';
return {
// base: './',
build: {
polyfillDynamicImport: false,
cssCodeSplit: false,
minify: isProduction,
target: ["es2020", "esnext", "edge88", "chrome87", "safari14"]
},
export default defineConfig({
plugins: [
svelte({
//@ts-ignore
hot: !isProduction,
emitCss: true,
extensions: ['.md', '.svx', '.svelte'],
preprocess: [
//
/* plugin options */
})
]
}),
indexReplace()
]
};
});