141 lines
5.1 KiB
Vue
141 lines
5.1 KiB
Vue
<script setup>
|
|
import { getAllApplications, approveApplication, denyApplication } from '@/api/application';
|
|
import { ApplicationStatus } from '@shared/types/application'
|
|
import {
|
|
Table,
|
|
TableBody,
|
|
TableCaption,
|
|
TableCell,
|
|
TableHead,
|
|
TableHeader,
|
|
TableRow,
|
|
} from '@/components/ui/table'
|
|
import Button from '@/components/ui/button/Button.vue';
|
|
import { computed, onMounted, ref, watch } from 'vue';
|
|
import { useRoute, useRouter } from 'vue-router';
|
|
import { CheckIcon, XIcon } from 'lucide-vue-next';
|
|
import Application from './Application.vue';
|
|
import MemberCard from '@/components/members/MemberCard.vue';
|
|
|
|
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)
|
|
}
|
|
|
|
const router = useRouter();
|
|
function openApplication(id) {
|
|
if (!id) return;
|
|
router.push(`/administration/applications/${id}`)
|
|
}
|
|
|
|
function closeApplication() {
|
|
router.push('/administration/applications')
|
|
}
|
|
|
|
const route = useRoute();
|
|
|
|
watch(() => route.params.id, (newId) => {
|
|
if (newId === undefined) {
|
|
}
|
|
})
|
|
|
|
// const openPanel = ref(false);
|
|
const openPanel = computed(() => route.params.id !== undefined)
|
|
|
|
|
|
onMounted(async () => {
|
|
appList.value = await getAllApplications();
|
|
|
|
//preload application
|
|
if (route.params.id != undefined) {
|
|
openApplication(route.params.id)
|
|
}
|
|
})
|
|
</script>
|
|
<template>
|
|
<div class="px-20 mx-auto max-w-[100rem] w-full flex mt-5 h-52 min-h-0 overflow-hidden">
|
|
<!-- application list -->
|
|
<div :class="openPanel == false ? 'w-full' : 'w-2/5'" class="pr-9">
|
|
<h1 class="scroll-m-20 text-2xl font-semibold tracking-tight">Manage Applications</h1>
|
|
<div class="max-h-[80vh] overflow-hidden">
|
|
<Table class="w-full">
|
|
<TableHeader>
|
|
<TableRow>
|
|
<TableHead>User</TableHead>
|
|
<TableHead class="text-right">Date Submitted</TableHead>
|
|
<TableHead class="text-right">Status</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
</Table>
|
|
|
|
<!-- Scrollable body container -->
|
|
<div class="overflow-y-auto max-h-[70vh] scrollbar-themed">
|
|
<Table class="w-full">
|
|
<TableBody>
|
|
<TableRow v-for="app in appList" :key="app.id" class="cursor-pointer"
|
|
@click="openApplication(app.id)">
|
|
<TableCell class="font-medium">
|
|
<MemberCard :memberId="app.member_id"></MemberCard>
|
|
</TableCell>
|
|
<TableCell class="text-right" :title="formatExact(app.submitted_at)">
|
|
{{ formatAgo(app.submitted_at) }}
|
|
</TableCell>
|
|
|
|
<TableCell class="text-right font-semibold" :class="[
|
|
app.app_status === ApplicationStatus.Pending && 'text-yellow-500',
|
|
app.app_status === ApplicationStatus.Accepted && 'text-green-500',
|
|
app.app_status === ApplicationStatus.Denied && 'text-destructive'
|
|
]">
|
|
{{ app.app_status }}
|
|
</TableCell>
|
|
</TableRow>
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-if="openPanel" class="pl-9 border-l w-3/5" :key="$route.params.id">
|
|
<div class="mb-5 flex justify-between">
|
|
<p class="scroll-m-20 text-2xl font-semibold tracking-tight"> Application</p>
|
|
<button @click="closeApplication()" class="cursor-pointer">
|
|
<XIcon></XIcon>
|
|
</button>
|
|
</div>
|
|
<div class="overflow-y-auto max-h-[80vh] h-full mt-5 scrollbar-themed">
|
|
<Application :mode="'view-recruiter'"></Application>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped></style> |