134 lines
3.7 KiB
Vue
134 lines
3.7 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 {
|
|
Table,
|
|
TableBody,
|
|
TableCaption,
|
|
TableCell,
|
|
TableHead,
|
|
TableHeader,
|
|
TableRow,
|
|
} from '@/components/ui/table';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Plus } from 'lucide-vue-next';
|
|
|
|
import WorkHourDropdown from './WorkHourDropdown.vue';
|
|
|
|
interface WorkHour {
|
|
id: string
|
|
user_name: string
|
|
ordinary_hours: number
|
|
projects: { id: number; project_name: string }[]
|
|
};
|
|
|
|
const page = usePage<{
|
|
workHours: {
|
|
data: WorkHour[]
|
|
current_page: number
|
|
last_page: number
|
|
per_page: number
|
|
total: number
|
|
}
|
|
}>();
|
|
|
|
// Reactive list of work hours
|
|
const workHoursList = computed(() => page.props.workHours.data);
|
|
|
|
// Breadcrumbs
|
|
const breadcrumbs: BreadcrumbItem[] = [
|
|
{ title: 'Dashbord', href: '/dashboard' },
|
|
{ title: 'Arbeidstimer', href: '/smartdok/work-hours' },
|
|
];
|
|
|
|
// Pagination meta
|
|
const currentPage = computed(() => page.props.workHours.current_page);
|
|
const lastPage = computed(() => page.props.workHours.last_page);
|
|
|
|
const prevPage = computed(() =>
|
|
currentPage.value > 1 ? currentPage.value - 1 : 1
|
|
);
|
|
|
|
const nextPage = computed(() =>
|
|
currentPage.value < lastPage.value ? currentPage.value + 1 : lastPage.value
|
|
);
|
|
</script>
|
|
|
|
<template>
|
|
<Head title="Arbeidstimer" />
|
|
<AppLayout :breadcrumbs="breadcrumbs">
|
|
<!-- Header + Create-button -->
|
|
<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">
|
|
Arbeidstimer
|
|
</h3>
|
|
<Link :href="route('smartdok.work-hours.create')">
|
|
<Button variant="outline">
|
|
<Plus class="mr-2 h-4 w-4" />
|
|
Opprett
|
|
</Button>
|
|
</Link>
|
|
</div>
|
|
<!-- Table -->
|
|
<div class="px-6 overflow-auto">
|
|
<Table>
|
|
<TableCaption>En liste over arbeidstimer.</TableCaption>
|
|
<TableHeader>
|
|
<TableRow>
|
|
<TableHead>Bruker</TableHead>
|
|
<TableHead>Timer</TableHead>
|
|
<TableHead>Prosjekt</TableHead>
|
|
<TableHead class="text-right">Handlinger</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
<TableRow
|
|
v-for="wh in workHoursList"
|
|
:key="wh.id"
|
|
>
|
|
<TableCell class="font-medium">
|
|
{{ wh.user_name }}
|
|
</TableCell>
|
|
<TableCell>
|
|
{{ wh.ordinary_hours }}
|
|
</TableCell>
|
|
<TableCell>
|
|
<!-- list project names, comma-separated -->
|
|
{{ wh.project_name }}
|
|
</TableCell>
|
|
<TableCell class="text-right">
|
|
<WorkHourDropdown :workHour="wh" />
|
|
</TableCell>
|
|
</TableRow>
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
<!-- Pagination controls -->
|
|
<div class="flex items-center justify-between p-6">
|
|
<div class="text-sm text-gray-600">
|
|
Side {{ currentPage }} av {{ lastPage }} ·
|
|
Totalt {{ page.props.workHours.total }} poster
|
|
</div>
|
|
<div class="space-x-2">
|
|
<Link
|
|
:href="route('smartdok.work-hours.index', { page: prevPage })"
|
|
>
|
|
<Button variant="outline" :disabled="currentPage === 1">
|
|
Forrige
|
|
</Button>
|
|
</Link>
|
|
<Link
|
|
:href="route('smartdok.work-hours.index', { page: nextPage })"
|
|
>
|
|
<Button variant="outline" :disabled="currentPage === lastPage">
|
|
Neste
|
|
</Button>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</AppLayout>
|
|
</template>
|