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 { 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();
apps/dashboard/src/lib/components/Apps/components/Poll/utils.ts
+1 -1
View File
@@ -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,
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 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();
</script>
apps/dashboard/src/lib/components/Apps/store.ts
+1 -3
View File
@@ -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
});
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 { 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"
>
<span slot="labelA" style={$appStore.isDark ? 'color: white' : 'color: #161616'}
<span slot="labelA" style={$globalStore.isDark ? 'color: white' : 'color: #161616'}
>Locked</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 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;
};
</script>
<Modal
onClose={() => (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"
apps/dashboard/src/lib/components/Course/components/Navigation/NavExpandable.svelte
+15 -2
View File
@@ -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}
<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}>
{#if isExpanded}
<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 { 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 });
</script>
<aside
@@ -236,10 +239,12 @@
handleClick={handleMainGroupClick(navItem.to)}
isGroupActive={(path || $page.url.pathname) === navItem.to}
isExpanded={isLessonActive}
total={navItem.isLecture ? ($lessons || []).length : 0}
total={navItem.isLesson ? ($lessons || []).length : 0}
isLoading={!$course.id}
isLesson={navItem.isLesson}
{isStudent}
>
{#if navItem.isLecture}
{#if navItem.isLesson}
{#each $lessons as item, index}
<a
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 { isMobile } from '$lib/utils/store/useMobile';
import { profile } from '$lib/utils/store/user';
import { apps } from '$lib/components/Apps/store';
import { fetchCourse } from '$lib/utils/services/courses';
import { globalStore } from '$lib/utils/store/app';
export let courseId = '';
export let path = '';
@@ -44,15 +44,17 @@
$: onCourseIdChange(courseId);
$: {
$: if (typeof $globalStore.isStudent !== 'boolean') {
const user = $group.people.find((person) => person.profile_id === $profile.id);
if (user) {
isStudent = user.role_id === 3;
$apps.isStudent = isStudent;
$globalStore.isStudent = isStudent;
filterPollsByStatus(isStudent);
}
} else {
isStudent = $globalStore.isStudent;
}
</script>
apps/dashboard/src/lib/components/Courses/index.svelte
+2 -2
View File
@@ -5,7 +5,7 @@
import CoursesEmptyIcon from '../Icons/CoursesEmptyIcon.svelte';
import { courseMetaDeta } from './store';
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 emptyTitle = 'No Courses Created';
@@ -42,7 +42,7 @@
currency={courseData.currency}
totalLessons={courseData.total_lessons}
totalStudents={courseData.total_students}
isLMS={$appStore.isOrgSite}
isLMS={$globalStore.isOrgSite}
progressRate={calcProgressRate(courseData.progress_rate, courseData.total_lessons)}
/>
{/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 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 { toggleBodyByMode } from '$lib/utils/functions/app';
import { sideBar } from '../Org/store';
@@ -23,16 +23,16 @@
};
function toggleDarkMode() {
$appStore.isDark = !$appStore.isDark;
$globalStore.isDark = !$globalStore.isDark;
toggleBodyByMode($appStore.isDark);
toggleBodyByMode($globalStore.isDark);
if (browser) {
localStorage.setItem('mode', $appStore.isDark ? 'dark' : '');
localStorage.setItem('mode', $globalStore.isDark ? 'dark' : '');
}
}
$: coursesPath = $appStore.isOrgSite
$: coursesPath = $globalStore.isOrgSite
? '/lms/mylearning'
: isCoursePage
? `${$currentOrgPath}/courses`
@@ -91,7 +91,7 @@
</li>
<li>
<IconButton size="small" onClick={toggleDarkMode}>
{#if $appStore.isDark}
{#if $globalStore.isDark}
<Sun size={16} class="text-white" />
{:else}
<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 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 { sideBar } from '$lib/components/Org/store';
import { currentOrg } from '$lib/utils/store/org';
@@ -21,11 +21,11 @@
};
function toggleDarkMode() {
$appStore.isDark = !$appStore.isDark;
$globalStore.isDark = !$globalStore.isDark;
toggleBodyByMode($appStore.isDark);
toggleBodyByMode($globalStore.isDark);
if (browser) {
localStorage.setItem('mode', $appStore.isDark ? 'dark' : '');
localStorage.setItem('mode', $globalStore.isDark ? 'dark' : '');
}
}
@@ -80,7 +80,7 @@
</li>
<li>
<IconButton size="small" onClick={toggleDarkMode}>
{#if $appStore.isDark}
{#if $globalStore.isDark}
<SunIcon size={16} class="text-white" />
{:else}
<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">
import { PUBLIC_TINYMCE_API_KEY } from '$env/static/public';
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 value: string | undefined = '';
@@ -72,7 +72,7 @@
$: value = !value ? '' : value;
$: handleModeChange($appStore.isDark);
$: handleModeChange($globalStore.isDark);
</script>
<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
});