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: 2024-12-15T15:25:38.375Z\n"
-"PO-Revision-Date: 2024-12-15T15:25:38.375Z\n"
+"POT-Creation-Date: 2025-01-12T21:02:46.786Z\n"
+"PO-Revision-Date: 2025-01-12T21:02:46.786Z\n"
 
 msgid "Choose one or more dates..."
 msgstr "Choose one or more dates..."
@@ -1544,6 +1544,9 @@ msgstr "Changelog"
 msgid "No changes to display"
 msgstr "No changes to display"
 
+msgid "Data item"
+msgstr "Data item"
+
 msgid "Updated"
 msgstr "Updated"
 
@@ -1553,14 +1556,20 @@ msgstr "Created"
 msgid "Deleted"
 msgstr "Deleted"
 
+msgid "Sort by date"
+msgstr "Sort by date"
+
 msgid "Date"
 msgstr "Date"
 
+msgid "Sort by username"
+msgstr "Sort by username"
+
 msgid "User"
 msgstr "User"
 
-msgid "Data item"
-msgstr "Data item"
+msgid "Sort by data item"
+msgstr "Sort by data item"
 
 msgid "Change"
 msgstr "Change"

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,39 +24,44 @@ export const ChangelogComponent = ({
     close,
     records,
     pager,
+    columnToSortBy,
+    setColumnToSortBy,
+    attributeToFilterBy,
+    setAttributeToFilterBy,
+    filterValue,
+    setFilterValue,
     setPage,
     setPageSize,
     sortDirection,
     setSortDirection,
+    dataItemDefinitions,
 }: ChangelogProps) => (
     <Modal
         large
         hide={!isOpen}
-        dataTest={'changelog-modal'}
         onClose={close}
+        dataTest="changelog-modal"
     >
         <ModalTitle>{i18n.t('Changelog')}</ModalTitle>
-
         <ModalContent>
-            <DataTable
-                fixed
-                dataTest={'changelog-data-table'}
-                layout="fixed"
-            >
+            <ChangelogFilterBar
+                attributeToFilterBy={attributeToFilterBy}
+                setAttributeToFilterBy={setAttributeToFilterBy}
+                filterValue={filterValue}
+                setFilterValue={setFilterValue}
+                dataItemDefinitions={dataItemDefinitions}
+            />
+            <DataTable fixed dataTest="changelog-data-table" layout="fixed">
                 <ChangelogTableHeader
+                    columnToSortBy={columnToSortBy}
+                    setColumnToSortBy={setColumnToSortBy}
                     sortDirection={sortDirection}
                     setSortDirection={setSortDirection}
                 />
-
                 {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 +94,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,20 @@ export const CHANGELOG_ENTITY_TYPES = Object.freeze({
     TRACKED_ENTITY: 'trackedEntity',
 });
 
+export const SORT_DIRECTION = Object.freeze({
+    ASC: 'asc',
+    DESC: 'desc',
+    DEFAULT: 'default',
+});
+
+export const COLUMN_TO_SORT_BY = Object.freeze({
+    DATE: 'createdAt',
+    USERNAME: 'username',
+    DATA_ITEM: 'change',
+});
+
+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

@@ -3,7 +3,7 @@ import React from 'react';
 import { Modal } from '@dhis2/ui';
 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 +34,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,
@@ -73,8 +75,15 @@ export const Changelog = ({
             pager={pager}
             setPage={setPage}
             setPageSize={setPageSize}
+            columnToSortBy={columnToSortBy}
+            setColumnToSortBy={setColumnToSortBy}
             sortDirection={sortDirection}
             setSortDirection={setSortDirection}
+            filterValue={filterValue}
+            setFilterValue={setFilterValue}
+            attributeToFilterBy={attributeToFilterBy}
+            setAttributeToFilterBy={setAttributeToFilterBy}
+            dataItemDefinitions={dataItemDefinitions}
         />
     );
 };

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

@@ -1,73 +1,79 @@
 // @flow
-import { CHANGE_TYPES } from './Changelog.constants';
 import { dataElementTypes } from '../../../../metaData';
+import { CHANGE_TYPES } from './Changelog.constants';
 
 type CreatedChange = {|
     type: typeof CHANGE_TYPES.CREATED,
     dataElement?: string,
     attribute?: string,
     field?: string,
     currentValue: any,
-|}
-
+|};
 type UpdatedChange = {|
     type: typeof CHANGE_TYPES.UPDATED,
     dataElement?: string,
     attribute?: string,
     field?: string,
     previousValue: any,
     currentValue: any,
-|}
-
+|};
 type DeletedChange = {|
     type: typeof CHANGE_TYPES.DELETED,
     dataElement?: string,
     attribute?: string,
     field?: string,
     previousValue: any,
-|}
+|};
 
 export type Change = CreatedChange | DeletedChange | UpdatedChange;
 
+export type ItemDefinition = {
+    id: string,
+    name: string,
+    type: $Keys<typeof dataElementTypes>,
+    optionSet?: string,
+    options?: Array<{ code: string, name: string }>,
+};
+
 export type ItemDefinitions = {
-    [key: string]: {
-        id: string,
-        name: string,
-        type: $Keys<typeof dataElementTypes>,
-        optionSet?: string,
-        options?: Array<{ code: string, name: string }>
-    },
-}
+    [key: string]: ItemDefinition,
+};
 
 export type SortDirection = 'default' | 'asc' | 'desc';
-
 export type SetSortDirection = (SortDirection) => void;
-
-type Pager = {
+export type Pager = {
     page: number,
     pageSize: number,
     nextPage: string,
     previous: string,
-}
+};
 
 export type ChangelogRecord = {
     reactKey: string,
     date: string,
     user: string,
+    username: string,
     dataItemId: string,
     dataItemLabel: string,
     changeType: string,
     previousValue: string,
-    newValue: string
-}
+    currentValue: string,
+};
 
 export type ChangelogProps = {
     isOpen: boolean,
     close: () => void,
-    pager: ?Pager,
-    records: ?Array<ChangelogRecord>,
+    pager?: Pager,
+    records?: Array<ChangelogRecord>,
     setPage: (number) => void,
     setPageSize: (number) => void,
+    columnToSortBy: string,
+    setColumnToSortBy: (string) => void,
     sortDirection: SortDirection,
     setSortDirection: SetSortDirection,
-}
+    attributeToFilterBy?: string | null,
+    setAttributeToFilterBy: (string | null) => void,
+    filterValue: any,
+    setFilterValue: (any) => void,
+    dataItemDefinitions: ItemDefinitions,
+};

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

@@ -1,3 +1,10 @@
 // @flow
 export { Changelog } from './Changelog.container';
-export { CHANGELOG_ENTITY_TYPES } from './Changelog.constants';
+export {
+    CHANGELOG_ENTITY_TYPES,
+    CHANGE_TYPES,
+    SORT_DIRECTION,
+    COLUMN_TO_SORT_BY,
+    DEFAULT_PAGE_SIZE,
+    QUERY_KEYS_BY_ENTITY_TYPE,
+} from './Changelog.constants';

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

@@ -0,0 +1,23 @@
+// @flow
+export type FilterValueType = 'SHOW_ALL' | { id: string, name: string };
+
+export type DataItemDefinition = {
+    id: string,
+    name: string,
+    type: string,
+    optionSet?: string,
+    options?: Array<{ code: string, name: string }>,
+};
+
+export type DataItemDefinitions = {
+    [key: string]: DataItemDefinition,
+};
+
+export type ChangelogFilterProps = {
+    classes: { container: string },
+    filterValue: FilterValueType,
+    setFilterValue: (value: FilterValueType) => void,
+    attributeToFilterBy: string | null,
+    setAttributeToFilterBy: (value: string | null) => void,
+    dataItemDefinitions: DataItemDefinitions,
+};