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-10-17T12:07:03.346Z\n"
-"PO-Revision-Date: 2024-10-17T12:07:03.347Z\n"
+"POT-Creation-Date: 2024-10-18T12:58:59.146Z\n"
+"PO-Revision-Date: 2024-10-18T12:58:59.146Z\n"
 
 msgid "Not authorized"
 msgstr "Not authorized"
@@ -534,6 +534,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,9 +81,11 @@
         "node": ">=14.0.0"
     },
     "resolutions": {
-        "@dhis2/multi-calendar-dates": "^1.3.1",
+        "@dhis2/multi-calendar-dates": "^1.3.2",
         "@dhis2/ui": "^9.2.0",
         "@dhis2/app-runtime": "^3.10.2",
+        "@dhis2/d2-i18n": "1.1.3",
+        "@dhis2/app-runtime": "^3.10.2",
         "@dhis2/d2-i18n": "1.1.3"
     }
 }

src/data-workspace/data-details-sidebar/audit-log.js

@@ -1,3 +1,4 @@
+import { useConfig } from '@dhis2/app-runtime'
 import i18n from '@dhis2/d2-i18n'
 import {
     CircularLoader,
@@ -17,6 +18,8 @@ import {
     ExpandableUnit,
     useConnectionStatus,
     DateText,
+    convertFromIso8601ToString,
+    VALUE_TYPES,
 } from '../../shared/index.js'
 import styles from './audit-log.module.css'
 import useDataValueContext from './use-data-value-context.js'
@@ -29,6 +32,8 @@ export default function AuditLog({ item }) {
     const { open, setOpen, openRef } = useOpenState(item)
     const dataValueContext = useDataValueContext(item, openRef.current)
     const timeZone = Intl.DateTimeFormat()?.resolvedOptions()?.timeZone
+    const { systemInfo = {} } = useConfig()
+    const { calendar = 'gregory' } = systemInfo
 
     if (!offline && (!open || dataValueContext.isLoading)) {
         return (
@@ -98,15 +103,35 @@ export default function AuditLog({ item }) {
                         {audits.map((audit) => {
                             const {
                                 modifiedBy: user,
-                                previousValue,
-                                value,
+                                previousValue: nonParsedPreviousValue,
+                                value: nonParsedValue,
                                 created,
                                 auditType,
                                 dataElement: de,
                                 categoryOptionCombo: coc,
                                 period: pe,
                                 orgUnit: ou,
                             } = audit
+
+                            const value = [
+                                VALUE_TYPES.DATETIME,
+                                VALUE_TYPES.DATE,
+                            ].includes(item.valueType)
+                                ? convertFromIso8601ToString(
+                                      nonParsedValue,
+                                      calendar
+                                  )
+                                : nonParsedValue
+                            const previousValue = [
+                                VALUE_TYPES.DATETIME,
+                                VALUE_TYPES.DATE,
+                            ].includes(item.valueType)
+                                ? convertFromIso8601ToString(
+                                      nonParsedPreviousValue,
+                                      calendar
+                                  )
+                                : nonParsedPreviousValue
+
                             const key = `${de}-${pe}-${ou}-${coc}-${created}`
 
                             return (
@@ -160,6 +185,7 @@ AuditLog.propTypes = {
         categoryOptionCombo: PropTypes.string.isRequired,
         dataElement: PropTypes.string.isRequired,
         comment: PropTypes.string,
+        valueType: PropTypes.string,
     }).isRequired,
 }
 

src/data-workspace/data-details-sidebar/audit-log.test.js

@@ -1,10 +1,18 @@
+import { useConfig } from '@dhis2/app-runtime'
 import { waitFor, within } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import React from 'react'
 import { render } from '../../test-utils/index.js'
 import AuditLog from './audit-log.js'
 import useDataValueContext from './use-data-value-context.js'
 
+jest.mock('@dhis2/app-runtime', () => ({
+    ...jest.requireActual('@dhis2/app-runtime'),
+    useConfig: jest.fn(() => ({
+        systemInfo: { serverTimeZoneId: 'Etc/UTC', calendar: 'gregory' },
+    })),
+}))
+
 jest.mock('./use-data-value-context.js', () => ({
     __esModule: true,
     default: jest.fn(),
@@ -18,6 +26,7 @@ describe('<AuditLog />', () => {
     }
 
     afterEach(() => {
+        jest.clearAllMocks()
         useDataValueContext.mockClear()
     })
 
@@ -79,7 +88,7 @@ describe('<AuditLog />', () => {
                 auditType: 'UPDATE',
                 created: new Date('2021-02-01').toISOString(),
                 modifiedBy: 'Firstname2 Lastname2',
-                prevValue: '19',
+                previousValue: '19',
                 value: '21',
             },
             {
@@ -140,4 +149,152 @@ describe('<AuditLog />', () => {
             getByText('audit dates are given in UTC time')
         ).toBeInTheDocument()
     })
+
+    it('renders the date/datetime values in system calendar (ethiopian)', async () => {
+        useConfig.mockImplementation(() => ({
+            systemInfo: {
+                calendar: 'ethiopian',
+            },
+        }))
+        const audits = [
+            {
+                auditType: 'DELETE',
+                created: new Date('2021-03-01').toISOString(),
+                modifiedBy: 'Firstname Lastname',
+                value: '2021-09-10',
+            },
+            {
+                auditType: 'UPDATE',
+                created: new Date('2021-02-01').toISOString(),
+                modifiedBy: 'Firstname2 Lastname2',
+                previousValue: '2021-09-10',
+                value: '2021-09-11',
+            },
+        ]
+
+        const dateItem = {
+            categoryOptionCombo: 'coc-id',
+            dataElement: 'de-id',
+            comment: 'This is a comment',
+            valueType: 'DATE',
+        }
+
+        const data = { audits }
+        useDataValueContext.mockImplementation(() => ({
+            isLoading: false,
+            data,
+        }))
+
+        const { getByRole, getAllByRole, queryByRole, container } = render(
+            <AuditLog item={dateItem} />
+        )
+
+        // Expand and wait for data to load
+        userEvent.click(container.querySelector('summary'))
+        await waitFor(() => {
+            expect(getByRole('group')).toHaveAttribute('open')
+            expect(queryByRole('progressbar')).not.toBeInTheDocument()
+        })
+
+        // the number of rows is: the length of audits + 1 (for header row)
+        const auditRows = getAllByRole('row')
+
+        expect(auditRows).toHaveLength(audits.length + 1)
+
+        const firstChangeName = within(auditRows[1]).getByText(
+            'Firstname Lastname',
+            {}
+        )
+        expect(firstChangeName).toBeInTheDocument()
+        const firstChangeValue = within(auditRows[1]).getByText(
+            '2013-13-05',
+            {}
+        )
+        expect(firstChangeValue).toBeInTheDocument()
+
+        const secondChangeName = within(auditRows[2]).getByText(
+            'Firstname2 Lastname2',
+            {}
+        )
+        expect(secondChangeName).toBeInTheDocument()
+        const secondChangeValue = within(auditRows[2]).getByText(
+            '2014-01-01',
+            {}
+        )
+        expect(secondChangeValue).toBeInTheDocument()
+    })
+
+    it('renders the date/datetime values in system calendar (gregorian)', async () => {
+        useConfig.mockImplementation(() => ({
+            systemInfo: {
+                calendar: 'gregory',
+            },
+        }))
+        const audits = [
+            {
+                auditType: 'DELETE',
+                created: new Date('2021-03-01').toISOString(),
+                modifiedBy: 'Firstname Lastname',
+                value: '2021-09-10',
+            },
+            {
+                auditType: 'UPDATE',
+                created: new Date('2021-02-01').toISOString(),
+                modifiedBy: 'Firstname2 Lastname2',
+                previousValue: '2021-09-10',
+                value: '2021-09-11',
+            },
+        ]
+
+        const dateItem = {
+            categoryOptionCombo: 'coc-id',
+            dataElement: 'de-id',
+            comment: 'This is a comment',
+            valueType: 'DATE',
+        }
+
+        const data = { audits }
+        useDataValueContext.mockImplementation(() => ({
+            isLoading: false,
+            data,
+        }))
+
+        const { getByRole, getAllByRole, queryByRole, container } = render(
+            <AuditLog item={dateItem} />
+        )
+
+        // Expand and wait for data to load
+        userEvent.click(container.querySelector('summary'))
+        await waitFor(() => {
+            expect(getByRole('group')).toHaveAttribute('open')
+            expect(queryByRole('progressbar')).not.toBeInTheDocument()
+        })
+
+        // the number of rows is: the length of audits + 1 (for header row)
+        const auditRows = getAllByRole('row')
+
+        expect(auditRows).toHaveLength(audits.length + 1)
+
+        const firstChangeName = within(auditRows[1]).getByText(
+            'Firstname Lastname',
+            {}
+        )
+        expect(firstChangeName).toBeInTheDocument()
+        const firstChangeValue = within(auditRows[1]).getByText(
+            '2021-09-10',
+            {}
+        )
+        expect(firstChangeValue).toBeInTheDocument()
+
+        const secondChangeName = within(auditRows[2]).getByText(
+            'Firstname2 Lastname2',
+            {}
+        )
+        expect(secondChangeName).toBeInTheDocument()
+        const secondChangeValue = within(auditRows[2]).getByText(
+            '2021-09-11',
+            {}
+        )
+        expect(secondChangeValue).toBeInTheDocument()
+    })
 })

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