started training report form

ui/src/pages/TrainingReport.vue

@@ -1,21 +1,20 @@
 <script setup lang="ts">
 import { getTrainingReport, getTrainingReports } from '@/api/trainingReport';
-import { trainingReportSchema, courseEventAttendeeSchema } from '@shared/schemas/trainingReportSchema'
 import { CourseAttendee, CourseEventDetails, CourseEventSummary } from '@shared/types/course';
-import { toTypedSchema } from '@vee-validate/zod';
 import { computed, onMounted, ref } from 'vue';
 import {
     Table,
     TableBody,
-    TableCaption,
     TableCell,
-    TableFooter,
     TableHead,
     TableHeader,
     TableRow,
 } from '@/components/ui/table'
-import { Separator } from '@/components/ui/separator'
 import { X } from 'lucide-vue-next';
+import Button from '@/components/ui/button/Button.vue';
+import TrainingReportForm from '@/components/trainingReport/trainingReportForm.vue';
+
+enum sidePanelState { view, create, closed };
 
 const trainingReports = ref<CourseEventSummary[] | null>(null);
 const loaded = ref(false);
@@ -31,10 +30,18 @@ const focusedTrainingTrainers = computed<CourseAttendee[] | null>(() => {
 })
 async function viewTrainingReport(id: number) {
     focusedTrainingReport.value = await getTrainingReport(id);
+    sidePanel.value = sidePanelState.view;
 }
 
 async function closeTrainingReport() {
     focusedTrainingReport.value = null;
+    sidePanel.value = sidePanelState.closed;
+}
+
+const sidePanel = ref<sidePanelState>(sidePanelState.closed);
+
+function createTrainingReport() {
+    sidePanel.value = sidePanelState.create;
 }
 
 onMounted(async () => {
@@ -47,8 +54,9 @@ onMounted(async () => {
     <div class="max-w-7xl mx-auto flex mt-5">
         <!-- training report list -->
         <div class="px-4" :class="focusedTrainingReport == null ? 'w-full' : 'w-1/2'">
-            <div>
+            <div class="flex justify-between">
                 <p class="scroll-m-20 text-2xl font-semibold tracking-tight">Training Reports</p>
+                <Button @click="createTrainingReport">New Training Report</Button>
             </div>
             <Table>
                 <TableHeader>
@@ -74,13 +82,13 @@ onMounted(async () => {
             </Table>
         </div>
         <!-- view training report section -->
-        <div v-if="focusedTrainingReport != null" class="px-4 border-l w-1/2">
+        <div v-if="sidePanel == sidePanelState.view" class="px-4 border-l w-1/2">
             <div class="flex justify-between my-3">
                 <div class="flex gap-5">
                     <p>{{ focusedTrainingReport.course_name }}</p>
                     <p class="text-muted-foreground">{{ focusedTrainingReport.event_date }}</p>
                 </div>
-                <button @click="closeTrainingReport">
+                <button @click="closeTrainingReport" class="cursor-pointer">
                     <X></X>
                 </button>
             </div>
@@ -108,5 +116,8 @@ onMounted(async () => {
                 </div>
             </div>
         </div>
+        <div v-if="sidePanel == sidePanelState.create" class="px-4 border-l w-1/2">
+            <TrainingReportForm></TrainingReportForm>
+        </div>
     </div>
 </template>