fixing branch divergences

app/Http/Kernel.php

@@ -3,6 +3,7 @@
 namespace App\Http;
 
 use App\Http\Middleware\Authenticate;
+use App\Http\Middleware\ParseJsonRequest;
 use App\Http\Middleware\ValidateSignature;
 use Illuminate\Auth\Middleware\AuthenticateWithBasicAuth;
 use Illuminate\Auth\Middleware\Authorize;
@@ -81,4 +82,8 @@ class Kernel extends HttpKernel
         'permission' => PermissionMiddleware::class,
         'role_or_permission' => RoleOrPermissionMiddleware::class,
     ];
+
+    protected $routeMiddleware = [
+        'parsejson' => ParseJsonRequest::class,
+    ];
 }

app/Http/Middleware/ParseJsonRequest.php

@@ -0,0 +1,27 @@
+<?php
+namespace App\Http\Middleware;
+
+use Closure;
+use Illuminate\Http\Request;
+
+class ParseJsonRequest
+{
+    /**
+     * Middleware to parse api requests without a set content type.
+     *
+     * @param \Illuminate\Http\Request $request
+     * @param \Closure $next
+     * @return mixed
+     */
+    public function handle(Request $request, Closure $next)
+    {
+        if (empty($request->all())) {
+            $rawBody = $request->getContent();
+            $data = json_decode($rawBody, true);
+            if (json_last_error() === JSON_ERROR_NONE) {
+                $request->merge($data);
+            }
+        }
+        return $next($request);
+    }
+}

resources/js/components/content/Archive.vue

@@ -1,13 +1,13 @@
 <script setup lang="ts">
 import axios from "axios";
 import {ref, reactive, watch, computed, onMounted} from "vue";
-import { archive } from "@/composables/content/archive.js.ts";
+import {archive_page} from "@/composables/content/archive_page.ts";
 import FileUpload from "@/components/content/partials/dialogs/FileUpload.vue";
 import FileEdit from "@/components/content/partials/dialogs/FileEdit.vue";
 import ConfirmDelete from "@/components/content/partials/dialogs/ConfirmDelete.vue";
 import Table from "@/components/content/partials/Table.vue";
 
-const { items, listData, headers, selected, loading, search, getItems, editItem, deleteItem } = archive()
+const { items, listData, headers, selected, loading, search, getItems, editItem, deleteItem } = archive_page()
 
 const itemEdited = ref({})
 const bulk = ref(false)

resources/js/components/content/partials/PlaylistEditor.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import {playlist} from "@/composables/content/models/playlist.ts";
+import Sources from "@/components/content/partials/Sources.vue";
 
 const props = defineProps({
   item: Object,
@@ -46,6 +47,12 @@ console.log(playlistFields())
     </v-col>
     <v-col></v-col>
   </v-row>
+  <v-row no-gutters>
+    <v-col></v-col>
+    <v-col>
+      <Sources />
+    </v-col>
+  </v-row>
   <v-row no-gutters>
     <v-btn
         color="accent"

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

@@ -1,87 +1,69 @@
 <script setup lang="ts">
 import axios from "axios";
-import {ref, reactive} from "vue";
-import { trackType } from "@/composables/content/track_type.ts";
-import {archive} from "@/composables/content/archive.js.ts";
+import {ref, watch} from "vue";
+import {trackType} from "@/composables/content/track_type.ts";
+import {archive_page} from "@/composables/content/archive_page.ts";
 
-const { items, headers, selected, loading, uploadItem } = archive();
+const {items, listData, headers, selected, loading, getItems, editItem, deleteItem, uploadItem} = archive_page();
 const trackTypes = trackType(false);
-const check_analyzer = ref([]);
 const selectedTrackType = ref();
 const selectedFiles = ref([]);
-const filesUploading = reactive({
-  is_uploading: false,
-  uploading: [],
-  uploaded: []
+const selectedFilesMetadata = ref([]);
+let uploadingFilesNow = ref(false);
+
+watch(selectedFiles, (newFiles) => {
+  selectedFilesMetadata.value = newFiles.map(file => ({
+    file,
+    uploadingNow: false,
+    id: null,
+    checkAnalyzer: null,
+  }));
 });
 
-// watch(filesUploading, async (newFiles, oldFiles) => {
-//   console.log(newFiles);
-// })
-
- 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)
-    formData.append('track_type_id', selectedTrackType.value.id)
-    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 removeUnacceptedFiles = (files) => {
+  selectedFiles.value = files.filter(file => file.type.split('/', 1) == 'audio')
 }
 
-const checkUploadStatus = (id) => {
-  return axios.get(`/file/check_upload_status/${id}`, {
+const uploadFiles = async () => {
+  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(check_analyzer.value[id])
+        console.log('test')
       } else {
-        console.log('andata')
-        filesUploading.uploaded.push(id)
-        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])
+        file.uploadingNow = false
+        clearInterval(file.checkAnalyzer);
       }
     }
   })
 }
+
 </script>
 
 <template>
@@ -100,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"
@@ -116,22 +97,17 @@ const checkUploadStatus = (id) => {
             class="text-accent v-list-item--active mb-1"
         >
           <template v-slot:append>
-            <v-icon
-                v-if="filesUploading.uploading.includes(track?.id)"
-                class="loading"
-            >
+            <v-icon v-if="track.uploadingNow" class="loading">
               mdi-loading
             </v-icon>
-            <v-icon
-                v-if="filesUploading.uploaded.includes(track?.id)"
-            >
-            mdi-check-bold
-          </v-icon>
+            <v-icon v-if="!track.uploadingNow && track.id">
+              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
@@ -139,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>

resources/js/composables/content/archive_page.ts

@@ -1,7 +1,7 @@
 import axios from "axios";
 import {ref, reactive, computed} from "vue";
 
-export function archive() {
+export function archive_page() {
     const items     = ref([])
     const selected  = ref([])
     const loading   = ref(false)

routes/api.php

@@ -16,5 +16,5 @@ use Illuminate\Support\Facades\Route;
 |
 */
 
-Route::put('/media/{id}', [FileController::class, 'update'])->name('media.update');
+Route::middleware('parsejson')->put('/media/{id}', [FileController::class, 'update'])->name('media.update');
 Route::middleware('auth:sanctum')->get('apiTest', [TestControllerXdebug::class, 'index']);