From 6993511c67cc81303a1eece7fc2a4218dc818afc Mon Sep 17 00:00:00 2001
From: Philipp Dormann <philipp@philippdormann.de>
Date: Wed, 12 Apr 2023 16:18:45 +0200
Subject: [PATCH] feat(RunnersOverview): row selection

---
 src/components/runners/RunnersOverview.svelte | 24 +++++++++++++++++++
 src/components/shared/InputElement.svelte     | 20 ++++++++++++++++
 2 files changed, 44 insertions(+)
 create mode 100644 src/components/shared/InputElement.svelte

diff --git a/src/components/runners/RunnersOverview.svelte b/src/components/runners/RunnersOverview.svelte
index 6f572bf0..2957ba48 100644
--- a/src/components/runners/RunnersOverview.svelte
+++ b/src/components/runners/RunnersOverview.svelte
@@ -11,6 +11,9 @@
     getSortedRowModel,
   } from "@tanstack/svelte-table";
 
+  $: selected =
+    $table?.getSelectedRowModel().rows.map((row) => row.index) || [];
+
   const columns = [
     {
       accessorKey: "id",
@@ -51,6 +54,7 @@
   import GenerateRunnerCards from "../pdf_generation/GenerateRunnerCards.svelte";
   import GenerateRunnerCertificates from "../pdf_generation/GenerateRunnerCertificates.svelte";
   import { onMount } from "svelte";
+  import InputElement from "../shared/InputElement.svelte";
   $: active_deletes = [];
   let dataLoaded = false;
   export let current_runners = [];
@@ -76,6 +80,7 @@
         pageSize: tablePageCount[0],
       },
     },
+    enableRowSelection: true,
     getCoreRowModel: getCoreRowModel(),
     getFilteredRowModel: getFilteredRowModel(),
     getPaginationRowModel: getPaginationRowModel(),
@@ -128,6 +133,14 @@
       <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">
+              <InputElement
+                type="checkbox"
+                checked={$table.getIsAllRowsSelected()}
+                indeterminate={$table.getIsSomeRowsSelected()}
+                on:change={() => $table.toggleAllRowsSelected()}
+              />
+            </th>
             {#each headerGroup.headers as header}
               <th class="cursor-pointer">
                 {#if !header.isPlaceholder}
@@ -183,6 +196,13 @@
       <tbody>
         {#each $table.getRowModel().rows as row}
           <tr>
+            <td class="inset-y-0 left-0 px-4 py-2">
+              <InputElement
+                type="checkbox"
+                checked={row.getIsSelected()}
+                on:change={() => row.toggleSelected()}
+              />
+            </td>
             {#each row.getVisibleCells() as cell}
               <td>
                 <svelte:component
@@ -260,6 +280,10 @@
       </select>
     </div>
     <pre>{JSON.stringify($table.getState(), null, 2)}</pre>
+    <div>
+      {Object.keys(selected).length} of{" "}
+      {$table.getPreFilteredRowModel().rows.length} Total Rows Selected
+    </div>
   {/if}
 {/if}
 
diff --git a/src/components/shared/InputElement.svelte b/src/components/shared/InputElement.svelte
new file mode 100644
index 00000000..f9f4aa8f
--- /dev/null
+++ b/src/components/shared/InputElement.svelte
@@ -0,0 +1,20 @@
+<script>
+  let className = "";
+  export { className as class };
+
+  export let type;
+</script>
+
+<input
+  class={`border-1 border-stone-300 border rounded-md shadow ${className} ${
+    type === "checkbox" && "w-5 h-5 text-orange-400"
+  }`}
+  {type}
+  {...$$restProps}
+  on:click
+  on:change
+  on:keydown
+  on:keyup
+  on:mouseenter
+  on:mouseleave
+/>