103 lines
3.9 KiB
Vue
103 lines
3.9 KiB
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, loadApplication, postApplication, postChatMessage, Status } from '@/api/application';
|
|
|
|
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<Status>(null);
|
|
const decisionDate = ref<Date | null>(null);
|
|
const submitDate = ref<Date | null>(null);
|
|
const loading = ref<boolean>(true);
|
|
const member_name = ref<string>();
|
|
onMounted(async () => {
|
|
try {
|
|
const raw = await loadApplication()
|
|
if (raw === null) {
|
|
//new app
|
|
appData.value = null
|
|
readOnly.value = false;
|
|
newApp.value = true;
|
|
} else {
|
|
//load app
|
|
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)
|
|
}
|
|
loading.value = false;
|
|
})
|
|
|
|
async function postComment(comment) {
|
|
chatData.value.push(await postChatMessage(comment, appID.value));
|
|
}
|
|
|
|
async function postApp(appData) {
|
|
const res = await postApplication(appData);
|
|
if (res.ok) {
|
|
readOnly.value = true;
|
|
newApp.value = false;
|
|
}
|
|
// TODO: Handle fail to post
|
|
}
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div v-if="!loading" class="max-w-3xl mx-auto my-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 === Status.Pending && 'text-yellow-500',
|
|
status === Status.Accepted && 'text-green-500',
|
|
status === Status.Denied && 'text-red-500'
|
|
]">{{ status }}</h3>
|
|
<p v-if="status != Status.Pending" class="text-muted-foreground">{{ status }}: {{
|
|
decisionDate.toLocaleString("en-US", {
|
|
year: "numeric",
|
|
month: "long",
|
|
day: "numeric",
|
|
hour: "2-digit",
|
|
minute: "2-digit"
|
|
}) }}</p>
|
|
</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">
|
|
</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>Loading</div>
|
|
</template> |