CLASSROOMIO-T-82: Attendance Page Redesign

CLASSROOMIO-T-82: Fix sidebar navs

CLASSROOMIO-T-82: Dark Mode Icon Fix

CLASSROOMIO-T-82: Icon Dark Mode Final fix

CLASSROOMIO-T-82: Dark mode icon fix

CLASSROOMIO-T-82: Icon Dark Mode fix

Merge branch 'CLASSROOMIO-T-82' of https://gitlab.com/thenextgreat/classroomio into CLASSROOMIO-T-82

CLASSROOMIO-T-82:
- Impliment Search Functionality
- Dark Mode Fix

Merge branch 'main' into CLASSROOMIO-T-82

CLASSROOMIO-T-82: Saving fix and dark mode button bug

Merge branch 'main' into CLASSROOMIO-T-82

CLASSROOMIO-T-82: Attendance Redesign

CLASSROOMIO-T-82: Redesign Attendance Page


Co-authored-by: Rotimi Best <rotimiibitoyeemma@gmail.com>
Co-authored-by: tunny17 <tvnji17@gmail.com>


Merge-request: CLASSROOMIO-MR-34
Merged-by: Best Admin <best@digdippa.com>

src/lib/components/Course/components/Navigation/NavExpandable.svelte

@@ -12,7 +12,7 @@
   export let total = 0;
   // export let subMenuItems = [];
 
-  let activeClass = 'bg-gray-200 dark:bg-gray-500';
+  let activeClass = 'bg-gray-200 dark:bg-gray-800';
 
   function onClick() {
     handleClick();
@@ -25,7 +25,7 @@
 
 <div class="">
   <button
-    class="item relative flex items-center py-3 px-4 ml-2 mb-1 rounded hover:bg-gray-200 dark:hover:bg-gray-500 {isGroupActive &&
+    class="item relative flex items-center py-3 px-4 ml-2 mb-1 rounded hover:bg-gray-200 dark:hover:bg-gray-800 {isGroupActive &&
       activeClass} w-[95%]"
     tabindex="0"
     on:click={onClick}

src/lib/components/Course/components/Navigation/index.svelte

@@ -32,7 +32,7 @@
   export let isStudent = null;
 
   let show = null;
-  let activeClass = 'bg-gray-200 dark:bg-gray-500';
+  let activeClass = 'bg-gray-200 dark:bg-gray-800';
   let isLessonActive = false;
 
   function handleMainGroupClick(href) {
@@ -200,7 +200,7 @@
                     aria-disabled={!item.is_unlocked}
                   >
                     <div
-                      class="flex items-center py-3 px-4 rounded hover:bg-gray-200 dark:hover:bg-gray-500 w-full {(
+                      class="flex items-center py-3 px-4 rounded hover:bg-gray-200 dark:hover:bg-gray-800 w-full {(
                         path || $page.url.pathname
                       ).includes(item.id) && activeClass}"
                     >

src/lib/components/LMS/SideBar.svelte

@@ -11,7 +11,7 @@
   import { currentOrg } from '$lib/utils/store/org';
   import { profile } from '$lib/utils/store/user';
 
-  let activeClass = 'bg-gray-200 dark:bg-gray-500';
+  let activeClass = 'bg-gray-200 dark:bg-gray-800';
 
   function isActive(pagePath, itemPath) {
     const pageLinkItems = pagePath.split('/');
@@ -45,7 +45,7 @@
       <ul class="my-5">
         <a href="/lms" class="text-black">
           <li
-            class="flex items-center py-3 px-4 mb-2 rounded hover:bg-gray-200 dark:hover:bg-gray-500 {isActive(
+            class="flex items-center py-3 px-4 mb-2 rounded hover:bg-gray-200 dark:hover:bg-gray-800 {isActive(
               $page.url.pathname,
               `/lms`
             ) && activeClass}"
@@ -56,7 +56,7 @@
         </a>
         <a href="/lms/mylearning" class="text-black">
           <li
-            class="flex items-center py-3 px-4 mb-2 rounded hover:bg-gray-200 dark:hover:bg-gray-500 {isActive(
+            class="flex items-center py-3 px-4 mb-2 rounded hover:bg-gray-200 dark:hover:bg-gray-800 {isActive(
               $page.url.pathname,
               `/lms/mylearning`
             ) && activeClass}"
@@ -67,7 +67,7 @@
         </a>
         <a href="/lms/exercises" class="text-black">
           <li
-            class="flex items-center py-3 px-4 mb-2 rounded hover:bg-gray-200 dark:hover:bg-gray-500 {isActive(
+            class="flex items-center py-3 px-4 mb-2 rounded hover:bg-gray-200 dark:hover:bg-gray-800 {isActive(
               $page.url.pathname,
               `/lms/exercises`
             ) && activeClass}"
@@ -82,7 +82,7 @@
     <ul class="my-5 pb-5 px-4">
       <a href="/lms" class="text-black">
         <li
-          class="flex items-center py-3 px-4 mb-2 rounded hover:bg-gray-200 dark:hover:bg-gray-500"
+          class="flex items-center py-3 px-4 mb-2 rounded hover:bg-gray-200 dark:hover:bg-gray-800"
         >
           <HelpIcon size={20} class="carbon-icon dark:text-white" />
           <p class="dark:text-white ml-2">Help</p>
@@ -90,7 +90,7 @@
       </a>
       <a href="/lms/settings" class="text-black">
         <li
-          class="flex items-center py-3 px-4 mb-2 rounded hover:bg-gray-200 dark:hover:bg-gray-500 {isActive(
+          class="flex items-center py-3 px-4 mb-2 rounded hover:bg-gray-200 dark:hover:bg-gray-800 {isActive(
             $page.url.pathname,
             `/lms/settings`
           ) && activeClass}"

src/lib/components/Org/SideBar.svelte

@@ -14,7 +14,7 @@
   import { currentOrg, currentOrgPath } from '$lib/utils/store/org';
   import { profile } from '$lib/utils/store/user';
 
-  let activeClass = 'bg-gray-200 dark:bg-gray-700';
+  let activeClass = 'bg-gray-200 dark:bg-gray-800';
 
   const menuItems = [
     {
@@ -76,7 +76,7 @@
         {#each menuItems as menuItem}
           <a href="{$currentOrgPath}{menuItem.path}" class="text-black no-underline">
             <li
-              class="flex items-center py-3 px-4 mb-2 rounded hover:bg-gray-200 dark:hover:bg-gray-500 {isActive(
+              class="flex items-center py-3 px-4 mb-2 rounded hover:bg-gray-200 dark:hover:bg-gray-800 {isActive(
                 $page.url.pathname,
                 `${$currentOrgPath}${menuItem.path}`
               ) && activeClass}"

src/lib/components/PrimaryButton/constants.js

@@ -18,7 +18,7 @@ export const VARIANTS_CLASS = {
   [VARIANTS.CONTAINED_SUCCESS]: 'bg-green-700 hover:bg-green-900 text-white',
   [VARIANTS.CONTAINED_DANGER]: 'bg-red-700 hover:bg-red-900 text-white',
   [VARIANTS.OUTLINED]:
-    'border border-blue-700 hover:border-black-300 hover:bg-blue-700 text-black hover:text-white',
+    'border border-blue-700 hover:border-black-300 hover:bg-blue-700 text-black hover:text-white dark:text-white',
   [VARIANTS.NONE]:
     'border-none hover:border-black-300 hover:bg-gray-200 dark:hover:bg-gray-500 text-black',
   [VARIANTS.TEXT]: 'text-black hover:underline',

src/lib/utils/services/attendance/index.js

@@ -1,5 +1,5 @@
 import { supabase } from '$lib/utils/functions/supabase';
 
 export async function takeAttendance(update) {
-  return supabase.from('group_attendance').upsert(update);
+  return supabase.from('group_attendance').upsert(update).select();
 }

src/routes/+layout.svelte

@@ -376,4 +376,12 @@
   :global(.border-bottom-c) {
     border-bottom: 1px solid var(--border-color);
   }
+
+  :global(.bx--search-close > svg) {
+    fill: black;
+  }
+
+  :global(.dark .bx--search-close:hover > svg) {
+    fill: #fff;
+  }
 </style>

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

@@ -1,5 +1,15 @@
 <script>
   import { onMount } from 'svelte';
+  import {
+    Search,
+    Checkbox,
+    StructuredList,
+    StructuredListBody,
+    StructuredListCell,
+    StructuredListHead,
+    StructuredListRow,
+    Pagination
+  } from 'carbon-components-svelte';
   import AudioConsoleIcon from 'carbon-icons-svelte/lib/AudioConsole.svelte';
   import CourseContainer from '$lib/components/CourseContainer/index.svelte';
   import PageNav from '$lib/components/PageNav/index.svelte';
@@ -21,6 +31,7 @@
   let borderBottomGrey = 'border-r-0 border-b border-l-0 border-gray-300';
   let students = [];
   let isStudent;
+  let searchValue = '';
 
   function setAttendance(courseData) {
     for (const attendanceItem of courseData.attendance) {
@@ -30,16 +41,16 @@
         $attendance[student_id] = {
           [lesson_id]: {
             id,
-            is_present,
-          },
+            is_present
+          }
         };
       } else {
         $attendance[student_id] = {
           ...$attendance[student_id],
           [lesson_id]: {
             id,
-            is_present,
-          },
+            is_present
+          }
         };
       }
     }
@@ -48,9 +59,7 @@
   function handleAttendanceChange(e, student, lesson) {
     if (isStudent) return;
 
-    const attendanceItem = $attendance[student.id]
-      ? $attendance[student.id][lesson.id] || {}
-      : {};
+    const attendanceItem = $attendance[student.id] ? $attendance[student.id][lesson.id] || {} : {};
 
     /* 
     This validation is useless. We shouldn't assume we already have an attendance item id 
@@ -71,7 +80,7 @@
       student_id: student.id,
       is_present: e.target.checked,
       lesson_id: lesson.id,
-      course_id: data.courseId,
+      course_id: data.courseId
     };
 
     takeAttendance(_data).then((res) => {
@@ -79,28 +88,35 @@
         console.error(`res.error`, res.error);
         $snackbarStore.open = true;
         $snackbarStore.severity = SNACKBAR_SEVERITY.ERROR;
-        $snackbarStore.message =
-          "Something isn't right.  Please reload and take attendance again";
+        $snackbarStore.message = "Something isn't right.  Please reload and take attendance again";
       } else {
         // console.log('res', JSON.stringify(res));
         const { id, is_present } = res.data[0];
         if ($attendance[student.id]) {
           $attendance[student.id][lesson.id] = {
             id,
-            is_present,
+            is_present
           };
         } else {
           $attendance[student.id] = {
             [lesson.id]: {
               id,
-              is_present,
-            },
+              is_present
+            }
           };
         }
       }
     });
   }
 
+  // function for the searchbar
+  function searchStudents(query) {
+    const lowercaseQuery = query.toLowerCase();
+    return students.filter((student) =>
+      student.profile.fullname.toLowerCase().includes(lowercaseQuery)
+    );
+  }
+
   onMount(async () => {
     if ($course.id) {
       if (!Object.keys($attendance).length) {
@@ -115,78 +131,85 @@
   });
 
   $: students = isStudent
-    ? $group.people.filter(
-        (person) => !!person.profile && person.profile.id === $profile.id
-      )
-    : $group.people.filter(
-        (person) => !!person.profile && person.role_id === ROLE.STUDENT
-      );
+    ? $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);
 </script>
 
 <CourseContainer bind:isStudent>
   <PageNav title="Attendance" />
-  <PageBody>
-    <div class="table rounded-md border border-gray-300 w-full">
-      <div
-        class="flex items-center font-bold border-t-0 {borderBottomGrey} p-3"
-      >
-        <p class="dark:text-white w-1/4">Student</p>
-        {#each $lessons as lesson, index}
-          <p class="dark:text-white col" title={lesson.title}>
-            {getLectureNo(index + 1)}
-          </p>
-        {/each}
-      </div>
 
-      {#each students as student}
-        <div
-          class="flex relative items-center p-3 cursor-pointer {borderBottomGrey}"
-        >
-          <div class="w-1/4 flex items-center">
-            <img
-              alt="Student avatar"
-              src={student.profile.avatar_url}
-              class="w-8 h-8 rounded-full mr-2"
-            />
-            <div class="text-sm">
-              <p class="dark:text-white font-semibold">
-                {student.profile.fullname}
-              </p>
-              {#if student.assigned_student_id}
-                <p class="dark:text-white">#{student.assigned_student_id}</p>
-              {/if}
-            </div>
-          </div>
-          {#each $lessons as lesson}
-            <p class="dark:text-white col">
-              <input
-                class="form-radio {isStudent && 'cursor-not-allowed'}"
-                type="checkbox"
-                disabled={isStudent}
-                checked={$attendance[student.id]
-                  ? $attendance[student.id][lesson.id]
-                    ? $attendance[student.id][lesson.id].is_present
-                    : false
-                  : false}
-                on:change={(e) => handleAttendanceChange(e, student, lesson)}
-              />
-            </p>
+  <section class="mx-9 my-5">
+    <div class="flex flex-row items-center justify-between">
+      <div class="flex">
+        <p class="flex items-center mr-5">
+          <Checkbox checked disabled /> Present
+        </p>
+        <p class="flex items-center">
+          <Checkbox disabled /> Absent
+        </p>
+      </div>
+      <div class="dark:">
+        <Search
+          class="dark:text-slate-950"
+          placeholder="Search students"
+          bind:value={searchValue}
+        />
+      </div>
+    </div>
+  </section>
+
+  <section class="my-5 mx-9">
+    <StructuredList class="m-0">
+      <!-- Moved the lesson headers outside the students loop -->
+      <StructuredListHead class="bg-blue-100">
+        <StructuredListRow head class="mx-7">
+          <StructuredListCell head class="text-blue-600 py-3">Student</StructuredListCell>
+          {#each $lessons as lesson, index}
+            <StructuredListCell head class="text-blue-600 py-3"
+              >Lesson 0{getLectureNo(index + 1)}</StructuredListCell
+            >
           {/each}
-        </div>
-      {:else}
+        </StructuredListRow>
+      </StructuredListHead>
+
+      {#each searchStudents(searchValue) as student}
+        <StructuredListBody>
+          <StructuredListRow>
+            <StructuredListCell>
+              <div class="w-1/4 flex items-center">
+                <p class="dark:text-white font-semibold">
+                  {student.profile.fullname}
+                </p>
+              </div>
+            </StructuredListCell>
+            {#each $lessons as lesson}
+              <StructuredListCell class="">
+                <Checkbox
+                  class={isStudent && 'cursor-not-allowed'}
+                  disabled={isStudent}
+                  checked={$attendance[student.id]
+                    ? $attendance[student.id][lesson.id]
+                      ? $attendance[student.id][lesson.id].is_present
+                      : false
+                    : false}
+                  on:change={(e) => handleAttendanceChange(e, student, lesson)}
+                />
+              </StructuredListCell>
+            {/each}
+          </StructuredListRow>
+        </StructuredListBody>
+      {/each}
+    </StructuredList>
+    {#if students.length === 0}
+      <div>
         <Box>
           <AudioConsoleIcon size={32} class="carbon-icon w-80" />
-          <h3 class="text-3xl text-gray-500 dark:text-white">
-            No Student Added
-          </h3>
+          <h3 class="text-3xl text-gray-500 dark:text-white">No Student Added</h3>
         </Box>
-      {/each}
-    </div>
-  </PageBody>
-</CourseContainer>
+      </div>
+    {/if}
 
-<style>
-  .col {
-    width: 50px;
-  }
-</style>
+    <Pagination totalItems={10} pageSizes={[10, 15, 20]} />
+  </section>
+</CourseContainer>