feat: rebuild search UI w/ new filters (#269)

frontend/components/Location/Selector.vue

@@ -1,37 +1,43 @@
 <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 }">
+  <FormAutocomplete2 v-if="locations" v-model="value" :items="locations" display="name" label="Parent Location">
+    <template #display="{ item, selected, active }">
       <div>
-        <div>
-          {{ item.name }}
+        <div class="flex w-full">
+          {{ cast(item.value).name }}
+          <span
+            v-if="selected"
+            :class="['absolute inset-y-0 right-0 flex  items-center pr-4', active ? 'text-white' : 'text-primary']"
+          >
+            <Icon name="mdi-check" class="h-5 w-5" aria-hidden="true" />
+          </span>
+        </div>
+        <div v-if="cast(item.value).name != cast(item.value).treeString" class="text-xs mt-1">
+          {{ cast(item.value).treeString }}
         </div>
-        <div v-if="item.name != item.display" class="text-xs mt-1">{{ item.display }}</div>
       </div>
     </template>
-  </FormAutocomplete>
+  </FormAutocomplete2>
 </template>
 
 <script lang="ts" setup>
+  import { FlatTreeItem, useFlatLocations } from "~~/composables/use-location-helpers";
   import { LocationSummary } from "~~/lib/api/types/data-contracts";
 
   type Props = {
     modelValue?: LocationSummary | null;
   };
 
-  const props = defineProps<Props>();
+  // Cast the type of the item to a FlatTreeItem so we can get type "safety" in the template
+  // Note that this does not actually change the type of the item, it just tells the compiler
+  // that the type is FlatTreeItem. We must keep this in sync with the type of the items
+  function cast(value: any): FlatTreeItem {
+    return value as FlatTreeItem;
+  }
 
+  const props = defineProps<Props>();
   const value = useVModel(props, "modelValue");
 
   const locations = await useFlatLocations();
-
   const form = ref({
     parent: null as LocationSummary | null,
     search: "",