locations tree page

frontend/layouts/default.vue

@@ -164,6 +164,13 @@
       name: "Items",
       to: "/items",
     },
+    {
+      icon: "mdi-map-marker",
+      id: 4,
+      active: computed(() => route.path === "/locations"),
+      name: "Locations",
+      to: "/locations",
+    },
     {
       icon: "mdi-database",
       id: 2,

frontend/lib/api/classes/locations.ts

@@ -1,5 +1,5 @@
 import { BaseAPI, route } from "../base";
-import { LocationOutCount, LocationCreate, LocationOut, LocationUpdate } from "../types/data-contracts";
+import { LocationOutCount, LocationCreate, LocationOut, LocationUpdate, TreeItem } from "../types/data-contracts";
 import { Results } from "../types/non-generated";
 
 export type LocationsQuery = {
@@ -11,6 +11,10 @@ export class LocationsApi extends BaseAPI {
     return this.http.get<Results<LocationOutCount>>({ url: route("/locations", q) });
   }
 
+  getTree() {
+    return this.http.get<Results<TreeItem>>({ url: route("/locations/tree") });
+  }
+
   create(body: LocationCreate) {
     return this.http.post<LocationCreate, LocationOut>({ url: route("/locations"), body });
   }

frontend/pages/locations.vue

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+  import { useTreeState } from "~~/components/Location/Tree/tree-state";
+
+  definePageMeta({
+    middleware: ["auth"],
+  });
+
+  useHead({
+    title: "Homebox | Items",
+  });
+
+  const api = useUserApi();
+
+  const { data: tree } = useAsyncData(async () => {
+    const { data, error } = await api.locations.getTree();
+
+    if (error) {
+      return [];
+    }
+
+    return data.items;
+  });
+
+  const locationTreeId = "locationTree";
+
+  const treeState = useTreeState(locationTreeId);
+
+  const route = useRouter();
+
+  onMounted(() => {
+    // set tree state from query params
+    const query = route.currentRoute.value.query;
+
+    if (query && query[locationTreeId]) {
+      console.log("setting tree state from query params");
+      const data = JSON.parse(query[locationTreeId] as string);
+
+      for (const key in data) {
+        treeState.value[key] = data[key];
+      }
+    }
+  });
+
+  watch(
+    treeState,
+    () => {
+      // Push the current state to the URL
+      route.replace({ query: { [locationTreeId]: JSON.stringify(treeState.value) } });
+    },
+    { deep: true }
+  );
+</script>
+
+<template>
+  <BaseContainer class="mb-16">
+    <BaseSectionHeader> Locations </BaseSectionHeader>
+
+    <LocationTreeRoot v-if="tree" :locs="tree" :tree-id="locationTreeId" />
+  </BaseContainer>
+</template>