feat: geometry scheduledat occuredat in changelog

src/core_modules/capture-core/components/WidgetEventEdit/EventChangelogWrapper/EventChangelogWrapper.component.js

@@ -42,9 +42,19 @@ export const EventChangelogWrapper = ({ formFoundation, eventId, eventData, ...p
             return acc;
         }, {});
 
+        const additionalFields = {
+            geometry: {
+                id: 'geometry',
+                name: formFoundation.featureType,
+                type: formFoundation.featureType === 'Polygon' ?
+                    dataElementTypes.POLYGON : dataElementTypes.COORDINATE,
+            },
+        };
+
         return {
             ...fieldElementsById,
             ...fieldElementsContext,
+            ...additionalFields,
         };
     }, [formFoundation]);
 

src/core_modules/capture-core/components/WidgetsChangelog/common/Changelog/Changelog.types.js

@@ -6,13 +6,15 @@ type CreatedChange = {|
     type: typeof CHANGE_TYPES.CREATED,
     dataElement?: string,
     attribute?: string,
+    property?: string,
     currentValue: any,
 |}
 
 type UpdatedChange = {|
     type: typeof CHANGE_TYPES.UPDATED,
     dataElement?: string,
     attribute?: string,
+    property?: string,
     previousValue: any,
     currentValue: any,
 |}
@@ -21,6 +23,7 @@ type DeletedChange = {|
     type: typeof CHANGE_TYPES.DELETED,
     dataElement?: string,
     attribute?: string,
+    property?: string,
     previousValue: any,
 |}
 

src/core_modules/capture-core/components/WidgetsChangelog/common/ChangelogTable/ChangelogCells/ChangelogChangeCell.js → src/core_modules/capture-core/components/WidgetsChangelog/common/ChangelogTable/ChangelogCells/ChangelogChangeCell/ChangelogChangeCell.js

@@ -3,8 +3,8 @@ import React from 'react';
 import log from 'loglevel';
 import { Tag } from '@dhis2/ui';
 import i18n from '@dhis2/d2-i18n';
-import { CHANGE_TYPES } from '../../Changelog/Changelog.constants';
-import { errorCreator } from '../../../../../../capture-core-utils';
+import { CHANGE_TYPES } from '../../../Changelog/Changelog.constants';
+import { errorCreator } from '../../../../../../../capture-core-utils';
 
 type Config = {
     label: string,

src/core_modules/capture-core/components/WidgetsChangelog/common/ChangelogTable/ChangelogCells/ChangelogChangeCell/index.js

@@ -0,0 +1,3 @@
+// @flow
+
+export { ChangelogChangeCell } from './ChangelogChangeCell';

src/core_modules/capture-core/components/WidgetsChangelog/common/ChangelogTable/ChangelogCells/ChangelogValueCell/ChangelogValueCell.js

@@ -0,0 +1,98 @@
+// @flow
+import React from 'react';
+import { withStyles } from '@material-ui/core/styles';
+import { colors, spacers } from '@dhis2/ui';
+import { CHANGE_TYPES } from '../../../Changelog/Changelog.constants';
+import {
+    DefaultChangelogComponentsByChangeType,
+    PlygonChangelogComponentsByChangeType,
+} from './ChangelogValueCellComponents';
+
+type Props = {
+    dataItemId: string,
+    changeType: $Values<typeof CHANGE_TYPES>,
+    previousValue?: string,
+    currentValue?: string,
+    classes: {
+        container: string,
+        valueContainer: string,
+        buttonContainer: string,
+        previousValue: string,
+        currentValue: string,
+        updatePreviousValue: string,
+        updateCurrentValue: string,
+        updateArrow: string,
+        viewButton: string,
+    },
+};
+
+const styles = {
+    container: {
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+        whiteSpace: 'normal',
+        height: '100%',
+    },
+    buttonContainer: {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    previousValue: {
+        color: colors.grey700,
+        wordBreak: 'break-word',
+    },
+    currentValue: {
+        color: colors.grey900,
+        wordBreak: 'break-word',
+    },
+    updateArrow: {
+        display: 'inline-flex',
+        alignItems: 'center',
+        margin: spacers.dp4,
+    },
+    viewButton: {
+        background: 'none',
+        border: 'none',
+        cursor: 'pointer',
+        color: colors.grey800,
+        display: 'flex',
+        alignItems: 'center',
+        '&:hover': {
+            textDecoration: 'underline',
+            color: 'black',
+        },
+    },
+};
+
+export const ChangelogValueCellPlain = ({
+    dataItemId,
+    changeType,
+    currentValue,
+    previousValue,
+    classes,
+}: Props) => {
+    if (!currentValue) { return null; }
+    const isPolygon = dataItemId === 'geometry' && currentValue.length > 2;
+    const ComponentsByChangeType = isPolygon
+        ? PlygonChangelogComponentsByChangeType
+        : DefaultChangelogComponentsByChangeType;
+
+    const ChangelogComponent = ComponentsByChangeType[changeType];
+
+    if (!ChangelogComponent) {
+        console.error(`No component found for change type: ${changeType}`);
+        return null;
+    }
+
+    return (
+        <ChangelogComponent
+            previousValue={previousValue}
+            currentValue={currentValue}
+            classes={classes}
+        />
+    );
+};
+
+export const ChangelogValueCell = withStyles(styles)(ChangelogValueCellPlain);

src/core_modules/capture-core/components/WidgetsChangelog/common/ChangelogTable/ChangelogCells/ChangelogValueCell/ChangelogValueCellComponents/ChangelogValueCellComponents.types.js

@@ -0,0 +1,13 @@
+// @flow
+export type ChangelogValueCellProps = {
+  previousValue?: string,
+  currentValue?: string,
+  classes: {
+    container: string,
+    buttonContainer: string,
+    previousValue: string,
+    currentValue: string,
+    updateArrow: string,
+    viewButton: string,
+  },
+};

src/core_modules/capture-core/components/WidgetsChangelog/common/ChangelogTable/ChangelogCells/ChangelogValueCell/ChangelogValueCellComponents/ChangelogValueCellDefault.js

@@ -0,0 +1,33 @@
+// @flow
+import React from 'react';
+import { IconArrowRight16 } from '@dhis2/ui';
+import { CHANGE_TYPES } from '../../../../Changelog/Changelog.constants';
+import type { ChangelogValueCellProps } from './ChangelogValueCellComponents.types';
+
+const Updated = ({ previousValue, currentValue, classes }: ChangelogValueCellProps) => (
+    <div className={classes.container}>
+        <span className={classes.previousValue}>{previousValue}</span>
+        <span className={classes.updateArrow}>
+            <IconArrowRight16 />
+        </span>
+        <span className={classes.currentValue}>{currentValue}</span>
+    </div>
+);
+
+const Created = ({ currentValue, classes }: ChangelogValueCellProps) => (
+    <div className={classes.container}>
+        <span className={classes.currentValue}>{currentValue}</span>
+    </div>
+);
+
+const Deleted = ({ previousValue, classes }: ChangelogValueCellProps) => (
+    <div className={classes.container}>
+        <span className={classes.previousValue}>{previousValue}</span>
+    </div>
+);
+
+export const DefaultChangelogComponentsByChangeType = Object.freeze({
+    [CHANGE_TYPES.UPDATED]: Updated,
+    [CHANGE_TYPES.CREATED]: Created,
+    [CHANGE_TYPES.DELETED]: Deleted,
+});

src/core_modules/capture-core/components/WidgetsChangelog/common/ChangelogTable/ChangelogCells/ChangelogValueCell/ChangelogValueCellComponents/ChangelogValueCellPolygon.js

@@ -0,0 +1,93 @@
+// @flow
+import React, { useState } from 'react';
+import { IconArrowRight16, IconChevronUp16, IconChevronDown16 } from '@dhis2/ui';
+import { CHANGE_TYPES } from '../../../../Changelog/Changelog.constants';
+import type { ChangelogValueCellProps } from './ChangelogValueCellComponents.types';
+
+const ValueDisplay = ({ value, showMore, className }) => (
+    <span className={className}>{showMore ? value : value?.slice(0, 1)}</span>
+);
+
+const ViewMoreButton = ({ showMore, onClick, classes }) => (
+    <button className={classes.viewButton} onClick={onClick}>
+        {showMore ? 'View less' : 'View more'}
+        {showMore ? <IconChevronUp16 /> : <IconChevronDown16 />}
+    </button>
+);
+
+const Updated = ({ previousValue, currentValue, classes }: ChangelogValueCellProps) => {
+    const [showMore, setShowMore] = useState(false);
+
+    return (
+        <>
+            <div className={classes.container}>
+                <ValueDisplay
+                    value={previousValue}
+                    showMore={showMore}
+                    className={classes.previousValue}
+                />
+                <span className={classes.updateArrow}>
+                    <IconArrowRight16 />
+                </span>
+                <ValueDisplay
+                    value={currentValue}
+                    showMore={showMore}
+                    className={classes.currentValue}
+                />
+            </div>
+            <div className={classes.buttonContainer}>
+                <ViewMoreButton
+                    showMore={showMore}
+                    onClick={() => setShowMore(!showMore)}
+                    classes={classes}
+                />
+            </div>
+        </>
+
+    );
+};
+
+
+const Created = ({ currentValue, classes }: ChangelogValueCellProps) => {
+    const [showMore, setShowMore] = useState(false);
+
+    return (
+        <div className={classes.container}>
+            <ValueDisplay
+                value={currentValue}
+                showMore={showMore}
+                className={classes.currentValue}
+            />
+            <ViewMoreButton
+                showMore={showMore}
+                onClick={() => setShowMore(!showMore)}
+                classes={classes}
+            />
+        </div>
+    );
+};
+
+const Deleted = ({ previousValue, classes }: ChangelogValueCellProps) => {
+    const [showMore, setShowMore] = useState(false);
+
+    return (
+        <div className={classes.container}>
+            <ValueDisplay
+                value={previousValue}
+                showMore={showMore}
+                className={classes.previousValue}
+            />
+            <ViewMoreButton
+                showMore={showMore}
+                onClick={() => setShowMore(!showMore)}
+                classes={classes}
+            />
+        </div>
+    );
+};
+
+export const PlygonChangelogComponentsByChangeType = Object.freeze({
+    [CHANGE_TYPES.UPDATED]: Updated,
+    [CHANGE_TYPES.CREATED]: Created,
+    [CHANGE_TYPES.DELETED]: Deleted,
+});

src/core_modules/capture-core/components/WidgetsChangelog/common/ChangelogTable/ChangelogCells/ChangelogValueCell/ChangelogValueCellComponents/index.js

@@ -0,0 +1,6 @@
+// @flow
+
+export { DefaultChangelogComponentsByChangeType } from './ChangelogValueCellDefault';
+export { PlygonChangelogComponentsByChangeType } from './ChangelogValueCellPolygon';
+
+export type { ChangelogValueCellProps } from './ChangelogValueCellComponents.types';

src/core_modules/capture-core/components/WidgetsChangelog/common/ChangelogTable/ChangelogCells/ChangelogValueCell/index.js

@@ -0,0 +1,3 @@
+// @flow
+
+export { ChangelogValueCell } from './ChangelogValueCell';

src/core_modules/capture-core/components/WidgetsChangelog/common/hooks/useListDataValues.js

@@ -44,7 +44,8 @@ const fetchFormattedValues = async ({
         elementKey: string,
         change: Change,
     ) => {
-        const fieldId = change.dataElement || change.attribute;
+        const { dataElement, attribute, property } = change;
+        const fieldId = dataElement ?? attribute ?? property;
         if (!fieldId) {
             log.error('Could not find fieldId in change:', change);
             return { metadataElement: null, fieldId: null };