127 lines
4.8 KiB
Vue
127 lines
4.8 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, 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>();
|
|
onMounted(async () => {
|
|
try {
|
|
//get app ID from URL param
|
|
const router = useRoute();
|
|
const appIDRaw = router.params.id;
|
|
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);
|
|
}
|
|
loading.value = false;
|
|
})
|
|
|
|
async function postComment(comment) {
|
|
chatData.value.push(await postChatMessage(comment, appID.value));
|
|
}
|
|
|
|
async function postApp(appData) {
|
|
console.log("test")
|
|
const res = await postApplication(appData);
|
|
if (res.ok) {
|
|
readOnly.value = true;
|
|
newApp.value = false;
|
|
}
|
|
// 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="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 === 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>
|
|
<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">
|
|
</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> |