diff --git a/packages/esm-patient-registration-app/src/patient-registration/field/dob/dob.component.tsx b/packages/esm-patient-registration-app/src/patient-registration/field/dob/dob.component.tsx index 7b1500bf2..6599103ec 100644 --- a/packages/esm-patient-registration-app/src/patient-registration/field/dob/dob.component.tsx +++ b/packages/esm-patient-registration-app/src/patient-registration/field/dob/dob.component.tsx @@ -30,7 +30,7 @@ export const DobField: React.FC = () => { const [birthdate, birthdateMeta] = useField('birthdate'); const [yearsEstimated, yearsEstimateMeta] = useField('yearsEstimated'); const [monthsEstimated, monthsEstimateMeta] = useField('monthsEstimated'); - const { setFieldValue } = useContext(PatientRegistrationContext); + const { setFieldValue, setFieldTouched } = useContext(PatientRegistrationContext); const today = new Date(); const onToggle = useCallback( @@ -39,6 +39,7 @@ export const DobField: React.FC = () => { setFieldValue('birthdate', ''); setFieldValue('yearsEstimated', 0); setFieldValue('monthsEstimated', ''); + setFieldTouched('birthdateEstimated', true, false); }, [setFieldValue], ); @@ -46,8 +47,9 @@ export const DobField: React.FC = () => { const onDateChange = useCallback( (birthdate: Date) => { setFieldValue('birthdate', birthdate); + setFieldTouched('birthdate', true, false); }, - [setFieldValue], + [setFieldValue, setFieldTouched], ); const onEstimatedYearsChange = useCallback( @@ -80,7 +82,10 @@ export const DobField: React.FC = () => { setFieldValue('yearsEstimated', years); setFieldValue('monthsEstimated', months > 0 ? months : ''); setFieldValue('birthdate', calcBirthdate(years, months, dateOfBirth)); - }, [setFieldValue, monthsEstimateMeta, yearsEstimateMeta, dateOfBirth]); + setFieldTouched('yearsEstimated', true, false); + setFieldTouched('monthsEstimated', true, false); + setFieldTouched('birthdate', true, false); + }, [setFieldValue, setFieldTouched, monthsEstimateMeta, yearsEstimateMeta, dateOfBirth]); return (
@@ -103,6 +108,7 @@ export const DobField: React.FC = () => { id="birthdate" {...birthdate} onChange={onDateChange} + onBlur={() => setFieldTouched('birthdate', true, false)} maxDate={today} labelText={t('dateOfBirthLabelText', 'Date of birth')} isInvalid={!!(birthdateMeta.touched && birthdateMeta.error)} @@ -125,7 +131,11 @@ export const DobField: React.FC = () => { min={0} required {...yearsEstimated} - onBlur={updateBirthdate} + onBlur={(e) => { + yearsEstimated.onBlur(e); + setFieldTouched('yearsEstimated', true, false); + updateBirthdate(); + }} />
@@ -141,7 +151,11 @@ export const DobField: React.FC = () => { min={0} {...monthsEstimated} required={!yearsEstimateMeta.value} - onBlur={updateBirthdate} + onBlur={(e) => { + monthsEstimated.onBlur(e); + setFieldTouched('monthsEstimated', true, false); + updateBirthdate(); + }} />
diff --git a/packages/esm-patient-registration-app/src/patient-registration/field/gender/gender-field.component.tsx b/packages/esm-patient-registration-app/src/patient-registration/field/gender/gender-field.component.tsx index 9052b0574..75fa4663a 100644 --- a/packages/esm-patient-registration-app/src/patient-registration/field/gender/gender-field.component.tsx +++ b/packages/esm-patient-registration-app/src/patient-registration/field/gender/gender-field.component.tsx @@ -11,11 +11,12 @@ export const GenderField: React.FC = () => { const { fieldConfigurations } = useConfig(); const { t } = useTranslation(); const [field, meta] = useField('gender'); - const { setFieldValue } = useContext(PatientRegistrationContext); + const { setFieldValue, setFieldTouched } = useContext(PatientRegistrationContext); const fieldConfigs = fieldConfigurations?.gender; const setGender = (gender: string) => { setFieldValue('gender', gender); + setFieldTouched('gender', true, false); }; /** * DO NOT REMOVE THIS COMMENT HERE, ADDS TRANSLATION FOR SEX OPTIONS diff --git a/packages/esm-patient-registration-app/src/patient-registration/field/gender/gender-field.test.tsx b/packages/esm-patient-registration-app/src/patient-registration/field/gender/gender-field.test.tsx index a83591b60..92fbf407a 100644 --- a/packages/esm-patient-registration-app/src/patient-registration/field/gender/gender-field.test.tsx +++ b/packages/esm-patient-registration-app/src/patient-registration/field/gender/gender-field.test.tsx @@ -12,6 +12,7 @@ jest.mock('react', () => ({ ...(jest.requireActual('react') as any), useContext: jest.fn(() => ({ setFieldValue: jest.fn(), + setFieldTouched: jest.fn(), })), })); diff --git a/packages/esm-patient-registration-app/src/patient-registration/field/name/name-field.component.tsx b/packages/esm-patient-registration-app/src/patient-registration/field/name/name-field.component.tsx index 4095e4440..f2b4e2147 100644 --- a/packages/esm-patient-registration-app/src/patient-registration/field/name/name-field.component.tsx +++ b/packages/esm-patient-registration-app/src/patient-registration/field/name/name-field.component.tsx @@ -21,7 +21,7 @@ function checkNumber(value: string) { export const NameField = () => { const { t } = useTranslation(); - const { setCapturePhotoProps, currentPhoto, setFieldValue } = useContext(PatientRegistrationContext); + const { setCapturePhotoProps, currentPhoto, setFieldValue, setFieldTouched } = useContext(PatientRegistrationContext); const { fieldConfigurations: { name: { @@ -48,6 +48,7 @@ export const NameField = () => { imageData: dataUri, dateTime: photoDateTime, }); + setFieldTouched('photo', true, false); } }, [setCapturePhotoProps], @@ -63,6 +64,9 @@ export const NameField = () => { setFieldValue('familyName', defaultUnknownFamilyName); setUnknownPatient('true'); } + setFieldTouched('givenName', true); + setFieldTouched('familyName', true); + setFieldTouched(`attributes.${unidentifiedPatientAttributeTypeUuid}`, true, false); }; const firstNameField = ( diff --git a/packages/esm-patient-registration-app/src/patient-registration/patient-registration.component.tsx b/packages/esm-patient-registration-app/src/patient-registration/patient-registration.component.tsx index 2db6ba576..55b250bda 100644 --- a/packages/esm-patient-registration-app/src/patient-registration/patient-registration.component.tsx +++ b/packages/esm-patient-registration-app/src/patient-registration/patient-registration.component.tsx @@ -161,7 +161,7 @@ export const PatientRegistration: React.FC = ({ savePa onSubmit={onFormSubmit}> {(props) => (
- + 0} redirect={target} />
diff --git a/packages/esm-patient-registration-app/src/routes.json b/packages/esm-patient-registration-app/src/routes.json index 8e55b60df..486834b48 100644 --- a/packages/esm-patient-registration-app/src/routes.json +++ b/packages/esm-patient-registration-app/src/routes.json @@ -45,18 +45,16 @@ "slot": "patient-search-actions-slot", "online": true, "offline": true - }, - { - "component": "deleteIdentifierConfirmationModal", - "name": "delete-identifier-confirmation-modal", - "online": true, - "offline": true } ], "modals": [ { "name": "cancel-patient-edit-modal", "component": "cancelPatientEditModal" + }, + { + "name": "delete-identifier-confirmation-modal", + "component": "deleteIdentifierConfirmationModal" } ] } diff --git a/packages/esm-patient-registration-app/src/widgets/delete-identifier-confirmation.modal.tsx b/packages/esm-patient-registration-app/src/widgets/delete-identifier-confirmation.modal.tsx index c626ad5ed..f62e89717 100644 --- a/packages/esm-patient-registration-app/src/widgets/delete-identifier-confirmation.modal.tsx +++ b/packages/esm-patient-registration-app/src/widgets/delete-identifier-confirmation.modal.tsx @@ -1,15 +1,16 @@ import React from 'react'; import { useTranslation } from 'react-i18next'; -import { Button } from '@carbon/react'; -import styles from './delete-identifier-confirmation.scss'; +import { Button, ModalBody, ModalHeader, ModalFooter } from '@carbon/react'; interface DeleteIdentifierConfirmationModalProps { + closeModal: () => void; deleteIdentifier: (x: boolean) => void; identifierName: string; identifierValue: string; } const DeleteIdentifierConfirmationModal: React.FC = ({ + closeModal, deleteIdentifier, identifierName, identifierValue, @@ -17,24 +18,30 @@ const DeleteIdentifierConfirmationModal: React.FC -

{t('deleteIdentifierModalHeading', 'Remove identifier?')}

-

- {identifierName} - {t('deleteIdentifierModalText', ' has a value of ')} {identifierValue} -

-

- {t('confirmIdentifierDeletionText', 'Are you sure you want to remove this identifier?')} -

-
+ <> + + +

+ {identifierName && identifierValue && ( + + {identifierName} + {t('deleteIdentifierModalText', ' has a value of ')} {identifierValue}.{' '} + + )} + {t('confirmIdentifierDeletionText', 'Are you sure you want to delete this identifier?')} +

+
+ -
-
+ + ); }; diff --git a/packages/esm-patient-registration-app/src/widgets/delete-identifier-confirmation.scss b/packages/esm-patient-registration-app/src/widgets/delete-identifier-confirmation.scss deleted file mode 100644 index cb98f12b6..000000000 --- a/packages/esm-patient-registration-app/src/widgets/delete-identifier-confirmation.scss +++ /dev/null @@ -1,34 +0,0 @@ -@use '@carbon/layout'; -@use '@carbon/type'; -@use '@openmrs/esm-styleguide/src/vars' as *; - -.productiveHeading { - @include type.type-style('heading-compact-02'); -} - -.modalContent { - width: 100%; - background-color: $ui-01; - padding: layout.$spacing-05; -} - -.modalSubtitle { - @include type.type-style('body-compact-01'); -} - -.modalBody { - @include type.type-style('body-compact-01'); - margin: layout.$spacing-05 0; -} - -.buttonSet { - display: grid; - grid-template-columns: 1fr 1fr; - margin-left: -(layout.$spacing-05); - margin-right: -(layout.$spacing-05); - margin-bottom: -(layout.$spacing-05); -} - -.buttonSet > button { - max-width: unset !important; -} diff --git a/packages/esm-patient-registration-app/src/widgets/delete-identifier-confirmation.test.tsx b/packages/esm-patient-registration-app/src/widgets/delete-identifier-confirmation.test.tsx index 785a851bb..2066906d0 100644 --- a/packages/esm-patient-registration-app/src/widgets/delete-identifier-confirmation.test.tsx +++ b/packages/esm-patient-registration-app/src/widgets/delete-identifier-confirmation.test.tsx @@ -3,7 +3,7 @@ import userEvent from '@testing-library/user-event'; import { render, screen } from '@testing-library/react'; import DeleteIdentifierConfirmationModal from './delete-identifier-confirmation.modal'; -describe('DeleteIdentifierConfirmationModal component', () => { +describe('DeleteIdentifierConfirmationModal', () => { const mockDeleteIdentifier = jest.fn(); const mockIdentifierName = 'Identifier Name'; const mockIdentifierValue = 'Identifier Value'; @@ -13,6 +13,7 @@ describe('DeleteIdentifierConfirmationModal component', () => { render(