From cadfa819136830cf57547941c7f943bf1799ff44 Mon Sep 17 00:00:00 2001 From: Adeyemi Adetunji Date: Thu, 1 Feb 2024 20:18:03 +0100 Subject: [PATCH] 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 --- .../Apps/components/Poll/index.svelte | 4 ++-- .../components/Apps/components/Poll/utils.ts | 2 +- .../src/lib/components/Apps/index.svelte | 11 ++++++----- .../dashboard/src/lib/components/Apps/store.ts | 4 +--- .../components/Ceritficate/Design.svelte | 4 ++-- .../components/Lesson/AddLessonModal.svelte | 8 ++++---- .../components/Navigation/NavExpandable.svelte | 17 +++++++++++++++-- .../Course/components/Navigation/index.svelte | 13 +++++++++---- .../Course/components/Navigation/store.js | 5 +++++ .../components/CourseContainer/index.svelte | 8 +++++--- .../src/lib/components/Courses/index.svelte | 4 ++-- .../src/lib/components/Navigation/app.svelte | 12 ++++++------ .../src/lib/components/Navigation/lms.svelte | 10 +++++----- .../src/lib/components/TextEditor/index.svelte | 4 ++-- apps/dashboard/src/lib/utils/store/app.js | 7 ------- apps/dashboard/src/lib/utils/store/app.ts | 13 +++++++++++++ apps/dashboard/src/routes/+error.svelte | 4 ++-- apps/dashboard/src/routes/+layout.svelte | 12 ++++++------ apps/dashboard/src/routes/404/+page.svelte | 4 ++-- .../src/routes/courses/[id]/+layout.svelte | 3 ++- .../courses/[id]/attendance/+page.svelte | 15 +++++++-------- .../courses/[id]/certificates/+page.svelte | 3 +-- .../routes/courses/[id]/lessons/+page.svelte | 18 ++++++------------ .../lessons/[...lessonParams]/+page.svelte | 1 + .../src/routes/courses/[id]/marks/+page.svelte | 6 +++--- .../routes/courses/[id]/people/+page.svelte | 14 +++++++------- .../routes/courses/[id]/settings/+page.svelte | 3 +-- .../src/routes/org/[slug]/+page.svelte | 14 +++++++------- 28 files changed, 123 insertions(+), 100 deletions(-) create mode 100644 apps/dashboard/src/lib/components/Course/components/Navigation/store.js delete mode 100644 apps/dashboard/src/lib/utils/store/app.js create mode 100644 apps/dashboard/src/lib/utils/store/app.ts diff --git a/apps/dashboard/src/lib/components/Apps/components/Poll/index.svelte b/apps/dashboard/src/lib/components/Apps/components/Poll/index.svelte index a1b64513..7c00d00e 100644 --- a/apps/dashboard/src/lib/components/Apps/components/Poll/index.svelte +++ b/apps/dashboard/src/lib/components/Apps/components/Poll/index.svelte @@ -6,7 +6,7 @@ import Tabs from './components/Tabs.svelte'; import { polls } from './store'; 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 { profile } from '$lib/utils/store/user'; import { group, course } from '$lib/components/Course/store'; @@ -198,7 +198,7 @@ return; } - polls.set(getPollsData(data, $apps.isStudent)); + polls.set(getPollsData(data, $globalStore.isStudent)); setCoursePolls(); diff --git a/apps/dashboard/src/lib/components/Apps/components/Poll/utils.ts b/apps/dashboard/src/lib/components/Apps/components/Poll/utils.ts index 51fc3292..dbeffb70 100644 --- a/apps/dashboard/src/lib/components/Apps/components/Poll/utils.ts +++ b/apps/dashboard/src/lib/components/Apps/components/Poll/utils.ts @@ -1,6 +1,6 @@ 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) => ({ id: appsPollItem.id, courseId: appsPollItem.courseId, diff --git a/apps/dashboard/src/lib/components/Apps/index.svelte b/apps/dashboard/src/lib/components/Apps/index.svelte index 0d300946..85eedc66 100644 --- a/apps/dashboard/src/lib/components/Apps/index.svelte +++ b/apps/dashboard/src/lib/components/Apps/index.svelte @@ -6,6 +6,7 @@ import IconButton from '$lib/components/IconButton/index.svelte'; import Settings from 'carbon-icons-svelte/lib/Settings.svelte'; import { apps } from './store'; + import { globalStore } from '$lib/utils/store/app'; import Chip from '$lib/components/Chip/index.svelte'; import QandA from './components/QandA/index.svelte'; @@ -19,7 +20,7 @@ let appBarRef: HTMLDivElement; let appContentRef: HTMLDivElement; - let topPadding = $apps.isStudent ? '48px' : '109px'; + let topPadding = $globalStore.isStudent ? '48px' : '109px'; const getResizableSidebar = () => { if (!browser) return; @@ -29,7 +30,7 @@ function handleClose() { $apps.selectedApp = undefined; - if ($apps.isStudent) { + if ($globalStore.isStudent) { $apps.open = false; } } @@ -43,7 +44,7 @@ $apps.dropdown = !$apps.dropdown; } - function updateTopPadding(isStudent: boolean) { + function updateTopPadding(isStudent?: boolean) { topPadding = isStudent ? '48px' : '109px'; } @@ -54,10 +55,10 @@ } onMount(() => { - updateTopPadding($apps.isStudent); + updateTopPadding($globalStore.isStudent); }); - $: updateTopPadding($apps.isStudent); + $: updateTopPadding($globalStore.isStudent); $: getResizableSidebar(); diff --git a/apps/dashboard/src/lib/components/Apps/store.ts b/apps/dashboard/src/lib/components/Apps/store.ts index c4939e22..8ff28c68 100644 --- a/apps/dashboard/src/lib/components/Apps/store.ts +++ b/apps/dashboard/src/lib/components/Apps/store.ts @@ -4,10 +4,8 @@ export const apps = writable<{ open: boolean; dropdown: boolean; selectedApp: string | undefined; - isStudent: boolean; }>({ open: false, dropdown: false, - selectedApp: undefined, - isStudent: false + selectedApp: undefined }); diff --git a/apps/dashboard/src/lib/components/Course/components/Ceritficate/Design.svelte b/apps/dashboard/src/lib/components/Course/components/Ceritficate/Design.svelte index 530e6798..9dcb8b68 100644 --- a/apps/dashboard/src/lib/components/Course/components/Ceritficate/Design.svelte +++ b/apps/dashboard/src/lib/components/Course/components/Ceritficate/Design.svelte @@ -9,7 +9,7 @@ import Plain from './certificates/Plain.svelte'; import { course } from '$lib/components/Course/store'; 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 themes = ['professional', 'plain']; @@ -94,7 +94,7 @@ class="my-4" size="sm" > - Locked Unlocked diff --git a/apps/dashboard/src/lib/components/Course/components/Lesson/AddLessonModal.svelte b/apps/dashboard/src/lib/components/Course/components/Lesson/AddLessonModal.svelte index 2bb1d1ee..f94202f3 100644 --- a/apps/dashboard/src/lib/components/Course/components/Lesson/AddLessonModal.svelte +++ b/apps/dashboard/src/lib/components/Course/components/Lesson/AddLessonModal.svelte @@ -13,8 +13,8 @@ import TextChip from '$lib/components/Chip/Text.svelte'; import Modal from '$lib/components/Modal/index.svelte'; import { goto } from '$app/navigation'; + import { handleAddLessonWidget } from '../Navigation/store'; - export let openModal = false; export let isStudent = false; let errors = { title: '' @@ -49,13 +49,13 @@ $lessons = [...$lessons, lesson]; goto('/courses/' + $course.id + '/lessons/' + lesson.id); } - openModal = false; + $handleAddLessonWidget.open = false; }; (openModal = false)} - bind:open={openModal} + onClose={() => ($handleAddLessonWidget.open = false)} + bind:open={$handleAddLessonWidget.open} width="w-[80%] md:w-[60%]" containerClass="overflow-hidden" modalHeading="Add New Lesson" diff --git a/apps/dashboard/src/lib/components/Course/components/Navigation/NavExpandable.svelte b/apps/dashboard/src/lib/components/Course/components/Navigation/NavExpandable.svelte index 15551220..a9ca9d41 100644 --- a/apps/dashboard/src/lib/components/Course/components/Navigation/NavExpandable.svelte +++ b/apps/dashboard/src/lib/components/Course/components/Navigation/NavExpandable.svelte @@ -2,10 +2,12 @@ import { slide } from 'svelte/transition'; import ChevronDownIcon from 'carbon-icons-svelte/lib/ChevronDown.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 { NavClasses } from '$lib/utils/constants/reusableClass'; + import { handleAddLessonWidget } from './store'; import NavIcons from './NavIcons.svelte'; - import { SkeletonPlaceholder, SkeletonText } from 'carbon-components-svelte'; export let handleClick = () => {}; export let label = ''; @@ -13,8 +15,14 @@ export let isExpanded = true; export let total = 0; export let isLoading = true; + export let isLesson = false; + export let isStudent = true; // export let subMenuItems = []; + function addLesson() { + $handleAddLessonWidget.open = true; + } + function onClick() { handleClick(); } @@ -46,7 +54,12 @@ {/if} - {#if label === 'Lessons' && !isLoading} + {#if isLesson && !isLoading} + {#if !isStudent} + addLesson()} size="small"> + + + {/if} {#if isExpanded} diff --git a/apps/dashboard/src/lib/components/Course/components/Navigation/index.svelte b/apps/dashboard/src/lib/components/Course/components/Navigation/index.svelte index d6d07fb6..ed9f9e4f 100644 --- a/apps/dashboard/src/lib/components/Course/components/Navigation/index.svelte +++ b/apps/dashboard/src/lib/components/Course/components/Navigation/index.svelte @@ -15,6 +15,7 @@ import { sideBar } from '$lib/components/Org/store'; import { profile } from '$lib/utils/store/user'; import { getIsLessonComplete } from '../Lesson/functions'; + import { globalStore } from '$lib/utils/store/app'; export let path: string; export let isStudent: boolean = false; @@ -23,7 +24,7 @@ label: string; to: string; hideSortIcon: boolean; - isLecture?: boolean; + isLesson?: boolean; show?: () => boolean; } @@ -153,7 +154,7 @@ label: 'Lessons', to: getLessonsRoute($course.id), hideSortIcon: false, - isLecture: true + isLesson: true }, { label: 'Attendance', @@ -206,6 +207,8 @@ } ]; } + + $: console.log({ isStudent: $globalStore.isStudent });