159 lines
5.9 KiB
Vue
159 lines
5.9 KiB
Vue
<script setup lang="ts">
|
|
import { Head, Link, router } from '@inertiajs/vue3';
|
|
import Heading from '@/components/Heading.vue';
|
|
import { Badge } from '@/components/ui/badge';
|
|
import { Button } from '@/components/ui/button';
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from '@/components/ui/card';
|
|
import AppLayout from '@/layouts/AppLayout.vue';
|
|
import {
|
|
destroy as projectTemplatesDestroy,
|
|
edit as projectTemplatesEdit,
|
|
index as projectTemplatesIndex,
|
|
} from '@/routes/project-templates';
|
|
import {
|
|
create as projectsCreate,
|
|
index as projectsIndex,
|
|
} from '@/routes/projects/index';
|
|
import type { BreadcrumbItem, ProjectTemplatesIndexPageProps } from '@/types';
|
|
|
|
const props = defineProps<ProjectTemplatesIndexPageProps>();
|
|
|
|
const breadcrumbs: BreadcrumbItem[] = [
|
|
{
|
|
title: 'Project templates',
|
|
href: projectTemplatesIndex(),
|
|
},
|
|
];
|
|
|
|
const removeTemplate = (templateId: number): void => {
|
|
router.delete(projectTemplatesDestroy.url(templateId), {
|
|
preserveScroll: true,
|
|
});
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<AppLayout :breadcrumbs="breadcrumbs">
|
|
<Head title="Project templates" />
|
|
|
|
<div class="flex flex-1 flex-col gap-6 p-4">
|
|
<div
|
|
class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between"
|
|
>
|
|
<Heading
|
|
title="Project templates"
|
|
description="Reusable published project templates. Internal project base templates stay hidden here by default."
|
|
/>
|
|
|
|
<div class="flex flex-wrap gap-3">
|
|
<Button as-child variant="outline">
|
|
<Link :href="projectsIndex()">Back to projects</Link>
|
|
</Button>
|
|
|
|
<Button as-child>
|
|
<Link :href="projectsCreate()">Create project</Link>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
v-if="status"
|
|
class="rounded-xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-900 dark:border-emerald-900/70 dark:bg-emerald-950/40 dark:text-emerald-100"
|
|
>
|
|
{{ status }}
|
|
</div>
|
|
|
|
<div
|
|
v-if="templates.length === 0"
|
|
class="text-muted-foreground text-sm"
|
|
>
|
|
No published project templates have been saved yet.
|
|
</div>
|
|
|
|
<div v-else class="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
|
|
<Card
|
|
v-for="template in templates"
|
|
:key="template.id"
|
|
class="h-full"
|
|
>
|
|
<CardHeader>
|
|
<div class="flex flex-wrap items-center gap-2">
|
|
<CardTitle>{{ template.name }}</CardTitle>
|
|
<Badge variant="secondary">{{
|
|
template.slug
|
|
}}</Badge>
|
|
<Badge
|
|
v-if="template.linked_project_count"
|
|
variant="outline"
|
|
>
|
|
{{ template.linked_project_count }} linked
|
|
{{
|
|
template.linked_project_count === 1
|
|
? 'project'
|
|
: 'projects'
|
|
}}
|
|
</Badge>
|
|
</div>
|
|
<CardDescription>
|
|
<template v-if="template.source_project">
|
|
Saved from
|
|
{{ template.source_project.name }} ({{
|
|
template.source_project.key
|
|
}}).
|
|
</template>
|
|
<template v-else>
|
|
Saved template configuration.
|
|
</template>
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent class="space-y-4">
|
|
<div class="flex flex-wrap gap-2">
|
|
<Badge
|
|
v-for="copyArea in template.copy_areas"
|
|
:key="copyArea"
|
|
variant="outline"
|
|
>
|
|
{{ copyArea }}
|
|
</Badge>
|
|
</div>
|
|
|
|
<div class="flex flex-wrap gap-3">
|
|
<Button as-child variant="secondary">
|
|
<Link :href="projectTemplatesEdit(template.id)">
|
|
Edit
|
|
</Link>
|
|
</Button>
|
|
|
|
<Button as-child variant="outline">
|
|
<Link
|
|
:href="
|
|
projectsCreate({
|
|
query: { template: template.id },
|
|
})
|
|
"
|
|
>
|
|
Use template
|
|
</Link>
|
|
</Button>
|
|
|
|
<Button
|
|
type="button"
|
|
variant="destructive"
|
|
@click="removeTemplate(template.id)"
|
|
>
|
|
Delete
|
|
</Button>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
</AppLayout>
|
|
</template>
|