From 8d0575937c65cc2f37c1a58c474fd8abe406bd2b Mon Sep 17 00:00:00 2001
From: Filipe Dobreira <dobreira@gmail.com>
Date: Thu, 7 Dec 2023 21:41:39 +0000
Subject: [PATCH] Make qFields handling more reliable

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

diff --git a/frontend/composables/use-quick-search.ts b/frontend/composables/use-quick-search.ts
index 32bc219..c4d4583 100644
--- a/frontend/composables/use-quick-search.ts
+++ b/frontend/composables/use-quick-search.ts
@@ -110,7 +110,8 @@ export function useQuickSearch() {
         query: {
           q: "",
           fieldSelector: "true",
-          fields: [`Barcode=${validCode}`],
+          // TODO: Barcode= is a temporary approach to support this behavior.
+          fields: [encodeURIComponent(`Barcode=${validCode}`)],
         },
       });
     } else {
diff --git a/frontend/pages/items.vue b/frontend/pages/items.vue
index b314a0c..1b845a6 100644
--- a/frontend/pages/items.vue
+++ b/frontend/pages/items.vue
@@ -74,13 +74,17 @@
     queryParamsInitialized.value = true;
     searchLocked.value = false;
 
-    const qFields = route.query.fields as string[];
-    if (qFields) {
-      fieldTuples.value = qFields.map(f => f.split("=") as [string, string]);
+    const qFields = route.query.fields as string[] | string;
+    if (qFields != null) {
+      // Ensure qFields are represented as an array of string, as expected:
+      const qFieldsAsArray = Array.isArray(qFields) ? qFields : [qFields];
+      const parsedFieldTuples = qFieldsAsArray.map(f => decodeURIComponent(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;
+      fieldTuples.value = parsedFieldTuples;
+      fieldTuplesOnMount.value = parsedFieldTuples;
 
       for (const t of fieldTuples.value) {
         if (t[0] && t[1]) {
@@ -178,13 +182,20 @@
     return data;
   }
 
+  /**
+   * Temporary approach to arbitrary field values, which merges search query input
+   * into the values cache for a given field.
+   *
+   * Since this relies on `onMounted`, and due to how search works, it's less than
+   * ideal, and supremely confusing when a value you saw 2 seconds ago suddenly disappears.
+   */
   function fieldValuesFromCache(field: string) {
     const fieldValues = fieldValuesCache.value[field] ?? [];
     const valuesFromFirstMount = fieldTuplesOnMount.value
       .filter(([fieldName]) => fieldName === field)
       .map(([_, fieldValue]) => fieldValue);
 
-    return [...valuesFromFirstMount, ...fieldValues];
+    return [...new Set([...valuesFromFirstMount, ...fieldValues])];
   }
 
   watch(advanced, (v, lv) => {
@@ -259,7 +270,10 @@
     initialSearch.value = false;
   }
 
-  watchDebounced([page, pageSize, query, selectedLabels, selectedLocations], search, { debounce: 250, maxWait: 1000 });
+  watchDebounced([page, pageSize, query, selectedLabels, selectedLocations], search, {
+    debounce: 250,
+    maxWait: 1000,
+  });
 
   async function submit() {
     // Set URL Params