Photos view migration

src/pages/Admin/PhotosView.vue

@@ -3,9 +3,9 @@ import { useI18n } from 'vue-i18n';
 import { ref, onMounted, inject, reactive, computed } from 'vue';
 
 import VnSelect from 'src/components/common/VnSelect.vue';
-import VnForm from 'src/components/common/VnForm.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import useNotify from 'src/composables/useNotify.js';
+import FormModel from 'src/components/common/FormModel.vue';
 
 const api = inject('api');
 const { t } = useI18n();
@@ -51,10 +51,6 @@ const getImageCollections = async () => {
     }
 };
 
-const buildUploadUrl = (id, collection) => {
-    return `images/upload?id=${encodeURIComponent(id)}&collection=${encodeURIComponent(collection)}`;
-};
-
 const onSubmit = async data => {
     if (!addedFiles.value.length) {
         notify(t('noFilesToUpload'), 'warning');
@@ -66,52 +62,33 @@ const onSubmit = async data => {
     const promises = filteredFiles.map(async (file, index) => {
         const fileIndex = filteredFiles[index].index;
         addedFiles.value[fileIndex].uploadStatus = 'uploading';
-
-        // const formData = new FormData();
-        // formData.append('file', file.file);
-
-        // const entityId = imageCollections.value.find(
-        //     collection => collection.name === data.collectionFk
-        // ).model;
-
-        // const url = buildUploadUrl(entityId, data.collectionFk);
-        // console.log('url', url);
-        // return api({
-        //     method: 'post',
-        //     url: url,
-        //     data: formData,
-        //     headers: {
-        //         'Content-Type': 'multipart/form-data'
-        //     }
-        // });
-
         const formData = new FormData();
-        const now = Date.vnNew();
+        const now = new Date();
         const timestamp = now.getTime();
-        console.log('file', file);
+        const fileName = `${file.name}_${timestamp}`;
-        const fileName = `${file.file?.name}_${timestamp}`;
+        formData.append('image', file.file, fileName);
-        formData.append('blob', file.file, fileName);
 
-        await axios.post('Images/upload', formData, {
+        await api.post('photos/upload', formData, {
-            params: newPhoto,
+            params: {
+                name: fileName,
+                collection: data.collectionFk,
+                updateMatching: data.updateMatching
+            },
             headers: {
                 'Content-Type': 'multipart/form-data'
             }
         });
     });
-
     const results = await Promise.allSettled(promises);
     results.forEach((result, index) => {
         const fileIndex = filteredFiles[index].index;
         addedFiles.value[fileIndex].uploadStatus = result.status;
-
         if (result.status === 'rejected') {
             addedFiles.value[fileIndex].errorMessage = t(
                 result.reason?.response?.data?.data?.message
             );
         }
     });
-
     const allSuccessful = results.every(
         result => result.status === 'fulfilled'
     );
@@ -159,12 +136,13 @@ onMounted(async () => getImageCollections());
 
 <template>
     <QPage class="vn-w-sm">
-        <VnForm
+        <FormModel
             ref="vnFormRef"
             :default-actions="false"
             :form-initial-data="formInitialData"
             separation-between-inputs="md"
             show-bottom-actions
+            :save-fn="onSubmit"
         >
             <template #form="{ data }">
                 <VnSelect
@@ -289,7 +267,7 @@ onMounted(async () => getImageCollections());
                     data-cy="photoUploadSubmitBtn"
                 />
             </template>
-        </VnForm>
+        </FormModel>
     </QPage>
 </template>