feat: add support for multi calendar dates

[d-rita]

Fixes DHIS2-17446

---

Description:

• Using the Calendar Input component from the UI library that has support for multi calendars.

Tasks

• Create new date input component using CalendarInput
• Set calendar and user locale based on system and user settings

Screenshot

1. iso8601

[dhis2-bot]

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

[tomzemp]

Looking good! 😎. Some things I noticed below:

Persistence
I am seeing that the date does not persist consistently to the backend (see gif). I assume there's some kind of race condition between the input.onChange completing and the handleBlur being called.

I think it would be better if we just posted to the backend (and updated the input value) on the CalendarInput's onDateSelect. We have the update onBlur in the general input cells because we want to be sure that people's changes are final before we commit them, but I think we can judge that the changes are "final" once a date is selected here (this by the way, is consistent with the boolean-radio component). Doing to update onDateSelect should simplify this as we can just pass the date value to both the mutation and the input's onChange method.

Focus

The CalendarInput component has its own onFocus definition (https://github.com/dhis2/ui/blob/master/components/calendar/src/calendar-input/calendar-input.js#L65-L67)m so the one you're passing here isn't having an effect. As a result, the cell does not come into focus and hence you cannot get the details for this cell / the styling for active cell is not applied.

You could put the focus logic on a parent div here to solve this issue (see also the boolean-radio component for an idea).

[tomzemp]

I feel like it might be good to have some protection against the situation where things like this are undefined (e.g. `const {data: userInfo} = useUserInfo(); const keyUiLocale = userInfo?.settings?.keyUiLocale), but this seems to be consistent with how we've done it elsewhere in the app, so I guess we're generally choosing to trust that the backend will reply consistently.

[tomzemp]

Great with the test 🎉

It might be nice to have a test that checks that mutation (mocked) fires with correct date value when you select date / clear date. That might be a bit tricky to implement, but I guess that would also help with some of the logic for testing the other calendars. Could be good to add a separate ticket for adding tests if you think it's too much for the first implementation.

[d-rita]

Added a few test cases that show the mutate function being called with the correct date value on dateSelect and an empty string on clear. Doing this for gregorian, nepali and ethiopian calendars

[tomzemp]

Nice! Looks great 🤩

Will also be good to update again when the improvements are made on the CalendarInput component so that we don't get the [object Object] if a user types something in the field. But I think it makes sense to merge this PR now and then just update the ui dependency later.

[d-rita]

Awesome! Thanks for the review.

Will also be good to update again when the improvements are made on the CalendarInput component so that we don't get the [object Object] if a user types something in the field

I will work on this once the editable calendar input PR is merged.

[dhis2-bot]

🎉 This PR is included in version 100.7.0 🎉

The release is available on:

• AppHub release
• GitHub release

Your semantic-release bot 📦🚀