fix: display local time in tooltips

dhis2 · Jan 6, 2025 · 013db2c · 013db2c
1 parent 383c66f
commit 013db2c
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 22 deletions.
diff --git a/package.json b/package.json
@@ -10,8 +10,7 @@
         "packages/rules-engine"
     ],
     "dependencies": {
-        "@dhis2/rules-engine-javascript": "101.19.1",
-        "@dhis2-ui/calendar": "^10.0.3",
+        "@dhis2/rules-engine-javascript": "101.20.3",
         "@dhis2/app-runtime": "^3.9.3",
         "@dhis2/d2-i18n": "^1.1.0",
         "@dhis2/d2-icons": "^1.0.1",
@@ -20,6 +19,7 @@
         "@dhis2/d2-ui-rich-text": "^7.4.0",
         "@dhis2/d2-ui-sharing-dialog": "^7.3.3",
         "@dhis2/ui": "^9.10.1",
+        "@dhis2-ui/calendar": "^10.0.3",
         "@joakim_sm/react-infinite-calendar": "^2.4.2",
         "@material-ui/core": "3.9.4",
         "@material-ui/icons": "3",

diff --git a/src/core_modules/capture-core/components/WidgetEnrollment/WidgetEnrollment.component.js b/src/core_modules/capture-core/components/WidgetEnrollment/WidgetEnrollment.component.js
@@ -74,6 +74,7 @@ export const WidgetEnrollmentPlain = ({
 }: PlainProps) => {
     const [open, setOpenStatus] = useState(true);
     const { fromServerDate } = useTimeZoneConversion();
+    const localDateTime: string = (convertValue(enrollment?.updatedAt, dataElementTypes.DATETIME): any);
     const geometryType = getGeometryType(enrollment?.geometry?.type);
     const { displayName: orgUnitName, ancestors } = useOrgUnitNameWithAncestors(enrollment?.orgUnit);
     const { displayName: ownerOrgUnitName, ancestors: ownerAncestors } = useOrgUnitNameWithAncestors(ownerOrgUnit?.id);
@@ -157,7 +158,7 @@ export const WidgetEnrollmentPlain = ({
                                 <IconClock16 color={colors.grey600} />
                             </span>
                             {i18n.t('Last updated')}
-                            <Tooltip content={(fromServerDate(enrollment.updatedAt).toLocaleString())}>
+                            <Tooltip content={(fromServerDate(localDateTime).toLocaleString())}>
                                 {moment(fromServerDate(enrollment.updatedAt)).fromNow()}
                             </Tooltip>
                         </div>

diff --git a/src/core_modules/capture-core/components/WidgetNote/NoteSection/NoteSection.js b/src/core_modules/capture-core/components/WidgetNote/NoteSection/NoteSection.js
@@ -9,6 +9,8 @@ import { colors, spacersNum, Button, Tooltip } from '@dhis2/ui';
 import moment from 'moment';
 import { useTimeZoneConversion } from '@dhis2/app-runtime';
 import { TextField } from '../../FormFields/New';
+import { convertValue as convertValueClientToView } from '../../../converters/clientToView';
+import { dataElementTypes } from '../../../metaData';
 
 const FocusTextField = withFocusSaver()(TextField);
 
@@ -97,26 +99,29 @@ const NoteSectionPlain = ({
         setEditing(false);
     }, [handleAddNote, newNoteValue]);
 
-    const NoteItem = ({ value, storedAt, createdBy }) => (
-        <div data-test="note-item" className={cx(classes.item)}>
-            {/* TODO: add avatar */}
-            <div className={classes.rightColumn}>
-                <div className={classes.header}>
-                    {createdBy && <span className={cx(classes.headerText, classes.name)}>
-                        {createdBy.firstName} {' '} {createdBy.surname}
-                    </span>}
-                    <span className={cx(classes.headerText, classes.lastUpdated)}>
-                        <Tooltip content={fromServerDate(storedAt).toLocaleString()}>
-                            {moment(fromServerDate(storedAt)).fromNow()}
-                        </Tooltip>
-                    </span>
-                </div>
-                <div className={classes.body}>
-                    <Parser>{value}</Parser>
+    const NoteItem = ({ value, storedAt, createdBy }) => {
+        const localDateTime: string = (convertValueClientToView(storedAt, dataElementTypes.DATETIME): any);
+        return (
+            <div data-test="note-item" className={cx(classes.item)}>
+                {/* TODO: add avatar */}
+                <div className={classes.rightColumn}>
+                    <div className={classes.header}>
+                        {createdBy && <span className={cx(classes.headerText, classes.name)}>
+                            {createdBy.firstName} {' '} {createdBy.surname}
+                        </span>}
+                        <span className={cx(classes.headerText, classes.lastUpdated)}>
+                            <Tooltip content={fromServerDate(localDateTime).toLocaleString()}>
+                                {moment(fromServerDate(storedAt)).fromNow()}
+                            </Tooltip>
+                        </span>
+                    </div>
+                    <div className={classes.body}>
+                        <Parser>{value}</Parser>
+                    </div>
                 </div>
             </div>
-        </div>
-    );
+        );
+    };
 
 
     return (

diff --git a/...re/components/WidgetStagesAndEvents/Stages/Stage/StageOverview/StageOverview.component.js b/...re/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';
+import { convertValue as convertValueClientToView } from '../../../../../converters/clientToView';
+import { dataElementTypes } from '../../../../../metaData';
 
 const styles = {
     container: {
@@ -71,11 +73,12 @@ const getLastUpdatedAt = (events, fromServerDate) => {
 
     if (lastEventUpdated) {
         const { updatedAt } = lastEventUpdated;
+        const localDateTime: string = (convertValueClientToView(updatedAt, dataElementTypes.DATETIME): any);
         return lastEventUpdated?.updatedAt && moment(updatedAt).isValid()
             ? (
                 <>
                     {i18n.t('Last updated')}&nbsp;
-                    <Tooltip content={fromServerDate(updatedAt).toLocaleString()}>
+                    <Tooltip content={fromServerDate(localDateTime).toLocaleString()}>
                         {moment(fromServerDate(updatedAt)).fromNow()}
                     </Tooltip>
                 </>