123 lines
4.1 KiB
Vue
123 lines
4.1 KiB
Vue
<script setup>
|
|
import { onMounted, onUnmounted, ref } from 'vue'
|
|
import { Head, router } from '@inertiajs/vue3'
|
|
import { ArrowLeftIcon } from '@heroicons/vue/24/outline'
|
|
import AppLayout from '@/Layouts/AppLayout.vue'
|
|
import AppButton from '@/Components/AppButton.vue'
|
|
|
|
defineOptions({ layout: AppLayout })
|
|
|
|
const props = defineProps({
|
|
screening: {
|
|
type: Object,
|
|
required: true,
|
|
},
|
|
passed: {
|
|
type: Boolean,
|
|
required: true,
|
|
},
|
|
score: {
|
|
type: Number,
|
|
required: true,
|
|
},
|
|
totalQuestions: {
|
|
type: Number,
|
|
required: true,
|
|
},
|
|
categories: {
|
|
type: Array,
|
|
required: true,
|
|
},
|
|
})
|
|
|
|
const handleStartCategory = (categoryId) => {
|
|
router.post('/sessions', {
|
|
category_id: categoryId,
|
|
screening_id: props.screening.id,
|
|
})
|
|
}
|
|
|
|
const bottomBackButtonRef = ref(null)
|
|
const showStickyBack = ref(false)
|
|
|
|
let observer = null
|
|
|
|
onMounted(() => {
|
|
if (!bottomBackButtonRef.value) return
|
|
observer = new IntersectionObserver(
|
|
([entry]) => { showStickyBack.value = !entry.isIntersecting },
|
|
{ threshold: 0 }
|
|
)
|
|
observer.observe(bottomBackButtonRef.value.$el || bottomBackButtonRef.value)
|
|
})
|
|
|
|
onUnmounted(() => {
|
|
observer?.disconnect()
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<Head title="Screening Result" />
|
|
|
|
<div class="max-w-4xl mx-auto px-4 py-8">
|
|
<!-- Sticky back button -->
|
|
<Transition
|
|
enter-active-class="transition-all duration-200 ease-out"
|
|
enter-from-class="opacity-0 translate-x-4"
|
|
enter-to-class="opacity-100 translate-x-0"
|
|
leave-active-class="transition-all duration-150 ease-in"
|
|
leave-from-class="opacity-100 translate-x-0"
|
|
leave-to-class="opacity-0 translate-x-4"
|
|
>
|
|
<div v-if="showStickyBack" class="fixed top-[88px] right-6 z-40">
|
|
<AppButton variant="ghost" size="lg" href="/" data-cy="sticky-back">
|
|
<ArrowLeftIcon class="h-5 w-5" />
|
|
Back
|
|
</AppButton>
|
|
</div>
|
|
</Transition>
|
|
|
|
<h1 class="text-3xl font-bold text-white mb-6">Pre-Screening Result</h1>
|
|
|
|
<!-- Score Display -->
|
|
<div class="rounded-lg p-6 mb-8" :class="passed ? 'bg-green-500/10 border border-green-500/30' : 'bg-red-500/10 border border-red-500/30'">
|
|
<div class="text-center">
|
|
<p class="text-5xl font-bold mb-2" :class="passed ? 'text-green-500' : 'text-red-500'" data-cy="screening-score">
|
|
{{ score }} / {{ totalQuestions }}
|
|
</p>
|
|
<p class="text-xl font-semibold" :class="passed ? 'text-green-400' : 'text-red-400'" :data-cy="passed ? 'result-passed' : 'result-failed'">
|
|
{{ passed ? 'Passed' : 'No Go' }}
|
|
</p>
|
|
<p class="text-gray-400 mt-2">
|
|
{{ passed ? 'You may proceed to select a category for detailed assessment.' : 'The pre-screening score is below the required threshold. You cannot proceed at this time.' }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Passed: Show category picker -->
|
|
<div v-if="passed" data-cy="category-select">
|
|
<h2 class="text-2xl font-semibold text-white mb-4">Select a Category</h2>
|
|
<div class="space-y-3">
|
|
<div
|
|
v-for="category in categories"
|
|
:key="category.id"
|
|
class="rounded-lg p-4 flex items-center justify-between hover:bg-white/5 transition-colors"
|
|
>
|
|
<span class="text-white font-medium">{{ category.name }}</span>
|
|
<AppButton size="md" @click="handleStartCategory(category.id)">
|
|
Start
|
|
</AppButton>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Bottom back button -->
|
|
<div class="mt-12 pt-8 border-t border-white/[0.06]">
|
|
<AppButton ref="bottomBackButtonRef" variant="ghost" size="lg" href="/" data-cy="back-to-landing">
|
|
<ArrowLeftIcon class="h-5 w-5" />
|
|
Back
|
|
</AppButton>
|
|
</div>
|
|
</div>
|
|
</template>
|