feat: add new profile selector that supports adding new profiles

refs #219

src/Pages/ShowBasicData.vue

@@ -235,7 +235,7 @@
           :errors="hosts.errors"
           edit-permissions="program.edit__show__hosts"
         >
-          <ComboBoxSimple v-model="hosts.value" :choices="hosts.choices" :disabled="disabled" />
+          <AProfileSelector v-model="hosts.value" :disabled="disabled" />
         </FormGroup>
 
         <FormGroup
@@ -397,6 +397,7 @@ import ImagePicker from '@/components/images/ImagePicker.vue'
 import AFieldset from '@/components/generic/AFieldset.vue'
 import APlaylistEditor from '@/components/playlist/APlaylistEditor.vue'
 import AUserSelector from '@/components/identities/AUserSelector.vue'
+import AProfileSelector from '@/components/identities/AProfileSelector.vue'
 
 const props = defineProps<{
   show: Show

src/components/identities/AProfileSelector.vue

+<template>
+  <ComboBoxSimple
+    v-bind="props"
+    v-model="modelValue"
+    v-model:searchTerm="searchTerm"
+    :search-provider="searchProfiles"
+    :resolve-choice="resolveProfileChoice"
+  >
+    <template #default="{ choice, index, activeIndex, ...itemAttrs }">
+      <li v-bind="itemAttrs">
+        {{ (choice as Host).name }}
+        <span
+          v-if="choice.id === -1 && index === activeIndex && existingSimilarResults.length > 0"
+          class="tw-block tw-mt-1 tw-pt-1 tw-text-sm tw-text-white/75 tw-border-t tw-border-t-black/10"
+        >
+          {{ t('profile.labels.similarSelected', { names: existingSimilarResults.join(', ') }) }}
+        </span>
+      </li>
+    </template>
+  </ComboBoxSimple>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { useHostStore } from '@/stores'
+import { Host } from '@/types'
+import ComboBoxSimple, { ComboBoxSimpleProps } from '@/components/ComboBoxSimple.vue'
+import { useI18n } from '@/i18n'
+import { matchesSearch } from '@/util'
+
+const modelValue = defineModel<null | Host | Host[]>({ required: true })
+const props = defineProps<Omit<ComboBoxSimpleProps<Host>, 'choices' | 'searchProvider'>>()
+
+const { t } = useI18n()
+const hostStore = useHostStore()
+
+const searchTerm = ref('')
+
+const existingSimilarResults = computed(() => {
+  const value = Array.isArray(modelValue.value)
+    ? modelValue.value
+    : modelValue.value
+      ? [modelValue.value]
+      : []
+  return value.filter((v) => matchesSearch(v.name, searchTerm.value)).map((v) => v.name)
+})
+
+async function searchProfiles(query: string, signal: AbortSignal) {
+  const result = await hostStore.list(1, {
+    query: new URLSearchParams({ search: query, limit: '10' }),
+    requestInit: { signal },
+  })
+  if (query.trim()) {
+    result.push({ id: -1, name: t('profile.labels.createNew', { name: query }) } as Host)
+  }
+  return result
+}
+
+async function resolveProfileChoice(choice: Host | null | undefined, name: string) {
+  if (choice?.id === -1 && name) {
+    return await hostStore.create({ name, ownerIds: [] })
+  }
+  return choice ?? null
+}
+</script>

src/components/shows/NoteDescriptionEditor.vue

@@ -68,11 +68,7 @@
       :is-saving="contributors.isSaving"
       show-permissions="program.edit__note__contributors"
     >
-      <ComboBoxSimple
-        v-model="contributors.value"
-        :choices="contributors.choices"
-        :disabled="disabled"
-      />
+      <AProfileSelector v-model="contributors.value" :disabled="disabled" />
     </FormGroup>
 
     <FormGroup
@@ -129,16 +125,18 @@
 import { computed } from 'vue'
 
 import { useI18n } from '@/i18n'
-import { Note, Show, TimeSlot } from '@/types'
+import { useAPIObjectFieldCopy, useRelationList } from '@/form'
 import { useHostStore, useLanguageStore, useNoteStore, useTopicStore } from '@/stores'
+import { Note, Show, TimeSlot } from '@/types'
+
 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 FormTable from '@/components/generic/FormTable.vue'
 import ALinkCollectionEditor from '@/components/generic/ALinkCollectionEditor.vue'
 import AHTMLEditor from '@/components/generic/AHTMLEditor.vue'
+import AProfileSelector from '@/components/identities/AProfileSelector.vue'
 
 const props = defineProps<{
   timeslot: TimeSlot

src/i18n/de.js

@@ -43,6 +43,8 @@ export default {
     },
     labels: {
       hasAccount: 'Hat Konto',
+      createNew: '„%{name}“ anlegen',
+      similarSelected: 'Ähnliche bereits ausgewählte Profile: %{names}',
     },
     editor: {
       deletion: {

src/i18n/en.js

@@ -43,6 +43,8 @@ export default {
     },
     labels: {
       hasAccount: 'Has account',
+      createNew: 'Create “%{name}”',
+      similarSelected: 'Similar already selected profiles: %{names}',
     },
     editor: {
       deletion: {

src/stores/hosts.ts

 import {
+  APICreate,
   APIListPaginated,
   APIRemove,
   APIRetrieve,
@@ -23,6 +24,7 @@ export const useHostStore = defineStore('hosts', () => {
     ...base,
     ...APIListPaginated(api),
     ...APIRetrieve(api),
+    ...APICreate(api),
     ...APIUpdate<Host, HostUpdateData, HostPartialUpdateData>(api),
     ...APIRemove(api),
   }