started training report form

ui/src/components/trainingReport/trainingReportForm.vue

@@ -0,0 +1,84 @@
+<script setup lang="ts">
+import { trainingReportSchema, courseEventAttendeeSchema } from '@shared/schemas/trainingReportSchema'
+import { Course } from '@shared/types/course'
+import { useForm, useFieldArray } from 'vee-validate'
+import { toTypedSchema } from '@vee-validate/zod'
+import {
+    FormControl,
+    FormDescription,
+    FormField,
+    FormItem,
+    FormLabel,
+    FormMessage
+} from '@/components/ui/form'
+import { onMounted, ref } from 'vue'
+import { getAllTrainings } from '@/api/trainingReport'
+import { Member } from '@/api/member'
+
+console.log(trainingReportSchema instanceof z.ZodType)
+
+const form = useForm({ validationSchema: toTypedSchema(trainingReportSchema) });
+
+const { fields: attendeeFields, push, remove } = useFieldArray({
+    name: 'attendees',
+})
+function onSubmit(vals) {
+    console.log(vals);
+}
+
+import z from 'zod'
+const schema = z.object({ x: z.string() })
+const typed = toTypedSchema(schema)
+console.log(typed)
+
+
+const trainings = ref<Course[] | null>(null);
+const members = ref<Member[] | null>(null);
+
+onMounted(async () => {
+    trainings.value = await getAllTrainings();
+})
+</script>
+<template>
+    <form @submit="form.handleSubmit(onSubmit)">
+
+        <!-- Training report fields here -->
+
+        <div class="my-6">
+            <h2 class="font-semibold text-lg mb-4">Attendees</h2>
+
+            <div v-for="(field, idx) in attendeeFields" :key="field.key" class="mb-4 p-4 border rounded">
+
+                <!-- attendee_id -->
+                <FormField name="attendees[idx].attendee_id" v-slot="{ componentField }">
+                    <FormItem>
+                        <FormLabel>Attendee ID</FormLabel>
+                        <FormControl>
+                            <Input type="number" v-bind="componentField" />
+                        </FormControl>
+                        <FormMessage />
+                    </FormItem>
+                </FormField>
+
+                <!-- passed -->
+                <FormField name="attendees[idx].passed" v-slot="{ componentField }">
+                    <FormItem>
+                        <FormLabel>Passed</FormLabel>
+                        <FormControl>
+                            <Checkbox v-bind="componentField" />
+                        </FormControl>
+                        <FormMessage />
+                    </FormItem>
+                </FormField>
+
+                <Button variant="destructive" @click.prevent="remove(idx)">Remove</Button>
+            </div>
+
+            <Button @click.prevent="push({ attendee_id: null, attendee_role_id: null, passed: false, remarks: null })">
+                Add Attendee
+            </Button>
+        </div>
+
+        <Button type="submit">Submit Report</Button>
+    </form>
+</template>