added the ability to add a photo in the item creation modal (#173)

* added the ability to add a photo in the item creation modal

* fixed problem with create button being hidden on tiny screens

* fix: ui, translations

---------

Co-authored-by: Matt Kilgore <matthew@kilgore.dev>

frontend/components/Item/CreateModal.vue

@@ -6,8 +6,14 @@
       <FormTextField ref="nameInput" v-model="form.name" :trigger-focus="focused" :autofocus="true" label="Item Name" />
       <FormTextArea v-model="form.description" label="Item Description" />
       <FormMultiselect v-model="form.labels" label="Labels" :items="labels ?? []" />
+
+
       <div class="modal-action">
         <div class="flex justify-center">
+          <div>
+            <label for="photo" class="btn">{{ $t("components.item.create_modal.photo_button") }}</label>
+            <input type="file" accept="image/*" @change="previewImage" style="visibility:hidden;" id="photo">
+          </div>
           <BaseButton class="rounded-r-none" :loading="loading" type="submit">
             <template #icon>
               <MdiPackageVariant class="swap-off h-5 w-5" />
@@ -27,6 +33,17 @@
           </div>
         </div>
       </div>
+
+
+      <!-- photo preview area is AFTER the create button, to avoid pushing the button below the screen on small displays -->
+      <div class="border-t border-gray-300 p-4">
+            <template v-if="form.preview">
+              <p class="mb-0">file name: {{ form.photo.name }}</p>
+              <img :src="form.preview" class="h-[100px] w-full object-cover rounded-t shadow-sm border-gray-300" />
+            </template>
+      </div>
+
+
     </form>
     <p class="text-sm text-center mt-4">
       use <kbd class="kbd kbd-xs">Shift</kbd> + <kbd class="kbd kbd-xs"> Enter </kbd> to create and add another
@@ -41,6 +58,7 @@
   import MdiPackageVariant from "~icons/mdi/package-variant";
   import MdiPackageVariantClosed from "~icons/mdi/package-variant-closed";
   import MdiChevronDown from "~icons/mdi/chevron-down";
+  import { AttachmentTypes } from "~~/lib/api/types/non-generated";
 
   const props = defineProps({
     modelValue: {
@@ -85,10 +103,40 @@
     description: "",
     color: "", // Future!
     labels: [] as LabelOut[],
+    preview: null,
+    photo: null
   });
 
   const { shift } = useMagicKeys();
 
+  function previewImage(event) {
+    var input = event.target;
+    if (input.files) {
+      var reader = new FileReader();
+      reader.onload = (e) => {
+        form.preview = e.target.result;
+      }
+      form.photo=input.files[0];
+      reader.readAsDataURL(input.files[0]);
+    }
+  }
+
+
+  function uploadImage(e: Event) {
+    const files = (e.target as HTMLInputElement).files;
+    if (!files || !files.item(0)) {
+      return;
+    }
+
+    const first = files.item(0);
+    if (!first) {
+      return;
+    }
+
+    uploadAttachment([first], null);
+  }
+
+
   whenever(
     () => modal.value,
     () => {
@@ -133,10 +181,25 @@
 
     toast.success("Item created");
 
+    // if the photo was provided, upload it
+    if(form.photo){
+      const { data2, error } = await api.items.attachments.add(data.id, form.photo, form.photo.name, AttachmentTypes.Photo);
+
+      if (error) {
+        toast.error("Failed to upload Photo");
+        return;
+      }
+
+      toast.success("Photo uploaded");
+    }
+
+
     // Reset
     form.name = "";
     form.description = "";
     form.color = "";
+    form.preview = null;
+    form.photo = null;
     focused.value = false;
     loading.value = false;
 

frontend/locales/en.json

@@ -18,7 +18,8 @@
     },
     "item": {
       "create_modal": {
-        "title": "Create Item"
+        "title": "Create Item",
+        "photo_button": "Photo \uD83D\uDCF7"
       },
       "view": {
         "selectable": {