changes

app/components/imports/Imports.vue

@@ -1,38 +1,8 @@
 <script setup>
+import AddProductForm from "@/components/imports/AddProductForm.vue";
+import AddProductVariantForm from "@/components/imports/AddProductVariantForm.vue";
 import FileUpload from "@/components/media/FileUpload.vue";
-
-const { $getdata } = useNuxtApp();
-const files = ref([]);
-
-onMounted(async () => {
-  const filesFetched = await $getdata("file", {
-    id__gte: 12473,
-    id__lte: 12475,
-  });
-
-  files.value = filesFetched;
-});
-
-async function onClick(url) {
-  const blob = await $fetch("/api/hello", {
-    query: { url },
-    responseType: "blob",
-  });
-  const urlDownload = window.URL.createObjectURL(blob);
-  const link = document.createElement("a");
-  link.href = urlDownload;
-  link.setAttribute("download", "aName");
-  link.click();
-  link.remove();
-}
-
-const buildUrl = (f) => `https://api.utopia.com.vn/download?name=${f.file}&type=file`;
-
-function onFiles(files) {
-  console.log("files", toRaw(files));
-}
 </script>
-
 <template>
   <FileUpload
     :type="['file']"
@@ -47,20 +17,6 @@ function onFiles(files) {
     </template>
     <span class="font-medium">Import</span>
   </FileUpload>
-  <div class="buttons">
-    <button
-      class="button"
-      v-for="(url, i) in files.map(buildUrl)"
-      :key="i"
-      @click="onClick(url)"
-    >
-      <span class="icon">
-        <Icon
-          name="material-symbols:download-rounded"
-          :size="18"
-        />
-      </span>
-      <span>{{ files[i].name }}</span>
-    </button>
-  </div>
+  <AddProductVariantForm />
+  <AddProductForm />
 </template>