From 021fe196ac917cf0d78bfa51416870a6a2d765b9 Mon Sep 17 00:00:00 2001
From: Rotimi Best <best@classroomio.com>
Date: Thu, 9 Nov 2023 17:09:09 +0000
Subject: [PATCH] fix: grading input disappears on change #7 (#8)

* fix: grading input disappears on change

* fix: restore mark as complete button
---
 .../Course/components/Lesson/functions.ts     |  4 ++--
 .../Question/CheckboxQuestion/index.svelte    |  2 +-
 src/lib/components/Question/Grade.svelte      |  2 +-
 .../Question/RadioQuestion/index.svelte       |  6 ++----
 .../Question/TextareaQuestion/index.svelte    |  2 +-
 .../lessons/[...lessonParams]/+page.svelte    | 21 ++++++++++++++++++-
 .../courses/[id]/submissions/+page.svelte     |  1 +
 7 files changed, 28 insertions(+), 10 deletions(-)

diff --git a/src/lib/components/Course/components/Lesson/functions.ts b/src/lib/components/Course/components/Lesson/functions.ts
index 7a2374a3..4edd5e99 100644
--- a/src/lib/components/Course/components/Lesson/functions.ts
+++ b/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;
   });
 }
diff --git a/src/lib/components/Question/CheckboxQuestion/index.svelte b/src/lib/components/Question/CheckboxQuestion/index.svelte
index 3ed1226f..5d386984 100644
--- a/src/lib/components/Question/CheckboxQuestion/index.svelte
+++ b/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}
diff --git a/src/lib/components/Question/Grade.svelte b/src/lib/components/Question/Grade.svelte
index 9f371e19..17ce9c0b 100644
--- a/src/lib/components/Question/Grade.svelte
+++ b/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"
diff --git a/src/lib/components/Question/RadioQuestion/index.svelte b/src/lib/components/Question/RadioQuestion/index.svelte
index d64cc802..63aef233 100644
--- a/src/lib/components/Question/RadioQuestion/index.svelte
+++ b/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}
diff --git a/src/lib/components/Question/TextareaQuestion/index.svelte b/src/lib/components/Question/TextareaQuestion/index.svelte
index 0612188a..77a32604 100644
--- a/src/lib/components/Question/TextareaQuestion/index.svelte
+++ b/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}
diff --git a/src/routes/courses/[id]/lessons/[...lessonParams]/+page.svelte b/src/routes/courses/[id]/lessons/[...lessonParams]/+page.svelte
index 908d72d7..eee0d9de 100644
--- a/src/routes/courses/[id]/lessons/[...lessonParams]/+page.svelte
+++ b/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" />
diff --git a/src/routes/courses/[id]/submissions/+page.svelte b/src/routes/courses/[id]/submissions/+page.svelte
index b5c6f628..7eca71e3 100644
--- a/src/routes/courses/[id]/submissions/+page.svelte
+++ b/src/routes/courses/[id]/submissions/+page.svelte
@@ -156,6 +156,7 @@
       };
 
       sendEmail(submissionIdData[itemToWithNewStatus.id]);
+
       updateSubmission({
         id: itemToWithNewStatus.id,
         status_id: itemToWithNewStatus.statusId