feat: [DHIS2-16782] Changelog sorting and filtering by user and data item

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: 2025-02-06T18:07:20.352Z\n"
-"PO-Revision-Date: 2025-02-06T18:07:20.352Z\n"
+"POT-Creation-Date: 2025-02-10T14:42:07.458Z\n"
+"PO-Revision-Date: 2025-02-10T14:42:07.458Z\n"
 
 msgid "Choose one or more dates..."
 msgstr "Choose one or more dates..."
@@ -1289,6 +1289,12 @@ msgstr "Go to “Schedule” tab to reschedule this event"
 msgid "Scheduled date cannot be changed for {{ eventStatus }} events"
 msgstr "Scheduled date cannot be changed for {{ eventStatus }} events"
 
+msgid "Geometry (Area)"
+msgstr "Geometry (Area)"
+
+msgid "Geometry (Coordinate)"
+msgstr "Geometry (Coordinate)"
+
 msgid "Event completed"
 msgstr "Event completed"
 
@@ -1563,6 +1569,9 @@ msgstr "Changelog"
 msgid "No changes to display"
 msgstr "No changes to display"
 
+msgid "Data item"
+msgstr "Data item"
+
 msgid "Updated"
 msgstr "Updated"
 
@@ -1575,11 +1584,17 @@ msgstr "Deleted"
 msgid "Date"
 msgstr "Date"
 
+msgid "Sort by date"
+msgstr "Sort by date"
+
 msgid "User"
 msgstr "User"
 
-msgid "Data item"
-msgstr "Data item"
+msgid "Sort by username"
+msgstr "Sort by username"
+
+msgid "Sort by data item"
+msgstr "Sort by data item"
 
 msgid "Change"
 msgstr "Change"

src/core_modules/capture-core-utils/featuresSupport/support.js

@@ -6,6 +6,7 @@ export const FEATURES = Object.freeze({
     newTransferQueryParam: 'newTransferQueryParam',
     exportablePayload: 'exportablePayload',
     changelogs: 'changelogs',
+    changelogsV2: 'changelogsV2',
     trackerImageEndpoint: 'trackerImageEndpoint',
     trackerFileEndpoint: 'trackerFileEndpoint',
     trackedEntitiesCSV: 'trackedEntitiesCSV',
@@ -25,6 +26,7 @@ const MINOR_VERSION_SUPPORT = Object.freeze({
     [FEATURES.trackerFileEndpoint]: 41,
     [FEATURES.newTransferQueryParam]: 41,
     [FEATURES.changelogs]: 41,
+    [FEATURES.changelogsV2]: 42,
     [FEATURES.trackedEntitiesCSV]: 40,
     [FEATURES.newUIDsSeparator]: 41,
     [FEATURES.newEntityFilterQueryParam]: 41,

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

@@ -46,7 +46,7 @@ export const EventChangelogWrapper = ({ formFoundation, eventId, eventData, ...p
         const additionalFields = formFoundation.featureType !== 'None' ? {
             geometry: {
                 id: 'geometry',
-                name: formFoundation.featureType === 'Polygon' ? i18n.t('Area') : i18n.t('Coordinate'),
+                name: formFoundation.featureType === 'Polygon' ? i18n.t('Geometry (Area)') : i18n.t('Geometry (Coordinate)'),
                 type: formFoundation.featureType === 'Polygon' ?
                     dataElementTypes.POLYGON : dataElementTypes.COORDINATE,
             },

src/core_modules/capture-core/components/WidgetProfile/OverflowMenu/TrackedEntityChangelogWrapper/TrackedEntityChangelogWrapper.component.js

@@ -19,6 +19,10 @@ export const TrackedEntityChangelogWrapper = ({ programAPI, teiId, setIsOpen, tr
         const contextLabels = formFoundation.getLabels();
 
         const fieldElementsById = elements.reduce((acc, element: DataElement) => {
+            if (!transformedTrackedEntityData.hasOwnProperty(element.id)) {
+                return acc;
+            }
+
             const { optionSet } = element;
             const metadata = {
                 id: element.id,
@@ -54,7 +58,7 @@ export const TrackedEntityChangelogWrapper = ({ programAPI, teiId, setIsOpen, tr
             ...fieldElementsById,
             ...fieldElementsContext,
         };
-    }, [formFoundation]);
+    }, [formFoundation, transformedTrackedEntityData]);
 
     return (
         <WidgetTrackedEntityChangelog

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

@@ -1,16 +1,21 @@
 // @flow
+import React from 'react';
 import i18n from '@dhis2/d2-i18n';
 import {
     Button,
     ButtonStrip,
     DataTable,
-    DataTableBody, DataTableCell, DataTableFoot, DataTableRow,
+    DataTableBody,
+    DataTableCell,
+    DataTableFoot,
+    DataTableRow,
     Modal,
     ModalActions,
     ModalContent,
-    ModalTitle, Pagination,
+    ModalTitle,
+    Pagination,
 } from '@dhis2/ui';
-import React from 'react';
+import { ChangelogFilterBar } from '../ChangelogFilterBar';
 import { ChangelogTableHeader, ChangelogTableRow } from '../ChangelogTable';
 import type { ChangelogProps } from './Changelog.types';
 
@@ -19,10 +24,19 @@ export const ChangelogComponent = ({
     close,
     records,
     pager,
+    columnToSortBy,
+    setColumnToSortBy,
+    attributeToFilterBy,
+    setAttributeToFilterBy,
+    supportsChangelogV2,
+    entityType,
+    filterValue,
+    setFilterValue,
     setPage,
     setPageSize,
     sortDirection,
     setSortDirection,
+    dataItemDefinitions,
 }: ChangelogProps) => (
     <Modal
         large
@@ -31,27 +45,30 @@ export const ChangelogComponent = ({
         onClose={close}
     >
         <ModalTitle>{i18n.t('Changelog')}</ModalTitle>
-
         <ModalContent>
-            <DataTable
-                fixed
-                dataTest={'changelog-data-table'}
-                layout="fixed"
-            >
+            {supportsChangelogV2 && (
+                <ChangelogFilterBar
+                    attributeToFilterBy={attributeToFilterBy}
+                    setAttributeToFilterBy={setAttributeToFilterBy}
+                    filterValue={filterValue}
+                    setFilterValue={setFilterValue}
+                    dataItemDefinitions={dataItemDefinitions}
+                    entityType={entityType}
+                />
+            )}
+            <DataTable dataTest={'changelog-data-table'} layout={'fixed'}>
                 <ChangelogTableHeader
+                    columnToSortBy={columnToSortBy}
+                    setColumnToSortBy={setColumnToSortBy}
                     sortDirection={sortDirection}
                     setSortDirection={setSortDirection}
+                    entityType={entityType}
+                    supportsChangelogV2={supportsChangelogV2}
                 />
-
                 {records && records.length > 0 ? (
-                    <DataTableBody
-                        dataTest={'changelog-data-table-body'}
-                    >
-                        {records?.map(record => (
-                            <ChangelogTableRow
-                                key={record.reactKey}
-                                record={record}
-                            />
+                    <DataTableBody dataTest={'changelog-data-table-body'}>
+                        {records.map(record => (
+                            <ChangelogTableRow key={record.reactKey} record={record} />
                         ))}
                     </DataTableBody>
                 ) : (
@@ -84,10 +101,7 @@ export const ChangelogComponent = ({
 
         <ModalActions>
             <ButtonStrip>
-                <Button
-                    onClick={close}
-                    secondary
-                >
+                <Button onClick={close} secondary>
                     {i18n.t('Close')}
                 </Button>
             </ButtonStrip>

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

@@ -1,5 +1,4 @@
 // @flow
-
 export const CHANGE_TYPES = Object.freeze({
     CREATED: 'CREATE',
     DELETED: 'DELETE',
@@ -11,6 +10,33 @@ export const CHANGELOG_ENTITY_TYPES = Object.freeze({
     TRACKED_ENTITY: 'trackedEntity',
 });
 
+export const SORT_DIRECTIONS = Object.freeze({
+    ASC: 'asc',
+    DESC: 'desc',
+    DEFAULT: 'default',
+});
+
+export const SORT_TARGETS = Object.freeze({
+    DATE: 'createdAt',
+    USERNAME: 'username',
+    DATA_ITEM: 'change',
+    ATTRIBUTE: 'attribute',
+});
+
+export const FILTER_TARGETS = Object.freeze({
+    FIELD: 'field',
+    DATA_ELEMENT: 'dataElement',
+    ATTRIBUTE: 'attribute',
+});
+
+export const FIELD_TYPES = Object.freeze({
+    OCCURRED_AT: 'occurredAt',
+    SCHEDULED_AT: 'scheduledAt',
+    GEOMETRY: 'geometry',
+});
+
+export const DEFAULT_PAGE_SIZE = 10;
+
 export const QUERY_KEYS_BY_ENTITY_TYPE = Object.freeze({
     [CHANGELOG_ENTITY_TYPES.EVENT]: 'events',
     [CHANGELOG_ENTITY_TYPES.TRACKED_ENTITY]: 'trackedEntities',

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

@@ -1,9 +1,10 @@
 // @flow
 import React from 'react';
 import { Modal } from '@dhis2/ui';
+import { FEATURES, featureAvailable } from 'capture-core-utils';
 import { useChangelogData, useListDataValues } from '../hooks';
 import { ChangelogComponent } from './Changelog.component';
-import { CHANGELOG_ENTITY_TYPES } from './index';
+import { CHANGELOG_ENTITY_TYPES } from './Changelog.constants';
 import { LoadingMaskElementCenter } from '../../../LoadingMasks';
 import type { ItemDefinitions } from './Changelog.types';
 
@@ -34,13 +35,15 @@ export const Changelog = ({
         pageSize,
         setPage,
         setPageSize,
+        columnToSortBy,
+        setColumnToSortBy,
         sortDirection,
         setSortDirection,
-    } = useChangelogData({
-        entityId,
-        entityType,
-        programId,
-    });
+        filterValue,
+        setFilterValue,
+        attributeToFilterBy,
+        setAttributeToFilterBy,
+    } = useChangelogData({ entityId, entityType, programId });
 
     const {
         processedRecords,
@@ -65,6 +68,8 @@ export const Changelog = ({
         );
     }
 
+    const supportsChangelogV2 = featureAvailable(FEATURES.changelogsV2);
+
     return (
         <ChangelogComponent
             isOpen={isOpen}
@@ -73,8 +78,17 @@ export const Changelog = ({
             pager={pager}
             setPage={setPage}
             setPageSize={setPageSize}
+            entityType={entityType}
+            columnToSortBy={columnToSortBy}
+            setColumnToSortBy={setColumnToSortBy}
             sortDirection={sortDirection}
             setSortDirection={setSortDirection}
+            filterValue={filterValue}
+            setFilterValue={setFilterValue}
+            attributeToFilterBy={attributeToFilterBy}
+            setAttributeToFilterBy={setAttributeToFilterBy}
+            dataItemDefinitions={dataItemDefinitions}
+            supportsChangelogV2={supportsChangelogV2}
         />
     );
 };