milsim-site-v4/ui/src/pages/Application.vue

<script setup lang="ts">
import ApplicationChat from '@/components/application/ApplicationChat.vue';
import ApplicationForm from '@/components/application/ApplicationForm.vue';
import { onMounted, ref } from 'vue';
import { ApplicationData, approveApplication, denyApplication, loadApplication, postApplication, postChatMessage, ApplicationStatus } from '@/api/application';
import { useRoute } from 'vue-router';
import Button from '@/components/ui/button/Button.vue';
import { CheckIcon, XIcon } from 'lucide-vue-next';

const appData = ref<ApplicationData>(null);
const appID = ref<number | null>(null);
const chatData = ref<object[]>([])
const readOnly = ref<boolean>(false);
const newApp = ref<boolean>(null);
const status = ref<ApplicationStatus>(null);
const decisionDate = ref<Date | null>(null);
const submitDate = ref<Date | null>(null);
const loading = ref<boolean>(true);
const member_name = ref<string>();

const props = defineProps<{
    mode?: "create" | "view-self" | "view-recruiter"
}>()

const finalMode = ref<"create" | "view-self" | "view-recruiter">("create");

async function loadByID(id: number | string) {
    const raw = await loadApplication(id);

    const data = raw.application;

    appID.value = data.id;
    appData.value = data.app_data;
    chatData.value = raw.comments;
    status.value = data.app_status;
    decisionDate.value = new Date(data.decision_at);
    submitDate.value = data.submitted_at ? new Date(data.submitted_at) : null;
    member_name.value = data.member_name;
    newApp.value = false;
    readOnly.value = true;
}

const router = useRoute();

onMounted(async () => {

    //recruiter mode
    if (props.mode === 'view-recruiter') {
        finalMode.value = 'view-recruiter';
        await loadByID(Number(router.params.id));
    }

    //viewer mode
    if (props.mode === 'view-self') {
        finalMode.value = 'view-self';
        await loadByID('me');
    }

    //creator mode
    if (props.mode === 'create') {
        finalMode.value = 'create';
        appData.value = null
        readOnly.value = false;
        newApp.value = true;
    }

    loading.value = false;

    // try {
    //     //get app ID from URL param
    //     if (appIDRaw === undefined) {
    //         //new app
    //         appData.value = null
    //         readOnly.value = false;
    //         newApp.value = true;
    //     } else {
    //         //load app
    //         const raw = await loadApplication(appIDRaw.toString());

    //         const data = raw.application;

    //         appID.value = data.id;
    //         appData.value = data.app_data;
    //         chatData.value = raw.comments;
    //         status.value = data.app_status;
    //         decisionDate.value = new Date(data.decision_at);
    //         submitDate.value = data.submitted_at ? new Date(data.submitted_at) : null;
    //         member_name.value = data.member_name;
    //         newApp.value = false;
    //         readOnly.value = true;
    //     }
    // } catch (e) {
    //     console.error(e);
    // }
})

async function postComment(comment) {
    chatData.value.push(await postChatMessage(comment, appID.value));
}

const emit = defineEmits(['submit']);

async function postApp(appData) {
    const res = await postApplication(appData);
    if (res.ok) {
        readOnly.value = true;
        newApp.value = false;
        emit('submit');
    }
    // TODO: Handle fail to post
}

async function handleApprove(id) {
    console.log("hi");
    await approveApplication(id);
}

async function handleDeny(id) {
    await denyApplication(id);
}
</script>

<template>
    <div v-if="!loading" class="w-full h-20">
        <div v-if="!newApp" class="flex flex-row justify-between items-center py-2 mb-8">
            <!-- Application header -->
            <div>
                <h3 class="scroll-m-20 text-2xl font-semibold tracking-tight">{{ member_name }}</h3>
                <p class="text-muted-foreground">Submitted: {{ submitDate.toLocaleString("en-US", {
                    year: "numeric",
                    month: "long",
                    day: "numeric",
                    hour: "2-digit",
                    minute: "2-digit"
                }) }}</p>
            </div>
            <div>
                <h3 class="text-right" :class="[
                    'font-semibold',
                    status === ApplicationStatus.Pending && 'text-yellow-500',
                    status === ApplicationStatus.Accepted && 'text-green-500',
                    status === ApplicationStatus.Denied && 'text-red-500'
                ]">{{ status }}</h3>
                <p v-if="status != ApplicationStatus.Pending" class="text-muted-foreground">{{ status }}: {{
                    decisionDate.toLocaleString("en-US", {
                        year: "numeric",
                        month: "long",
                        day: "numeric",
                        hour: "2-digit",
                        minute: "2-digit"
                    }) }}</p>
                <div class="mt-2" v-else-if="finalMode === 'view-recruiter'">
                    <Button variant="success" class="mr-2" :onclick="() => { handleApprove(appID) }">
                        <CheckIcon></CheckIcon>
                    </Button>
                    <Button variant="destructive" :onClick="() => { handleDeny(appID) }">
                        <XIcon></XIcon>
                    </Button>
                </div>
            </div>
        </div>
        <div v-else class="flex flex-row justify-between items-center py-2 mb-8">
            <h3 class="scroll-m-20 text-2xl font-semibold tracking-tight">Apply to join the 17th Rangers</h3>
        </div>
        <ApplicationForm :read-only="readOnly" :data="appData" @submit="(e) => { postApp(e) }" class="mb-7 pb-15">
        </ApplicationForm>
        <div v-if="!newApp">
            <h3 class="scroll-m-20 text-2xl font-semibold tracking-tight mb-4">Discussion</h3>
            <ApplicationChat :messages="chatData" @post="postComment"></ApplicationChat>
        </div>
    </div>
    <!-- TODO: Implement some kinda loading screen -->
    <div v-else class="flex items-center justify-center h-full">Loading</div>
</template>