17th-Ranger-Battalion-ORG/milsim-site-v4
8
1
Fork 0
Code Issues 22 Pull Requests 1 Actions 2 Packages Projects Releases Wiki Activity

added support for optional checkboxes

Browse Source
This commit is contained in:
ajdj100
2025-11-20 14:27:34 -05:00
parent 23ebbe7a85
commit d9e4c1d6ff
4 changed files with 46 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
ui/src/components/trainingReport/trainingReportForm.vue
View File

@@ -3,7 +3,7 @@ import { trainingReportSchema, courseEventAttendeeSchema } from '@shared/schemas
import { Course, CourseAttendee, CourseAttendeeRole, CourseEventDetails } from '@shared/types/course'
import { useForm, useFieldArray, FieldArray as VeeFieldArray, ErrorMessage, Field as VeeField } from 'vee-validate'
import { toTypedSchema } from '@vee-validate/zod'
import { onMounted, ref } from 'vue'
import { computed, onMounted, ref } from 'vue'
import { getAllAttendeeRoles, getAllTrainings, postTrainingReport } from '@/api/trainingReport'
import { getMembers, Member } from '@/api/member'
import FieldGroup from '../ui/field/FieldGroup.vue'
@@ -19,7 +19,7 @@ import FieldLegend from '../ui/field/FieldLegend.vue'
import FieldDescription from '../ui/field/FieldDescription.vue'
import Checkbox from '../ui/checkbox/Checkbox.vue'
const { handleSubmit, resetForm, errors } = useForm({
const { handleSubmit, resetForm, errors , values } = useForm({
validationSchema: toTypedSchema(trainingReportSchema),
initialValues: {
course_id: null,
@@ -55,6 +55,8 @@ function onSubmit(vals) {
const { remove, push, fields } = useFieldArray('attendees');
const selectedCourse = computed<Course | undefined>(() => {return trainings.value?.find(c => c.id == values.course_id)})
const trainings = ref<Course[] | null>(null);
const members = ref<Member[] | null>(null);
const eventRoles = ref<CourseAttendeeRole[] | null>(null);
@@ -108,7 +110,8 @@ onMounted(async () => {
class="grid grid-cols-[180px_140px_50px_1fr_auto] gap-3 font-medium text-sm text-muted-foreground px-1">
<div>Member</div>
<div>Role</div>
<div>Passed</div>
<div v-if="selectedCourse?.hasBookwork">Bookwork</div>
<div v-if="selectedCourse?.hasQual">Qual</div>
<div>Remarks</div>
<div></div> <!-- empty for remove button -->
</div>
@@ -146,7 +149,7 @@ onMounted(async () => {
</VeeField>
<!-- Passed Checkbox -->
<VeeField v-slot="{ field }" :name="`attendees[${index}].passed`" type="checkbox"
<VeeField v-if="selectedCourse?.hasBookwork" v-slot="{ field }" :name="`attendees[${index}].passed`" type="checkbox"
:value="true" :unchecked-value="false">
<label>
<input type="checkbox" :name="`attendees[${index}].passed`" v-bind="field"
@@ -154,6 +157,14 @@ onMounted(async () => {
</label>
</VeeField>
<!-- Passed Checkbox -->
<VeeField v-if="selectedCourse?.hasQual" v-slot="{ field }" :name="`attendees[${index}].passed`" type="checkbox"
:value="true" :unchecked-value="false">
<label>
<input type="checkbox" :name="`attendees[${index}].passed`" v-bind="field"
:value="true" />
</label>
</VeeField>
<!-- Remarks -->
<VeeField :name="`attendees[${index}].remarks`" v-slot="{ field: f, errors: e }">

15
ui/src/pages/TrainingReport.vue
View File

@@ -13,6 +13,7 @@ import {
import { X } from 'lucide-vue-next';
import Button from '@/components/ui/button/Button.vue';
import TrainingReportForm from '@/components/trainingReport/trainingReportForm.vue';
import Checkbox from '@/components/ui/checkbox/Checkbox.vue';
enum sidePanelState { view, create, closed };
@@ -113,10 +114,15 @@ onMounted(async () => {
</div>
</div>
<div>
<label class="scroll-m-20 text-xl font-semibold tracking-tight">Trainees</label>
<div v-for="person in focusedTrainingTrainees" class="grid grid-cols-4 my-2 items-center">
<div class="grid grid-cols-5"><label
class="scroll-m-20 text-xl font-semibold tracking-tight">Trainees</label></div>
<div v-for="person in focusedTrainingTrainees" class="grid grid-cols-5 my-2 items-center">
<p>{{ person.attendee_name }}</p>
<p class="text-right px-5">{{ person.passed ? "Passed" : "Failed" }}</p>
<!-- <p class="text-right px-5">{{ person.passed ? "Passed" : "Failed" }}</p> -->
<Checkbox v-if="focusedTrainingReport.course.hasBookwork" :default-value="person.passed_bookwork ? true : false" class="pointer-events-none">
</Checkbox>
<Checkbox v-if="focusedTrainingReport.course.hasQual" :default-value="person.passed_qual ? true : false" class="pointer-events-none">
</Checkbox>
<p class="bg-muted p-2 rounded-lg min-h-10 col-span-2 text-right">{{ person.remarks }}</p>
</div>
</div>
@@ -136,7 +142,8 @@ onMounted(async () => {
</button>
</div>
<div class="overflow-y-auto max-h-[70vh] mt-5 scrollbar-themed">
<TrainingReportForm class="w-full" @submit="(newID) => {viewTrainingReport(newID); loadTrainingReports()}"></TrainingReportForm>
<TrainingReportForm class="w-full"
@submit="(newID) => { viewTrainingReport(newID); loadTrainingReports() }"></TrainingReportForm>
</div>
</div>
</div>