Add required question functionality

DevLeonardoCommunity · Apr 28, 2024 · 7199925 · 7199925
1 parent e0f31dc
commit 7199925
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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>;