CLASSROOMIO-T-1: Personalize marks and attendance to students

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

@@ -28,8 +28,8 @@
 
   // export let lessonId;
   export let path;
+  export let isStudent = null;
   let show = null;
-  let isStudent = null;
 
   const { page } = stores();
 
@@ -105,13 +105,7 @@
         label: 'Submissions',
         to: getNavItemRoute($course.id, 'submissions'),
         hideSortIcon: true,
-        show(groupMembers = [], profileId) {
-          const user = groupMembers.find(
-            (member) => member.profile_id === profileId
-          );
-
-          isStudent = user ? user.role_id === 3 : true;
-
+        show() {
           return !isStudent;
         },
       },
@@ -157,7 +151,7 @@
       </PageNav>
       <div class="navItems">
         {#each navItems as navItem}
-          {#if !navItem.show || (typeof navItem.show === 'function' && navItem.show($group.people, $profile.id))}
+          {#if !navItem.show || (typeof navItem.show === 'function' && navItem.show())}
             <Expandable
               label={navItem.label}
               handleClick={handleMainGroupClick(navItem.to)}

src/components/CourseContainer/index.svelte

@@ -1,31 +1,26 @@
 <script>
-  import { onMount, afterUpdate } from 'svelte';
-
   import Navigation from '../Course/components/Navigation/index.svelte';
   // import { lessons, lesson } from '../Course/components/Lesson/store/lessons';
   // import { questionnaire } from '../Course/components/Lesson/Exercise/store/exercise';
   // import { questionnaireMetaData } from '../Course/components/Lesson/store/answers';
-  import { course } from '../Course/store';
+  import { course, group } from '../Course/store';
   import Confetti from '../Confetti/index.svelte';
   import { isMobile } from '../../utils/store/useMobile';
+  import { profile } from '../../utils/store/user';
 
   export let path = '';
   export let isExercisePage = false;
+  export let isStudent = false;
 
-  function setStoreWithData() {
-    // lessons.set(courseData.lessons);
-    // if (courseData.lesson) {
-    //   lesson.set(courseData.lesson);
-    // }
-    // if (courseData.exercise && courseData.exercise.data) {
-    //   questionnaire.set(courseData.exercise.data);
-    //   questionnaireMetaData.set(courseData.exercise.answers);
-    // }
+  $: {
+    const user = $group.people.find(
+      (person) => person.profile_id === $profile.id
+    );
+
+    if (user) {
+      isStudent = user.role_id === 3;
+    }
   }
-
-  onMount(setStoreWithData);
-
-  afterUpdate(setStoreWithData);
 </script>
 
 <svelte:head>
@@ -33,7 +28,7 @@
 </svelte:head>
 
 <div class="root">
-  <Navigation {path} />
+  <Navigation {path} {isStudent} />
   <div class="rightBar" class:isMobile={$isMobile}>
     {#if isExercisePage}
       <Confetti />

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

@@ -18,13 +18,13 @@
   } from '../../../components/Course/store';
   import { getLectureNo } from '../../../components/Course/function';
   import { fetchCourse } from '../../../utils/services/courses';
-  import { profile } from '../../../utils/store/user';
   import { lessons } from '../../../components/Course/components/Lesson/store/lessons';
   import { ROLE } from '../../../utils/constants/roles';
   import { takeAttendance } from '../../../utils/services/attendance';
   import { snackbarStore } from '../../../components/Snackbar/store';
   import { SNACKBAR_SEVERITY } from '../../../components/Snackbar/constants';
   import { attendance } from '../../../utils/store/attendance';
+  import { profile } from '../../../utils/store/user';
 
   export let courseId;
 
@@ -68,22 +68,16 @@
     setAttendance(data);
   });
 
-  $: students = $group.people.filter(
-    (person) => !!person.profile && person.role_id === ROLE.STUDENT
-  );
-
-  $: {
-    const user = $group.people.find(
-      (person) => person.profile_id === $profile.id
-    );
-
-    if (user) {
-      isStudent = user.role_id === 3;
-    }
-  }
+  $: students = isStudent
+    ? $group.people.filter(
+        (person) => !!person.profile && person.profile.id === $profile.id
+      )
+    : $group.people.filter(
+        (person) => !!person.profile && person.role_id === ROLE.STUDENT
+      );
 </script>
 
-<CourseContainer>
+<CourseContainer bind:isStudent>
   <PageNav title="Attendance" />
   <PageBody>
     <div class="table rounded-md border border-gray-300 w-full">

src/routes/courses/[id]/lessons/index.svelte

@@ -121,7 +121,7 @@
   }
 </script>
 
-<CourseContainer>
+<CourseContainer bind:isStudent>
   <PageNav title="Lessons">
     <div slot="widget">
       <RoleBasedSecurity allowedRoles="[1,2]">

src/routes/courses/[id]/marks.svelte

@@ -21,6 +21,7 @@
   import { fetchCourse, fetchExercises } from '../../../utils/services/courses';
   import { getLectureNo } from '../../../components/Course/function';
   import { fetchMarks } from '../../../utils/services/marks';
+  import { profile } from '../../../utils/store/user';
 
   export let courseId;
 
@@ -29,6 +30,7 @@
   let borderleftGrey =
     'border-r-0 border-t-0 border-b-0 border-l border-gray-300';
   let students = [];
+  let isStudent = false;
 
   let lessonMapping = {}; // { lessonId: { exerciseId: exerciseTitle, ... }, ... }
   let studentMarksByExerciseId = {}; // { groupMemberId: { exerciseId: `total_gotten/points`, ... }, ... }
@@ -85,13 +87,17 @@
   });
 
   $: {
-    students = $group.people.filter(
-      (person) => !!person.profile && person.role_id === ROLE.STUDENT
-    );
+    students = isStudent
+      ? $group.people.filter(
+          (person) => !!person.profile && person.profile.id === $profile.id
+        )
+      : $group.people.filter(
+          (person) => !!person.profile && person.role_id === ROLE.STUDENT
+        );
   }
 </script>
 
-<CourseContainer>
+<CourseContainer bind:isStudent>
   <PageNav title="Marks" />
 
   <PageBody width="w-11/12">

src/routes/courses/[id]/people.svelte

@@ -93,15 +93,6 @@
   });
 
   $: sortAndFilterPeople($group.people, filterBy);
-  $: {
-    const user: Person = $group.people.find(
-      (person: { profile_id: number }) => person.profile_id === $profile.id
-    )!;
-
-    if (user) {
-      isStudent = user.role_id === 3;
-    }
-  }
 </script>
 
 <InviationModal />
@@ -110,7 +101,7 @@
   {deletePerson}
 />
 
-<CourseContainer>
+<CourseContainer bind:isStudent>
   <PageNav title="People" disableSticky={true}>
     <slot:fragment slot="widget">
       <RoleBasedSecurity allowedRoles={[1, 2]}>