implement task filter

2024-07-25 15:31:27 +02:00
parent 8b47bb74e8
commit be6f609ea2
10 changed files with 321 additions and 20 deletions
@@ -0,0 +1,59 @@
+import * as React from "bloatless-react";
+
+import SearchViewModel from "../../ViewModel/Utility/searchViewModel";
+import { translations } from "../translations";
+
+export function SearchModal<T>(
+  headline: string,
+  allObjects: React.ListState<T> | React.MapState<T>,
+  filteredObjects: React.ListState<T>,
+  converter: React.StateItemConverter<T>,
+  getStringsOfObject: (object: T) => string[],
+  isOpen: React.State<boolean>
+) {
+  const viewModel: SearchViewModel<T> = new SearchViewModel(
+    allObjects,
+    filteredObjects,
+    getStringsOfObject
+  );
+
+  function close() {
+    isOpen.value = false;
+  }
+
+  return (
+    <div class="modal" toggle:open={isOpen}>
+      <div style="max-width: 64rem">
+        <main>
+          <h2>{headline}</h2>
+          <div class="flex-row width-input">
+            <input
+              placeholder={translations.general.searchLabel}
+              bind:value={viewModel.searchInput}
+              on:enter={viewModel.applySearch}
+            ></input>
+            <button
+              class="primary"
+              aria-label={translations.general.searchButtonAudioLabel}
+              on:click={viewModel.applySearch}
+              toggle:disabled={viewModel.cannotApplySearch}
+            >
+              <span class="icon">search</span>
+            </button>
+          </div>
+
+          <hr></hr>
+
+          <div
+            class="grid gap"
+            children:append={[filteredObjects, converter]}
+          ></div>
+        </main>
+        <button on:click={close}>
+          {translations.general.closeButton}
+          <span class="icon">close</span>
+        </button>
+      </div>
+    </div>
+  );
+}