update location search when locations are mutated

frontend/components/Form/Autocomplete2.vue

@@ -127,27 +127,31 @@
     return "";
   }
 
-  const index = lunr(function () {
-    this.ref("id");
-    this.field("display");
+  function lunrFactory() {
+    return lunr(function () {
+      this.ref("id");
+      this.field("display");
 
-    for (let i = 0; i < props.items.length; i++) {
-      const item = props.items[i];
-      const display = extractDisplay(item);
-      this.add({ id: i, display });
-    }
-  });
+      for (let i = 0; i < props.items.length; i++) {
+        const item = props.items[i];
+        const display = extractDisplay(item);
+        this.add({ id: i, display });
+      }
+    });
+  }
+
+  const index = ref<ReturnType<typeof lunrFactory>>(lunrFactory());
 
   watchEffect(() => {
-    if (props.modelValue) {
-      search.value = extractDisplay(props.modelValue);
+    if (props.items) {
+      index.value = lunrFactory();
     }
   });
 
   const computedItems = computed<ComboItem[]>(() => {
     const list: ComboItem[] = [];
 
-    const matches = index.search("*" + search.value + "*");
+    const matches = index.value.search("*" + search.value + "*");
 
     for (let i = 0; i < matches.length; i++) {
       const match = matches[i];

frontend/components/Location/Selector.vue

@@ -37,7 +37,7 @@
   const props = defineProps<Props>();
   const value = useVModel(props, "modelValue");
 
-  const locations = await useFlatLocations();
+  const locations = useFlatLocations();
   const form = ref({
     parent: null as LocationSummary | null,
     search: "",

frontend/composables/use-location-helpers.ts

@@ -7,8 +7,8 @@ export interface FlatTreeItem {
   treeString: string;
 }
 
-export function flatTree(tree: TreeItem[]): Ref<FlatTreeItem[]> {
-  const v = ref<FlatTreeItem[]>([]);
+function flatTree(tree: TreeItem[]): FlatTreeItem[] {
+  const v = [] as FlatTreeItem[];
 
   // turns the nested items into a flat items array where
   // the display is a string of the tree hierarchy separated by breadcrumbs
@@ -19,7 +19,7 @@ export function flatTree(tree: TreeItem[]): Ref<FlatTreeItem[]> {
     }
 
     for (const item of items) {
-      v.value.push({
+      v.push({
         id: item.id,
         name: item.name,
         treeString: display + item.name,
@@ -35,14 +35,18 @@ export function flatTree(tree: TreeItem[]): Ref<FlatTreeItem[]> {
   return v;
 }
 
-export async function useFlatLocations(): Promise<Ref<FlatTreeItem[]>> {
-  const api = useUserApi();
+export function useFlatLocations(): Ref<FlatTreeItem[]> {
+  const locations = useLocationStore();
 
-  const locations = await api.locations.getTree();
-
-  if (!locations) {
-    return ref([]);
+  if (locations.tree === null) {
+    locations.refreshTree();
   }
 
-  return flatTree(locations.data);
+  return computed(() => {
+    if (locations.tree === null) {
+      return [];
+    }
+
+    return flatTree(locations.tree);
+  });
 }

frontend/layouts/default.vue

@@ -185,6 +185,7 @@
   onServerEvent(ServerEvent.LocationMutation, () => {
     locationStore.refreshChildren();
     locationStore.refreshParents();
+    locationStore.refreshTree();
   });
 
   onServerEvent(ServerEvent.ItemMutation, () => {

frontend/stores/locations.ts

@@ -1,12 +1,13 @@
 import { defineStore } from "pinia";
 import { LocationsApi } from "~~/lib/api/classes/locations";
-import { LocationOutCount } from "~~/lib/api/types/data-contracts";
+import { LocationOutCount, TreeItem } from "~~/lib/api/types/data-contracts";
 
 export const useLocationStore = defineStore("locations", {
   state: () => ({
     parents: null as LocationOutCount[] | null,
     Locations: null as LocationOutCount[] | null,
     client: useUserApi(),
+    tree: null as TreeItem[] | null,
   }),
   getters: {
     /**
@@ -60,5 +61,14 @@ export const useLocationStore = defineStore("locations", {
       this.Locations = result.data;
       return result;
     },
+    async refreshTree(): ReturnType<LocationsApi["getTree"]> {
+      const result = await this.client.locations.getTree();
+      if (result.error) {
+        return result;
+      }
+
+      this.tree = result.data;
+      return result;
+    },
   },
 });