Mega recruitment pipeline overhaul
This commit is contained in:
@@ -17,48 +17,95 @@ 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 () => {
|
||||
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);
|
||||
//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) {
|
||||
console.log("test")
|
||||
const res = await postApplication(appData);
|
||||
if (res.ok) {
|
||||
readOnly.value = true;
|
||||
newApp.value = false;
|
||||
emit('submit');
|
||||
}
|
||||
// TODO: Handle fail to post
|
||||
}
|
||||
@@ -74,7 +121,7 @@ async function handleDeny(id) {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-if="!loading" class="max-w-3xl mx-auto my-20">
|
||||
<div v-if="!loading" class="max-w-3xl mx-auto">
|
||||
<div v-if="!newApp" class="flex flex-row justify-between items-center py-2 mb-8">
|
||||
<!-- Application header -->
|
||||
<div>
|
||||
@@ -102,7 +149,7 @@ async function handleDeny(id) {
|
||||
hour: "2-digit",
|
||||
minute: "2-digit"
|
||||
}) }}</p>
|
||||
<div class="mt-2" v-else>
|
||||
<div class="mt-2" v-else-if="finalMode === 'view-recruiter'">
|
||||
<Button variant="success" class="mr-2" :onclick="() => { handleApprove(appID) }">
|
||||
<CheckIcon></CheckIcon>
|
||||
</Button>
|
||||
|
||||
@@ -1,24 +1,134 @@
|
||||
<template>
|
||||
<div class="min-h-screen flex items-center justify-center ">
|
||||
<div class="w-full max-w-2xl mx-auto p-8 text-center">
|
||||
<h1 class="text-4xl sm:text-5xl font-extrabold mb-4">
|
||||
welcome to the 17th
|
||||
</h1>
|
||||
<p class=" mb-8">
|
||||
Welcome — click below to get started.
|
||||
</p>
|
||||
<script setup lang="ts">
|
||||
import ApplicationForm from '@/components/application/ApplicationForm.vue';
|
||||
import Button from '@/components/ui/button/Button.vue';
|
||||
import {
|
||||
Stepper,
|
||||
StepperDescription,
|
||||
StepperIndicator,
|
||||
StepperItem,
|
||||
StepperSeparator,
|
||||
StepperTitle,
|
||||
StepperTrigger,
|
||||
} from '@/components/ui/stepper'
|
||||
import { useUserStore } from '@/stores/user';
|
||||
import { Check, Circle, Dot } from 'lucide-vue-next'
|
||||
import { computed } from 'vue';
|
||||
import Application from './Application.vue';
|
||||
|
||||
<Button class="w-44" @click="goToLogin">Get started</Button>
|
||||
function goToLogin() {
|
||||
const redirectUrl = encodeURIComponent(window.location.origin + '/join')
|
||||
window.location.href = `https://aj17thdevapi.nexuszone.net/login?redirect=${redirectUrl}`;
|
||||
}
|
||||
const steps = [
|
||||
{
|
||||
step: 1,
|
||||
title: 'Create account',
|
||||
description: 'Begin by setting up your account',
|
||||
},
|
||||
{
|
||||
step: 2,
|
||||
title: 'Submit application',
|
||||
description: 'Provide a few details about yourself',
|
||||
},
|
||||
{
|
||||
step: 3,
|
||||
title: 'Application review',
|
||||
description: 'Our team will review your submission',
|
||||
},
|
||||
{
|
||||
step: 4,
|
||||
title: 'Acceptance',
|
||||
description: 'Join the 17th and get started',
|
||||
},
|
||||
]
|
||||
|
||||
let userStore = useUserStore();
|
||||
const currentStep = computed<number>(() => {
|
||||
if (!userStore.isLoggedIn)
|
||||
return 1;
|
||||
switch (userStore.state) {
|
||||
case "guest":
|
||||
return 2;
|
||||
break;
|
||||
case "applicant":
|
||||
return 3;
|
||||
break;
|
||||
case "member":
|
||||
return 4;
|
||||
break;
|
||||
case "denied":
|
||||
return 4;
|
||||
break;
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex flex-col items-center mt-10 w-full">
|
||||
|
||||
<!-- Stepper Container -->
|
||||
<div class="w-full flex justify-center">
|
||||
<div class="w-full max-w-7xl">
|
||||
<Stepper class="flex w-full items-start gap-2" v-model="currentStep">
|
||||
<StepperItem v-for="step in steps" :key="step.step" v-slot="{ state }"
|
||||
class="relative flex w-full flex-col items-center" :step="step.step">
|
||||
<StepperSeparator v-if="step.step !== steps[steps.length - 1]?.step"
|
||||
class="absolute left-[calc(50%+20px)] right-[calc(-50%+10px)] top-5 block h-0.5 rounded-full bg-muted group-data-[state=completed]:bg-primary" />
|
||||
|
||||
<StepperTrigger as-child>
|
||||
<Button :variant="state === 'completed' || state === 'active' ? 'default' : 'outline'"
|
||||
size="icon" class="z-10 rounded-full shrink-0"
|
||||
:class="[state === 'active' && 'ring-2 ring-ring ring-offset-2 ring-offset-background']">
|
||||
<Check v-if="state === 'completed'" class="size-5" />
|
||||
<Circle v-if="state === 'active'" />
|
||||
<Dot v-if="state === 'inactive'" />
|
||||
</Button>
|
||||
</StepperTrigger>
|
||||
|
||||
<div class="mt-2 flex flex-col items-center text-center">
|
||||
<StepperTitle class="text-sm font-semibold transition lg:text-base"
|
||||
:class="[state === 'active' && 'text-primary']">
|
||||
{{ step.title }}
|
||||
</StepperTitle>
|
||||
|
||||
<StepperDescription
|
||||
class="sr-only text-xs text-muted-foreground transition md:not-sr-only lg:text-sm"
|
||||
:class="[state === 'active' && 'text-primary']">
|
||||
{{ step.description }}
|
||||
</StepperDescription>
|
||||
</div>
|
||||
</StepperItem>
|
||||
</Stepper>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Content -->
|
||||
<div class="mt-12 mb-20 flex w-full justify-center">
|
||||
<div v-if="currentStep === 1" class="w-full max-w-2xl p-8">
|
||||
<h1 class="text-3xl sm:text-4xl font-bold mb-4 text-left">
|
||||
Create your account
|
||||
</h1>
|
||||
|
||||
<p class="text-left text-muted-foreground mb-6">
|
||||
You'll be redirected to our secure sign-in system to set up your account
|
||||
and begin your application.
|
||||
</p>
|
||||
|
||||
<Button class="px-6 py-3" @click="goToLogin">
|
||||
Continue to account creation
|
||||
</Button>
|
||||
</div>
|
||||
<Application v-else-if="currentStep === 2" @submit="userStore.loadUser()" :mode="'create'"></Application>
|
||||
<Application v-else-if="currentStep === 3" :mode="'view-self'"></Application>
|
||||
<div v-if="currentStep === 4" class="w-full max-w-2xl p-8">
|
||||
<h1 class="text-3xl sm:text-4xl font-bold mb-4 text-left">
|
||||
Welcome to the 17th Ranger Battalion
|
||||
</h1>
|
||||
|
||||
<p class="text-left text-muted-foreground mb-6">
|
||||
Yadda yadda here are your resources and stuff or something.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Button from '@/components/ui/button/Button.vue';
|
||||
|
||||
|
||||
function goToLogin() {
|
||||
window.location.href = 'https://aj17thdevapi.nexuszone.net/login';
|
||||
}
|
||||
|
||||
</script>
|
||||
Reference in New Issue
Block a user