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

alaa-yahia · 2024-12-05T00:21:30Z

Implements DHIS2-18310 & DHIS2-18311 & DHIS2-18309

Modified clientToList, clientToForm and clientToView converters to handle local format conversions (DHIS2-18310)
Modified FormToClient converter to handle ISO format (DHIS2-18309)
Ensure that all “Last updated” calculations are working when local calendar is used
Ensure all date pickers (form and working list) are using local calendar.
Enable non-Gregorian calendars in working list filters DHIS2-18311

package.json

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

simonadomnisoru · 2024-12-12T16:15:43Z

Hi @alaa-yahia,
I noticed two issues with the Age field:

When selecting a date from the calendar, the year, months, and days are filled with incorrect values. (i.e. In the video below, I selected today's date from the Ethiopian calendar, so the year, months, and day should have been filled with 0).
When typing a value into the days field, the calendar is filled with the gregorian value of the date.

Screen.Recording.2024-12-12.at.16.51.40.mov

In the video above I used the Ethiopian calendar. Can you have a look? Thank you!

JoakimSM

A good start, but some things we will have to work a bit more on.

In addition to the individual comments we should convert the "last updated" tooltips from ISO to local calendar (I saw this in both the stages and events Widget and the enrollment Widget). Had a very quick look at the stages and events Widget and for now I think you can use something like moment(fromServerDate(updatedAt)).toISOString() and put the result into the clientToView converter of type DATETIME (we should probably also use the serverToClient converter, but this will be checked and resolved in separate ticket)

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

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

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

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

src/core_modules/capture-ui/AgeField/AgeField.component.js

…ent date (#3905) feat: typing the date when editing enrollment and incident date

JoakimSM

In addition to other comments:

We should fix the logic in getDateRangeValidator and getDateTimeRangeValidator. These validators are being used in the search form when using tracked entity attributes of value type date and dateTime. We should replace the parseDate logic and leverage the validation done in the ui library component.
Don't use parseDate on local dates. I think this means that we should remove parseDate from the codebase in its entirety (I didn't see any valid reason to use it anymore, but let me know if I missed something)

JoakimSM · 2025-01-06T14:55:43Z

src/core_modules/capture-ui/AgeField/AgeField.component.js

-    const years = now.diff(age, 'years');
-    age.add(years, 'years');
+function getCalculatedValues(dateValue: ?string): AgeValues {
+    const calendar = systemSettingsStore.get().calendar;


One architectural principle that we have been trying to adhere to is that the capture-ui could be extracted and used in any app. I.e., it shouldn't retrieve data from app specific objects like we do here. Can we instead of this, pass in calendarType to the component?

JoakimSM · 2025-01-06T15:02:48Z

src/core_modules/capture-ui/AgeField/AgeField.component.js

@@ -10,6 +12,7 @@ import { AgeDateInput } from '../internal/AgeInput/AgeDateInput.component';
 import defaultClasses from './ageField.module.css';
 import { orientations } from '../constants/orientations.const';
 import { withInternalChangeHandler } from '../HOC/withInternalChangeHandler';
+import { convertStringToTemporal, convertTemporalToString } from '../../capture-core/utils/converters/date';


For the reasons mentioned in the comment on line 57; can we put these helper functions in capture-core-utils (capture-core-utils/date is probably fine for now) and pass in the calendarType and dateFormat instead of getting these values from systemSettingsStore internally in the functions? If needed, we can also create helper functions in the location where the helper functions currently are found, but these helpers shouldn't be invoked from files in capture-ui.

JoakimSM · 2025-01-07T12:32:08Z

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

+    const momentDate = moment(localDate);
+    if (!momentDate.isValid()) {
+        return '';
+    }
+
+    const formattedIsoDate = momentDate.format('YYYY-MM-DD');


We shouldn't use moment on our input here since the input is in the local calendar type.

JoakimSM · 2025-01-07T14:19:32Z

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

@@ -36,7 +39,7 @@ function convertDateTime(formValue: DateTimeValue): ?string {
 function convertDate(dateValue: string) {
    const parsedDate = parseDate(dateValue);


Inside the parseDate function, the input date is being validated using moment and we shouldn't do that since the input is in the local calendar type. Looking into this a bit, there should be no need to validate the date in the converter here as this should be handled elsewhere. I.e., you can assume the date is valid at this point. So, using something like convertStringToTemporal and then passing the ISOstring of the returned Temporal to convertLocalToIsoCalendar could be the way to go (or alternatively convertLocalToIsoCalendar could handle the 'dd-mm-yyyy' format).

We should look into the dateTime converter as well and apply the same idea there.

JoakimSM · 2025-01-08T10:16:59Z

src/core_modules/capture-ui/AgeField/AgeField.component.js

-    const parseData = dateValue && onParseDate(dateValue);
+
+function getCalculatedValues(dateValue: ?string): AgeValues {
+    const parseData = dateValue && parseDate(dateValue);


We can't use the parseDate function as is because it is using moment internally (and we are passing in a date from a local calendar type). Let's use the following approach here:

In handleDateBlur in this file, let's make sure we check the validation that is passed in from the component and only invoke getCalculatedVaules if the date is valid (currently, the app crashing sometimes with invalid dates). The validation executed in the component is the source of truth for whether the date is valid or not.

Don't use parseDate here. After point .1, the value passed in to getCalculatedValues should always be valid and you should be able to use convertStringToTemporal directly.

In general, we should replace parseDate in our codebase if it is being used on dates of local calendar types.

simonadomnisoru

Hi @alaa-yahia, I found a few bugs that I hope you can look into. I tested with the Ethiopian and Nepalese calendars. Thank you!

simonadomnisoru · 2025-01-14T08:45:06Z

src/core_modules/capture-ui/AgeField/AgeField.component.js

-    const years = now.diff(age, 'years');
-    age.add(years, 'years');
+function getCalculatedValues(dateValue: ?string, calendarType: ?string, dateFormat: ?string): AgeValues {
+    const now = Temporal.Now.plainDateISO().withCalendar(calendarType);


I get a runtime error when selecting a date in the AGE field when using the ethiopian or the nepali calendar type.

simonadomnisoru · 2025-01-14T09:03:24Z

...-core/components/WidgetStagesAndEvents/Stages/Stage/StageOverview/StageOverview.component.js

@@ -12,6 +12,8 @@ import { statusTypes } from 'capture-core/events/statusTypes';
 import { NonBundledDhis2Icon } from '../../../../NonBundledDhis2Icon';
 import type { Props } from './stageOverview.types';
 import { isEventOverdue } from '../StageDetail/hooks/helpers';


The event status label in the StagesAndEvents widget displayed the ISO date. Can you have a look?

Thanks!

simonadomnisoru · 2025-01-14T09:28:32Z

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

@@ -5,21 +5,20 @@ 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 {


On the search page, the currentSearchTerms are not converted correctly. I think the problem arises when using the clientToList converter in the SearchResultsHeader.component. In the screenshot bellow, the label Birth date: 05-05-2017 -> 07-05-2017 should be displayed.

simonadomnisoru · 2025-01-14T10:03:20Z

src/core_modules/capture-core/components/WidgetEnrollment/Date/Date.component.js

+                <DateField
+                    width={200}
+                    value={selectedDate}
+                    onBlur={dateChangeHandler}
                    label={dateLabel}
-                    date={selectedDate}
+                    dense
                    locale={locale}
-                    onDateSelect={dateChangeHandler}
                />


The calendar for the enrollment date and incident date in the WidgetEnrollment component is in ISO format. After selecting a date, the value in the input field is also displayed in ISO format.

Screen.Recording.2025-01-14.at.10.58.47.mov

…lendar

…non-gregorian-calendars-in-views-and-lists

alaa-yahia · 2025-01-16T01:49:07Z

@simonadomnisoru I've pushed bug fixes addressing your feedbacks. Could you take another look when you have a time?
Thank you

alaa-yahia requested a review from a team as a code owner December 5, 2024 00:21

alaa-yahia force-pushed the DHIS2-18310-enable-non-gregorian-calendars-in-views-and-lists branch from 8983fd7 to 0294f8d Compare December 5, 2024 11:00

simonadomnisoru reviewed Dec 10, 2024

View reviewed changes

JoakimSM reviewed Dec 18, 2024

View reviewed changes

alaa-yahia requested review from JoakimSM and simonadomnisoru December 23, 2024 08:34

alaa-yahia and others added 16 commits January 6, 2025 12:37

feat: enable non gregorian calendars in views and lists

136430d

fix: working list filters to use gregorian

b8fd941

fix: working list filter runtime error when dd-mm-yyyy format is passed

e378551

fix: missing rules engine in dependencies

8e44c3c

fix: working list filter not displaying local date

1f2518d

fix: reduce the complexity of getUpdatedValue

9a3d609

chore: refactor working lists filter component

3a3d0b2

fix: convert age values to local date

53ef00e

feat: [DHIS2 15466] typing the date when editing enrollment and incid…

1d3faa6

…ent date (#3905) feat: typing the date when editing enrollment and incident date

fix: age values not filled correctly

7968ea7

fix: keep local calendar date in state in working list filters

e8d226f

fix: rename calendarMaxMoment to calendarMax

8ce68dd

fix: remove formating lines

b0dc55c

fix: day value not giving correct result in age field

2cc70be

fix: flow errors

383c66f

fix: display local time in tooltips

013db2c

alaa-yahia force-pushed the DHIS2-18310-enable-non-gregorian-calendars-in-views-and-lists branch from da9bf63 to 013db2c Compare January 6, 2025 11:22

fix: date is not valid error not displayed

8dd1110

JoakimSM reviewed Jan 8, 2025

View reviewed changes

alaa-yahia added 4 commits January 9, 2025 13:42

fix: remove app specific objects

209860c

refactor: simplify converters logic

c8d1fbd

fix: logic of dateRange & dateTimeRange validators

9805435

chore: pass format and calendar as props

d67810b

simonadomnisoru reviewed Jan 14, 2025

View reviewed changes

alaa-yahia added 5 commits January 16, 2025 01:36

fix: status label in the StagesAndEvents widget display ISO date

068c3ef

fix: currentSearchTerms are not converted correctly

cda3dab

fix: enrollment and incident date display in iso

217dc25

fix: runtime error when selecting a date in age field in ethiopian ca…

d05011a

…lendar

Merge remote-tracking branch 'origin/master' into DHIS2-18310-enable-…

78a2af8

…non-gregorian-calendars-in-views-and-lists

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

alaa-yahia commented Dec 5, 2024 •

edited

Loading

simonadomnisoru commented Dec 12, 2024

JoakimSM left a comment

JoakimSM left a comment

JoakimSM Jan 6, 2025

JoakimSM Jan 6, 2025

JoakimSM Jan 7, 2025

JoakimSM Jan 7, 2025

JoakimSM Jan 8, 2025

simonadomnisoru left a comment

simonadomnisoru Jan 14, 2025

simonadomnisoru Jan 14, 2025

simonadomnisoru Jan 14, 2025

simonadomnisoru Jan 14, 2025 •

edited

Loading

alaa-yahia commented Jan 16, 2025

		@@ -36,7 +39,7 @@ function convertDateTime(formValue: DateTimeValue): ?string {
		function convertDate(dateValue: string) {
		const parsedDate = parseDate(dateValue);

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

Are you sure you want to change the base?

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

Conversation

alaa-yahia commented Dec 5, 2024 • edited Loading

simonadomnisoru commented Dec 12, 2024

JoakimSM left a comment

Choose a reason for hiding this comment

JoakimSM left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

simonadomnisoru left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

simonadomnisoru Jan 14, 2025 • edited Loading

Choose a reason for hiding this comment

alaa-yahia commented Jan 16, 2025

alaa-yahia commented Dec 5, 2024 •

edited

Loading

simonadomnisoru Jan 14, 2025 •

edited

Loading