refactor tree view

frontend/components/Location/Tree/Node.vue

@@ -1,18 +1,15 @@
 <script setup lang="ts">
   import { useTreeState } from "./tree-state";
-  import { ItemSummary, TreeItem } from "~~/lib/api/types/data-contracts";
+  import { TreeItem } from "~~/lib/api/types/data-contracts";
 
   type Props = {
-    type?: "location" | "item";
     treeId: string;
     item: TreeItem;
   };
-  const props = withDefaults(defineProps<Props>(), {
+  const props = withDefaults(defineProps<Props>(), {});
-    type: "location",
-  });
 
   const link = computed(() => {
-    return props.type === "location" ? `/location/${props.item.id}` : `/item/${props.item.id}`;
+    return props.item.type === "location" ? `/location/${props.item.id}` : `/item/${props.item.id}`;
   });
 
   const hasChildren = computed(() => {
@@ -34,36 +31,6 @@
     // converts a UUID to a short hash
     return props.item.id.replace(/-/g, "").substring(0, 8);
   });
-
-  const api = useUserApi();
-
-  const hasFetched = ref(false);
-  const items = ref<ItemSummary[]>([]);
-
-  async function fetchItems() {
-    const { data, error } = await api.items.getAll({
-      locations: [props.item.id],
-    });
-
-    if (error) {
-      return;
-    }
-
-    hasFetched.value = true;
-    items.value = data.items;
-
-    console.log("fetched items", items.value);
-  }
-
-  watch(
-    openRef,
-    async value => {
-      if (value && !hasFetched.value && props.type === "location") {
-        await fetchItems();
-      }
-    },
-    { immediate: true }
-  );
 </script>
 
 <template>
@@ -93,7 +60,8 @@
           <Icon name="mdi-chevron-down" class="h-6 w-6 swap-on" />
         </label>
       </div>
-      <Icon name="mdi-map-marker" class="h-4 w-4" />
+      <Icon v-if="item.type === 'location'" name="mdi-map-marker" class="h-4 w-4" />
+      <Icon v-else name="mdi-package-variant" class="h-4 w-4" />
       <NuxtLink class="hover:link text-lg" :to="link" @click.stop>{{ item.name }} </NuxtLink>
     </div>
     <div v-if="openRef" class="ml-4">

frontend/components/Location/Tree/Root.vue

@@ -10,11 +10,9 @@
 </script>
 
 <template>
-  <BaseCard class="p-4">
+  <div class="p-4 border-2 root">
-    <div class="p-4 border-2 root">
+    <LocationTreeNode v-for="item in locs" :key="item.id" :item="item" :tree-id="treeId" />
-      <LocationTreeNode v-for="item in locs" :key="item.id" :item="item" :tree-id="treeId" />
+  </div>
-    </div>
-  </BaseCard>
 </template>
 
 <style></style>

frontend/pages/locations.vue

@@ -12,7 +12,9 @@
   const api = useUserApi();
 
   const { data: tree } = useAsyncData(async () => {
-    const { data, error } = await api.locations.getTree();
+    const { data, error } = await api.locations.getTree({
+      withItems: true,
+    });
 
     if (error) {
       return [];
@@ -32,7 +34,7 @@
     const query = route.currentRoute.value.query;
 
     if (query && query[locationTreeId]) {
-      console.log("setting tree state from query params");
+      console.debug("setting tree state from query params");
       const data = JSON.parse(query[locationTreeId] as string);
 
       for (const key in data) {
@@ -49,12 +51,28 @@
     },
     { deep: true }
   );
+
+  function closeAll() {
+    for (const key in treeState.value) {
+      treeState.value[key] = false;
+    }
+  }
 </script>
 
 <template>
   <BaseContainer class="mb-16">
     <BaseSectionHeader> Locations </BaseSectionHeader>
-
+    <BaseCard>
-    <LocationTreeRoot v-if="tree" :locs="tree" :tree-id="locationTreeId" />
+      <div class="p-4">
+        <div class="flex justify-end mb-2">
+          <div class="btn-group">
+            <button class="btn btn-sm tooltip tooltip-top" data-tip="Collapse Tree" @click="closeAll">
+              <Icon name="mdi-collapse-all-outline" />
+            </button>
+          </div>
+        </div>
+        <LocationTreeRoot v-if="tree" :locs="tree" :tree-id="locationTreeId" />
+      </div>
+    </BaseCard>
   </BaseContainer>
 </template>