From d3f9bfd485f360e97bb8dcd5c83ef05d84705110 Mon Sep 17 00:00:00 2001
From: Kinotijoan <kinotijoan@gmail.com>
Date: Tue, 10 Sep 2024 10:20:40 +0300
Subject: [PATCH] Refactor : Added toggle rendering type to the interactive
 builder as well as options for the toggle

---
 .../add-question.modal.tsx                    | 31 +++++++++++++++++++
 src/config-schema.ts                          |  1 +
 2 files changed, 32 insertions(+)

diff --git a/src/components/interactive-builder/add-question.modal.tsx b/src/components/interactive-builder/add-question.modal.tsx
index 4cbbb08..ab5f511 100644
--- a/src/components/interactive-builder/add-question.modal.tsx
+++ b/src/components/interactive-builder/add-question.modal.tsx
@@ -132,6 +132,8 @@ const AddQuestionModal: React.FC<AddQuestionModalProps> = ({
     programWorkflow?.uuid,
   );
   const [programWorkflows, setProgramWorkflows] = useState<Array<ProgramWorkflow>>([]);
+  const [toggleLabelTrue, setToggleLabelTrue] = useState('');
+  const [toggleLabelFalse, setToggleLabelFalse] = useState('');
 
   const renderTypeOptions = {
     control: ['text'],
@@ -244,6 +246,12 @@ const AddQuestionModal: React.FC<AddQuestionModalProps> = ({
             programUuid: selectedProgram.uuid,
             workflowUuid: programWorkflow.uuid,
           }),
+          ...(renderingType === 'toggle' && {
+            toggleOptions: {
+              labelTrue: toggleLabelTrue,
+              labelFalse: toggleLabelFalse,
+            },
+          }),
         },
         validators: [],
       };
@@ -495,6 +503,29 @@ const AddQuestionModal: React.FC<AddQuestionModalProps> = ({
                       onChange={(event: React.ChangeEvent<HTMLInputElement>) => setRows(event.target.value)}
                       required
                     />
+                  ) : renderingType === 'toggle' ? (
+                    <div>
+                      <TextInput
+                        id="lableTrue"
+                        labelText={t('Label true', 'Label true')}
+                        value={t(toggleLabelTrue || '')}
+                        onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
+                          setToggleLabelTrue(event.target.value)
+                        }
+                        placeholder={t('On')}
+                        required
+                      />
+                      <TextInput
+                        id="lableFalse"
+                        labelText={t('Label false', 'Lable false')}
+                        value={t(toggleLabelFalse || '')}
+                        onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
+                          setToggleLabelFalse(event.target.value)
+                        }
+                        placeholder={t('Off')}
+                        required
+                      />
+                    </div>
                   ) : null}
 
                   {renderingType !== 'ui-select-extended' && (
diff --git a/src/config-schema.ts b/src/config-schema.ts
index 9af307e..13a1548 100644
--- a/src/config-schema.ts
+++ b/src/config-schema.ts
@@ -39,6 +39,7 @@ export const configSchema = {
       'text',
       'textarea',
       'ui-select-extended',
+      'toggle',
     ],
   },
   showSchemaSaveWarning: {