[#556] Add show as larger input field setting in question input

akvo · Dec 23, 2024 · 1186d0f · 1186d0f
1 parent 8e43f36
commit 1186d0f
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 0 deletions.
diff --git a/frontend/src/components/survey-editor/QuestionEditor.jsx b/frontend/src/components/survey-editor/QuestionEditor.jsx
@@ -121,6 +121,7 @@ const QuestionEditor = ({
   const [activeLang, setActiveLang] = useState(null);
   const [allowNA, setAllowNA] = useState(false);
   const [isRepeatIdentifierValue, setIsRepeatIdentifierValue] = useState(false);
+  const [showAsTextarea, setShowAsTextarea] = useState(false);
 
   // handle when form languages updated
   useEffect(() => {
@@ -252,6 +253,9 @@ const QuestionEditor = ({
         if (key === "is_repeat_identifier") {
           setIsRepeatIdentifierValue(value);
         }
+        if (key === "show_as_textarea") {
+          setShowAsTextarea(value);
+        }
       });
     }
   }, [question, form, qId]);
@@ -424,6 +428,8 @@ const QuestionEditor = ({
                         setAllowNA={setAllowNA}
                         isRepeatIdentifierValue={isRepeatIdentifierValue}
                         setIsRepeatIdentifierValue={setIsRepeatIdentifierValue}
+                        showAsTextarea={showAsTextarea}
+                        setShowAsTextarea={setShowAsTextarea}
                       />
                       <div className="question-button-wrapper">
                         <Space align="center">

diff --git a/frontend/src/components/survey-editor/QuestionSetting.jsx b/frontend/src/components/survey-editor/QuestionSetting.jsx
@@ -56,6 +56,8 @@ const QuestionSetting = ({
   setAllowNA,
   isRepeatIdentifierValue,
   setIsRepeatIdentifierValue,
+  showAsTextarea,
+  setShowAsTextarea,
 }) => {
   const [deactivatePopconfirmMessage, setDeactivatePopconfirmMessage] =
     useState("");
@@ -269,6 +271,14 @@ const QuestionSetting = ({
     handleFormOnValuesChange(fieldValue, form?.getFieldsValue());
   };
 
+  const handleShowAsTextareaChange = (val, field) => {
+    const { checked } = val.target;
+    const fieldValue = { [field]: checked };
+    form.setFieldsValue(fieldValue);
+    setShowAsTextarea(checked);
+    handleFormOnValuesChange(fieldValue, form?.getFieldsValue());
+  };
+
   const handleDatapointNameChange = (val, field) => {
     const { checked } = val.target;
     const fieldValue = { [field]: checked };
@@ -542,6 +552,28 @@ const QuestionSetting = ({
                 />
               </div>
             </Space>
+            {
+              // setting to show input question as text area
+              currentQuestionType === "input" && (
+                <div className="field-wrapper" style={{ marginTop: "20px" }}>
+                  <Form.Item name={`question-${qid}-show_as_textarea`}>
+                    <Checkbox
+                      key={`question-${qid}-show_as_textarea-checkbox`}
+                      checked={showAsTextarea}
+                      onChange={(val) =>
+                        handleShowAsTextareaChange(
+                          val,
+                          `question-${qid}-show_as_textarea`
+                        )
+                      }
+                    >
+                      {" "}
+                      Show as larger input field{" "}
+                    </Checkbox>
+                  </Form.Item>
+                </div>
+              )
+            }
             {
               // Set question as datapoint/display name
               datapointNameQuestionType.includes(currentQuestionType) && (

diff --git a/frontend/src/components/survey-editor/QuestionTabContent.jsx b/frontend/src/components/survey-editor/QuestionTabContent.jsx
@@ -29,6 +29,8 @@ const QuestionTabContent = ({
   setAllowNA,
   isRepeatIdentifierValue,
   setIsRepeatIdentifierValue,
+  showAsTextarea,
+  setShowAsTextarea,
 }) => {
   switch (activeSetting) {
     case "translation":
@@ -63,6 +65,8 @@ const QuestionTabContent = ({
           setAllowNA={setAllowNA}
           isRepeatIdentifierValue={isRepeatIdentifierValue}
           setIsRepeatIdentifierValue={setIsRepeatIdentifierValue}
+          showAsTextarea={showAsTextarea}
+          setShowAsTextarea={setShowAsTextarea}
         />
       );
     default: