feat: allow nested relationships for locations and items (#102)

Basic implementation that allows organizing Locations and Items within each other.

frontend/components/Form/Autocomplete.vue

@@ -0,0 +1,149 @@
+<template>
+  <div ref="menu" class="form-control w-full">
+    <label class="label">
+      <span class="label-text">{{ label }}</span>
+    </label>
+    <div class="dropdown dropdown-top sm:dropdown-end">
+      <div class="relative">
+        <input
+          v-model="isearch"
+          tabindex="0"
+          class="input w-full items-center flex flex-wrap border border-gray-400 rounded-lg"
+          @keyup.enter="selectFirst"
+        />
+        <button
+          v-if="!!modelValue && Object.keys(modelValue).length !== 0"
+          style="transform: translateY(-50%)"
+          class="top-1/2 absolute right-2 btn btn-xs btn-circle no-animation"
+          @click="clear"
+        >
+          x
+        </button>
+      </div>
+      <ul
+        tabindex="0"
+        style="display: inline"
+        class="dropdown-content mb-1 menu shadow border border-gray-400 rounded bg-base-100 w-full z-[9999] max-h-60 overflow-y-scroll"
+      >
+        <li v-for="(obj, idx) in filtered" :key="idx">
+          <button type="button" @click="select(obj)">
+            {{ usingObjects ? obj[itemText] : obj }}
+          </button>
+        </li>
+        <li class="hidden first:flex">
+          <button disabled>
+            {{ noResultsText }}
+          </button>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  type ItemsObject = {
+    text?: string;
+    value?: string;
+    [key: string]: unknown;
+  };
+
+  interface Props {
+    label: string;
+    modelValue: string | ItemsObject;
+    items: ItemsObject[] | string[];
+    itemText?: keyof ItemsObject;
+    itemValue?: keyof ItemsObject;
+    search?: string;
+    noResultsText?: string;
+  }
+
+  const emit = defineEmits(["update:modelValue", "update:search"]);
+  const props = withDefaults(defineProps<Props>(), {
+    label: "",
+    modelValue: "",
+    items: () => [],
+    itemText: "text",
+    itemValue: "value",
+    search: "",
+    noResultsText: "No Results Found",
+  });
+
+  function clear() {
+    select(value.value);
+  }
+
+  const isearch = ref("");
+  watch(isearch, () => {
+    internalSearch.value = isearch.value;
+  });
+
+  const internalSearch = useVModel(props, "search", emit);
+  const value = useVModel(props, "modelValue", emit);
+
+  const usingObjects = computed(() => {
+    return props.items.length > 0 && typeof props.items[0] === "object";
+  });
+
+  /**
+   * isStrings is a type guard function to check if the items are an array of string
+   */
+  function isStrings(_arr: string[] | ItemsObject[]): _arr is string[] {
+    return !usingObjects.value;
+  }
+
+  function selectFirst() {
+    if (filtered.value.length > 0) {
+      select(filtered.value[0]);
+    }
+  }
+
+  watch(
+    value,
+    () => {
+      if (value.value) {
+        if (typeof value.value === "string") {
+          isearch.value = value.value;
+        } else {
+          isearch.value = value.value[props.itemText] as string;
+        }
+      }
+    },
+    {
+      immediate: true,
+    }
+  );
+
+  function select(obj: string | ItemsObject) {
+    if (isStrings(props.items)) {
+      if (obj === value.value) {
+        value.value = "";
+        return;
+      }
+      value.value = obj;
+    } else {
+      if (obj === value.value) {
+        value.value = {};
+        return;
+      }
+
+      value.value = obj;
+    }
+  }
+
+  const filtered = computed(() => {
+    if (!isearch.value || isearch.value === "") {
+      return props.items;
+    }
+
+    if (isStrings(props.items)) {
+      return props.items.filter(item => item.toLowerCase().includes(isearch.value.toLowerCase()));
+    } else {
+      return props.items.filter(item => {
+        if (props.itemText && props.itemText in item) {
+          return (item[props.itemText] as string).toLowerCase().includes(isearch.value.toLowerCase());
+        }
+        return false;
+      });
+    }
+  });
+</script>

frontend/components/Form/Select.vue

@@ -45,6 +45,10 @@
       type: String,
       default: "",
     },
+    compareKey: {
+      type: String,
+      default: null,
+    },
   });
 
   const selectedIdx = ref(-1);
@@ -52,36 +56,34 @@
   const internalSelected = useVModel(props, "modelValue", emit);
   const internalValue = useVModel(props, "value", emit);
 
-  watch(selectedIdx, newVal => {
-    internalSelected.value = props.items[newVal];
-  });
-
-  watch(selectedIdx, newVal => {
-    if (props.valueKey) {
-      internalValue.value = props.items[newVal][props.valueKey];
-    }
-  });
-
   watch(
-    internalSelected,
-    () => {
-      const idx = props.items.findIndex(item => compare(item, internalSelected.value));
-      selectedIdx.value = idx;
+    selectedIdx,
+    newVal => {
+      if (newVal === -1) {
+        return;
+      }
+
+      if (props.value) {
+        internalValue.value = props.items[newVal][props.valueKey];
+      }
+
+      internalSelected.value = props.items[newVal];
     },
-    {
-      immediate: true,
-    }
+    { immediate: true }
   );
 
   watch(
-    internalValue,
+    [internalSelected, () => props.value],
     () => {
-      const idx = props.items.findIndex(item => compare(item[props.valueKey], internalValue.value));
+      if (props.valueKey) {
+        const idx = props.items.findIndex(item => compare(item, internalValue.value));
+        selectedIdx.value = idx;
+        return;
+      }
+      const idx = props.items.findIndex(item => compare(item, internalSelected.value));
       selectedIdx.value = idx;
     },
-    {
-      immediate: true,
-    }
+    { immediate: true }
   );
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -90,8 +92,13 @@
       return true;
     }
 
-    if (!a || !b) {
-      return false;
+    if (props.valueKey) {
+      return a[props.valueKey] === b;
+    }
+
+    // Try compare key
+    if (props.compareKey && a && b) {
+      return a[props.compareKey] === b[props.compareKey];
     }
 
     return JSON.stringify(a) === JSON.stringify(b);