17th-Ranger-Battalion-ORG/milsim-site-v4
8
1
Fork 0
Code Issues 22 Pull Requests Actions 3 Packages Projects Releases 5 Wiki Activity

implemented expandable LOA details

Browse Source
This commit is contained in:
ajdj100
2025-12-15 19:06:07 -05:00
parent 8aaaea5ed0
commit 2a0d7c2ff2
1 changed files with 84 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

125
ui/src/components/loa/loaList.vue
View File

@@ -15,7 +15,7 @@ import {
DropdownMenuItem,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { Ellipsis } from "lucide-vue-next";
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";
@@ -104,6 +104,9 @@ async function commitExtend() {
isExtending.value = false;
await loadLOAs();
}
const expanded = ref<number | null>(null);
const hoverID = ref<number | null>(null);
</script>
<template>
@@ -139,51 +142,91 @@ async function commitExtend() {
<TableHead>Type</TableHead>
<TableHead>Start</TableHead>
<TableHead>End</TableHead>
<TableHead class="w-[500px]">Reason</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">
<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">
<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)">{{ 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>
</TableRow>
<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>