fix(front): album select in upload form restored and working

front/src/components/channels/AlbumSelect.vue

@@ -2,44 +2,65 @@
 import type { Album, Channel } from '~/types'
 
 import axios from 'axios'
-import { ref, watch } from 'vue'
+import { useVModel } from '@vueuse/core'
+import { ref, watch, reactive } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useModal } from '~/ui/composables/useModal.ts'
 
-import Layout from '~/components/ui/Layout.vue'
+import AlbumModal from '~/components/channels/AlbumModal.vue'
 import Link from '~/components/ui/Link.vue'
 import Spacer from '~/components/ui/Spacer.vue'
 
 const { t } = useI18n()
 
-const model = defineModel<{channel: Channel, albumId: Album['id'] | '', albums: Album[]}>({ required: true })
 
-const albums = ref<Album[]>([])
+interface Events {
+  (e: 'update:modelValue', value: string): void
+}
+
+interface Props {
+  modelValue: string | null
+  channel: Channel | null
+}
+
+const emit = defineEmits<Events>()
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: null,
+  channel: null
+})
+
+const value = useVModel(props, 'modelValue', emit)
+const localChannel = ref(props.channel ?? { artist: {} } as Channel)
+
+watch(() => props.channel, (newChannel) => {
+  localChannel.value = newChannel ?? { artist: {} } as Channel
+})
+
+const albums = reactive<Album[]>([])
 
 const isLoading = ref(false)
+const fetchData = async () => {
+  albums.length = 0
+  if (!props.channel?.artist) return
 
-const fetchAlbums = async () => {
   isLoading.value = true
   const response = await axios.get('albums/', {
     params: {
-      artist: model.value.channel.artist?.id,
+      artist: props.channel?.artist.id,
       include_channels: 'true'
     }
   })
 
-  albums.value = response.data.results
+  albums.push(...response.data.results)
   isLoading.value = false
 }
 
-watch(() => model.value.channel, fetchAlbums, { immediate: true })
+watch(() => props.channel, fetchData, { immediate: true })
-watch(albums, (value) => {
-  if (value.length === 1) { model.value.albumId = albums.value[0].id }
-})
 </script>
 
 <template>
   <label for="album-dropdown">
-    <span v-if="model.channel.artist?.content_category === 'podcast'">
+    <span v-if="channel && channel.artist && channel.artist.content_category === 'podcast'">
       {{ t('components.channels.AlbumSelect.label.series') }}
     </span>
     <span v-else>
@@ -48,7 +69,7 @@ watch(albums, (value) => {
   </label>
   <select
     id="album-dropdown"
-    v-model="model.albumId"
+    v-model="value"
     class="ui search normal dropdown"
   >
     <option value="">
@@ -63,19 +84,18 @@ watch(albums, (value) => {
       {{ t('components.channels.AlbumSelect.meta.tracks', album.tracks_count) }}
     </option>
   </select>
-  <Layout stack>
+  <Spacer :size="4" />
-    <Spacer :size="4" />
+  <Link
-    <Link
+    solid
-      solid
+    primary
-      primary
+    icon="bi-plus"
-      icon="bi-plus"
+    :to="useModal('album').to"
-      :to="useModal('album').to"
+  >
-    >
+    {{ t('components.channels.AlbumSelect.add') }}
-      {{ t('components.channels.AlbumSelect.add') }}
+    <AlbumModal
-      <AlbumModal
+      v-if="channel"
-        v-model="model.channel"
+      v-model="localChannel"
-        @created="fetchAlbums"
+      @created="fetchData"
-      />
+    />
-    </Link>
+  </Link>
-  </Layout>
 </template>

front/src/components/channels/UploadForm.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { BackendError, Channel, Upload, Track, Album } from '~/types'
+import type { BackendError, Channel, Upload, Track } from '~/types'
 import type { VueUploadItem } from 'vue-upload-component'
 
 import { computed, ref, reactive, watchEffect, watch } from 'vue'
@@ -66,7 +66,7 @@ const errors = ref([] as string[])
 const values = reactive<{
   channelUuid: string | null; // Channel UUID
   license: string | null;
-  album: unknown;
+  album: string | null;
 }>({
   channelUuid: props.channel?.uuid ?? null,
   license: null,
@@ -163,18 +163,6 @@ const fetchChannels = async () => {
   isLoading.value = false
 }
 
-// Albums
-const albumSelection = ref<{channel: Channel, albumId: Album['id'] | '', albums: Album[]}>()
-
-watch(selectedChannel, channel => {
-  if (!channel) return
-  albumSelection.value = {
-    channel,
-    albumId: '',
-    albums: []
-  }
-})
-
 // Quota and space
 //
 const quotaStatus = ref()
@@ -510,9 +498,9 @@ defineExpose({
       </select>
     </div>
     <album-select
-      v-if="selectedChannel !== null && albumSelection && albumSelection.albums.length > 0"
+      v-if="selectedChannel !== null"
-      v-model="albumSelection"
+      v-model.number="values.album"
-      :class="['ui', 'field']"
+      :channel="selectedChannel"
     />
     <div>
       <license-select