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

i18n/en.pot

@@ -5,8 +5,8 @@ msgstr ""
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=2; plural=(n != 1)\n"
-"POT-Creation-Date: 2024-01-15T14:35:08.966Z\n"
-"PO-Revision-Date: 2024-01-15T14:35:08.966Z\n"
+"POT-Creation-Date: 2024-10-10T14:28:50.013Z\n"
+"PO-Revision-Date: 2024-10-10T14:28:50.014Z\n"
 
 msgid "Not authorized"
 msgstr "Not authorized"
@@ -525,6 +525,12 @@ msgstr "No"
 msgid "Clear"
 msgstr "Clear"
 
+msgid "Pick a date"
+msgstr "Pick a date"
+
+msgid "Pick a time"
+msgstr "Pick a time"
+
 msgid "Delete"
 msgstr "Delete"
 

package.json

@@ -81,8 +81,9 @@
         "node": ">=14.0.0"
     },
     "resolutions": {
-        "@dhis2/multi-calendar-dates": "^1.1.0",
+        "@dhis2/multi-calendar-dates": "^1.3.2",
         "@dhis2/ui": "^9.2.0",
-        "@dhis2/app-runtime": "^3.10.2"
+        "@dhis2/app-runtime": "^3.10.2",
+        "@dhis2/d2-i18n": "1.1.3"
     }
 }

src/data-workspace/data-entry-cell/entry-field-input.js

@@ -17,6 +17,7 @@ import {
     OptionSet,
     TrueOnlyCheckbox,
     DateInput,
+    DateTimeInput,
 } from '../inputs/index.js'
 
 function InputComponent({ sharedProps, de }) {
@@ -50,6 +51,9 @@ function InputComponent({ sharedProps, de }) {
         case VALUE_TYPES.DATE: {
             return <DateInput {...sharedProps} />
         }
+        case VALUE_TYPES.DATETIME: {
+            return <DateTimeInput {...sharedProps} />
+        }
         default: {
             return <GenericInput {...sharedProps} valueType={de.valueType} />
         }

src/data-workspace/inputs/date-input.js

@@ -2,7 +2,12 @@ import { useConfig } from '@dhis2/app-runtime'
 import { CalendarInput } from '@dhis2/ui'
 import React from 'react'
 import { useField } from 'react-final-form'
-import { useSetDataValueMutation, useUserInfo } from '../../shared/index.js'
+import {
+    useSetDataValueMutation,
+    useUserInfo,
+    convertFromIso8601ToString,
+    convertToIso8601ToString,
+} from '../../shared/index.js'
 import styles from './inputs.module.css'
 import { InputPropTypes } from './utils.js'
 
@@ -42,6 +47,7 @@ export const DateInput = ({
                     form.mutators.setFieldData(fieldname, {
                         lastSyncedValue: value,
                     })
+                    input.onBlur()
                 },
             }
         )
@@ -55,19 +61,35 @@ export const DateInput = ({
     }
 
     return (
-        <div onClick={onFocus}>
+        <div
+            onClick={() => {
+                onFocus()
+                input.onFocus()
+            }}
+            className={styles.dateInputContainer}
+        >
             <CalendarInput
                 {...input}
                 className={styles.dateInput}
                 autoComplete="off"
                 onKeyDown={onKeyDown}
                 disabled={disabled}
                 readOnly={locked}
-                date={input.value}
+                date={
+                    input?.value
+                        ? convertFromIso8601ToString(input.value, calendar)
+                        : ''
+                }
                 calendar={calendar}
                 onDateSelect={(date) => {
-                    input.onChange(date ? date?.calendarDateString : '')
-                    handleChange(date ? date?.calendarDateString : '')
+                    const selectedDate = date?.calendarDateString
+                        ? convertToIso8601ToString(
+                              date?.calendarDateString,
+                              calendar
+                          )
+                        : ''
+                    input.onChange(selectedDate)
+                    handleChange(selectedDate)
                 }}
                 locale={keyUiLocale}
                 clearable

src/data-workspace/inputs/date-input.test.js

@@ -1,9 +1,10 @@
 import { useConfig } from '@dhis2/app-runtime'
+import { ReactFinalForm } from '@dhis2/ui'
 import userEvent from '@testing-library/user-event'
+import PropTypes from 'prop-types'
 import React from 'react'
 import { useSetDataValueMutation, useUserInfo } from '../../shared/index.js'
 import { render } from '../../test-utils/index.js'
-import { FinalFormWrapper } from '../final-form-wrapper.js'
 import { DateInput } from './date-input.js'
 
 jest.mock('../../shared/use-user-info/use-user-info.js', () => ({
@@ -22,12 +23,33 @@ jest.mock('@dhis2/app-runtime', () => {
     }
 })
 
+const DE = 'rkAZZFGFEQ7'
+const COC = 'HllvX50cXC0'
+
+const { Form } = ReactFinalForm
+
+const FormWrapper = ({ initialValues, children }) => (
+    <Form
+        onSubmit={() => {}}
+        initialValues={initialValues}
+        subscriptions={{}}
+        keepDirtyOnReinitialize
+    >
+        {() => children}
+    </Form>
+)
+
+FormWrapper.propTypes = {
+    children: PropTypes.node,
+    initialValues: PropTypes.object,
+}
+
 describe('date input field', () => {
     const props = {
-        cocId: 'HllvX50cXC0',
-        deId: 'rkAZZFGFEQ7',
+        cocId: COC,
+        deId: DE,
         disabled: undefined,
-        fieldname: 'rkAZZFGFEQ7.HllvX50cXC0',
+        fieldname: `${DE}.${COC}`,
         form: {},
         locked: false,
         onFocus: jest.fn(),
@@ -65,13 +87,9 @@ describe('date input field', () => {
         })
 
         const { getByText, getByRole, getByTestId, queryByTestId } = render(
-            <FinalFormWrapper
-                onSubmit={() => jest.fn()}
-                initialValues={{}}
-                keepDirtyOnReinitialize
-            >
+            <FormWrapper initialValues={{}}>
                 <DateInput {...props} />
-            </FinalFormWrapper>
+            </FormWrapper>
         )
         const calendarInputLabel = getByText('Pick a date')
         const calendarInput = getByRole('textbox')
@@ -114,13 +132,9 @@ describe('date input field', () => {
         })
 
         const { getByText, getByRole, getByTestId, getByLabelText } = render(
-            <FinalFormWrapper
-                onSubmit={() => jest.fn()}
-                initialValues={{}}
-                keepDirtyOnReinitialize
-            >
+            <FormWrapper initialValues={{}}>
                 <DateInput {...props} />
-            </FinalFormWrapper>
+            </FormWrapper>
         )
 
         const calendarInput = getByRole('textbox')
@@ -161,19 +175,30 @@ describe('date input field', () => {
         expect(mutate.mock.calls[1][0]).toHaveProperty('value', '2024-07-18')
     })
 
+    it('populates the persisted date on load', async () => {
+        useConfig.mockReturnValue({
+            systemInfo: { calendar: 'gregorian' },
+        })
+
+        const { getByRole } = render(
+            <FormWrapper initialValues={{ [DE]: { [COC]: '2021-04-22' } }}>
+                <DateInput {...props} />
+            </FormWrapper>
+        )
+
+        const calendarInput = getByRole('textbox')
+        expect(calendarInput.value).toBe('2021-04-22')
+    })
+
     it('renders system set calendar, i.e. nepali', async () => {
         useConfig.mockReturnValue({
             systemInfo: { calendar: 'nepali' },
         })
 
         const { getByText, getByRole } = render(
-            <FinalFormWrapper
-                onSubmit={() => jest.fn()}
-                initialValues={{}}
-                keepDirtyOnReinitialize
-            >
+            <FormWrapper initialValues={{}}>
                 <DateInput {...props} />
-            </FinalFormWrapper>
+            </FormWrapper>
         )
 
         const calendarInput = getByRole('textbox')
@@ -187,7 +212,27 @@ describe('date input field', () => {
         expect(calendarInput.value).toBe('2081-04-10')
         // check that mutate function was called
         expect(mutate.mock.calls).toHaveLength(1)
-        expect(mutate.mock.calls[0][0]).toHaveProperty('value', '2081-04-10')
+        expect(mutate.mock.calls[0][0]).toHaveProperty('value', '2024-07-25')
+    })
+
+    it('populates the nepali equivalent of the persisted ISO date', async () => {
+        jest.setSystemTime(new Date('2024-07-25T09:05:00.000Z'))
+
+        useConfig.mockReturnValue({
+            systemInfo: { calendar: 'nepali' },
+        })
+
+        // 2021-04-22 ISO = 2078-01-09 nepali
+        const { getByRole } = render(
+            <FormWrapper
+                initialValues={{ [DE]: { [COC]: '2021-04-22T13:17' } }}
+            >
+                <DateInput {...props} />
+            </FormWrapper>
+        )
+
+        const calendarInput = getByRole('textbox')
+        expect(calendarInput.value).toBe('2078-01-09')
     })
 
     it('renders system set calendar, i.e. ethiopian', async () => {
@@ -196,13 +241,9 @@ describe('date input field', () => {
         })
 
         const { getByText, getByRole } = render(
-            <FinalFormWrapper
-                onSubmit={() => jest.fn()}
-                initialValues={{}}
-                keepDirtyOnReinitialize
-            >
+            <FormWrapper initialValues={{}}>
                 <DateInput {...props} />
-            </FinalFormWrapper>
+            </FormWrapper>
         )
 
         const calendarInput = getByRole('textbox')
@@ -216,6 +257,26 @@ describe('date input field', () => {
         expect(calendarInput.value).toBe('2016-11-18')
         // check that mutate function was called
         expect(mutate.mock.calls).toHaveLength(1)
-        expect(mutate.mock.calls[0][0]).toHaveProperty('value', '2016-11-18')
+        expect(mutate.mock.calls[0][0]).toHaveProperty('value', '2024-07-25')
+    })
+
+    it('populates the ethiopian equivalent of the persisted ISO date', async () => {
+        jest.setSystemTime(new Date('2024-07-25T09:05:00.000Z'))
+
+        useConfig.mockReturnValue({
+            systemInfo: { calendar: 'ethiopian' },
+        })
+
+        // 2021-04-22 ISO = 2013-08-14 ethiopian
+        const { getByRole } = render(
+            <FormWrapper
+                initialValues={{ [DE]: { [COC]: '2021-04-22T13:17' } }}
+            >
+                <DateInput {...props} />
+            </FormWrapper>
+        )
+
+        const calendarInput = getByRole('textbox')
+        expect(calendarInput.value).toBe('2013-08-14')
     })
 })