285 lines
12 KiB
Vue
285 lines
12 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 { 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 {
|
|
LOAList.value = await getMyLOAs();
|
|
}
|
|
}
|
|
|
|
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" | "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);
|
|
|
|
if (now < start) return "Upcoming";
|
|
if (now >= start && now <= end) return "Active";
|
|
if (now > 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() {
|
|
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>
|
|
<DialogHeader>
|
|
<DialogTitle>Extend {{ targetLOA.name }}'s Leave of Absence </DialogTitle>
|
|
</DialogHeader>
|
|
<div class="flex gap-5">
|
|
<Calendar v-model="extendTo" class="rounded-md border shadow-sm w-min" layout="month-and-year"
|
|
:min-value="toCalendarDate(targetEnd)"
|
|
:max-value="toCalendarDate(targetEnd).add({ years: 1 })" />
|
|
<div class="flex flex-col w-full gap-3 px-2">
|
|
<p>Quick Options</p>
|
|
<Button variant="outline" @click="extendTo = toCalendarDate(targetEnd).add({ days: 7 })">1
|
|
Week</Button>
|
|
<Button variant="outline" @click="extendTo = toCalendarDate(targetEnd).add({ months: 1 })">1
|
|
Month</Button>
|
|
</div>
|
|
</div>
|
|
<div class="flex justify-end gap-4">
|
|
<Button variant="outline" @click="isExtending = false">Cancel</Button>
|
|
<Button @click="commitExtend">Extend</Button>
|
|
</div>
|
|
</DialogContent>
|
|
</Dialog>
|
|
<div class="max-w-7xl w-full mx-auto">
|
|
<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) === '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">
|
|
<Ellipsis class="size-6"></Ellipsis>
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent>
|
|
<DropdownMenuItem v-if="!post.closed && props.adminMode"
|
|
@click="isExtending = true; targetLOA = post">
|
|
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" variant="ghost">
|
|
<ChevronUp class="size-6" />
|
|
</Button>
|
|
<Button v-else @click.stop="expanded = post.id" 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-3 mb-6 space-y-3">
|
|
<div class="flex justify-between items-start gap-4">
|
|
<div class="flex-1">
|
|
<!-- Title -->
|
|
<p class="text-md font-semibold text-foreground">
|
|
Reason
|
|
</p>
|
|
|
|
<!-- Content -->
|
|
<p
|
|
class="mt-1 text-md whitespace-pre-wrap leading-relaxed text-muted-foreground">
|
|
{{ post.reason }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</TableCell>
|
|
</TableRow>
|
|
|
|
</template>
|
|
</TableBody>
|
|
</Table>
|
|
<div class="mt-5 flex justify-between">
|
|
<div></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 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>
|