KanbanGit/resources/js/pages/projects/settings/General.vue

<script setup lang="ts">
import { Head, Link, useForm } from '@inertiajs/vue3';
import ProjectController from '@/actions/App/Http/Controllers/ProjectController';
import Heading from '@/components/Heading.vue';
import InputError from '@/components/InputError.vue';
import { Badge } from '@/components/ui/badge';
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 { index, show } from '@/routes/projects/index';
import {
    board as boardSettings,
    general as generalSettings,
    metadata as metadataSettings,
    repositories as repositorySettings,
} from '@/routes/projects/settings';
import type {
    BreadcrumbItem,
    ProjectGeneralSettingsPageProps,
} from '@/types';
import { computed } from 'vue';

const props = defineProps<ProjectGeneralSettingsPageProps>();

const breadcrumbs: BreadcrumbItem[] = [
    {
        title: 'Projects',
        href: index(),
    },
    {
        title: props.project.name,
        href: show(props.project.id),
    },
    {
        title: 'General settings',
        href: generalSettings(props.project.id),
    },
];

const deleteForm = useForm({
    confirmation_key: '',
});

const isDeleteConfirmationValid = computed(
    () => deleteForm.confirmation_key === props.project.key,
);

const submitDelete = (): void => {
    if (!isDeleteConfirmationValid.value) {
        return;
    }

    deleteForm.submit(ProjectController.destroy(props.project.id), {
        preserveScroll: true,
    });
};
</script>

<template>
    <AppLayout :breadcrumbs="breadcrumbs">
        <Head :title="`${project.name} general settings`" />

        <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"
            >
                <div class="space-y-3">
                    <Badge variant="outline" class="px-3 py-1">
                        {{ project.key }}
                    </Badge>
                    <Heading
                        :title="`${project.name} general settings`"
                        description="Review the core project identity and manage irreversible administrative actions."
                    />
                </div>

                <div class="flex flex-wrap gap-3">
                    <Button as-child variant="outline">
                        <Link :href="boardSettings(project.id)">
                            Board settings
                        </Link>
                    </Button>

                    <Button as-child variant="outline">
                        <Link :href="metadataSettings(project.id)">
                            Ticket settings
                        </Link>
                    </Button>

                    <Button as-child variant="outline">
                        <Link :href="repositorySettings(project.id)">
                            Repository settings
                        </Link>
                    </Button>

                    <Button as-child variant="outline">
                        <Link :href="show(project.id)">Back to 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>

            <Card>
                <CardHeader>
                    <CardTitle>Project identity</CardTitle>
                    <CardDescription>
                        These values define the project across tickets, boards,
                        and repository matching.
                    </CardDescription>
                </CardHeader>

                <CardContent class="grid gap-4 md:grid-cols-2">
                    <div class="rounded-xl border border-border/70 p-4">
                        <p
                            class="text-xs font-semibold uppercase tracking-[0.18em] text-muted-foreground"
                        >
                            Project name
                        </p>
                        <p class="mt-2 text-sm font-semibold text-foreground">
                            {{ project.name }}
                        </p>
                    </div>

                    <div class="rounded-xl border border-border/70 p-4">
                        <p
                            class="text-xs font-semibold uppercase tracking-[0.18em] text-muted-foreground"
                        >
                            Project key
                        </p>
                        <p class="mt-2 text-sm font-semibold text-foreground">
                            {{ project.key }}
                        </p>
                    </div>
                </CardContent>
            </Card>

            <Card
                class="border-red-200/80 bg-red-50/60 dark:border-red-900/60 dark:bg-red-950/20"
            >
                <CardHeader>
                    <CardTitle class="text-red-900 dark:text-red-100">
                        Danger zone
                    </CardTitle>
                    <CardDescription
                        class="text-red-800/80 dark:text-red-200/80"
                    >
                        Deleting this project is permanent. All tickets, board
                        columns, ticket metadata, repository connections, and
                        project permissions will be removed.
                    </CardDescription>
                </CardHeader>

                <CardContent class="space-y-5">
                    <div
                        class="rounded-xl border border-red-200/80 bg-background/80 p-4 dark:border-red-900/60"
                    >
                        <p class="text-sm font-medium text-foreground">
                            Confirm by typing the exact project key:
                            <span class="font-semibold">{{ project.key }}</span>
                        </p>
                    </div>

                    <form class="space-y-4" @submit.prevent="submitDelete">
                        <div class="grid gap-2">
                            <Label for="confirmation_key">
                                Confirmation key
                            </Label>
                            <Input
                                id="confirmation_key"
                                v-model="deleteForm.confirmation_key"
                                :disabled="deleteForm.processing"
                                placeholder="Type the project key exactly"
                            />
                            <InputError
                                :message="deleteForm.errors.confirmation_key"
                            />
                        </div>

                        <div
                            class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between"
                        >
                            <p class="text-sm text-muted-foreground">
                                This action cannot be undone.
                            </p>

                            <Button
                                type="submit"
                                variant="destructive"
                                :disabled="
                                    deleteForm.processing ||
                                    !isDeleteConfirmationValid
                                "
                            >
                                Delete project
                            </Button>
                        </div>
                    </form>
                </CardContent>
            </Card>
        </div>
    </AppLayout>
</template>