fix: show error if note-auto-creation in steering fails

refs #259

src/Pages/ShowEpisode.vue

@@ -6,16 +6,27 @@
     :note="note"
     :playlist="playlist"
   />
+  <FormGroup v-if="loadingErrorList.length > 0" :errors="loadingErrorList">
+    <button type="button" class="btn btn-default tw-w-fit" @click="router.back()">
+      <icon-system-uicons-arrow-left />
+      {{ t('goBack') }}
+    </button>
+  </FormGroup>
 </template>
 
 <script setup lang="ts">
+import { computed, ref, watchEffect } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
-import { useObjectFromStore } from '@rokoli/bnb/drf'
-import { Show } from '@/types'
+import { flattenErrorData, useObjectFromStore } from '@rokoli/bnb/drf'
+
+import { useI18n } from '@/i18n'
 import { useNoteStore, usePlaylistStore, useTimeSlotStore } from '@/stores'
-import { watchEffect } from 'vue'
 import { defineNavigationContext } from '@/stores/nav'
 import { newNote } from '@/stores/notes'
+import { Show } from '@/types'
+import { ensureError } from '@/util'
+
+import FormGroup from '@/components/generic/FormGroup.vue'
 
 const props = defineProps<{
   show: Show
@@ -23,6 +34,7 @@ const props = defineProps<{
 
 const router = useRouter()
 const route = useRoute()
+const { t } = useI18n()
 const timeslotStore = useTimeSlotStore()
 const noteStore = useNoteStore()
 const playlistStore = usePlaylistStore()
@@ -35,6 +47,8 @@ const { obj: playlist } = useObjectFromStore(
   () => timeslot.value?.playlistId ?? null,
   playlistStore,
 )
+const loadingError = ref<Error | undefined>()
+const loadingErrorList = computed(() => Array.from(flattenErrorData(loadingError.value, 'server.')))
 
 defineNavigationContext(() => ({ episode: timeslot }))
 
@@ -45,8 +59,12 @@ watchEffect(async () => {
     const note = newNote(ts.id, props.show)
     note.title = 'A title...'
     note.content = 'Some content...'
-    const savedNote = await noteStore.create(note)
-    await timeslotStore.partialUpdate(ts.id, { noteId: savedNote.id })
+    try {
+      const savedNote = await noteStore.create(note)
+      await timeslotStore.partialUpdate(ts.id, { noteId: savedNote.id })
+    } catch (e) {
+      loadingError.value = ensureError(e)
+    }
   }
 })
 

src/i18n/de.js

@@ -161,6 +161,7 @@ export default {
   delete: 'Löschen',
   add: 'Hinzufügen',
   save: 'Speichern',
+  goBack: 'Zur vorherigen Seite zurückkehren',
   ok: 'OK',
   browse: 'Auswählen',
   drop: 'Datei hier ablegen',

src/i18n/en.js

@@ -162,6 +162,7 @@ export default {
   new: 'New',
   add: 'Add',
   save: 'Save',
+  goBack: 'Go back to previous page',
   ok: 'OK',
   browse: 'Browse',
   drop: 'Drop file here',