From f0a2b2859fa18426a454b7d9d6dd22dfdfe7ce27 Mon Sep 17 00:00:00 2001
From: Nicolai Ort <info@nicolai-ort.com>
Date: Sat, 18 Feb 2023 19:27:13 +0100
Subject: [PATCH] Added custom status filter

---
 src/components/cards/CardsOverview.svelte |  3 ++-
 src/components/cards/ThFilterGroup.svelte | 32 +++++++++++++++++++++++
 2 files changed, 34 insertions(+), 1 deletion(-)
 create mode 100644 src/components/cards/ThFilterGroup.svelte

diff --git a/src/components/cards/CardsOverview.svelte b/src/components/cards/CardsOverview.svelte
index 50749e29..510f7a1f 100644
--- a/src/components/cards/CardsOverview.svelte
+++ b/src/components/cards/CardsOverview.svelte
@@ -7,6 +7,7 @@
   import CardsEmptyState from "./CardsEmptyState.svelte";
   import CardDetailModal from "./CardDetailModal.svelte";
   import GenerateRunnerCards from "../pdf_generation/GenerateRunnerCards.svelte";
+  import ThFilterGroup from "./ThFilterGroup.svelte";
   export let edit_modal_open = false;
   export let runner = {};
   export let editable = {};
@@ -99,7 +100,7 @@
               <th />
               <ThFilter {handler} filterBy="code" />
               <ThFilter {handler} filterBy="runner" />
-              <ThFilter {handler} filterBy="status" />
+              <ThFilterGroup {handler} />
               <th />
             </tr>
           </thead>
diff --git a/src/components/cards/ThFilterGroup.svelte b/src/components/cards/ThFilterGroup.svelte
new file mode 100644
index 00000000..9fd232b6
--- /dev/null
+++ b/src/components/cards/ThFilterGroup.svelte
@@ -0,0 +1,32 @@
+<script>
+  import { _ } from "svelte-i18n";
+  export let handler;
+  let selected = "all";
+</script>
+
+<th>
+  <select
+    on:input={() => {
+      setTimeout(() => {
+        if (`${selected}`.trim()) {
+          const value = selected;
+          handler.filter(value, (card) => {
+            if (
+              card.enabled === value ||
+              value === "all"
+            )
+              return card;
+            return "";
+          });
+        }
+      }, 50);
+    }}
+    bind:value={selected}
+    name="statusfilter"
+    id="statusfilter"
+  >
+    <option value="all">Alle</option>
+    <option value={true}>{$_("enabled")}</option>
+    <option value={false}>{$_("disabled")}</option>
+  </select>
+</th>