From ab715611abb0dfef61a973d4d7044179b7dc55ed Mon Sep 17 00:00:00 2001
From: ArneBo <arne@ecobasa.org>
Date: Mon, 7 Apr 2025 13:07:16 +0200
Subject: [PATCH] fix(front): channel create album modal

---
 front/src/components/channels/AlbumModal.vue | 33 +++++++++-----------
 front/src/views/channels/DetailOverview.vue  |  5 ++-
 2 files changed, 17 insertions(+), 21 deletions(-)

diff --git a/front/src/components/channels/AlbumModal.vue b/front/src/components/channels/AlbumModal.vue
index 89e23d3ee..4598db78d 100644
--- a/front/src/components/channels/AlbumModal.vue
+++ b/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
-})
-
-// Create a new Album and tell the parent to re-fetch all albums
-
-defineExpose({
-  show
+  newAlbumTitle.value = '' // Reset the title to ensure submittable becomes false
 })
 
 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">
diff --git a/front/src/views/channels/DetailOverview.vue b/front/src/views/channels/DetailOverview.vue
index 4c069c74a..f47f1830f 100644
--- a/front/src/views/channels/DetailOverview.vue
+++ b/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>