ulivargas/classroomio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
* feat: classroomio-issue-143

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

* fix: hide the + icon for student

---------

Co-authored-by: Rotimi Best <best@classroomio.com>
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
Download Patch File Download Diff File Expand all files Collapse all files
apps/dashboard/src/routes/+error.svelte
+2 -2
View File
@@ -2,7 +2,7 @@
import { goto } from '$app/navigation';
import { browser } from '$app/environment';
import { page } from '$app/stores';
import { appStore } from '$lib/utils/store/app';
import { globalStore } from '$lib/utils/store/app';
import ErrorIcon from '$lib/components/Icons/ErrorIcon.svelte';
import ErrorIconDarkMode from '$lib/components/Icons/ErrorIconDarkMode.svelte';
@@ -36,7 +36,7 @@
<div class="w-72 lg:w-2/4 flex items-center justify-center">
<!-- to check if it's in dark mode so as to render the appropriate svg -->
{#if $appStore.isDark}
{#if $globalStore.isDark}
<ErrorIconDarkMode />
{:else}
<ErrorIcon />
apps/dashboard/src/routes/+layout.svelte
+6 -6
View File
@@ -27,7 +27,7 @@
import { ROUTE } from '$lib/utils/constants/routes';
import { getOrganizations } from '$lib/utils/services/org';
import { toggleBodyByMode } from '$lib/utils/functions/app';
import { appStore } from '$lib/utils/store/app';
import { globalStore } from '$lib/utils/store/app';
import { currentOrg } from '$lib/utils/store/org';
import { setTheme } from '$lib/utils/functions/theme';
import hideNavByRoute from '$lib/utils/functions/routes/hideNavByRoute';
@@ -207,8 +207,8 @@
if (browser) {
// Update theme - dark or light mode
$appStore.isDark = localStorage.getItem('mode') === 'dark';
toggleBodyByMode($appStore.isDark);
$globalStore.isDark = localStorage.getItem('mode') === 'dark';
toggleBodyByMode($globalStore.isDark);
const theme = localStorage.getItem('theme');
if (data.isOrgSite && data.org?.theme) {
@@ -256,8 +256,8 @@
if (!data.org) {
goto('/404');
} else {
$appStore.orgSiteName = data.orgSiteName;
$appStore.isOrgSite = data.isOrgSite;
$globalStore.orgSiteName = data.orgSiteName;
$globalStore.isOrgSite = data.isOrgSite;
currentOrg.set(data.org);
}
@@ -270,7 +270,7 @@
});
$: path = $page.url?.pathname?.replace('/', '');
$: carbonTheme = $appStore.isDark ? 'g100' : 'white';
$: carbonTheme = $globalStore.isDark ? 'g100' : 'white';
</script>
<svelte:window on:resize={handleResize} />
apps/dashboard/src/routes/404/+page.svelte
+2 -2
View File
@@ -2,7 +2,7 @@
import { page } from '$app/stores';
import { goto } from '$app/navigation';
import { appStore } from '$lib/utils/store/app';
import { globalStore } from '$lib/utils/store/app';
import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
const src = './bg-404.png';
@@ -11,7 +11,7 @@
</script>
<div
style={$appStore.isDark ? `background-image:url(${src})` : ''}
style={$globalStore.isDark ? `background-image:url(${src})` : ''}
class={`error bg-gray-200 bg-no-repeat bg-cover flex items-center justify-center w-screen gap-20`}
>
<div class=" dark:text-white gap-3 w-4/5 lg:w-2/5">
apps/dashboard/src/routes/courses/[id]/+layout.svelte
+2 -1
View File
@@ -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;
}
}
apps/dashboard/src/routes/courses/[id]/attendance/+page.svelte
+7 -8
View File
@@ -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
apps/dashboard/src/routes/courses/[id]/certificates/+page.svelte
+1 -2
View File
@@ -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]}>
apps/dashboard/src/routes/courses/[id]/lessons/+page.svelte
+6 -12
View File
@@ -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">
apps/dashboard/src/routes/courses/[id]/lessons/[...lessonParams]/+page.svelte
+1
View File
@@ -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}
apps/dashboard/src/routes/courses/[id]/marks/+page.svelte
+3 -3
View File
@@ -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">
apps/dashboard/src/routes/courses/[id]/people/+page.svelte
+7 -7
View File
@@ -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]}>
apps/dashboard/src/routes/courses/[id]/settings/+page.svelte
+1 -2
View File
@@ -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 />
apps/dashboard/src/routes/org/[slug]/+page.svelte
+7 -7
View File
@@ -16,10 +16,10 @@
import { onMount } from 'svelte';
import { Add } from 'carbon-icons-svelte';
import { isOrgAdmin, currentOrgPath, currentOrg, userUpcomingData } from '$lib/utils/store/org';
import { VARIANTS } from '$lib/components/PrimaryButton/constants.js';
import { VARIANTS } from '$lib/components/PrimaryButton/constants';
import VisitOrgSiteButton from '$lib/components/Buttons/VisitOrgSite.svelte';
import { getGreeting } from '$lib/utils/functions/date';
import { appStore } from '$lib/utils/store/app';
import { globalStore } from '$lib/utils/store/app';
export let data;
@@ -164,15 +164,15 @@
},
colors: {
text: {
primary: $appStore.isDark ? '#eee' : '#333',
primary: $globalStore.isDark ? '#eee' : '#333',
highlight: '#fff'
},
background: {
primary: $appStore.isDark ? '#333' : '#fff',
highlight: $appStore.isDark ? '#5829d6' : '#eb7400',
hover: $appStore.isDark ? '#222' : '#eee'
primary: $globalStore.isDark ? '#333' : '#fff',
highlight: $globalStore.isDark ? '#5829d6' : '#eb7400',
hover: $globalStore.isDark ? '#222' : '#eee'
},
border: $appStore.isDark ? '#222' : '#eee'
border: $globalStore.isDark ? '#222' : '#eee'
}
}
};