From 0b16f3d9e57c31caf0b5c65ed0a9c16a6776b478 Mon Sep 17 00:00:00 2001 From: jwnasambu Date: Fri, 13 Dec 2024 17:16:04 +0300 Subject: [PATCH] feat/O3-3846: All Calendar Date Pickers should use the same OpenmrsDatePicker component across entire EMR --- .../mark-patient-deceased-form.workspace.tsx | 28 ++++++------- .../visit-attribute-type.component.tsx | 24 ++++------- .../visit-form/visit-date-time.component.tsx | 25 ++++------- .../conditions-widget.component.tsx | 26 ++++-------- .../translations/en.json | 2 - .../immunizations-form.workspace.tsx | 42 ++++++------------- .../drug-order-form.component.tsx | 17 ++------ .../src/notes/visit-notes-form.workspace.tsx | 17 +++----- .../orders-details-table.component.tsx | 28 +++---------- .../cancel-order-form.component.tsx | 36 ++++------------ .../src/programs/programs-form.workspace.tsx | 38 ++++++++--------- .../print-modal/print-modal.extension.tsx | 27 ++++-------- .../translations/en.json | 1 - 13 files changed, 96 insertions(+), 215 deletions(-) diff --git a/packages/esm-patient-chart-app/src/mark-patient-deceased/mark-patient-deceased-form.workspace.tsx b/packages/esm-patient-chart-app/src/mark-patient-deceased/mark-patient-deceased-form.workspace.tsx index 382002aed0..a54ff3af29 100644 --- a/packages/esm-patient-chart-app/src/mark-patient-deceased/mark-patient-deceased-form.workspace.tsx +++ b/packages/esm-patient-chart-app/src/mark-patient-deceased/mark-patient-deceased-form.workspace.tsx @@ -5,8 +5,6 @@ import { useTranslation } from 'react-i18next'; import { Button, ButtonSet, - DatePicker, - DatePickerInput, DatePickerSkeleton, Form, InlineLoading, @@ -23,7 +21,14 @@ import { z } from 'zod'; import { zodResolver } from '@hookform/resolvers/zod'; import { WarningFilled } from '@carbon/react/icons'; import { EmptyState, type DefaultPatientWorkspaceProps } from '@openmrs/esm-patient-common-lib'; -import { ExtensionSlot, useLayoutType, showSnackbar, ResponsiveWrapper, useConfig } from '@openmrs/esm-framework'; +import { + ExtensionSlot, + useLayoutType, + showSnackbar, + ResponsiveWrapper, + useConfig, + OpenmrsDatePicker, +} from '@openmrs/esm-framework'; import { markPatientDeceased, useCausesOfDeath } from '../data.resource'; import { type ChartConfig } from '../config-schema'; import styles from './mark-patient-deceased-form.scss'; @@ -134,22 +139,13 @@ const MarkPatientDeceasedForm: React.FC = ({ close name="deathDate" control={control} render={({ field: { onChange, value } }) => ( - onChange(date)} + onChange={(date) => onChange(date)} value={value} - > - - + > )} /> {errors?.deathDate &&

{errors?.deathDate?.message}

} diff --git a/packages/esm-patient-chart-app/src/visit/visit-form/visit-attribute-type.component.tsx b/packages/esm-patient-chart-app/src/visit/visit-form/visit-attribute-type.component.tsx index 63d9e63885..003b388b4d 100644 --- a/packages/esm-patient-chart-app/src/visit/visit-form/visit-attribute-type.component.tsx +++ b/packages/esm-patient-chart-app/src/visit/visit-form/visit-attribute-type.component.tsx @@ -1,8 +1,6 @@ import React, { useEffect, useId, useMemo } from 'react'; import { Checkbox, - DatePicker, - DatePickerInput, NumberInput, Select, SelectItem, @@ -14,7 +12,7 @@ import { import dayjs from 'dayjs'; import { useTranslation } from 'react-i18next'; import { Controller, type ControllerRenderProps, useFormContext } from 'react-hook-form'; -import { useConfig } from '@openmrs/esm-framework'; +import { OpenmrsDatePicker, useConfig } from '@openmrs/esm-framework'; import { type ChartConfig } from '../../config-schema'; import { useConceptAnswersForVisitAttributeType, useVisitAttributeType } from '../hooks/useVisitAttributeType'; import { type VisitFormData } from './visit-form.resource'; @@ -204,21 +202,13 @@ const AttributeTypeField: React.FC = ({ ); case 'org.openmrs.customdatatype.datatype.DateDatatype': return ( - onChange(dayjs(date).format('YYYY-MM-DD'))} - > - - + onChange={(date) => onChange(dayjs(date).format('YYYY-MM-DD'))} + labelText={labelText} + invalid={!!errors.visitAttributes?.[uuid]} + invalidText={errors.visitAttributes?.[uuid]?.message} + /> ); default: return ( diff --git a/packages/esm-patient-chart-app/src/visit/visit-form/visit-date-time.component.tsx b/packages/esm-patient-chart-app/src/visit/visit-form/visit-date-time.component.tsx index 01849fa3e5..fc38a31e10 100644 --- a/packages/esm-patient-chart-app/src/visit/visit-form/visit-date-time.component.tsx +++ b/packages/esm-patient-chart-app/src/visit/visit-form/visit-date-time.component.tsx @@ -1,10 +1,10 @@ import React from 'react'; import classNames from 'classnames'; import dayjs from 'dayjs'; -import { DatePicker, DatePickerInput, SelectItem, TimePicker, TimePickerSelect } from '@carbon/react'; +import { SelectItem, TimePicker, TimePickerSelect } from '@carbon/react'; import { Controller, useFormContext } from 'react-hook-form'; import { useTranslation } from 'react-i18next'; -import { ResponsiveWrapper } from '@openmrs/esm-framework'; +import { ResponsiveWrapper, OpenmrsDatePicker } from '@openmrs/esm-framework'; import { type amPm } from '@openmrs/esm-patient-common-lib'; import { type VisitFormData } from './visit-form.resource'; import styles from './visit-form.scss'; @@ -49,25 +49,18 @@ const VisitDateTimeField: React.FC = ({ control={control} render={({ field: { onChange, value } }) => ( - onChange(date)} + onChange={onChange} value={value ? dayjs(value).format('DD/MM/YYYY') : null} - > - - + invalid={Boolean(errors[dateFieldName])} + invalidText={errors[dateFieldName]?.message} + labelText={t('date', 'Date')} + style={{ width: '100%' }} + /> )} /> diff --git a/packages/esm-patient-conditions-app/src/conditions/conditions-widget.component.tsx b/packages/esm-patient-conditions-app/src/conditions/conditions-widget.component.tsx index 7e7940d985..f146d7b0cc 100644 --- a/packages/esm-patient-conditions-app/src/conditions/conditions-widget.component.tsx +++ b/packages/esm-patient-conditions-app/src/conditions/conditions-widget.component.tsx @@ -4,8 +4,6 @@ import classNames from 'classnames'; import dayjs from 'dayjs'; import 'dayjs/plugin/utc'; import { - DatePicker, - DatePickerInput, FormGroup, FormLabel, InlineLoading, @@ -18,7 +16,7 @@ import { } from '@carbon/react'; import { WarningFilled } from '@carbon/react/icons'; import { useFormContext, Controller } from 'react-hook-form'; -import { showSnackbar, useDebounce, useSession, ResponsiveWrapper } from '@openmrs/esm-framework'; +import { showSnackbar, useDebounce, useSession, ResponsiveWrapper, OpenmrsDatePicker } from '@openmrs/esm-framework'; import { type DefaultPatientWorkspaceProps } from '@openmrs/esm-patient-common-lib'; import { type CodedCondition, @@ -277,18 +275,13 @@ const ConditionsWidget: React.FC = ({ control={control} render={({ field: { onChange, onBlur, value } }) => ( - onChange(date)} + onChange={(date) => onChange(date)} onBlur={onBlur} value={value} - > - - + /> )} /> @@ -322,19 +315,14 @@ const ConditionsWidget: React.FC = ({ render={({ field: { onBlur, onChange, value } }) => ( <> - onChange(date)} + onChange={(date) => onChange(date)} onBlur={onBlur} value={value} - > - - + > )} diff --git a/packages/esm-patient-conditions-app/translations/en.json b/packages/esm-patient-conditions-app/translations/en.json index 1f6dbeb2cd..f41a3ba086 100644 --- a/packages/esm-patient-conditions-app/translations/en.json +++ b/packages/esm-patient-conditions-app/translations/en.json @@ -20,7 +20,6 @@ "deleting": "Deleting", "edit": "Edit", "editCondition": "Edit a Condition", - "endDate": "End date", "enterCondition": "Enter condition", "errorCreatingCondition": "Error creating condition", "errorDeletingCondition": "Error deleting condition", @@ -28,7 +27,6 @@ "inactive": "Inactive", "noConditionsToDisplay": "No conditions to display", "noResultsFor": "No results for", - "onsetDate": "Onset date", "recordCondition": "Record a Condition", "required": "Required", "saveAndClose": "Save & close", diff --git a/packages/esm-patient-immunizations-app/src/immunizations/immunizations-form.workspace.tsx b/packages/esm-patient-immunizations-app/src/immunizations/immunizations-form.workspace.tsx index fba58e867e..74857e29d1 100644 --- a/packages/esm-patient-immunizations-app/src/immunizations/immunizations-form.workspace.tsx +++ b/packages/esm-patient-immunizations-app/src/immunizations/immunizations-form.workspace.tsx @@ -4,8 +4,6 @@ import dayjs from 'dayjs'; import { Button, ButtonSet, - DatePicker, - DatePickerInput, Dropdown, Form, InlineNotification, @@ -24,6 +22,7 @@ import { toDateObjectStrict, showSnackbar, ResponsiveWrapper, + OpenmrsDatePicker, } from '@openmrs/esm-framework'; import { useForm, Controller, FormProvider } from 'react-hook-form'; import { zodResolver } from '@hookform/resolvers/zod'; @@ -229,25 +228,16 @@ const ImmunizationsForm: React.FC = ({ name="vaccinationDate" control={control} render={({ field: { onChange, value } }) => ( - onChange(date)} - style={{ paddingBottom: '1rem' }} - > - - + onChange={(date) => onChange(date)} + style={{ paddingBottom: '1rem', width: '100%' }} + invalid={!!errors['vaccinationDate']} + invalidText={errors['vaccinationDate']?.message} + labelText={t('vaccinationDate', 'Vaccination date')} + /> )} /> @@ -380,22 +370,14 @@ const ImmunizationsForm: React.FC = ({ control={control} render={({ field: { onChange, value } }) => (
- onChange(date)} - > - - + onChange={(date) => onChange(date)} + labelText={t('expirationDate', 'Expiration date')} + />
)} /> diff --git a/packages/esm-patient-medications-app/src/add-drug-order/drug-order-form.component.tsx b/packages/esm-patient-medications-app/src/add-drug-order/drug-order-form.component.tsx index 3226682fb6..c5127a459f 100644 --- a/packages/esm-patient-medications-app/src/add-drug-order/drug-order-form.component.tsx +++ b/packages/esm-patient-medications-app/src/add-drug-order/drug-order-form.component.tsx @@ -7,8 +7,6 @@ import { Checkbox, Column, ComboBox, - DatePicker, - DatePickerInput, IconButton, Form, FormGroup, @@ -30,6 +28,7 @@ import { ExtensionSlot, formatDate, getPatientName, + OpenmrsDatePicker, parseDate, useConfig, useLayoutType, @@ -597,21 +596,13 @@ export function DrugOrderForm({ initialOrderBasketItem, onSave, onCancel, prompt name="startDate" control={control} render={({ field: { onBlur, value, onChange, ref } }) => ( - onChange(newStartDate)} + onChange={(newStartDate) => onChange(newStartDate)} onBlur={onBlur} ref={ref} - > - - + /> )} /> diff --git a/packages/esm-patient-notes-app/src/notes/visit-notes-form.workspace.tsx b/packages/esm-patient-notes-app/src/notes/visit-notes-form.workspace.tsx index fde9147b3a..3993dc3c7a 100644 --- a/packages/esm-patient-notes-app/src/notes/visit-notes-form.workspace.tsx +++ b/packages/esm-patient-notes-app/src/notes/visit-notes-form.workspace.tsx @@ -11,7 +11,6 @@ import { Button, ButtonSet, Column, - DatePicker, DatePickerInput, Form, FormGroup, @@ -38,6 +37,7 @@ import { useConfig, useLayoutType, useSession, + OpenmrsDatePicker, } from '@openmrs/esm-framework'; import { type DefaultPatientWorkspaceProps, useAllowedFileExtensions } from '@openmrs/esm-patient-common-lib'; import type { ConfigObject } from '../config-schema'; @@ -455,19 +455,12 @@ const VisitNotesForm: React.FC = ({ control={control} render={({ field: { onChange, value } }) => ( - onChange(date)} - > - - + onChange={(date) => onChange(date)} + labelText={t('visitDate', 'Visit date')} + /> )} /> diff --git a/packages/esm-patient-orders-app/src/components/orders-details-table.component.tsx b/packages/esm-patient-orders-app/src/components/orders-details-table.component.tsx index 5e5edac6eb..197b4a350b 100644 --- a/packages/esm-patient-orders-app/src/components/orders-details-table.component.tsx +++ b/packages/esm-patient-orders-app/src/components/orders-details-table.component.tsx @@ -6,8 +6,6 @@ import { Button, DataTable, DataTableSkeleton, - DatePicker, - DatePickerInput, Dropdown, InlineLoading, Layer, @@ -54,6 +52,7 @@ import { useLayoutType, usePagination, usePatient, + OpenmrsDatePicker, } from '@openmrs/esm-framework'; import { buildGeneralOrder, buildLabOrder, buildMedicationOrder } from '../utils'; import MedicationRecord from './medication-record.component'; @@ -361,27 +360,12 @@ const OrderDetailsTable: React.FC = ({ patientUuid, showAddBu /> {t('dateRange', 'Date range')}: - { - handleDateFilterChange([startDate, endDate]); + { + handleDateFilterChange([selectedDate, selectedDate]); }} - > - - - + /> {(() => { diff --git a/packages/esm-patient-orders-app/src/order-cancellation-form/cancel-order-form.component.tsx b/packages/esm-patient-orders-app/src/order-cancellation-form/cancel-order-form.component.tsx index 3d77d8d127..b1fee84f33 100644 --- a/packages/esm-patient-orders-app/src/order-cancellation-form/cancel-order-form.component.tsx +++ b/packages/esm-patient-orders-app/src/order-cancellation-form/cancel-order-form.component.tsx @@ -4,19 +4,8 @@ import { Controller, useForm } from 'react-hook-form'; import { useTranslation } from 'react-i18next'; import { z } from 'zod'; import { zodResolver } from '@hookform/resolvers/zod'; -import { - Button, - TextArea, - ButtonSet, - Column, - Form, - InlineNotification, - Stack, - DatePicker, - DatePickerInput, - InlineLoading, -} from '@carbon/react'; -import { showSnackbar, useLayoutType } from '@openmrs/esm-framework'; +import { Button, TextArea, ButtonSet, Column, Form, InlineNotification, Stack, InlineLoading } from '@carbon/react'; +import { OpenmrsDatePicker, showSnackbar, useLayoutType } from '@openmrs/esm-framework'; import { type DefaultPatientWorkspaceProps, usePatientOrders, type Order } from '@openmrs/esm-patient-common-lib'; import { cancelOrder } from './cancel-order.resource'; import styles from './cancel-order-form.scss'; @@ -121,24 +110,15 @@ const OrderCancellationForm: React.FC = ({ control={control} render={({ field: { onChange, value } }) => (
- onChange(date)} - autocomplete="off" - > - - + onChange={(date) => onChange(date)} + invalid={!!errors['cancellationDate']} + invalidText={errors['cancellationDate']?.message} + label={t('cancellationDate', 'Cancellation date')} + />
)} /> diff --git a/packages/esm-patient-programs-app/src/programs/programs-form.workspace.tsx b/packages/esm-patient-programs-app/src/programs/programs-form.workspace.tsx index 926f3e74c9..b31642b176 100644 --- a/packages/esm-patient-programs-app/src/programs/programs-form.workspace.tsx +++ b/packages/esm-patient-programs-app/src/programs/programs-form.workspace.tsx @@ -4,8 +4,6 @@ import dayjs from 'dayjs'; import { Button, ButtonSet, - DatePicker, - DatePickerInput, Form, FormGroup, InlineLoading, @@ -18,7 +16,15 @@ import { import { z } from 'zod'; import { useForm, Controller, useWatch } from 'react-hook-form'; import { zodResolver } from '@hookform/resolvers/zod'; -import { parseDate, showSnackbar, useConfig, useLayoutType, useLocations, useSession } from '@openmrs/esm-framework'; +import { + parseDate, + showSnackbar, + useConfig, + useLayoutType, + useLocations, + useSession, + OpenmrsDatePicker, +} from '@openmrs/esm-framework'; import { type DefaultPatientWorkspaceProps } from '@openmrs/esm-patient-common-lib'; import { createProgramEnrollment, @@ -194,18 +200,14 @@ const ProgramsForm: React.FC = ({ name="enrollmentDate" control={control} render={({ field: { onChange, value } }) => ( - onChange(date)} + onChange={(date) => onChange(date)} value={value} - > - - + labelText={t('dateEnrolled', 'Date enrolled')} + /> )} /> ); @@ -215,19 +217,15 @@ const ProgramsForm: React.FC = ({ name="completionDate" control={control} render={({ field: { onChange, value } }) => ( - onChange(date)} + onChange={(date) => onChange(date)} value={value} - > - - + labelText={t('dateCompleted', 'Date completed')} + /> )} /> ); @@ -274,7 +272,7 @@ const ProgramsForm: React.FC = ({ id="programStatus" invalid={!!fieldState?.error} labelText={t('programStatus', 'Program status')} - onChange={(event) => onChange(event.target.value)} + onChang={(event) => onChange(event.target.value)} value={value} > diff --git a/packages/esm-patient-tests-app/src/test-results/print-modal/print-modal.extension.tsx b/packages/esm-patient-tests-app/src/test-results/print-modal/print-modal.extension.tsx index 093b01e685..2b1ea15834 100644 --- a/packages/esm-patient-tests-app/src/test-results/print-modal/print-modal.extension.tsx +++ b/packages/esm-patient-tests-app/src/test-results/print-modal/print-modal.extension.tsx @@ -3,7 +3,6 @@ import { useTranslation } from 'react-i18next'; import { Button, DataTable, - DatePicker, DatePickerInput, ModalBody, ModalFooter, @@ -29,6 +28,7 @@ import { useLayoutType, usePatient, useSession, + OpenmrsDatePicker, ResponsiveWrapper, } from '@openmrs/esm-framework'; import usePanelData from '../panel-view/usePanelData'; @@ -41,7 +41,7 @@ function PrintModal({ patientUuid, closeDialog }) { const { panels } = usePanelData(); const printContainerRef = useRef(null); const [selectedFromDate, setSelectedFromDate] = useState(null); - const [selectedToDate, setSelectedToDate] = useState(null); + const [selectedToDate] = useState(null); const { excludePatientIdentifierCodeTypes } = useConfig<{ excludePatientIdentifierCodeTypes: { uuids: string[]; @@ -51,7 +51,6 @@ function PrintModal({ patientUuid, closeDialog }) { }); const headerTitle = t('testResults_title', 'Test Results'); const datePickerPlaceHolder = 'dd/mm/yyyy'; - const datePickerFormat = 'd/m/Y'; const tableHeaders = [ { key: 'testType', header: 'Test Type' }, @@ -117,12 +116,10 @@ function PrintModal({ patientUuid, closeDialog }) {
- setSelectedFromDate(date)} + onChange={setSelectedFromDate} value={selectedFromDate} > - - + setSelectedToDate(date)} + onChange={setSelectedFromDate} value={selectedToDate} - > - - + />
diff --git a/packages/esm-patient-tests-app/translations/en.json b/packages/esm-patient-tests-app/translations/en.json index 5b352ddf92..57cf9f1939 100644 --- a/packages/esm-patient-tests-app/translations/en.json +++ b/packages/esm-patient-tests-app/translations/en.json @@ -20,7 +20,6 @@ "dateTime": "Date and time", "directlyAddToBasket": "Add to basket", "discard": "Discard", - "endDate": "End date", "error": "Error", "errorFetchingTestTypes": "Error fetching results for \"{{searchTerm}}\"", "female": "Female",