feat: add editor for the show’s internal notes

refs #146

src/components/shows/MetaSimpleTypes.vue

@@ -74,6 +74,25 @@
     <template v-else>-</template>
   </FormGroup>
 
+  <template v-if="isSuperuser">
+    <hr class="tw-col-span-3 tw-order-last tw-w-full" />
+    <FormGroup
+      :label="t('showMeta.internalNote')"
+      :errors="internalNoteErrors"
+      class="tw-col-span-2 tw-order-last"
+    >
+      <template #default="attrs">
+        <textarea
+          ref="internalNoteEl"
+          v-model="internalNote"
+          class="tw-min-h-[100px]"
+          v-bind="attrs"
+          @blur="save"
+        />
+      </template>
+    </FormGroup>
+  </template>
+
   <Teleport to="body">
     <FallbackSelector ref="defaultPlaylistSelectorModal" />
   </Teleport>
@@ -82,18 +101,22 @@
 <script lang="ts" setup>
 import { computed, ref } from 'vue'
 import { useStore } from 'vuex'
+import { useTextareaAutosize } from '@vueuse/core'
+
 import { FundingCategory, Playlist, Show, Type } from '@/types'
 import { useI18n } from '@/i18n'
 import { sanitizeHTML, useCopy, useSelectedShow } from '@/util'
-import FormGroup from '@/components/generic/FormGroup.vue'
 import { useAPIObject, useServerFieldErrors } from '@/api'
 import { usePlaylistStore } from '@/stores/playlists'
-import FallbackSelector from '@/components/shows/FallbackSelector.vue'
 import { APIError } from '@/store/api-helper'
+import { useAuthStore } from '@/stores/auth'
+import FormGroup from '@/components/generic/FormGroup.vue'
+import FallbackSelector from '@/components/shows/FallbackSelector.vue'
 
 const { t } = useI18n()
 const store = useStore()
 const selectedShow = useSelectedShow()
+const { isSuperuser } = useAuthStore()
 const playlistStore = usePlaylistStore()
 const shows = computed<Show[]>(() => store.state.shows.shows)
 const types = computed<Type[]>(() => store.state.shows.types)
@@ -102,6 +125,7 @@ const defaultPlaylistSelectorModal = ref()
 
 const email = useCopy(computed(() => selectedShow.value.email ?? ''))
 const cbaSeriesId = useCopy(computed(() => selectedShow.value.cbaSeriesId))
+const internalNote = useCopy(computed(() => selectedShow.value.internalNote))
 const predecessorId = useCopy(computed(() => selectedShow.value.predecessorId))
 const typeId = useCopy(computed(() => selectedShow.value.typeId))
 const fundingCategoryId = useCopy(computed(() => selectedShow.value.fundingCategoryId))
@@ -119,6 +143,7 @@ const [
   typeIdErrors,
   fundingCategoryIdErrors,
   defaultPlaylistIdErrors,
+  internalNoteErrors,
 ] = useServerFieldErrors(
   error,
   'email',
@@ -127,8 +152,11 @@ const [
   'typeId',
   'fundingCategoryId',
   'defaultPlaylistId',
+  'internalNote',
 )
 
+const { textarea: internalNoteEl } = useTextareaAutosize({ input: internalNote })
+
 function openDefaultPlaylistSelectorModal() {
   defaultPlaylistSelectorModal.value.open(async (id: number | null) => {
     defaultPlaylistId.value = id
@@ -146,6 +174,7 @@ async function save() {
     typeId: typeId.value,
     fundingCategoryId: fundingCategoryId.value,
     defaultPlaylistId: defaultPlaylistId.value,
+    internalNote: internalNote.value,
   }
 
   try {

src/i18n/de.js

@@ -256,6 +256,8 @@ export default {
     shortDescriptionPlaceholder: 'Gib eine Kurzbeschreibung der Sendereihe ein',
     editShortDescription: 'Kurzbeschreibung bearbeiten',
 
+    internalNote: 'Interne Notiz',
+
     website: 'Webseite',
     websitePlaceholder: 'Gib eine Webseite für die Sendereihe an',
     editWebsite: 'Webseite bearbeiten',

src/i18n/en.js

@@ -256,6 +256,8 @@ export default {
     shortDescriptionPlaceholder: 'Enter a short description of this show',
     editShortDescription: 'Edit short description',
 
+    internalNote: 'Internal note',
+
     website: 'Website',
     websitePlaceholder: 'Enter a website for this show',
     editWebsite: 'Edit website',