(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="labelTrue"
+                        labelText={t('labelTrue', 'Label true')}
+                        value={t(toggleLabelTrue || '')}
+                        onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
+                          setToggleLabelTrue(event.target.value)
+                        }
+                        placeholder={t('On')}
+                        required
+                      />
+                      <TextInput
+                        id="labelFalse"
+                        labelText={t('labelFalse', 'Label 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(questionToEdit?.questionOptions?.toggleOptions?.labelTrue);
+  const [toggleLabelFalse, setToggleLabelFalse] = useState(questionToEdit?.questionOptions?.toggleOptions?.labelFalse);
 
   // 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('labelTrue', 'Label true')}
+                  value={t(toggleLabelTrue || '')}
+                  onChange={(event: React.ChangeEvent<HTMLInputElement>) => setToggleLabelTrue(event.target.value)}
+                  placeholder={t('on', 'On')}
+                  required
+                />
+                <TextInput
+                  id="lableFalse"
+                  labelText={t('labelFalse', 'Label false')}
+                  value={t(toggleLabelFalse || '')}
+                  onChange={(event: React.ChangeEvent<HTMLInputElement>) => setToggleLabelFalse(event.target.value)}
+                  placeholder={t('off', '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: {

src/types.ts

@@ -145,6 +145,10 @@ export interface QuestionOptions {
   showDate?: string;
   programUuid?: string;
   workflowUuid?: string;
+  toggleOptions?: {
+    labelTrue: string;
+    labelFalse: string;
+  };
 }
 
 export interface Answer {

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.",
+  "labelTrue": "Label true",
+  "labelFalse": "Label false",
   "labelPlaceholder": "e.g. Type of Anaesthesia",
   "lastEditedBy": "Last Edited By",
   "loading": "Loading",