Merge pull request #470 from Bootstrap-Academy/feature/fix-quiz-progress-counter

Fix solved quiz counter on solve views

Author: TheMorpheus407

pages/matchings/solve-[id].vue

@@ -42,8 +42,8 @@
               >:
               {{
                 t("Headings.AmountSolvedQuizzes", {
-                  amount: arrayOfSubtasks.filter((quiz: any) => !quiz.solved).length,
-                  total: arrayOfSubtasks?.length,
+                  amount: solvedSubtaskCount,
+                  total: totalSubtaskCount,
                 })
               }}
             </p>
@@ -98,13 +98,7 @@
         />
       </div>
     </main>
-    <div
-      v-if="
-        !loading &&
-        quizzesToShow.length > 0 &&
-        arrayOfSubtasks.filter((quiz: any) => !quiz.solved).length == 0
-      "
-    >
+    <div v-if="!loading && quizzesToShow.length > 0 && unsolvedSubtaskCount === 0">
       <CheckCircleIcon class="mx-auto mb-8 h-20 w-20 text-accent" />
       <p class="mb-20 w-full text-center text-xl">
         {{ t("Headings.AllSolved") }}
@@ -155,6 +149,12 @@ const buttonOptions = [
   { name: "Buttons.Own" },
 ];
 
+const totalSubtaskCount = computed(() => arrayOfSubtasks.value.length);
+const solvedSubtaskCount = computed(
+  () => arrayOfSubtasks.value.filter((quiz: any) => quiz.solved).length
+);
+const unsolvedSubtaskCount = computed(() => totalSubtaskCount.value - solvedSubtaskCount.value);
+
 const id: any = computed(() => route?.params?.id ?? "");
 const querySubTaskId: any = computed(() => route.query?.querySubTaskId ?? "");
 const taskId = computed(() => route.query?.taskId ?? "");

pages/quizzes/solve-[id].vue

@@ -42,8 +42,8 @@
               >:
               {{
                 t("Headings.AmountSolvedQuizzes", {
-                  amount: arrayOfSubtasks.filter((quiz: any) => !quiz.solved).length,
-                  total: arrayOfSubtasks?.length,
+                  amount: solvedSubtaskCount,
+                  total: totalSubtaskCount,
                 })
               }}
             </p>
@@ -99,13 +99,7 @@
         />
       </div>
     </main>
-    <div
-      v-if="
-        !loading &&
-        quizzesToShow.length > 0 &&
-        arrayOfSubtasks.filter((quiz: any) => !quiz.solved).length == 0
-      "
-    >
+    <div v-if="!loading && quizzesToShow.length > 0 && unsolvedSubtaskCount === 0">
       <CheckCircleIcon class="mx-auto mb-8 h-20 w-20 text-accent" />
       <p class="mb-20 w-full text-center text-xl">
         {{ t("Headings.AllSolved") }}
@@ -329,6 +323,12 @@ export default defineComponent({
       return quiz.creator === user.value?.id;
     }
 
+    const totalSubtaskCount = computed(() => arrayOfSubtasks.value.length);
+    const solvedSubtaskCount = computed(
+      () => arrayOfSubtasks.value.filter((quiz: any) => quiz.solved).length
+    );
+    const unsolvedSubtaskCount = computed(() => totalSubtaskCount.value - solvedSubtaskCount.value);
+
     function sortQuizzes() {
       return quizzesToShow.value.sort(
         (
@@ -406,6 +406,9 @@ export default defineComponent({
       breadcrumbs,
       querySubTaskId,
       sortQuizzes,
+      totalSubtaskCount,
+      solvedSubtaskCount,
+      unsolvedSubtaskCount,
     };
   },
 });