From ab22ea6a25b466bd8b09d54f3d4c69ba0d6eff46 Mon Sep 17 00:00:00 2001
From: Hayden <64056131+hay-kot@users.noreply.github.com>
Date: Thu, 9 Feb 2023 17:47:41 -0900
Subject: [PATCH] feat: rebuild search UI w/ new filters (#269)

---
 backend/internal/data/repo/repo_items.go     |  68 +++---
 frontend/assets/css/main.css                 |  18 ++
 frontend/components/Form/Autocomplete2.vue   | 157 +++++++++++++
 frontend/components/Location/Selector.vue    |  38 +--
 frontend/components/Search/Filter.vue        | 104 +++++++++
 frontend/composables/use-location-helpers.ts |   4 +-
 frontend/lib/api/types/data-contracts.ts     |  28 +--
 frontend/package.json                        |   1 +
 frontend/pages/items.vue                     | 229 +++++++++++++------
 frontend/pnpm-lock.yaml                      |  11 +
 10 files changed, 524 insertions(+), 134 deletions(-)
 create mode 100644 frontend/components/Form/Autocomplete2.vue
 create mode 100644 frontend/components/Search/Filter.vue

diff --git a/backend/internal/data/repo/repo_items.go b/backend/internal/data/repo/repo_items.go
index e5dd607..91dd2b3 100644
--- a/backend/internal/data/repo/repo_items.go
+++ b/backend/internal/data/repo/repo_items.go
@@ -308,22 +308,6 @@ func (e *ItemsRepository) QueryByGroup(ctx context.Context, gid uuid.UUID, q Ite
 		qb = qb.Where(item.Archived(false))
 	}
 
-	if len(q.LabelIDs) > 0 {
-		labels := make([]predicate.Item, 0, len(q.LabelIDs))
-		for _, l := range q.LabelIDs {
-			labels = append(labels, item.HasLabelWith(label.ID(l)))
-		}
-		qb = qb.Where(item.Or(labels...))
-	}
-
-	if len(q.LocationIDs) > 0 {
-		locations := make([]predicate.Item, 0, len(q.LocationIDs))
-		for _, l := range q.LocationIDs {
-			locations = append(locations, item.HasLocationWith(location.ID(l)))
-		}
-		qb = qb.Where(item.Or(locations...))
-	}
-
 	if q.Search != "" {
 		qb.Where(
 			item.Or(
@@ -338,18 +322,50 @@ func (e *ItemsRepository) QueryByGroup(ctx context.Context, gid uuid.UUID, q Ite
 		qb = qb.Where(item.AssetID(q.AssetID.Int()))
 	}
 
-	if len(q.Fields) > 0 {
-		predicates := make([]predicate.Item, 0, len(q.Fields))
-		for _, f := range q.Fields {
-			predicates = append(predicates, item.HasFieldsWith(
-				itemfield.And(
-					itemfield.Name(f.Name),
-					itemfield.TextValue(f.Value),
-				),
-			))
+	// Filters within this block define a AND relationship where each subset
+	// of filters is OR'd together.
+	//
+	// The goal is to allow matches like where the item has
+	//  - one of the selected labels AND
+	//  - one of the selected locations AND
+	//  - one of the selected fields key/value matches
+	var andPredicates []predicate.Item
+	{
+		if len(q.LabelIDs) > 0 {
+			labelPredicates := make([]predicate.Item, 0, len(q.LabelIDs))
+			for _, l := range q.LabelIDs {
+				labelPredicates = append(labelPredicates, item.HasLabelWith(label.ID(l)))
+			}
+
+			andPredicates = append(andPredicates, item.Or(labelPredicates...))
 		}
 
-		qb = qb.Where(item.Or(predicates...))
+		if len(q.LocationIDs) > 0 {
+			locationPredicates := make([]predicate.Item, 0, len(q.LocationIDs))
+			for _, l := range q.LocationIDs {
+				locationPredicates = append(locationPredicates, item.HasLocationWith(location.ID(l)))
+			}
+
+			andPredicates = append(andPredicates, item.Or(locationPredicates...))
+		}
+
+		if len(q.Fields) > 0 {
+			fieldPredicates := make([]predicate.Item, 0, len(q.Fields))
+			for _, f := range q.Fields {
+				fieldPredicates = append(fieldPredicates, item.HasFieldsWith(
+					itemfield.And(
+						itemfield.Name(f.Name),
+						itemfield.TextValue(f.Value),
+					),
+				))
+			}
+
+			andPredicates = append(andPredicates, item.Or(fieldPredicates...))
+		}
+	}
+
+	if len(andPredicates) > 0 {
+		qb = qb.Where(item.And(andPredicates...))
 	}
 
 	count, err := qb.Count(ctx)
diff --git a/frontend/assets/css/main.css b/frontend/assets/css/main.css
index f76ff5f..89b2e1c 100644
--- a/frontend/assets/css/main.css
+++ b/frontend/assets/css/main.css
@@ -6,3 +6,21 @@
     text-transform: none !important;
 }
 
+/* transparent subtle scrollbar */
+::-webkit-scrollbar {
+  width: 0.2em;
+  background-color: #F5F5F5;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: rgba(0,0,0,.2);
+}
+
+::-webkit-scrollbar-track {
+  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
+  background-color: #F5F5F5;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background-color: #9B9B9B;
+}
\ No newline at end of file
diff --git a/frontend/components/Form/Autocomplete2.vue b/frontend/components/Form/Autocomplete2.vue
new file mode 100644
index 0000000..164386e
--- /dev/null
+++ b/frontend/components/Form/Autocomplete2.vue
@@ -0,0 +1,157 @@
+<template>
+  <div>
+    <Combobox v-model="value">
+      <ComboboxLabel class="label">
+        <span class="label-text">{{ label }}</span>
+      </ComboboxLabel>
+      <div class="relative">
+        <ComboboxInput
+          :display-value="i => extractDisplay(i as SupportValues)"
+          class="w-full input input-bordered"
+          @change="search = $event.target.value"
+        />
+        <ComboboxButton class="absolute inset-y-0 right-0 flex items-center rounded-r-md px-2 focus:outline-none">
+          <Icon name="mdi-chevron-down" class="w-5 h-5" />
+        </ComboboxButton>
+        <ComboboxOptions
+          v-if="computedItems.length > 0"
+          class="absolute dropdown-content z-10 mt-2 max-h-60 w-full overflow-auto rounded-md card bg-base-100 border border-gray-400"
+        >
+          <ComboboxOption
+            v-for="item in computedItems"
+            :key="item.id"
+            v-slot="{ active, selected }"
+            :value="item.value"
+            as="template"
+          >
+            <li
+              :class="[
+                'relative cursor-default select-none py-2 pl-3 pr-9 duration-75 ease-in-out transition-colors',
+                active ? 'bg-primary text-white' : 'text-gray-900',
+              ]"
+            >
+              <slot name="display" v-bind="{ item: item, selected, active }">
+                <span :class="['block truncate', selected && 'font-semibold']">
+                  {{ item.display }}
+                </span>
+                <span
+                  v-if="selected"
+                  :class="[
+                    'absolute inset-y-0 right-0 flex text-primary items-center pr-4',
+                    active ? 'text-primary-content' : 'bg-primary',
+                  ]"
+                >
+                  <Icon name="mdi-check" class="h-5 w-5" aria-hidden="true" />
+                </span>
+              </slot>
+            </li>
+          </ComboboxOption>
+        </ComboboxOptions>
+      </div>
+    </Combobox>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import {
+    Combobox,
+    ComboboxInput,
+    ComboboxOptions,
+    ComboboxOption,
+    ComboboxButton,
+    ComboboxLabel,
+  } from "@headlessui/vue";
+
+  type SupportValues = string | { [key: string]: any };
+
+  type ComboItem = {
+    display: string;
+    value: SupportValues;
+    id: number;
+  };
+
+  type Props = {
+    label: string;
+    modelValue: SupportValues | null | undefined;
+    items: string[] | object[];
+    display?: string;
+    multiple?: boolean;
+  };
+
+  const emit = defineEmits(["update:modelValue", "update:search"]);
+  const props = withDefaults(defineProps<Props>(), {
+    label: "",
+    modelValue: "",
+    display: "text",
+    multiple: false,
+  });
+
+  const search = ref("");
+  const value = useVModel(props, "modelValue", emit);
+
+  function extractDisplay(item?: SupportValues): string {
+    if (!item) {
+      return "";
+    }
+
+    if (typeof item === "string") {
+      return item;
+    }
+
+    if (props.display in item) {
+      return item[props.display] as string;
+    }
+
+    // Try these options as well
+    const fallback = ["name", "title", "display", "value"];
+    for (let i = 0; i < fallback.length; i++) {
+      const key = fallback[i];
+      if (key in item) {
+        return item[key] as string;
+      }
+    }
+
+    return "";
+  }
+
+  const computedItems = computed<ComboItem[]>(() => {
+    const list: ComboItem[] = [];
+
+    for (let i = 0; i < props.items.length; i++) {
+      const item = props.items[i];
+
+      const out: Partial<ComboItem> = {
+        id: i,
+        value: item,
+      };
+
+      switch (typeof item) {
+        case "string":
+          out.display = item;
+          break;
+        case "object":
+          // @ts-ignore - up to the user to provide a valid display key
+          out.display = item[props.display] as string;
+          break;
+        default:
+          out.display = "";
+          break;
+      }
+
+      if (search.value && out.display) {
+        const foldSearch = search.value.toLowerCase();
+        const foldDisplay = out.display.toLowerCase();
+
+        if (foldDisplay.startsWith(foldSearch)) {
+          list.push(out as ComboItem);
+        }
+
+        continue;
+      }
+
+      list.push(out as ComboItem);
+    }
+
+    return list;
+  });
+</script>
diff --git a/frontend/components/Location/Selector.vue b/frontend/components/Location/Selector.vue
index e519af3..82b7954 100644
--- a/frontend/components/Location/Selector.vue
+++ b/frontend/components/Location/Selector.vue
@@ -1,37 +1,43 @@
 <template>
-  <FormAutocomplete
-    v-model="value"
-    v-model:search="form.search"
-    :items="locations"
-    item-text="display"
-    item-value="id"
-    item-search="name"
-    label="Parent Location"
-  >
-    <template #display="{ item }">
+  <FormAutocomplete2 v-if="locations" v-model="value" :items="locations" display="name" label="Parent Location">
+    <template #display="{ item, selected, active }">
       <div>
-        <div>
-          {{ item.name }}
+        <div class="flex w-full">
+          {{ cast(item.value).name }}
+          <span
+            v-if="selected"
+            :class="['absolute inset-y-0 right-0 flex  items-center pr-4', active ? 'text-white' : 'text-primary']"
+          >
+            <Icon name="mdi-check" class="h-5 w-5" aria-hidden="true" />
+          </span>
+        </div>
+        <div v-if="cast(item.value).name != cast(item.value).treeString" class="text-xs mt-1">
+          {{ cast(item.value).treeString }}
         </div>
-        <div v-if="item.name != item.display" class="text-xs mt-1">{{ item.display }}</div>
       </div>
     </template>
-  </FormAutocomplete>
+  </FormAutocomplete2>
 </template>
 
 <script lang="ts" setup>
+  import { FlatTreeItem, useFlatLocations } from "~~/composables/use-location-helpers";
   import { LocationSummary } from "~~/lib/api/types/data-contracts";
 
   type Props = {
     modelValue?: LocationSummary | null;
   };
 
-  const props = defineProps<Props>();
+  // Cast the type of the item to a FlatTreeItem so we can get type "safety" in the template
+  // Note that this does not actually change the type of the item, it just tells the compiler
+  // that the type is FlatTreeItem. We must keep this in sync with the type of the items
+  function cast(value: any): FlatTreeItem {
+    return value as FlatTreeItem;
+  }
 
+  const props = defineProps<Props>();
   const value = useVModel(props, "modelValue");
 
   const locations = await useFlatLocations();
-
   const form = ref({
     parent: null as LocationSummary | null,
     search: "",
diff --git a/frontend/components/Search/Filter.vue b/frontend/components/Search/Filter.vue
new file mode 100644
index 0000000..c4f41af
--- /dev/null
+++ b/frontend/components/Search/Filter.vue
@@ -0,0 +1,104 @@
+<template>
+  <div ref="el" class="dropdown" :class="{ 'dropdown-open': dropdownOpen }">
+    <button ref="btn" tabindex="0" class="btn btn-xs" @click="toggle">
+      {{ label }} {{ len }} <Icon name="mdi-chevron-down" class="h-4 w-4" />
+    </button>
+    <div tabindex="0" class="dropdown-content mt-1 w-64 shadow bg-base-100 rounded-md">
+      <div class="pt-4 px-4 shadow-sm mb-1">
+        <input v-model="search" type="text" placeholder="Search…" class="input input-sm input-bordered w-full mb-2" />
+      </div>
+      <div class="overflow-y-auto max-h-72 divide-y">
+        <label
+          v-for="v in selectedView"
+          :key="v"
+          class="cursor-pointer px-4 label flex justify-between hover:bg-base-200"
+        >
+          <span class="label-text mr-2">
+            <slot name="display" v-bind="{ item: v }">
+              {{ v[display] }}
+            </slot>
+          </span>
+          <input v-model="selected" type="checkbox" :value="v" class="checkbox checkbox-sm checkbox-primary" />
+        </label>
+        <hr v-if="selected.length > 0" />
+        <label
+          v-for="v in unselected"
+          :key="v"
+          class="cursor-pointer px-4 label flex justify-between hover:bg-base-200"
+        >
+          <span class="label-text mr-2">
+            <slot name="display" v-bind="{ item: v }">
+              {{ v[display] }}
+            </slot>
+          </span>
+          <input v-model="selected" type="checkbox" :value="v" class="checkbox checkbox-sm checkbox-primary" />
+        </label>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  type Props = {
+    label: string;
+    options: any[];
+    display?: string;
+    modelValue: any[];
+  };
+
+  const btn = ref<HTMLButtonElement>();
+
+  const search = ref("");
+  const searchFold = computed(() => search.value.toLowerCase());
+  const dropdownOpen = ref(false);
+  const el = ref();
+
+  function toggle() {
+    dropdownOpen.value = !dropdownOpen.value;
+
+    if (!dropdownOpen.value) {
+      btn.value?.blur();
+    }
+  }
+
+  onClickOutside(el, () => {
+    dropdownOpen.value = false;
+  });
+
+  watch(dropdownOpen, val => {
+    console.log(val);
+  });
+
+  const emit = defineEmits(["update:modelValue"]);
+  const props = withDefaults(defineProps<Props>(), {
+    label: "",
+    display: "name",
+    modelValue: () => [],
+  });
+
+  const len = computed(() => {
+    return selected.value.length > 0 ? `(${selected.value.length})` : "";
+  });
+
+  const selectedView = computed(() => {
+    return selected.value.filter(o => {
+      if (searchFold.value.length > 0) {
+        return o[props.display].toLowerCase().includes(searchFold.value);
+      }
+      return true;
+    });
+  });
+
+  const selected = useVModel(props, "modelValue", emit);
+
+  const unselected = computed(() => {
+    return props.options.filter(o => {
+      if (searchFold.value.length > 0) {
+        return o[props.display].toLowerCase().includes(searchFold.value) && !selected.value.includes(o);
+      }
+      return !selected.value.includes(o);
+    });
+  });
+</script>
+
+<style scoped></style>
diff --git a/frontend/composables/use-location-helpers.ts b/frontend/composables/use-location-helpers.ts
index a540301..f9701de 100644
--- a/frontend/composables/use-location-helpers.ts
+++ b/frontend/composables/use-location-helpers.ts
@@ -4,7 +4,7 @@ import { TreeItem } from "~~/lib/api/types/data-contracts";
 export interface FlatTreeItem {
   id: string;
   name: string;
-  display: string;
+  treeString: string;
 }
 
 export function flatTree(tree: TreeItem[]): Ref<FlatTreeItem[]> {
@@ -18,7 +18,7 @@ export function flatTree(tree: TreeItem[]): Ref<FlatTreeItem[]> {
       v.value.push({
         id: item.id,
         name: item.name,
-        display: display + item.name,
+        treeString: display + item.name,
       });
       if (item.children) {
         flatten(item.children, display + item.name + " > ");
diff --git a/frontend/lib/api/types/data-contracts.ts b/frontend/lib/api/types/data-contracts.ts
index 0a8538a..ff2517a 100644
--- a/frontend/lib/api/types/data-contracts.ts
+++ b/frontend/lib/api/types/data-contracts.ts
@@ -17,7 +17,7 @@ export interface DocumentOut {
 }
 
 export interface Group {
-  createdAt: Date;
+  createdAt: string;
   currency: string;
   id: string;
   name: string;
@@ -39,7 +39,7 @@ export interface GroupUpdate {
 }
 
 export interface ItemAttachment {
-  createdAt: Date;
+  createdAt: string;
   document: DocumentOut;
   id: string;
   type: string;
@@ -76,7 +76,7 @@ export interface ItemOut {
   assetId: string;
   attachments: ItemAttachment[];
   children: ItemSummary[];
-  createdAt: Date;
+  createdAt: string;
   description: string;
   fields: ItemField[];
   id: string;
@@ -112,7 +112,7 @@ export interface ItemOut {
 
 export interface ItemSummary {
   archived: boolean;
-  createdAt: Date;
+  createdAt: string;
   description: string;
   id: string;
   insured: boolean;
@@ -169,7 +169,7 @@ export interface LabelCreate {
 }
 
 export interface LabelOut {
-  createdAt: Date;
+  createdAt: string;
   description: string;
   id: string;
   items: ItemSummary[];
@@ -178,7 +178,7 @@ export interface LabelOut {
 }
 
 export interface LabelSummary {
-  createdAt: Date;
+  createdAt: string;
   description: string;
   id: string;
   name: string;
@@ -193,7 +193,7 @@ export interface LocationCreate {
 
 export interface LocationOut {
   children: LocationSummary[];
-  createdAt: Date;
+  createdAt: string;
   description: string;
   id: string;
   items: ItemSummary[];
@@ -203,7 +203,7 @@ export interface LocationOut {
 }
 
 export interface LocationOutCount {
-  createdAt: Date;
+  createdAt: string;
   description: string;
   id: string;
   itemCount: number;
@@ -212,7 +212,7 @@ export interface LocationOutCount {
 }
 
 export interface LocationSummary {
-  createdAt: Date;
+  createdAt: string;
   description: string;
   id: string;
   name: string;
@@ -229,7 +229,7 @@ export interface LocationUpdate {
 export interface MaintenanceEntry {
   /** @example "0" */
   cost: string;
-  date: string;
+  date: Date;
   description: string;
   id: string;
   name: string;
@@ -238,7 +238,7 @@ export interface MaintenanceEntry {
 export interface MaintenanceEntryCreate {
   /** @example "0" */
   cost: string;
-  date: string;
+  date: Date;
   description: string;
   name: string;
 }
@@ -246,7 +246,7 @@ export interface MaintenanceEntryCreate {
 export interface MaintenanceEntryUpdate {
   /** @example "0" */
   cost: string;
-  date: string;
+  date: Date;
   description: string;
   name: string;
 }
@@ -258,7 +258,7 @@ export interface MaintenanceLog {
   itemId: string;
 }
 
-export interface PaginationResultItemSummary {
+export interface PaginationResultRepoItemSummary {
   items: ItemSummary[];
   page: number;
   pageSize: number;
@@ -302,7 +302,7 @@ export interface ValueOverTime {
 }
 
 export interface ValueOverTimeEntry {
-  date: string;
+  date: Date;
   name: string;
   value: number;
 }
diff --git a/frontend/package.json b/frontend/package.json
index 991f3f9..ce2c1c0 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -28,6 +28,7 @@
     "vitest": "^0.28.0"
   },
   "dependencies": {
+    "@headlessui/vue": "^1.7.9",
     "@iconify/vue": "^3.2.1",
     "@nuxtjs/tailwindcss": "^6.1.3",
     "@pinia/nuxt": "^0.4.1",
diff --git a/frontend/pages/items.vue b/frontend/pages/items.vue
index 0cad8d4..86e9918 100644
--- a/frontend/pages/items.vue
+++ b/frontend/pages/items.vue
@@ -16,7 +16,7 @@
   const initialSearch = ref(true);
 
   const api = useUserApi();
-  const loading = useMinLoader(2000);
+  const loading = useMinLoader(500);
   const items = ref<ItemSummary[]>([]);
   const total = ref(0);
 
@@ -33,6 +33,7 @@
   const query = useRouteQuery("q", "");
   const advanced = useRouteQuery("advanced", false);
   const includeArchived = useRouteQuery("archived", false);
+  const fieldSelector = useRouteQuery("fieldSelector", false);
 
   const totalPages = computed(() => Math.ceil(total.value / pageSize.value));
   const hasNext = computed(() => page.value * pageSize.value < total.value);
@@ -98,6 +99,9 @@
   });
 
   const locationsStore = useLocationStore();
+
+  const locationFlatTree = await useFlatLocations();
+
   const locations = computed(() => locationsStore.allLocations);
 
   const labelStore = useLabelStore();
@@ -147,6 +151,12 @@
     return data;
   });
 
+  watch(fieldSelector, (newV, oldV) => {
+    if (newV === false && oldV === true) {
+      fieldTuples.value = [];
+    }
+  });
+
   async function fetchValues(field: string): Promise<string[]> {
     if (fieldValuesCache.value[field]) {
       return fieldValuesCache.value[field];
@@ -198,6 +208,8 @@
       }
     }
 
+    const toast = useNotifier();
+
     const { data, error } = await api.items.getAll({
       q: query.value || "",
       locations: locIDs.value,
@@ -208,15 +220,21 @@
       fields,
     });
 
-    if (error) {
+    function resetItems() {
       page.value = Math.max(1, page.value - 1);
       loading.value = false;
+      total.value = 0;
+      items.value = [];
+    }
+
+    if (error) {
+      resetItems();
+      toast.error("Failed to search items");
       return;
     }
 
     if (!data.items || data.items.length === 0) {
-      page.value = Math.max(1, page.value - 1);
-      loading.value = false;
+      resetItems();
       return;
     }
 
@@ -227,7 +245,7 @@
     initialSearch.value = false;
   }
 
-  watchDebounced([page, pageSize, query, advanced], search, { debounce: 250, maxWait: 1000 });
+  watchDebounced([page, pageSize, query, selectedLabels, selectedLocations], search, { debounce: 250, maxWait: 1000 });
 
   async function submit() {
     // Set URL Params
@@ -243,7 +261,8 @@
       query: {
         // Reactive
         advanced: "true",
-        includeArchived: includeArchived.value ? "true" : "false",
+        archived: includeArchived.value ? "true" : "false",
+        fieldSelector: fieldSelector.value ? "true" : "false",
         pageSize: pageSize.value,
         page: page.value,
         q: query.value,
@@ -261,83 +280,141 @@
     // Perform Search
     await search();
   }
+
+  async function reset() {
+    // Set URL Params
+    const fields = [];
+    for (const t of fieldTuples.value) {
+      if (t[0] && t[1]) {
+        fields.push(`${t[0]}=${t[1]}`);
+      }
+    }
+
+    await router.push({
+      query: {
+        archived: "false",
+        fieldSelector: "false",
+        pageSize: 10,
+        page: 1,
+        q: "",
+        loc: [],
+        lab: [],
+        fields,
+      },
+    });
+
+    await search();
+  }
 </script>
 
 <template>
   <BaseContainer class="mb-16">
-    <FormTextField v-model="query" placeholder="Search" />
-    <div class="text-sm pl-2 pt-2">
-      <p v-if="byAssetId">Querying Asset ID Number: {{ parsedAssetId }}</p>
-    </div>
-    <div class="flex mt-1">
-      <label class="ml-auto label cursor-pointer">
-        <input v-model="advanced" type="checkbox" class="toggle toggle-primary" />
-        <span class="label-text text-base-content ml-2"> Advanced Search </span>
-      </label>
-    </div>
-    <BaseCard v-if="advanced" class="my-1 overflow-visible">
-      <template #title> Search Tips </template>
-      <template #subtitle>
-        <ul class="mt-1 list-disc pl-6">
-          <li>
-            Location and label filters use the 'OR' operation. If more than one is selected only one will be required
-            for a match.
-          </li>
-          <li>Searches prefixed with '#'' will query for a asset ID (example '#000-001')</li>
-          <li>
-            Field filters use the 'OR' operation. If more than one is selected only one will be required for a match.
-          </li>
-        </ul>
-      </template>
-      <form class="px-4 pb-4">
-        <div class="flex pb-2 pt-5">
-          <label class="label cursor-pointer mr-auto">
-            <input v-model="includeArchived" type="checkbox" class="toggle toggle-primary" />
-            <span class="label-text ml-4"> Include Archived Items </span>
-          </label>
-          <Spacer />
-        </div>
-        <FormMultiselect v-model="selectedLabels" label="Labels" :items="labels ?? []" />
-        <FormMultiselect v-model="selectedLocations" label="Locations" :items="locations ?? []" />
-        <div class="py-4 space-y-2">
-          <p>Custom Fields</p>
-          <div v-for="(f, idx) in fieldTuples" :key="idx" class="flex flex-wrap gap-2">
-            <div class="form-control w-full max-w-xs">
-              <label class="label">
-                <span class="label-text">Field</span>
-              </label>
-              <select
-                v-model="fieldTuples[idx][0]"
-                class="select-bordered select"
-                :items="allFields ?? []"
-                @change="fetchValues(f[0])"
-              >
-                <option v-for="fv in allFields" :key="fv" :value="fv">{{ fv }}</option>
-              </select>
-            </div>
-            <div class="form-control w-full max-w-xs">
-              <label class="label">
-                <span class="label-text">Field Value</span>
-              </label>
-              <select v-model="fieldTuples[idx][1]" class="select-bordered select" :items="fieldValuesCache[f[0]]">
-                <option v-for="v in fieldValuesCache[f[0]]" :key="v" :value="v">{{ v }}</option>
-              </select>
-            </div>
-            <button
-              type="button"
-              class="btn btn-square btn-sm md:ml-0 ml-auto mt-auto mb-2"
-              @click="fieldTuples.splice(idx, 1)"
-            >
-              <Icon name="mdi-trash" class="w-5 h-5" />
-            </button>
+    <div v-if="locations && labels">
+      <div class="flex flex-wrap md:flex-nowrap gap-4 items-end">
+        <div class="w-full">
+          <FormTextField v-model="query" placeholder="Search" />
+          <div v-if="byAssetId" class="text-sm pl-2 pt-2">
+            <p>Querying Asset ID Number: {{ parsedAssetId }}</p>
           </div>
-          <BaseButton type="button" class="btn-sm mt-2" @click="() => fieldTuples.push(['', ''])"> Add</BaseButton>
         </div>
-        <div class="flex justify-end gap-2">
-          <BaseButton @click.prevent="submit">Search</BaseButton>
+        <BaseButton class="btn-block md:w-auto" @click.prevent="submit">
+          <template #icon>
+            <Icon v-if="loading" name="mdi-loading" class="animate-spin" />
+            <Icon v-else name="mdi-search" />
+          </template>
+          Search
+        </BaseButton>
+      </div>
+
+      <div class="flex flex-wrap md:flex-nowrap gap-2 w-full py-2">
+        <SearchFilter v-model="selectedLocations" label="Locations" :options="locationFlatTree">
+          <template #display="{ item }">
+            <div>
+              <div class="flex w-full">
+                {{ item.name }}
+              </div>
+              <div v-if="item.name != item.treeString" class="text-xs mt-1">
+                {{ item.treeString }}
+              </div>
+            </div>
+          </template>
+        </SearchFilter>
+        <SearchFilter v-model="selectedLabels" label="Labels" :options="labels" />
+        <div class="dropdown">
+          <label tabindex="0" class="btn btn-xs">Options</label>
+          <div
+            tabindex="0"
+            class="dropdown-content mt-1 max-h-72 p-4 w-64 overflow-auto shadow bg-base-100 rounded-md -translate-x-24"
+          >
+            <label class="label cursor-pointer mr-auto">
+              <input v-model="includeArchived" type="checkbox" class="toggle toggle-sm toggle-primary" />
+              <span class="label-text ml-4"> Include Archived Items </span>
+            </label>
+            <label class="label cursor-pointer mr-auto">
+              <input v-model="fieldSelector" type="checkbox" class="toggle toggle-sm toggle-primary" />
+              <span class="label-text ml-4"> Field Selector </span>
+            </label>
+            <hr class="my-2" />
+            <BaseButton class="btn-block btn-sm" @click="reset"> Reset Search</BaseButton>
+          </div>
         </div>
-      </form>
-    </BaseCard>
+        <div class="dropdown ml-auto dropdown-end">
+          <label tabindex="0" class="btn btn-xs">Tips</label>
+          <div
+            tabindex="0"
+            class="dropdown-content mt-1 p-4 w-[325px] text-sm overflow-auto shadow bg-base-100 rounded-md"
+          >
+            <p class="text-base">Search Tips</p>
+            <ul class="mt-1 list-disc pl-6">
+              <li>
+                Location and label filters use the 'OR' operation. If more than one is selected only one will be
+                required for a match.
+              </li>
+              <li>Searches prefixed with '#'' will query for a asset ID (example '#000-001')</li>
+              <li>
+                Field filters use the 'OR' operation. If more than one is selected only one will be required for a
+                match.
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+      <div v-if="fieldSelector" class="py-4 space-y-2">
+        <p>Custom Fields</p>
+        <div v-for="(f, idx) in fieldTuples" :key="idx" class="flex flex-wrap gap-2">
+          <div class="form-control w-full max-w-xs">
+            <label class="label">
+              <span class="label-text">Field</span>
+            </label>
+            <select
+              v-model="fieldTuples[idx][0]"
+              class="select-bordered select"
+              :items="allFields ?? []"
+              @change="fetchValues(f[0])"
+            >
+              <option v-for="fv in allFields" :key="fv" :value="fv">{{ fv }}</option>
+            </select>
+          </div>
+          <div class="form-control w-full max-w-xs">
+            <label class="label">
+              <span class="label-text">Field Value</span>
+            </label>
+            <select v-model="fieldTuples[idx][1]" class="select-bordered select" :items="fieldValuesCache[f[0]]">
+              <option v-for="v in fieldValuesCache[f[0]]" :key="v" :value="v">{{ v }}</option>
+            </select>
+          </div>
+          <button
+            type="button"
+            class="btn btn-square btn-sm md:ml-0 ml-auto mt-auto mb-2"
+            @click="fieldTuples.splice(idx, 1)"
+          >
+            <Icon name="mdi-trash" class="w-5 h-5" />
+          </button>
+        </div>
+        <BaseButton type="button" class="btn-sm mt-2" @click="() => fieldTuples.push(['', ''])"> Add</BaseButton>
+      </div>
+    </div>
+
     <section class="mt-10">
       <BaseSectionHeader ref="itemsTitle"> Items </BaseSectionHeader>
       <p class="text-base font-medium flex items-center">
diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml
index 2e839f2..7dc9350 100644
--- a/frontend/pnpm-lock.yaml
+++ b/frontend/pnpm-lock.yaml
@@ -2,6 +2,7 @@ lockfileVersion: 5.4
 
 specifiers:
   '@faker-js/faker': ^7.5.0
+  '@headlessui/vue': ^1.7.9
   '@iconify/vue': ^3.2.1
   '@nuxtjs/eslint-config-typescript': ^12.0.0
   '@nuxtjs/tailwindcss': ^6.1.3
@@ -36,6 +37,7 @@ specifiers:
   vue-router: '4'
 
 dependencies:
+  '@headlessui/vue': 1.7.9_vue@3.2.45
   '@iconify/vue': 3.2.1_vue@3.2.45
   '@nuxtjs/tailwindcss': 6.1.3
   '@pinia/nuxt': 0.4.6_prq2uz4lho2pwp6irk4cfkrxwu
@@ -736,6 +738,15 @@ packages:
     engines: {node: '>=14.0.0', npm: '>=6.0.0'}
     dev: true
 
+  /@headlessui/vue/1.7.9_vue@3.2.45:
+    resolution: {integrity: sha512-vgLBKszj+m2ozaPOnjWMGnspoLJcU/06vygdEAyAS4nDjp72yA7AYbOIEgdaspUhaMs585ApyiSm3jPTuIxAzg==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      vue: ^3.2.0
+    dependencies:
+      vue: 3.2.45
+    dev: false
+
   /@humanwhocodes/config-array/0.11.7:
     resolution: {integrity: sha512-kBbPWzN8oVMLb0hOUYXhmxggL/1cJE6ydvjDIGi9EnAGUyA7cLVKQg+d/Dsm+KZwx2czGHrCmMVLiyg8s5JPKw==}
     engines: {node: '>=10.10.0'}