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

Training-Report #27

Merged
Ajdj100 merged 47 commits from Training-Report into main 2025-11-22 14:20:51 -06:00
Conversation 0 Commits 47 Files Changed 43 +75 -27
1 changed files with 75 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit a4cd982d3e - Show all commits

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

@@ -23,11 +23,15 @@ const loaded = ref(false);
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 == null) return null;
return focusedTrainingReport.value.attendees.filter((attendee) => attendee.attendee_role_id == 2); return focusedTrainingReport.value.attendees.filter((attendee) => attendee.role.name == 'Trainee');
})
const focusedNoShows = computed<CourseAttendee[] | null>(() => {
if (focusedTrainingReport == null) return null;
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 == null) return null;
return focusedTrainingReport.value.attendees.filter((attendee) => attendee.attendee_role_id != 2); 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) {
focusedTrainingReport.value = await getTrainingReport(id); focusedTrainingReport.value = await getTrainingReport(id);
@@ -61,7 +65,9 @@ onMounted(async () => {
<div class="px-4 my-3" :class="sidePanel == sidePanelState.closed ? 'w-full' : 'w-2/5'"> <div class="px-4 my-3" :class="sidePanel == sidePanelState.closed ? 'w-full' : 'w-2/5'">
<div class="flex justify-between"> <div class="flex justify-between">
<p class="scroll-m-20 text-2xl font-semibold tracking-tight">Training Reports</p> <p class="scroll-m-20 text-2xl font-semibold tracking-tight">Training Reports</p>
<Button @click="createTrainingReport"><Plus></Plus> New Training Report</Button> <Button @click="createTrainingReport">
<Plus></Plus> New Training Report
</Button>
</div> </div>
<div class="overflow-y-auto max-h-[70vh] mt-5 scrollbar-themed"> <div class="overflow-y-auto max-h-[70vh] mt-5 scrollbar-themed">
<Table> <Table>
@@ -72,7 +78,7 @@ onMounted(async () => {
</TableHead> </TableHead>
<TableHead>Date</TableHead> <TableHead>Date</TableHead>
<TableHead class="text-right"> <TableHead class="text-right">
Posted By Posted By
</TableHead> </TableHead>
</TableRow> </TableRow>
</TableHeader> </TableHeader>
@@ -83,52 +89,94 @@ onMounted(async () => {
<TableCell>{{ report.date }}</TableCell> <TableCell>{{ report.date }}</TableCell>
<TableCell class="text-right">{{ report.created_by_name === null ? "Unknown User" : <TableCell class="text-right">{{ report.created_by_name === null ? "Unknown User" :
report.created_by_name report.created_by_name
}}</TableCell> }}</TableCell>
</TableRow> </TableRow>
</TableBody> </TableBody>
</Table> </Table>
</div> </div>
</div> </div>
<!-- view training report section --> <!-- view training report section -->
<div v-if="sidePanel == sidePanelState.view" class="px-4 my-3 border-l w-3/5"> <div v-if="sidePanel == sidePanelState.view" class="pl-9 my-3 border-l w-3/5">
<div class="flex justify-between my-3"> <div class="flex justify-between">
<div class="flex gap-5"> <p class="scroll-m-20 text-2xl font-semibold tracking-tight">Training Report Details</p>
<p>{{ focusedTrainingReport.course_name }}</p>
<p class="text-muted-foreground">{{ focusedTrainingReport.event_date }}</p>
<p class="">Created by {{ focusedTrainingReport.created_by_name === null ? "Unknown User" :
focusedTrainingReport.created_by_name
}}</p>
</div>
<button @click="closeTrainingReport" class="cursor-pointer"> <button @click="closeTrainingReport" class="cursor-pointer">
<X></X> <X></X>
</button> </button>
</div> </div>
<div class="flex flex-col gap-5"> <div class="flex flex-col mb-5 border rounded-lg bg-muted/70 p-2 my-5 py-3 px-4">
<!-- {{ focusedTrainingReport }} --> <p class="scroll-m-20 text-xl font-semibold tracking-tight">{{ focusedTrainingReport.course_name }}</p>
<div class="flex gap-10">
<p class="text-muted-foreground">{{ focusedTrainingReport.event_date }}</p>
<p class="">Created by {{ focusedTrainingReport.created_by_name === null ? "Unknown User" :
focusedTrainingReport.created_by_name
}}
</p>
</div>
</div>
<div class="flex flex-col gap-8">
<!-- Trainers -->
<div> <div>
<label class="scroll-m-20 text-xl font-semibold tracking-tight">Trainers</label> <label class="scroll-m-20 text-xl font-semibold tracking-tight">Trainers</label>
<div v-for="person in focusedTrainingTrainers" class="grid grid-cols-4 my-2 items-center"> <div class="grid grid-cols-4 py-2 text-sm font-medium text-muted-foreground border-b">
<span>Name</span>
<span class="">Role</span>
<span class="text-right col-span-2">Remarks</span>
</div>
<div v-for="person in focusedTrainingTrainers"
class="grid grid-cols-4 py-2 items-center border-b last:border-none">
<p>{{ person.attendee_name }}</p> <p>{{ person.attendee_name }}</p>
<p class="text-right px-5">{{ person.role.name }}</p> <p class="">{{ person.role.name }}</p>
<p class="bg-muted p-2 rounded-lg min-h-10 col-span-2 text-right">{{ person.remarks }}</p> <p class="col-span-2 text-right px-2" :class="person.remarks == '' ? 'text-muted-foreground' : ''">{{ person.remarks == "" ? '--' : person.remarks }}</p>
</div> </div>
</div> </div>
<!-- trainees -->
<div> <div>
<div class="grid grid-cols-5"><label <div class="flex flex-col">
class="scroll-m-20 text-xl font-semibold tracking-tight">Trainees</label></div> <label class="scroll-m-20 text-xl font-semibold tracking-tight">Trainees</label>
<div v-for="person in focusedTrainingTrainees" class="grid grid-cols-5 my-2 items-center"> <div class="grid grid-cols-5 py-2 text-sm font-medium text-muted-foreground border-b">
<span>Name</span>
<span class="">Bookwork</span>
<span class="">Qual</span>
<span class="text-right col-span-2">Remarks</span>
</div>
</div>
<div v-for="person in focusedTrainingTrainees" class="grid grid-cols-5 py-2 items-center border-b last:border-none">
<p>{{ person.attendee_name }}</p> <p>{{ person.attendee_name }}</p>
<!-- <p class="text-right px-5">{{ person.passed ? "Passed" : "Failed" }}</p> --> <Checkbox :disabled="!focusedTrainingReport.course.hasQual" :default-value="person.passed_bookwork ? true : false" class="pointer-events-none ml-5">
<Checkbox v-if="focusedTrainingReport.course.hasBookwork" :default-value="person.passed_bookwork ? true : false" class="pointer-events-none">
</Checkbox> </Checkbox>
<Checkbox v-if="focusedTrainingReport.course.hasQual" :default-value="person.passed_qual ? true : false" class="pointer-events-none"> <Checkbox :disabled="!focusedTrainingReport.course.hasQual" :default-value="person.passed_qual ? true : false" class="pointer-events-none ml-1">
</Checkbox> </Checkbox>
<p class="bg-muted p-2 rounded-lg min-h-10 col-span-2 text-right">{{ person.remarks }}</p> <p class="col-span-2 text-right px-2" :class="person.remarks == '' ? 'text-muted-foreground' : ''">{{ person.remarks == "" ? '--' : person.remarks }}</p>
</div>
</div>
<!-- No Shows -->
<div v-if="focusedNoShows.length != 0">
<div class="flex flex-col">
<label class="scroll-m-20 text-xl font-semibold tracking-tight">No Shows</label>
<div class="grid grid-cols-5 py-2 text-sm font-medium text-muted-foreground border-b">
<span>Name</span>
<!-- <span class="">Role</span>
<span class="">Role</span> -->
<div></div>
<div></div>
<span class="text-right col-span-2">Remarks</span>
</div>
</div>
<div v-for="person in focusedNoShows" class="grid grid-cols-5 py-2 items-center border-b last:border-none">
<p>{{ person.attendee_name }}</p>
<!-- <Checkbox :default-value="person.passed_bookwork ? true : false" class="pointer-events-none">
</Checkbox>
<Checkbox :default-value="person.passed_qual ? true : false" class="pointer-events-none">
</Checkbox> -->
<div></div>
<div></div>
<p class="col-span-2 text-right px-2" :class="person.remarks == '' ? 'text-muted-foreground' : ''">{{ person.remarks == "" ? '--' : person.remarks }}</p>
</div> </div>
</div> </div>
<div> <div>
<label class="scroll-m-20 text-xl font-semibold tracking-tight">Remarks</label> <label class="scroll-m-20 text-xl font-semibold tracking-tight">Remarks</label>
<p class="bg-muted p-2 rounded-lg min-h-24 my-2"> {{ focusedTrainingReport.remarks }}</p> <p class="border bg-muted/50 px-3 py-2 rounded-lg min-h-24 my-2" :class="focusedTrainingReport.remarks == '' ? 'text-muted-foreground' : ''"> {{ focusedTrainingReport.remarks == "" ? 'None' : focusedTrainingReport.remarks }}</p>
</div> </div>
</div> </div>
</div> </div>