Newer
Older
<template>
<div>
<PageHeader
:title="t('navigation.show.basicData')"
:lead="show.name"
:editing-metadata="show"
/>
<div class="tw-grid tw-gap-x-6 tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-3">
<FormGroup
v-slot="attrs"
:label="t('show.fields.name')"
:is-saving="name.isSaving"
:errors="name.errors"
class="tw-col-span-2"
>
<input v-bind="attrs" v-model="name.value" type="text" @blur="name.save" />
<ADescription class="tw-text-xs">
<span>{{ t('show.slugDetail.title') }}: </span>
<code class="tw-text-inherit tw-bg-gray-200 tw-px-2 tw-py-1 tw-rounded tw-text-gray-500">
{{ show.slug }}
</code>
<br />
<SafeHTML
:html="
t('show.slugDetail.editRemark', {
dangerZone: t('show.housekeeping.title'),
dangerZoneId: 'danger-zone',
})
"
sanitize-preset="safe-html"
/>
</ADescription>
</FormGroup>
<FormGroup
v-slot="attrs"
:label="t('show.fields.shortDescription')"
:is-saving="shortDescription.isSaving"
:errors="shortDescription.errors"
class="tw-col-span-2"
>
<textarea
ref="shortDescriptionEl"
v-bind="attrs"
v-model="shortDescription.value"
class="tw-min-h-[4rem] tw-resize-none"
@blur="shortDescription.save"
/>
</FormGroup>
<FormGroup
v-slot="attrs"
:label="t('show.fields.description')"
:is-saving="description.isSaving"
:errors="description.errors"
class="tw-col-span-2"
>
<textarea
ref="descriptionEl"
v-bind="attrs"
v-model="description.value"
class="tw-min-h-[6rem] tw-resize-none"
/>
</FormGroup>
<hr class="tw-col-span-full tw-w-full" />

Konrad Mohrfeldt
committed
<ShowMetaSimpleTypes :show="show" />
<hr class="tw-col-span-full tw-w-full" />

Konrad Mohrfeldt
committed
<ShowMetaArrays :show="show" />
<hr class="tw-col-span-full tw-w-full" />

Konrad Mohrfeldt
committed
<ShowMetaImages :show="show" />
<ShowMetaOwners :show="show" />
<AHousekeeping :show="show" />
<hr />
<p class="tw-text-sm">
<ATimeEditInfo
v-if="show.updatedAt"
:edit-info="{ time: show.updatedAt, author: show.updatedBy }"
type="modified"
/>
<br />
<ATimeEditInfo :edit-info="{ time: show.createdAt, author: show.createdBy }" type="created" />
</p>
</div>
</template>
<script lang="ts" setup>
import { useTextareaAutosize } from '@vueuse/core'
import { computed, toRef } from 'vue'
import { useI18n } from '@/i18n'
import { Show } from '@/types'
import { useAPIObjectFieldCopy } from '@/form'
import { useShowStore } from '@/stores'
import { useBreadcrumbs } from '@/stores/nav'
import ShowMetaSimpleTypes from '../components/shows/MetaSimpleTypes.vue'
import ShowMetaArrays from '../components/shows/MetaArrays.vue'
import ShowMetaOwners from '../components/shows/MetaOwners.vue'
import ShowMetaImages from '../components/shows/MetaImages.vue'
import PageHeader from '@/components/PageHeader.vue'
import ATimeEditInfo from '@/components/generic/ATimeEditInfo.vue'
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'
show: Show
}>()
const { t } = useI18n()
const showStore = useShowStore()
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 { textarea: descriptionEl } = useTextareaAutosize({
input: toRef(description, 'value'),
})
const { textarea: shortDescriptionEl } = useTextareaAutosize({
input: toRef(shortDescription, 'value'),
})
useBreadcrumbs(() => [
{ title: t('navigation.shows'), route: { name: 'shows' } },
{ title: props.show.name, route: { name: 'show', params: { showId: props.show.id.toString() } } },
t('navigation.show.basicData'),
])