103 lines
3.6 KiB
Vue
103 lines
3.6 KiB
Vue
<script setup>
|
|
import { getAllApplications, approveApplication, denyApplication, Status } from '@/api/application';
|
|
import {
|
|
Table,
|
|
TableBody,
|
|
TableCaption,
|
|
TableCell,
|
|
TableHead,
|
|
TableHeader,
|
|
TableRow,
|
|
} from '@/components/ui/table'
|
|
import Button from '@/components/ui/button/Button.vue';
|
|
import { onMounted, ref } from 'vue';
|
|
import { useRouter } from 'vue-router';
|
|
import { CheckIcon, XIcon } from 'lucide-vue-next';
|
|
|
|
const appList = ref([]);
|
|
const now = Date.now();
|
|
// relative time formatter (uses user locale)
|
|
const rtf = new Intl.RelativeTimeFormat(undefined, { numeric: 'auto' })
|
|
// exact date/time for tooltip
|
|
const exactFmt = new Intl.DateTimeFormat(undefined, {
|
|
dateStyle: 'medium', timeStyle: 'short', timeZone: 'America/Toronto'
|
|
})
|
|
|
|
function formatAgo(iso) {
|
|
const d = new Date(iso)
|
|
if (isNaN(d)) return ''
|
|
let diff = (d.getTime() - now) / 1000 // seconds relative to page load
|
|
const divisions = [
|
|
{ amount: 60, name: 'second' },
|
|
{ amount: 60, name: 'minute' },
|
|
{ amount: 24, name: 'hour' },
|
|
{ amount: 7, name: 'day' },
|
|
{ amount: 4.34524, name: 'week' }, // avg weeks per month
|
|
{ amount: 12, name: 'month' },
|
|
{ amount: Infinity, name: 'year' },
|
|
]
|
|
for (const div of divisions) {
|
|
if (Math.abs(diff) < div.amount) {
|
|
return rtf.format(Math.round(diff), div.name)
|
|
}
|
|
diff /= div.amount
|
|
}
|
|
}
|
|
|
|
function formatExact(iso) {
|
|
const d = new Date(iso)
|
|
return isNaN(d) ? '' : exactFmt.format(d)
|
|
}
|
|
|
|
async function handleApprove(id) {
|
|
await approveApplication(id);
|
|
appList.value = await getAllApplications();
|
|
}
|
|
|
|
async function handleDeny(id) {
|
|
await denyApplication(id);
|
|
appList.value = await getAllApplications();
|
|
}
|
|
|
|
const router = useRouter();
|
|
function openApplication(id) {
|
|
router.push(`/applications/${id}`)
|
|
}
|
|
|
|
onMounted(async () => {
|
|
appList.value = await getAllApplications();
|
|
})
|
|
</script>
|
|
<template>
|
|
<Table class="mx-auto max-w-3xl">
|
|
<!-- <TableCaption>A list of your recent invoices.</TableCaption> -->
|
|
<TableHeader>
|
|
<TableRow>
|
|
<TableHead class="w-[100px]">User</TableHead>
|
|
<TableHead>Date Submitted</TableHead>
|
|
<TableHead class="text-right"></TableHead>
|
|
<TableHead class="text-right">Status</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
<TableRow v-for="app in appList" :key="app.id" class="cursor-pointer"
|
|
:onClick="() => { openApplication(app.id) }">
|
|
<TableCell class="font-medium">{{ app.member_name }}</TableCell>
|
|
<TableCell :title="formatExact(app.submitted_at)">
|
|
{{ formatAgo(app.submitted_at) }}
|
|
</TableCell>
|
|
<TableCell v-if="app.app_status === Status.Pending" class="inline-flex items-end gap-2">
|
|
<Button variant="success" @click.stop="() => { handleApprove(app.id) }"><CheckIcon></CheckIcon></Button>
|
|
<Button variant="destructive" @click.stop="() => { handleDeny(app.id) }"><XIcon></XIcon></Button>
|
|
</TableCell>
|
|
|
|
<TableCell class="text-right font-semibold" :class="[
|
|
,
|
|
app.app_status === Status.Pending && 'text-yellow-500',
|
|
app.app_status === Status.Accepted && 'text-green-500',
|
|
app.app_status === Status.Denied && 'text-destructive'
|
|
]">{{ app.app_status }}</TableCell>
|
|
</TableRow>
|
|
</TableBody>
|
|
</Table>
|
|
</template> |