97 lines
3.4 KiB
Vue
97 lines
3.4 KiB
Vue
<script setup lang="ts">
|
|
import { Head, Link } from '@inertiajs/vue3';
|
|
import { Folder, Plus } from 'lucide-vue-next';
|
|
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 { create, index } from '@/routes/projects/index';
|
|
import { index as boardIndex } from '@/routes/projects/board';
|
|
import type { BreadcrumbItem, ProjectsIndexPageProps } from '@/types';
|
|
|
|
defineProps<ProjectsIndexPageProps>();
|
|
|
|
const breadcrumbs: BreadcrumbItem[] = [
|
|
{
|
|
title: 'Projects',
|
|
href: index(),
|
|
},
|
|
];
|
|
</script>
|
|
|
|
<template>
|
|
<AppLayout :breadcrumbs="breadcrumbs">
|
|
<Head title="Projects" />
|
|
|
|
<div class="app-page">
|
|
<div
|
|
class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between"
|
|
>
|
|
<Heading
|
|
title="Projects"
|
|
description="Browse project spaces with their own board, backlog, workflow, repositories, and access."
|
|
/>
|
|
|
|
<Button
|
|
v-if="$page.props.auth.permissions.projectCreate"
|
|
as-child
|
|
>
|
|
<Link :href="create()">
|
|
<Plus class="size-4" />
|
|
New project
|
|
</Link>
|
|
</Button>
|
|
</div>
|
|
|
|
<div v-if="status" class="status-success">
|
|
{{ status }}
|
|
</div>
|
|
|
|
<div v-if="projects.length === 0" class="empty-state">
|
|
No projects exist yet. Create the first one to start building
|
|
out board, backlog, and settings areas.
|
|
</div>
|
|
|
|
<div v-else class="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
|
|
<Link
|
|
v-for="project in projects"
|
|
:key="project.id"
|
|
:href="boardIndex(project.id)"
|
|
class="group block"
|
|
>
|
|
<Card class="group-hover:border-primary/40 h-full py-0">
|
|
<CardHeader class="gap-3 p-5">
|
|
<div class="flex items-start justify-between gap-3">
|
|
<div class="space-y-1">
|
|
<CardTitle>{{ project.name }}</CardTitle>
|
|
<CardDescription>
|
|
Project workspace entry point
|
|
</CardDescription>
|
|
</div>
|
|
|
|
<Badge variant="outline" class="px-2.5 py-1">
|
|
{{ project.key }}
|
|
</Badge>
|
|
</div>
|
|
</CardHeader>
|
|
|
|
<CardContent
|
|
class="border-outline-variant/60 text-muted-foreground flex items-center gap-2 border-t px-5 py-4 text-sm"
|
|
>
|
|
<Folder class="size-4" />
|
|
Open project board
|
|
</CardContent>
|
|
</Card>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</AppLayout>
|
|
</template>
|