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

apps/dashboard/src/lib/components/Course/components/Lesson/Exercise/ViewMode.svelte

@@ -128,6 +128,7 @@
             $course.id,
             getGroupMemberId($group.people, $profile.id)
           );
+
           if (response) {
             submissionResponse = response;
           }
@@ -263,8 +264,8 @@
 {:else if !$questionnaire.questions.length}
   <Box>
     <img src="/images/empty-exercise-icon.svg" alt="Exercise svg" class="my-2.5" />
-    <h2 class="text-xl my-1.5">No question added for this exercise</h2>
-    <p class="text-sm text-center px-44">
+    <h2 class="my-1.5 text-xl">No question added for this exercise</h2>
+    <p class="px-44 text-center text-sm">
       <RoleBasedSecurity allowedRoles={[1, 2]}>
         Click the <span class="text-primary-700">Edit</span> button to add.
       </RoleBasedSecurity>
@@ -276,25 +277,25 @@
       <h2 class="my-1">{$questionnaire.title}</h2>
 
       <div class="flex items-center">
-        <p class="dark:text-white mx-2">
+        <p class="mx-2 dark:text-white">
           <strong>{$questionnaire.questions.length}</strong> questions
         </p>
         |
-        <p class="dark:text-white mx-2">
+        <p class="mx-2 dark:text-white">
           <strong>{getTotalPossibleGrade($questionnaire.questions)}</strong> points.
         </p>
         |
-        <p class="dark:text-white mx-2">All required</p>
+        <p class="mx-2 dark:text-white">All required</p>
         {#if $questionnaire.due_by}
           |
-          <p class="dark:text-white mx-2">
+          <p class="mx-2 dark:text-white">
             <strong>Due by:</strong>
             {new Date($questionnaire.due_by).toLocaleString()}
           </p>
         {/if}
       </div>
 
-      <article class="mt-3 preview prose prose-sm sm:prose p-2">
+      <article class="preview prose prose-sm sm:prose mt-3 p-2">
         {@html $questionnaire.description || 'No desription'}
       </article>
 
@@ -309,26 +310,26 @@
 {:else if $questionnaireMetaData.isFinished}
   {#if !isLoadingAutoSavedData}
     <div class="flex items-center justify-between">
-      <div class="flex flex-col lg:flex-row items-start lg:items-center lg:space-x-4 w-full">
+      <div class="flex w-full flex-col items-start lg:flex-row lg:items-center lg:space-x-4">
         <h2 class="text-xl font-normal">{$questionnaire.title}</h2>
 
         {#if STATUS.GRADED === $questionnaireMetaData.status}
           <span
-            class="status-text bg-green-700 text-white py-1 px-2 text-center"
+            class="status-text bg-green-700 px-2 py-1 text-center text-white"
             title={$t('course.navItem.lessons.exercises.all_exercises.view_mode.status_graded')}
           >
             {$t('course.navItem.lessons.exercises.all_exercises.view_mode.graded')}
           </span>
         {:else if $course.type === COURSE_TYPE.SELF_PACED}
           <span
-            class="status-text bg-green-700 text-white py-1 px-2 text-center"
+            class="status-text bg-green-700 px-2 py-1 text-center text-white"
             title={$t('course.navItem.lessons.exercises.all_exercises.view_mode.status_submitted')}
           >
             {$t('course.navItem.lessons.exercises.all_exercises.view_mode.submitted')}
           </span>
         {:else}
           <span
-            class="status-text bg-yellow-600 text-white py-1 px-2 text-center"
+            class="status-text bg-yellow-600 px-2 py-1 text-center text-white"
             title={$t('course.navItem.lessons.exercises.all_exercises.view_mode.status_pending')}
           >
             {$t('course.navItem.lessons.exercises.all_exercises.view_mode.pending')}
@@ -337,7 +338,7 @@
       </div>
       {#if STATUS.GRADED === $questionnaireMetaData.status && $course.type !== COURSE_TYPE.SELF_PACED}
         <span
-          class="p-6 border-2 border-gray-300 bg-[#F5F8FE] rounded-full h-10 w-10 flex items-center justify-center text-[#2751DA] text-sm font-semibold"
+          class="flex h-10 w-10 items-center justify-center rounded-full border-2 border-gray-300 bg-[#F5F8FE] p-6 text-sm font-semibold text-[#2751DA]"
           title={$t('course.navItem.lessons.exercises.all_exercises.view_mode.status_graded')}
         >
           {$questionnaireMetaData.finalTotalGrade}/{$questionnaireMetaData.totalPossibleGrade}
@@ -346,7 +347,7 @@
     </div>
 
     {#if $questionnaireMetaData.status === STATUS.GRADED && $questionnaireMetaData.comment && $course.type !== COURSE_TYPE.SELF_PACED}
-      <div class="flex items-center justify-between bg-primary-700 p-4 text-white rounded-sm mt-3">
+      <div class="bg-primary-700 mt-3 flex items-center justify-between rounded-sm p-4 text-white">
         <span> {$questionnaireMetaData.comment}</span>
       </div>
     {/if}

apps/dashboard/src/lib/utils/services/courses/index.ts

@@ -61,6 +61,18 @@ export async function fetchProfileCourseProgress(
   return { data, error };
 }
 
+export async function checkExercisesComplete(
+  lessonId: Lesson['id'],
+  groupMemberId: Groupmember['id']
+) {
+  const { data, error } = await supabase.rpc('check_if_student_completed_exercises', {
+    lesson_id_arg: lessonId,
+    groupmember_id_arg: groupMemberId
+  });
+
+  return { data, error };
+}
+
 const SLUG_QUERY = `
   id,
   title,

apps/dashboard/src/lib/utils/translations/de.json

@@ -43,7 +43,8 @@
     },
     "lessons": {
       "error": {
-        "try_later": "Etwas stimmt nicht. Bitte versuchen Sie es später"
+        "try_later": "Etwas stimmt nicht. Bitte versuchen Sie es später",
+        "exercise_not_complete": "Schließen Sie alle Übungen ab, um sie als abgeschlossen zu markieren"
       },
       "success": {
         "complete_marked": "Als abgeschlossen markiert",

apps/dashboard/src/lib/utils/translations/en.json

@@ -1337,7 +1337,8 @@
         "version_restored": "Version restored sucessfully"
       },
       "error": {
-        "try_later": "Something's not right - Please try later"
+        "try_later": "Something's not right - Please try later",
+        "exercise_not_complete": "Complete all exercises to mark as complete"
       }
     },
 

apps/dashboard/src/lib/utils/translations/es.json

@@ -43,7 +43,8 @@
     },
     "lessons": {
       "error": {
-        "try_later": "Algo no está bien. Inténtelo más tarde."
+        "try_later": "Algo no está bien. Inténtelo más tarde.",
+        "exercise_not_complete": "Completa todos los ejercicios para marcarlos como completos."
       },
       "success": {
         "complete_marked": "Marcado como completo",

apps/dashboard/src/lib/utils/translations/fr.json

@@ -43,7 +43,8 @@
     },
     "lessons": {
       "error": {
-        "try_later": "Quelque chose ne va pas – Veuillez réessayer plus tard"
+        "try_later": "Quelque chose ne va pas – Veuillez réessayer plus tard",
+        "exercise_not_complete": "Terminez tous les exercices pour les marquer comme terminés"
       },
       "success": {
         "complete_marked": "Marqué comme terminé",

apps/dashboard/src/lib/utils/translations/hi.json

@@ -43,7 +43,8 @@
     },
     "lessons": {
       "error": {
-        "try_later": "कुछ ठीक नहीं है - कृपया बाद में प्रयास करें"
+        "try_later": "कुछ ठीक नहीं है - कृपया बाद में प्रयास करें",
+        "exercise_not_complete": "पूर्ण के रूप में चिह्नित करने के लिए सभी अभ्यास पूर्ण करें"
       },
       "success": {
         "complete_marked": "पूर्ण के रूप में चिह्नित",

apps/dashboard/src/lib/utils/translations/pt.json

@@ -43,7 +43,8 @@
     },
     "lessons": {
       "error": {
-        "try_later": "Algo não está certo - tente mais tarde"
+        "try_later": "Algo não está certo - tente mais tarde",
+        "exercise_not_complete": "Conclua todos os exercícios para marcá-los como concluídos"
       },
       "success": {
         "complete_marked": "Marcado como concluído",

apps/dashboard/src/lib/utils/translations/ru.json

@@ -43,7 +43,8 @@
     },
     "lessons": {
       "error": {
-        "try_later": "Что-то не так. Повторите попытку позже."
+        "try_later": "Что-то не так. Повторите попытку позже.",
+        "exercise_not_complete": "Выполните все упражнения, чтобы отметить их как выполненные."
       },
       "success": {
         "complete_marked": "Помечено как завершенное",

apps/dashboard/src/lib/utils/translations/vi.json

@@ -43,7 +43,8 @@
     },
     "lessons": {
       "error": {
-        "try_later": "Đã xảy ra sự cố - Vui lòng thử lại sau"
+        "try_later": "Đã xảy ra sự cố - Vui lòng thử lại sau",
+        "exercise_not_complete": "Hoàn thành tất cả các bài tập để đánh dấu là hoàn thành"
       },
       "success": {
         "complete_marked": "Được đánh dấu là hoàn thành",

apps/dashboard/src/routes/courses/[id]/lessons/[...lessonParams]/+page.svelte

@@ -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>