Fixes the configuration file

This commit is contained in:
2026-03-16 14:34:07 +01:00
parent ede31b15cb
commit 29a94899da
16 changed files with 559 additions and 18 deletions

View File

@@ -1,8 +1,9 @@
<script setup>
import { computed, reactive, ref, watch, nextTick } from 'vue'
import { computed, onMounted, onUnmounted, reactive, ref, watch, nextTick } from 'vue'
import { Head, useForm, router } from '@inertiajs/vue3'
import AppLayout from '@/Layouts/AppLayout.vue'
import AppButton from '@/Components/AppButton.vue'
import { ArrowLeftIcon } from '@heroicons/vue/24/outline'
import QuestionCard from '@/Components/QuestionCard.vue'
defineOptions({ layout: AppLayout })
@@ -39,6 +40,24 @@ const initializeAnswers = () => {
}
initializeAnswers()
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()
})
// Validation state
const validationErrors = ref({})
const processing = ref(false)
@@ -175,6 +194,27 @@ const completeSession = async () => {
<Head :title="`${session.category.name} Questionnaire`" />
<div class="max-w-3xl mx-auto px-4 py-10">
<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="`/screening/${session.screening_id}/result`"
data-cy="sticky-back"
>
<ArrowLeftIcon class="h-5 w-5" />
Back
</AppButton>
</div>
</Transition>
<!-- Title area -->
<div class="mb-10">
<h1 class="text-2xl font-bold text-white">{{ session.category.name }} Questionnaire</h1>
@@ -183,7 +223,7 @@ const completeSession = async () => {
<div class="space-y-8">
<!-- User Info Section -->
<div class="bg-white/[0.03] border border-white/[0.06] rounded-xl p-8">
<div class="border border-white/[0.06] rounded-xl p-8">
<h2 class="text-lg font-semibold text-white mb-5">Basic Information</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
@@ -202,7 +242,7 @@ const completeSession = async () => {
<div
v-for="group in questionGroups"
:key="group.id"
class="bg-white/[0.03] border border-white/[0.06] rounded-xl p-8"
class="border border-white/[0.06] rounded-xl p-8"
>
<div class="flex items-center gap-3 mb-1">
<div class="w-2 h-2 rounded-full bg-primary/60"></div>
@@ -229,7 +269,7 @@ const completeSession = async () => {
</div>
<!-- Additional Comments -->
<div class="bg-white/[0.03] border border-white/[0.06] rounded-xl p-8">
<div class="border border-white/[0.06] rounded-xl p-8">
<h2 class="text-lg font-semibold text-white mb-5">Additional Comments</h2>
<textarea
v-model="additionalComments.additional_comments"
@@ -260,7 +300,7 @@ const completeSession = async () => {
</Transition>
<div class="flex justify-between items-center">
<AppButton variant="ghost" size="lg" :href="`/screening/${session.screening_id}/result`" data-cy="back-to-screening">
<AppButton ref="bottomBackButtonRef" variant="ghost" size="lg" :href="`/screening/${session.screening_id}/result`" data-cy="back-to-screening">
Back
</AppButton>