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 <[email protected]> Co-authored-by: tunny17 <[email protected]> Merge-request: CLASSROOMIO-MR-34 Merged-by: Best Admin <[email protected]>
2023-08-07 09:53:07 +00:00
parent a9c8fbb1fd
commit 8465ba5371
8 changed files with 123 additions and 92 deletions
@@ -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}
@@ -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}"
                    >
@@ -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}"
@@ -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}"
@@ -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',
@@ -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();
 }
@@ -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>
@@ -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>