66 lines
2.4 KiB
Vue
66 lines
2.4 KiB
Vue
<script setup lang="ts">
|
|
import { Head } from '@inertiajs/vue3';
|
|
import { computed } from 'vue';
|
|
import ProjectTemplateForm from '@/components/projects/ProjectTemplateForm.vue';
|
|
import { useLocalization } from '@/composables/useLocalization';
|
|
import AppLayout from '@/layouts/AppLayout.vue';
|
|
import { index, show } from '@/routes/projects';
|
|
import { create } from '@/routes/projects/templates';
|
|
import {
|
|
create as createEmpty,
|
|
index as templatesIndex,
|
|
} from '@/routes/project-templates';
|
|
import type { BreadcrumbItem, ProjectTemplatesCreatePageProps } from '@/types';
|
|
const props = defineProps<ProjectTemplatesCreatePageProps>();
|
|
const { t } = useLocalization();
|
|
const breadcrumbs = computed<BreadcrumbItem[]>(() =>
|
|
props.project
|
|
? [
|
|
{ title: t('navigation.projects'), href: index() },
|
|
{ title: props.project.name, href: show(props.project.id) },
|
|
{
|
|
title: t('projects.saveTemplate'),
|
|
href: create(props.project.id),
|
|
},
|
|
]
|
|
: [
|
|
{ title: t('navigation.templates'), href: templatesIndex() },
|
|
{ title: t('templates.createEmpty'), href: createEmpty() },
|
|
],
|
|
);
|
|
</script>
|
|
|
|
<template>
|
|
<AppLayout :breadcrumbs="breadcrumbs">
|
|
<Head
|
|
:title="
|
|
project
|
|
? t('templates.createTitle', { project: project.name })
|
|
: t('templates.createEmpty')
|
|
"
|
|
/>
|
|
<div class="p-page gap-page mx-auto grid w-full min-w-0 max-w-6xl">
|
|
<header class="gap-stack grid">
|
|
<h1 class="text-headline-mobile md:text-headline break-words">
|
|
{{
|
|
project
|
|
? t('templates.createTitle', {
|
|
project: project.name,
|
|
})
|
|
: t('templates.createEmpty')
|
|
}}
|
|
</h1>
|
|
<p class="text-muted-foreground">
|
|
{{ t('templates.createDescription') }}
|
|
</p>
|
|
</header>
|
|
<ProjectTemplateForm
|
|
:key="project?.id ?? 'empty'"
|
|
:project="project"
|
|
:initial-configuration="initialConfiguration"
|
|
:copy-area-options="copyAreaOptions"
|
|
/>
|
|
</div>
|
|
</AppLayout>
|
|
</template>
|