From 7199925f3b0783e2e383af9e3542bbffaedefe62 Mon Sep 17 00:00:00 2001
From: Leonardo Montini <lion.48m@gmail.com>
Date: Sun, 28 Apr 2024 18:06:19 +0200
Subject: [PATCH] Add required question functionality

---
 .../question-blocks/choice.tsx                | 13 +++++++++++++
 .../survey-generator/question-blocks/text.tsx | 19 ++++++++++++++++++-
 .../survey-generator/question-card.tsx        |  2 +-
 src/types/survey.ts                           |  2 ++
 4 files changed, 34 insertions(+), 2 deletions(-)

diff --git a/src/components/survey-generator/question-blocks/choice.tsx b/src/components/survey-generator/question-blocks/choice.tsx
index 477e398..c4f40ab 100644
--- a/src/components/survey-generator/question-blocks/choice.tsx
+++ b/src/components/survey-generator/question-blocks/choice.tsx
@@ -119,6 +119,19 @@ export const ChoiceFormField = ({ questionIndex, form }: Props) => {
           }}
         />
         <QuestionCardTitle>Choice Question</QuestionCardTitle>
+        <form.Field
+          name={`questions[${questionIndex}].required`}
+          children={(field) => (
+            <Button
+              variant={field.state.value ? "destructive" : "outline"}
+              size="sm"
+              onClick={() => field.setValue(!field.state.value)}
+              className="ml-auto"
+            >
+              {field.state.value ? "Required" : "Optional"}
+            </Button>
+          )}
+        />
       </QuestionCardHeader>
       <form.Field
         name={`questions[${questionIndex}].question`}
diff --git a/src/components/survey-generator/question-blocks/text.tsx b/src/components/survey-generator/question-blocks/text.tsx
index 050bd5f..f6ee1ef 100644
--- a/src/components/survey-generator/question-blocks/text.tsx
+++ b/src/components/survey-generator/question-blocks/text.tsx
@@ -1,9 +1,11 @@
+import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { SurveyDefinition } from "@/types/survey";
 import { FormApi } from "@tanstack/react-form";
 import {
   QuestionCard,
   QuestionCardDeleteButton,
+  QuestionCardHeader,
   QuestionCardItem,
   QuestionCardTitle,
 } from "../question-card";
@@ -21,7 +23,22 @@ export const TextFormField = ({ questionIndex, form }: Props) => {
       <QuestionCardDeleteButton
         onClick={() => form.removeFieldValue(`questions`, questionIndex)}
       />
-      <QuestionCardTitle>Text Question</QuestionCardTitle>
+      <QuestionCardHeader>
+        <QuestionCardTitle>Text Question</QuestionCardTitle>
+        <form.Field
+          name={`questions[${questionIndex}].required`}
+          children={(field) => (
+            <Button
+              variant={field.state.value ? "destructive" : "outline"}
+              size="sm"
+              onClick={() => field.setValue(!field.state.value)}
+              className="ml-auto"
+            >
+              {field.state.value ? "Required" : "Optional"}
+            </Button>
+          )}
+        />
+      </QuestionCardHeader>
       <form.Field
         name={`questions[${questionIndex}].question`}
         children={(field) => (
diff --git a/src/components/survey-generator/question-card.tsx b/src/components/survey-generator/question-card.tsx
index 704526a..707a86e 100644
--- a/src/components/survey-generator/question-card.tsx
+++ b/src/components/survey-generator/question-card.tsx
@@ -30,7 +30,7 @@ const QuestionCardHeader = React.forwardRef<
   <div
     ref={ref}
     className={cn(
-      "grid grid-flow-col justify-center items-center w-full",
+      "grid grid-flow-col justify-center items-center w-full mt-8",
       Children.count(props.children) === 1 ? "grid-cols-1" : "grid-cols-3",
       className
     )}
diff --git a/src/types/survey.ts b/src/types/survey.ts
index 7a19573..dca3133 100644
--- a/src/types/survey.ts
+++ b/src/types/survey.ts
@@ -12,6 +12,7 @@ export const TextQuestion = v.merge([
     question: v.string([
       v.minLength(3, "Question must be at least 3 characters"),
     ]),
+    required: v.boolean(), // Added required field
   }),
 ]);
 export type TextQuestion = v.Output<typeof TextQuestion>;
@@ -37,6 +38,7 @@ export const ChoiceQuestion = v.merge([
       }),
       [v.minLength(2, "There must be at least 2 options")]
     ),
+    required: v.boolean(), // Added required field
   }),
 ]);
 export type ChoiceQuestion = v.Output<typeof ChoiceQuestion>;