fix multiple selector bugs

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,
+    selectedIdx,
-    () => {
+    newVal => {
-      const idx = props.items.findIndex(item => compare(item, internalSelected.value));
+      if (newVal === -1) {
-      selectedIdx.value = idx;
+        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) {
+    if (props.valueKey) {
-      return false;
+      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);

frontend/lib/api/types/data-contracts.ts

@@ -49,6 +49,7 @@ export interface ItemCreate {
   /** Edges */
   locationId: string;
   name: string;
+  parentId: string | null;
 }
 
 export interface ItemField {
@@ -63,10 +64,9 @@ export interface ItemField {
 
 export interface ItemOut {
   attachments: ItemAttachment[];
+  children: ItemSummary[];
   createdAt: Date;
   description: string;
-
-  /** Future */
   fields: ItemField[];
   id: string;
   insured: boolean;
@@ -83,6 +83,7 @@ export interface ItemOut {
 
   /** Extras */
   notes: string;
+  parent: ItemSummary | null;
   purchaseFrom: string;
 
   /** @example 0 */
@@ -137,6 +138,7 @@ export interface ItemUpdate {
 
   /** Extras */
   notes: string;
+  parentId: string | null;
   purchaseFrom: string;
 
   /** @example 0 */

frontend/pages/item/[id]/edit.vue

@@ -39,6 +39,7 @@
 
     return data;
   });
+
   onMounted(() => {
     refresh();
   });
@@ -48,6 +49,7 @@
       ...item.value,
       locationId: item.value.location?.id,
       labelIds: item.value.labels.map(l => l.id),
+      parentId: null,
     };
 
     const { error } = await api.items.update(itemId.value, payload);
@@ -314,8 +316,8 @@
       <template #title> Attachment Edit </template>
 
       <FormTextField v-model="editState.title" label="Attachment Title" />
+      {{ editState.type }}
       <FormSelect
-        v-model="editState.obj"
         v-model:value="editState.type"
         label="Attachment Type"
         value-key="value"
@@ -354,7 +356,13 @@
             </template>
           </BaseSectionHeader>
           <div class="px-5 mb-6 grid md:grid-cols-2 gap-4">
-            <FormSelect v-if="item" v-model="item.location" label="Location" :items="locations ?? []" />
+            <FormSelect
+              v-if="item"
+              v-model="item.location"
+              label="Location"
+              :items="locations ?? []"
+              compare-key="id"
+            />
             <FormMultiselect v-model="item.labels" label="Labels" :items="labels ?? []" />
           </div>