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">
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<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" />
</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"
/>
</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'
show: Show
}>()
const { t } = useI18n()
const showStore = useShowStore()
const show = computed(() => props.show)
const name = useAPIObjectFieldCopy(showStore, show, 'name')
const shortDescription = useAPIObjectFieldCopy(showStore, show, 'shortDescription')
const description = useAPIObjectFieldCopy(showStore, show, 'description')
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'),
])