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

chore: disable mark as complete if all exercises are not complete #513

Browse Source
This commit is contained in:
Rotimi Best
2024-12-23 02:31:53 +01:00
parent 39665fb65d
commit b3ca8b00a6
12 changed files with 76 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/dashboard/src/routes/courses/[id]/lessons/[...lessonParams]/+page.svelte
+34 -13
View File
@@ -3,7 +3,11 @@
import { page } from '$app/stores';
import CourseContainer from '$lib/components/CourseContainer/index.svelte';
import { env } from '$env/dynamic/public';
import { fetchLesson, updateLessonCompletion } from '$lib/utils/services/courses';
import {
fetchLesson,
updateLessonCompletion,
checkExercisesComplete
} from '$lib/utils/services/courses';
import CheckmarkOutlineIcon from 'carbon-icons-svelte/lib/CheckmarkOutline.svelte';
import CheckmarkFilledIcon from 'carbon-icons-svelte/lib/CheckmarkFilled.svelte';
import ListChecked from 'carbon-icons-svelte/lib/ListChecked.svelte';
@@ -21,13 +25,14 @@
import Exercises from '$lib/components/Course/components/Lesson/Exercises/index.svelte';
import LessonVersionHistory from '$lib/components/Course/components/Lesson/LessonVersionHistory.svelte';
import MODES from '$lib/utils/constants/mode';
import { course } from '$lib/components/Course/store';
import { group, course } from '$lib/components/Course/store';
import Download from 'carbon-icons-svelte/lib/Download.svelte';
import ResultOld from 'carbon-icons-svelte/lib/ResultOld.svelte';
import OverflowMenuVertical from 'carbon-icons-svelte/lib/OverflowMenuVertical.svelte';
import { apps } from '$lib/components/Apps/store';
import APPS_CONSTANTS from '$lib/components/Apps/constants';
import IconButton from '$lib/components/IconButton/index.svelte';
import { getGroupMemberId } from '$lib/components/Course/function';
import {
lesson,
lessons,
@@ -86,6 +91,22 @@
}
async function markLessonComplete(lessonId: string) {
const groupMemberId = getGroupMemberId($group.people, $profile.id);
const { data: areExercisesComplete, error } = await checkExercisesComplete(
lessonId,
groupMemberId
);
if (error) {
snackbar.error('snackbar.lessons.error.try_later');
return;
}
if (!areExercisesComplete) {
snackbar.error('snackbar.lessons.error.exercise_not_complete');
return;
}
isMarkingComplete = true;
let newCompletion: LessonCompletion = {
@@ -351,9 +372,9 @@
<div
class={`flex-row ${
$apps.dropdown && $apps.open
? 'absolute lg:relative top-[85px] lg:top-0 right-14 lg:right-0 z-40 rounded-md bg-gray-100 dark:bg-neutral-800 p-3 lg:p-0'
? 'absolute right-14 top-[85px] z-40 rounded-md bg-gray-100 p-3 dark:bg-neutral-800 lg:relative lg:right-0 lg:top-0 lg:p-0'
: 'hidden'
} lg:flex items-center`}
} items-center lg:flex`}
>
<IconButton
onClick={() => {
@@ -413,14 +434,14 @@
{/if}
<!-- Bottom Lesson Widget -->
<div class="absolute w-full bottom-5 flex items-center justify-center">
<div class="absolute bottom-5 flex w-full items-center justify-center">
<div
class="flex items-center gap-2 w-fit rounded-full shadow-xl bg-gray-100 dark:bg-neutral-700 px-5 py-1"
class="flex w-fit items-center gap-2 rounded-full bg-gray-100 px-5 py-1 shadow-xl dark:bg-neutral-700"
>
<button
disabled={isPrevDisabled}
class={`px-2 my-2 pr-4 border-t-0 border-b-0 border-l-0 border border-gray-300 flex items-center ${
isPrevDisabled && 'opacity-25 cursor-not-allowed'
class={`my-2 flex items-center border border-b-0 border-l-0 border-t-0 border-gray-300 px-2 pr-4 ${
isPrevDisabled && 'cursor-not-allowed opacity-25'
}`}
on:click={() => goToNextOrPrevLesson(data.lessonId, true)}
>
@@ -430,7 +451,7 @@
</button>
{#if data.isMaterialsTabActive}
<button
class="px-2 my-2 pr-4 border-t-0 border-b-0 border-l-0 border border-gray-300 flex items-center"
class="my-2 flex items-center border border-b-0 border-l-0 border-t-0 border-gray-300 px-2 pr-4"
on:click={() => goto(`${path}/exercises`)}
>
<ListChecked size={24} class="carbon-icon" />
@@ -438,14 +459,14 @@
</button>
{:else}
<button
class="px-2 my-2 pr-4 border-t-0 border-b-0 border-l-0 border border-gray-300 flex items-center"
class="my-2 flex items-center border border-b-0 border-l-0 border-t-0 border-gray-300 px-2 pr-4"
on:click={() => goto(path)}
>
<CourseIcon />
</button>
{/if}
<button
class="px-2 my-2 pr-4 border-t-0 border-b-0 border-l-0 border border-gray-300 flex items-center disabled:opacity-10 disabled:cursor-not-allowed"
class="my-2 flex items-center border border-b-0 border-l-0 border-t-0 border-gray-300 px-2 pr-4 disabled:cursor-not-allowed disabled:opacity-10"
on:click={() => handleAppClick(APPS_CONSTANTS.APPS.COMMENTS)}
disabled={$globalStore.isStudent && !$currentOrg.customization.apps.comments}
>
@@ -453,7 +474,7 @@
<span class="ml-1">{$lesson.totalComments}</span>
</button>
<button
class="px-2 my-2 pr-4 border-t-0 border-b-0 border-l-0 border border-gray-300 flex items-center"
class="my-2 flex items-center border border-b-0 border-l-0 border-t-0 border-gray-300 px-2 pr-4"
on:click={() => markLessonComplete(data.lessonId)}
disabled={isMarkingComplete}
>
@@ -465,7 +486,7 @@
</button>
<button
disabled={isNextDisabled}
class={`px-2 my-2 flex items-center ${isNextDisabled && 'opacity-25 cursor-not-allowed'}`}
class={`my-2 flex items-center px-2 ${isNextDisabled && 'cursor-not-allowed opacity-25'}`}
on:click={() => goToNextOrPrevLesson(data.lessonId, false)}
>
<span class="hidden md:block">{$t('course.navItem.lessons.next')}</span>