feat: add icon to create a new lesson from side nav (#145)

* feat: classroomio-issue-143

* issue 143: remove bg-color from the add icon

* fix: hide the + icon for student

---------

Co-authored-by: Rotimi Best <[email protected]>
This commit is contained in:
Adeyemi Adetunji
2024-02-01 20:18:03 +01:00
committed by GitHub
co-authored by Rotimi Best
parent 67db904dae
commit cadfa81913
28 changed files with 123 additions and 100 deletions
@@ -2,12 +2,13 @@
import { onMount } from 'svelte';
import { sideBar } from '$lib/components/Org/store';
import { apps } from '$lib/components/Apps/store';
import { globalStore } from '$lib/utils/store/app';
import APPS_CONSTANTS from '$lib/components/Apps/constants';
import hotkeys from 'hotkeys-js';
function handleClose() {
$apps.selectedApp = undefined;
if ($apps.isStudent) {
if ($globalStore.isStudent) {
$apps.open = false;
}
}
@@ -1,5 +1,4 @@
<script lang="ts">
import { onMount } from 'svelte';
import {
Search,
Checkbox,
@@ -21,10 +20,11 @@
import { ROLE } from '$lib/utils/constants/roles';
import { takeAttendance } from '$lib/utils/services/attendance';
import { snackbar } from '$lib/components/Snackbar/store';
import { attendance } from '$lib/utils/store/attendance.js';
import { attendance } from '$lib/utils/store/attendance';
import { profile } from '$lib/utils/store/user';
import type { GroupPerson, Lesson } from '$lib/utils/types/index';
import { browser } from '$app/environment';
import { globalStore } from '$lib/utils/store/app';
export let data;
@@ -38,7 +38,6 @@
}
let students: GroupPerson[] = [];
let isStudent: boolean = false;
let searchValue = '';
function setAttendance(courseData: CourseData) {
@@ -65,7 +64,7 @@
}
function handleAttendanceChange(e: any, student: GroupPerson, lesson: Lesson) {
if (isStudent) return;
if ($globalStore.isStudent) return;
const attendanceItem = $attendance[student.id]
? $attendance[student.id][lesson.id] || { id: undefined }
@@ -130,14 +129,14 @@
}
}
$: students = isStudent
$: students = $globalStore.isStudent
? $group.people.filter((person) => !!person.profile && person.profile.id === $profile.id)
: $group.people.filter((person) => !!person.profile && person.role_id === ROLE.STUDENT);
$: browser && $course.id && firstRender($course.id);
</script>
<CourseContainer bind:isStudent bind:courseId={data.courseId}>
<CourseContainer bind:courseId={data.courseId}>
<PageNav title="Attendance" />
<PageBody width="w-full max-w-6xl md:w-11/12">
<section class="flex items-center mx-2 lg:mx-9 my-5">
@@ -189,8 +188,8 @@
{#each $lessons as lesson}
<StructuredListCell class="">
<Checkbox
class={isStudent ? 'cursor-not-allowed' : ''}
disabled={isStudent}
class={$globalStore.isStudent ? 'cursor-not-allowed' : ''}
disabled={$globalStore.isStudent}
checked={$attendance[student.id]
? $attendance[student.id][lesson.id]
? $attendance[student.id][lesson.id].is_present
@@ -14,12 +14,11 @@
import StudentCertificate from '$lib/components/Course/components/Ceritficate/StudentCertificate/Index.svelte';
export let courseId: string = '';
let isStudent = false;
</script>
<IssueCertificateModal />
<CourseContainer bind:isStudent bind:courseId>
<CourseContainer bind:courseId>
<PageNav title="Certificates" disableSticky={true}>
<slot:fragment slot="widget">
<RoleBasedSecurity allowedRoles={[1, 2]}>
@@ -18,7 +18,6 @@
import Select from '$lib/components/Form/Select.svelte';
import { updateLesson } from '$lib/utils/services/courses';
import CourseContainer from '$lib/components/CourseContainer/index.svelte';
import { profile } from '$lib/utils/store/user';
import type { Lesson } from '$lib/utils/types';
import {
lessons,
@@ -32,13 +31,13 @@
import AddLessonModal from '$lib/components/Course/components/Lesson/AddLessonModal.svelte';
import DateField from '$lib/components/Form/Date.svelte';
import DeleteLessonConfirmation from '$lib/components/Course/components/Lesson/DeleteLessonConfirmation.svelte';
import { handleAddLessonWidget } from '$lib/components/Course/components/Navigation/store.js';
export let data;
let lessonEditing: string | undefined;
let lessonToDelete: Lesson | undefined;
let isStudent = true;
let openModal = false;
let openDeleteModal = false;
const flipDurationMs = 300;
@@ -55,7 +54,7 @@
}
function addLesson() {
openModal = true;
$handleAddLessonWidget.open = true;
}
function handleDndConsider(e: any) {
@@ -88,17 +87,11 @@
return index + 1;
}
}
$: {
const user = $group.people.find((person) => person.profile_id === $profile.id);
if (user) {
isStudent = user.role_id === 3;
}
}
</script>
<AddLessonModal {isStudent} bind:openModal />
{#if $handleAddLessonWidget}
<AddLessonModal {isStudent} />
{/if}
<DeleteLessonConfirmation
bind:openDeleteModal
@@ -106,6 +99,7 @@
deleteLesson={() => handleDelete(lessonToDelete?.id)}
/>
<!-- TODO: Refactor usage of two way binding isStudent, rather use $globalStore.isStudent -->
<CourseContainer bind:isStudent bind:courseId={data.courseId}>
<PageNav title="Lessons">
<div slot="widget">
@@ -217,6 +217,7 @@
$: isLessonComplete = getIsLessonComplete($lesson.lesson_completion, $profile.id);
</script>
<!-- TODO: Refactor usage of two way binding isStudent, rather use $globalStore.isStudent -->
<CourseContainer
bind:isStudent
{path}
@@ -14,13 +14,13 @@
import { browser } from '$app/environment';
import { course } from '$lib/components/Course/store';
import { snackbar } from '$lib/components/Snackbar/store';
import { globalStore } from '$lib/utils/store/app';
export let data;
let borderBottomGrey = 'border-r-0 border-t-0 border-b border-l-0 border-gray-300';
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`, ... }, ... }
@@ -78,14 +78,14 @@
});
}
$: students = isStudent
$: students = $globalStore.isStudent
? $group.people.filter((person) => !!person.profile && person.profile.id === $profile.id)
: $group.people.filter((person) => !!person.profile && person.role_id === ROLE.STUDENT);
$: browser && $course.id && firstRender($course.id);
</script>
<CourseContainer bind:isStudent bind:courseId={data.courseId}>
<CourseContainer bind:courseId={data.courseId}>
<PageNav title="Marks" />
<PageBody width="w-full max-w-6xl md:w-11/12">
@@ -40,7 +40,6 @@
let member: { id?: string; email?: string; profile?: { email: string } } = {};
let shouldEditMemberId: string | null = null;
let filterBy: ProfileRole = ROLES[0];
let isStudent = false;
let searchValue = '';
// function setPeople(people: Array<Person>) {
@@ -91,12 +90,13 @@
return profile ? profile.email : email;
}
function obscureEmail(email) {
const [username, domain] = email.split('@');
const obscuredUsername = username.charAt(0) + '*'.repeat(username.length - 2) + username.charAt(username.length - 1);
function obscureEmail(email) {
const [username, domain] = email.split('@');
const obscuredUsername =
username.charAt(0) + '*'.repeat(username.length - 2) + username.charAt(username.length - 1);
return `${obscuredUsername}@${domain}`;
}
return `${obscuredUsername}@${domain}`;
}
function handleEditStudentIdMode(personId: string) {
shouldEditMemberId = personId;
@@ -120,7 +120,7 @@
{deletePerson}
/>
<CourseContainer bind:isStudent bind:courseId={data.courseId}>
<CourseContainer bind:courseId={data.courseId}>
<PageNav title="People" disableSticky={true}>
<slot:fragment slot="widget">
<RoleBasedSecurity allowedRoles={[1, 2]}>
@@ -5,10 +5,9 @@
import Settings from '$lib/components/Course/components/Settings/index.svelte';
export let data;
let isStudent = false;
</script>
<CourseContainer bind:isStudent bind:courseId={data.courseId}>
<CourseContainer bind:courseId={data.courseId}>
<PageNav title="Settings" />
<PageBody>
<Settings />