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

This commit is contained in:
upsiflu 2025-02-06 18:56:10 +01:00
parent 60463d405e
commit b78d1f8992
1 changed files with 163 additions and 169 deletions

View File

@ -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>