Built mobile display for LOA List
This commit is contained in:
@@ -141,29 +141,125 @@
|
||||
<template>
|
||||
<div>
|
||||
<Dialog :open="isExtending" @update:open="(val) => isExtending = val">
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Extend {{ targetLOA.name }}'s Leave of Absence </DialogTitle>
|
||||
<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 gap-5">
|
||||
<Calendar v-model="extendTo" class="rounded-md border shadow-sm w-min" layout="month-and-year"
|
||||
<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 flex-col w-full gap-3 px-2">
|
||||
<p>Quick Options</p>
|
||||
<Button variant="outline" @click="extendTo = toCalendarDate(targetEnd).add({ days: 7 })">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 variant="outline" @click="extendTo = toCalendarDate(targetEnd).add({ months: 1 })">1
|
||||
<Button class="w-full" 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 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>
|
||||
@@ -242,7 +338,7 @@
|
||||
<div class="w-full p-4 mb-6 space-y-4">
|
||||
|
||||
<!-- Dates -->
|
||||
<div class="grid grid-cols-3 gap-4 text-sm">
|
||||
<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">
|
||||
@@ -266,16 +362,12 @@
|
||||
</div>
|
||||
|
||||
<!-- Reason -->
|
||||
<div class="space-y-2">
|
||||
<div class="flex items-center gap-2">
|
||||
<h4 class="text-sm font-semibold text-foreground">
|
||||
Reason
|
||||
</h4>
|
||||
<Separator class="flex-1" />
|
||||
</div>
|
||||
<div class="space-y-2 border-t pt-3">
|
||||
<h4 class="text-sm font-semibold text-foreground">
|
||||
Reason
|
||||
</h4>
|
||||
|
||||
<div
|
||||
class="rounded-lg border bg-muted/40 px-4 py-3 text-sm leading-relaxed whitespace-pre-wrap text-muted-foreground">
|
||||
<div class="text-sm leading-relaxed whitespace-pre-wrap text-muted-foreground">
|
||||
{{ post.reason || 'No reason provided.' }}
|
||||
</div>
|
||||
</div>
|
||||
@@ -287,8 +379,9 @@
|
||||
</template>
|
||||
</TableBody>
|
||||
</Table>
|
||||
<div class="mt-5 flex justify-between">
|
||||
<div></div>
|
||||
</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 }">
|
||||
@@ -303,7 +396,7 @@
|
||||
<PaginationNext />
|
||||
</PaginationContent>
|
||||
</Pagination>
|
||||
<div class="flex items-center gap-3 text-sm">
|
||||
<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)"
|
||||
|
||||
@@ -47,7 +47,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
|
||||
<slot />
|
||||
|
||||
<DialogClose
|
||||
class="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
|
||||
class="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-3.5 right-3.5 inline-flex h-9 w-9 items-center justify-center rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none sm:top-4 sm:right-4 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-5"
|
||||
>
|
||||
<X />
|
||||
<span class="sr-only">Close</span>
|
||||
|
||||
Reference in New Issue
Block a user