104 lines
3.2 KiB
Vue
104 lines
3.2 KiB
Vue
<script setup lang="ts">
|
|
import { computed } from 'vue';
|
|
import AppLayout from '@/layouts/AppLayout.vue';
|
|
import { type BreadcrumbItem } from '@/types';
|
|
import { Head, Link, usePage } from '@inertiajs/vue3';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Label } from '@/components/ui/label';
|
|
|
|
interface Profile {
|
|
id: string
|
|
username: string
|
|
name: string
|
|
};
|
|
|
|
interface Department {
|
|
id: number
|
|
name: string
|
|
};
|
|
|
|
interface Project {
|
|
id: number
|
|
project_name: string
|
|
project_number: string
|
|
profiles: Profile[]
|
|
departments: Department[]
|
|
};
|
|
|
|
const page = usePage<{ project: Project }>();
|
|
|
|
const project = computed(() => page.props.project);
|
|
|
|
const breadcrumbs = computed<BreadcrumbItem[]>(() => [
|
|
{ title: 'Dashbord', href: '/dashboard' },
|
|
{ title: 'Prosjekter', href: '/smartdok/projects' },
|
|
{
|
|
title: project.value.project_name,
|
|
href: route('smartdok.projects.show', project.value.id),
|
|
},
|
|
]);
|
|
</script>
|
|
|
|
<template>
|
|
<Head title="Vis prosjekt" />
|
|
<AppLayout :breadcrumbs="breadcrumbs">
|
|
<div class="p-6 space-y-8">
|
|
<!-- Heading + actions -->
|
|
<div class="flex items-center justify-between">
|
|
<h3 class="scroll-m-20 text-2xl font-extrabold tracking-tight lg:text-3xl">
|
|
Vis prosjekt
|
|
</h3>
|
|
<div class="flex space-x-2">
|
|
<Link :href="route('smartdok.projects.index')">
|
|
<Button variant="outline">Tilbake</Button>
|
|
</Link>
|
|
<Link :href="route('smartdok.projects.edit', project.id)">
|
|
<Button>Rediger</Button>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
<!-- Project details -->
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<div>
|
|
<Label for="id" className="font-semibold">ID</Label>
|
|
<p id="id" class="mt-1 text-base">
|
|
{{ project.id }}
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<Label for="project_name" className="font-semibold">Prosjektnavn</Label>
|
|
<p id="project_name" class="mt-1 text-base">
|
|
{{ project.project_name }}
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<Label for="project_number" className="font-semibold">Prosjektnummer</Label>
|
|
<p id="project_number" class="mt-1 text-base">
|
|
{{ project.project_number }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tilknyttede brukere -->
|
|
<div>
|
|
<Label className="font-semibold">Brukere</Label>
|
|
<ul class="list-disc list-inside mt-2">
|
|
<li v-for="p in project.profiles" :key="p.id">
|
|
{{ p.name }} ({{ p.username }})
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Tilknyttede avdelinger -->
|
|
<div>
|
|
<Label className="font-semibold">Avdelinger</Label>
|
|
<ul class="list-disc list-inside mt-2">
|
|
<li v-for="d in project.departments" :key="d.id">
|
|
{{ d.name }}
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</AppLayout>
|
|
</template>
|