refactor(front): [WIP] modernize upload form (for Channels)
This commit is contained in:
parent
60463d405e
commit
b78d1f8992
|
@ -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>
|
||||
|
|
Loading…
Reference in New Issue