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",