feat: locations tree viewer (#248)

* location tree API

* test fixes

* initial tree location elements

* locations tree page

* update meta-data

* code-gen

* store item display preferences

* introduce basic table/card view elements

* codegen

* set parent location during location creation

* add item support for tree query

* refactor tree view

* wip: location selector improvements

* type gen

* rename items -> search

* remove various log statements

* fix markdown rendering for description

* update location selectors

* fix tests

* fix currency tests

* formatting

frontend/pages/item/[id]/index.vue

@@ -406,9 +406,7 @@
           </ul>
         </div>
         <template #description>
-          <p class="text-lg">
-            {{ item ? item.description : "" }}
-          </p>
+          <Markdown :source="item.description"> </Markdown>
           <div class="flex flex-wrap gap-2 mt-3">
             <NuxtLink ref="badge" class="badge p-3" :to="`/location/${item.location.id}`">
               <Icon name="heroicons-map-pin" class="mr-2 swap-on"></Icon>

frontend/pages/item/[id]/index/edit.vue

@@ -358,13 +358,7 @@
             </template>
           </BaseSectionHeader>
           <div class="px-5 mb-6 grid md:grid-cols-2 gap-4">
-            <FormSelect
-              v-if="item"
-              v-model="item.location"
-              label="Location"
-              :items="locations ?? []"
-              compare-key="id"
-            />
+            <LocationSelector v-model="item.location" />
             <FormMultiselect v-model="item.labels" label="Labels" :items="labels ?? []" />
 
             <Autocomplete

frontend/pages/item/[id]/index/log.vue

@@ -114,8 +114,6 @@
     entry.date = new Date(e.date);
     entry.description = e.description;
     entry.cost = e.cost;
-
-    console.log(e);
   }
 
   async function editEntry() {

frontend/pages/items.vue

@@ -9,7 +9,7 @@
   });
 
   useHead({
-    title: "Homebox | Home",
+    title: "Homebox | Items",
   });
 
   const searchLocked = ref(false);

frontend/pages/location/[id].vue

@@ -131,7 +131,7 @@
       <form v-if="location" @submit.prevent="update">
         <FormTextField v-model="updateData.name" :autofocus="true" label="Location Name" />
         <FormTextArea v-model="updateData.description" label="Location Description" />
-        <FormAutocomplete v-model="parent" :items="locations" item-text="name" item-value="id" label="Parent" />
+        <LocationSelector v-model="parent" />
         <div class="modal-action">
           <BaseButton type="submit" :loading="updating"> Update </BaseButton>
         </div>
@@ -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>

frontend/pages/locations.vue

@@ -0,0 +1,78 @@
+<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({
+      withItems: true,
+    });
+
+    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.debug("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 }
+  );
+
+  function closeAll() {
+    for (const key in treeState.value) {
+      treeState.value[key] = false;
+    }
+  }
+</script>
+
+<template>
+  <BaseContainer class="mb-16">
+    <BaseSectionHeader> Locations </BaseSectionHeader>
+    <BaseCard>
+      <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>