From 78fed43f362952569798ec550b5bcb4c96c6197d Mon Sep 17 00:00:00 2001
From: Hayden <64056131+hay-kot@users.noreply.github.com>
Date: Fri, 27 Jan 2023 14:08:27 -0900
Subject: [PATCH] locations tree page

---
 frontend/layouts/default.vue          |  7 ++++
 frontend/lib/api/classes/locations.ts |  6 ++-
 frontend/pages/locations.vue          | 60 +++++++++++++++++++++++++++
 3 files changed, 72 insertions(+), 1 deletion(-)
 create mode 100644 frontend/pages/locations.vue

diff --git a/frontend/layouts/default.vue b/frontend/layouts/default.vue
index 1b6a88c..28e000c 100644
--- a/frontend/layouts/default.vue
+++ b/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,
diff --git a/frontend/lib/api/classes/locations.ts b/frontend/lib/api/classes/locations.ts
index 7559c62..26e8e16 100644
--- a/frontend/lib/api/classes/locations.ts
+++ b/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 });
   }
diff --git a/frontend/pages/locations.vue b/frontend/pages/locations.vue
new file mode 100644
index 0000000..e6a34ef
--- /dev/null
+++ b/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>