fix: grading input disappears on change #7 (#8)

* fix: grading input disappears on change

* fix: restore mark as complete button

src/lib/components/Course/components/Lesson/functions.ts

@@ -27,9 +27,9 @@ export function generateQuestion(questions) {
 export function getIsLessonComplete(
   completions: LessonCompletion[],
   profileId: string | undefined
-) {
+): boolean {
   if (!Array.isArray(completions)) return false;
-  return completions.find((c) => {
+  return completions.some((c) => {
     return c.is_complete && c.profile_id === profileId;
   });
 }

src/lib/components/Question/CheckboxQuestion/index.svelte

@@ -72,7 +72,7 @@
         </span>
       </svelte:fragment>
     </HtmlRender>
-    <Grade {gradeMax} {grade} {disableGrading} />
+    <Grade {gradeMax} bind:grade {disableGrading} />
   </div>
 
   {#if code}

src/lib/components/Question/Grade.svelte

@@ -5,7 +5,7 @@
   export let grade: number | undefined;
 </script>
 
-{#if typeof grade === 'number'}
+{#if typeof grade !== 'undefined'}
   <div class="flex items-center">
     <TextField
       placeholder="Points"

src/lib/components/Question/RadioQuestion/index.svelte

@@ -66,15 +66,13 @@
   <div class="flex items-center justify-between">
     <HtmlRender className="mt-4">
       <svelte:fragment slot="content">
-        <span
-          class="dark:text-white flex gap-1 {labelClassName} {typeof grade === 'number' && 'w-3/4'}"
-        >
+        <span class="dark:text-white flex items-center gap-1 {labelClassName}">
           <h3>{index}</h3>
           <h3>{title}</h3>
         </span>
       </svelte:fragment>
     </HtmlRender>
-    <Grade {gradeMax} {grade} {disableGrading} />
+    <Grade {gradeMax} bind:grade {disableGrading} />
   </div>
 
   {#if code}

src/lib/components/Question/TextareaQuestion/index.svelte

@@ -44,7 +44,7 @@
         </span>
       </svelte:fragment>
     </HtmlRender>
-    <Grade {gradeMax} {grade} {disableGrading} />
+    <Grade {gradeMax} bind:grade {disableGrading} />
   </div>
 
   {#if code}

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

@@ -43,6 +43,7 @@
   let isLoading = false;
   let isSaving = false;
   let isStudent = true;
+  let isLessonComplete = false;
 
   function getLessonOrder(id: string) {
     const index = $lessons.findIndex((lesson) => lesson.id === id);
@@ -211,6 +212,8 @@
     mode = MODES.view;
     fetchReqData(data.lessonId, data.isMaterialsTabActive);
   }
+
+  $: isLessonComplete = getIsLessonComplete($lesson.lesson_completion, $profile.id);
 </script>
 
 <CourseContainer
@@ -294,6 +297,22 @@
       className="overflow-x-hidden"
     >
       <Materials lessonId={data.lessonId} {mode} {prevMode} {toggleMode} bind:isSaving />
+      <div class="w-full hidden lg:flex flex-row-reverse mt-10">
+        <PrimaryButton
+          onClick={() => markLessonComplete(data.lessonId)}
+          isLoading={isMarkingComplete}
+          isDisabled={isMarkingComplete}
+          variant={VARIANTS.OUTLINED}
+          className="mt-10"
+        >
+          {#if isLessonComplete}
+            <CheckmarkFilledIcon size={24} class="carbon-icon text-primary-600 mr-2" />
+          {:else}
+            <CheckmarkOutlineIcon size={24} class="carbon-icon mr-2" />
+          {/if}
+          Mark as {isLessonComplete ? 'Incomplete' : 'Complete'}
+        </PrimaryButton>
+      </div>
     </PageBody>
   {/if}
 
@@ -330,7 +349,7 @@
         on:click={() => markLessonComplete(data.lessonId)}
         disabled={isMarkingComplete}
       >
-        {#if getIsLessonComplete($lesson.lesson_completion, $profile.id)}
+        {#if isLessonComplete}
           <CheckmarkFilledIcon size={24} class="carbon-icon text-primary-600" />
         {:else}
           <CheckmarkOutlineIcon size={24} class="carbon-icon" />

src/routes/courses/[id]/submissions/+page.svelte

@@ -156,6 +156,7 @@
       };
 
       sendEmail(submissionIdData[itemToWithNewStatus.id]);
+
       updateSubmission({
         id: itemToWithNewStatus.id,
         status_id: itemToWithNewStatus.statusId