add group filtering to table

ref #146

src/components/runners/RunnersOverview.svelte

@@ -5,25 +5,20 @@
     RunnerTeamService,
     RunnerOrganizationService,
   } from "@odit/lfk-client-js";
+  import ThFilterGroup from "./ThFilterGroup.svelte";
+  import { DataHandler, Datatable, Th, ThFilter } from "@vincjo/datatables";
   import store from "../../store";
-  import RunnersEmptyState from "./RunnersEmptyState.svelte";
-  import Select from "svelte-select";
   import GenerateSponsoringContracts from "../pdf_generation/GenerateSponsoringContracts.svelte";
   import GenerateRunnerCards from "../pdf_generation/GenerateRunnerCards.svelte";
   import GenerateRunnerCertificates from "../pdf_generation/GenerateRunnerCertificates.svelte";
-  let pageLoaded = false;
-  $: searchvalue = "";
   $: active_deletes = [];
   export let current_runners = [];
+  const handler = new DataHandler(current_runners, { rowsPerPage: 50 });
+  const rows = handler.getRows();
   const runners_promise = RunnerService.runnerControllerGetAll().then((val) => {
+    console.log(val);
     current_runners = val;
-    pageLoaded = true;
   });
-  $: selectedFilter_teams = null;
-  $: selectedFilter = null;
-  $: filter__teams = selectedFilter_teams || [];
-  $: filter__orgs = selectedFilter || [];
-  $: filterGroupIDs = filter__teams.concat(filter__orgs).map((i) => i.value);
   $: sponsoring_contracts_show = current_runners.some(
     (r) => r.is_selected === true
   );
@@ -47,10 +42,6 @@
   RunnerOrganizationService.runnerOrganizationControllerGetAll().then((val) => {
     orgs = val;
   });
-  // ===
-  import { DataHandler, Datatable, Th, ThFilter } from "@vincjo/datatables";
-  const handler = new DataHandler(current_runners, { rowsPerPage: 50 });
-  const rows = handler.getRows();
 </script>
 
 {#if store.state.jwtinfo.userdetails.permissions.includes("RUNNER:GET")}
@@ -98,7 +89,7 @@
             <ThFilter {handler} filterBy="firstname" />
             <ThFilter {handler} filterBy="middlename" />
             <ThFilter {handler} filterBy="lastname" />
-            <ThFilter {handler} filterBy="group" />
+            <ThFilterGroup groups={selectgroups} {handler} />
             <th />
             <th />
           </tr>
@@ -133,8 +124,7 @@
                 {/if}</td
               >
               <td>{row.distance / 1000} km</td>
-              <td />
-              <!-- <td>
+              <td>
                 {#if active_deletes[row.id] === true}
                   <button
                     on:click={() => {
@@ -159,7 +149,9 @@
                     >{$_("confirm-delete")}</button
                   >
                 {:else}
-              <a href="./{row.id}" class="text-indigo-600 hover:text-indigo-900"
+                  <a
+                    href="./{row.id}"
+                    class="text-indigo-600 hover:text-indigo-900"
                     >{$_("details")}</a
                   >
                   {#if store.state.jwtinfo.userdetails.permissions.includes("RUNNER:DELETE")}
@@ -173,7 +165,7 @@
                     >
                   {/if}
                 {/if}
-          </td> -->
+              </td>
             </tr>
           {/each}
         </tbody>
@@ -186,6 +178,10 @@
   thead {
     background: #fff;
   }
+  thead {
+    position: sticky;
+    inset-block-start: 0;
+  }
   tbody td {
     padding: 4px;
   }

src/components/runners/ThFilterGroup.svelte

@@ -0,0 +1,34 @@
+<script>
+  export let groups;
+  export let handler;
+  let selected = "all";
+</script>
+
+<th>
+  <select
+    on:input={() => {
+      setTimeout(() => {
+        if (`${selected}`.trim()) {
+          const value = selected;
+          handler.filter(value, (runner) => {
+            if (
+              runner.group.id === value ||
+              runner?.group?.parentGroup?.id === value ||
+              value === "all"
+            )
+              return runner;
+            return "";
+          });
+        }
+      }, 50);
+    }}
+    bind:value={selected}
+    name="groupfilter"
+    id="groupfilter"
+  >
+    <option value="all">Alle</option>
+    {#each groups as g}
+      <option value={g.value}>{g.label}</option>
+    {/each}
+  </select>
+</th>