From 14d64b6070d98e6368da5709e9ff8221e8a621c7 Mon Sep 17 00:00:00 2001
From: Philipp Dormann <philipp@philippdormann.de>
Date: Thu, 16 Feb 2023 15:05:41 +0100
Subject: [PATCH] add group filtering to table

ref #146
---
 src/components/runners/RunnersOverview.svelte | 108 +++++++++---------
 src/components/runners/ThFilterGroup.svelte   |  34 ++++++
 2 files changed, 86 insertions(+), 56 deletions(-)
 create mode 100644 src/components/runners/ThFilterGroup.svelte

diff --git a/src/components/runners/RunnersOverview.svelte b/src/components/runners/RunnersOverview.svelte
index 51496409..e772871e 100644
--- a/src/components/runners/RunnersOverview.svelte
+++ b/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,47 +124,48 @@
                 {/if}</td
               >
               <td>{row.distance / 1000} km</td>
-              <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> -->
+              <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>
             </tr>
           {/each}
         </tbody>
@@ -186,6 +178,10 @@
   thead {
     background: #fff;
   }
+  thead {
+    position: sticky;
+    inset-block-start: 0;
+  }
   tbody td {
     padding: 4px;
   }
diff --git a/src/components/runners/ThFilterGroup.svelte b/src/components/runners/ThFilterGroup.svelte
new file mode 100644
index 00000000..3c466c6f
--- /dev/null
+++ b/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>