milsim-site-v4/ui/src/components/loa/loaList.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 { Ellipsis } 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";

const props = defineProps<{
    adminMode?: boolean
}>()

const LOAList = ref<LOARequest[]>([]);

onMounted(async () => {
    await loadLOAs();
});

async function loadLOAs() {
    if (props.adminMode) {
        LOAList.value = await getAllLOAs();
    } 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
}

function sortByStartDate(loas: LOARequest[]): LOARequest[] {
    return [...loas].sort(
        (a, b) => new Date(b.start_date).getTime() - new Date(a.start_date).getTime()
    );
}

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();
}
</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>
                    <TableRow v-for="post in LOAList" :key="post.id" class="hover:bg-muted/50">
                        <TableCell class="font-medium">
                            {{ post.name }}
                        </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">
                                    <Ellipsis></Ellipsis>
                                </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)">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>
                    </TableRow>
                </TableBody>
            </Table>
        </div>
    </div>
</template>