148 lines
4.6 KiB
Vue
148 lines
4.6 KiB
Vue
<script setup>
|
|
import { loadMyApplications } 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 { onMounted, ref, watch } from 'vue';
|
|
import { useRoute, useRouter } from 'vue-router';
|
|
import { CheckIcon, XIcon } from 'lucide-vue-next';
|
|
import Application from './Application.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) {
|
|
router.push(`/applications/${id}`)
|
|
openPanel.value = true;
|
|
}
|
|
|
|
const route = useRoute();
|
|
|
|
watch(() => route.params.id, (newId) => {
|
|
if (newId === undefined) {
|
|
openPanel.value = false;
|
|
}
|
|
})
|
|
|
|
const openPanel = ref(false);
|
|
|
|
onMounted(async () => {
|
|
appList.value = await loadMyApplications();
|
|
|
|
//preload application
|
|
if (route.params.id != undefined) {
|
|
openApplication(route.params.id)
|
|
} else {
|
|
|
|
}
|
|
})
|
|
</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 mb-5">My Applications</h1>
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow>
|
|
<TableHead>Date Submitted</TableHead>
|
|
<TableHead class="text-right">Status</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody class="overflow-y-auto scrollbar-themed">
|
|
<TableRow v-for="app in appList" :key="app.id" class="cursor-pointer"
|
|
:onClick="() => { openApplication(app.id) }">
|
|
<TableCell :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 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>
|
|
</div>
|
|
<div class="overflow-y-auto max-h-[80vh] h-full mt-5 scrollbar-themed">
|
|
<Application :mode="'view-self-id'"></Application>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
/* Firefox */
|
|
.scrollbar-themed {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: #555 #1f1f1f;
|
|
padding-right: 6px;
|
|
}
|
|
|
|
/* Chrome, Edge, Safari */
|
|
.scrollbar-themed::-webkit-scrollbar {
|
|
width: 10px;
|
|
/* slightly wider to allow padding look */
|
|
}
|
|
|
|
.scrollbar-themed::-webkit-scrollbar-track {
|
|
background: #1f1f1f;
|
|
margin-left: 6px;
|
|
/* ❗ adds space between content + scrollbar */
|
|
}
|
|
|
|
.scrollbar-themed::-webkit-scrollbar-thumb {
|
|
background: #555;
|
|
border-radius: 9999px;
|
|
}
|
|
|
|
.scrollbar-themed::-webkit-scrollbar-thumb:hover {
|
|
background: #777;
|
|
}
|
|
</style> |