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

CLASSROOMIO-T-168: Mark lesson as complete

Browse Source
This commit is contained in:
Rotimi Best
2023-09-26 11:23:54 +01:00
parent ccf34e362d
commit e16dc148b1
12 changed files with 147 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/Apps/index.svelte
+1 -1
View File
@@ -50,7 +50,7 @@
});
</script>
<div class={`root ${$apps.open ? 'open dark:bg-slate-800' : 'close dark:bg-slate-800'}`}>
<div class={`root ${$apps.open ? 'open dark:bg-black' : 'close dark:bg-black'}`}>
<div class={`apps`}>
<div class="lg:hidden">
<IconButton
src/lib/components/AuthUI/index.svelte
+1 -4
View File
@@ -34,7 +34,7 @@
}
</script>
<div class="root w-full min-h-screen flex items-center justify-center">
<div class="app-background w-full min-h-screen flex items-center justify-center">
<div class="container border border-gray bg-white dark:bg-black">
<div class="flex items-center flex-col p-2 lg:px-8 lg:py-3">
{#if !showOnlyContent || showLogo}
@@ -93,9 +93,6 @@
</div>
<style>
.root {
background: radial-gradient(circle at 10% 20%, rgb(239, 246, 249) 0%, rgb(206, 239, 253) 90%);
}
.container {
width: 450px;
}
src/lib/components/Course/components/Lesson/AddLessonModal.svelte
+6 -5
View File
@@ -15,19 +15,20 @@
import { goto } from '$app/navigation';
export let openModal = false;
export let isStudent;
let errors = {};
export let isStudent = false;
let errors = {
title: ''
};
let lesson = {
id: null,
title: '',
profile: undefined,
call_url: undefined,
lesson_at: new Date(),
is_unlocked: false,
is_complete: false
is_unlocked: false
};
function getLessonOrder(id) {
function getLessonOrder(id = '') {
const index = $lessons.findIndex((lesson) => lesson.id === id);
if (index < 9) {
return '0' + (index + 1);
src/lib/components/Course/components/Lesson/functions.js → src/lib/components/Course/components/Lesson/functions.ts
+11 -2
View File
@@ -1,4 +1,6 @@
export function getUniqueValue(label) {
import type { LessonCompletion } from '$lib/utils/types';
export function getUniqueValue(label: string) {
return label.toLowerCase().replace(' ', '');
}
@@ -15,9 +17,16 @@ export function generateQuestion(questions) {
generatedQuestions.push({
...question,
name,
options,
options
});
}
return generatedQuestions;
}
export function getIsLessonComplete(completions: LessonCompletion[], profileId: string | null) {
if (!Array.isArray(completions)) return false;
return completions.find((c) => {
return c.is_complete && c.profile_id === profileId;
});
}
src/lib/components/Course/components/Lesson/store/lessons.ts
+9 -10
View File
@@ -12,15 +12,16 @@ export const lessons: Writable<Lesson[]> = writable([]);
export const lesson = writable<LessonPage>({
id: null,
totalExercises: 0,
is_complete: false,
isSaving: false,
materials: {
note: '',
slide_url: '',
videos: []
},
exercises: []
exercises: [],
lesson_completion: []
});
export const isLessonDirty = writable(false);
export function handleAddLesson() {
@@ -33,8 +34,7 @@ export function handleAddLesson() {
// profile: undefined,
call_url: undefined,
lesson_at: new Date(),
is_unlocked: false,
is_complete: false
is_unlocked: false
}
];
}) as Updater<any>);
@@ -60,12 +60,11 @@ export async function handleSaveLesson(lesson: Lesson, course_id: Course['id'])
console.log(`handleSaveLesson lesson`, lesson);
const newLesson = {
title: lesson.title,
lesson_at: lesson.lesson_at,
call_url: lesson.call_url,
teacher_id: lesson.profile ? lesson.profile.id : undefined,
lesson_at: lesson?.lesson_at,
call_url: lesson?.call_url,
teacher_id: lesson?.profile ? lesson?.profile.id : undefined,
course_id,
is_unlocked: lesson.is_unlocked,
is_complete: lesson.is_complete
is_unlocked: lesson.is_unlocked
};
let newLessonData: any[] | null = null;
@@ -85,7 +84,7 @@ export async function handleUpdateLessonMaterials(lesson: any, lessonId: Lesson[
const materials = {
...lesson.materials
};
delete materials.lesson_completion;
delete materials.profile;
delete materials.totalExercises;
src/lib/components/Course/components/Navigation/index.svelte
+18 -18
View File
@@ -1,4 +1,4 @@
<script>
<script lang="ts">
import { onMount } from 'svelte';
import { goto } from '$app/navigation';
import { page } from '$app/stores';
@@ -11,40 +11,40 @@
import TextChip from '$lib/components/Chip/Text.svelte';
import { lessons } from '../Lesson/store/lessons';
import { course } from '$lib/components/Course/store';
import { updateCourse } from '$lib/utils/services/courses';
import { NavClasses } from '$lib/utils/constants/reusableClass';
import { isMobile } from '$lib/utils/store/useMobile';
import { menu } from '$lib/components/Org/store';
import { profile } from '$lib/utils/store/user';
import { getIsLessonComplete } from '../Lesson/functions';
export let path;
export let isStudent = null;
export let path: string;
export let isStudent: boolean = false;
let show = null;
interface NavItem {
label: string;
to: string;
hideSortIcon: boolean;
isLecture?: boolean;
show?: () => boolean;
}
let show: boolean = false;
let isLessonActive = false;
const toggleSidebar = () => {
$menu.hidden = !$menu.hidden;
};
function handleMainGroupClick(href) {
function handleMainGroupClick(href: string) {
return () => {
goto(href);
toggleSidebar();
};
}
let navItems = [];
let navItems: NavItem[] = [];
function getHref(item) {
return item.to;
// return item.is_unlocked ? item.to : path || $page.url.pathname
}
function handleSaveTitle() {
updateCourse($course.id, { title: $course.title });
}
function handleMobileChange(isMobile) {
function handleMobileChange(isMobile: boolean) {
if (isMobile) show = false;
else show = true;
}
@@ -192,7 +192,7 @@
<span class="text-md ml-2" title="This lesson is locked.">
<LockedIcon class="carbon-icon dark:text-white" />
</span>
{:else if item.is_complete}
{:else if getIsLessonComplete(item.lesson_completion, $profile.id)}
<span class="ml-2" title="You have completed this lesson">
<CheckmarkFilled class="carbon-icon dark:text-white" />
</span>
src/lib/components/Navigation/app.svelte
+10 -8
View File
@@ -58,14 +58,16 @@
</li>
{#if isCoursePage}
<IconButton
onClick={() => {
goto(`${$currentOrgPath}/courses`);
}}
size="small"
>
<CourseIcon color="#fff" />
</IconButton>
<div class="hidden md:block">
<IconButton
onClick={() => {
goto(`${$currentOrgPath}/courses`);
}}
size="small"
>
<CourseIcon color="#fff" />
</IconButton>
</div>
{/if}
<a
href={getPathName(isCoursePage, $course.slug)}
src/lib/components/Navigation/index.svelte
+1 -1
View File
@@ -10,7 +10,7 @@
export let logo;
export let orgName;
export let isOrgSite = false;
export let backgroundColor = 'bg-white';
export let backgroundColor = 'bg-white dark:bg-black';
let navClass = '';
src/lib/utils/services/courses/index.ts
+18 -4
View File
@@ -1,7 +1,14 @@
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,
LessonCompletion
} from '$lib/utils/types';
import { STATUS } from '$lib/utils/constants/course';
export async function fetchCourse(courseId?: Course['id'], slug?: Course['slug']) {
@@ -36,9 +43,10 @@ export async function fetchCourse(courseId?: Course['id'], slug?: Course['slug']
is_certificate_downloadable,
certificate_theme,
lessons:lesson(
id, title,public, lesson_at, call_url, is_unlocked, is_complete, order, created_at,
id, title,public, lesson_at, call_url, is_unlocked, order, created_at,
note, videos, slide_url, call_url, totalExercises:exercise(count),
profile:teacher_id(id, avatar_url, fullname)
profile:teacher_id(id, avatar_url, fullname),
lesson_completion(id, profile_id, is_complete)
),
attendance:group_attendance(*)
`
@@ -138,7 +146,9 @@ export function deleteGroupMember(groupMemberId: Groupmember['id']) {
export function fetchLesson(lessonId: Lesson['id']) {
return supabase
.from('lesson')
.select(`id, note, videos, slide_url, call_url, totalExercises:exercise(count)`)
.select(
`id, note, videos, slide_url, call_url, totalExercises:exercise(count), lesson_completion(id, profile_id, is_complete)`
)
.eq('id', lessonId)
.single();
}
@@ -154,6 +164,10 @@ export function updateLesson(lesson: any, lessonId: Lesson['id']) {
.match({ id: lessonId });
}
export function updateLessonCompletion(completion: LessonCompletion) {
return supabase.from('lesson_completion').upsert(completion);
}
export function deleteLesson(lessonId: Lesson['id']) {
// Need to implement soft delete
return supabase.from('lesson').delete().match({ id: lessonId });
src/lib/utils/types/index.ts
+15 -5
View File
@@ -143,14 +143,14 @@ export interface Group_attendance {
groupmember?: Groupmember;
}
enum VideoType {
export enum VideoType {
youtube,
muse
}
export interface LessonPage {
id?: string | null;
totalExercises: Number;
is_complete: Boolean;
isSaving: Boolean;
materials: {
note: string;
@@ -162,6 +162,16 @@ export interface LessonPage {
}>;
};
exercises: [];
lesson_completion: LessonCompletion[];
}
export interface LessonCompletion {
id?: number;
lesson_id: string;
profile_id: string;
is_complete: boolean;
created_at: string;
updated_at: string;
}
export interface Lesson {
@@ -169,19 +179,19 @@ export interface Lesson {
videos?: []; // 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;
title: string; // 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;
course?: Course;
profile?: Profile;
lesson_completion: LessonCompletion[];
}
export interface Exercise {
src/routes/+layout.svelte
+4
View File
@@ -368,11 +368,15 @@
rgb(239, 246, 249) 0%,
rgb(206, 239, 253) 90%
);
--dark-app-background: radial-gradient(circle at 10% 20%, rgb(0 0 0) 0%, rgb(27 60 74) 90%);
}
:global(.app-background) {
background: var(--app-background);
}
:global(.dark .app-background) {
background: var(--dark-app-background);
}
:global(.bx--data-table-container) {
width: 100%;
src/routes/courses/[id]/lessons/[...lessonParams]/+page.svelte
+53 -10
View File
@@ -1,7 +1,7 @@
<script>
<script lang="ts">
import { page } from '$app/stores';
import CourseContainer from '$lib/components/CourseContainer/index.svelte';
import { fetchCourse, fetchLesson } from '$lib/utils/services/courses';
import { fetchCourse, fetchLesson, updateLessonCompletion } from '$lib/utils/services/courses';
import CheckmarkOutlineIcon from 'carbon-icons-svelte/lib/CheckmarkOutline.svelte';
import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
import { VARIANTS } from '$lib/components/PrimaryButton/constants';
@@ -26,7 +26,9 @@
import { currentOrg } from '$lib/utils/store/org';
import { snackbarStore } from '$lib/components/Snackbar/store';
import { SNACKBAR_SEVERITY } from '$lib/components/Snackbar/constants';
import { FaceSatisfied } from 'carbon-icons-svelte';
import type { LessonCompletion, LessonPage } from '$lib/utils/types';
import { profile } from '$lib/utils/store/user.js';
import { getIsLessonComplete } from '$lib/components/Course/components/Lesson/functions';
export let data;
@@ -39,7 +41,7 @@
let isLoading = false;
let isSaving = false;
function getLessonOrder(id) {
function getLessonOrder(id: string) {
const index = $lessons.findIndex((lesson) => lesson.id === id);
if (index < 10) {
@@ -56,7 +58,8 @@
if (!$course.id) {
const { data: _data } = await fetchCourse(data.courseId);
lessonData = _data?.lessons.find((lesson = { id: '' }) => lesson.id === lessonId);
lessonData = _data?.lessons.find((lesson) => lesson.id === lessonId);
setCourse(_data);
} else if (prevLessonId !== lessonId) {
const lesson = await fetchLesson(lessonId);
@@ -71,9 +74,40 @@
}
async function markLessonComplete() {
let found = false;
isMarkingComplete = true;
$lesson.is_complete = !$lesson.is_complete;
await handleSaveLesson($lesson, $course.id);
let completion: LessonCompletion = {
is_complete: true,
profile_id: $profile.id || '',
lesson_id: $lesson.id || '',
created_at: new Date().toDateString(),
updated_at: new Date().toDateString()
};
const completions: LessonCompletion[] = $lesson.lesson_completion.map((_completion) => {
if (_completion.profile_id === $profile.id) {
found = true;
_completion.is_complete = !_completion.is_complete;
completion = _completion;
}
return _completion;
});
if (!found) {
completions.push(completion);
}
$lesson.lesson_completion = completions;
$lessons = $lessons.map((l) => {
if (l.id === $lesson.id) {
l.lesson_completion = completions;
}
return l;
});
await updateLessonCompletion(completion);
isMarkingComplete = false;
}
@@ -139,11 +173,18 @@
function setLesson(lessonData, totalExercises) {
if (!lessonData) return;
let lesson_completion: LessonCompletion[] = [];
if (Array.isArray(lessonData.lesson_completion)) {
lesson_completion = [...lessonData.lesson_completion];
}
lesson.update((l) => ({
...l,
id: data.lessonId,
totalExercises,
materials: lessonData
materials: lessonData,
lesson_completion
}));
}
@@ -191,7 +232,7 @@
<div
class={`flex-row ${
$apps.dropdown && $apps.open
? 'absolute lg:relative top-[85px] lg:top-0 right-14 lg:right-0 z-40 dark:bg-slate-800 p-3 lg:p-0'
? 'absolute lg:relative top-[85px] lg:top-0 right-14 lg:right-0 z-40 dark:bg-neutral-800 p-3 lg:p-0'
: 'hidden'
} lg:flex items-center`}
>
@@ -240,7 +281,9 @@
className="mt-10"
>
<CheckmarkOutlineIcon size={24} class="carbon-icon mr-2" />
Mark as {$lesson.is_complete ? 'Incomplete' : 'Complete'}
Mark as {getIsLessonComplete($lesson.lesson_completion, $profile.id)
? 'Incomplete'
: 'Complete'}
</PrimaryButton>
</div>
</PageBody>