update location selectors

frontend/components/Form/Autocomplete.vue

@@ -51,7 +51,7 @@
 
   interface Props {
     label: string;
-    modelValue: string | ItemsObject;
+    modelValue: string | ItemsObject | null | undefined;
     items: ItemsObject[] | string[];
     itemText?: keyof ItemsObject;
     itemSearch?: keyof ItemsObject | null;
@@ -129,7 +129,7 @@
     }
   );
 
-  function select(obj: string | ItemsObject) {
+  function select(obj: Props["modelValue"]) {
     if (isStrings(props.items)) {
       if (obj === value.value) {
         value.value = "";

frontend/components/Location/CreateModal.vue

@@ -10,24 +10,7 @@
         label="Location Name"
       />
       <FormTextArea v-model="form.description" label="Location Description" />
-      <FormAutocomplete
+      <LocationSelector v-model="form.parent" />
-        v-model="form.parent"
-        v-model:search="form.search"
-        :items="locations"
-        item-text="display"
-        item-value="id"
-        item-search="name"
-        label="Parent Location"
-      >
-        <template #display="{ item }">
-          <div>
-            <div>
-              {{ item.name }}
-            </div>
-            <div v-if="item.name != item.display" class="text-xs mt-1">{{ item.display }}</div>
-          </div>
-        </template>
-      </FormAutocomplete>
       <div class="modal-action">
         <BaseButton type="submit" :loading="loading"> Create </BaseButton>
       </div>
@@ -44,14 +27,11 @@
     },
   });
 
-  const locations = await useFlatLocations();
-
   const modal = useVModel(props, "modelValue");
   const loading = ref(false);
   const focused = ref(false);
   const form = reactive({
     name: "",
-    search: "",
     description: "",
     parent: null as LocationSummary | null,
   });
@@ -66,7 +46,6 @@
   function reset() {
     form.name = "";
     form.description = "";
-    form.search = "";
     form.parent = null;
     focused.value = false;
     modal.value = false;

frontend/components/Location/Selector.vue

@@ -0,0 +1,49 @@
+<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 }">
+      <div>
+        <div>
+          {{ item.name }}
+        </div>
+        <div v-if="item.name != item.display" class="text-xs mt-1">{{ item.display }}</div>
+      </div>
+    </template>
+  </FormAutocomplete>
+</template>
+
+<script lang="ts" setup>
+  import { LocationSummary } from "~~/lib/api/types/data-contracts";
+
+  type Props = {
+    modelValue?: LocationSummary | null;
+  };
+
+  const props = defineProps<Props>();
+
+  const value = useVModel(props, "modelValue");
+
+  const locations = await useFlatLocations();
+
+  const form = ref({
+    parent: null as LocationSummary | null,
+    search: "",
+  });
+
+  // Whenever parent goes from value to null reset search
+  watch(
+    () => value.value,
+    () => {
+      if (!value.value) {
+        form.value.search = "";
+      }
+    }
+  );
+</script>

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

@@ -358,13 +358,7 @@
             </template>
           </BaseSectionHeader>
           <div class="px-5 mb-6 grid md:grid-cols-2 gap-4">
-            <FormSelect
+            <LocationSelector v-model="item.location" />
-              v-if="item"
-              v-model="item.location"
-              label="Location"
-              :items="locations ?? []"
-              compare-key="id"
-            />
             <FormMultiselect v-model="item.labels" label="Labels" :items="labels ?? []" />
 
             <Autocomplete

frontend/pages/location/[id].vue

@@ -131,7 +131,7 @@
       <form v-if="location" @submit.prevent="update">
         <FormTextField v-model="updateData.name" :autofocus="true" label="Location Name" />
         <FormTextArea v-model="updateData.description" label="Location Description" />
-        <FormAutocomplete v-model="parent" :items="locations" item-text="name" item-value="id" label="Parent" />
+        <LocationSelector v-model="parent" />
         <div class="modal-action">
           <BaseButton type="submit" :loading="updating"> Update </BaseButton>
         </div>