hooked up UI to API

ui/src/api/trainingReport.ts

@@ -45,4 +45,21 @@ export async function getAllAttendeeRoles(): Promise<CourseAttendeeRole[]> {
         console.error("Something went wrong");
         throw new Error("Failed to load attendee roles");
     }
-}
+}
+
+export async function postTrainingReport(report: CourseEventDetails) {
+    const res = await fetch(`${addr}/courseEvent`, {
+        method: "POST",
+        headers: {
+            "Content-Type": "application/json",
+        },
+        body: JSON.stringify(report),
+    });
+
+    if (!res.ok) {
+        const errorText = await res.text();
+        throw new Error(`Failed to post training report: ${res.status} ${errorText}`);
+    }
+
+    return res.json(); // expected to return the inserted report or new ID
+}

ui/src/components/trainingReport/trainingReportForm.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import { trainingReportSchema, courseEventAttendeeSchema } from '@shared/schemas/trainingReportSchema'
-import { Course, CourseAttendee, CourseAttendeeRole } from '@shared/types/course'
+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 { getAllAttendeeRoles, getAllTrainings } from '@/api/trainingReport'
+import { getAllAttendeeRoles, getAllTrainings, postTrainingReport } from '@/api/trainingReport'
 import { getMembers, Member } from '@/api/member'
 import FieldGroup from '../ui/field/FieldGroup.vue'
 import Field from '../ui/field/Field.vue'
@@ -30,14 +30,27 @@ const { handleSubmit, resetForm, errors } = useForm({
 
 const submitForm = handleSubmit(onSubmit);
 
-function onSubmit(vals) {
-    // TODO: move this date conversion to a date library
-    const clean = {
-        ...vals,
-        event_date: new Date(vals.event_date).toISOString(),
-    }
+function toMySQLDateTime(date: Date): string {
+  return date
+    .toISOString()                 // 2025-11-19T00:00:00.000Z
+    .slice(0, 23)                  // keep milliseconds → 2025-11-19T00:00:00.000
+    .replace("T", " ") + "000";    // becomes → 2025-11-19 00:00:00.000000
+}
 
-    console.log("SUBMITTED:", clean)
+
+function onSubmit(vals) {
+    try {
+        const clean: CourseEventDetails = {
+            ...vals,
+            event_date: toMySQLDateTime(new Date(vals.event_date)),
+        }
+
+        postTrainingReport(clean);
+        console.log("SUBMITTED:", clean)
+
+    } catch(err) {
+        console.log("There was an error submitting the training report", err);
+    }
 }
 
 const { remove, push, fields } = useFieldArray('attendees');