From c2dda9599a8f00b609dded5fe58d9f5242e92ee2 Mon Sep 17 00:00:00 2001
From: Filipe Dobreira <dobreira@gmail.com>
Date: Thu, 7 Dec 2023 21:22:16 +0000
Subject: [PATCH] Allow arbitrary custom field value search via search param

---
 frontend/composables/use-quick-search.ts |  3 ++-
 frontend/pages/items.vue                 | 18 ++++++++++++++++--
 2 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/frontend/composables/use-quick-search.ts b/frontend/composables/use-quick-search.ts
index a066829..32bc219 100644
--- a/frontend/composables/use-quick-search.ts
+++ b/frontend/composables/use-quick-search.ts
@@ -104,12 +104,13 @@ export function useQuickSearch() {
       // Regardless of what we do next, we also clear the code buffer here:
       codeBuffer.value = "";
 
+      // TODO: Is there a good reason to not expose custom fields via search syntax?
       router.push({
         path: "/items",
         query: {
           q: "",
           fieldSelector: "true",
-          fields: [encodeURIComponent(`Barcode=${validCode}`)],
+          fields: [`Barcode=${validCode}`],
         },
       });
     } else {
diff --git a/frontend/pages/items.vue b/frontend/pages/items.vue
index 92a35b1..b314a0c 100644
--- a/frontend/pages/items.vue
+++ b/frontend/pages/items.vue
@@ -77,6 +77,10 @@
     const qFields = route.query.fields as string[];
     if (qFields) {
       fieldTuples.value = qFields.map(f => f.split("=") as [string, string]);
+      // After loading for the first time, we keep track of the field tuples at this point,
+      // and use them as possible field values even if they're not included in the list of values for
+      // the given field:
+      fieldTuplesOnMount.value = fieldTuples.value;
 
       for (const t of fieldTuples.value) {
         if (t[0] && t[1]) {
@@ -139,6 +143,7 @@
   });
 
   const fieldTuples = ref<[string, string][]>([]);
+  const fieldTuplesOnMount = ref<[string, string][]>([]);
   const fieldValuesCache = ref<Record<string, string[]>>({});
 
   const { data: allFields } = useAsyncData(async () => {
@@ -173,6 +178,15 @@
     return data;
   }
 
+  function fieldValuesFromCache(field: string) {
+    const fieldValues = fieldValuesCache.value[field] ?? [];
+    const valuesFromFirstMount = fieldTuplesOnMount.value
+      .filter(([fieldName]) => fieldName === field)
+      .map(([_, fieldValue]) => fieldValue);
+
+    return [...valuesFromFirstMount, ...fieldValues];
+  }
+
   watch(advanced, (v, lv) => {
     if (v === false && lv === true) {
       selectedLocations.value = [];
@@ -399,8 +413,8 @@
             <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 v-model="fieldTuples[idx][1]" class="select-bordered select" :items="fieldValuesFromCache(f[0])">
+              <option v-for="v in fieldValuesFromCache(f[0])" :key="v" :value="v">{{ v }}</option>
             </select>
           </div>
           <button