fix(front): channel create album modal

front/src/components/channels/AlbumModal.vue

@@ -3,7 +3,7 @@ import type { Channel, BackendError } from '~/types'
 
 import axios from 'axios'
 
-import { watch, ref } from 'vue'
+import { watch, computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useModal } from '~/ui/composables/useModal.ts'
 
@@ -20,20 +20,14 @@ const emit = defineEmits(['created'])
 const newAlbumTitle = ref<string>('')
 
 const isLoading = ref(false)
-const submittable = ref(false)
+const submittable = computed(() => newAlbumTitle.value.length > 0)
 const errors = ref<string[]>([])
 
-const { isOpen: show } = useModal('album')
+const isOpen = useModal('album').isOpen
 
-watch(show, () => {
+watch(isOpen, () => {
   isLoading.value = false
-  submittable.value = false
+  newAlbumTitle.value = '' // Reset the title to ensure submittable becomes false
-})
-
-// Create a new Album and tell the parent to re-fetch all albums
-
-defineExpose({
-  show
 })
 
 const submit = async () => {
@@ -43,29 +37,32 @@ const submit = async () => {
   try {
     await axios.post('albums/', {
       title: newAlbumTitle.value,
-      artist_credit: [channel.value.artist?.id]
+      artist: channel.value.artist?.id
     })
+    emit('created')
   } catch (error) {
     errors.value = (error as BackendError).backendErrors
+  } finally {
+    isLoading.value = false
+    isOpen.value = false // TODO: Fix the @created event to close the modal in channels/DetailOverview.vue
   }
-
-  emit('created')
-
-  isLoading.value = false
 }
 
+defineExpose({
+  submit
+})
 </script>
 
 <template>
   <Modal
-    v-model="show"
+    v-model="isOpen"
     :title="channel?.artist?.content_category === 'podcast' ? t('components.channels.AlbumModal.header.newSeries') : t('components.channels.AlbumModal.header.newAlbum')"
     class="small"
     :cancel="t('components.channels.AlbumModal.button.cancel')"
   >
     <template #alert>
       <Alert
-        v-if="errors.length > 0"
+        v-if="errors?.length > 0"
         red
       >
         <h4 class="header">

front/src/views/channels/DetailOverview.vue

@@ -94,8 +94,6 @@ if (isOwner.value) {
       })
     })
 }
-
-const albumModal = ref()
 </script>
 
 <template>
@@ -207,7 +205,8 @@ const albumModal = ref()
     <album-modal
       v-if="isOwner"
       :model-value="object"
-      @created="albumModal.show = false; seriesKey = new Date()"
+      :channel="object"
+      @created="useModal('album').isOpen.value = false; seriesKey = new Date()"
     />
   </section>
 </template>