From 8cf4148703a65ba558dc8bd2a569beb221884cf6 Mon Sep 17 00:00:00 2001 From: Rotimi Best Date: Thu, 3 Aug 2023 02:51:02 +0100 Subject: [PATCH] CLASSROOMIO-T-88: Mark lesson as complete --- src/lib/components/Chip/Text.svelte | 9 +- .../Course/components/Lesson/store/lessons.ts | 49 ++++---- .../Navigation/NavExpandable.svelte | 13 +-- .../Course/components/Navigation/index.svelte | 74 ++++++------ src/lib/components/Course/function.js | 8 +- src/lib/components/PageBody/index.svelte | 4 +- src/lib/utils/services/courses/clone.ts | 29 ++--- src/lib/utils/services/courses/index.ts | 110 +++++------------- src/lib/utils/types/dashboard.ts | 2 +- src/lib/utils/types/index.ts | 3 +- src/routes/+layout.svelte | 5 +- src/routes/courses/[id]/lessons/+page.svelte | 17 +-- .../lessons/[...lessonParams]/+page.svelte | 23 +++- src/routes/dashboard/+page.svelte | 48 +++----- src/routes/org/[slug]/+page.svelte | 75 +++++------- 15 files changed, 190 insertions(+), 279 deletions(-) diff --git a/src/lib/components/Chip/Text.svelte b/src/lib/components/Chip/Text.svelte index a87203c3..970f2a5a 100644 --- a/src/lib/components/Chip/Text.svelte +++ b/src/lib/components/Chip/Text.svelte @@ -2,14 +2,15 @@ export let className = ''; export let value = ''; export let size = ''; + export let shape = 'rounded-md';

{value}

diff --git a/src/lib/components/Course/components/Lesson/store/lessons.ts b/src/lib/components/Course/components/Lesson/store/lessons.ts index 5c8ac14e..604e315f 100644 --- a/src/lib/components/Course/components/Lesson/store/lessons.ts +++ b/src/lib/components/Course/components/Lesson/store/lessons.ts @@ -1,10 +1,6 @@ import { writable } from 'svelte/store'; import type { Writable, Updater } from 'svelte/store'; -import { - createLesson, - updateLesson, - deleteLesson, -} from '$lib/utils/services/courses'; +import { createLesson, updateLesson, deleteLesson } from '$lib/utils/services/courses'; import type { Lesson, Course } from '$lib/utils/types'; @@ -12,12 +8,13 @@ export const lessons: Writable = writable([]); export const lesson = writable({ id: null, totalExercises: 0, + is_complete: false, materials: { note: null, slide_url: null, - video_url: null, + video_url: null }, - exercises: [], + exercises: [] }); export const isLessonDirty = writable(false); @@ -31,8 +28,9 @@ export function handleAddLesson() { // profile: undefined, call_url: undefined, lesson_at: new Date(), - is_complete: false, - }, + is_unlocked: false, + is_complete: false + } ]; }) as Updater); } @@ -48,17 +46,12 @@ export function handleDelete(lessonId: Lesson['id']) { } } - lessons.update((_lessons) => - _lessons.filter((lesson) => lesson.id !== lessonId) - ); + lessons.update((_lessons) => _lessons.filter((lesson) => lesson.id !== lessonId)); console.log(`lessonId`, lessonId); }; } -export async function handleSaveLesson( - lesson: Lesson, - course_id: Course['id'] -) { +export async function handleSaveLesson(lesson: Lesson, course_id: Course['id']) { console.log(`handleSaveLesson lesson`, lesson); const newLesson = { title: lesson.title, @@ -66,10 +59,11 @@ export async function handleSaveLesson( call_url: lesson.call_url, teacher_id: lesson.profile ? lesson.profile.id : undefined, course_id, - is_complete: lesson.is_complete, + is_unlocked: lesson.is_unlocked, + is_complete: lesson.is_complete }; - let updatedLesson: any[] | null = null; + let newLessonData: any[] | null = null; if (typeof lesson.id === 'string') { // No need to get the result of update cause we have all in local state @@ -77,26 +71,25 @@ export async function handleSaveLesson( } else { const { data } = await createLesson(newLesson); - updatedLesson = data; + newLessonData = data; } lessons.update((l) => - l.map((lesson) => { - if (!lesson.id && updatedLesson) { - lesson.id = updatedLesson[0].id; + l.map((_lesson) => { + if (!_lesson.id && newLessonData) { + _lesson.id = newLessonData[0].id; + } else if (typeof lesson.id === 'string' && lesson.id === _lesson.id) { + return { ..._lesson, is_complete: lesson.is_complete }; } - return lesson; + return _lesson; }) ); } -export async function handleUpdateLessonMaterials( - lesson: any, - lessonId: Lesson['id'] -) { +export async function handleUpdateLessonMaterials(lesson: any, lessonId: Lesson['id']) { const materials = { - ...lesson.materials, + ...lesson.materials }; delete materials.totalExercises; diff --git a/src/lib/components/Course/components/Navigation/NavExpandable.svelte b/src/lib/components/Course/components/Navigation/NavExpandable.svelte index 75ef3f24..966a1c5a 100644 --- a/src/lib/components/Course/components/Navigation/NavExpandable.svelte +++ b/src/lib/components/Course/components/Navigation/NavExpandable.svelte @@ -15,20 +15,13 @@
-
- {#if !hideSortIcon} - - {/if} {label} -
+ {#if isExpanded}
diff --git a/src/lib/components/Course/components/Navigation/index.svelte b/src/lib/components/Course/components/Navigation/index.svelte index eff97a0a..886f8c2b 100644 --- a/src/lib/components/Course/components/Navigation/index.svelte +++ b/src/lib/components/Course/components/Navigation/index.svelte @@ -4,8 +4,9 @@ import { page } from '$app/stores'; import hotkeys from 'hotkeys-js'; import { browser } from '$app/environment'; + import LockedIcon from 'carbon-icons-svelte/lib/Locked.svelte'; import HomeIcon from 'carbon-icons-svelte/lib/Home.svelte'; - import CheckmarkFilledIcon from 'carbon-icons-svelte/lib/CheckmarkFilled.svelte'; + import CheckmarkOutline from 'carbon-icons-svelte/lib/CheckmarkOutline.svelte'; import SettingsIcon from 'carbon-icons-svelte/lib/Settings.svelte'; import ChevronLeftIcon from 'carbon-icons-svelte/lib/ChevronLeft.svelte'; import ChevronRightIcon from 'carbon-icons-svelte/lib/ChevronRight.svelte'; @@ -13,12 +14,9 @@ import PageNav from '$lib/components/PageNav/index.svelte'; import IconButton from '$lib/components/IconButton/index.svelte'; import Avatar from '$lib/components/Avatar/index.svelte'; - import { - getNavItemRoute, - getLessonsRoute, - getLectureNo, - } from '$lib/components/Course/function'; + import { getNavItemRoute, getLessonsRoute, getLectureNo } from '$lib/components/Course/function'; + import TextChip from '$lib/components/Chip/Text.svelte'; import RoleBasedSecurity from '$lib/components/RoleBasedSecurity/index.svelte'; import Settings from '../Settings/index.svelte'; import { settingsDialog } from '../Settings/store'; @@ -47,7 +45,7 @@ function getHref(item) { return item.to; - // return item.is_complete ? item.to : path || $page.url.pathname + // return item.is_unlocked ? item.to : path || $page.url.pathname } function handleSaveTitle() { @@ -89,18 +87,18 @@ { label: 'Overview', to: getNavItemRoute($course.id), - hideSortIcon: true, + hideSortIcon: true }, { label: 'Lessons', to: getLessonsRoute($course.id), hideSortIcon: false, - isLecture: true, + isLecture: true }, { label: 'Attendance', to: getNavItemRoute($course.id, 'attendance'), - hideSortIcon: true, + hideSortIcon: true }, { label: 'Submissions', @@ -108,12 +106,12 @@ hideSortIcon: true, show() { return !isStudent; - }, + } }, { label: 'Marks', to: getNavItemRoute($course.id, 'marks'), - hideSortIcon: true, + hideSortIcon: true }, // { // label: 'Scoreboard', @@ -123,12 +121,12 @@ { label: 'People', to: getNavItemRoute($course.id, 'people'), - hideSortIcon: true, + hideSortIcon: true }, { label: 'Certificates', to: getNavItemRoute($course.id, 'certificates'), - hideSortIcon: true, + hideSortIcon: true }, { label: 'Landing Page', @@ -136,17 +134,15 @@ hideSortIcon: true, show() { return !isStudent; - }, - }, + } + } ]; } -
+
{#if show}
@@ -155,9 +151,7 @@ - ($settingsDialog.open = !$settingsDialog.open)} - > + ($settingsDialog.open = !$settingsDialog.open)}> @@ -175,13 +169,11 @@ {#if navItem.isLecture} {#each $lessons as item, index} { @@ -189,17 +181,23 @@ setTimeout(() => (show = false), 500); } }} + aria-disabled={!item.is_unlocked} > - - {getLectureNo(index + 1)} - + {item.title} - {#if item.is_complete} - - + {#if !item.is_unlocked} + + + + {:else if item.is_complete} + + - {:else} - 🔒 {/if} {/each} @@ -209,9 +207,7 @@ {/each}
-
+
goto(`${$currentOrgPath}/courses`)} @@ -236,7 +232,7 @@ : { title: 'Toggle sidebar', hotkeys: ['B'], - direction: 'right', + direction: 'right' }} > {#if show} diff --git a/src/lib/components/Course/function.js b/src/lib/components/Course/function.js index 9e88ea9c..e5b426d3 100644 --- a/src/lib/components/Course/function.js +++ b/src/lib/components/Course/function.js @@ -26,12 +26,12 @@ export function getLessonsRoute(courseId, lessonId) { return `${path}/${lessonId}`; } -export function getLectureNo(index, initNo = '00') { +export function getLectureNo(index, initNo = '0') { if (index <= 9) { return `${initNo}${index}`; } - return `${initNo.replace('0', '')}${index}`; + return index; } export function formatAnswers(data) { @@ -46,9 +46,7 @@ export function formatAnswers(data) { const questionName = questionByIdAndName[answer.question_id]; answers[questionName] = - Array.isArray(answer.answers) && answer.answers.length - ? answer.answers - : answer.open_answer; + Array.isArray(answer.answers) && answer.answers.length ? answer.answers : answer.open_answer; } return answers; diff --git a/src/lib/components/PageBody/index.svelte b/src/lib/components/PageBody/index.svelte index 25a518d6..4ddf3bdc 100644 --- a/src/lib/components/PageBody/index.svelte +++ b/src/lib/components/PageBody/index.svelte @@ -8,9 +8,7 @@
{#if $$slots.header} -
+
{/if} diff --git a/src/lib/utils/services/courses/clone.ts b/src/lib/utils/services/courses/clone.ts index ffe37cea..984323a5 100644 --- a/src/lib/utils/services/courses/clone.ts +++ b/src/lib/utils/services/courses/clone.ts @@ -70,7 +70,7 @@ async function cloneGroupAndBasicCourse( lessons: undefined, id: undefined, updated_at: undefined, - created_at: undefined, + created_at: undefined }) .select(); @@ -85,34 +85,30 @@ async function cloneGroupAndBasicCourse( profile_id: profileStoreValue.id, email: profileStoreValue.email, group_id, - role_id: ROLE.TUTOR, + role_id: ROLE.TUTOR }); console.log('profileStoreValue', profileStoreValue); return { - newCourse: newCourse?.[0], + newCourse: newCourse?.[0] }; } async function cloneLessons(lessons: Lesson[], courseId: Course['id']) { const clonedLessons = lessons - .sort( - (a, b) => - new Date(a.created_at || '').getTime() - - new Date(b.created_at || '').getTime() - ) + .sort((a, b) => new Date(a.created_at || '').getTime() - new Date(b.created_at || '').getTime()) .map((lesson, index) => ({ call_url: lesson.call_url, course_id: courseId, - is_complete: lesson.is_complete, + is_unlocked: lesson.is_unlocked, lesson_at: new Date(), note: lesson.note, order: lesson.order || index + 1, public: lesson.public, slide_url: lesson.slide_url, title: lesson.title, - video_url: lesson.video_url, + video_url: lesson.video_url })); const { data } = await supabase.from('lesson').insert(clonedLessons).select(); @@ -121,7 +117,7 @@ async function cloneLessons(lessons: Lesson[], courseId: Course['id']) { return { ...dataItem, // @ts-ignore - exercise: lessons[dataIndex].exercise, + exercise: lessons[dataIndex].exercise }; }); @@ -147,7 +143,7 @@ async function cloneExercises(lessons: Lesson[]) { description, due_by: new Date(), lesson_id: lessonId, - title, + title }) .select(); const newExercise = Array.isArray(data) ? data[0] : data; @@ -166,7 +162,7 @@ async function cloneExercises(lessons: Lesson[]) { points: question.points, order: question.order, question_type_id: question.question_type_id, - exercise_id: newExercise.id, + exercise_id: newExercise.id }) .select(); const newQuestion = Array.isArray(data) ? data[0] : data; @@ -179,7 +175,7 @@ async function cloneExercises(lessons: Lesson[]) { value: option.value, label: option.label, is_correct: option.is_correct, - question_id: newQuestion.id, + question_id: newQuestion.id })); // Insert[Batch] @@ -192,10 +188,7 @@ async function cloneExercises(lessons: Lesson[]) { return true; } -export async function cloneCourse( - courseId: string, - newTitle: string -): Promise { +export async function cloneCourse(courseId: string, newTitle: string): Promise { const { data: course, error } = await fetchCourseData(courseId); console.log(`course`, course); diff --git a/src/lib/utils/services/courses/index.ts b/src/lib/utils/services/courses/index.ts index 8875165b..f966473b 100644 --- a/src/lib/utils/services/courses/index.ts +++ b/src/lib/utils/services/courses/index.ts @@ -1,18 +1,9 @@ import { supabase } from '$lib/utils/functions/supabase'; import { isUUID } from '$lib/utils/functions/isUUID'; import { QUESTION_TYPE } from '$lib/components/Question/constants'; -import type { - Lesson, - Course, - Group, - Groupmember, - Exercise, -} from '$lib/utils/types'; +import type { Lesson, Course, Group, Groupmember, Exercise } from '$lib/utils/types'; -export async function fetchCourse( - courseId?: Course['id'], - slug?: Course['slug'] -) { +export async function fetchCourse(courseId?: Course['id'], slug?: Course['slug']) { let match: { slug?: string; id?: string } = {}; if (slug) { @@ -42,7 +33,7 @@ export async function fetchCourse( is_certificate_downloadable, certificate_theme, lessons:lesson( - id, title,public, lesson_at, call_url, is_complete, order, created_at, + id, title,public, lesson_at, call_url, is_unlocked, is_complete, order, created_at, note, video_url, slide_url, call_url, totalExercises:exercise(count), profile:teacher_id(id, avatar_url, fullname) ), @@ -61,7 +52,7 @@ export async function fetchCourse( return { data, - error, + error }; } @@ -74,25 +65,22 @@ export async function fetchGroup(groupId: Group['id']) { return { data, - error, + error }; } -export async function setProfileIdOfGroupMember( - email: string, - profileId: string -) { +export async function setProfileIdOfGroupMember(email: string, profileId: string) { const { data, error } = await supabase .from('groupmember') .update({ email: null, - profile_id: profileId, + profile_id: profileId }) .match({ email: email }); return { data, - error, + error }; } @@ -100,17 +88,13 @@ export async function uploadAvatar(courseId: string, avatar: string) { const filename = `course/${courseId + Date.now()}.webp`; let logo; - const { data } = await supabase.storage - .from('avatars') - .upload(filename, avatar, { - cacheControl: '3600', - upsert: false, - }); + const { data } = await supabase.storage.from('avatars').upload(filename, avatar, { + cacheControl: '3600', + upsert: false + }); if (data && data.Key) { - const { publicURL } = supabase.storage - .from('avatars') - .getPublicUrl(filename); + const { publicURL } = supabase.storage.from('avatars').getPublicUrl(filename); if (!publicURL) return; @@ -128,17 +112,13 @@ export async function updateCourse( if (avatar) { const filename = `course/${courseId + Date.now()}.webp`; - const { data } = await supabase.storage - .from('avatars') - .upload(filename, avatar, { - cacheControl: '3600', - upsert: false, - }); + const { data } = await supabase.storage.from('avatars').upload(filename, avatar, { + cacheControl: '3600', + upsert: false + }); if (data && data.Key) { - const { publicURL } = supabase.storage - .from('avatars') - .getPublicUrl(filename); + const { publicURL } = supabase.storage.from('avatars').getPublicUrl(filename); if (!publicURL) return; @@ -170,9 +150,7 @@ export function deleteGroupMember(groupMemberId: Groupmember['id']) { export function fetchLesson(lessonId: Lesson['id']) { return supabase .from('lesson') - .select( - `id, note, video_url, slide_url, call_url, totalExercises:exercise(count)` - ) + .select(`id, note, video_url, slide_url, call_url, totalExercises:exercise(count)`) .eq('id', lessonId) .single(); } @@ -206,10 +184,7 @@ function isNew(item: any) { } // TODO: Add questionnaire type -export async function upsertExercise( - questionnaire: any, - exerciseId: Exercise['id'] -) { +export async function upsertExercise(questionnaire: any, exerciseId: Exercise['id']) { const { questions, title, @@ -217,7 +192,7 @@ export async function upsertExercise( due_by, is_title_dirty, is_description_dirty, - is_due_by_dirty, + is_due_by_dirty } = questionnaire; if (is_description_dirty || is_title_dirty || is_due_by_dirty) { @@ -226,7 +201,7 @@ export async function upsertExercise( .update({ title, description, - due_by, + due_by }) .match({ id: exerciseId }); } @@ -234,31 +209,16 @@ export async function upsertExercise( const updatedQuestions = []; for (const question of questions) { - const { - title, - id, - name, - question_type, - options, - deleted_at, - order, - points, - is_dirty, - } = question; + const { title, id, name, question_type, options, deleted_at, order, points, is_dirty } = + question; // DELETE /delete/:questionId - Don't delete if answer already given if (deleted_at) { // Delete from server only if this question exists in the database if (!isNew(id)) { await supabase.from('option').delete().match({ question_id: id }); - await supabase - .from('question_answer') - .delete() - .match({ question_id: id }); - const { error } = await supabase - .from('question') - .delete() - .match({ id }); + await supabase.from('question_answer').delete().match({ question_id: id }); + const { error } = await supabase.from('question').delete().match({ id }); if (error) { console.error('Cannot delete this question', error); @@ -278,7 +238,7 @@ export async function upsertExercise( points, order, question_type_id: question_type.id, - exercise_id: exerciseId, + exercise_id: exerciseId }; let questionSupabaseRes; @@ -329,7 +289,7 @@ export async function upsertExercise( is_dirty: undefined, id: isNew(option.id) ? undefined : option.id, value: isUUID(option.value) ? option.value : undefined, // this value is of UUID type - question_id: newQuestion.id, + question_id: newQuestion.id }; if (is_dirty || isNew(option.id)) { @@ -378,7 +338,7 @@ export async function submitExercise( .insert({ submitted_by: groupMemberId, exercise_id: exerciseId, - course_id: courseId, + course_id: courseId }) .select(); @@ -390,7 +350,7 @@ export async function submitExercise( question_id: questionsByName[questionName], open_answer: '', answers: [], - submission_id: Array.isArray(submission) ? submission[0].id : null, + submission_id: Array.isArray(submission) ? submission[0].id : null }; if (typeof value === 'string') { @@ -402,17 +362,11 @@ export async function submitExercise( questionAnswers.push(questionAnswer); } - const res = await supabase - .from('question_answer') - .insert(questionAnswers) - .select(); + const res = await supabase.from('question_answer').insert(questionAnswers).select(); console.log(`res`, res); } -export async function deleteExercise( - questions: Array<{ id: string }>, - exerciseId: Exercise['id'] -) { +export async function deleteExercise(questions: Array<{ id: string }>, exerciseId: Exercise['id']) { for (const question of questions) { const { id } = question; diff --git a/src/lib/utils/types/dashboard.ts b/src/lib/utils/types/dashboard.ts index 869333bf..9c49ec15 100644 --- a/src/lib/utils/types/dashboard.ts +++ b/src/lib/utils/types/dashboard.ts @@ -5,7 +5,7 @@ export type UserLessonDataType = { lesson_at: string; lesson_id: string; lesson_title: string; - is_complete: boolean; + is_unlocked: boolean; }; type LessonByDayType = { diff --git a/src/lib/utils/types/index.ts b/src/lib/utils/types/index.ts index c1ed1266..bc6a1a19 100644 --- a/src/lib/utils/types/index.ts +++ b/src/lib/utils/types/index.ts @@ -141,13 +141,14 @@ export interface Lesson { video_url?: any; // type unknown; slide_url?: any; // type unknown; course_id: string /* foreign key to course.id */; - id: string /* primary key */; + id?: string /* primary key */; created_at?: string; updated_at?: string; title: any; // type unknown; public?: boolean; lesson_at?: string; teacher_id?: string /* foreign key to profile.id */; + is_unlocked?: boolean; is_complete?: boolean; call_url?: string; order?: number; diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index b3ae8c4a..7d5cfa68 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -181,8 +181,9 @@ $appStore.isStudentDomain = debug || answer; $appStore.siteNameFromDomain = debug ? 'codingdojo' : subdomain; + } else if (subdomain === 'play' || debug) { + skipAuth = true; } - skipAuth = debug || subdomain === 'play'; } } @@ -236,7 +237,7 @@ if (event === 'SIGNED_IN') { $user.fetchingUser = true; getProfile(); - } else { + } else if (!['INITIAL_SESSION', 'TOKEN_REFRESHED'].includes(event)) { console.log('not logged in, go to login'); return goto('/login'); } diff --git a/src/routes/courses/[id]/lessons/+page.svelte b/src/routes/courses/[id]/lessons/+page.svelte index 598fb782..556404cc 100644 --- a/src/routes/courses/[id]/lessons/+page.svelte +++ b/src/routes/courses/[id]/lessons/+page.svelte @@ -2,12 +2,13 @@ import { onMount } from 'svelte'; import { page } from '$app/stores'; import { dndzone } from 'svelte-dnd-action'; + import UnlockedIcon from 'carbon-icons-svelte/lib/Unlocked.svelte'; + import LockedIcon from 'carbon-icons-svelte/lib/Locked.svelte'; import TimeIcon from 'carbon-icons-svelte/lib/Time.svelte'; import EditIcon from 'carbon-icons-svelte/lib/Edit.svelte'; import SaveIcon from 'carbon-icons-svelte/lib/Save.svelte'; import PhoneIcon from 'carbon-icons-svelte/lib/Phone.svelte'; import TrashCanIcon from 'carbon-icons-svelte/lib/TrashCan.svelte'; - import CheckmarkFilled24 from 'carbon-icons-svelte/lib/CheckmarkFilled.svelte'; import PageNav from '$lib/components/PageNav/index.svelte'; import RoleBasedSecurity from '$lib/components/RoleBasedSecurity/index.svelte'; import Box from '$lib/components/Box/index.svelte'; @@ -137,20 +138,20 @@ { - lesson.is_complete = !lesson.is_complete; + lesson.is_unlocked = !lesson.is_unlocked; handleSaveLesson(lesson, $course.id); }} toolTipProps={isStudent ? {} : { - title: `Click to ${lesson.is_complete ? 'lock' : 'unlock'}`, + title: `Click to ${lesson.is_unlocked ? 'lock' : 'unlock'}`, direction: 'right' }} > - {#if lesson.is_complete} - + {#if lesson.is_unlocked} + {:else} - 🔒 + {/if}
@@ -186,11 +187,11 @@ {:else}

diff --git a/src/routes/courses/[id]/lessons/[...lessonParams]/+page.svelte b/src/routes/courses/[id]/lessons/[...lessonParams]/+page.svelte index 961dbf73..c6bc94b5 100644 --- a/src/routes/courses/[id]/lessons/[...lessonParams]/+page.svelte +++ b/src/routes/courses/[id]/lessons/[...lessonParams]/+page.svelte @@ -2,6 +2,7 @@ import { page } from '$app/stores'; import CourseContainer from '$lib/components/CourseContainer/index.svelte'; import { fetchCourse, fetchLesson } from '$lib/utils/services/courses'; + import CheckmarkOutlineIcon from 'carbon-icons-svelte/lib/CheckmarkOutline.svelte'; import PrimaryButton from '$lib/components/PrimaryButton/index.svelte'; import RoleBasedSecurity from '$lib/components/RoleBasedSecurity/index.svelte'; import PageNav from '$lib/components/PageNav/index.svelte'; @@ -10,7 +11,7 @@ import Exercises from '$lib/components/Course/components/Lesson/Exercises/index.svelte'; import MODES from '$lib/utils/constants/mode.js'; import { setCourse, course } from '$lib/components/Course/store'; - import { lesson } from '$lib/components/Course/components/Lesson/store/lessons'; + import { lesson, handleSaveLesson } from '$lib/components/Course/components/Lesson/store/lessons'; export let data; @@ -19,6 +20,7 @@ let prevMode = ''; let prevLessonId = ''; let isFetching = false; + let isMarkingComplete = false; async function fetchReqData(lessonId = '') { isFetching = true; @@ -41,6 +43,13 @@ isFetching = false; } + async function markLessonComplete() { + isMarkingComplete = true; + $lesson.is_complete = !$lesson.is_complete; + await handleSaveLesson($lesson, $course.id); + isMarkingComplete = false; + } + function setLesson(lessonData, totalExercises) { if (!lessonData) return; @@ -99,6 +108,18 @@ {:else if !!data.lessonId} + +
+ + + Mark as {$lesson.is_complete ? 'Incomplete' : 'Complete'} + +
{/if} diff --git a/src/routes/dashboard/+page.svelte b/src/routes/dashboard/+page.svelte index 35ee07fa..a86d55fc 100644 --- a/src/routes/dashboard/+page.svelte +++ b/src/routes/dashboard/+page.svelte @@ -3,23 +3,17 @@ import { InlineCalendar, Datepicker } from 'svelte-calendar'; import CheckmarkFilledIcon from 'carbon-icons-svelte/lib/CheckmarkFilled.svelte'; - import { - formatUserUpcomingData, - formatDate, - } from '$lib/utils/functions/routes/dashboard'; + import { formatUserUpcomingData, formatDate } from '$lib/utils/functions/routes/dashboard'; import { user } from '$lib/utils/store/user'; import { fetchUserUpcomingData } from '$lib/utils/services/dashboard'; import { isMobile } from '$lib/utils/store/useMobile'; - import type { - UserLessonDataType, - LessonsByMonthIndexType, - } from '$lib/utils/types'; + import type { UserLessonDataType, LessonsByMonthIndexType } from '$lib/utils/types'; const theme = { calendar: { width: '400px', - shadow: '0px 0px 5px rgba(0, 0, 0, 0.25)', - }, + shadow: '0px 0px 5px rgba(0, 0, 0, 0.25)' + } }; let store; @@ -37,8 +31,7 @@ // ); const renderedMonths = - calendar?.querySelectorAll('.contents .container .stage .grid .grid') || - []; + calendar?.querySelectorAll('.contents .container .stage .grid .grid') || []; // console.log(`renderedMonths`, renderedMonths); const currentMonthIndex = new Date($store?.selected).getMonth(); const currentMonth = renderedMonths[currentMonthIndexInRenderedMonth]; @@ -63,10 +56,7 @@ if (!!currentMonthData[dateIndex]) { // console.log(`dateIndex`, dateIndex); // console.log(`lesson data`, currentMonthData[dateIndex]); - dayElement.insertAdjacentHTML( - 'beforeend', - '•' - ); + dayElement.insertAdjacentHTML('beforeend', '•'); } } }, 500); @@ -84,9 +74,7 @@ } } - function getDataOfSelectedDate( - _selectedDate: string - ): UserLessonDataType[] | [] { + function getDataOfSelectedDate(_selectedDate: string): UserLessonDataType[] | [] { if (!_selectedDate) return []; const selectedDate = new Date(_selectedDate).toUTCString(); @@ -97,8 +85,7 @@ // If we changed the month, update the calendar dots const prevMonthIndex = new Date(prevSelectedDate).getMonth(); if (prevMonthIndex !== monthIndex) { - const currentMonthIndexInRenderedMonth = - monthIndex < prevMonthIndex ? 1 : 2; + const currentMonthIndexInRenderedMonth = monthIndex < prevMonthIndex ? 1 : 2; addDotsToCalendar(currentMonthIndexInRenderedMonth); } @@ -163,9 +150,7 @@

{:else} -
+
{formatDate($store?.selected)}
{/if} @@ -176,11 +161,11 @@ {lessonData.lesson_title} - {#if lessonData.is_complete} + {#if lessonData.is_unlocked} @@ -189,15 +174,12 @@ {/if}

- + {` ${lessonData.course_title}`}

- {#if lessonData.is_complete} + {#if lessonData.is_unlocked} {:else} -

+

No lesson on this day

{/each} diff --git a/src/routes/org/[slug]/+page.svelte b/src/routes/org/[slug]/+page.svelte index 22da9444..c659637c 100644 --- a/src/routes/org/[slug]/+page.svelte +++ b/src/routes/org/[slug]/+page.svelte @@ -3,20 +3,15 @@ // import { supabase } from '$lib/utils/functions/supabase'; import { goto } from '$app/navigation'; import PrimaryButton from '$lib/components/PrimaryButton/index.svelte'; + import UnlockedIcon from 'carbon-icons-svelte/lib/Unlocked.svelte'; + import LockedIcon from 'carbon-icons-svelte/lib/Locked.svelte'; import Avatar from '$lib/components/Avatar/index.svelte'; import { InlineCalendar, Datepicker } from 'svelte-calendar'; - import CheckmarkFilledIcon from 'carbon-icons-svelte/lib/CheckmarkFilled.svelte'; - import { - formatUserUpcomingData, - formatDate, - } from '$lib/utils/functions/routes/dashboard'; + import { formatUserUpcomingData, formatDate } from '$lib/utils/functions/routes/dashboard'; import { user } from '$lib/utils/store/user'; import { fetchUserUpcomingData } from '$lib/utils/services/dashboard'; import { isMobile } from '$lib/utils/store/useMobile'; - import type { - UserLessonDataType, - LessonsByMonthIndexType, - } from '$lib/utils/types'; + import type { UserLessonDataType, LessonsByMonthIndexType } from '$lib/utils/types'; import WelcomeModal from '$lib/components/WelcomeModal/WelcomeModal.svelte'; import { onMount } from 'svelte'; @@ -31,8 +26,8 @@ calendar: { width: '300px', height: '300px', - shadow: '0px 0px 5px rgba(0, 0, 0, 0.25)', - }, + shadow: '0px 0px 5px rgba(0, 0, 0, 0.25)' + } }; let store; @@ -44,20 +39,20 @@ const boxes = [ { label: 'Revenue (NGN)', - value: '0.00', + value: '0.00' }, { label: 'Number of sales', - value: 0, + value: 0 }, { label: 'Number of courses', - value: 0, + value: 0 }, { label: 'Total students', - value: 0, - }, + value: 0 + } ]; const activities = [ { @@ -66,7 +61,7 @@ name: 'Nnancy Okoye', time: '1 hour ago', description: 'Submitted an assignment for lesson Figma prototyping', - link: '/', + link: '/' }, { avatar: @@ -74,7 +69,7 @@ name: 'Bro Shagi', time: '2 days ago', description: 'Submitted an assignment for lesson Figma prototyping', - link: '/', + link: '/' }, { avatar: @@ -82,7 +77,7 @@ name: 'Bill Gates', time: '13 hours ago', description: 'Submitted an assignment for lesson Figma prototyping', - link: '/', + link: '/' }, { avatar: @@ -90,8 +85,8 @@ name: 'Steve Jobs', time: 'yesterday', description: 'Submitted an assignment for lesson Figma prototyping', - link: '/', - }, + link: '/' + } ]; const addDotsToCalendar = (currentMonthIndexInRenderedMonth: number) => @@ -103,8 +98,7 @@ // ); const renderedMonths = - calendar?.querySelectorAll('.contents .container .stage .grid .grid') || - []; + calendar?.querySelectorAll('.contents .container .stage .grid .grid') || []; // console.log(`renderedMonths`, renderedMonths); const currentMonthIndex = new Date($store?.selected).getMonth(); const currentMonth = renderedMonths[currentMonthIndexInRenderedMonth]; @@ -129,10 +123,7 @@ if (!!currentMonthData[dateIndex]) { // console.log(`dateIndex`, dateIndex); // console.log(`lesson data`, currentMonthData[dateIndex]); - dayElement.insertAdjacentHTML( - 'beforeend', - '•' - ); + dayElement.insertAdjacentHTML('beforeend', '•'); } } }, 500); @@ -150,9 +141,7 @@ } } - function getDataOfSelectedDate( - _selectedDate: string - ): UserLessonDataType[] | [] { + function getDataOfSelectedDate(_selectedDate: string): UserLessonDataType[] | [] { if (!_selectedDate) return []; const selectedDate = new Date(_selectedDate).toUTCString(); @@ -163,8 +152,7 @@ // If we changed the month, update the calendar dots const prevMonthIndex = new Date(prevSelectedDate).getMonth(); if (prevMonthIndex !== monthIndex) { - const currentMonthIndexInRenderedMonth = - monthIndex < prevMonthIndex ? 1 : 2; + const currentMonthIndexInRenderedMonth = monthIndex < prevMonthIndex ? 1 : 2; addDotsToCalendar(currentMonthIndexInRenderedMonth); } @@ -212,9 +200,7 @@
{#each boxes as box} -
+

{box.label}

{box.value}

@@ -259,28 +245,25 @@ {lessonData.lesson_title} - {#if lessonData.is_complete} + {#if lessonData.is_unlocked} - + {:else} - 🔒 + {/if}

- + {` ${lessonData.course_title}`}

- {#if lessonData.is_complete} + {#if lessonData.is_unlocked} {:else} -

+

No lesson on this day

{/each}