fix: make datetime input support multicalendar [DHIS2-17618]

tomzemp commented 2 weeks ago

See https://dhis2.atlassian.net/browse/DHIS2-17618

Background

This PR makes the datetime input use our DHIS2 calendar component (which will load based on the calendar set in system settings). We decided that for now it was easier to just combine the DHIS2 calendar with a browser-native time picker (rather than the alternative of refactoring the calendar to also incorporate the possibility to select a time). To be honest, since we don't expect this to be used that much, I just tried to go for something functional, not something super designed or performant 😄 .

While working on this, I noticed that valid Ethiopian dates (2016-13-05) were not persisting, which led to a discussion with Jan Bernitt where we clarified that the objective from now onwards (though not necessarily in the past) is that the backend will store ISO dates and that the frontend needs to convert these. Hence I made a bug report for the existing Date input (https://dhis2.atlassian.net/jira/software/c/projects/DHIS2/issues/DHIS2-18219) and also fixed that in the context of this PR.

You can create a data element of type:datetime and then add it to a dataset to look at the changes:

Notes

The datetime input (like also the date input and radio-boolean input) updates when a selection is made. This seems reasonable as we had sync onBlur for the general input to prevent unnecessary syncing while the user was typing and changing the input, but the datetime input changes on selection. The one downside of this is that the browser-native time input behaves a bit different from browser to browser and chrome will change the value of the time input when you type the first hour part (e.g. if you type 12, chrome sets a time of 12:00 on the input). This leads to some unnecessary syncing, but I think this is acceptable (particularly as we don't expect this to be used and other browsers like Firefox and Opera make you enter a valid time before it sets the value of the input) -I've added input.onFocus() to the input as this gives us the proper blue border styling on the input, and similarly have done input.onBlur() after the sync...which is a bit weirder logically, but it also ensures that we get the box to change green on a successful sync.

Testing I've added a number of automated tests to cover the basic use of the input (covering gregorian/ISO, Ethiopian, and Nepali calendars). I've also done manual testing (which made me notice the issue of needing to convert to ISO dates 🤪)

dhis2-bot commented 2 weeks ago

🚀 Deployed on https://pr-404--dhis2-data-entry.netlify.app

tomzemp commented 1 week ago

Note: I noticed after merging that the audit values for date/datetime showed up as ISO (because they're persisted as ISO), so I added a commit to convert this to system calendar (which I think makes more sense as it is what the user sees as the value) (it's still a bit confusing because the real value at the moment is an ISO date)

dhis2-bot commented 1 week ago

:tada: This PR is included in version 100.8.5 :tada:

The release is available on:

Your semantic-release bot :package::rocket:

dhis2 / aggregate-data-entry-app

fix: make datetime input support multicalendar [DHIS2-17618] #404

Background

Notes