From 07eba6b4e0838c8d7d44a133898f8aa4256cdd7b Mon Sep 17 00:00:00 2001 From: rotimi-best Date: Sat, 11 Sep 2021 21:52:46 +0300 Subject: [PATCH] Limit functionalities by roles --- .../Lesson/Exercise/ViewMode.svelte | 17 +-- .../components/Lesson/Exercise/index.svelte | 16 ++- .../components/Lesson/Exercises/index.svelte | 15 +-- .../Course/components/Navigation/index.svelte | 83 +++++++------ src/components/Course/function.js | 6 + src/components/Course/index.svelte | 17 +-- src/components/RoleBasedSecurity/index.svelte | 24 ++++ src/components/RoleBasedSecurity/store.js | 1 + src/routes/courses/[id]/attendance.svelte | 17 ++- .../lessons/[...lessonParams]/index.svelte | 27 ++-- src/routes/courses/[id]/lessons/index.svelte | 111 ++++++++--------- src/routes/courses/[id]/marks.svelte | 2 - src/routes/courses/[id]/people.svelte | 69 +++++++---- src/routes/courses/[id]/submissions.svelte | 115 +++++++++--------- 14 files changed, 296 insertions(+), 224 deletions(-) create mode 100644 src/components/RoleBasedSecurity/index.svelte create mode 100644 src/components/RoleBasedSecurity/store.js diff --git a/src/components/Course/components/Lesson/Exercise/ViewMode.svelte b/src/components/Course/components/Lesson/Exercise/ViewMode.svelte index 3a60b8d2..857acc27 100644 --- a/src/components/Course/components/Lesson/Exercise/ViewMode.svelte +++ b/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" >

- No questions added.
Click the - Edit button to add. + No questions added.
+ + Click the Edit button to add. +

{:else if $questionnaireMetaData.currentQuestionIndex === 0} diff --git a/src/components/Course/components/Lesson/Exercise/index.svelte b/src/components/Course/components/Lesson/Exercise/index.svelte index 3166096a..a1ef419b 100644 --- a/src/components/Course/components/Lesson/Exercise/index.svelte +++ b/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 @@
- + + + + true); @@ -130,11 +129,13 @@ - (open = !open)} - /> + + (open = !open)} + /> +
diff --git a/src/components/Course/components/Navigation/index.svelte b/src/components/Course/components/Navigation/index.svelte index abdce528..99cbabac 100644 --- a/src/components/Course/components/Navigation/index.svelte +++ b/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 @@ - ($settingsDialog.open = !$settingsDialog.open)} - > - - + + ($settingsDialog.open = !$settingsDialog.open)} + > + + + {#each navItems as navItem} - - {#if navItem.isLecture} - {#each $lessons as item, index} - - - {getLectureNo(index + 1)} - - {item.title} - {#if item.is_complete} - - + {#if !navItem.show || (typeof navItem.show === 'function' && navItem.show($group.people, $profile.id))} + + {#if navItem.isLecture} + {#each $lessons as item, index} + + + {getLectureNo(index + 1)} - {:else} - 🔒 - {/if} - - {/each} - {/if} - + {item.title} + {#if item.is_complete} + + + + {:else} + 🔒 + {/if} + + {/each} + {/if} + + {/if} {/each}
person.profile_id === profileId); + + return groupMember ? groupMember.id : null; +} + export function getNavItemRoute(courseId, routeId) { const path = `/${ROUTES.COURSES}/${courseId}`; diff --git a/src/components/Course/index.svelte b/src/components/Course/index.svelte index 68e090b8..68ac035c 100644 --- a/src/components/Course/index.svelte +++ b/src/components/Course/index.svelte @@ -1,5 +1,6 @@ + +{#if allowedRoles.includes(userRole)} + +{/if} diff --git a/src/components/RoleBasedSecurity/store.js b/src/components/RoleBasedSecurity/store.js new file mode 100644 index 00000000..6ffbb100 --- /dev/null +++ b/src/components/RoleBasedSecurity/store.js @@ -0,0 +1 @@ +import { writable } from 'svelte/store'; diff --git a/src/routes/courses/[id]/attendance.svelte b/src/routes/courses/[id]/attendance.svelte index 590a2f41..2e936d87 100644 --- a/src/routes/courses/[id]/attendance.svelte +++ b/src/routes/courses/[id]/attendance.svelte @@ -18,6 +18,7 @@ } 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'; @@ -29,6 +30,7 @@ let borderBottomGrey = 'border-r-0 border-b border-l-0 border-gray-300'; let students = []; + let isStudent; function setAttendance(courseData) { for (const attendanceItem of courseData.attendance) { @@ -69,6 +71,16 @@ $: 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; + } + } @@ -104,14 +116,17 @@ {#each $lessons as lesson}

{ + if (isStudent) return; + const attendanceItem = $attendance[student.id] ? $attendance[student.id][lesson.id] || {} : {}; diff --git a/src/routes/courses/[id]/lessons/[...lessonParams]/index.svelte b/src/routes/courses/[id]/lessons/[...lessonParams]/index.svelte index 7a924ae1..37cdc6ad 100644 --- a/src/routes/courses/[id]/lessons/[...lessonParams]/index.svelte +++ b/src/routes/courses/[id]/lessons/[...lessonParams]/index.svelte @@ -23,6 +23,7 @@ import CourseContainer from '../../../../../components/CourseContainer/index.svelte'; import PrimaryButton from '../../../../../components/PrimaryButton/index.svelte'; + import RoleBasedSecurity from '../../../../../components/RoleBasedSecurity/index.svelte'; import PageNav from '../../../../../components/PageNav/index.svelte'; import PageBody from '../../../../../components/PageBody/index.svelte'; import Materials from '../../../../../components/Course/components/Lesson/Materials/index.svelte'; @@ -108,18 +109,20 @@ ]} > - {#if isMaterialsTabActive} -

- { - prevMode = mode; - mode = mode === MODES.edit ? MODES.view : MODES.edit; - }} - /> -
- {/if} + + {#if isMaterialsTabActive} +
+ { + prevMode = mode; + mode = mode === MODES.edit ? MODES.view : MODES.edit; + }} + /> +
+ {/if} + diff --git a/src/routes/courses/[id]/lessons/index.svelte b/src/routes/courses/[id]/lessons/index.svelte index fa029956..8a3ecf69 100644 --- a/src/routes/courses/[id]/lessons/index.svelte +++ b/src/routes/courses/[id]/lessons/index.svelte @@ -13,6 +13,7 @@ import Delete24 from 'carbon-icons-svelte/lib/Delete24'; import CheckmarkFilled24 from 'carbon-icons-svelte/lib/CheckmarkFilled24'; import PageNav from '../../../../components/PageNav/index.svelte'; + import RoleBasedSecurity from '../../../../components/RoleBasedSecurity/index.svelte'; import Box from '../../../../components/Box/index.svelte'; import PageBody from '../../../../components/PageBody/index.svelte'; import PrimaryButton from '../../../../components/PrimaryButton/index.svelte'; @@ -38,21 +39,6 @@ let lessonEditing; let ref; - const resources = [ - { - label: 'lesson', - value: 1, - }, - { - label: 'quiz', - value: 1, - }, - { - label: 'home task', - value: 2, - }, - ]; - function formatDate(date) { const d = new Date(date); @@ -87,13 +73,15 @@ -
- -
+ +
+ +
+ @@ -104,42 +92,44 @@ class="group relative m-auto rounded-md border-2 border-gray-100 py-3 px-5 mb-4 flex items-center hover:shadow-2xl shadow-md transition delay-150 duration-300 ease-in-out" > -
- { - lesson.is_complete = !lesson.is_complete; - handleSaveLesson(lesson, $course.id); - }} - toolTipProps={{ - title: `Click to ${lesson.is_complete ? 'lock' : 'unlock'}`, - direction: 'right', - }} - > - {#if lesson.is_complete} - - {:else} - 🔒 - {/if} - -
- - -
- {#if lessonEditing === index} + +
{ - lessonEditing = null; + lesson.is_complete = !lesson.is_complete; handleSaveLesson(lesson, $course.id); }} + toolTipProps={{ + title: `Click to ${lesson.is_complete ? 'lock' : 'unlock'}`, + direction: 'right', + }} > - + {#if lesson.is_complete} + + {:else} + 🔒 + {/if} - {:else} - (lessonEditing = index)}> - - - {/if} -
+
+ + +
+ {#if lessonEditing === index} + { + lessonEditing = null; + handleSaveLesson(lesson, $course.id); + }} + > + + + {:else} + (lessonEditing = index)}> + + + {/if} +
+

{index + 1}.

@@ -173,10 +163,7 @@ {:else if !lesson.profile}

No tutor added

{:else} - + Placeholder
-
- - - -
+ +
+ + + +
+
{:else} diff --git a/src/routes/courses/[id]/marks.svelte b/src/routes/courses/[id]/marks.svelte index d694e1fa..c835e2c6 100644 --- a/src/routes/courses/[id]/marks.svelte +++ b/src/routes/courses/[id]/marks.svelte @@ -85,11 +85,9 @@ }); $: { - // students = $group.people.filter((person) => !!person.profile); students = $group.people.filter( (person) => !!person.profile && person.role_id === ROLE.STUDENT ); - console.log(`students`, students); } diff --git a/src/routes/courses/[id]/people.svelte b/src/routes/courses/[id]/people.svelte index f33e6240..24365719 100644 --- a/src/routes/courses/[id]/people.svelte +++ b/src/routes/courses/[id]/people.svelte @@ -20,6 +20,7 @@ import Select from '../../../components/Form/Select.svelte'; import IconButton from '../../../components/IconButton/index.svelte'; import PageBody from '../../../components/PageBody/index.svelte'; + import RoleBasedSecurity from '../../../components/RoleBasedSecurity/index.svelte'; import { setCourseData, course, @@ -45,6 +46,7 @@ let member: { id?: string; email?: string; profile?: { email: string } } = {}; let shouldEditMemberId = false; let filterBy: ProfileRole = ROLES[0]; + let isStudent = false; // function setPeople(people: Array) { // if (!Array.isArray(people)) return; @@ -54,8 +56,6 @@ // } async function deletePerson() { - console.log(`member`, member); - console.log(`$group.people`, $group.people); $group.people = $group.people.filter( (person: { id: string }) => person.id !== member.id ); @@ -64,7 +64,6 @@ } async function editMemberId(person: Person) { - console.log(`person`, person); await updatedGroupMember( { assigned_student_id: person.assigned_student_id }, { id: person.id } @@ -82,6 +81,10 @@ .sort((a: Person, b: Person) => a.role_id - b.role_id); } + function handleEditStudentIdMode() { + shouldEditMemberId = true; + } + onMount(async () => { if ($course.id) return; const { data } = await fetchCourse(courseId); @@ -89,6 +92,15 @@ }); $: 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; + } + } @@ -100,11 +112,13 @@ - ($invitationModal.open = true)} - /> + + ($invitationModal.open = true)} + /> + @@ -125,17 +139,18 @@

Name

Role

-

+ +

+

{#each people as person, index} -
+
{#if !shouldEditMemberId}

(shouldEditMemberId = true)} + class="mr-2 w-20 text-center {!isStudent && + 'hover:bg-gray-100 cursor-pointer'} p-3" + on:click={() => !isStudent && handleEditStudentIdMode()} > {person.assigned_student_id || '-'}

@@ -174,18 +189,20 @@

{ROLE_LABEL[person.role_id]}

-
- {#if person.profile_id !== $profile.id} - { - member = person; - $deleteMemberModal.open = true; - }} - > - - - {/if} -
+ +
+ {#if person.profile_id !== $profile.id} + { + member = person; + $deleteMemberModal.open = true; + }} + > + + + {/if} +
+
{/each}
diff --git a/src/routes/courses/[id]/submissions.svelte b/src/routes/courses/[id]/submissions.svelte index f0e55b34..d0e96eb1 100644 --- a/src/routes/courses/[id]/submissions.svelte +++ b/src/routes/courses/[id]/submissions.svelte @@ -10,6 +10,7 @@ import { dndzone } from 'svelte-dnd-action'; import { stores, goto } from '@sapper/app'; import PageNav from '../../../components/PageNav/index.svelte'; + import RoleBasedSecurity from '../../../components/RoleBasedSecurity/index.svelte'; import MarkExerciseModal from '../../../components/Course/components/Lesson/Exercise/MarkExerciseModal.svelte'; import Chip from '../../../components/Chip/index.svelte'; import PageBody from '../../../components/PageBody/index.svelte'; @@ -250,69 +251,71 @@ {submissionId} /> - - + + + - -
- {#each sections as { id, title, items }, idx (id)} -
-
- -

{title}

-
+ +
+ {#each sections as { id, title, items }, idx (id)}
- {#each items as item (item.id)} -
+
+ +

{title}

+
+
+ {#each items as item (item.id)}
- Student avatar -

{item.student.username}

+
+ Student avatar +

{item.student.username}

+
+ + {item.exercise.title} + + +

+ #{item.lesson.title} + {`${item.tutor ? 'created by' + item.tutor.name : ''}`} +

+
- - {item.exercise.title} - - -

- #{item.lesson.title} - {`${item.tutor ? 'created by' + item.tutor.name : ''}`} -

- -
- {/each} + {/each} +
-
- {/each} -
- - + {/each} +
+ + +