(feat) O3-3947: Add toggle type questions to interactive builder

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' && (

src/components/interactive-builder/edit-question.modal.tsx

@@ -149,6 +149,8 @@ const EditQuestionModal: React.FC<EditQuestionModalProps> = ({
     questionToEdit?.questionOptions.concept &&
     questionToEdit?.questionOptions?.concept !== selectedConcept?.uuid;
   const [addInlineDate, setAddInlineDate] = useState(false);
+  const [toggleLabelTrue, setToggleLabelTrue] = useState('');
+  const [toggleLabelFalse, setToggleLabelFalse] = useState('');
 
   // Maps the data type of a concept to a date picker type.
   const datePickerTypeOptions: Record<string, Array<DatePickerTypeOption>> = {
@@ -300,6 +302,12 @@ const EditQuestionModal: React.FC<EditQuestionModalProps> = ({
             : questionToEdit.questionOptions.attributeType,
           ...(selectedProgram && { programUuid: selectedProgram.uuid }),
           ...(programWorkflow && { workflowUuid: programWorkflow.uuid }),
+          ...(fieldType === 'toggle' && {
+            toggleOptions: {
+              labelTrue: toggleLabelTrue,
+              labelFalse: toggleLabelFalse,
+            },
+          }),
         },
       };
 
@@ -463,6 +471,25 @@ const EditQuestionModal: React.FC<EditQuestionModalProps> = ({
                 onChange={(event: React.ChangeEvent<HTMLInputElement>) => setRows(event.target.value)}
                 required
               />
+            ) : fieldType === '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}
 
             {questionToEdit.type === 'patientIdentifier' && (

src/config-schema.ts

@@ -39,6 +39,7 @@ export const configSchema = {
       'text',
       'textarea',
       'ui-select-extended',
+      'toggle',
     ],
   },
   showSchemaSaveWarning: {

translations/en.json

@@ -113,6 +113,8 @@
   "interactiveBuilderHelperText": "The Interactive Builder lets you build your form schema without writing JSON code. The Preview tab automatically updates as you build your form. When done, click Save Form to save your form.",
   "invalidVersionWarning": "Version can only start with with a number",
   "isQuestionRequiredOrOptional": "Is this question a required or optional field? Required fields must be answered before the form can be submitted.",
+  "Label false": "Lable false",
+  "Label true": "Label true",
   "labelPlaceholder": "e.g. Type of Anaesthesia",
   "lastEditedBy": "Last Edited By",
   "loading": "Loading",
@@ -129,6 +131,8 @@
   "noMatchingFormsToDisplay": "No matching forms to display",
   "noSchemaLoaded": "No schema loaded",
   "noValidationErrorsFound": "No validation errors found",
+  "Off": "",
+  "On": "",
   "optional": "Optional",
   "pageCreated": "New page created",
   "pageDeleted": "Page deleted",