Implement projects and project keys

2026-03-25 00:44:37 +01:00
parent aeee3d2640
commit 7d4b0733b3
16 changed files with 716 additions and 1 deletions
@@ -0,0 +1,102 @@
+<script setup lang="ts">
+import { Form, Head, Link } from '@inertiajs/vue3';
+import ProjectController from '@/actions/App/Http/Controllers/ProjectController';
+import Heading from '@/components/Heading.vue';
+import InputError from '@/components/InputError.vue';
+import { Button } from '@/components/ui/button';
+import {
+    Card,
+    CardContent,
+    CardDescription,
+    CardHeader,
+    CardTitle,
+} from '@/components/ui/card';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import AppLayout from '@/layouts/AppLayout.vue';
+import { create, index } from '@/routes/projects';
+import type { BreadcrumbItem } from '@/types';
+
+const breadcrumbs: BreadcrumbItem[] = [
+    {
+        title: 'Projects',
+        href: index(),
+    },
+    {
+        title: 'New project',
+        href: create(),
+    },
+];
+</script>
+
+<template>
+    <AppLayout :breadcrumbs="breadcrumbs">
+        <Head title="New project" />
+
+        <div class="mx-auto flex w-full max-w-3xl flex-1 flex-col gap-6 p-4">
+            <Heading
+                title="Create project"
+                description="Create a project with a stable uppercase key that will prefix all future ticket keys."
+            />
+
+            <Card>
+                <CardHeader>
+                    <CardTitle>Project details</CardTitle>
+                    <CardDescription>
+                        The key is uppercased automatically, must be unique, and
+                        can contain up to 5 characters.
+                    </CardDescription>
+                </CardHeader>
+
+                <CardContent>
+                    <Form
+                        v-bind="ProjectController.store.form()"
+                        class="space-y-6"
+                        v-slot="{ errors, processing }"
+                    >
+                        <div class="grid gap-2">
+                            <Label for="name">Project name</Label>
+                            <Input
+                                id="name"
+                                name="name"
+                                required
+                                autofocus
+                                placeholder="Kanban foundation"
+                            />
+                            <InputError :message="errors.name" />
+                        </div>
+
+                        <div class="grid gap-2">
+                            <Label for="key">Project key</Label>
+                            <Input
+                                id="key"
+                                name="key"
+                                required
+                                maxlength="5"
+                                placeholder="CORE"
+                                class="uppercase"
+                            />
+                            <p class="text-sm text-muted-foreground">
+                                Example ticket keys will look like
+                                <span class="font-medium text-foreground"
+                                    >CORE-1</span
+                                >.
+                            </p>
+                            <InputError :message="errors.key" />
+                        </div>
+
+                        <div class="flex items-center gap-3">
+                            <Button type="submit" :disabled="processing">
+                                Create project
+                            </Button>
+
+                            <Button as-child variant="outline">
+                                <Link :href="index()">Cancel</Link>
+                            </Button>
+                        </div>
+                    </Form>
+                </CardContent>
+            </Card>
+        </div>
+    </AppLayout>
+</template>