api/src/services/CourseSerivce.ts

@@ -53,7 +53,17 @@ export async function getCourseEventAttendees(id: number): Promise<CourseAttende
 }
 
 export async function getCourseEventDetails(id: number): Promise<CourseEventDetails> {
-    const sql = `SELECT E.*, C.name AS course_name FROM course_events AS E LEFT JOIN courses AS C ON E.course_id = C.id WHERE E.id = ?;`;
+    const sql = `SELECT 
+                    E.*,
+                    M.name AS created_by_name,
+                    C.name AS course_name
+                FROM course_events AS E
+                LEFT JOIN courses AS C 
+                    ON E.course_id = C.id
+                LEFT JOIN members AS M
+                    ON E.created_by = M.id
+                WHERE E.id = ?;
+                `;
     let rows: CourseEventDetails[] = await pool.query(sql, [id]);
     let event = rows[0];
     event.attendees = await getCourseEventAttendees(id);
@@ -65,7 +75,7 @@ export async function insertCourseEvent(event: CourseEventDetails): Promise<numb
     const con = await pool.getConnection();
     try {
         await con.beginTransaction();
-        const res = await con.query("INSERT INTO course_events (course_id, event_date, remarks) VALUES (?, ?, ?);", [event.course_id, event.event_date, event.remarks]);
+        const res = await con.query("INSERT INTO course_events (course_id, event_date, remarks, created_by) VALUES (?, ?, ?, ?);", [event.course_id, event.event_date, event.remarks, event.created_by]);
         var eventID: number = res.insertId;
 
         for (const attendee of event.attendees) {
@@ -89,7 +99,18 @@ export async function insertCourseEvent(event: CourseEventDetails): Promise<numb
 }
 
 export async function getCourseEvents(): Promise<CourseEventSummary[]> {
-    const sql = "SELECT E.id AS event_id, E.course_id, E.event_date AS date, E.created_by, C.name AS course_name FROM course_events as E LEFT JOIN courses AS C ON E.course_id = C.id;";
+    const sql = `SELECT 
+                    E.id AS event_id,
+                    E.course_id,
+                    E.event_date AS date,
+                    E.created_by,
+                    C.name AS course_name,
+                    M.name AS created_by_name
+                FROM course_events AS E
+                LEFT JOIN courses AS C 
+                    ON E.course_id = C.id
+                LEFT JOIN members AS M
+                    ON E.created_by = M.id;`;
     let events: CourseEventSummary[] = await pool.query(sql);
     return events;
 }

shared/types/course.ts

@@ -29,6 +29,7 @@ export interface CourseEventDetails {
   attendees: CourseAttendee[] | null;
 
   created_by: number | null;
+  created_by_name: string | null;
   course_name: string | null;
 }
 
@@ -80,4 +81,5 @@ export interface CourseEventSummary {
   course_name: string;
   date: string;
   created_by: number;
+  created_by_name: string;
 }

ui/src/pages/TrainingReport.vue

@@ -60,7 +60,7 @@ onMounted(async () => {
             </div>
             <div class="overflow-y-auto max-h-[70vh] mt-5 scrollbar-themed">
                 <Table>
-                    <TableHeader>
+                    <TableHeader class="">
                         <TableRow>
                             <TableHead class="w-[100px]">
                                 Training
@@ -76,7 +76,8 @@ onMounted(async () => {
                             @click="viewTrainingReport(report.event_id);">
                             <TableCell class="font-medium">{{ report.course_name }}</TableCell>
                             <TableCell>{{ report.date }}</TableCell>
-                            <TableCell class="text-right">{{ report.created_by === null ? "Unknown User" : report.created_by
+                            <TableCell class="text-right">{{ report.created_by_name === null ? "Unknown User" :
+                                report.created_by_name
                             }}</TableCell>
                         </TableRow>
                     </TableBody>
@@ -89,6 +90,9 @@ onMounted(async () => {
                 <div class="flex gap-5">
                     <p>{{ focusedTrainingReport.course_name }}</p>
                     <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>
                 </div>
                 <button @click="closeTrainingReport" class="cursor-pointer">
                     <X></X>
@@ -144,12 +148,14 @@ onMounted(async () => {
 
 /* Chrome, Edge, Safari */
 .scrollbar-themed::-webkit-scrollbar {
-    width: 10px; /* slightly wider to allow padding look */
+    width: 10px;
+    /* slightly wider to allow padding look */
 }
 
 .scrollbar-themed::-webkit-scrollbar-track {
     background: #1f1f1f;
-    margin-left: 6px; /* ❗ adds space between content + scrollbar */
+    margin-left: 6px;
+    /* ❗ adds space between content + scrollbar */
 }
 
 .scrollbar-themed::-webkit-scrollbar-thumb {
@@ -160,5 +166,4 @@ onMounted(async () => {
 .scrollbar-themed::-webkit-scrollbar-thumb:hover {
     background: #777;
 }
-
 </style>