changes

app/components/imports/AddProductVariantForm.vue

@@ -1,5 +1,6 @@
 <script setup>
 import InputNumber from "@/components/common/InputNumber.vue";
+import FileUpload from "@/components/media/FileUpload.vue";
 import { omitBy } from "es-toolkit";
 
 const props = defineProps({
@@ -8,7 +9,7 @@ const props = defineProps({
 
 const emit = defineEmits(["created"]);
 
-const { $empty, $insertapi } = useNuxtApp();
+const { $buildFileUrl, $empty, $insertapi } = useNuxtApp();
 const isPending = ref(false);
 const body = ref({
   product: props.productId,
@@ -16,13 +17,16 @@ const body = ref({
   internal_storage: null,
   ram: null,
   color: null,
+  image: null,
   note: "",
 });
 
+const uploadedImage = ref();
+
 watch(
   () => props.productId,
   (newVal) => {
-    body.value.product = props.productId;
+    body.value.product = newVal;
   },
 );
 
@@ -34,8 +38,22 @@ function selected(field, data) {
   }
 }
 
+function onFiles(files) {
+  const file = files[0];
+  uploadedImage.value = file;
+}
+
 async function createProductVariant() {
   isPending.value = true;
+
+  // 1. insert row to Product_Image, get back id
+  const productImage = await $insertapi("Product_Image", {
+    name: uploadedImage.value.name,
+    path: $buildFileUrl(uploadedImage.value.file),
+  });
+  body.value.image = productImage.id;
+
+  // 2. upload to Product_Variant table
   const trimmedBody = omitBy(body.value, $empty);
   const res = await $insertapi("Product_Variant", trimmedBody);
   isPending.value = false;
@@ -132,7 +150,7 @@ async function createProductVariant() {
             />
           </div>
         </div>
-        <div class="cell is-col-span-12">
+        <div class="cell is-col-span-6">
           <div class="field">
             <label class="label">Ghi chú</label>
             <textarea
@@ -140,10 +158,65 @@ async function createProductVariant() {
               class="textarea"
               name="note"
               placeholder="Ghi chú"
-              rows="1"
+              rows="5"
             ></textarea>
           </div>
         </div>
+        <div class="cell is-col-span-6">
+          <div class="field">
+            <label class="label">Hình ảnh</label>
+            <div class="control is-flex is-gap-1">
+              <div>
+                <div
+                  v-if="uploadedImage"
+                  class="relative"
+                  style="border: 1px solid var(--bulma-grey-50)"
+                >
+                  <figure class="image is-128x128">
+                    <img :src="$buildFileUrl(uploadedImage.file)" />
+                  </figure>
+                  <button
+                    type="button"
+                    class="button is-small is-danger is-light absolute"
+                    :style="{ top: '5px', right: '5px' }"
+                    @click="uploadedImage = undefined"
+                  >
+                    <span class="icon">
+                      <Icon
+                        name="material-symbols:delete-outline-rounded"
+                        :size="20"
+                      />
+                    </span>
+                  </button>
+                </div>
+                <div
+                  v-else
+                  class="w-36 h-36 rounded-md is-flex is-align-items-center is-justify-content-center"
+                  style="border: 1px solid var(--bulma-grey-80)"
+                >
+                  <Icon
+                    name="material-symbols:add-photo-alternate-outline-rounded"
+                    :size="40"
+                    class="has-text-grey-light"
+                  />
+                </div>
+              </div>
+              <FileUpload
+                :type="['image']"
+                :multiple="false"
+                @files="onFiles"
+              >
+                <template #icon>
+                  <Icon
+                    name="material-symbols:add-photo-alternate-outline-rounded"
+                    :size="20"
+                  />
+                </template>
+                <span class="font-medium">Chọn</span>
+              </FileUpload>
+            </div>
+          </div>
+        </div>
         <div class="cell is-col-span-12">
           <button
             :class="['button is-primary', { 'is-loading': isPending }]"