Limit functionalities by roles

src/components/Course/components/Lesson/Exercise/ViewMode.svelte

@@ -8,12 +8,13 @@
   import CheckboxQuestion from '../../../../Question/CheckboxQuestion/index.svelte';
   import TextareaQuestion from '../../../../Question/TextareaQuestion/index.svelte';
   import PrimaryButton from '../../../../PrimaryButton/index.svelte';
+  import RoleBasedSecurity from '../../../../RoleBasedSecurity/index.svelte';
   import Progress from '../../../../Progress/index.svelte';
   import { removeDuplicate } from '../../../../../utils/functions/removeDuplicate';
   import { QUESTION_TYPE } from '../../../../Question/constants';
   import { STATUS } from './constants';
   import { getPropsForQuestion, filterOutDeleted } from './functions';
-  import { formatAnswers } from '../../../function';
+  import { formatAnswers, getGroupMemberId } from '../../../function';
   import { submitExercise } from '../../../../../utils/services/courses';
   import { fetchSubmission } from '../../../../../utils/services/submissions';
   import { profile } from '../../../../../utils/store/user';
@@ -25,14 +26,6 @@
   let renderProps = {};
   let submission;
 
-  function getGroupMemberId(people, profileId) {
-    const groupMember = people.find(
-      (person) => person.profile_id === profileId
-    );
-
-    return groupMember ? groupMember.id : null;
-  }
-
   function handleStart() {
     $questionnaireMetaData.currentQuestionIndex += 1;
   }
@@ -185,8 +178,10 @@
     class="w-4/5 h-40 m-auto flex items-center justify-center text-center border-2 border-gray-200 rounded-md"
   >
     <h3 class="text-2xl">
-      No questions added. <br /> Click the
-      <span class="text-blue-700">Edit</span> button to add.
+      No questions added. <br />
+      <RoleBasedSecurity allowedRoles="[1,2]">
+        Click the <span class="text-blue-700">Edit</span> button to add.
+      </RoleBasedSecurity>
     </h3>
   </div>
 {:else if $questionnaireMetaData.currentQuestionIndex === 0}

src/components/Course/components/Lesson/Exercise/index.svelte

@@ -9,6 +9,7 @@
   } from '../store/exercise';
   import PrimaryButton from '../../../../PrimaryButton/index.svelte';
   import PageBody from '../../../../PageBody/index.svelte';
+  import RoleBasedSecurity from '../../../../RoleBasedSecurity/index.svelte';
   import ViewMode from './ViewMode.svelte';
   import EditMode from './EditMode.svelte';
   import MODES from '../../../../../utils/constants/mode.js';
@@ -53,12 +54,15 @@
 <PageBody>
   <svelte:fragment slot="header">
     <div class="flex items-center">
-      <PrimaryButton
-        className="mr-2"
-        variant={VARIANTS.OUTLINED}
-        label={mode === MODES.edit ? 'Save' : 'Edit'}
-        onClick={handleMode}
-      />
+      <RoleBasedSecurity allowedRoles="[1,2]">
+        <PrimaryButton
+          className="mr-2"
+          variant={VARIANTS.OUTLINED}
+          label={mode === MODES.edit ? 'Save' : 'Edit'}
+          onClick={handleMode}
+        />
+      </RoleBasedSecurity>
+
       <!-- {#if mode === MODES.edit || preview} -->
       <PrimaryButton
         variant={preview ? VARIANTS.CONTAINED : VARIANTS.OUTLINED}

src/components/Course/components/Lesson/Exercises/index.svelte

@@ -3,6 +3,7 @@
   import AudioConsole32 from 'carbon-icons-svelte/lib/AudioConsole32';
   import Box from '../../../../Box/index.svelte';
   import PrimaryButton from '../../../../PrimaryButton/index.svelte';
+  import RoleBasedSecurity from '../../../../RoleBasedSecurity/index.svelte';
   import PageBody from '../../../../PageBody/index.svelte';
   import Modal from '../../../../Modal/index.svelte';
   import TextField from '../../../../Form/TextField.svelte';
@@ -59,8 +60,6 @@
   }
 
   async function getExercise(exerciseId) {
-    console.log('getExercise', exerciseId);
-
     if (!exerciseId) return;
 
     isQuestionnaireFetching.update(() => true);
@@ -130,11 +129,13 @@
 
   <PageBody>
     <slot:fragment slot="header">
-      <PrimaryButton
-        className="mr-2"
-        label="Add"
-        onClick={() => (open = !open)}
-      />
+      <RoleBasedSecurity allowedRoles="[1,2]">
+        <PrimaryButton
+          className="mr-2"
+          label="Add"
+          onClick={() => (open = !open)}
+        />
+      </RoleBasedSecurity>
     </slot:fragment>
 
     <div class="flex flex-wrap">

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

@@ -17,12 +17,14 @@
     getLectureNo,
   } from '../../function';
 
+  import RoleBasedSecurity from '../../../RoleBasedSecurity/index.svelte';
   import Settings from '../Settings/index.svelte';
   import { settingsDialog } from '../Settings/store';
   import { lessons } from '../Lesson/store/lessons';
-  import { course } from '../../store';
+  import { course, group } from '../../store';
   import { updateCourse } from '../../../../utils/services/courses';
   import { profile } from '../../../../utils/store/user';
+  import People from '../../../../routes/people.svelte';
 
   // export let lessonId;
   export let path;
@@ -92,6 +94,13 @@
         label: 'Submissions',
         to: getNavItemRoute($course.id, 'submissions'),
         hideSortIcon: true,
+        show(groupMembers = [], profileId) {
+          const user = groupMembers.find(
+            (member) => member.profile_id === profileId
+          );
+
+          return user ? user.role_id !== 3 : false;
+        },
       },
       {
         label: 'Marks',
@@ -122,44 +131,48 @@
           <Avatar src={$course.logo} />
         </slot:fragment>
         <slot:fragment slot="widget">
-          <IconButton
-            onClick={() => ($settingsDialog.open = !$settingsDialog.open)}
-          >
-            <Settings20 class="carbon-icon" />
-          </IconButton>
+          <RoleBasedSecurity allowedRoles="[1,2]">
+            <IconButton
+              onClick={() => ($settingsDialog.open = !$settingsDialog.open)}
+            >
+              <Settings20 class="carbon-icon" />
+            </IconButton>
+          </RoleBasedSecurity>
         </slot:fragment>
       </PageNav>
       {#each navItems as navItem}
-        <Expandable
-          label={navItem.label}
-          handleClick={handleMainGroupClick(navItem.to)}
-          isGroupActive={(path || $page.path) === navItem.to}
-          hideSortIcon={navItem.hideSortIcon}
-        >
-          {#if navItem.isLecture}
-            {#each $lessons as item, index}
-              <a
-                class="item flex items-center {(path || $page.path).includes(
-                  item.id
-                ) && 'active'} pl-7 py-2 {!item.is_complete &&
-                  'cursor-not-allowed'}"
-                href={getLessonsRoute($course.id, item.id)}
-              >
-                <span class="course-counter">
-                  {getLectureNo(index + 1)}
-                </span>
-                <span>{item.title}</span>
-                {#if item.is_complete}
-                  <span class="ml-2 success">
-                    <CheckmarkFilled20 class="carbon-icon" />
+        {#if !navItem.show || (typeof navItem.show === 'function' && navItem.show($group.people, $profile.id))}
+          <Expandable
+            label={navItem.label}
+            handleClick={handleMainGroupClick(navItem.to)}
+            isGroupActive={(path || $page.path) === navItem.to}
+            hideSortIcon={navItem.hideSortIcon}
+          >
+            {#if navItem.isLecture}
+              {#each $lessons as item, index}
+                <a
+                  class="item flex items-center {(path || $page.path).includes(
+                    item.id
+                  ) && 'active'} pl-7 py-2 {!item.is_complete &&
+                    'cursor-not-allowed'}"
+                  href={getLessonsRoute($course.id, item.id)}
+                >
+                  <span class="course-counter">
+                    {getLectureNo(index + 1)}
                   </span>
-                {:else}
-                  <span class="text-md ml-2">🔒</span>
-                {/if}
-              </a>
-            {/each}
-          {/if}
-        </Expandable>
+                  <span>{item.title}</span>
+                  {#if item.is_complete}
+                    <span class="ml-2 success">
+                      <CheckmarkFilled20 class="carbon-icon" />
+                    </span>
+                  {:else}
+                    <span class="text-md ml-2">🔒</span>
+                  {/if}
+                </a>
+              {/each}
+            {/if}
+          </Expandable>
+        {/if}
       {/each}
 
       <div

src/components/Course/function.js

@@ -1,5 +1,11 @@
 import { ROUTES } from './constants';
 
+export function getGroupMemberId(people, profileId) {
+  const groupMember = people.find((person) => person.profile_id === profileId);
+
+  return groupMember ? groupMember.id : null;
+}
+
 export function getNavItemRoute(courseId, routeId) {
   const path = `/${ROUTES.COURSES}/${courseId}`;
 

src/components/Course/index.svelte

@@ -1,5 +1,6 @@
 <script>
   import marked from 'marked';
+  import RoleBasedSecurity from '../RoleBasedSecurity/index.svelte';
   import PageNav from '../PageNav/index.svelte';
   import MODES from '../../utils/constants/mode';
   import PrimaryButton from '../PrimaryButton/index.svelte';
@@ -26,13 +27,15 @@
 
 <PageNav title="Overview" disableSticky={true}>
   <svelte:fragment slot="widget">
-    <div class="flex items-center">
-      <PrimaryButton
-        className="mr-2"
-        label={mode === MODES.edit ? 'Save' : 'Edit'}
-        onClick={handleModeChange}
-      />
-    </div>
+    <RoleBasedSecurity allowedRoles="[1,2]">
+      <div class="flex items-center">
+        <PrimaryButton
+          className="mr-2"
+          label={mode === MODES.edit ? 'Save' : 'Edit'}
+          onClick={handleModeChange}
+        />
+      </div>
+    </RoleBasedSecurity>
   </svelte:fragment>
 </PageNav>
 

src/components/RoleBasedSecurity/index.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+  // import { ROLE } from '../../utils/constants/roles';
+  import { profile } from '../../utils/store/user';
+  import { group } from '../Course/store';
+  import type { Person } from '../Course/components/People/types';
+
+  export let allowedRoles: number[] = [];
+
+  let userRole: number = 0;
+
+  $: {
+    const user: Person = $group.people.find(
+      (person: { profile_id: number }) => person.profile_id === $profile.id
+    )!;
+
+    if (user) {
+      userRole = user.role_id;
+    }
+  }
+</script>
+
+{#if allowedRoles.includes(userRole)}
+  <slot />
+{/if}

src/components/RoleBasedSecurity/store.js

@@ -0,0 +1 @@
+import { writable } from 'svelte/store';