From a14d4b7466da384b5f53ec7766b9291fa715d1bf Mon Sep 17 00:00:00 2001
From: Jurre Brandsen <jurre.brandsen@infosupport.com>
Date: Fri, 5 Apr 2024 11:53:41 +0200
Subject: [PATCH 1/3] unable to use the progression bar until all questions
 have been answered.

---
 src/components/mobile/progression-bar.tsx | 48 +++++++++----
 src/components/progression-bar.tsx        | 83 +++++++++++++++--------
 src/components/survey-questionnaire.tsx   | 20 +++++-
 src/components/survey-questions.tsx       |  2 +-
 src/models/types.ts                       |  1 +
 5 files changed, 109 insertions(+), 45 deletions(-)

diff --git a/src/components/mobile/progression-bar.tsx b/src/components/mobile/progression-bar.tsx
index 2204d2b..9c22e43 100644
--- a/src/components/mobile/progression-bar.tsx
+++ b/src/components/mobile/progression-bar.tsx
@@ -31,21 +31,39 @@ const MobileProgressionBar = ({ roles }: { roles: Section[] }) => {
         <DropdownMenuSeparator />
         <ScrollArea className="w-50 h-72 rounded-md border">
           {roles.map((section) => (
-            <Link href={section.href} key={section.id}>
-              <DropdownMenuCheckboxItem checked={section.current}>
-                {section.completed && (
-                  <div className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-                    <CheckIcon className="h-4 w-4 text-green-500" />{" "}
-                  </div>
-                )}
-                {section.started && !section.completed ? (
-                  <div className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-                    <DotFilledIcon className="h-4 w-4 text-orange-500" />{" "}
-                  </div>
-                ) : null}
-                {section.label}
-              </DropdownMenuCheckboxItem>
-            </Link>
+            <div key={section.id}>
+              {section.currentCompleted ? (
+                <Link href={section.href}>
+                  <DropdownMenuCheckboxItem checked={section.current}>
+                    {section.completed && (
+                      <div className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+                        <CheckIcon className="h-4 w-4 text-green-500" />{" "}
+                      </div>
+                    )}
+                    {section.started && !section.completed ? (
+                      <div className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+                        <DotFilledIcon className="h-4 w-4 text-orange-500" />{" "}
+                      </div>
+                    ) : null}
+                    {section.label}
+                  </DropdownMenuCheckboxItem>
+                </Link>
+              ) : (
+                <DropdownMenuCheckboxItem disabled>
+                  {section.completed && (
+                    <div className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+                      <CheckIcon className="h-4 w-4 text-green-500" />{" "}
+                    </div>
+                  )}
+                  {section.started && !section.completed ? (
+                    <div className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+                      <DotFilledIcon className="h-4 w-4 text-orange-500" />{" "}
+                    </div>
+                  ) : null}
+                  {section.label}
+                </DropdownMenuCheckboxItem>
+              )}
+            </div>
           ))}
         </ScrollArea>
       </DropdownMenuContent>
diff --git a/src/components/progression-bar.tsx b/src/components/progression-bar.tsx
index 6abf0dc..ec76cd1 100644
--- a/src/components/progression-bar.tsx
+++ b/src/components/progression-bar.tsx
@@ -18,33 +18,62 @@ const ProgressionBar = ({ roles }: { roles: Section[] }) => {
           {roles.map((section, index) => (
             <Fragment key={section.id}>
               {/* Circle with clickable area */}
-              <Link
-                type="submit"
-                href={section.href}
-                className="relative flex items-center justify-center"
-              >
-                <div
-                  className={`mb-1 h-6 w-6 rounded-full border-2 ${
-                    section.current
-                      ? "border-custom-secondary bg-custom-primary dark:border-custom-primary dark:bg-custom-secondary"
-                      : section.completed
-                        ? "border-green-500 bg-green-500"
-                        : section.started
-                          ? "border-orange-500 bg-orange-500"
-                          : "border-gray-300"
-                  }`}
-                ></div>
-                <div
-                  className="absolute -rotate-45 whitespace-nowrap text-xs font-semibold"
-                  style={{
-                    transformOrigin: "bottom left",
-                    top: "-22px",
-                    left: "calc(100% - 0px)",
-                  }}
-                >
-                  {section.label}
-                </div>
-              </Link>
+              <div className="relative flex items-center justify-center">
+                {section.currentCompleted ? (
+                  <Link
+                    type="submit"
+                    href={section.href}
+                    className="flex items-center justify-center"
+                  >
+                    <div
+                      className={`mb-1 h-6 w-6 rounded-full border-2 ${
+                        section.current
+                          ? "border-custom-secondary bg-custom-primary dark:border-custom-primary dark:bg-custom-secondary"
+                          : section.completed
+                            ? "border-green-500 bg-green-500"
+                            : section.started
+                              ? "border-orange-500 bg-orange-500"
+                              : "border-gray-300"
+                      }`}
+                    ></div>
+                    <div
+                      className="absolute -rotate-45 whitespace-nowrap text-xs font-semibold"
+                      style={{
+                        transformOrigin: "bottom left",
+                        top: "-22px",
+                        left: "calc(100% - 0px)",
+                      }}
+                    >
+                      {section.label}
+                    </div>
+                  </Link>
+                ) : (
+                  <div>
+                    <div
+                      className={`mb-1 h-6 w-6 rounded-full border-2 ${
+                        section.current
+                          ? "border-custom-secondary bg-custom-primary dark:border-custom-primary dark:bg-custom-secondary"
+                          : section.completed
+                            ? "border-green-500 bg-green-500"
+                            : section.started
+                              ? "border-orange-500 bg-orange-500"
+                              : "border-gray-300"
+                      }`}
+                    ></div>
+                    <div
+                      className="absolute -rotate-45 whitespace-nowrap text-xs font-semibold"
+                      style={{
+                        transformOrigin: "bottom left",
+                        top: "-22px",
+                        left: "calc(100% - 0px)",
+                      }}
+                    >
+                      {section.label}
+                    </div>
+                  </div>
+                )}
+              </div>
+
               {/* Line (except for the last section) */}
               {index !== roles.length - 1 && (
                 <div
diff --git a/src/components/survey-questionnaire.tsx b/src/components/survey-questionnaire.tsx
index 42afa61..b37ba70 100644
--- a/src/components/survey-questionnaire.tsx
+++ b/src/components/survey-questionnaire.tsx
@@ -110,11 +110,11 @@ export function SurveyQuestionnaire({
 
   // function that check if a user already has more than 1 response for a question
   function hasAnsweredAllQuestionsForRole(
-    userAnswersForRole: QuestionResult[],
+    currentAnswers: QuestionResult[],
     roleId: string,
     questions: Question[],
   ) {
-    const questionsForRole = userAnswersForRole.filter((answer) =>
+    const questionsForRole = currentAnswers.filter((answer) =>
       answer.question.roles?.some((role) => role.id === roleId),
     );
 
@@ -129,6 +129,19 @@ export function SurveyQuestionnaire({
     return answeredQuestionsForRole.length >= totalQuestionsForRole;
   }
 
+  function hasAnsweredAllQuestionsForCurrentRole(
+    form: ReturnType<typeof useGenerateFormAndSchema>["form"],
+  ) {
+    const formValues = form.getValues();
+
+    // count the number of undefined values in the form
+    const unansweredQuestions = Object.values(formValues).filter(
+      (value) => value === undefined,
+    );
+
+    return unansweredQuestions.length === 0;
+  }
+
   const selectedRolesForProgressBar = userSelectedRoles
     .sort((a, b) => {
       const roleA = a.role.toLowerCase();
@@ -152,6 +165,7 @@ export function SurveyQuestionnaire({
       started: userAnswersForRole.some((answer) =>
         answer.question.roles?.some((role) => role.id === role.id),
       ),
+      currentCompleted: hasAnsweredAllQuestionsForCurrentRole(form),
     }));
 
   const ProgressionBarComponent =
@@ -171,6 +185,8 @@ export function SurveyQuestionnaire({
     }
   }
 
+  console.log(selectedRolesForProgressBar);
+
   return (
     <div>
       <Form {...form}>
diff --git a/src/components/survey-questions.tsx b/src/components/survey-questions.tsx
index 51ef254..6c523ae 100644
--- a/src/components/survey-questions.tsx
+++ b/src/components/survey-questions.tsx
@@ -100,7 +100,7 @@ export function SurveyQuestions({
                     : "bg-slate-100 hover:bg-slate-300 dark:bg-slate-900 dark:hover:bg-slate-700"
                 }`}
               >
-                <TableCell>
+                <TableCell className="pl-2">
                   {question.questionText}
                   <FormMessage />
                 </TableCell>
diff --git a/src/models/types.ts b/src/models/types.ts
index 09fd457..ae97fd2 100644
--- a/src/models/types.ts
+++ b/src/models/types.ts
@@ -56,6 +56,7 @@ export interface Section {
   current: boolean;
   completed: boolean;
   started: boolean;
+  currentCompleted: boolean;
 }
 
 export type TransformedData = Record<

From b740f37f06f4ba5f33ef887bd55c81512d946169 Mon Sep 17 00:00:00 2001
From: Jurre Brandsen <jurre.brandsen@infosupport.com>
Date: Fri, 5 Apr 2024 12:37:16 +0200
Subject: [PATCH 2/3] fix of a bug where the completed bool was true while
 answers still needed to be answered

---
 src/components/survey-questionnaire.tsx | 22 ++++++++++++++--------
 1 file changed, 14 insertions(+), 8 deletions(-)

diff --git a/src/components/survey-questionnaire.tsx b/src/components/survey-questionnaire.tsx
index b37ba70..e43b52e 100644
--- a/src/components/survey-questionnaire.tsx
+++ b/src/components/survey-questionnaire.tsx
@@ -114,19 +114,25 @@ export function SurveyQuestionnaire({
     roleId: string,
     questions: Question[],
   ) {
-    const questionsForRole = currentAnswers.filter((answer) =>
-      answer.question.roles?.some((role) => role.id === roleId),
+    const totalQuestionsForRole = questions
+      .filter((question) => question.roleIds?.includes(roleId))
+      .map((question) => question.id);
+
+    // Get unique question IDs from totalQuestionsForRole
+    const uniqueQuestionIds = new Set(totalQuestionsForRole);
+
+    // Filter currentAnswersForRole to remove duplicates
+    const currentAnswersForRole = currentAnswers.filter(
+      (answer, index, self) =>
+        self.findIndex((a) => a.question.id === answer.question.id) === index &&
+        uniqueQuestionIds.has(answer.question.id),
     );
 
-    const totalQuestionsForRole = questions.filter((question) =>
-      question.roleIds?.some((role) => role === roleId),
-    ).length;
-
-    const answeredQuestionsForRole = questionsForRole.filter(
+    const answeredQuestionsForRole = currentAnswersForRole.filter(
       (answer) => answer.answerId !== undefined,
     );
 
-    return answeredQuestionsForRole.length >= totalQuestionsForRole;
+    return answeredQuestionsForRole.length >= totalQuestionsForRole.length;
   }
 
   function hasAnsweredAllQuestionsForCurrentRole(

From 7260561e14f58332f723f4b19fb4dba1038b919f Mon Sep 17 00:00:00 2001
From: Jurre Brandsen <jurre.brandsen@infosupport.com>
Date: Fri, 5 Apr 2024 12:40:40 +0200
Subject: [PATCH 3/3] fix of lint and typecheck

---
 src/components/ui/button.tsx | 1 -
 src/utils/role-utils.ts      | 1 +
 2 files changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
index cd80487..23c5df0 100644
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@@ -3,7 +3,6 @@ import { Slot } from "@radix-ui/react-slot";
 import { cva, type VariantProps } from "class-variance-authority";
 
 import { cn } from "~/lib/utils";
-import type { ReactNode } from "react";
 
 const buttonVariants = cva(
   "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
diff --git a/src/utils/role-utils.ts b/src/utils/role-utils.ts
index 26954be..36ce805 100644
--- a/src/utils/role-utils.ts
+++ b/src/utils/role-utils.ts
@@ -25,6 +25,7 @@ export function generateRolesWithHref(
         current: false,
         completed: false,
         started: false,
+        currentCompleted: false,
       }));
 
     return availableRoles;