feat: [DHIS2-18310] enable non-Gregorian calendars in views & lists & forms

package.json

@@ -10,7 +10,7 @@
         "packages/rules-engine"
     ],
     "dependencies": {
-        "@dhis2/rules-engine-javascript": "101.19.1",
+        "@dhis2-ui/calendar": "^10.0.3",
         "@dhis2/app-runtime": "^3.9.3",
         "@dhis2/d2-i18n": "^1.1.0",
         "@dhis2/d2-icons": "^1.0.1",
@@ -19,7 +19,6 @@
         "@dhis2/d2-ui-rich-text": "^7.4.0",
         "@dhis2/d2-ui-sharing-dialog": "^7.3.3",
         "@dhis2/ui": "^9.10.1",
-        "@dhis2-ui/calendar": "^10.0.3",
         "@joakim_sm/react-infinite-calendar": "^2.4.2",
         "@material-ui/core": "3.9.4",
         "@material-ui/icons": "3",

src/components/AppLoader/init.js

@@ -131,7 +131,7 @@ async function initializeMetaDataAsync(dbLocale: string, onQueryApi: Function, m
 
 async function initializeSystemSettingsAsync(
     uiLocale: string,
-    systemSettings: { dateFormat: string, serverTimeZoneId: string },
+    systemSettings: { dateFormat: string, serverTimeZoneId: string, calendar: string, },
 ) {
     const systemSettingsCacheData = await cacheSystemSettings(uiLocale, systemSettings);
     await buildSystemSettingsAsync(systemSettingsCacheData);
@@ -158,7 +158,7 @@ export async function initializeAsync(
     const systemSettings = await onQueryApi({
         resource: 'system/info',
         params: {
-            fields: 'dateFormat,serverTimeZoneId',
+            fields: 'dateFormat,serverTimeZoneId,calendar',
         },
     });
 

src/core_modules/capture-core/components/D2Form/field/configs/dateField/getDateFieldConfig.js

@@ -2,6 +2,7 @@
 import moment from 'moment';
 import { createFieldConfig, createProps } from '../base/configBaseDefaultForm';
 import { DateFieldForForm } from '../../Components';
+import { convertDateObjectToDateFormatString } from '../../../../../../capture-core/utils/converters/date';
 import type { DateDataElement } from '../../../../../metaData';
 import type { QuerySingleResource } from '../../../../../utils/api/api.types';
 
@@ -15,7 +16,7 @@ export const getDateFieldConfig = (metaData: DateDataElement, options: Object, q
         maxWidth: options.formHorizontal ? 150 : 350,
         calendarWidth: options.formHorizontal ? 250 : 350,
         popupAnchorPosition: getCalendarAnchorPosition(options.formHorizontal),
-        calendarMaxMoment: !metaData.allowFutureDate ? moment() : undefined,
+        calendarMaxMoment: !metaData.allowFutureDate ? convertDateObjectToDateFormatString(moment()) : undefined,
     }, options, metaData);
 
     return createFieldConfig({

src/core_modules/capture-core/components/D2Form/field/configs/dateField/getDateFieldConfigForCustomForm.js

@@ -2,6 +2,7 @@
 import moment from 'moment';
 import { createFieldConfig, createProps } from '../base/configBaseCustomForm';
 import { DateFieldForCustomForm } from '../../Components';
+import { convertDateObjectToDateFormatString } from '../../../../../../capture-core/utils/converters/date';
 import type { DateDataElement } from '../../../../../metaData';
 import type { QuerySingleResource } from '../../../../../utils/api/api.types';
 
@@ -10,7 +11,7 @@ export const getDateFieldConfigForCustomForm = (metaData: DateDataElement, optio
         width: 350,
         maxWidth: 350,
         calendarWidth: 350,
-        calendarMaxMoment: !metaData.allowFutureDate ? moment() : undefined,
+        calendarMaxMoment: !metaData.allowFutureDate ? convertDateObjectToDateFormatString(moment()) : undefined,
     }, metaData);
 
     return createFieldConfig({

src/core_modules/capture-core/components/DataEntries/Enrollment/EnrollmentDataEntry.component.js

@@ -42,6 +42,7 @@ import {
     withAOCFieldBuilder,
     withDataEntryFields,
 } from '../../DataEntryDhis2Helpers';
+import { convertDateObjectToDateFormatString } from '../../../../capture-core/utils/converters/date';
 
 const overrideMessagePropNames = {
     errorMessage: 'validationError',
@@ -111,7 +112,7 @@ const getEnrollmentDateSettings = () => {
             required: true,
             calendarWidth: props.formHorizontal ? 250 : 350,
             popupAnchorPosition: getCalendarAnchorPosition(props.formHorizontal),
-            calendarMaxMoment: !props.enrollmentMetadata.allowFutureEnrollmentDate ? moment() : undefined,
+            calendarMaxMoment: !props.enrollmentMetadata.allowFutureEnrollmentDate ? convertDateObjectToDateFormatString(moment()) : undefined,
         }),
         getPropName: () => 'enrolledAt',
         getValidatorContainers: getEnrollmentDateValidatorContainer,
@@ -159,7 +160,9 @@ const getIncidentDateSettings = () => {
             required: true,
             calendarWidth: props.formHorizontal ? 250 : 350,
             popupAnchorPosition: getCalendarAnchorPosition(props.formHorizontal),
-            calendarMaxMoment: !props.enrollmentMetadata.allowFutureIncidentDate ? moment() : undefined,
+            calendarMaxMoment: !props.enrollmentMetadata.allowFutureIncidentDate ?
+                convertDateObjectToDateFormatString(moment()) :
+                undefined,
         }),
         getPropName: () => 'occurredAt',
         getPassOnFieldData: () => true,

src/core_modules/capture-core/components/FiltersForTypes/Date/DateFilter.component.js

@@ -1,6 +1,7 @@
 // @flow
 import React, { Component } from 'react';
 import classNames from 'classnames';
+import moment from 'moment';
 import { withStyles } from '@material-ui/core/styles';
 import i18n from '@dhis2/d2-i18n';
 import { isValidZeroOrPositiveInteger } from 'capture-core-utils/validators/form';
@@ -16,7 +17,8 @@ import './calendarFilterStyles.css';
 import { mainOptionKeys, mainOptionTranslatedTexts } from './options';
 import { getDateFilterData } from './dateFilterDataGetter';
 import { RangeFilter } from './RangeFilter.component';
-import { parseDate } from '../../../utils/converters/date';
+import { parseDate, convertLocalToIsoCalendar, convertIsoToLocalCalendar } from '../../../utils/converters/date';
+import { systemSettingsStore } from '../../../metaDataMemoryStores';
 
 const getStyles = (theme: Theme) => ({
     fromToContainer: {
@@ -257,12 +259,28 @@ class DateFilterPlain extends Component<Props, State> implements UpdatableFilter
         return !values || DateFilter.isFilterValid(values.main, values.from, values.to, values.start, values.end);
     }
 
-    getUpdatedValue(valuePart: { [key: string]: string }) {
-        // $FlowFixMe[cannot-spread-indexer] automated comment
+    // eslint-disable-next-line complexity
+    getUpdatedValue(valuePart: Object) {
         const valueObject = {
             ...this.props.value,
             ...valuePart,
         };
+        const dateFormat = systemSettingsStore.get().dateFormat;
+
+        if (valuePart.from && valueObject?.from?.value) {
+            valueObject.from = {
+                ...valueObject.from,
+                value: moment(convertLocalToIsoCalendar(valueObject.from.value)).format(dateFormat),
+            };
+        }
+
+        if (valuePart.to && valueObject?.to?.value) {
+            valueObject.to = {
+                ...valueObject.to,
+                value: moment(convertLocalToIsoCalendar(valueObject.to.value)).format(dateFormat),
+            };
+        }
+
         const isRelativeRangeValue = () => valueObject?.start || valuePart?.start || valuePart?.end;
         const isAbsoluteRangevalue = () => valueObject?.from || valuePart?.from || valuePart?.to;
 
@@ -358,7 +376,7 @@ class DateFilterPlain extends Component<Props, State> implements UpdatableFilter
                         {/* $FlowSuppress: Flow not working 100% with HOCs */}
                         {/* $FlowFixMe[prop-missing] automated comment */}
                         <FromDateFilter
-                            value={fromValue?.value}
+                            value={convertIsoToLocalCalendar(fromValue?.value)}
                             onBlur={this.handleFieldBlur}
                             onEnterKey={this.handleEnterKeyInFrom}
                             onDateSelectedFromCalendar={this.handleDateSelectedFromCalendarInFrom}
@@ -371,7 +389,7 @@ class DateFilterPlain extends Component<Props, State> implements UpdatableFilter
                         {/* $FlowSuppress: Flow not working 100% with HOCs */}
                         {/* $FlowFixMe[prop-missing] automated comment */}
                         <ToDateFilter
-                            value={toValue?.value}
+                            value={convertIsoToLocalCalendar(toValue?.value)}
                             onBlur={this.handleFieldBlur}
                             textFieldRef={this.setToD2DateTextFieldInstance}
                             onFocusUpdateButton={onFocusUpdateButton}

src/core_modules/capture-core/components/FormFields/DateAndTime/D2Date/D2Date.component.js

@@ -7,7 +7,6 @@ import { type DateValue } from '../../../FiltersForTypes/Date/types/date.types';
 type Props = {
     label?: ?string,
     value: ?string,
-    calendar?: string,
     calendarWidth?: ?number,
     inputWidth?: ?number,
     onBlur: (value: DateValue) => void,
@@ -50,7 +49,6 @@ export class D2Date extends React.Component<Props, State> {
 
     render() {
         const {
-            calendar,
             calendarWidth,
             inputWidth,
             classes,
@@ -62,7 +60,7 @@ export class D2Date extends React.Component<Props, State> {
             ...passOnProps
         } = this.props;
 
-        const calendarType = calendar || 'gregory';
+        const calendarType = systemSettingsStore.get().calendar || 'gregory';
         const format = systemSettingsStore.get().dateFormat;
 
         return (

src/core_modules/capture-core/converters/clientToForm.js

@@ -1,6 +1,6 @@
 // @flow
 import moment from 'moment';
-import { convertMomentToDateFormatString } from '../utils/converters/date';
+import { convertMomentToDateFormatString, convertIsoToLocalCalendar } from '../utils/converters/date';
 import { dataElementTypes } from '../metaData';
 
 import { stringifyNumber } from './common/stringifyNumber';
@@ -23,16 +23,17 @@ type RangeValue = {
 }
 
 function convertDateForEdit(rawValue: string): string {
-    const momentInstance = moment(rawValue);
-    return convertMomentToDateFormatString(momentInstance);
+    const momentDate = moment(rawValue);
+    const dateString = momentDate.format('YYYY-MM-DD');
+    return convertIsoToLocalCalendar(dateString);
 }
 
 function convertDateTimeForEdit(rawValue: string): DateTimeFormValue {
     const dateTime = moment(rawValue);
-    const dateString = convertMomentToDateFormatString(dateTime);
+    const dateString = dateTime.format('YYYY-MM-DD');
     const timeString = dateTime.format('HH:mm');
     return {
-        date: dateString,
+        date: convertIsoToLocalCalendar(dateString),
         time: timeString,
     };
 }

src/core_modules/capture-core/converters/clientToList.js

@@ -5,21 +5,23 @@ import i18n from '@dhis2/d2-i18n';
 import { Tag } from '@dhis2/ui';
 import { PreviewImage } from 'capture-ui';
 import { dataElementTypes, type DataElement } from '../metaData';
-import { convertMomentToDateFormatString } from '../utils/converters/date';
+import { convertIsoToLocalCalendar } from '../utils/converters/date';
 import { stringifyNumber } from './common/stringifyNumber';
 import { MinimalCoordinates } from '../components/MinimalCoordinates';
 import { TooltipOrgUnit } from '../components/Tooltips/TooltipOrgUnit';
 
 function convertDateForListDisplay(rawValue: string): string {
     const momentDate = moment(rawValue);
-    return convertMomentToDateFormatString(momentDate);
+    const dateString = momentDate.format('YYYY-MM-DD');
+    return convertIsoToLocalCalendar(dateString);
 }
 
 function convertDateTimeForListDisplay(rawValue: string): string {
     const momentDate = moment(rawValue);
-    const dateString = convertMomentToDateFormatString(momentDate);
+    const dateString = momentDate.format('YYYY-MM-DD');
     const timeString = momentDate.format('HH:mm');
-    return `${dateString} ${timeString}`;
+    const localDate = convertIsoToLocalCalendar(dateString);
+    return `${localDate} ${timeString}`;
 }
 
 function convertTimeForListDisplay(rawValue: string): string {

src/core_modules/capture-core/converters/clientToView.js

@@ -4,22 +4,26 @@ import moment from 'moment';
 import i18n from '@dhis2/d2-i18n';
 import { PreviewImage } from 'capture-ui';
 import { dataElementTypes, type DataElement } from '../metaData';
-import { convertMomentToDateFormatString } from '../utils/converters/date';
+import { convertIsoToLocalCalendar } from '../utils/converters/date';
 import { stringifyNumber } from './common/stringifyNumber';
 import { MinimalCoordinates } from '../components/MinimalCoordinates';
 import { TooltipOrgUnit } from '../components/Tooltips/TooltipOrgUnit';
 
 
 function convertDateForView(rawValue: string): string {
     const momentDate = moment(rawValue);
-    return convertMomentToDateFormatString(momentDate);
+    const dateString = momentDate.format('YYYY-MM-DD');
+    return convertIsoToLocalCalendar(dateString);
 }
 function convertDateTimeForView(rawValue: string): string {
     const momentDate = moment(rawValue);
-    const dateString = convertMomentToDateFormatString(momentDate);
+    const dateString = momentDate.format('YYYY-MM-DD');
     const timeString = momentDate.format('HH:mm');
-    return `${dateString} ${timeString}`;
+
+    const localDate = convertIsoToLocalCalendar(dateString);
+    return `${localDate} ${timeString}`;
 }
+
 function convertTimeForView(rawValue: string): string {
     const momentDate = moment(rawValue, 'HH:mm', true);
     return momentDate.format('HH:mm');

src/core_modules/capture-core/converters/formToClient.js

@@ -1,8 +1,9 @@
 // @flow
+import moment from 'moment';
 import isString from 'd2-utilizr/lib/isString';
 import { parseNumber, parseTime } from 'capture-core-utils/parsers';
 import { dataElementTypes } from '../metaData';
-import { parseDate } from '../utils/converters/date';
+import { parseDate, convertLocalToIsoCalendar } from '../utils/converters/date';
 
 type DateTimeValue = {
     date: string,
@@ -25,18 +26,24 @@ function convertDateTime(formValue: DateTimeValue): ?string {
     const minutes = momentTime.minute();
 
     const parsedDate = editedDate ? parseDate(editedDate) : null;
-    if (!(parsedDate && parsedDate.isValid)) return null;
-    // $FlowFixMe[incompatible-type] automated comment
-    const momentDateTime: moment$Moment = parsedDate.momentDate;
+    if (!(parsedDate && parsedDate.isValid && parsedDate.momentDate)) return null;
+
+    const formattedDate = parsedDate.momentDate.format('YYYY-MM-DD');
+    const isoDate = convertLocalToIsoCalendar(formattedDate);
+    const momentDateTime = moment(isoDate);
     momentDateTime.hour(hours);
     momentDateTime.minute(minutes);
     return momentDateTime.toISOString();
 }
 
 function convertDate(dateValue: string) {
     const parsedDate = parseDate(dateValue);
-    // $FlowFixMe[incompatible-use] automated comment
-    return parsedDate.isValid ? parsedDate.momentDate.toISOString() : null;
+    if (!parsedDate.isValid || !parsedDate.momentDate) {
+        return null;
+    }
+    const formattedDate = parsedDate.momentDate.format('YYYY-MM-DD');
+
+    return convertLocalToIsoCalendar(formattedDate);
 }
 
 function convertTime(timeValue: string) {

src/core_modules/capture-core/metaData/SystemSettings/SystemSettings.js

@@ -4,4 +4,5 @@ export class SystemSettings {
     dateFormat: string;
     dir: string;
     trackerAppRelativePath: string;
+    calendar: string;
 }

src/core_modules/capture-core/metaDataStoreLoaders/systemSettings/cacheSystemSetttings.js

@@ -10,7 +10,7 @@ function isLangRTL(code) {
 
 export async function cacheSystemSettings(
     uiLocale: string,
-    systemSettings: { dateFormat: string, serverTimeZoneId: string },
+    systemSettings: { dateFormat: string, serverTimeZoneId: string, calendar: string, },
 ) {
     const systemSettingsArray = [
         {
@@ -25,6 +25,10 @@ export async function cacheSystemSettings(
             id: 'serverTimeZoneId',
             value: systemSettings.serverTimeZoneId,
         },
+        {
+            id: 'calendar',
+            value: systemSettings.calendar,
+        },
     ];
 
     const storageController = getMainStorageController();

src/core_modules/capture-core/utils/converters/date/convertIsoToLocalCalendar.js

@@ -0,0 +1,28 @@
+// @flow
+import {
+    convertFromIso8601,
+} from '@dhis2/multi-calendar-dates';
+import { systemSettingsStore } from '../../../../capture-core/metaDataMemoryStores';
+import { padWithZeros } from './padWithZeros';
+
+/**
+ * Converts a date from ISO calendar to local calendar
+ * @export
+ * @param {string} isoDate - date in ISO format
+ * @returns {string}
+ */
+
+export function convertIsoToLocalCalendar(isoDate: ?string): string {
+    if (!isoDate) {
+        return '';
+    }
+    const calendar = systemSettingsStore.get().calendar;
+    const dateFormat = systemSettingsStore.get().dateFormat;
+
+    const { year, eraYear, month, day } = convertFromIso8601(isoDate, calendar);
+    const localYear = calendar === 'ethiopian' ? eraYear : year;
+
+    return dateFormat === 'DD-MM-YYYY'
+        ? `${padWithZeros(day, 2)}-${padWithZeros(month, 2)}-${padWithZeros(localYear, 4)}`
+        : `${padWithZeros(localYear, 4)}-${padWithZeros(month, 2)}-${padWithZeros(day, 2)}`;
+}