fixed checkbox states getting stuck when switching between views

This commit is contained in:
2025-11-21 12:07:54 -05:00
parent c72e849b24
commit 7528a20568

View File

@@ -40,15 +40,15 @@ watch(() => route.params.id, async (newID) => {
const focusedTrainingReport = ref<CourseEventDetails | null>(null); const focusedTrainingReport = ref<CourseEventDetails | null>(null);
const focusedTrainingTrainees = computed<CourseAttendee[] | null>(() => { const focusedTrainingTrainees = computed<CourseAttendee[] | null>(() => {
if (focusedTrainingReport == null) return null; if (focusedTrainingReport.value == null) return null;
return focusedTrainingReport.value.attendees.filter((attendee) => attendee.role.name == 'Trainee'); return focusedTrainingReport.value.attendees.filter((attendee) => attendee.role.name == 'Trainee');
}) })
const focusedNoShows = computed<CourseAttendee[] | null>(() => { const focusedNoShows = computed<CourseAttendee[] | null>(() => {
if (focusedTrainingReport == null) return null; if (focusedTrainingReport.value == null) return null;
return focusedTrainingReport.value.attendees.filter((attendee) => attendee.role.name == 'No-Show'); return focusedTrainingReport.value.attendees.filter((attendee) => attendee.role.name == 'No-Show');
}) })
const focusedTrainingTrainers = computed<CourseAttendee[] | null>(() => { const focusedTrainingTrainers = computed<CourseAttendee[] | null>(() => {
if (focusedTrainingReport == null) return null; if (focusedTrainingReport.value == null) return null;
return focusedTrainingReport.value.attendees.filter((attendee) => attendee.role.name != 'Trainee' && attendee.role.name != 'No-Show'); return focusedTrainingReport.value.attendees.filter((attendee) => attendee.role.name != 'Trainee' && attendee.role.name != 'No-Show');
}) })
async function viewTrainingReport(id: number) { async function viewTrainingReport(id: number) {
@@ -69,6 +69,7 @@ onMounted(async () => {
if (route.params.id) if (route.params.id)
viewTrainingReport(Number(route.params.id)) viewTrainingReport(Number(route.params.id))
loaded.value = true; loaded.value = true;
console.log("load")
}) })
</script> </script>
@@ -110,7 +111,7 @@ onMounted(async () => {
</div> </div>
</div> </div>
<!-- view training report section --> <!-- view training report section -->
<div v-if="sidePanel == sidePanelState.view" class="pl-9 my-3 border-l w-3/5"> <div v-if="focusedTrainingReport != null && sidePanel == sidePanelState.view" class="pl-9 my-3 border-l w-3/5">
<div class="flex justify-between"> <div class="flex justify-between">
<p class="scroll-m-20 text-2xl font-semibold tracking-tight">Training Report Details</p> <p class="scroll-m-20 text-2xl font-semibold tracking-tight">Training Report Details</p>
<button @click="closeTrainingReport" class="cursor-pointer"> <button @click="closeTrainingReport" class="cursor-pointer">
@@ -161,10 +162,10 @@ onMounted(async () => {
class="grid grid-cols-5 py-2 items-center border-b last:border-none"> class="grid grid-cols-5 py-2 items-center border-b last:border-none">
<p>{{ person.attendee_name }}</p> <p>{{ person.attendee_name }}</p>
<Checkbox :disabled="!focusedTrainingReport.course.hasQual" <Checkbox :disabled="!focusedTrainingReport.course.hasQual"
:default-value="person.passed_bookwork ? true : false" class="pointer-events-none ml-5"> :model-value="person.passed_bookwork" class="pointer-events-none ml-5">
</Checkbox> </Checkbox>
<Checkbox :disabled="!focusedTrainingReport.course.hasQual" <Checkbox :disabled="!focusedTrainingReport.course.hasQual"
:default-value="person.passed_qual ? true : false" class="pointer-events-none ml-1"> :model-value="person.passed_qual" class="pointer-events-none ml-1">
</Checkbox> </Checkbox>
<p class="col-span-2 text-right px-2" <p class="col-span-2 text-right px-2"
:class="person.remarks == '' ? 'text-muted-foreground' : ''">{{ person.remarks == "" ? '--' :class="person.remarks == '' ? 'text-muted-foreground' : ''">{{ person.remarks == "" ? '--'