refactor(front): [WIP] modernize upload form (for Channels)

front/src/components/channels/UploadForm.vue

@@ -3,15 +3,13 @@ import type { BackendError, Channel, Upload, Track } from '~/types'
 import type { VueUploadItem } from 'vue-upload-component'
 
 import { computed, ref, reactive, watchEffect, watch } from 'vue'
-import { whenever, useCurrentElement } from '@vueuse/core'
+import { whenever } from '@vueuse/core'
 import { humanSize } from '~/utils/filters'
 import { useI18n } from 'vue-i18n'
 import { useStore } from '~/store'
 
 import axios from 'axios'
 
-import $ from 'jquery'
-
 import UploadMetadataForm from '~/components/channels/UploadMetadataForm.vue'
 import FileUploadWidget from '~/components/library/FileUploadWidget.vue'
 import LicenseSelect from '~/components/channels/LicenseSelect.vue'
@@ -21,7 +19,6 @@ import useErrorHandler from '~/composables/useErrorHandler'
 
 interface Events {
   (e: 'status', status: UploadStatus): void
-  (e: 'step', step: 1 | 2 | 3): void
 }
 
 interface Props {
@@ -238,7 +235,7 @@ const fetchAudioMetadata = async (uuid: string) => {
 
   for (const key of ['title', 'position', 'tags'] as const) {
     if (uploadImportData[uuid][key] === undefined) {
-      uploadImportData[uuid][key] = response.data[key] as never
+      // uploadImportData[uuid][key] = response.data[key] as never
     }
   }
 
@@ -302,27 +299,7 @@ const retry = async (file: VueUploadItem) => {
 fetchChannels()
 fetchQuota()
 
-//
-// Step
-//
-const step = ref<1 | 2 | 3>(1)
-watchEffect(() => {
-  emit('step', step.value)
-
-  if (step.value === 2) {
-    selectedUploadId.value = null
-  }
-})
-
-watch(selectedUploadId, async (to, from) => {
-  if (to) {
-    step.value = 3
-  }
-
-  if (!to && step.value !== 2) {
-    step.value = 2
-  }
-
+watch(selectedUploadId, async (_, from) => {
   if (from) {
     await patchUpload(from, { import_metadata: uploadImportData[from] })
   }
@@ -360,29 +337,42 @@ const labels = computed(() => ({
 
 const isLoading = ref(false)
 const publish = async () => {
+  console.log("starting publish...")
   isLoading.value = true
 
   errors.value = []
 
   try {
-    await axios.post('uploads/action/', {
+    // Post list of uuids of uploadedFiles to axios action:publish
+    await axios.put('uploads/action/', {
       action: 'publish',
       objects: uploadedFiles.value.map((file) => file.response?.uuid)
     })
 
+    console.log("starting posting to axios action:publish...")
+
+    console.log("Channels Store Before: ", store.state.channels)
+
+    // Tell the store that the uploaded files are pending import
     store.commit('channels/publish', {
       uploads: uploadedFiles.value.map((file) => ({ ...file.response, import_status: 'pending' })),
       channel: selectedChannel.value
     })
+
+    console.log("Channels Store After: ", store.state.channels)
+
   } catch (error) {
+    // TODO: Use inferred error type instead of typecasting
     errors.value = (error as BackendError).backendErrors
+    console.log("Error:", error)
   }
 
   isLoading.value = false
+
+  console.log("...finished publish")
 }
 
 defineExpose({
-  step,
   publish
 })
 </script>
@@ -392,6 +382,8 @@ defineExpose({
     :class="['ui', { loading: availableChannels.loading }, 'form component-file-upload']"
     @submit.stop.prevent
   >
+    <!-- Error message -->
+
     <div
       v-if="errors.length > 0"
       role="alert"
@@ -409,7 +401,10 @@ defineExpose({
         </li>
       </ul>
     </div>
-    <div :class="['ui', 'required', {hidden: step > 1}, 'field']">
+
+    <!-- Select Album and License -->
+
+    <div :class="['ui', 'required', 'field']">
       <label for="channel-dropdown">
         {{ t('components.channels.UploadForm.label.channel') }}: {{ selectedChannel?.artist.name }}
       </label>
@@ -417,13 +412,13 @@ defineExpose({
     <album-select
       v-model.number="values.album"
       :channel="selectedChannel"
-      :class="['ui', {hidden: step > 1}, 'field']"
+      :class="['ui', 'field']"
     />
     <license-select
       v-model="values.license"
-      :class="['ui', {hidden: step > 1}, 'field']"
+      :class="['ui', 'field']"
     />
-    <div :class="['ui', {hidden: step > 1}, 'message']">
+    <div :class="['ui', 'message']">
       <div class="content">
         <p>
           <i class="copyright icon" />
@@ -431,7 +426,9 @@ defineExpose({
         </p>
       </div>
     </div>
-    <template v-if="step === 2 || step === 3">
+
+    <!-- Files to upload -->
+
     <div
       v-if="remainingSpace === 0"
       role="alert"
@@ -446,7 +443,7 @@ defineExpose({
     </div>
     <template v-else>
       <div
-          v-if="step === 2 && draftUploads?.length > 0 && includeDraftUploads === undefined"
+        v-if="draftUploads?.length > 0 && includeDraftUploads === undefined"
         class="ui visible info message"
       >
         <p>
@@ -468,7 +465,6 @@ defineExpose({
       </div>
       <div
         v-if="uploadedFiles.length > 0"
-          :class="[{hidden: step === 3}]"
       >
         <div
           v-for="file in uploadedFiles"
@@ -549,7 +545,6 @@ defineExpose({
         :upload="selectedUpload"
       />
       <div
-          v-if="step === 2"
         class="ui message"
       >
         <div class="content">
@@ -562,7 +557,7 @@ defineExpose({
       <file-upload-widget
         ref="upload"
         v-model="files"
-          :class="['ui', 'icon', 'basic', 'button', 'channels', {hidden: step === 3}]"
+        :class="['ui', 'icon', 'basic', 'button', 'channels']"
         :data="baseImportMetadata"
         @input-file="beforeFileUpload"
       >
@@ -577,6 +572,5 @@ defineExpose({
       </file-upload-widget>
       <div class="ui hidden divider" />
     </template>
-    </template>
   </form>
 </template>