hooked up UI to API

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');