refactored to make training reports linkable

ui/src/pages/TrainingReport.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { getTrainingReport, getTrainingReports } from '@/api/trainingReport';
 import { CourseAttendee, CourseEventDetails, CourseEventSummary } from '@shared/types/course';
-import { computed, onMounted, ref } from 'vue';
+import { computed, onMounted, ref, watch } from 'vue';
 import {
     Table,
     TableBody,
@@ -14,12 +14,30 @@ import { Plus, 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';
+import { useRoute, useRouter } from 'vue-router';
 
 enum sidePanelState { view, create, closed };
 
 const trainingReports = ref<CourseEventSummary[] | null>(null);
 const loaded = ref(false);
 
+const route = useRoute();
+const router = useRouter();
+
+const sidePanel = computed<sidePanelState>(() => {
+    if (route.path.endsWith('/new')) return sidePanelState.create;
+    if (route.params.id) return sidePanelState.view;
+    return sidePanelState.closed;
+})
+
+watch(() => route.params.id, async (newID) => {
+    if (!newID) {
+        focusedTrainingReport.value = null;
+        return;
+    }
+    viewTrainingReport(Number(route.params.id));
+})
+
 const focusedTrainingReport = ref<CourseEventDetails | null>(null);
 const focusedTrainingTrainees = computed<CourseAttendee[] | null>(() => {
     if (focusedTrainingReport == null) return null;
@@ -35,18 +53,11 @@ const focusedTrainingTrainers = computed<CourseAttendee[] | null>(() => {
 })
 async function viewTrainingReport(id: number) {
     focusedTrainingReport.value = await getTrainingReport(id);
-    sidePanel.value = sidePanelState.view;
 }
 
 async function closeTrainingReport() {
+    router.push(`/trainingReport`)
     focusedTrainingReport.value = null;
-    sidePanel.value = sidePanelState.closed;
-}
-
-const sidePanel = ref<sidePanelState>(sidePanelState.closed);
-
-function createTrainingReport() {
-    sidePanel.value = sidePanelState.create;
 }
 
 async function loadTrainingReports() {
@@ -55,6 +66,8 @@ async function loadTrainingReports() {
 
 onMounted(async () => {
     loadTrainingReports();
+    if (route.params.id)
+        viewTrainingReport(Number(route.params.id))
     loaded.value = true;
 })
 </script>
@@ -65,7 +78,7 @@ onMounted(async () => {
         <div class="px-4 my-3" :class="sidePanel == sidePanelState.closed ? 'w-full' : 'w-2/5'">
             <div class="flex justify-between">
                 <p class="scroll-m-20 text-2xl font-semibold tracking-tight">Training Reports</p>
-                <Button @click="createTrainingReport">
+                <Button @click="router.push('/trainingReport/new')">
                     <Plus></Plus> New Training Report
                 </Button>
             </div>
@@ -84,12 +97,13 @@ onMounted(async () => {
                     </TableHeader>
                     <TableBody v-if="loaded">
                         <TableRow class="cursor-pointer" v-for="report in trainingReports" :key="report.event_id"
-                            @click="viewTrainingReport(report.event_id);">
+                            @click="router.push(`/trainingReport/${report.event_id}`)">
-                            <TableCell class="font-medium">{{ report.course_name.length > 30 ? report.course_shortname : report.course_name }}</TableCell>
+                            <TableCell class="font-medium">{{ report.course_name.length > 30 ? report.course_shortname :
+                                report.course_name }}</TableCell>
                             <TableCell>{{ report.date }}</TableCell>
                             <TableCell class="text-right">{{ report.created_by_name === null ? "Unknown User" :
                                 report.created_by_name
-                            }}</TableCell>
+                                }}</TableCell>
                         </TableRow>
                     </TableBody>
                 </Table>
@@ -109,7 +123,7 @@ onMounted(async () => {
                     <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>
@@ -127,7 +141,9 @@ onMounted(async () => {
                         class="grid grid-cols-4 py-2 items-center border-b last:border-none">
                         <p>{{ person.attendee_name }}</p>
                         <p class="">{{ person.role.name }}</p>
-                        <p class="col-span-2 text-right px-2" :class="person.remarks == '' ? 'text-muted-foreground' : ''">{{ person.remarks == "" ? '--' : 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>
                 <!-- trainees -->
@@ -141,13 +157,18 @@ onMounted(async () => {
                             <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">
+                    <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>
-                        <Checkbox :disabled="!focusedTrainingReport.course.hasQual" :default-value="person.passed_bookwork ? true : false" class="pointer-events-none ml-5">
+                        <Checkbox :disabled="!focusedTrainingReport.course.hasQual"
+                            :default-value="person.passed_bookwork ? true : false" class="pointer-events-none ml-5">
                         </Checkbox>
-                        <Checkbox :disabled="!focusedTrainingReport.course.hasQual" :default-value="person.passed_qual ? true : false" class="pointer-events-none ml-1">
+                        <Checkbox :disabled="!focusedTrainingReport.course.hasQual"
+                            :default-value="person.passed_qual ? true : false" class="pointer-events-none ml-1">
                         </Checkbox>
-                        <p class="col-span-2 text-right px-2" :class="person.remarks == '' ? 'text-muted-foreground' : ''">{{ person.remarks == "" ? '--' : 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 -->
@@ -163,7 +184,8 @@ onMounted(async () => {
                             <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">
+                    <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>
@@ -171,12 +193,16 @@ onMounted(async () => {
                         </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>
+                        <p class="col-span-2 text-right px-2"
+                            :class="person.remarks == '' ? 'text-muted-foreground' : ''">{{ person.remarks == "" ? '--'
+                                : person.remarks }}</p>
                     </div>
                 </div>
                 <div>
                     <label class="scroll-m-20 text-xl font-semibold tracking-tight">Remarks</label>
-                    <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>
+                    <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>
@@ -191,7 +217,7 @@ onMounted(async () => {
             </div>
             <div class="overflow-y-auto max-h-[70vh] mt-5 scrollbar-themed">
                 <TrainingReportForm class="w-full pl-2"
-                    @submit="(newID) => { viewTrainingReport(newID); loadTrainingReports() }"></TrainingReportForm>
+                    @submit="(newID) => { router.push(`/trainingReport/${newID}`); loadTrainingReports() }"></TrainingReportForm>
             </div>
         </div>
     </div>

ui/src/router/index.js

@@ -17,6 +17,8 @@ const router = createRouter({
     { path: '/transfer', component: () => import('@/pages/Transfer.vue'), meta: { requiresAuth: true, memberOnly: true } },
     { path: '/calendar', component: () => import('@/pages/Calendar.vue'), meta: { requiresAuth: true, memberOnly: true } },
     { path: '/trainingReport', component: () => import('@/pages/TrainingReport.vue'), meta: { requiresAuth: true, memberOnly: true } },
+    { path: '/trainingReport/new', component: () => import('@/pages/TrainingReport.vue'), meta: { requiresAuth: true, memberOnly: true } },
+    { path: '/trainingReport/:id', component: () => import('@/pages/TrainingReport.vue'), meta: { requiresAuth: true, memberOnly: true } },
 
     // ADMIN / STAFF ROUTES
     {