CLASSROOMIO-T-108: Attendance improvement + complete lms exercise

src/routes/courses/[id]/attendance/+page.svelte

@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
   import { onMount } from 'svelte';
   import {
     Search,
@@ -22,16 +22,25 @@
   import { ROLE } from '$lib/utils/constants/roles';
   import { takeAttendance } from '$lib/utils/services/attendance';
   import { snackbar } from '$lib/components/Snackbar/store';
-  import { attendance } from '$lib/utils/store/attendance';
+  import { attendance } from '$lib/utils/store/attendance.js';
   import { profile } from '$lib/utils/store/user';
+  import type { GroupPerson, Lesson } from '$lib/utils/types/index';
 
   export let data;
+  interface CourseData {
+    attendance: {
+      student_id: string;
+      lesson_id: string;
+      is_present: boolean;
+      id: number;
+    }[];
+  }
 
-  let students = [];
-  let isStudent;
+  let students: GroupPerson[] = [];
+  let isStudent: boolean;
   let searchValue = '';
 
-  function setAttendance(courseData) {
+  function setAttendance(courseData: CourseData) {
     for (const attendanceItem of courseData.attendance) {
       const { student_id, lesson_id, is_present, id } = attendanceItem;
 
@@ -54,10 +63,12 @@
     }
   }
 
-  function handleAttendanceChange(e, student, lesson) {
+  function handleAttendanceChange(e: any, student: GroupPerson, lesson: Lesson) {
     if (isStudent) return;
 
-    const attendanceItem = $attendance[student.id] ? $attendance[student.id][lesson.id] || {} : {};
+    const attendanceItem = $attendance[student.id]
+      ? $attendance[student.id][lesson.id] || { id: undefined }
+      : { id: undefined };
 
     /* 
     This validation is useless. We shouldn't assume we already have an attendance item id 
@@ -102,7 +113,7 @@
   }
 
   // function for the searchbar
-  function searchStudents(query) {
+  function searchStudents(query: string) {
     const lowercaseQuery = query.toLowerCase();
     return students.filter((student) =>
       student.profile.fullname.toLowerCase().includes(lowercaseQuery)
@@ -118,6 +129,8 @@
     }
 
     const { data: _data } = await fetchCourse(data.courseId);
+    if (!_data) return;
+
     setCourse(_data);
     setAttendance(_data);
   });
@@ -125,7 +138,7 @@
   $: students = isStudent
     ? $group.people.filter((person) => !!person.profile && person.profile.id === $profile.id)
     : $group.people.filter((person) => !!person.profile && person.role_id === ROLE.STUDENT);
-  console.log(students);
+  $: console.log(students);
 </script>
 
 <CourseContainer bind:isStudent>
@@ -180,7 +193,7 @@
               {#each $lessons as lesson}
                 <StructuredListCell class="">
                   <Checkbox
-                    class={isStudent && 'cursor-not-allowed'}
+                    class={isStudent ? 'cursor-not-allowed' : ''}
                     disabled={isStudent}
                     checked={$attendance[student.id]
                       ? $attendance[student.id][lesson.id]

src/routes/courses/[id]/lessons/+page.svelte

@@ -50,7 +50,6 @@
     return `${ye}-${mo}-${da}`;
   }
 
-  // TODO: CRUD of lessons
   function addLesson() {
     openModal = true;
   }

src/routes/courses/[id]/lessons/[...lessonParams]/+page.svelte

@@ -51,7 +51,7 @@
     }
   }
 
-  async function fetchReqData(lessonId = '') {
+  async function fetchReqData(lessonId = '', isMaterialsTabActive: false) {
     isFetching = true;
 
     let lessonData;
@@ -61,11 +61,12 @@
       lessonData = _data?.lessons.find((lesson) => lesson.id === lessonId);
 
       setCourse(_data);
-    } else if (prevLessonId !== lessonId) {
+    } else if (isMaterialsTabActive) {
       const lesson = await fetchLesson(lessonId);
       lessonData = lesson.data;
     }
 
+    console.log('lessonData', lessonData);
     prevLessonId = lessonId;
 
     const totalExercises = lessonData?.totalExercises?.[0] && lessonData.totalExercises[0].count;
@@ -197,7 +198,7 @@
 
   $: if (data.courseId && browser) {
     mode = MODES.view;
-    fetchReqData(data.lessonId);
+    fetchReqData(data.lessonId, data.isMaterialsTabActive);
   }
 </script>
 

src/routes/courses/[id]/submissions/+page.svelte

@@ -242,14 +242,14 @@
     <PageNav title="Submitted Exercises" />
 
     <PageBody width="w-full max-w-6xl md:w-11/12 overflow-x-auto">
-      <div class="flex items-center w-full overflow-x-scroll">
+      <div class="flex items-center w-full">
         {#each sections as { id, title, items }, idx (id)}
           <div
-            class="section rounded-md bg-gray-100 dark:bg-black border border-gray-50 p-3 h-80 mr-3 overflow-hidden"
+            class="section rounded-md bg-gray-100 dark:bg-black border border-gray-50 dark:border-neutral-600 p-3 h-80 mr-3 overflow-hidden"
             animate:flip={{ duration: flipDurationMs }}
           >
             <div class="flex items-center mb-2">
-              <Chip value={items.length} class="bg-set" />
+              <Chip value={items.length} className="bg-set dark:bg-neutral-800" />
               <p class="dark:text-white ml-2 font-bold">{title}</p>
             </div>
             <div
@@ -264,9 +264,9 @@
             >
               {#each items as item (item.id)}
                 <div
-                  class="border {item.isEarly
-                    ? 'border-grey-700'
-                    : 'border-red-700'} w-full my-2 mx-0 rounded-md bg-white dark:bg-black py-3 px-3"
+                  class="{item.isEarly
+                    ? 'border-none'
+                    : 'border border-red-700'} w-full my-2 mx-0 rounded-md bg-white dark:bg-neutral-800 py-3 px-3"
                   animate:flip={{ duration: flipDurationMs }}
                 >
                   <a