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

* Refactor : Added toggle rendering type to the interactive builder as well as options for the toggle * Refactor: Add toggle rendering options to interactive builder * Refactor: Added the toggle renderType to the edit-question.modal * Refactor: Update toggle label placeholders in edit-question.modal * Refactor: Update toggle label placeholders and add toggle rendering options - Updated the toggle label placeholders in the edit-question.modal - Added toggle rendering options to the interactive builder - Modified the translations in en.json to include labelFalse, labelPlaceholder, and labelTrue - Added "Off" and "On" translations in en.json * Refactor: Update toggle label placeholders and initialize toggle labels in edit-question.modal * Update src/components/interactive-builder/add-question.modal.tsx * Update src/components/interactive-builder/add-question.modal.tsx * Update src/components/interactive-builder/add-question.modal.tsx * Update src/components/interactive-builder/add-question.modal.tsx * Update translations * Update translations/en.json --------- Co-authored-by: CynthiaKamau <[email protected]> Co-authored-by: Nethmi Rodrigo <[email protected]>
openmrs · Sep 26, 2024 · 1b91c37 · 1b91c37
1 parent 675bdff
commit 1b91c37
Show file tree

Hide file tree

Showing 5 changed files with 65 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="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' && (

diff --git a/src/components/interactive-builder/edit-question.modal.tsx b/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' && (

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: {

diff --git a/src/types.ts b/src/types.ts
@@ -145,6 +145,10 @@ export interface QuestionOptions {
   showDate?: string;
   programUuid?: string;
   workflowUuid?: string;
+  toggleOptions?: {
+    labelTrue: string;
+    labelFalse: string;
+  };
 }
 
 export interface Answer {

diff --git a/translations/en.json b/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",