From d76505bb27f1b0f4d46bbe6af1cd638ad9718a8f Mon Sep 17 00:00:00 2001
From: Filipe Dobreira <dobreira@gmail.com>
Date: Fri, 8 Dec 2023 21:04:04 +0000
Subject: [PATCH] Add quick search support

---
 frontend/components/Base/Modal.vue     |  2 +-
 frontend/components/Form/TextField.vue | 14 +++--------
 frontend/components/QuickSearch.vue    | 34 ++++++++++++++++++++++++++
 frontend/layouts/default.vue           |  5 +---
 4 files changed, 40 insertions(+), 15 deletions(-)
 create mode 100644 frontend/components/QuickSearch.vue

diff --git a/frontend/components/Base/Modal.vue b/frontend/components/Base/Modal.vue
index c1e7591..3b9c6c3 100644
--- a/frontend/components/Base/Modal.vue
+++ b/frontend/components/Base/Modal.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="z-[999]">
+  <div v-if="modal" class="z-[999]">
     <input :id="modalId" v-model="modal" type="checkbox" class="modal-toggle" />
     <div class="modal modal-bottom sm:modal-middle overflow-visible">
       <div class="modal-box overflow-visible relative">
diff --git a/frontend/components/Form/TextField.vue b/frontend/components/Form/TextField.vue
index 16c077e..1ef366a 100644
--- a/frontend/components/Form/TextField.vue
+++ b/frontend/components/Form/TextField.vue
@@ -41,16 +41,10 @@
     },
   });
 
-  const input = ref<HTMLElement | null>(null);
-
-  whenever(
-    () => props.triggerFocus,
-    () => {
-      if (input.value) {
-        input.value.focus();
-      }
-    }
-  );
+  const input = ref<HTMLInputElement | null>(null);
+  whenever(input, () => {
+    input.value!.focus();
+  });
 
   const value = useVModel(props, "modelValue");
 </script>
diff --git a/frontend/components/QuickSearch.vue b/frontend/components/QuickSearch.vue
new file mode 100644
index 0000000..86e9490
--- /dev/null
+++ b/frontend/components/QuickSearch.vue
@@ -0,0 +1,34 @@
+<template>
+  <BaseModal v-model="isActive">
+    <template #title> Quick Search </template>
+    <div class="flex flex-wrap md:flex-nowrap gap-4 items-end">
+      <div class="w-full">
+        <FormTextField v-model="query" placeholder="Search" trigger-focus @keyup.prevent.enter="quickSearch" />
+      </div>
+      <BaseButton class="btn-block md:w-auto" @click.prevent="quickSearch">
+        <template #icon>
+          <Icon name="mdi-search" />
+        </template>
+        Search
+      </BaseButton>
+    </div>
+  </BaseModal>
+</template>
+
+<script setup lang="ts">
+  const query = ref("");
+  const { isActive } = useQuickSearch();
+  const router = useRouter();
+
+  function quickSearch() {
+    router.push({
+      path: "/items",
+      query: {
+        q: query.value,
+      },
+    });
+
+    isActive.value = false;
+    query.value = "";
+  }
+</script>
diff --git a/frontend/layouts/default.vue b/frontend/layouts/default.vue
index 771986e..d8f7648 100644
--- a/frontend/layouts/default.vue
+++ b/frontend/layouts/default.vue
@@ -9,6 +9,7 @@
     <ItemCreateModal v-model="modals.item" />
     <LabelCreateModal v-model="modals.label" />
     <LocationCreateModal v-model="modals.location" />
+    <QuickSearch />
     <AppToast />
     <div class="drawer drawer-mobile">
       <input id="nav-drawer" v-model="drawerToggle" type="checkbox" class="drawer-toggle" />
@@ -93,16 +94,12 @@
 <script lang="ts" setup>
   import { useLabelStore } from "~~/stores/labels";
   import { useLocationStore } from "~~/stores/locations";
-  import { useQuickSearch } from "~~/composables/use-quick-search";
 
   const username = computed(() => authCtx.user?.name || "User");
 
   // Preload currency format
   useFormatCurrency();
 
-  // Enable global quick search:
-  useQuickSearch();
-
   const modals = reactive({
     item: false,
     location: false,