Add search / filter box (#2170)

* feat: Add search client based on #1978

* moved the filtering to the DB level using zod and tidied up some imports.

* minor fix

* minor fix

* fix typo

---------

Co-authored-by: Bernd Storath <999999bst@gmail.com>

src/app/components/Clients/Search.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="relative w-60 md:mr-2">
+    <div class="relative flex h-full items-center">
+      <MagnifyingGlassIcon
+        class="absolute left-2.5 h-4 w-4 text-gray-400 dark:text-neutral-500"
+      />
+      <input
+        v-model="searchQuery"
+        type="text"
+        :placeholder="$t('client.search')"
+        class="w-full rounded bg-white py-2 pr-8 text-sm text-gray-900 shadow-sm ring-1 ring-gray-300 transition-all placeholder:text-gray-400 focus:border-transparent focus:outline-none focus:ring-2 focus:ring-red-600 dark:bg-neutral-800 dark:text-white dark:ring-neutral-700 dark:placeholder:text-neutral-500 dark:focus:ring-red-700"
+        @input="updateSearch"
+      />
+      <button
+        v-if="searchQuery"
+        class="absolute right-2 flex h-5 w-5 items-center justify-center rounded-full bg-gray-200 text-gray-600 hover:bg-gray-300 hover:text-gray-800 dark:bg-neutral-700 dark:text-neutral-300 dark:hover:bg-neutral-600 dark:hover:text-neutral-100"
+        aria-label="Clear search"
+        @click="clearSearch"
+      >
+        <IconsClose class="h-3 w-3" />
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const clientsStore = useClientsStore();
+const searchQuery = ref('');
+
+const updateSearch = useDebounceFn(() => {
+  clientsStore.setSearchQuery(searchQuery.value);
+}, 300);
+
+function clearSearch() {
+  searchQuery.value = '';
+  clientsStore.setSearchQuery('');
+}
+</script>

src/app/components/Panel/head/Boat.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-shrink-0 space-x-1 md:block">
+  <div class="flex flex-shrink-0 items-center space-x-2">
     <slot />
   </div>
 </template>

src/app/pages/index.vue

@@ -4,6 +4,7 @@
       <PanelHead>
         <PanelHeadTitle :text="$t('pages.clients')" />
         <PanelHeadBoat>
+          <ClientsSearch />
           <ClientsSort />
           <ClientsNew />
         </PanelHeadBoat>

src/app/stores/clients.ts

@@ -31,8 +31,13 @@ export const useClientsStore = defineStore('Clients', () => {
   const clients = ref<null | LocalClient[]>(null);
   const clientsPersist = ref<Record<string, ClientPersist>>({});
 
+  const searchParams = ref({
+    filter: undefined as string | undefined,
+  });
+
   const { data: _clients, refresh: _refresh } = useFetch('/api/client', {
     method: 'get',
+    params: searchParams,
   });
 
   // TODO: rewrite
@@ -120,6 +125,7 @@ export const useClientsStore = defineStore('Clients', () => {
       };
     });
 
+    // TODO: move sort to backend
     if (transformedClients !== undefined) {
       transformedClients = sortByProperty(
         transformedClients,
@@ -130,5 +136,11 @@ export const useClientsStore = defineStore('Clients', () => {
 
     clients.value = transformedClients ?? null;
   }
-  return { clients, clientsPersist, refresh, _clients };
+
+  function setSearchQuery(filter: string) {
+    clients.value = null;
+    searchParams.value.filter = filter || undefined;
+  }
+
+  return { clients, clientsPersist, refresh, _clients, setSearchQuery };
 });