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

CLASSROOMIO-T-88: Mark lesson as complete

Browse Source
This commit is contained in:
Rotimi Best
2023-08-03 02:51:02 +01:00
parent f09db20dda
commit 8cf4148703
15 changed files with 190 additions and 279 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/Chip/Text.svelte
+5 -4
View File
@@ -2,14 +2,15 @@
export let className = '';
export let value = '';
export let size = '';
export let shape = 'rounded-md';
</script>
<p
class="{className} {size === 'sm'
? 'py-1 px-1'
: 'py-2 px-2'} org-avatar {className.includes('bg-')
class="{className} {size === 'sm' ? 'py-1 px-1' : 'py-2 px-2'} org-avatar {className.includes(
'bg-'
)
? ''
: 'bg-gray-200'} rounded-md text-center"
: 'bg-gray-200'} {shape} text-center"
>
{value}
</p>
src/lib/components/Course/components/Lesson/store/lessons.ts
+21 -28
View File
@@ -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<Lesson[]> = 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<any>);
}
@@ -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;
src/lib/components/Course/components/Navigation/NavExpandable.svelte
+3 -10
View File
@@ -15,20 +15,13 @@
</script>
<div>
<div
class="item relative flex items-center {isGroupActive && 'active'}"
role="button"
<button
class="item relative flex items-center {isGroupActive && 'active'} w-full"
tabindex="0"
on:click={onClick}
>
{#if !hideSortIcon}
<CaretSortDownIcon
size={20}
class="carbon-icon-sort {isExpanded ? '' : 'carbon-icon-minimize'}"
/>
{/if}
<span class="dark:text-white font-bold">{label}</span>
</div>
</button>
{#if isExpanded}
<div class="flex flex-col">
<slot />
src/lib/components/Course/components/Navigation/index.svelte
+35 -39
View File
@@ -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;
},
},
}
}
];
}
</script>
<Settings />
<div
class="root z-10 {!show && 'hide'} {$isMobile ? 'fixed shadow-xl' : 'sticky'}"
>
<div class="root z-10 {!show && 'hide'} {$isMobile ? 'fixed shadow-xl' : 'sticky'}">
{#if show}
<div class="relative h-full dark:bg-gray-700">
<PageNav bind:title={$course.title} paddingClass="pl-2">
@@ -155,9 +151,7 @@
</slot:fragment>
<slot:fragment slot="widget">
<RoleBasedSecurity allowedRoles={[1, 2]}>
<IconButton
onClick={() => ($settingsDialog.open = !$settingsDialog.open)}
>
<IconButton onClick={() => ($settingsDialog.open = !$settingsDialog.open)}>
<SettingsIcon size={20} class="carbon-icon" />
</IconButton>
</RoleBasedSecurity>
@@ -175,13 +169,11 @@
{#if navItem.isLecture}
{#each $lessons as item, index}
<a
class="item flex items-center {(
path || $page.url.pathname
).includes(item.id) && 'active'} pl-7 py-3 {isStudent &&
!item.is_complete
class="item flex items-center {(path || $page.url.pathname).includes(item.id) &&
'active'} pl-7 py-3 {isStudent && !item.is_unlocked
? 'cursor-not-allowed'
: ''}"
href={isStudent && !item.is_complete
href={isStudent && !item.is_unlocked
? $page.url.pathname
: getLessonsRoute($course.id, item.id)}
on:click={() => {
@@ -189,17 +181,23 @@
setTimeout(() => (show = false), 500);
}
}}
aria-disabled={!item.is_unlocked}
>
<span class="course-counter">
{getLectureNo(index + 1)}
</span>
<TextChip
value={getLectureNo(index + 1)}
className="bg-blue-200 text-xs mr-2"
size="sm"
shape="rounded-full"
/>
<span>{item.title}</span>
{#if item.is_complete}
<span class="ml-2 success">
<CheckmarkFilledIcon size={20} class="carbon-icon" />
{#if !item.is_unlocked}
<span class="text-md ml-2">
<LockedIcon class="carbon-icon" />
</span>
{:else if item.is_complete}
<span class="ml-2">
<CheckmarkOutline class="carbon-icon" />
</span>
{:else}
<span class="text-md ml-2">🔒</span>
{/if}
</a>
{/each}
@@ -209,9 +207,7 @@
{/each}
</div>
<div
class="w-full footer p-3 absolute bottom-2 flex items-center justify-between"
>
<div class="w-full footer p-3 absolute bottom-2 flex items-center justify-between">
<IconButton
value="toggle"
onClick={() => goto(`${$currentOrgPath}/courses`)}
@@ -236,7 +232,7 @@
: {
title: 'Toggle sidebar',
hotkeys: ['B'],
direction: 'right',
direction: 'right'
}}
>
{#if show}
src/lib/components/Course/function.js
+3 -5
View File
@@ -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;
src/lib/components/PageBody/index.svelte
+1 -3
View File
@@ -8,9 +8,7 @@
<div class="root mt-4 mx-auto {width} {className} relative {padding}">
{#if $$slots.header}
<div
class="head dark:bg-gray-800 flex items-center justify-between sticky right-0 w-full px-3"
>
<div class="head dark:bg-gray-800 flex items-center justify-between sticky right-0 w-full px-3">
<slot name="header" />
</div>
{/if}
src/lib/utils/services/courses/clone.ts
+11 -18
View File
@@ -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<Course> {
export async function cloneCourse(courseId: string, newTitle: string): Promise<Course> {
const { data: course, error } = await fetchCourseData(courseId);
console.log(`course`, course);
src/lib/utils/services/courses/index.ts
+32 -78
View File
@@ -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;
src/lib/utils/types/dashboard.ts
+1 -1
View File
@@ -5,7 +5,7 @@ export type UserLessonDataType = {
lesson_at: string;
lesson_id: string;
lesson_title: string;
is_complete: boolean;
is_unlocked: boolean;
};
type LessonByDayType = {
src/lib/utils/types/index.ts
+2 -1
View File
@@ -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;