Basic card table replace

src/components/cards/CardRunner.svelte

@@ -0,0 +1,16 @@
+<script>
+  import { _ } from "svelte-i18n";
+  export let runner;
+</script>
+
+{#if !runner}
+  {$_("non-blanko")}
+{:else}
+  <a href={`/runners/${runner.id}`}>
+    {#if runner.middlename}
+      {runner.firstname} {runner.middlename} {runner.lastname}
+    {:else}
+      {runner.firstname} {runner.lastname}
+    {/if}
+  </a>
+{/if}

src/components/cards/CardStatus.svelte

@@ -0,0 +1,16 @@
+<script>
+  import { _ } from "svelte-i18n";
+  export let enabled = false;
+</script>
+
+{#if enabled}
+  <span
+    class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800"
+    >{$_("enabled")}</span
+  >
+{:else}
+  <span
+    class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800"
+    >{$_("disabled")}</span
+  >
+{/if}

src/components/cards/CardsOverview.svelte

@@ -6,22 +6,45 @@
   import CardsEmptyState from "./CardsEmptyState.svelte";
   import CardDetailModal from "./CardDetailModal.svelte";
   import GenerateRunnerCards from "../pdf_generation/GenerateRunnerCards.svelte";
-  import ThFilterStatus from "./ThFilterStatus.svelte";
+  import InputElement from "../shared/InputElement.svelte";
-  import ThFilterRunner from "./ThFilterRunner.svelte";
+  import { groupFilter } from "../shared/tablefilters";
+  import {
+    createSvelteTable,
+    flexRender,
+    getCoreRowModel,
+    getFilteredRowModel,
+    getPaginationRowModel,
+    getSortedRowModel,
+    renderComponent,
+  } from "@tanstack/svelte-table";
+  import { writable } from "svelte/store";
+  import TableBottom from "../shared/TableBottom.svelte";
+  import TableActions from "../shared/TableActions.svelte";
+  import TableHeader from "../shared/TableHeader.svelte";
+  import CardStatus from "./CardStatus.svelte";
+  import CardRunner from "./CardRunner.svelte";
+
   export let edit_modal_open = false;
   export let runner = {};
   export let editable = {};
   export let original_data = {};
   export let current_cards = [];
-  const handler = new DataHandler(current_cards, { rowsPerPage: 50 });
+
-  const rows = handler.getRows();
+  $: selected =
-  $: active_deletes = [];
+    $table?.getSelectedRowModel().rows.map((row) => row.index) || [];
+  $: selectedCards =
+    $table?.getSelectedRowModel().rows.map((row) => row.original) || [];
+  $: active_delete = undefined;
   $: cards_show = generate_cards.length > 0;
   $: generate_cards = [];
+
   const cards_promise = RunnerCardService.runnerCardControllerGetAll().then(
     (val) => {
       current_cards = val;
-      handler.setRows(val);
+      options.update((options) => ({
+        ...options,
+        data: current_cards,
+      }));
     }
   );
   const getRunnerLabel = (option) =>
@@ -30,6 +53,68 @@
     (option?.middlename || "") +
     " " +
     (option?.lastname || "{$_('non-blanko')}");
+
+  const columns = [
+    {
+      accessorKey: "id",
+      header: () => "id",
+      filterFn: `equalsString`,
+    },
+    {
+      accessorKey: "runner",
+      header: () => $_("name"),
+      cell: (info) => {
+        return renderComponent(CardRunner, { runner: info.getValue() });
+      },
+      filterFn: `includesString`,
+    },
+    {
+      accessorKey: "enabled",
+      cell: (info) => {
+        return renderComponent(CardStatus, { enabled: info.getValue() });
+      },
+      header: () => $_("status"),
+      filterFn: `includesString`,
+    },
+    {
+      accessorKey: "actions",
+      header: () => $_("action"),
+      cell: (info) => {
+        return renderComponent(TableActions, {
+          detailsLink: `./${info.row.original.id}`,
+          deleteAction: () => {
+            active_delete =
+              current_cards[
+                current_cards.findIndex((r) => r.id == info.row.original.id)
+              ];
+          },
+          deleteEnabled:
+            store.state.jwtinfo.userdetails.permissions.includes("CARD:DELETE"),
+        });
+      },
+      enableColumnFilter: false,
+      enableSorting: false,
+    },
+  ];
+  const options = writable({
+    data: [],
+    columns: columns,
+    filterFns: {
+      group: groupFilter,
+    },
+    initialState: {
+      pagination: {
+        pageSize: 50,
+      },
+    },
+    enableRowSelection: true,
+    getCoreRowModel: getCoreRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+  });
+  const table = createSvelteTable(options);
+
   function open_edit_modal(card) {
     if (card.runner?.id) {
       runner = Object.assign(
@@ -54,7 +139,9 @@
     bind:runner
     bind:editable
     bind:original_data
-    on:dataUpdated={handler.setRows(current_cards)}
+    on:dataUpdated={() => {
+      //TODO:
+    }}
   />
 {/if}
 
@@ -112,131 +199,49 @@
         {/if}
         <GenerateRunnerCards bind:cards_show bind:generate_cards />
       </div>
-      <table>
+      <table class="w-full">
         <thead>
-          <tr>
+          {#each $table.getHeaderGroups() as headerGroup}
-            <th style="border-bottom: 1px solid #ddd;">
+            <tr class="select-none">
-              <input
+              <th class="inset-y-0 left-0 px-4 py-2 text-left w-px">
-                type="checkbox"
+                <InputElement
-                class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
+                  type="checkbox"
-                checked={generate_cards.length == current_cards.length}
+                  checked={$table.getIsAllRowsSelected()}
-                on:click={() => {
+                  indeterminate={$table.getIsSomeRowsSelected()}
-                  if (generate_cards.length != current_cards.length) {
+                  on:change={() => $table.toggleAllRowsSelected()}
-                    generate_cards = current_cards;
+                />
-                  } else {
+              </th>
-                    generate_cards = [];
+              {#each headerGroup.headers as header}
-                  }
+                <TableHeader {header} />
-                }}
+              {/each}
-              />
+            </tr>
-            </th>
+          {/each}
-            <Th {handler} orderBy="code">{$_("code")}</Th>
-            <Th {handler} orderBy="runner">{$_("runner")}</Th>
-            <Th {handler} orderBy="status">{$_("status")}</Th>
-            <th style="border-bottom: 1px solid #ddd;">{$_("action")}</th>
-          </tr>
-          <tr>
-            <th style="border-bottom: 1px solid #ddd;" />
-            <ThFilter {handler} filterBy="code" />
-            <ThFilterRunner {handler} />
-            <ThFilterStatus {handler} />
-            <th style="border-bottom: 1px solid #ddd;" />
-          </tr>
         </thead>
         <tbody>
-          {#each $rows as row}
+          {#each $table.getRowModel().rows as row}
             <tr>
-              <td>
+              <td class="inset-y-0 left-0 px-4 py-2 text-center w-px">
-                <input
+                <InputElement
                   type="checkbox"
-                  class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
+                  checked={row.getIsSelected()}
-                  checked={generate_cards.filter((i) => i.id == row.id).length >
+                  on:change={() => row.toggleSelected()}
-                    0}
-                  on:click={() => {
-                    if (generate_cards.findIndex((i) => i.id == row.id) == -1) {
-                      generate_cards.push(row);
-                      generate_cards = generate_cards;
-                    } else {
-                      generate_cards = generate_cards.filter(
-                        (r) => r.id != row.id
-                      );
-                    }
-                    console.log(generate_cards);
-                  }}
                 />
               </td>
-              <td>{row.code}</td>
+              {#each row.getVisibleCells() as cell}
-              <td>
+                <td>
-                {#if row.runner}
+                  <svelte:component
-                  <a
+                    this={flexRender(
-                    href="../runners/{row.runner.id}"
+                      cell.column.columnDef.cell,
-                    class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800"
+                      cell.getContext()
-                    >{row.runner.firstname}
+                    )}
-                    {row.runner.middlename || ""}
+                  />
-                    {row.runner.lastname}</a
+                </td>
-                  >
+              {/each}
-                {:else}{$_("non-blanko")}{/if}
-              </td>
-              <td>
-                {#if row.enabled}
-                  <span
-                    class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800"
-                    >{$_("enabled")}</span
-                  >
-                {:else}
-                  <span
-                    class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800"
-                    >{$_("disabled")}</span
-                  >
-                {/if}
-              </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={() => {
-                      RunnerCardService.runnerCardControllerRemove(row.id, true)
-                        .then((resp) => {
-                          current_cards = current_cards.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}
-                  <button
-                    on:click={() => {
-                      open_edit_modal(row);
-                    }}
-                    class="text-indigo-600 hover:text-indigo-900"
-                    >{$_("details")}</button
-                  >
-                  {#if store.state.jwtinfo.userdetails.permissions.includes("CARD: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>
+      <TableBottom {table} {selected} />
     {/if}
   {:catch error}
     <div class="text-white px-6 py-4 border-0 rounded relative mb-4 bg-red-500">