update report list on submit

ui/src/pages/TrainingReport.vue

@@ -44,8 +44,12 @@ function createTrainingReport() {
     sidePanel.value = sidePanelState.create;
 }
 
-onMounted(async () => {
+async function loadTrainingReports() {
     trainingReports.value = await getTrainingReports();
+}
+
+onMounted(async () => {
+    loadTrainingReports();
     loaded.value = true;
 })
 </script>
@@ -78,7 +82,7 @@ onMounted(async () => {
                             <TableCell>{{ report.date }}</TableCell>
                             <TableCell class="text-right">{{ report.created_by_name === null ? "Unknown User" :
                                 report.created_by_name
-                            }}</TableCell>
+                                }}</TableCell>
                         </TableRow>
                     </TableBody>
                 </Table>
@@ -92,7 +96,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>
+                        }}</p>
                 </div>
                 <button @click="closeTrainingReport" class="cursor-pointer">
                     <X></X>
@@ -132,7 +136,7 @@ onMounted(async () => {
                 </button>
             </div>
             <div class="overflow-y-auto max-h-[70vh] mt-5 scrollbar-themed">
-                <TrainingReportForm class="w-full" @submit="(newID) => viewTrainingReport(newID)"></TrainingReportForm>
+                <TrainingReportForm class="w-full" @submit="(newID) => {viewTrainingReport(newID); loadTrainingReports()}"></TrainingReportForm>
             </div>
         </div>
     </div>