From 1b91c37c2ed92cb8b5220bcd6cdf2c6c6c14f07b Mon Sep 17 00:00:00 2001 From: Joan Nkatha Date: Thu, 26 Sep 2024 10:03:18 +0300 Subject: [PATCH] (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 Co-authored-by: Nethmi Rodrigo <34070216+NethmiRodrigo@users.noreply.github.com> --- .../add-question.modal.tsx | 31 +++++++++++++++++++ .../edit-question.modal.tsx | 27 ++++++++++++++++ src/config-schema.ts | 1 + src/types.ts | 4 +++ translations/en.json | 2 ++ 5 files changed, 65 insertions(+) diff --git a/src/components/interactive-builder/add-question.modal.tsx b/src/components/interactive-builder/add-question.modal.tsx index 4cbbb08..2aa36f4 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 = ({ programWorkflow?.uuid, ); const [programWorkflows, setProgramWorkflows] = useState>([]); + const [toggleLabelTrue, setToggleLabelTrue] = useState(''); + const [toggleLabelFalse, setToggleLabelFalse] = useState(''); const renderTypeOptions = { control: ['text'], @@ -244,6 +246,12 @@ const AddQuestionModal: React.FC = ({ programUuid: selectedProgram.uuid, workflowUuid: programWorkflow.uuid, }), + ...(renderingType === 'toggle' && { + toggleOptions: { + labelTrue: toggleLabelTrue, + labelFalse: toggleLabelFalse, + }, + }), }, validators: [], }; @@ -495,6 +503,29 @@ const AddQuestionModal: React.FC = ({ onChange={(event: React.ChangeEvent) => setRows(event.target.value)} required /> + ) : renderingType === 'toggle' ? ( +
+ ) => + setToggleLabelTrue(event.target.value) + } + placeholder={t('On')} + required + /> + ) => + setToggleLabelFalse(event.target.value) + } + placeholder={t('Off')} + required + /> +
) : 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 index 62ea687..e50ffbe 100644 --- 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 = ({ 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> = { @@ -300,6 +302,12 @@ const EditQuestionModal: React.FC = ({ : 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 = ({ onChange={(event: React.ChangeEvent) => setRows(event.target.value)} required /> + ) : fieldType === 'toggle' ? ( +
+ ) => setToggleLabelTrue(event.target.value)} + placeholder={t('on', 'On')} + required + /> + ) => setToggleLabelFalse(event.target.value)} + placeholder={t('off', 'Off')} + required + /> +
) : null} {questionToEdit.type === 'patientIdentifier' && ( 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: { diff --git a/src/types.ts b/src/types.ts index 4671698..16718ed 100644 --- 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 index 9f0cc9e..a24bf55 100644 --- 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",