feat: add link editors

It’s now possible to assign links to shows and notes.

refs #186

src/Pages/ShowBasicData.vue

@@ -72,6 +72,25 @@
       <ShowMetaArrays :show="show" />
       <hr class="tw-col-span-full tw-w-full" />
       <ShowMetaImages :show="show" />
+
+      <hr class="tw-col-span-full tw-w-full" />
+
+      <FormGroup
+        :label="t('show.fields.links')"
+        :is-saving="links.isSaving"
+        :errors="getFieldErrors(links.errors, 'links')"
+        :has-error="links.errors.length > 0"
+        custom-control
+        class="tw-col-span-full tw-max-w-2xl"
+      >
+        <ALinkCollectionEditor
+          v-model="links.value"
+          :error-lists="getTreeFieldChildrenErrorsList(links.errors, 'links')"
+          allow-add
+          @save="links.save()"
+        />
+      </FormGroup>
+
       <ShowMetaOwners :show="show" />
     </div>
 
@@ -99,7 +118,7 @@ import { computed, toRef } from 'vue'
 
 import { useI18n } from '@/i18n'
 import { Show } from '@/types'
-import { useAPIObjectFieldCopy } from '@/form'
+import { getTreeFieldChildrenErrorsList, getFieldErrors, useAPIObjectFieldCopy } from '@/form'
 import { useShowStore } from '@/stores'
 import { useBreadcrumbs } from '@/stores/nav'
 
@@ -113,6 +132,7 @@ import FormGroup from '@/components/generic/FormGroup.vue'
 import AHousekeeping from '@/components/shows/AHousekeeping.vue'
 import ADescription from '@/components/generic/ADescription.vue'
 import SafeHTML from '@/components/generic/SafeHTML'
+import ALinkCollectionEditor from '@/components/generic/ALinkCollectionEditor.vue'
 
 const props = defineProps<{
   show: Show
@@ -125,6 +145,7 @@ const show = computed(() => props.show)
 const name = useAPIObjectFieldCopy(showStore, show, 'name', { debounce: 2 })
 const shortDescription = useAPIObjectFieldCopy(showStore, show, 'shortDescription', { debounce: 2 })
 const description = useAPIObjectFieldCopy(showStore, show, 'description', { debounce: 2 })
+const links = useAPIObjectFieldCopy(showStore, show, 'links', { debounce: 2 })
 
 const { textarea: descriptionEl } = useTextareaAutosize({
   input: toRef(description, 'value'),

src/components/shows/NoteDescriptionEditor.vue

@@ -83,6 +83,21 @@
     <FormGroup :label="t('noteEditor.tags')" :errors="tags.errors" :is-saving="tags.isSaving">
       <TagInput v-model="tags.value" />
     </FormGroup>
+
+    <FormGroup
+      :label="t('noteEditor.links')"
+      :is-saving="links.isSaving"
+      :errors="getFieldErrors(links.errors, 'links')"
+      :has-error="links.errors.length > 0"
+      custom-control
+    >
+      <ALinkCollectionEditor
+        v-model="links.value"
+        :error-lists="getTreeFieldChildrenErrorsList(links.errors, 'links')"
+        allow-add
+        @save="links.save()"
+      />
+    </FormGroup>
   </FormTable>
 </template>
 
@@ -97,8 +112,14 @@ import FormGroup from '@/components/generic/FormGroup.vue'
 import ImagePicker from '@/components/images/ImagePicker.vue'
 import TagInput from '@/components/generic/TagInput.vue'
 import ComboBoxSimple from '@/components/ComboBoxSimple.vue'
-import { useAPIObjectFieldCopy, useRelationList } from '@/form'
+import {
+  getFieldErrors,
+  getTreeFieldChildrenErrorsList,
+  useAPIObjectFieldCopy,
+  useRelationList,
+} from '@/form'
 import FormTable from '@/components/generic/FormTable.vue'
+import ALinkCollectionEditor from '@/components/generic/ALinkCollectionEditor.vue'
 
 defineOptions({ compatConfig: { MODE: 3 } })
 
@@ -119,6 +140,7 @@ const summary = useAPIObjectFieldCopy(noteStore, note, 'summary', { noAutoSave:
 const content = useAPIObjectFieldCopy(noteStore, note, 'content', { noAutoSave: true })
 const tags = useAPIObjectFieldCopy(noteStore, note, 'tags')
 const imageId = useAPIObjectFieldCopy(noteStore, note, 'imageId', { debounce: 0 })
+const links = useAPIObjectFieldCopy(noteStore, note, 'links', { debounce: 2 })
 const contributors = useRelationList(noteStore, note, 'contributorIds', hostStore)
 const languages = useRelationList(noteStore, note, 'languageIds', languageStore)
 const topics = useRelationList(noteStore, note, 'topicIds', topicStore)

src/i18n/de.js

@@ -44,6 +44,7 @@ export default {
       shortDescription: 'Kurzbeschreibung',
       typeId: 'Art',
       fundingCategoryId: 'Förderkategorie',
+      links: 'Links zu Plattformen & Sozialen Medien',
     },
     slugDetail: {
       title: 'URL-Kürzel',
@@ -572,6 +573,7 @@ export default {
     contributors: 'Mitwirkende',
     languages: 'Sprachen',
     topics: 'Themen',
+    links: 'Links zu Plattformen & Sozialen Medien',
   },
 
   error: {

src/i18n/en.js

@@ -44,6 +44,7 @@ export default {
       shortDescription: 'Short description',
       typeId: 'Type',
       fundingCategoryId: 'Funding category',
+      links: 'Platform & Social Media Links',
     },
     slugDetail: {
       title: 'Slug',
@@ -563,6 +564,7 @@ export default {
     contributors: 'Contributors',
     languages: 'Languages',
     topics: 'Topics',
+    links: 'Platform & Social Media Links',
   },
 
   error: {