feat: rebuild search UI w/ new filters (#269)

2024-11-16 13:48:44 +00:00 · 2023-02-09 17:47:41 -09:00 · 2023-02-09 17:47:41 -09:00 · ab22ea6a25
commit ab22ea6a25
parent ce2fc7712a
10 changed files with 524 additions and 134 deletions
--- 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)
--- 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;
+}
--- a/frontend/components/Form/Autocomplete2.vue
+++ 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>
--- 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: "",
--- a/frontend/components/Search/Filter.vue
+++ 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>
--- 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 + " > ");
--- 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;
 }
--- 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",
--- 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">
--- 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'}