fix: update API endpoints and course marks page

apps/dashboard/src/routes/api/courses/exercises/+server.ts

@@ -49,16 +49,9 @@ export const POST: RequestHandler = async ({ request }) => {
       throw new Error('Error fetching exercises');
     }
 
-    const formattedExercises = exercises.map((exercise) => ({
-      lesson_id: exercise.lesson_id,
-      exercise_id: exercise.id,
-      exercise_title: exercise.title,
-      points: exercise.points
-    }));
-
     return json({
       success: true,
-      data: formattedExercises
+      data: exercises
     });
   } catch (error) {
     const message = error instanceof Error ? error.message : 'Internal server error';

apps/dashboard/src/routes/courses/[id]/marks/+page.svelte

@@ -18,7 +18,12 @@
   import { profile } from '$lib/utils/store/user';
   import type { GroupPerson } from '$lib/utils/types';
   import type { CurrentOrg } from '$lib/utils/types/org';
-  import { Loading, OverflowMenu, OverflowMenuItem } from 'carbon-components-svelte';
+  import {
+    Loading,
+    OverflowMenu,
+    OverflowMenuItem,
+    SkeletonPlaceholder
+  } from 'carbon-components-svelte';
   import AudioConsoleIcon from 'carbon-icons-svelte/lib/AudioConsole.svelte';
   import Download from 'carbon-icons-svelte/lib/Download.svelte';
   import jsPDF from 'jspdf';
@@ -33,6 +38,7 @@
   let lessonMapping = {}; // { lessonId: { exerciseId: exerciseTitle, ... }, ... }
   let studentMarksByExerciseId = {}; // { groupMemberId: { exerciseId: `total_gotten/points`, ... }, ... }
   let isDownloading = false;
+  let isLoading = false;
 
   function calculateStudentTotal(studentExerciseData) {
     if (!studentExerciseData) return 0;
@@ -44,14 +50,19 @@
   }
 
   async function firstRender(courseId: string) {
+    isLoading = true;
     const { data: marks, error } = await fetchMarks(courseId);
     if (error) {
+      isLoading = false;
       console.error('Error fetching marks', error);
       snackbar.error('snackbar.marks.error');
       return;
     }
 
-    if (!marks || !Array.isArray(marks)) return;
+    if (!marks || !Array.isArray(marks)) {
+      isLoading = false;
+      return;
+    }
 
     marks.forEach((mark) => {
       const { groupmember_id, exercise_id, total_points_gotten } = mark;
@@ -85,6 +96,8 @@
         };
       }
     });
+
+    isLoading = false;
   }
   // TODO WRITE A REDIRECT FUNCTION FOR THIS THIS PAGE
 
@@ -238,86 +251,95 @@
     </PageNav>
 
     <PageBody width="w-full max-w-6xl md:w-11/12">
-      <div id="tableContainer" class="table w-full rounded-md border border-gray-300">
+      {#if isLoading}
-        <div class="flex items-center {borderBottomGrey}">
+        <div class=" h-full w-full">
-          <div class="box flex items-center p-3">
+          <SkeletonPlaceholder class="mb-4 h-8 w-full" />
-            <p class="w-40 dark:text-white">{$t('course.navItem.marks.student')}</p>
+          <SkeletonPlaceholder class="mb-4 h-8 w-full" />
-          </div>
+          <SkeletonPlaceholder class="mb-4 h-8 w-full" />
-          {#each $lessons as lesson, index}
+          <SkeletonPlaceholder class="mb-4 h-8 w-full" />
-            {#if lessonMapping[lesson.id]}
-              <div class="box flex flex-col items-center {borderleftGrey}">
-                <p class="col lesson-number dark:text-white" title={lesson.title}>
-                  {getLectureNo(index + 1)}
-                </p>
-                <div
-                  class="flex h-full items-center border-b-0 border-l-0 border-r-0 border-t border-gray-300"
-                >
-                  {#each Object.keys(lessonMapping[lesson.id]) as exerciseId, index}
-                    <p
-                      class="col text-sm dark:text-white {index && borderleftGrey}"
-                      title={lessonMapping[lesson.id][exerciseId].title}
-                    >
-                      {lessonMapping[lesson.id][exerciseId].title}
-                      <span>({lessonMapping[lesson.id][exerciseId].points})</span>
-                    </p>
-                  {/each}
-                </div>
-              </div>
-            {/if}
-          {/each}
-          <div class="box flex items-center {borderleftGrey}">
-            <p class="w-20 text-center dark:text-white">{$t('course.navItem.marks.total')}</p>
-          </div>
         </div>
-
+      {:else}
-        {#each students as student}
+        <div id="tableContainer" class="table w-full rounded-md border border-gray-300">
-          <div class="relative flex cursor-pointer items-center p-3 {borderBottomGrey}">
+          <div class="flex items-center {borderBottomGrey}">
-            <div class="flex w-40 items-center">
+            <div class="box flex items-center p-3">
-              <img
+              <p class="w-40 dark:text-white">{$t('course.navItem.marks.student')}</p>
-                alt="Student avatar"
-                src={student.profile.avatar_url}
-                class="mr-2 h-8 w-8 rounded-full"
-              />
-              <div class="text-sm">
-                <p class="font-semibold dark:text-white">
-                  {student.profile.fullname}
-                </p>
-                <p class="dark:text-white">
-                  {`${student.assigned_student_id ? '#' + student.assigned_student_id : '-'}`}
-                </p>
-              </div>
             </div>
-            {#each $lessons as lesson}
+            {#each $lessons as lesson, index}
               {#if lessonMapping[lesson.id]}
-                <div class="flex items-center">
+                <div class="box flex flex-col items-center {borderleftGrey}">
-                  {#each Object.keys(lessonMapping[lesson.id]) as exerciseId}
+                  <p class="col lesson-number dark:text-white" title={lesson.title}>
-                    <p class="col dark:text-white">
+                    {getLectureNo(index + 1)}
-                      {studentMarksByExerciseId[student.id]
+                  </p>
-                        ? studentMarksByExerciseId[student.id][exerciseId] || '-'
+                  <div
-                        : '-'}
+                    class="flex h-full items-center border-b-0 border-l-0 border-r-0 border-t border-gray-300"
-                    </p>
+                  >
-                  {/each}
+                    {#each Object.keys(lessonMapping[lesson.id]) as exerciseId, index}
+                      <p
+                        class="col text-sm dark:text-white {index && borderleftGrey}"
+                        title={lessonMapping[lesson.id][exerciseId].title}
+                      >
+                        {lessonMapping[lesson.id][exerciseId].title}
+                        <span>({lessonMapping[lesson.id][exerciseId].points})</span>
+                      </p>
+                    {/each}
+                  </div>
                 </div>
               {/if}
             {/each}
-
+            <div class="box flex items-center {borderleftGrey}">
-            <div class="flex w-20 items-center">
+              <p class="w-20 text-center dark:text-white">{$t('course.navItem.marks.total')}</p>
-              <div class="text-sm">
-                <p class="col dark:text-white">
-                  {calculateStudentTotal(studentMarksByExerciseId[student.id])}
-                </p>
-              </div>
             </div>
           </div>
-        {:else}
+
-          <Box>
+          {#each students as student}
-            <AudioConsoleIcon size={32} class="carbon-icon w-80" />
+            <div class="relative flex cursor-pointer items-center p-3 {borderBottomGrey}">
-            <h3 class="text-3xl text-gray-500 dark:text-white">
+              <div class="flex w-40 items-center">
-              {$t('course.navItem.marks.no_student')}
+                <img
-            </h3>
+                  alt="Student avatar"
-          </Box>
+                  src={student.profile.avatar_url}
-        {/each}
+                  class="mr-2 h-8 w-8 rounded-full"
-      </div>
+                />
+                <div class="text-sm">
+                  <p class="font-semibold dark:text-white">
+                    {student.profile.fullname}
+                  </p>
+                  <p class="dark:text-white">
+                    {`${student.assigned_student_id ? '#' + student.assigned_student_id : '-'}`}
+                  </p>
+                </div>
+              </div>
+              {#each $lessons as lesson}
+                {#if lessonMapping[lesson.id]}
+                  <div class="flex items-center">
+                    {#each Object.keys(lessonMapping[lesson.id]) as exerciseId}
+                      <p class="col dark:text-white">
+                        {studentMarksByExerciseId[student.id]
+                          ? studentMarksByExerciseId[student.id][exerciseId] || '-'
+                          : '-'}
+                      </p>
+                    {/each}
+                  </div>
+                {/if}
+              {/each}
+
+              <div class="flex w-20 items-center">
+                <div class="text-sm">
+                  <p class="col dark:text-white">
+                    {calculateStudentTotal(studentMarksByExerciseId[student.id])}
+                  </p>
+                </div>
+              </div>
+            </div>
+          {:else}
+            <Box>
+              <AudioConsoleIcon size={32} class="carbon-icon w-80" />
+              <h3 class="text-3xl text-gray-500 dark:text-white">
+                {$t('course.navItem.marks.no_student')}
+              </h3>
+            </Box>
+          {/each}
+        </div>
+      {/if}
     </PageBody>
   </RoleBasedSecurity>
 </CourseContainer>