Merge branch 'experiment/tanstack' of git.odit.services:lfk/frontend into experiment/tanstack

src/App.svelte

@@ -1,5 +1,6 @@
 <script>
   import "toastify-js/src/toastify.css";
+  import "gridjs/dist/theme/mermaid.css";
   import { Route, router } from "tinro";
   router.subscribe((routeInfo) => {
     window.scrollTo(0, 0);

src/components/runners/RunnersOverview.svelte

@@ -1,6 +1,6 @@
 <script>
   import { _ } from "svelte-i18n";
-  let tablePageCount = [50, 100, 250, 500];
+  let tablePageCount = [25, 50, 100, 250, 500];
   import { writable } from "svelte/store";
   import {
     createSvelteTable,
@@ -25,6 +25,8 @@
   import { groupFilter } from "../shared/tablefilters";
   import TableActions from "../shared/TableActions.svelte";
 
+  $: selectedRunners =
+    $table?.getSelectedRowModel().rows.map((row) => row.original) || [];
   $: selected =
     $table?.getSelectedRowModel().rows.map((row) => row.index) || [];
 
@@ -88,10 +90,9 @@
   $: active_deletes = [];
   let dataLoaded = false;
   export let current_runners = [];
-  $: 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);
+  $: sponsoring_contracts_show = selected.length > 0;
+  $: cards_show = selected.length > 0;
+  $: certificates_show = selected.length > 0;
   $: teams = [];
   $: orgs = [];
   $: mappedteams = teams.map(function (g) {
@@ -110,7 +111,7 @@
     },
     initialState: {
       pagination: {
-        pageSize: tablePageCount[0],
+        pageSize: 50,
       },
     },
     enableRowSelection: true,
@@ -151,22 +152,25 @@
       <p class="text-sm">{$_("this-might-take-a-moment")}</p>
     </div>
   {:else}
-    <div class="h-12">
+    <div class="h-12 mt-2">
       <GenerateSponsoringContracts
         bind:sponsoring_contracts_show
-        bind:generate_runners
+        bind:generate_runners={selectedRunners}
+      />
+      <GenerateRunnerCards
+        bind:cards_show
+        bind:generate_runners={selectedRunners}
       />
-      <GenerateRunnerCards bind:cards_show bind:generate_runners />
       <GenerateRunnerCertificates
         bind:certificates_show
-        bind:generate_runners
+        bind:generate_runners={selectedRunners}
       />
     </div>
     <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 bg-stone-100 w-px">
+            <th class="inset-y-0 left-0 px-4 py-2 text-left w-px">
               <InputElement
                 type="checkbox"
                 checked={$table.getIsAllRowsSelected()}
@@ -229,7 +233,7 @@
       <tbody>
         {#each $table.getRowModel().rows as row}
           <tr>
-            <td class="inset-y-0 left-0 px-4 py-2">
+            <td class="inset-y-0 left-0 px-4 py-2 text-center w-px">
               <InputElement
                 type="checkbox"
                 checked={row.getIsSelected()}
@@ -312,7 +316,7 @@
         {/each}
       </select>
     </div>
-    <pre>{JSON.stringify($table.getState(), null, 2)}</pre>
+    <!-- <pre>{JSON.stringify($table.getState(), null, 2)}</pre> -->
     <div>
       {Object.keys(selected).length} of{" "}
       {$table.getPreFilteredRowModel().rows.length} Total Rows Selected

src/components/tracks/Tracks.svelte

@@ -57,9 +57,9 @@
             .querySelector(`[data-id="triggered_table_actions_${trackid}"]`)
             .classList.add("hidden");
           //
-          elem.childNodes[0].innerHTML = `<td data-column-id="trackName">${elem.childNodes[0].childNodes[0].value}</td>`;
-          elem.childNodes[1].innerHTML = `<td data-column-id="trackName">${elem.childNodes[1].childNodes[0].value}</td>`;
-          elem.childNodes[2].innerHTML = `<td data-column-id="trackName">${elem.childNodes[2].childNodes[0].value}</td>`;
+          elem.childNodes[0].innerHTML = `<td data-column-id="trackName" class="gridjs-td">${elem.childNodes[0].childNodes[0].value}</td>`;
+          elem.childNodes[1].innerHTML = `<td data-column-id="trackName" class="gridjs-td">${elem.childNodes[1].childNodes[0].value}</td>`;
+          elem.childNodes[2].innerHTML = `<td data-column-id="trackName" class="gridjs-td">${elem.childNodes[2].childNodes[0].value}</td>`;
         })
         .catch((err) => {});
     }

src/main.js

@@ -1,5 +1,6 @@
 import './style.css';
 import "toastify-js/src/toastify.css";
+import "gridjs/dist/theme/mermaid.css";
 import App from './App.svelte';
 
 const app = new App({