feat/O3-3846: All Calendar Date Pickers should use the same OpenmrsDa…

…tePicker component across entire EMR
openmrs · Dec 16, 2024 · 0b16f3d · 0b16f3d
1 parent c66783a
commit 0b16f3d
Show file tree

Hide file tree

Showing 13 changed files with 96 additions and 215 deletions.
diff --git a/.../esm-patient-chart-app/src/mark-patient-deceased/mark-patient-deceased-form.workspace.tsx b/.../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<DefaultPatientWorkspaceProps> = ({ close
                   name="deathDate"
                   control={control}
                   render={({ field: { onChange, value } }) => (
-                    <DatePicker
-                      className={styles.datePicker}
-                      dateFormat="d/m/Y"
-                      datePickerType="single"
+                    <OpenmrsDatePicker
+                      className={styles.OpenmrsDatePicker}
                       id="deceasedDate"
                       maxDate={new Date().toISOString()}
-                      onChange={([date]) => onChange(date)}
+                      onChange={(date) => onChange(date)}
                       value={value}
-                    >
-                      <DatePickerInput
-                        id="deceasedDateInput"
-                        labelText={t('date', 'Date')}
-                        placeholder="dd/mm/yyyy"
-                        style={{ width: '100%' }}
-                      />
-                    </DatePicker>
+                    ></OpenmrsDatePicker>
                   )}
                 />
                 {errors?.deathDate && <p className={styles.errorMessage}>{errors?.deathDate?.message}</p>}

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
@@ -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<AttributeTypeFieldProps> = ({
         );
       case 'org.openmrs.customdatatype.datatype.DateDatatype':
         return (
-          <DatePicker
+          <OpenmrsDatePicker
             {...fieldProps}
-            dateFormat="d/m/Y"
-            datePickerType="single"
-            onChange={([date]) => onChange(dayjs(date).format('YYYY-MM-DD'))}
-          >
-            <DatePickerInput
-              id="date-picker-default-id"
-              placeholder="dd/mm/yyyy"
-              labelText={labelText}
-              type="text"
-              invalid={!!errors.visitAttributes?.[uuid]}
-              invalidText={errors.visitAttributes?.[uuid]?.message}
-            />
-          </DatePicker>
+            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
@@ -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<VisitDateTimeFieldProps> = ({
           control={control}
           render={({ field: { onChange, value } }) => (
             <ResponsiveWrapper>
-              <DatePicker
+              <OpenmrsDatePicker
                 className={styles.datePicker}
-                dateFormat="d/m/Y"
-                datePickerType="single"
                 id={dateFieldName}
                 maxDate={maxDateObj}
                 minDate={minDateObj}
-                onChange={([date]) => onChange(date)}
+                onChange={onChange}
                 value={value ? dayjs(value).format('DD/MM/YYYY') : null}
-              >
-                <DatePickerInput
-                  id={`${dateFieldName}Input`}
-                  invalid={Boolean(errors[dateFieldName])}
-                  invalidText={errors[dateFieldName]?.message}
-                  labelText={t('date', 'Date')}
-                  placeholder="dd/mm/yyyy"
-                  style={{ width: '100%' }}
-                />
-              </DatePicker>
+                invalid={Boolean(errors[dateFieldName])}
+                invalidText={errors[dateFieldName]?.message}
+                labelText={t('date', 'Date')}
+                style={{ width: '100%' }}
+              />
             </ResponsiveWrapper>
           )}
         />

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
@@ -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<ConditionsWidgetProps> = ({
             control={control}
             render={({ field: { onChange, onBlur, value } }) => (
               <ResponsiveWrapper>
-                <DatePicker
+                <OpenmrsDatePicker
                   id="onsetDate"
-                  datePickerType="single"
-                  dateFormat="d/m/Y"
                   maxDate={dayjs().utc().format()}
-                  placeholder="dd/mm/yyyy"
-                  onChange={([date]) => onChange(date)}
+                  onChange={(date) => onChange(date)}
                   onBlur={onBlur}
                   value={value}
-                >
-                  <DatePickerInput id="onsetDateInput" labelText={t('onsetDate', 'Onset date')} />
-                </DatePicker>
+                />
               </ResponsiveWrapper>
             )}
           />
@@ -322,19 +315,14 @@ const ConditionsWidget: React.FC<ConditionsWidgetProps> = ({
               render={({ field: { onBlur, onChange, value } }) => (
                 <>
                   <ResponsiveWrapper>
-                    <DatePicker
+                    <OpenmrsDatePicker
                       id="endDate"
-                      datePickerType="single"
-                      dateFormat="d/m/Y"
                       minDate={new Date(watch('onsetDateTime')).toISOString()}
                       maxDate={dayjs().utc().format()}
-                      placeholder="dd/mm/yyyy"
-                      onChange={([date]) => onChange(date)}
+                      onChange={(date) => onChange(date)}
                       onBlur={onBlur}
                       value={value}
-                    >
-                      <DatePickerInput id="abatementDateTime" labelText={t('endDate', 'End date')} />
-                    </DatePicker>
+                    ></OpenmrsDatePicker>
                   </ResponsiveWrapper>
                 </>
               )}

diff --git a/packages/esm-patient-conditions-app/translations/en.json b/packages/esm-patient-conditions-app/translations/en.json
@@ -20,15 +20,13 @@
   "deleting": "Deleting",
   "edit": "Edit",
   "editCondition": "Edit a Condition",
-  "endDate": "End date",
   "enterCondition": "Enter condition",
   "errorCreatingCondition": "Error creating condition",
   "errorDeletingCondition": "Error deleting condition",
   "errorUpdatingCondition": "Error updating condition",
   "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
@@ -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<DefaultPatientWorkspaceProps> = ({
                   name="vaccinationDate"
                   control={control}
                   render={({ field: { onChange, value } }) => (
-                    <DatePicker
+                    <OpenmrsDatePicker
                       id="vaccinationDate"
                       maxDate={new Date().toISOString()}
-                      dateFormat={datePickerFormat}
-                      datePickerType="single"
                       value={value}
-                      onChange={([date]) => onChange(date)}
-                      style={{ paddingBottom: '1rem' }}
-                    >
-                      <DatePickerInput
-                        id="vaccinationDateInput"
-                        placeholder="dd/mm/yyyy"
-                        labelText={t('vaccinationDate', 'Vaccination date')}
-                        type="text"
-                        invalid={!!errors['vaccinationDate']}
-                        invalidText={errors['vaccinationDate']?.message}
-                        style={{ width: '100%' }}
-                      />
-                    </DatePicker>
+                      onChange={(date) => onChange(date)}
+                      style={{ paddingBottom: '1rem', width: '100%' }}
+                      invalid={!!errors['vaccinationDate']}
+                      invalidText={errors['vaccinationDate']?.message}
+                      labelText={t('vaccinationDate', 'Vaccination date')}
+                    />
                   )}
                 />
               </ResponsiveWrapper>
@@ -380,22 +370,14 @@ const ImmunizationsForm: React.FC<DefaultPatientWorkspaceProps> = ({
                 control={control}
                 render={({ field: { onChange, value } }) => (
                   <div className={styles.row}>
-                    <DatePicker
+                    <OpenmrsDatePicker
                       id="vaccinationExpiration"
                       className="vaccinationExpiration"
                       minDate={immunizationToEditMeta ? null : new Date().toISOString()}
-                      dateFormat={datePickerFormat}
-                      datePickerType="single"
                       value={value}
-                      onChange={([date]) => onChange(date)}
-                    >
-                      <DatePickerInput
-                        id="date-picker-calendar-id"
-                        placeholder="dd/mm/yyyy"
-                        labelText={t('expirationDate', 'Expiration date')}
-                        type="text"
-                      />
-                    </DatePicker>
+                      onChange={(date) => onChange(date)}
+                      labelText={t('expirationDate', 'Expiration date')}
+                    />
                   </div>
                 )}
               />

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
@@ -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 } }) => (
-                        <DatePicker
-                          datePickerType="single"
+                        <OpenmrsDatePicker
                           maxDate={new Date().toISOString()}
                           value={value}
-                          onChange={([newStartDate]) => onChange(newStartDate)}
+                          onChange={(newStartDate) => onChange(newStartDate)}
                           onBlur={onBlur}
                           ref={ref}
-                        >
-                          <DatePickerInput
-                            id="startDatePicker"
-                            placeholder="dd/mm/yyyy"
-                            labelText={t('startDate', 'Start date')}
-                            size={isTablet ? 'lg' : 'sm'}
-                          />
-                        </DatePicker>
+                        />
                       )}
                     />
                   </InputWrapper>

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
@@ -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<DefaultPatientWorkspaceProps> = ({
               control={control}
               render={({ field: { onChange, value } }) => (
                 <ResponsiveWrapper>
-                  <DatePicker
-                    dateFormat="d/m/Y"
-                    datePickerType="single"
+                  <OpenmrsDatePicker
                     maxDate={new Date().toISOString()}
                     value={value}
-                    onChange={([date]) => onChange(date)}
-                  >
-                    <DatePickerInput
-                      id="visitDateTimePicker"
-                      labelText={t('visitDate', 'Visit date')}
-                      placeholder="dd/mm/yyyy"
-                    />
-                  </DatePicker>
+                    onChange={(date) => onChange(date)}
+                    labelText={t('visitDate', 'Visit date')}
+                  />
                 </ResponsiveWrapper>
               )}
             />