MetaArrays.vue

<template>
  <FormGroup :label="t('showMeta.categories')" custom-control :is-saving="categories.isSaving">
    <ComboBoxSimple v-model="categories.value" :choices="categories.choices">
      <template #selected="{ deselect }">
        <Tag
          v-for="category in categories.value"
          :key="category.id"
          removable
          @remove="deselect(category)"
        >
          <span>
            <span class="tw-block">{{ category.name }}</span>
            <span v-if="category.subtitle.trim()" class="tw-text-xs">
              {{ category.subtitle }}
            </span>
          </span>
        </Tag>
      </template>
    </ComboBoxSimple>
  </FormGroup>

  <FormGroup :label="t('showMeta.topics')" custom-control :is-saving="topics.isSaving">
    <ComboBoxSimple v-model="topics.value" :choices="topics.choices" />
  </FormGroup>

  <FormGroup :label="t('showMeta.genres')" custom-control :is-saving="musicFocuses.isSaving">
    <ComboBoxSimple v-model="musicFocuses.value" :choices="musicFocuses.choices" />
  </FormGroup>

  <FormGroup :label="t('showMeta.languages')" custom-control :is-saving="languages.isSaving">
    <ComboBoxSimple v-model="languages.value" :choices="languages.choices" />
  </FormGroup>

  <FormGroup :label="t('showMeta.hosts')" custom-control :is-saving="hosts.isSaving">
    <ComboBoxSimple v-model="hosts.value" :choices="hosts.choices" />
  </FormGroup>
</template>

<script setup lang="ts">
import { computed } from 'vue'

import { Show } from '@/types'
import {
  useCategoryStore,
  useHostStore,
  useLanguageStore,
  useMusicFocusStore,
  useShowStore,
  useTopicStore,
} from '@/stores'
import { useI18n } from '@/i18n'
import { useRelationList } from '@/form'
import FormGroup from '@/components/generic/FormGroup.vue'
import Tag from '@/components/generic/Tag.vue'
import ComboBoxSimple from '@/components/ComboBoxSimple.vue'

const props = defineProps<{
  show: Show
}>()

const { t } = useI18n()
const showStore = useShowStore()
const categoryStore = useCategoryStore()
const topicStore = useTopicStore()
const musicFocusStore = useMusicFocusStore()
const languageStore = useLanguageStore()
const hostStore = useHostStore()

const show = computed(() => props.show)
const categories = useRelationList(showStore, show, 'categoryIds', categoryStore)
const topics = useRelationList(showStore, show, 'topicIds', topicStore)
const languages = useRelationList(showStore, show, 'languageIds', languageStore)
const hosts = useRelationList(showStore, show, 'hostIds', hostStore)
const musicFocuses = useRelationList(showStore, show, 'musicFocusIds', musicFocusStore)
</script>