AddShowModal.vue

<template>
  <AEditDialog
    ref="dialog"
    :save="save"
    :title="t('showCreator.title')"
    :save-label="t('showCreator.title')"
    data-testid="add-show-modal"
    @close="reset"
  >
    <FormTable>
      <FormGroup v-slot="attrs" :errors="errors.forField('name')" :label="t('show.fields.name')">
        <input
          v-bind="attrs"
          v-model="showData.name"
          type="text"
          required
          data-testid="add-show-modal:show-name"
        />
        <span v-if="showData.slug" class="tw-text-sm tw-mt-1 tw-text-gray-500">
          {{ t('show.fields.slug') }}: {{ showData.slug }}
        </span>
      </FormGroup>
      <FormGroup
        v-if="slugErrors.length > 0"
        v-slot="attrs"
        :errors="slugErrors"
        :label="t('show.fields.slug')"
      >
        <input
          v-bind="attrs"
          v-model="showData.slug"
          type="text"
          required
          data-testid="add-show-modal:slug"
          @blur="updateSlug(showData.slug)"
        />
      </FormGroup>
      <FormGroup
        v-slot="attrs"
        :errors="errors.forField('shortDescription')"
        :label="t('show.fields.shortDescription')"
      >
        <textarea
          v-bind="attrs"
          v-model="showData.shortDescription"
          required
          data-testid="add-show-modal:show-description"
        />
      </FormGroup>
      <FormGroup
        v-slot="attrs"
        :errors="errors.forField('typeId')"
        :label="t('show.fields.typeId')"
      >
        <select
          v-bind="attrs"
          v-model="showData.typeId"
          required
          data-testid="add-show-modal:show-type"
        >
          <option v-for="type in typeStore.items" :key="type.id" :value="type.id">
            {{ type.name }}
          </option>
        </select>
      </FormGroup>
      <FormGroup
        v-slot="attrs"
        :errors="errors.forField('fundingCategoryId')"
        :label="t('show.fields.fundingCategoryId')"
      >
        <select
          v-bind="attrs"
          v-model="showData.fundingCategoryId"
          required
          data-testid="add-show-modal:show-funding-category"
        >
          <option v-for="cat in fundingCategoryStore.items" :key="cat.id" :value="cat.id">
            {{ cat.name }}
          </option>
        </select>
      </FormGroup>
    </FormTable>
  </AEditDialog>
</template>
<script setup lang="ts">
import { computed, Ref, ref, watch } from 'vue'
import { useRouter } from 'vue-router'

import { useCreateBehaviour } from '@/form'
import { useI18n } from '@/i18n'
import { slugify } from '@/mixins/slugify'
import { useFundingCategoryStore, useShowStore, useTypeStore } from '@/stores'
import { NewShow, newShow } from '@/stores/shows'
import AEditDialog from '@/components/generic/AEditDialog.vue'
import FormGroup from '@/components/generic/FormGroup.vue'
import FormTable from '@/components/generic/FormTable.vue'

const { t } = useI18n()
const dialog = ref()

const router = useRouter()
const showStore = useShowStore()
const typeStore = useTypeStore()
const fundingCategoryStore = useFundingCategoryStore()
const showData = ref() as Ref<NewShow>
const { create, errors } = useCreateBehaviour(showStore.create)
const slugErrors = computed(() => errors.value.forField('slug'))
reset()

async function save() {
  const newShow = await create(showData.value)
  close()
  await router.push({ name: 'show-basic-data', params: { showId: newShow.id } })
}

function reset() {
  showData.value = newShow()
}

function updateSlug(newSlug?: string) {
  const newSlugValue = slugify(newSlug ?? showData.value.slug)
  if (showData.value.slug !== newSlugValue) {
    showData.value.slug = newSlugValue
  }
}

watch(() => showData.value.name, updateSlug)

defineExpose({
  open: () => dialog.value.open(),
  close: () => dialog.value.close(),
})
</script>