chore(front): upload modal channel form #2081

front/src/components/channels/AlbumModal.vue

@@ -3,7 +3,7 @@ import type { Channel, BackendError } from '~/types'
 
 import axios from 'axios'
 
-import { watch, ref, emit } from 'vue'
+import { watch, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useModal } from '~/ui/composables/useModal.ts'
 
@@ -24,8 +24,6 @@ const errors = ref<string[]>([])
 
 const {isOpen:show} = useModal('album')
 
-defineEmits(['created'])
-
 watch(show, () => {
   isLoading.value = false
   submittable.value = false

front/src/components/channels/AlbumSelect.vue

@@ -22,7 +22,7 @@ const fetchAlbums = async () => {
   isLoading.value = true
   const response = await axios.get('albums/', {
     params: {
-      artist: model.value.channel.artist.id,
+      artist: model.value.channel.artist?.id,
       include_channels: 'true'
     }
   })
@@ -41,7 +41,7 @@ watch(albums, (value) => {
 
 <template>
   <label for="album-dropdown">
-    <span v-if="model.channel.artist.content_category === 'podcast'">
+    <span v-if="model.channel.artist?.content_category === 'podcast'">
       {{ t('components.channels.AlbumSelect.label.series') }}
     </span>
     <span v-else>

front/src/components/channels/UploadForm.vue

@@ -521,13 +521,16 @@ ChannelCreateRequest: {
 
 
 <template>
-  <form
+  <Layout
+    form
+    gap-8
     :class="['ui', { loading: isLoading }, 'form component-file-upload']"
     @submit.stop.prevent
   >
     <!-- Error message -->
     <Alert
       v-if="errors.length > 0"
+      red
     >
       <h4 class="header">
         {{ t('components.channels.UploadForm.header.error') }}
@@ -561,25 +564,23 @@ ChannelCreateRequest: {
         </option>
       </select>
     </div>
-    <Layout flex>
+    <album-select
-      <album-select
+      v-if="selectedChannel"
-        v-if="selectedChannel"
+      v-model="albumSelection"
-        v-model="albumSelection"
-        :class="['ui', 'field']"
-      />
-    </Layout>
-    <license-select
-      v-model="values.license"
       :class="['ui', 'field']"
     />
-    <div :class="['ui', 'message']">
+    <div>
-      <div class="content">
+      <license-select
-        <p>
+        v-model="values.license"
-          <i class="copyright icon" />
+        :class="['ui', 'field']"
-          {{ t('components.channels.UploadForm.help.license') }}
+      />
-        </p>
+        <div class="content">
+          <p>
+            <i class="copyright icon" />
+            {{ t('components.channels.UploadForm.help.license') }}
+          </p>
+        </div>
       </div>
-    </div>
 
     <!-- Files to upload -->
     <template v-if="remainingSpace === 0">
@@ -688,19 +689,18 @@ ChannelCreateRequest: {
       v-model:values="uploadImportData[selectedUploadId]"
       :upload="selectedUpload"
     />
-    <div
+    <Alert blue
       class="ui message"
     >
-      <div class="content">
+      <Layout flex gap-8>
-        <p>
+        <i class="bi bi-info-circle-fill" />
-          <i class="info icon" />
+        {{ t('components.channels.UploadForm.description.extensions', {extensions: store.state.ui.supportedExtensions.join(', ')}) }}
-          {{ t('components.channels.UploadForm.description.extensions', {extensions: store.state.ui.supportedExtensions.join(', ')}) }}
+      </Layout>
-        </p>
+    </Alert>
-      </div>
-    </div>
     <file-upload-widget
       ref="upload"
       v-model="files"
+      :class="['ui', 'button', 'channels']"
       :data="baseImportMetadata"
       @input-file="beforeFileUpload"
     >
@@ -709,9 +709,10 @@ ChannelCreateRequest: {
         {{ t('components.channels.UploadForm.message.dragAndDrop') }}
       </div>
       <div class="ui very small divider" />
-      <div>
+      <Button primary icon="bi-folder2-open">
         {{ t('components.channels.UploadForm.label.openBrowser') }}
-      </div>
+      </Button>
+      <Spacer class="divider" :size="32" />
     </file-upload-widget>
-  </form>
+  </Layout>
 </template>