implemented LOA cancelling and extensioning

ui/src/App.vue

@@ -5,6 +5,7 @@ import { useUserStore } from './stores/user';
 import Alert from './components/ui/alert/Alert.vue';
 import AlertDescription from './components/ui/alert/AlertDescription.vue';
 import Navbar from './components/Navigation/Navbar.vue';
+import { cancelLOA } from './api/loa';
 
 const userStore = useUserStore();
 
@@ -29,10 +30,11 @@ const environment = import.meta.env.VITE_ENVIRONMENT;
           <p>This is a development build of the application. Some features will be unavailable or unstable.</p>
         </AlertDescription>
       </Alert>
-      <Alert v-if="userStore.user?.loa?.[0]" class="m-2 mx-auto w-5xl" variant="info">
+      <Alert v-if="userStore.user?.LOAData?.[0]" class="m-2 mx-auto w-5xl" variant="info">
         <AlertDescription class="flex flex-row items-center text-nowrap gap-5 mx-auto">
-          <p>You are on LOA until <strong>{{ formatDate(userStore.user?.loa?.[0].end_date) }}</strong></p>
-          <Button variant="secondary">End LOA</Button>
+          <p>You are on LOA until <strong>{{ formatDate(userStore.user?.LOAData?.[0].end_date) }}</strong></p>
+          <Button variant="secondary" @click="async () => { await cancelLOA(userStore.user?.LOAData?.[0].id); userStore.loadUser(); }">End
+            LOA</Button>
         </AlertDescription>
       </Alert>
     </div>

ui/src/api/loa.ts

@@ -90,7 +90,6 @@ export async function getLoaTypes(): Promise<LOAType[]> {
 };
 
 export async function getLoaPolicy(): Promise<string> {
-    //@ts-ignore
     const res = await fetch(`${addr}/loa/policy`, {
         method: "GET",
         credentials: 'include',
@@ -106,3 +105,34 @@ export async function getLoaPolicy(): Promise<string> {
         return null;
     }
 }
+
+export async function cancelLOA(id: number, admin: boolean = false) {
+    let route = admin ? 'adminCancel' : 'cancel';
+    const res = await fetch(`${addr}/loa/${route}/${id}`, {
+        method: "POST",
+        credentials: 'include',
+    });
+
+    if (res.ok) {
+        return
+    } else {
+        throw new Error("Could not cancel LOA");
+    }
+}
+
+export async function extendLOA(id: number, to: Date) {
+    const res = await fetch(`${addr}/loa/extend/${id}`, {
+        method: "POST",
+        credentials: 'include',
+        body: JSON.stringify({ to }),
+        headers: {
+            "Content-Type": "application/json",
+        }
+    });
+
+    if (res.ok) {
+        return
+    } else {
+        throw new Error("Could not extend LOA");
+    }
+}

ui/src/components/loa/loaForm.vue

@@ -177,7 +177,7 @@ const maxEndDate = computed(() => {
                                 <FieldLabel>Type</FieldLabel>
                                 <Select :model-value="field.value" @update:model-value="field.onChange">
                                     <SelectTrigger class="w-full">
-                                        <SelectValue></SelectValue>
+                                        <SelectValue placeholder="Select type"></SelectValue>
                                     </SelectTrigger>
                                     <SelectContent>
                                         <SelectItem v-for="type in loaTypes" :value="type">

ui/src/components/loa/loaList.vue

@@ -16,30 +16,47 @@ import {
     DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu"
 import { Ellipsis } from "lucide-vue-next";
-import { getAllLOAs, LOARequest } from "@/api/loa";
+import { cancelLOA, extendLOA, getAllLOAs } 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"
+
 
 const LOAList = ref<LOARequest[]>([]);
 
 onMounted(async () => {
-    LOAList.value = await getAllLOAs();
+    await loadLOAs();
 });
 
-function formatDate(dateStr: string): string {
-    if (!dateStr) return "";
-    return new Date(dateStr).toLocaleDateString("en-US", {
+async function loadLOAs() {
+    // const unsort = await getAllLOAs();
+    // LOAList.value = sortByStartDate(unsort);
+    LOAList.value = await getAllLOAs();
+}
+
+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: {
-    start_date: string;
-    end_date: string;
-    deleted?: number;
-}): "Upcoming" | "Active" | "Expired" | "Cancelled" {
-    if (loa.deleted) return "Cancelled";
+function loaStatus(loa: LOARequest): "Upcoming" | "Active" | "Overdue" | "Closed" {
+    if (loa.closed) return "Closed";
 
     const now = new Date();
     const start = new Date(loa.start_date);
@@ -47,9 +64,9 @@ function loaStatus(loa: {
 
     if (now < start) return "Upcoming";
     if (now >= start && now <= end) return "Active";
-    if (now > end) return "Expired";
+    if (now > end) return "Overdue";
 
-    return "Expired"; // fallback
+    return "Overdue"; // fallback
 }
 
 function sortByStartDate(loas: LOARequest[]): LOARequest[] {
@@ -58,50 +75,102 @@ function sortByStartDate(loas: LOARequest[]): LOARequest[] {
     );
 }
 
-const sortedLoas = computed(() => sortByStartDate(LOAList.value));
+async function cancelAndReload(id: number) {
+    await cancelLOA(id, true);
+    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 class="w-5xl mx-auto">
-        <Table>
-            <TableHeader>
-                <TableRow>
-                    <TableHead class="w-[100px]">Member</TableHead>
-                    <TableHead>Start</TableHead>
-                    <TableHead>End</TableHead>
-                    <TableHead>Reason</TableHead>
-                    <TableHead>Posted on</TableHead>
-                    <TableHead>Status</TableHead>
-                </TableRow>
-            </TableHeader>
-            <TableBody>
-                <TableRow v-for="post in sortedLoas" :key="post.id" class="hover:bg-muted/50">
-                    <TableCell class="font-medium">
-                        {{ post.name }}
-                    </TableCell>
-                    <TableCell>{{ formatDate(post.start_date) }}</TableCell>
-                    <TableCell>{{ 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-500">Upcoming</Badge>
-                        <Badge v-else-if="loaStatus(post) === 'Active'" class="bg-green-500">Active</Badge>
-                        <Badge v-else-if="loaStatus(post) === 'Expired'" class="bg-gray-400">Expired</Badge>
-                        <Badge v-else class="bg-red-500">Cancelled</Badge>
-                    </TableCell>
-                    <TableCell @click.stop="console.log('hi')" class="text-right">
-                        <DropdownMenu>
-                            <DropdownMenuTrigger class="cursor-pointer">
-                                <Ellipsis></Ellipsis>
-                            </DropdownMenuTrigger>
-                            <DropdownMenuContent>
-                                <DropdownMenuItem :variant="'destructive'">Cancel</DropdownMenuItem>
-                            </DropdownMenuContent>
-                        </DropdownMenu>
-                    </TableCell>
-
-                </TableRow>
-            </TableBody>
-        </Table>
+    <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" @click="isExtending = true; targetLOA = post">
+                                        Extend
+                                    </DropdownMenuItem>
+                                    <DropdownMenuItem :variant="'destructive'" @click="cancelAndReload(post.id)">End
+                                    </DropdownMenuItem>
+                                </DropdownMenuContent>
+                            </DropdownMenu>
+                        </TableCell>
+                    </TableRow>
+                </TableBody>
+            </Table>
+        </div>
     </div>
 </template>