fix(FileUpload): changed data struct, fixed clearInterval

resources/js/components/content/partials/dialogs/FileUpload.vue

@@ -1,85 +1,69 @@
 <script setup lang="ts">
 import axios from "axios";
-import {ref, reactive} from "vue";
+import {ref, watch} from "vue";
-import { trackType } from "@/composables/content/track_type.ts";
+import {trackType} from "@/composables/content/track_type.ts";
 import {archive} from "@/composables/content/archive.js.ts";
 
-const { items, listData, headers, selected, loading, getItems, editItem, deleteItem, uploadItem } = archive();
+const {items, listData, headers, selected, loading, getItems, editItem, deleteItem, uploadItem} = archive();
 const trackTypes = trackType(false);
-const check_analyzer = ref([]);
 const selectedTrackType = ref();
 const selectedFiles = ref([]);
-const filesUploading = reactive({
+const selectedFilesMetadata = ref([]);
-  is_uploading: false,
+let uploadingFilesNow = ref(false);
-  uploading: [],
+
-  uploaded: []
+watch(selectedFiles, (newFiles) => {
+  selectedFilesMetadata.value = newFiles.map(file => ({
+    file,
+    uploadingNow: false,
+    id: null,
+    checkAnalyzer: null,
+  }));
 });
 
-// watch(filesUploading, async (newFiles, oldFiles) => {
+const removeUnacceptedFiles = (files) => {
-//   console.log(newFiles);
+  selectedFiles.value = files.filter(file => file.type.split('/', 1) == 'audio')
-// })
-
- const removeUnacceptedFiles = (files) => {
-   files = files.map(el => {
-     return el;
-   })
-   selectedFiles.value = files.filter(el => el.type.split('/', 1) == 'audio')
- }
-
-const uploadFiles = () => {
-  selectedFiles.value.forEach( async (el, key) => {
-    //ToDo: check if a track already exists
-    filesUploading.is_uploading = true
-    selectedFiles.value[key].id = 0
-
-    const formData = new FormData()
-    formData.append('file', el)
-    const response = await uploadItem(formData);
-    console.log(response)
-    selectedFiles.value[key].id = response.id;
-    filesUploading.uploading.push(response.id);
-    check_analyzer.value[response.id] = setInterval(
-        () => checkUploadStatus(response.id),
-        200
-    )
-  })
 }
 
-const checkUploadStatus = (id) => {
+const uploadFiles = async () => {
-  return axios.get(`/file/check_upload_status/${id}`, {
+  uploadingFilesNow.value = true;
+
+  const uploadPromises = selectedFilesMetadata.value.map(async (fileToUpload) => {
+    fileToUpload.uploadingNow = true;
+
+    const formData = new FormData();
+    formData.append('file', fileToUpload.file);
+    const response = await uploadItem(formData);
+
+    fileToUpload.id = response?.id;
+    fileToUpload.checkAnalyzer = setInterval(
+        async () => await checkUploadStatus(fileToUpload),
+        500
+    );
+  });
+
+  await Promise.all(uploadPromises);
+
+  uploadingFilesNow.value = false;
+};
+
+const checkUploadStatus = async (file) => {
+  return axios.get(`/file/check_upload_status/${file.id}`, {
     params: {
-      id: id
+      id: file.id
     }
   }).then(response => {
-    console.log(response)
     if (response.status === 200) {
-      console.log(response.data)
       if (response.data.import_status === 1) {
         //checkUploadStatus(id)
-        console.log('ancora nu')
+        console.log('test')
-        console.log(check_analyzer.value[id])
       } else {
-        console.log('andata')
+        file.uploadingNow = false
-        filesUploading.uploaded.push(id)
+        clearInterval(file.checkAnalyzer);
-        const uploading_index = filesUploading.uploading.indexOf(id)
-        const check_analyzer_index = check_analyzer.value.indexOf(id)
-        if (uploading_index > -1) {
-          filesUploading.uploading.splice(uploading_index, 1)
-        }
-        if (check_analyzer_index > -1) {
-          check_analyzer.value.splice(check_analyzer_index, 1)
-        }
-
-        /**
-         * ToDo: understand why clearInterval doesn't work, or find another way to
-         * check the status
-         */
-        clearInterval(check_analyzer.value[id]);
-        console.log(check_analyzer.value[id])
       }
     }
   })
 }
+
 </script>
 
 <template>
@@ -98,14 +82,13 @@ const checkUploadStatus = (id) => {
           @update:model-value="removeUnacceptedFiles"
           label="Seleziona i file da caricare"
           accept="audio/*"
-          item-title=""
           multiple
       ></v-file-input>
       <v-list
           v-if="selectedFiles.length > 0"
       >
         <v-list-item
-            v-for="(track, i) in selectedFiles"
+            v-for="(track, i) in selectedFilesMetadata"
             :key="i"
             :value="track"
             rounted="xl"
@@ -114,22 +97,17 @@ const checkUploadStatus = (id) => {
             class="text-accent v-list-item--active mb-1"
         >
           <template v-slot:append>
-            <v-icon
+            <v-icon v-if="track.uploadingNow" class="loading">
-                v-if="filesUploading.uploading.includes(track?.id)"
-                class="loading"
-            >
               mdi-loading
             </v-icon>
-            <v-icon
+            <v-icon v-if="!track.uploadingNow && track.id">
-                v-if="filesUploading.uploaded.includes(track?.id)"
+              mdi-check-bold
-            >
+            </v-icon>
-            mdi-check-bold
-          </v-icon>
           </template>
-          {{ track.name }}
+          {{ track.file.name }}
         </v-list-item>
       </v-list>
-      {{selectedTrackType}}
+      {{ selectedTrackType }}
     </v-card-text>
     <v-card-actions>
       <v-btn
@@ -137,9 +115,10 @@ const checkUploadStatus = (id) => {
           size="large"
           type="submit"
           variant="elevated"
-          :disabled="selectedFiles.length === 0 || filesUploading.is_uploading"
+          :disabled="selectedFiles.length === 0 || uploadingFilesNow"
           @click="uploadFiles"
-      >Carica</v-btn>
+      >Carica
+      </v-btn>
     </v-card-actions>
   </v-card>
 </template>