milsim-site-v4/ui/src/pages/ManageApplications.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 { 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)
}

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(`/administration/applications/${id}`)
    openPanel.value = true;
}

function closeApplication() {
    router.push('/administration/applications')
    openPanel.value = false;
}

const route = useRoute();

watch(() => route.params.id, (newId) => {
    if (newId === undefined) {
        openPanel.value = false;
    }
})

const openPanel = ref(false);

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>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">{{ app.member_name }}</TableCell>
                                <TableCell :title="formatExact(app.submitted_at)">
                                    {{ formatAgo(app.submitted_at) }}
                                </TableCell>

                                <TableCell v-if="app.app_status === ApplicationStatus.Pending"
                                    class="inline-flex items-end gap-2">
                                    <Button variant="success" @click.stop="handleApprove(app.id)">
                                        <CheckIcon />
                                    </Button>
                                    <Button variant="destructive" @click.stop="handleDeny(app.id)">
                                        <XIcon />
                                    </Button>
                                </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>