testapi/resources/js/pages/Department/Create.vue

67 lines
2.1 KiB
Vue

<script setup lang="ts">
import AppLayout from '@/layouts/AppLayout.vue';
import { type BreadcrumbItem } from '@/types';
import { Head, Link, useForm } from '@inertiajs/vue3';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Plus } from 'lucide-vue-next';
const form = useForm({
name: '',
});
const breadcrumbs: BreadcrumbItem[] = [
{ title: 'Dashbord', href: '/dashboard' },
{ title: 'Avdelinger', href: '/smartdok/departments' },
{ title: 'Opprett', href: '/smartdok/departments/create' },
];
function submit() {
form.post(route('smartdok.departments.store'));
}
</script>
<template>
<Head title="Opprett avdeling" />
<AppLayout :breadcrumbs="breadcrumbs">
<div class="mb-6 flex items-center justify-between p-6">
<h3 class="scroll-m-20 text-2xl font-extrabold tracking-tight lg:text-3xl">
Opprett avdeling
</h3>
</div>
<div class="flex justify-center">
<form
@submit.prevent="submit"
class="space-y-6 min-w-full sm:min-w-[400px] md:min-w-[600px] lg:min-w-[800px] p-6"
>
<!-- Navn -->
<div>
<Label for="name">Navn</Label>
<Input
id="name"
v-model="form.name"
type="text"
placeholder="Skriv inn avdelingsnavn"
class="mt-2"
/>
<p v-if="form.errors.name" class="mt-1 text-sm text-red-600">
{{ form.errors.name }}
</p>
</div>
<!-- Actions -->
<div class="flex items-center justify-end space-x-4">
<Link :href="route('smartdok.departments.index')">
<Button variant="outline">
Avbryt
</Button>
</Link>
<Button type="submit" :disabled="form.processing">
Opprett
</Button>
</div>
</form>
</div>
</AppLayout>
</template>