414 lines
22 KiB
Vue
414 lines
22 KiB
Vue
<script setup lang="ts">
|
|
import {
|
|
Table,
|
|
TableBody,
|
|
TableCaption,
|
|
TableCell,
|
|
TableHead,
|
|
TableHeader,
|
|
TableRow,
|
|
} from "@/components/ui/table"
|
|
import { Badge } from '@/components/ui/badge'
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuTrigger,
|
|
} from "@/components/ui/dropdown-menu"
|
|
import { ChevronDown, ChevronUp, Ellipsis, X } from "lucide-vue-next";
|
|
import { adminExtendLOA, cancelLOA, extendLOA, getAllLOAs, getMyLOAs } from "@/api/loa";
|
|
import { onMounted, ref, computed } from "vue";
|
|
import { LOARequest } from "@shared/types/loa";
|
|
import Dialog from "../ui/dialog/Dialog.vue";
|
|
import DialogTrigger from "../ui/dialog/DialogTrigger.vue";
|
|
import DialogContent from "../ui/dialog/DialogContent.vue";
|
|
import DialogHeader from "../ui/dialog/DialogHeader.vue";
|
|
import DialogTitle from "../ui/dialog/DialogTitle.vue";
|
|
import DialogDescription from "../ui/dialog/DialogDescription.vue";
|
|
import Button from "../ui/button/Button.vue";
|
|
import Calendar from "../ui/calendar/Calendar.vue";
|
|
import {
|
|
CalendarDate,
|
|
getLocalTimeZone,
|
|
} from "@internationalized/date"
|
|
import { el } from "@fullcalendar/core/internal-common";
|
|
import MemberCard from "../members/MemberCard.vue";
|
|
import {
|
|
Pagination,
|
|
PaginationContent,
|
|
PaginationEllipsis,
|
|
PaginationItem,
|
|
PaginationNext,
|
|
PaginationPrevious,
|
|
} from '@/components/ui/pagination'
|
|
import { pagination } from "@shared/types/pagination";
|
|
|
|
const props = defineProps<{
|
|
adminMode?: boolean
|
|
}>()
|
|
|
|
const LOAList = ref<LOARequest[]>([]);
|
|
|
|
onMounted(async () => {
|
|
await loadLOAs();
|
|
});
|
|
|
|
async function loadLOAs() {
|
|
if (props.adminMode) {
|
|
let result = await getAllLOAs(pageNum.value, pageSize.value);
|
|
LOAList.value = result.data;
|
|
pageData.value = result.pagination;
|
|
} else {
|
|
let result = await getMyLOAs(pageNum.value, pageSize.value);
|
|
LOAList.value = result.data;
|
|
pageData.value = result.pagination;
|
|
}
|
|
}
|
|
|
|
function formatDate(date: Date): string {
|
|
if (!date) return "";
|
|
date = typeof date === 'string' ? new Date(date) : date;
|
|
return date.toLocaleDateString("en-US", {
|
|
year: "numeric",
|
|
month: "short",
|
|
day: "numeric",
|
|
});
|
|
}
|
|
|
|
function loaStatus(loa: LOARequest): "Upcoming" | "Active" | "Extended" | "Overdue" | "Closed" {
|
|
if (loa.closed) return "Closed";
|
|
|
|
const now = new Date();
|
|
const start = new Date(loa.start_date);
|
|
const end = new Date(loa.end_date);
|
|
const extension = new Date(loa.extended_till);
|
|
|
|
if (now < start) return "Upcoming";
|
|
if (now >= start && (now <= end)) return "Active";
|
|
if (now >= start && (now <= extension)) return "Extended";
|
|
if (now > loa.extended_till || end) return "Overdue";
|
|
|
|
return "Overdue"; // fallback
|
|
}
|
|
|
|
async function cancelAndReload(id: number) {
|
|
await cancelLOA(id, props.adminMode);
|
|
await loadLOAs();
|
|
}
|
|
|
|
const isExtending = ref(false);
|
|
const targetLOA = ref<LOARequest | null>(null);
|
|
const extendTo = ref<CalendarDate | null>(null);
|
|
|
|
const targetEnd = computed(() => { return targetLOA.value.extended_till ? targetLOA.value.extended_till : targetLOA.value.end_date })
|
|
function toCalendarDate(date: Date): CalendarDate {
|
|
if (typeof date === 'string')
|
|
date = new Date(date);
|
|
return new CalendarDate(date.getFullYear(), date.getMonth() + 1, date.getDate())
|
|
}
|
|
|
|
async function commitExtend() {
|
|
if (props.adminMode) {
|
|
await adminExtendLOA(targetLOA.value.id, extendTo.value.toDate(getLocalTimeZone()));
|
|
} else {
|
|
await extendLOA(targetLOA.value.id, extendTo.value.toDate(getLocalTimeZone()));
|
|
}
|
|
isExtending.value = false;
|
|
await loadLOAs();
|
|
}
|
|
|
|
const expanded = ref<number | null>(null);
|
|
const hoverID = ref<number | null>(null);
|
|
|
|
const pageNum = ref<number>(1);
|
|
const pageData = ref<pagination>();
|
|
|
|
const pageSize = ref<number>(15)
|
|
const pageSizeOptions = [10, 15, 30]
|
|
|
|
function setPageSize(size: number) {
|
|
pageSize.value = size
|
|
pageNum.value = 1;
|
|
loadLOAs();
|
|
}
|
|
|
|
function setPage(pagenum: number) {
|
|
pageNum.value = pagenum;
|
|
loadLOAs();
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<Dialog :open="isExtending" @update:open="(val) => isExtending = val">
|
|
<DialogContent class="w-[95vw] max-w-[95vw] p-4 sm:max-w-fit sm:p-6">
|
|
<DialogHeader class="gap-1 pr-12 text-left">
|
|
<DialogTitle class="text-base leading-tight sm:text-lg">Extend Leave of Absence</DialogTitle>
|
|
<DialogDescription class="truncate text-xs text-muted-foreground sm:text-sm">
|
|
{{ targetLOA?.name }}
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
<div class="flex flex-col gap-4 sm:flex-row sm:items-start sm:gap-5">
|
|
<Calendar v-model="extendTo"
|
|
class="mx-auto w-min rounded-md border shadow-sm sm:mx-0"
|
|
layout="month-and-year"
|
|
:min-value="toCalendarDate(targetEnd)"
|
|
:max-value="props.adminMode ? toCalendarDate(targetEnd).add({ years: 1 }) : toCalendarDate(targetEnd).add({ months: 1 })" />
|
|
<div class="flex w-full flex-col gap-2 sm:gap-3">
|
|
<p class="text-sm font-medium text-muted-foreground">Quick Options</p>
|
|
<Button class="w-full" variant="outline" @click="extendTo = toCalendarDate(targetEnd).add({ days: 7 })">1
|
|
Week</Button>
|
|
<Button class="w-full" variant="outline" @click="extendTo = toCalendarDate(targetEnd).add({ months: 1 })">1
|
|
Month</Button>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-row justify-end gap-2 pt-2 sm:gap-4 sm:pt-0">
|
|
<Button class="flex-1 sm:flex-none" variant="outline" @click="isExtending = false">Cancel</Button>
|
|
<Button class="flex-1 sm:flex-none" @click="commitExtend">Extend</Button>
|
|
</div>
|
|
</DialogContent>
|
|
</Dialog>
|
|
<div class="max-w-7xl w-full mx-auto">
|
|
<div class="space-y-3 md:hidden">
|
|
<template v-for="post in LOAList" :key="`mobile-${post.id}`">
|
|
<div class="rounded-lg border bg-card p-2.5 shadow-sm">
|
|
<div class="grid grid-cols-[minmax(0,1fr)_auto] items-center gap-2">
|
|
<div class="min-w-0 overflow-hidden">
|
|
<div class="max-w-[70vw] overflow-hidden whitespace-nowrap">
|
|
<MemberCard :member-id="post.member_id"></MemberCard>
|
|
</div>
|
|
</div>
|
|
<Badge v-if="loaStatus(post) === 'Upcoming'" class="shrink-0 bg-blue-400">Upcoming</Badge>
|
|
<Badge v-else-if="loaStatus(post) === 'Active'" class="shrink-0 bg-green-500">Active</Badge>
|
|
<Badge v-else-if="loaStatus(post) === 'Extended'" class="shrink-0 bg-green-500">Extended</Badge>
|
|
<Badge v-else-if="loaStatus(post) === 'Overdue'" class="shrink-0 bg-yellow-400">Overdue</Badge>
|
|
<Badge v-else class="shrink-0 bg-gray-400">Ended</Badge>
|
|
</div>
|
|
|
|
<div class="mt-1 grid grid-cols-2 gap-x-4 gap-y-1">
|
|
<div>
|
|
<p class="text-[11px] uppercase tracking-wide text-muted-foreground/90">Start</p>
|
|
<p class="text-sm font-semibold text-foreground">{{ formatDate(post.start_date) }}</p>
|
|
</div>
|
|
<div class="text-right">
|
|
<p class="text-[11px] uppercase tracking-wide text-muted-foreground/90">End</p>
|
|
<p class="text-sm font-semibold text-foreground">{{ post.extended_till ? formatDate(post.extended_till) : formatDate(post.end_date) }}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-1 flex items-center justify-end gap-1">
|
|
<Button variant="ghost" class="h-8 px-2 text-xs text-muted-foreground" @click="expanded = expanded === post.id ? null : post.id">
|
|
<span class="mr-1">Details</span>
|
|
<ChevronUp v-if="expanded === post.id" class="size-4" />
|
|
<ChevronDown v-else class="size-4" />
|
|
</Button>
|
|
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger class="cursor-pointer">
|
|
<Button variant="ghost" size="icon" class="size-8 text-muted-foreground">
|
|
<Ellipsis class="size-5"></Ellipsis>
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent>
|
|
<DropdownMenuItem v-if="!post.closed"
|
|
:disabled="post.extended_till !== null && !props.adminMode"
|
|
@click="isExtending = true; targetLOA = post">
|
|
{{ (post.extended_till !== null && !props.adminMode) ? 'Extend (Already Extended)' : 'Extend' }}
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem v-if="!post.closed" :variant="'destructive'"
|
|
@click="cancelAndReload(post.id)">{{ loaStatus(post) === 'Upcoming' ?
|
|
'Cancel' :
|
|
'End' }}
|
|
</DropdownMenuItem>
|
|
<p v-if="post.closed || (!props.adminMode && post.closed)"
|
|
class="p-2 text-center text-sm">
|
|
No actions
|
|
</p>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</div>
|
|
|
|
<div v-if="expanded === post.id" class="mt-2 space-y-2.5 border-t pt-2 text-sm">
|
|
<div class="space-y-1.5">
|
|
<div class="flex items-center justify-between gap-3">
|
|
<span class="text-muted-foreground/90">Type</span>
|
|
<span class="text-right font-semibold text-foreground">{{ post.type_name }}</span>
|
|
</div>
|
|
<div class="flex items-center justify-between gap-3">
|
|
<span class="text-muted-foreground/90">Posted on</span>
|
|
<span class="text-right font-semibold text-foreground">{{ formatDate(post.filed_date) }}</span>
|
|
</div>
|
|
<div class="flex items-center justify-between gap-3">
|
|
<span class="text-muted-foreground/90">Original end</span>
|
|
<span class="text-right font-semibold text-foreground">{{ formatDate(post.end_date) }}</span>
|
|
</div>
|
|
<div class="flex items-center justify-between gap-3">
|
|
<span class="text-muted-foreground/90">Extended to</span>
|
|
<span class="text-right font-semibold text-foreground">{{ post.extended_till ? formatDate(post.extended_till) : 'N/A' }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<h4 class="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground/90">Reason</h4>
|
|
<p class="mt-1 whitespace-pre-wrap text-sm leading-relaxed text-foreground/90">
|
|
{{ post.reason || 'No reason provided.' }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
|
|
<div class="hidden overflow-x-auto md:block">
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow>
|
|
<TableHead>Member</TableHead>
|
|
<TableHead>Type</TableHead>
|
|
<TableHead>Start</TableHead>
|
|
<TableHead>End</TableHead>
|
|
<!-- <TableHead class="w-[500px]">Reason</TableHead> -->
|
|
<TableHead>Posted on</TableHead>
|
|
<TableHead>Status</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
<template v-for="post in LOAList" :key="post.id">
|
|
<TableRow class="hover:bg-muted/50 cursor-pointer" @click="expanded = post.id"
|
|
@mouseenter="hoverID = post.id" @mouseleave="hoverID = null" :class="{
|
|
'border-b-0': expanded === post.id,
|
|
'bg-muted/50': hoverID === post.id
|
|
}">
|
|
<TableCell class="font-medium">
|
|
<MemberCard :member-id="post.member_id"></MemberCard>
|
|
</TableCell>
|
|
<TableCell>{{ post.type_name }}</TableCell>
|
|
<TableCell>{{ formatDate(post.start_date) }}</TableCell>
|
|
<TableCell>{{ post.extended_till ? formatDate(post.extended_till) :
|
|
formatDate(post.end_date) }}
|
|
</TableCell>
|
|
<!-- <TableCell>{{ post.reason }}</TableCell> -->
|
|
<TableCell>{{ formatDate(post.filed_date) }}</TableCell>
|
|
<TableCell>
|
|
<Badge v-if="loaStatus(post) === 'Upcoming'" class="bg-blue-400">Upcoming</Badge>
|
|
<Badge v-else-if="loaStatus(post) === 'Active'" class="bg-green-500">Active</Badge>
|
|
<Badge v-else-if="loaStatus(post) === 'Extended'" class="bg-green-500">Extended</Badge>
|
|
<Badge v-else-if="loaStatus(post) === 'Overdue'" class="bg-yellow-400">Overdue</Badge>
|
|
<Badge v-else class="bg-gray-400">Ended</Badge>
|
|
</TableCell>
|
|
<TableCell @click.stop="" class="text-right">
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger class="cursor-pointer">
|
|
<Button variant="ghost" size="icon">
|
|
<Ellipsis class="size-6"></Ellipsis>
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent>
|
|
<DropdownMenuItem v-if="!post.closed"
|
|
:disabled="post.extended_till !== null && !props.adminMode"
|
|
@click="isExtending = true; targetLOA = post">
|
|
{{ (post.extended_till !== null && !props.adminMode) ? 'Extend (Already Extended)' : 'Extend' }}
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem v-if="!post.closed" :variant="'destructive'"
|
|
@click="cancelAndReload(post.id)">{{ loaStatus(post) === 'Upcoming' ?
|
|
'Cancel' :
|
|
'End' }}
|
|
</DropdownMenuItem>
|
|
<!-- Fallback: no actions available -->
|
|
<p v-if="post.closed || (!props.adminMode && post.closed)"
|
|
class="p-2 text-center text-sm">
|
|
No actions
|
|
</p>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</TableCell>
|
|
<TableCell>
|
|
<Button v-if="expanded === post.id" @click.stop="expanded = null" size="icon"
|
|
variant="ghost">
|
|
<ChevronUp class="size-6" />
|
|
</Button>
|
|
<Button v-else @click.stop="expanded = post.id" size="icon" variant="ghost">
|
|
<ChevronDown class="size-6" />
|
|
</Button>
|
|
</TableCell>
|
|
</TableRow>
|
|
<TableRow v-if="expanded === post.id" @mouseenter="hoverID = post.id"
|
|
@mouseleave="hoverID = null" :class="{ 'bg-muted/50 border-t-0': hoverID === post.id }">
|
|
<TableCell :colspan="8" class="p-0">
|
|
<div class="w-full p-4 mb-6 space-y-4">
|
|
|
|
<!-- Dates -->
|
|
<div class="grid grid-cols-1 gap-4 text-sm lg:grid-cols-3">
|
|
<div>
|
|
<p class="text-muted-foreground">Start</p>
|
|
<p class="font-medium">
|
|
{{ formatDate(post.start_date) }}
|
|
</p>
|
|
</div>
|
|
|
|
<div>
|
|
<p class="text-muted-foreground">Original end</p>
|
|
<p class="font-medium">
|
|
{{ formatDate(post.end_date) }}
|
|
</p>
|
|
</div>
|
|
|
|
<div class="">
|
|
<p class="text-muted-foreground">Extended to</p>
|
|
<p class="font-medium text-foreground">
|
|
{{ post.extended_till ? formatDate(post.extended_till) : 'N/A' }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Reason -->
|
|
<div class="space-y-2 border-t pt-3">
|
|
<h4 class="text-sm font-semibold text-foreground">
|
|
Reason
|
|
</h4>
|
|
|
|
<div class="text-sm leading-relaxed whitespace-pre-wrap text-muted-foreground">
|
|
{{ post.reason || 'No reason provided.' }}
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</TableCell>
|
|
</TableRow>
|
|
|
|
</template>
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
<div class="mt-5 flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
|
|
<div class="hidden md:block"></div>
|
|
<Pagination v-slot="{ page }" :items-per-page="pageData?.pageSize || 10" :total="pageData?.total || 10"
|
|
:default-page="2" :page="pageNum" @update:page="setPage">
|
|
<PaginationContent v-slot="{ items }">
|
|
<PaginationPrevious />
|
|
<template v-for="(item, index) in items" :key="index">
|
|
<PaginationItem v-if="item.type === 'page'" :value="item.value"
|
|
:is-active="item.value === page">
|
|
{{ item.value }}
|
|
</PaginationItem>
|
|
</template>
|
|
<PaginationEllipsis :index="4" />
|
|
<PaginationNext />
|
|
</PaginationContent>
|
|
</Pagination>
|
|
<div class="flex items-center justify-end gap-3 text-sm">
|
|
<p class="text-muted-foreground text-nowrap">Per page:</p>
|
|
|
|
<button v-for="size in pageSizeOptions" :key="size" @click="setPageSize(size)"
|
|
class="px-2 py-1 rounded transition-colors" :class="{
|
|
'bg-muted font-semibold': pageSize === size,
|
|
'hover:bg-muted/50': pageSize !== size
|
|
}">
|
|
{{ size }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|