Refactor : Added toggle rendering type to the interactive builder as …

…well as options for the toggle
openmrs · Sep 10, 2024 · d3f9bfd · d3f9bfd
1 parent cd3a8ed
commit d3f9bfd
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 0 deletions.
diff --git 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
@@ -39,6 +39,7 @@ export const configSchema = {
       'text',
       'textarea',
       'ui-select-extended',
+      'toggle',
     ],
   },
   showSchemaSaveWarning: {