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/components/Location/CreateModal.vue

@@ -10,6 +10,7 @@
         label="Location Name"
       />
       <FormTextArea v-model="form.description" label="Location Description" />
+      <LocationSelector v-model="form.parent" />
       <div class="modal-action">
         <BaseButton type="submit" :loading="loading"> Create </BaseButton>
       </div>
@@ -18,6 +19,7 @@
 </template>
 
 <script setup lang="ts">
+  import { LocationSummary } from "~~/lib/api/types/data-contracts";
   const props = defineProps({
     modelValue: {
       type: Boolean,
@@ -31,6 +33,7 @@
   const form = reactive({
     name: "",
     description: "",
+    parent: null as LocationSummary | null,
   });
 
   whenever(
@@ -43,6 +46,7 @@
   function reset() {
     form.name = "";
     form.description = "";
+    form.parent = null;
     focused.value = false;
     modal.value = false;
     loading.value = false;
@@ -54,7 +58,11 @@
   async function create() {
     loading.value = true;
 
-    const { data, error } = await api.locations.create(form);
+    const { data, error } = await api.locations.create({
+      name: form.name,
+      description: form.description,
+      parentId: form.parent ? form.parent.id : null,
+    });
 
     if (error) {
       toast.error("Couldn't create location");

frontend/components/Location/Selector.vue

@@ -0,0 +1,49 @@
+<template>
+  <FormAutocomplete
+    v-model="value"
+    v-model:search="form.search"
+    :items="locations"
+    item-text="display"
+    item-value="id"
+    item-search="name"
+    label="Parent Location"
+  >
+    <template #display="{ item }">
+      <div>
+        <div>
+          {{ item.name }}
+        </div>
+        <div v-if="item.name != item.display" class="text-xs mt-1">{{ item.display }}</div>
+      </div>
+    </template>
+  </FormAutocomplete>
+</template>
+
+<script lang="ts" setup>
+  import { LocationSummary } from "~~/lib/api/types/data-contracts";
+
+  type Props = {
+    modelValue?: LocationSummary | null;
+  };
+
+  const props = defineProps<Props>();
+
+  const value = useVModel(props, "modelValue");
+
+  const locations = await useFlatLocations();
+
+  const form = ref({
+    parent: null as LocationSummary | null,
+    search: "",
+  });
+
+  // Whenever parent goes from value to null reset search
+  watch(
+    () => value.value,
+    () => {
+      if (!value.value) {
+        form.value.search = "";
+      }
+    }
+  );
+</script>

frontend/components/Location/Tree/Node.vue

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+  import { useTreeState } from "./tree-state";
+  import { TreeItem } from "~~/lib/api/types/data-contracts";
+
+  type Props = {
+    treeId: string;
+    item: TreeItem;
+  };
+  const props = withDefaults(defineProps<Props>(), {});
+
+  const link = computed(() => {
+    return props.item.type === "location" ? `/location/${props.item.id}` : `/item/${props.item.id}`;
+  });
+
+  const hasChildren = computed(() => {
+    return props.item.children.length > 0;
+  });
+
+  const state = useTreeState(props.treeId);
+
+  const openRef = computed({
+    get() {
+      return state.value[nodeHash.value] ?? false;
+    },
+    set(value) {
+      state.value[nodeHash.value] = value;
+    },
+  });
+
+  const nodeHash = computed(() => {
+    // converts a UUID to a short hash
+    return props.item.id.replace(/-/g, "").substring(0, 8);
+  });
+</script>
+
+<template>
+  <div>
+    <div
+      class="node flex items-center gap-1 rounded p-1"
+      :class="{
+        'cursor-pointer hover:bg-base-200': hasChildren,
+      }"
+      @click="openRef = !openRef"
+    >
+      <div
+        class="p-1/2 rounded mr-1 flex items-center justify-center"
+        :class="{
+          'hover:bg-base-200': hasChildren,
+        }"
+      >
+        <div v-if="!hasChildren" class="h-6 w-6"></div>
+        <label
+          v-else
+          class="swap swap-rotate"
+          :class="{
+            'swap-active': openRef,
+          }"
+        >
+          <Icon name="mdi-chevron-right" class="h-6 w-6 swap-off" />
+          <Icon name="mdi-chevron-down" class="h-6 w-6 swap-on" />
+        </label>
+      </div>
+      <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">
+      <LocationTreeNode v-for="child in item.children" :key="child.id" :item="child" :tree-id="treeId" />
+    </div>
+  </div>
+</template>
+
+<style scoped></style>

frontend/components/Location/Tree/Root.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+  import { TreeItem } from "~~/lib/api/types/data-contracts";
+
+  type Props = {
+    locs: TreeItem[];
+    treeId: string;
+  };
+
+  defineProps<Props>();
+</script>
+
+<template>
+  <div class="p-4 border-2 root">
+    <LocationTreeNode v-for="item in locs" :key="item.id" :item="item" :tree-id="treeId" />
+  </div>
+</template>
+
+<style></style>

frontend/components/Location/Tree/tree-state.ts

@@ -0,0 +1,17 @@
+import type { Ref } from "vue";
+
+type TreeState = Record<string, boolean>;
+
+const store: Record<string, Ref<TreeState>> = {};
+
+export function newTreeKey(): string {
+  return Math.random().toString(36).substring(2);
+}
+
+export function useTreeState(key: string): Ref<TreeState> {
+  if (!store[key]) {
+    store[key] = ref({});
+  }
+
+  return store[key];
+}