feat: item-attachments CRUD (#22)

* change /content/ -> /homebox/

* add cache to code generators

* update env variables to set data storage

* update env variables

* set env variables in prod container

* implement attachment post route (WIP)

* get attachment endpoint

* attachment download

* implement string utilities lib

* implement generic drop zone

* use explicit truncate

* remove clean dir

* drop strings composable for lib

* update item types and add attachments

* add attachment API

* implement service context

* consolidate API code

* implement editing attachments

* implement upload limit configuration

* improve error handling

* add docs for max upload size

* fix test cases

frontend/components/Form/Select.vue

@@ -25,7 +25,7 @@
     },
     modelValue: {
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      type: Object as any,
+      type: [Object, String, Boolean] as any,
       default: null,
     },
     items: {
@@ -37,18 +37,47 @@
       type: String,
       default: "name",
     },
+    value: {
+      type: String,
+      default: null,
+      required: false,
+    },
     selectFirst: {
       type: Boolean,
       default: false,
     },
   });
 
-  watchOnce(
-    () => props.items,
-    () => {
-      if (props.selectFirst && props.items.length > 0) {
+  function syncSelect() {
+    if (!props.modelValue) {
+      if (props.selectFirst) {
         selectedIdx.value = 0;
       }
+      return;
+    }
+    // Check if we're already synced
+    if (props.value) {
+      if (props.modelValue[props.value] === props.items[selectedIdx.value][props.value]) {
+        return;
+      }
+    } else if (props.modelValue === props.items[selectedIdx.value]) {
+      return;
+    }
+
+    const idx = props.items.findIndex(item => {
+      if (props.value) {
+        return item[props.value] === props.modelValue;
+      }
+      return item === props.modelValue;
+    });
+
+    selectedIdx.value = idx;
+  }
+
+  watch(
+    () => props.modelValue,
+    () => {
+      syncSelect();
     }
   );
 
@@ -56,6 +85,10 @@
   watch(
     () => selectedIdx.value,
     () => {
+      if (props.value) {
+        emit("update:modelValue", props.items[selectedIdx.value][props.value]);
+        return;
+      }
       emit("update:modelValue", props.items[selectedIdx.value]);
     }
   );

frontend/components/Item/AttachmentsList.vue

@@ -0,0 +1,56 @@
+<template>
+  <ul role="list" class="divide-y divide-gray-400 rounded-md border border-gray-400">
+    <li
+      v-for="attachment in attachments"
+      :key="attachment.id"
+      class="flex items-center justify-between py-3 pl-3 pr-4 text-sm"
+    >
+      <div class="flex w-0 flex-1 items-center">
+        <Icon name="mdi-paperclip" class="h-5 w-5 flex-shrink-0 text-gray-400" aria-hidden="true" />
+        <span class="ml-2 w-0 flex-1 truncate"> {{ attachment.document.title }}</span>
+      </div>
+      <div class="ml-4 flex-shrink-0">
+        <button class="font-medium" @click="getAttachmentUrl(attachment)">Download</button>
+      </div>
+    </li>
+  </ul>
+</template>
+
+<script setup lang="ts">
+  import { ItemAttachment } from "~~/lib/api/types/data-contracts";
+
+  const props = defineProps({
+    attachments: {
+      type: Object as () => ItemAttachment[],
+      required: true,
+    },
+    itemId: {
+      type: String,
+      required: true,
+    },
+  });
+
+  const api = useUserApi();
+  const toast = useNotifier();
+  async function getAttachmentUrl(attachment: ItemAttachment) {
+    const url = await api.items.getAttachmentUrl(props.itemId, attachment.id);
+
+    if (!url) {
+      toast.error("Failed to get attachment url");
+      return;
+    }
+
+    if (!document) {
+      window.open(url, "_blank");
+      return;
+    }
+
+    const link = document.createElement("a");
+    link.href = url;
+    link.target = "_blank";
+    link.setAttribute("download", attachment.document.title);
+    link.click();
+  }
+</script>
+
+<style scoped></style>

frontend/components/Item/Card.vue

@@ -23,6 +23,7 @@
 
 <script setup lang="ts">
   import { ItemOut, ItemSummary } from "~~/lib/api/types/data-contracts";
+  import { truncate } from "~~/lib/strings";
 
   const props = defineProps({
     item: {

frontend/components/global/DropZone.vue

@@ -0,0 +1,31 @@
+<template>
+  <div
+    ref="el"
+    class="h-24 w-full border-2 border-primary border-dashed grid place-content-center"
+    :class="isOverDropZone ? 'bg-primary bg-opacity-10' : ''"
+  >
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+  defineProps({
+    modelValue: {
+      type: Boolean,
+      required: false,
+    },
+  });
+
+  const emit = defineEmits(["update:modelValue", "drop"]);
+
+  const el = ref<HTMLDivElement>(null);
+  const { isOverDropZone } = useDropZone(el, files => {
+    emit("drop", files);
+  });
+
+  watch(isOverDropZone, () => {
+    emit("update:modelValue", isOverDropZone.value);
+  });
+</script>
+
+<style scoped></style>