160 lines
5.5 KiB
Vue
160 lines
5.5 KiB
Vue
<script setup lang="ts">
|
|
import { computed } from 'vue';
|
|
import AppLayout from '@/layouts/AppLayout.vue';
|
|
import { Head, Link, usePage, useForm } from '@inertiajs/vue3';
|
|
import type { BreadcrumbItem } from '@/types';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Input } from '@/components/ui/input';
|
|
import { Label } from '@/components/ui/label';
|
|
import { Checkbox } from '@/components/ui/checkbox';
|
|
|
|
interface Profile { id: string; name: string };
|
|
interface Department { id: number; name: string };
|
|
interface Project {
|
|
id: number
|
|
project_name: string
|
|
project_number: string
|
|
user_ids: string[]
|
|
department_ids: number[]
|
|
};
|
|
|
|
const page = usePage<{
|
|
project: Project
|
|
profiles: Profile[]
|
|
departments: Department[]
|
|
}>();
|
|
|
|
const project = computed(() => page.props.project);
|
|
const profilesList = computed(() => page.props.profiles);
|
|
const deptsList = computed(() => page.props.departments);
|
|
|
|
const form = useForm({
|
|
project_name: project.value.project_name,
|
|
project_number: project.value.project_number,
|
|
user_ids: project.value.user_ids,
|
|
department_ids: project.value.department_ids,
|
|
});
|
|
|
|
function toggleUser(id: string, checked: boolean) {
|
|
form.user_ids = checked
|
|
? [...form.user_ids, id]
|
|
: form.user_ids.filter(x => x !== id);
|
|
}
|
|
|
|
function toggleDept(id: number, checked: boolean) {
|
|
form.department_ids = checked
|
|
? [...form.department_ids, id]
|
|
: form.department_ids.filter(x => x !== id);
|
|
}
|
|
|
|
const breadcrumbs = computed<BreadcrumbItem[]>(() => [
|
|
{ title: 'Dashbord', href: '/dashboard' },
|
|
{ title: 'Prosjekter', href: '/smartdok/projects' },
|
|
{
|
|
title: 'Rediger',
|
|
href: route('smartdok.projects.edit', project.value.id),
|
|
},
|
|
]);
|
|
|
|
function submit() {
|
|
form.put(route('smartdok.projects.update', project.value.id));
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<Head title="Rediger prosjekt" />
|
|
<AppLayout :breadcrumbs="breadcrumbs">
|
|
<div class="p-6 space-y-8">
|
|
<!-- Header -->
|
|
<div class="flex items-center justify-between">
|
|
<h3 class="scroll-m-20 text-2xl font-extrabold tracking-tight lg:text-3xl">
|
|
Rediger prosjekt
|
|
</h3>
|
|
</div>
|
|
<!-- Centered form -->
|
|
<div class="flex justify-center items-center">
|
|
<form
|
|
@submit.prevent="submit"
|
|
class="space-y-6 min-w-2xl lg:min-w-3xl xl:min-w-4xl"
|
|
>
|
|
<!-- Prosjektnavn -->
|
|
<div>
|
|
<Label for="project_name">Prosjektnavn</Label>
|
|
<Input
|
|
id="project_name"
|
|
v-model="form.project_name"
|
|
placeholder="Skriv inn prosjektnavn"
|
|
class="mt-2"
|
|
/>
|
|
<p v-if="form.errors.project_name" class="mt-1 text-sm text-red-600">
|
|
{{ form.errors.project_name }}
|
|
</p>
|
|
</div>
|
|
<!-- Prosjektnummer -->
|
|
<div>
|
|
<Label for="project_number">Prosjektnummer</Label>
|
|
<Input
|
|
id="project_number"
|
|
v-model="form.project_number"
|
|
placeholder="Skriv inn prosjektnummer"
|
|
class="mt-2"
|
|
/>
|
|
<p v-if="form.errors.project_number" class="mt-1 text-sm text-red-600">
|
|
{{ form.errors.project_number }}
|
|
</p>
|
|
</div>
|
|
<!-- Tilknyttede brukere -->
|
|
<div>
|
|
<Label>Tilknyttede brukere</Label>
|
|
<div class="mt-2 space-y-1">
|
|
<div
|
|
v-for="p in profilesList"
|
|
:key="p.id"
|
|
class="flex items-center space-x-2"
|
|
>
|
|
<Checkbox
|
|
:model-value="form.user_ids.includes(p.id)"
|
|
@update:modelValue="checked => toggleUser(p.id, checked)"
|
|
/>
|
|
<span>{{ p.name }}</span>
|
|
</div>
|
|
</div>
|
|
<p v-if="form.errors.user_ids" class="mt-1 text-sm text-red-600">
|
|
{{ form.errors.user_ids }}
|
|
</p>
|
|
</div>
|
|
<!-- Tilknyttede avdelinger -->
|
|
<div>
|
|
<Label>Tilknyttede avdelinger</Label>
|
|
<div class="mt-2 space-y-1">
|
|
<div
|
|
v-for="d in deptsList"
|
|
:key="d.id"
|
|
class="flex items-center space-x-2"
|
|
>
|
|
<Checkbox
|
|
:model-value="form.department_ids.includes(d.id)"
|
|
@update:modelValue="checked => toggleDept(d.id, checked)"
|
|
/>
|
|
<span>{{ d.name }}</span>
|
|
</div>
|
|
</div>
|
|
<p v-if="form.errors.department_ids" class="mt-1 text-sm text-red-600">
|
|
{{ form.errors.department_ids }}
|
|
</p>
|
|
</div>
|
|
<!-- Actions -->
|
|
<div class="flex items-center justify-end space-x-4">
|
|
<Link :href="route('smartdok.projects.index')">
|
|
<Button variant="outline">Avbryt</Button>
|
|
</Link>
|
|
<Button type="submit" :disabled="form.processing">
|
|
Oppdater
|
|
</Button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</AppLayout>
|
|
</template>
|