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 <[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
Download Patch File Download Diff File Expand all files Collapse all files
apps/dashboard/src/lib/components/Apps/components/Poll/index.svelte
+2 -2
View File
@@ -6,7 +6,7 @@
import Tabs from './components/Tabs.svelte'; import Tabs from './components/Tabs.svelte';
import { polls } from './store'; import { polls } from './store';
import type { PollType, TabsType, PollOptionsSubmissionType } from './types'; import type { PollType, TabsType, PollOptionsSubmissionType } from './types';
import { apps } from '$lib/components/Apps/store'; import { globalStore } from '$lib/utils/store/app';
import { getSupabase } from '$lib/utils/functions/supabase'; import { getSupabase } from '$lib/utils/functions/supabase';
import { profile } from '$lib/utils/store/user'; import { profile } from '$lib/utils/store/user';
import { group, course } from '$lib/components/Course/store'; import { group, course } from '$lib/components/Course/store';
@@ -198,7 +198,7 @@
return; return;
} }
polls.set(getPollsData(data, $apps.isStudent)); polls.set(getPollsData(data, $globalStore.isStudent));
setCoursePolls(); setCoursePolls();
apps/dashboard/src/lib/components/Apps/components/Poll/utils.ts
+1 -1
View File
@@ -1,6 +1,6 @@
import type { PollType, FetchPollsResponse } from './types'; import type { PollType, FetchPollsResponse } from './types';
export const getPollsData = (data: FetchPollsResponse, isStudent: boolean) => { export const getPollsData = (data: FetchPollsResponse, isStudent?: boolean) => {
const pollsData: PollType[] = data.map((appsPollItem) => ({ const pollsData: PollType[] = data.map((appsPollItem) => ({
id: appsPollItem.id, id: appsPollItem.id,
courseId: appsPollItem.courseId, courseId: appsPollItem.courseId,
apps/dashboard/src/lib/components/Apps/index.svelte
+6 -5
View File
@@ -6,6 +6,7 @@
import IconButton from '$lib/components/IconButton/index.svelte'; import IconButton from '$lib/components/IconButton/index.svelte';
import Settings from 'carbon-icons-svelte/lib/Settings.svelte'; import Settings from 'carbon-icons-svelte/lib/Settings.svelte';
import { apps } from './store'; import { apps } from './store';
import { globalStore } from '$lib/utils/store/app';
import Chip from '$lib/components/Chip/index.svelte'; import Chip from '$lib/components/Chip/index.svelte';
import QandA from './components/QandA/index.svelte'; import QandA from './components/QandA/index.svelte';
@@ -19,7 +20,7 @@
let appBarRef: HTMLDivElement; let appBarRef: HTMLDivElement;
let appContentRef: HTMLDivElement; let appContentRef: HTMLDivElement;
let topPadding = $apps.isStudent ? '48px' : '109px'; let topPadding = $globalStore.isStudent ? '48px' : '109px';
const getResizableSidebar = () => { const getResizableSidebar = () => {
if (!browser) return; if (!browser) return;
@@ -29,7 +30,7 @@
function handleClose() { function handleClose() {
$apps.selectedApp = undefined; $apps.selectedApp = undefined;
if ($apps.isStudent) { if ($globalStore.isStudent) {
$apps.open = false; $apps.open = false;
} }
} }
@@ -43,7 +44,7 @@
$apps.dropdown = !$apps.dropdown; $apps.dropdown = !$apps.dropdown;
} }
function updateTopPadding(isStudent: boolean) { function updateTopPadding(isStudent?: boolean) {
topPadding = isStudent ? '48px' : '109px'; topPadding = isStudent ? '48px' : '109px';
} }
@@ -54,10 +55,10 @@
} }
onMount(() => { onMount(() => {
updateTopPadding($apps.isStudent); updateTopPadding($globalStore.isStudent);
}); });
$: updateTopPadding($apps.isStudent); $: updateTopPadding($globalStore.isStudent);
$: getResizableSidebar(); $: getResizableSidebar();
</script> </script>
apps/dashboard/src/lib/components/Apps/store.ts
+1 -3
View File
@@ -4,10 +4,8 @@ export const apps = writable<{
open: boolean; open: boolean;
dropdown: boolean; dropdown: boolean;
selectedApp: string | undefined; selectedApp: string | undefined;
isStudent: boolean;
}>({ }>({
open: false, open: false,
dropdown: false, dropdown: false,
selectedApp: undefined, selectedApp: undefined
isStudent: false
}); });
apps/dashboard/src/lib/components/Course/components/Ceritficate/Design.svelte
+2 -2
View File
@@ -9,7 +9,7 @@
import Plain from './certificates/Plain.svelte'; import Plain from './certificates/Plain.svelte';
import { course } from '$lib/components/Course/store'; import { course } from '$lib/components/Course/store';
import { currentOrg } from '$lib/utils/store/org'; import { currentOrg } from '$lib/utils/store/org';
import { appStore } from '$lib/utils/store/app'; import { globalStore } from '$lib/utils/store/app';
const studentNamePlaceholder = 'Name of student'; const studentNamePlaceholder = 'Name of student';
const themes = ['professional', 'plain']; const themes = ['professional', 'plain'];
@@ -94,7 +94,7 @@
class="my-4" class="my-4"
size="sm" size="sm"
> >
<span slot="labelA" style={$appStore.isDark ? 'color: white' : 'color: #161616'} <span slot="labelA" style={$globalStore.isDark ? 'color: white' : 'color: #161616'}
>Locked</span >Locked</span
> >
<span slot="labelB" style="color: green">Unlocked</span> <span slot="labelB" style="color: green">Unlocked</span>
apps/dashboard/src/lib/components/Course/components/Lesson/AddLessonModal.svelte
+4 -4
View File
@@ -13,8 +13,8 @@
import TextChip from '$lib/components/Chip/Text.svelte'; import TextChip from '$lib/components/Chip/Text.svelte';
import Modal from '$lib/components/Modal/index.svelte'; import Modal from '$lib/components/Modal/index.svelte';
import { goto } from '$app/navigation'; import { goto } from '$app/navigation';
import { handleAddLessonWidget } from '../Navigation/store';
export let openModal = false;
export let isStudent = false; export let isStudent = false;
let errors = { let errors = {
title: '' title: ''
@@ -49,13 +49,13 @@
$lessons = [...$lessons, lesson]; $lessons = [...$lessons, lesson];
goto('/courses/' + $course.id + '/lessons/' + lesson.id); goto('/courses/' + $course.id + '/lessons/' + lesson.id);
} }
openModal = false; $handleAddLessonWidget.open = false;
}; };
</script> </script>
<Modal <Modal
onClose={() => (openModal = false)} onClose={() => ($handleAddLessonWidget.open = false)}
bind:open={openModal} bind:open={$handleAddLessonWidget.open}
width="w-[80%] md:w-[60%]" width="w-[80%] md:w-[60%]"
containerClass="overflow-hidden" containerClass="overflow-hidden"
modalHeading="Add New Lesson" modalHeading="Add New Lesson"
apps/dashboard/src/lib/components/Course/components/Navigation/NavExpandable.svelte
+15 -2
View File
@@ -2,10 +2,12 @@
import { slide } from 'svelte/transition'; import { slide } from 'svelte/transition';
import ChevronDownIcon from 'carbon-icons-svelte/lib/ChevronDown.svelte'; import ChevronDownIcon from 'carbon-icons-svelte/lib/ChevronDown.svelte';
import ChevronUpIcon from 'carbon-icons-svelte/lib/ChevronUp.svelte'; import ChevronUpIcon from 'carbon-icons-svelte/lib/ChevronUp.svelte';
import Add from 'carbon-icons-svelte/lib/Add.svelte';
import { SkeletonText } from 'carbon-components-svelte';
import IconButton from '$lib/components/IconButton/index.svelte'; import IconButton from '$lib/components/IconButton/index.svelte';
import { NavClasses } from '$lib/utils/constants/reusableClass'; import { NavClasses } from '$lib/utils/constants/reusableClass';
import { handleAddLessonWidget } from './store';
import NavIcons from './NavIcons.svelte'; import NavIcons from './NavIcons.svelte';
import { SkeletonPlaceholder, SkeletonText } from 'carbon-components-svelte';
export let handleClick = () => {}; export let handleClick = () => {};
export let label = ''; export let label = '';
@@ -13,8 +15,14 @@
export let isExpanded = true; export let isExpanded = true;
export let total = 0; export let total = 0;
export let isLoading = true; export let isLoading = true;
export let isLesson = false;
export let isStudent = true;
// export let subMenuItems = []; // export let subMenuItems = [];
function addLesson() {
$handleAddLessonWidget.open = true;
}
function onClick() { function onClick() {
handleClick(); handleClick();
} }
@@ -46,7 +54,12 @@
{/if} {/if}
<span class="grow" /> <span class="grow" />
{#if label === 'Lessons' && !isLoading} {#if isLesson && !isLoading}
{#if !isStudent}
<IconButton onClick={() => addLesson()} size="small">
<Add />
</IconButton>
{/if}
<IconButton size="small" stopPropagation={true} onClick={toggleIsExpanded}> <IconButton size="small" stopPropagation={true} onClick={toggleIsExpanded}>
{#if isExpanded} {#if isExpanded}
<ChevronUpIcon class="carbon-icon dark:text-white" /> <ChevronUpIcon class="carbon-icon dark:text-white" />
apps/dashboard/src/lib/components/Course/components/Navigation/index.svelte
+9 -4
View File
@@ -15,6 +15,7 @@
import { sideBar } from '$lib/components/Org/store'; import { sideBar } from '$lib/components/Org/store';
import { profile } from '$lib/utils/store/user'; import { profile } from '$lib/utils/store/user';
import { getIsLessonComplete } from '../Lesson/functions'; import { getIsLessonComplete } from '../Lesson/functions';
import { globalStore } from '$lib/utils/store/app';
export let path: string; export let path: string;
export let isStudent: boolean = false; export let isStudent: boolean = false;
@@ -23,7 +24,7 @@
label: string; label: string;
to: string; to: string;
hideSortIcon: boolean; hideSortIcon: boolean;
isLecture?: boolean; isLesson?: boolean;
show?: () => boolean; show?: () => boolean;
} }
@@ -153,7 +154,7 @@
label: 'Lessons', label: 'Lessons',
to: getLessonsRoute($course.id), to: getLessonsRoute($course.id),
hideSortIcon: false, hideSortIcon: false,
isLecture: true isLesson: true
}, },
{ {
label: 'Attendance', label: 'Attendance',
@@ -206,6 +207,8 @@
} }
]; ];
} }
$: console.log({ isStudent: $globalStore.isStudent });
</script> </script>
<aside <aside
@@ -236,10 +239,12 @@
handleClick={handleMainGroupClick(navItem.to)} handleClick={handleMainGroupClick(navItem.to)}
isGroupActive={(path || $page.url.pathname) === navItem.to} isGroupActive={(path || $page.url.pathname) === navItem.to}
isExpanded={isLessonActive} isExpanded={isLessonActive}
total={navItem.isLecture ? ($lessons || []).length : 0} total={navItem.isLesson ? ($lessons || []).length : 0}
isLoading={!$course.id} isLoading={!$course.id}
isLesson={navItem.isLesson}
{isStudent}
> >
{#if navItem.isLecture} {#if navItem.isLesson}
{#each $lessons as item, index} {#each $lessons as item, index}
<a <a
class="pl-7 w-[95%] text-[0.80rem] mb-1 text-black dark:text-white {isStudent && class="pl-7 w-[95%] text-[0.80rem] mb-1 text-black dark:text-white {isStudent &&
apps/dashboard/src/lib/components/Course/components/Navigation/store.js
+5
View File
@@ -0,0 +1,5 @@
import { writable } from 'svelte/store';
export let handleAddLessonWidget = writable({
open: false
});
apps/dashboard/src/lib/components/CourseContainer/index.svelte
+5 -3
View File
@@ -7,8 +7,8 @@
import Confetti from '../Confetti/index.svelte'; import Confetti from '../Confetti/index.svelte';
import { isMobile } from '$lib/utils/store/useMobile'; import { isMobile } from '$lib/utils/store/useMobile';
import { profile } from '$lib/utils/store/user'; import { profile } from '$lib/utils/store/user';
import { apps } from '$lib/components/Apps/store';
import { fetchCourse } from '$lib/utils/services/courses'; import { fetchCourse } from '$lib/utils/services/courses';
import { globalStore } from '$lib/utils/store/app';
export let courseId = ''; export let courseId = '';
export let path = ''; export let path = '';
@@ -44,15 +44,17 @@
$: onCourseIdChange(courseId); $: onCourseIdChange(courseId);
$: { $: if (typeof $globalStore.isStudent !== 'boolean') {
const user = $group.people.find((person) => person.profile_id === $profile.id); const user = $group.people.find((person) => person.profile_id === $profile.id);
if (user) { if (user) {
isStudent = user.role_id === 3; isStudent = user.role_id === 3;
$apps.isStudent = isStudent; $globalStore.isStudent = isStudent;
filterPollsByStatus(isStudent); filterPollsByStatus(isStudent);
} }
} else {
isStudent = $globalStore.isStudent;
} }
</script> </script>
apps/dashboard/src/lib/components/Courses/index.svelte
+2 -2
View File
@@ -5,7 +5,7 @@
import CoursesEmptyIcon from '../Icons/CoursesEmptyIcon.svelte'; import CoursesEmptyIcon from '../Icons/CoursesEmptyIcon.svelte';
import { courseMetaDeta } from './store'; import { courseMetaDeta } from './store';
import type { Course } from '$lib/utils/types'; import type { Course } from '$lib/utils/types';
import { appStore } from '$lib/utils/store/app'; import { globalStore } from '$lib/utils/store/app';
export let courses: Course[] = []; export let courses: Course[] = [];
export let emptyTitle = 'No Courses Created'; export let emptyTitle = 'No Courses Created';
@@ -42,7 +42,7 @@
currency={courseData.currency} currency={courseData.currency}
totalLessons={courseData.total_lessons} totalLessons={courseData.total_lessons}
totalStudents={courseData.total_students} totalStudents={courseData.total_students}
isLMS={$appStore.isOrgSite} isLMS={$globalStore.isOrgSite}
progressRate={calcProgressRate(courseData.progress_rate, courseData.total_lessons)} progressRate={calcProgressRate(courseData.progress_rate, courseData.total_lessons)}
/> />
{/key} {/key}
apps/dashboard/src/lib/components/Navigation/app.svelte
+6 -6
View File
@@ -9,7 +9,7 @@
import ArrowLeft from 'carbon-icons-svelte/lib/ArrowLeft.svelte'; import ArrowLeft from 'carbon-icons-svelte/lib/ArrowLeft.svelte';
import IconButton from '$lib/components/IconButton/index.svelte'; import IconButton from '$lib/components/IconButton/index.svelte';
import { appStore } from '$lib/utils/store/app'; import { globalStore } from '$lib/utils/store/app';
import { currentOrgPath } from '$lib/utils/store/org'; import { currentOrgPath } from '$lib/utils/store/org';
import { toggleBodyByMode } from '$lib/utils/functions/app'; import { toggleBodyByMode } from '$lib/utils/functions/app';
import { sideBar } from '../Org/store'; import { sideBar } from '../Org/store';
@@ -23,16 +23,16 @@
}; };
function toggleDarkMode() { function toggleDarkMode() {
$appStore.isDark = !$appStore.isDark; $globalStore.isDark = !$globalStore.isDark;
toggleBodyByMode($appStore.isDark); toggleBodyByMode($globalStore.isDark);
if (browser) { if (browser) {
localStorage.setItem('mode', $appStore.isDark ? 'dark' : ''); localStorage.setItem('mode', $globalStore.isDark ? 'dark' : '');
} }
} }
$: coursesPath = $appStore.isOrgSite $: coursesPath = $globalStore.isOrgSite
? '/lms/mylearning' ? '/lms/mylearning'
: isCoursePage : isCoursePage
? `${$currentOrgPath}/courses` ? `${$currentOrgPath}/courses`
@@ -91,7 +91,7 @@
</li> </li>
<li> <li>
<IconButton size="small" onClick={toggleDarkMode}> <IconButton size="small" onClick={toggleDarkMode}>
{#if $appStore.isDark} {#if $globalStore.isDark}
<Sun size={16} class="text-white" /> <Sun size={16} class="text-white" />
{:else} {:else}
<Moon size={16} class="text-white" /> <Moon size={16} class="text-white" />
apps/dashboard/src/lib/components/Navigation/lms.svelte
+5 -5
View File
@@ -8,7 +8,7 @@
import TextChip from '$lib/components/Chip/Text.svelte'; import TextChip from '$lib/components/Chip/Text.svelte';
import IconButton from '$lib/components/IconButton/index.svelte'; import IconButton from '$lib/components/IconButton/index.svelte';
import { appStore } from '$lib/utils/store/app'; import { globalStore } from '$lib/utils/store/app';
import { Close, Menu } from 'carbon-icons-svelte'; import { Close, Menu } from 'carbon-icons-svelte';
import { sideBar } from '$lib/components/Org/store'; import { sideBar } from '$lib/components/Org/store';
import { currentOrg } from '$lib/utils/store/org'; import { currentOrg } from '$lib/utils/store/org';
@@ -21,11 +21,11 @@
}; };
function toggleDarkMode() { function toggleDarkMode() {
$appStore.isDark = !$appStore.isDark; $globalStore.isDark = !$globalStore.isDark;
toggleBodyByMode($appStore.isDark); toggleBodyByMode($globalStore.isDark);
if (browser) { if (browser) {
localStorage.setItem('mode', $appStore.isDark ? 'dark' : ''); localStorage.setItem('mode', $globalStore.isDark ? 'dark' : '');
} }
} }
@@ -80,7 +80,7 @@
</li> </li>
<li> <li>
<IconButton size="small" onClick={toggleDarkMode}> <IconButton size="small" onClick={toggleDarkMode}>
{#if $appStore.isDark} {#if $globalStore.isDark}
<SunIcon size={16} class="text-white" /> <SunIcon size={16} class="text-white" />
{:else} {:else}
<MoonIcon size={16} class="text-white" /> <MoonIcon size={16} class="text-white" />
apps/dashboard/src/lib/components/TextEditor/index.svelte
+2 -2
View File
@@ -1,7 +1,7 @@
<script lang="ts"> <script lang="ts">
import { PUBLIC_TINYMCE_API_KEY } from '$env/static/public'; import { PUBLIC_TINYMCE_API_KEY } from '$env/static/public';
import Editor from '@tinymce/tinymce-svelte'; import Editor from '@tinymce/tinymce-svelte';
import { appStore } from '$lib/utils/store/app'; import { globalStore } from '$lib/utils/store/app';
export let id = ''; export let id = '';
export let value: string | undefined = ''; export let value: string | undefined = '';
@@ -72,7 +72,7 @@
$: value = !value ? '' : value; $: value = !value ? '' : value;
$: handleModeChange($appStore.isDark); $: handleModeChange($globalStore.isDark);
</script> </script>
<div> <div>
apps/dashboard/src/lib/utils/store/app.js
-7
View File
@@ -1,7 +0,0 @@
import { writable } from 'svelte/store';
export const appStore = writable({
isDark: false,
isOrgSite: false,
orgSiteName: ''
});
apps/dashboard/src/lib/utils/store/app.ts
+13
View File
@@ -0,0 +1,13 @@
import { writable } from 'svelte/store';
export const globalStore = writable<{
isDark: boolean;
isOrgSite: boolean;
orgSiteName: string;
isStudent?: boolean;
}>({
isDark: false,
isOrgSite: false,
orgSiteName: '',
isStudent: undefined
});
apps/dashboard/src/routes/+error.svelte
+2 -2
View File
@@ -2,7 +2,7 @@
import { goto } from '$app/navigation'; import { goto } from '$app/navigation';
import { browser } from '$app/environment'; import { browser } from '$app/environment';
import { page } from '$app/stores'; 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 ErrorIcon from '$lib/components/Icons/ErrorIcon.svelte';
import ErrorIconDarkMode from '$lib/components/Icons/ErrorIconDarkMode.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"> <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 --> <!-- to check if it's in dark mode so as to render the appropriate svg -->
{#if $appStore.isDark} {#if $globalStore.isDark}
<ErrorIconDarkMode /> <ErrorIconDarkMode />
{:else} {:else}
<ErrorIcon /> <ErrorIcon />
apps/dashboard/src/routes/+layout.svelte
+6 -6
View File
@@ -27,7 +27,7 @@
import { ROUTE } from '$lib/utils/constants/routes'; import { ROUTE } from '$lib/utils/constants/routes';
import { getOrganizations } from '$lib/utils/services/org'; import { getOrganizations } from '$lib/utils/services/org';
import { toggleBodyByMode } from '$lib/utils/functions/app'; 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 { currentOrg } from '$lib/utils/store/org';
import { setTheme } from '$lib/utils/functions/theme'; import { setTheme } from '$lib/utils/functions/theme';
import hideNavByRoute from '$lib/utils/functions/routes/hideNavByRoute'; import hideNavByRoute from '$lib/utils/functions/routes/hideNavByRoute';
@@ -207,8 +207,8 @@
if (browser) { if (browser) {
// Update theme - dark or light mode // Update theme - dark or light mode
$appStore.isDark = localStorage.getItem('mode') === 'dark'; $globalStore.isDark = localStorage.getItem('mode') === 'dark';
toggleBodyByMode($appStore.isDark); toggleBodyByMode($globalStore.isDark);
const theme = localStorage.getItem('theme'); const theme = localStorage.getItem('theme');
if (data.isOrgSite && data.org?.theme) { if (data.isOrgSite && data.org?.theme) {
@@ -256,8 +256,8 @@
if (!data.org) { if (!data.org) {
goto('/404'); goto('/404');
} else { } else {
$appStore.orgSiteName = data.orgSiteName; $globalStore.orgSiteName = data.orgSiteName;
$appStore.isOrgSite = data.isOrgSite; $globalStore.isOrgSite = data.isOrgSite;
currentOrg.set(data.org); currentOrg.set(data.org);
} }
@@ -270,7 +270,7 @@
}); });
$: path = $page.url?.pathname?.replace('/', ''); $: path = $page.url?.pathname?.replace('/', '');
$: carbonTheme = $appStore.isDark ? 'g100' : 'white'; $: carbonTheme = $globalStore.isDark ? 'g100' : 'white';
</script> </script>
<svelte:window on:resize={handleResize} /> <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 { page } from '$app/stores';
import { goto } from '$app/navigation'; 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'; import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
const src = './bg-404.png'; const src = './bg-404.png';
@@ -11,7 +11,7 @@
</script> </script>
<div <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`} 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"> <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 { onMount } from 'svelte';
import { sideBar } from '$lib/components/Org/store'; import { sideBar } from '$lib/components/Org/store';
import { apps } from '$lib/components/Apps/store'; import { apps } from '$lib/components/Apps/store';
import { globalStore } from '$lib/utils/store/app';
import APPS_CONSTANTS from '$lib/components/Apps/constants'; import APPS_CONSTANTS from '$lib/components/Apps/constants';
import hotkeys from 'hotkeys-js'; import hotkeys from 'hotkeys-js';
function handleClose() { function handleClose() {
$apps.selectedApp = undefined; $apps.selectedApp = undefined;
if ($apps.isStudent) { if ($globalStore.isStudent) {
$apps.open = false; $apps.open = false;
} }
} }
apps/dashboard/src/routes/courses/[id]/attendance/+page.svelte
+7 -8
View File
@@ -1,5 +1,4 @@
<script lang="ts"> <script lang="ts">
import { onMount } from 'svelte';
import { import {
Search, Search,
Checkbox, Checkbox,
@@ -21,10 +20,11 @@
import { ROLE } from '$lib/utils/constants/roles'; import { ROLE } from '$lib/utils/constants/roles';
import { takeAttendance } from '$lib/utils/services/attendance'; import { takeAttendance } from '$lib/utils/services/attendance';
import { snackbar } from '$lib/components/Snackbar/store'; 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 { profile } from '$lib/utils/store/user';
import type { GroupPerson, Lesson } from '$lib/utils/types/index'; import type { GroupPerson, Lesson } from '$lib/utils/types/index';
import { browser } from '$app/environment'; import { browser } from '$app/environment';
import { globalStore } from '$lib/utils/store/app';
export let data; export let data;
@@ -38,7 +38,6 @@
} }
let students: GroupPerson[] = []; let students: GroupPerson[] = [];
let isStudent: boolean = false;
let searchValue = ''; let searchValue = '';
function setAttendance(courseData: CourseData) { function setAttendance(courseData: CourseData) {
@@ -65,7 +64,7 @@
} }
function handleAttendanceChange(e: any, student: GroupPerson, lesson: Lesson) { function handleAttendanceChange(e: any, student: GroupPerson, lesson: Lesson) {
if (isStudent) return; if ($globalStore.isStudent) return;
const attendanceItem = $attendance[student.id] const attendanceItem = $attendance[student.id]
? $attendance[student.id][lesson.id] || { id: undefined } ? $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.profile.id === $profile.id)
: $group.people.filter((person) => !!person.profile && person.role_id === ROLE.STUDENT); : $group.people.filter((person) => !!person.profile && person.role_id === ROLE.STUDENT);
$: browser && $course.id && firstRender($course.id); $: browser && $course.id && firstRender($course.id);
</script> </script>
<CourseContainer bind:isStudent bind:courseId={data.courseId}> <CourseContainer bind:courseId={data.courseId}>
<PageNav title="Attendance" /> <PageNav title="Attendance" />
<PageBody width="w-full max-w-6xl md:w-11/12"> <PageBody width="w-full max-w-6xl md:w-11/12">
<section class="flex items-center mx-2 lg:mx-9 my-5"> <section class="flex items-center mx-2 lg:mx-9 my-5">
@@ -189,8 +188,8 @@
{#each $lessons as lesson} {#each $lessons as lesson}
<StructuredListCell class=""> <StructuredListCell class="">
<Checkbox <Checkbox
class={isStudent ? 'cursor-not-allowed' : ''} class={$globalStore.isStudent ? 'cursor-not-allowed' : ''}
disabled={isStudent} disabled={$globalStore.isStudent}
checked={$attendance[student.id] checked={$attendance[student.id]
? $attendance[student.id][lesson.id] ? $attendance[student.id][lesson.id]
? $attendance[student.id][lesson.id].is_present ? $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'; import StudentCertificate from '$lib/components/Course/components/Ceritficate/StudentCertificate/Index.svelte';
export let courseId: string = ''; export let courseId: string = '';
let isStudent = false;
</script> </script>
<IssueCertificateModal /> <IssueCertificateModal />
<CourseContainer bind:isStudent bind:courseId> <CourseContainer bind:courseId>
<PageNav title="Certificates" disableSticky={true}> <PageNav title="Certificates" disableSticky={true}>
<slot:fragment slot="widget"> <slot:fragment slot="widget">
<RoleBasedSecurity allowedRoles={[1, 2]}> <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 Select from '$lib/components/Form/Select.svelte';
import { updateLesson } from '$lib/utils/services/courses'; import { updateLesson } from '$lib/utils/services/courses';
import CourseContainer from '$lib/components/CourseContainer/index.svelte'; import CourseContainer from '$lib/components/CourseContainer/index.svelte';
import { profile } from '$lib/utils/store/user';
import type { Lesson } from '$lib/utils/types'; import type { Lesson } from '$lib/utils/types';
import { import {
lessons, lessons,
@@ -32,13 +31,13 @@
import AddLessonModal from '$lib/components/Course/components/Lesson/AddLessonModal.svelte'; import AddLessonModal from '$lib/components/Course/components/Lesson/AddLessonModal.svelte';
import DateField from '$lib/components/Form/Date.svelte'; import DateField from '$lib/components/Form/Date.svelte';
import DeleteLessonConfirmation from '$lib/components/Course/components/Lesson/DeleteLessonConfirmation.svelte'; import DeleteLessonConfirmation from '$lib/components/Course/components/Lesson/DeleteLessonConfirmation.svelte';
import { handleAddLessonWidget } from '$lib/components/Course/components/Navigation/store.js';
export let data; export let data;
let lessonEditing: string | undefined; let lessonEditing: string | undefined;
let lessonToDelete: Lesson | undefined; let lessonToDelete: Lesson | undefined;
let isStudent = true; let isStudent = true;
let openModal = false;
let openDeleteModal = false; let openDeleteModal = false;
const flipDurationMs = 300; const flipDurationMs = 300;
@@ -55,7 +54,7 @@
} }
function addLesson() { function addLesson() {
openModal = true; $handleAddLessonWidget.open = true;
} }
function handleDndConsider(e: any) { function handleDndConsider(e: any) {
@@ -88,17 +87,11 @@
return index + 1; return index + 1;
} }
} }
$: {
const user = $group.people.find((person) => person.profile_id === $profile.id);
if (user) {
isStudent = user.role_id === 3;
}
}
</script> </script>
<AddLessonModal {isStudent} bind:openModal /> {#if $handleAddLessonWidget}
<AddLessonModal {isStudent} />
{/if}
<DeleteLessonConfirmation <DeleteLessonConfirmation
bind:openDeleteModal bind:openDeleteModal
@@ -106,6 +99,7 @@
deleteLesson={() => handleDelete(lessonToDelete?.id)} deleteLesson={() => handleDelete(lessonToDelete?.id)}
/> />
<!-- TODO: Refactor usage of two way binding isStudent, rather use $globalStore.isStudent -->
<CourseContainer bind:isStudent bind:courseId={data.courseId}> <CourseContainer bind:isStudent bind:courseId={data.courseId}>
<PageNav title="Lessons"> <PageNav title="Lessons">
<div slot="widget"> <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); $: isLessonComplete = getIsLessonComplete($lesson.lesson_completion, $profile.id);
</script> </script>
<!-- TODO: Refactor usage of two way binding isStudent, rather use $globalStore.isStudent -->
<CourseContainer <CourseContainer
bind:isStudent bind:isStudent
{path} {path}
apps/dashboard/src/routes/courses/[id]/marks/+page.svelte
+3 -3
View File
@@ -14,13 +14,13 @@
import { browser } from '$app/environment'; import { browser } from '$app/environment';
import { course } from '$lib/components/Course/store'; import { course } from '$lib/components/Course/store';
import { snackbar } from '$lib/components/Snackbar/store'; import { snackbar } from '$lib/components/Snackbar/store';
import { globalStore } from '$lib/utils/store/app';
export let data; export let data;
let borderBottomGrey = 'border-r-0 border-t-0 border-b border-l-0 border-gray-300'; 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 borderleftGrey = 'border-r-0 border-t-0 border-b-0 border-l border-gray-300';
let students = []; let students = [];
let isStudent = false;
let lessonMapping = {}; // { lessonId: { exerciseId: exerciseTitle, ... }, ... } let lessonMapping = {}; // { lessonId: { exerciseId: exerciseTitle, ... }, ... }
let studentMarksByExerciseId = {}; // { groupMemberId: { exerciseId: `total_gotten/points`, ... }, ... } 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.profile.id === $profile.id)
: $group.people.filter((person) => !!person.profile && person.role_id === ROLE.STUDENT); : $group.people.filter((person) => !!person.profile && person.role_id === ROLE.STUDENT);
$: browser && $course.id && firstRender($course.id); $: browser && $course.id && firstRender($course.id);
</script> </script>
<CourseContainer bind:isStudent bind:courseId={data.courseId}> <CourseContainer bind:courseId={data.courseId}>
<PageNav title="Marks" /> <PageNav title="Marks" />
<PageBody width="w-full max-w-6xl md:w-11/12"> <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 member: { id?: string; email?: string; profile?: { email: string } } = {};
let shouldEditMemberId: string | null = null; let shouldEditMemberId: string | null = null;
let filterBy: ProfileRole = ROLES[0]; let filterBy: ProfileRole = ROLES[0];
let isStudent = false;
let searchValue = ''; let searchValue = '';
// function setPeople(people: Array<Person>) { // function setPeople(people: Array<Person>) {
@@ -91,12 +90,13 @@
return profile ? profile.email : email; return profile ? profile.email : email;
} }
function obscureEmail(email) { function obscureEmail(email) {
const [username, domain] = email.split('@'); const [username, domain] = email.split('@');
const obscuredUsername = username.charAt(0) + '*'.repeat(username.length - 2) + username.charAt(username.length - 1); const obscuredUsername =
username.charAt(0) + '*'.repeat(username.length - 2) + username.charAt(username.length - 1);
return `${obscuredUsername}@${domain}`; return `${obscuredUsername}@${domain}`;
} }
function handleEditStudentIdMode(personId: string) { function handleEditStudentIdMode(personId: string) {
shouldEditMemberId = personId; shouldEditMemberId = personId;
@@ -120,7 +120,7 @@
{deletePerson} {deletePerson}
/> />
<CourseContainer bind:isStudent bind:courseId={data.courseId}> <CourseContainer bind:courseId={data.courseId}>
<PageNav title="People" disableSticky={true}> <PageNav title="People" disableSticky={true}>
<slot:fragment slot="widget"> <slot:fragment slot="widget">
<RoleBasedSecurity allowedRoles={[1, 2]}> <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'; import Settings from '$lib/components/Course/components/Settings/index.svelte';
export let data; export let data;
let isStudent = false;
</script> </script>
<CourseContainer bind:isStudent bind:courseId={data.courseId}> <CourseContainer bind:courseId={data.courseId}>
<PageNav title="Settings" /> <PageNav title="Settings" />
<PageBody> <PageBody>
<Settings /> <Settings />
apps/dashboard/src/routes/org/[slug]/+page.svelte
+7 -7
View File
@@ -16,10 +16,10 @@
import { onMount } from 'svelte'; import { onMount } from 'svelte';
import { Add } from 'carbon-icons-svelte'; import { Add } from 'carbon-icons-svelte';
import { isOrgAdmin, currentOrgPath, currentOrg, userUpcomingData } from '$lib/utils/store/org'; 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 VisitOrgSiteButton from '$lib/components/Buttons/VisitOrgSite.svelte';
import { getGreeting } from '$lib/utils/functions/date'; import { getGreeting } from '$lib/utils/functions/date';
import { appStore } from '$lib/utils/store/app'; import { globalStore } from '$lib/utils/store/app';
export let data; export let data;
@@ -164,15 +164,15 @@
}, },
colors: { colors: {
text: { text: {
primary: $appStore.isDark ? '#eee' : '#333', primary: $globalStore.isDark ? '#eee' : '#333',
highlight: '#fff' highlight: '#fff'
}, },
background: { background: {
primary: $appStore.isDark ? '#333' : '#fff', primary: $globalStore.isDark ? '#333' : '#fff',
highlight: $appStore.isDark ? '#5829d6' : '#eb7400', highlight: $globalStore.isDark ? '#5829d6' : '#eb7400',
hover: $appStore.isDark ? '#222' : '#eee' hover: $globalStore.isDark ? '#222' : '#eee'
}, },
border: $appStore.isDark ? '#222' : '#eee' border: $globalStore.isDark ? '#222' : '#eee'
} }
} }
}; };