wip: location selector improvements

frontend/components/Form/Autocomplete.vue

@@ -6,7 +6,7 @@
     <div class="dropdown dropdown-top sm:dropdown-end">
       <div class="relative">
         <input
-          v-model="isearch"
+          v-model="internalSearch"
           tabindex="0"
           class="input w-full items-center flex flex-wrap border border-gray-400 rounded-lg"
           @keyup.enter="selectFirst"
@@ -26,9 +26,11 @@
         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>
+          <div type="button" @click="select(obj)">
+            <slot name="display" v-bind="{ item: obj }">
+              {{ usingObjects ? obj[itemText] : obj }}
+            </slot>
+          </div>
         </li>
         <li class="hidden first:flex">
           <button disabled>
@@ -52,6 +54,7 @@
     modelValue: string | ItemsObject;
     items: ItemsObject[] | string[];
     itemText?: keyof ItemsObject;
+    itemSearch?: keyof ItemsObject | null;
     itemValue?: keyof ItemsObject;
     search?: string;
     noResultsText?: string;
@@ -63,21 +66,34 @@
     modelValue: "",
     items: () => [],
     itemText: "text",
-    itemValue: "value",
     search: "",
+    itemSearch: null,
+    itemValue: "value",
     noResultsText: "No Results Found",
   });
 
+  const searchKey = computed(() => props.itemSearch || props.itemText);
+
   function clear() {
     select(value.value);
   }
 
-  const isearch = ref("");
-  watch(isearch, () => {
-    internalSearch.value = isearch.value;
-  });
+  const internalSearch = ref("");
+
+  watch(
+    () => props.search,
+    val => {
+      internalSearch.value = val;
+    }
+  );
+
+  watch(
+    () => internalSearch.value,
+    val => {
+      emit("update:search", val);
+    }
+  );
 
-  const internalSearch = useVModel(props, "search", emit);
   const value = useVModel(props, "modelValue", emit);
 
   const usingObjects = computed(() => {
@@ -102,9 +118,9 @@
     () => {
       if (value.value) {
         if (typeof value.value === "string") {
-          isearch.value = value.value;
+          internalSearch.value = value.value;
         } else {
-          isearch.value = value.value[props.itemText] as string;
+          internalSearch.value = value.value[searchKey.value] as string;
         }
       }
     },
@@ -131,16 +147,16 @@
   }
 
   const filtered = computed(() => {
-    if (!isearch.value || isearch.value === "") {
+    if (!internalSearch.value || internalSearch.value === "") {
       return props.items;
     }
 
     if (isStrings(props.items)) {
-      return props.items.filter(item => item.toLowerCase().includes(isearch.value.toLowerCase()));
+      return props.items.filter(item => item.toLowerCase().includes(internalSearch.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());
+        if (searchKey.value && searchKey.value in item) {
+          return (item[searchKey.value] as string).toLowerCase().includes(internalSearch.value.toLowerCase());
         }
         return false;
       });

frontend/components/Location/CreateModal.vue

@@ -12,11 +12,22 @@
       <FormTextArea v-model="form.description" label="Location Description" />
       <FormAutocomplete
         v-model="form.parent"
+        v-model:search="form.search"
         :items="locations"
-        item-text="name"
+        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>
@@ -26,7 +37,6 @@
 
 <script setup lang="ts">
   import { LocationSummary } from "~~/lib/api/types/data-contracts";
-  import { useLocationStore } from "~~/stores/locations";
   const props = defineProps({
     modelValue: {
       type: Boolean,
@@ -34,14 +44,14 @@
     },
   });
 
-  const locationStore = useLocationStore();
+  const locations = await useFlatLocations();
 
-  const locations = computed(() => locationStore.allLocations);
   const modal = useVModel(props, "modelValue");
   const loading = ref(false);
   const focused = ref(false);
   const form = reactive({
     name: "",
+    search: "",
     description: "",
     parent: null as LocationSummary | null,
   });
@@ -56,6 +66,7 @@
   function reset() {
     form.name = "";
     form.description = "";
+    form.search = "";
     form.parent = null;
     focused.value = false;
     modal.value = false;

frontend/composables/use-location-helpers.ts

@@ -0,0 +1,44 @@
+import { Ref } from "vue";
+import { TreeItem } from "~~/lib/api/types/data-contracts";
+
+export interface FlatTreeItem {
+  id: string;
+  name: string;
+  display: string;
+}
+
+export function flatTree(tree: TreeItem[]): Ref<FlatTreeItem[]> {
+  const v = ref<FlatTreeItem[]>([]);
+
+  // turns the nested items into a flat items array where
+  // the display is a string of the tree hierarchy separated by breadcrumbs
+
+  function flatten(items: TreeItem[], display: string) {
+    for (const item of items) {
+      v.value.push({
+        id: item.id,
+        name: item.name,
+        display: display + item.name,
+      });
+      if (item.children) {
+        flatten(item.children, display + item.name + " > ");
+      }
+    }
+  }
+
+  flatten(tree, "");
+
+  return v;
+}
+
+export async function useFlatLocations(): Promise<Ref<FlatTreeItem[]>> {
+  const api = useUserApi();
+
+  const locations = await api.locations.getTree();
+
+  if (!locations) {
+    return ref([]);
+  }
+
+  return flatTree(locations.data.items);
+}

frontend/lib/api/classes/locations.ts

@@ -6,13 +6,17 @@ export type LocationsQuery = {
   filterChildren: boolean;
 };
 
+export type TreeQuery = {
+  withItems: boolean;
+};
+
 export class LocationsApi extends BaseAPI {
   getAll(q: LocationsQuery = { filterChildren: false }) {
     return this.http.get<Results<LocationOutCount>>({ url: route("/locations", q) });
   }
 
-  getTree() {
-    return this.http.get<Results<TreeItem>>({ url: route("/locations/tree") });
+  getTree(tq = { withItems: false }) {
+    return this.http.get<Results<TreeItem>>({ url: route("/locations/tree", tq) });
   }
 
   create(body: LocationCreate) {

frontend/pages/location/[id].vue

@@ -179,12 +179,9 @@
         <DetailsSection :details="details" />
       </BaseCard>
 
-      <section v-if="location && location.items.length > 0">
-        <BaseSectionHeader class="mb-5"> Items </BaseSectionHeader>
-        <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
-          <ItemCard v-for="item in location.items" :key="item.id" :item="item" />
-        </div>
-      </section>
+      <template v-if="location && location.items.length > 0">
+        <ItemViewSelectable :items="location.items" />
+      </template>
 
       <section v-if="location && location.children.length > 0">
         <BaseSectionHeader class="mb-5"> Child Locations </BaseSectionHeader>