feat: add default media source management for shows

refs #254

src/Pages/ShowBasicData.vue

@@ -106,8 +106,6 @@
         </div>
       </AFieldset>
 
-      <div class="tw-hidden 2xl:tw-block" />
-
       <AFieldset class="tw-bg-white" :title="t('show.section.content.title')">
         <FormGroup
           :label="t('show.fields.categoryIds')"
@@ -313,6 +311,18 @@
         </template>
       </AFieldset>
 
+      <AFieldset :title="t('show.section.media.title')" class="tw-bg-white">
+        <FormGroup :errors="playlistId.errors">
+          <APlaylistEditor
+            :playlist="playlist"
+            :show="show"
+            :use-expert-mode="true"
+            class="tw-max-w-3xl"
+            @create="playlistId.value = $event.id"
+          />
+        </FormGroup>
+      </AFieldset>
+
       <AHousekeeping :show="show" class="tw-col-span-full" />
     </div>
 
@@ -331,6 +341,7 @@
 </template>
 
 <script lang="ts" setup>
+import { useObjectFromStore } from '@rokoli/bnb/drf'
 import { useTextareaAutosize } from '@vueuse/core'
 import { computed } from 'vue'
 
@@ -344,6 +355,7 @@ import {
   useHostStore,
   useLanguageStore,
   useMusicFocusStore,
+  usePlaylistStore,
   useShowStore,
   useTopicStore,
   useTypeStore,
@@ -366,6 +378,7 @@ import UserPreview from '@/components/UserPreview.vue'
 import Tag from '@/components/generic/Tag.vue'
 import ImagePicker from '@/components/images/ImagePicker.vue'
 import AFieldset from '@/components/generic/AFieldset.vue'
+import APlaylistEditor from '@/components/playlist/APlaylistEditor.vue'
 
 const props = defineProps<{
   show: Show
@@ -382,6 +395,7 @@ const musicFocusStore = useMusicFocusStore()
 const languageStore = useLanguageStore()
 const hostStore = useHostStore()
 const fundingCategoryStore = useFundingCategoryStore()
+const playlistStore = usePlaylistStore()
 
 const show = computed(() => props.show)
 const name = useAPIObjectFieldCopy(showStore, show, 'name', { debounce: 2 })
@@ -405,6 +419,9 @@ const owners = useRelationList(showStore, () => props.show, 'ownerIds', userStor
   sortBy: ['lastName', 'firstName', 'username', 'email'],
 })
 
+const { obj: playlist } = useObjectFromStore(() => props.show.defaultPlaylistId, playlistStore)
+const playlistId = useAPIObjectFieldCopy(showStore, show, 'defaultPlaylistId', { debounce: 0 })
+
 function searchUsers(query: string, signal: AbortSignal) {
   return userStore.list({
     query: new URLSearchParams({ search: query }),

src/i18n/de.js

@@ -76,6 +76,7 @@ export default {
       content: { title: 'Inhaltliche Angaben' },
       contact: { title: 'Redaktion & Kontakt' },
       administrative: { title: 'Verwaltung' },
+      media: { title: 'Standardmedienquellen' },
     },
     editor: {
       deactivation: {

src/i18n/en.js

@@ -76,6 +76,7 @@ export default {
       content: { title: 'Content information' },
       contact: { title: 'Editors & Contact' },
       administrative: { title: 'Administration' },
+      media: { title: 'Default media sources' },
     },
     editor: {
       deactivation: {