feat: sorting and filtering

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-01-12T19:19:47.746Z\n"
-"PO-Revision-Date: 2025-01-12T19:19:47.746Z\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..."
@@ -1568,8 +1568,8 @@ msgstr "Sort by username"
 msgid "User"
 msgstr "User"
 
-msgid "Sort by Data item"
-msgstr "Sort by 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,19 +1,23 @@
 // @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';
-import { ChangelogFilterBar } from '../ChangelogFilterBar';
 
 export const ChangelogComponent = ({
     isOpen,
@@ -22,8 +26,8 @@ export const ChangelogComponent = ({
     pager,
     columnToSortBy,
     setColumnToSortBy,
-    columnToFilterBy,
-    setColumnToFilterBy,
+    fieldToFilterBy,
+    setfieldToFilterBy,
     filterValue,
     setFilterValue,
     setPage,
@@ -35,48 +39,35 @@ export const ChangelogComponent = ({
     <Modal
         large
         hide={!isOpen}
-        dataTest={'changelog-modal'}
         onClose={close}
+        dataTest="changelog-modal"
     >
         <ModalTitle>{i18n.t('Changelog')}</ModalTitle>
-
         <ModalContent>
             <ChangelogFilterBar
-                key={'changelog-filter-bar'}
-                dataTest={'changelog-filter-bar'}
-                records={records}
-                columnToFilterBy={columnToFilterBy}
-                setColumnToFilterBy={setColumnToFilterBy}
+                fieldToFilterBy={fieldToFilterBy}
+                setfieldToFilterBy={setfieldToFilterBy}
                 filterValue={filterValue}
                 setFilterValue={setFilterValue}
                 dataItemDefinitions={dataItemDefinitions}
             />
-            <DataTable
-                fixed
-                dataTest={'changelog-data-table'}
-                layout="fixed"
-            >
+            <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>
                 ) : (
                     <DataTableBody>
                         <DataTableRow>
-                            <DataTableCell align={'center'} colSpan="4">
+                            <DataTableCell align="center" colSpan="4">
                                 {i18n.t('No changes to display')}
                             </DataTableCell>
                         </DataTableRow>
@@ -92,7 +83,7 @@ export const ChangelogComponent = ({
                                     onPageChange={setPage}
                                     onPageSizeChange={setPageSize}
                                     isLastPage={!pager.nextPage}
-                                    dataTest={'changelog-pagination'}
+                                    dataTest="changelog-pagination"
                                 />
                             </DataTableCell>
                         </DataTableRow>
@@ -103,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',

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';
 
@@ -40,13 +40,9 @@ export const Changelog = ({
         setSortDirection,
         filterValue,
         setFilterValue,
-        columnToFilterBy,
-        setColumnToFilterBy,
-    } = useChangelogData({
-        entityId,
-        entityType,
-        programId,
-    });
+        fieldToFilterBy,
+        setfieldToFilterBy,
+    } = useChangelogData({ entityId, entityType, programId });
 
     const {
         processedRecords,
@@ -85,8 +81,8 @@ export const Changelog = ({
             setSortDirection={setSortDirection}
             filterValue={filterValue}
             setFilterValue={setFilterValue}
-            columnToFilterBy={columnToFilterBy}
-            setColumnToFilterBy={setColumnToFilterBy}
+            fieldToFilterBy={fieldToFilterBy}
+            setfieldToFilterBy={setfieldToFilterBy}
             dataItemDefinitions={dataItemDefinitions}
         />
     );

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

@@ -1,80 +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,
-    columnToFilterBy: string | null,
-    setColumnToFilterBy: (string) => void,
-    filterValue: string,
-    setFilterValue: (string) => void,
+    fieldToFilterBy?: string | null,
+    setfieldToFilterBy: (string | null) => void,
+    filterValue: any,
+    setFilterValue: (any) => void,
     dataItemDefinitions: ItemDefinitions,
-}
+};

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

@@ -1,19 +1,5 @@
 // @flow
-export type FilterValueType =
-    | 'SHOW_ALL'
-    | { id: string, name: string };
-
-export type RecordType = {
-    reactKey: string,
-    date: string,
-    user: string,
-    username: string,
-    dataItemId: string,
-    dataItemLabel: string,
-    changeType: string,
-    currentValue: string,
-    previousValue: string,
-};
+export type FilterValueType = 'SHOW_ALL' | { id: string, name: string };
 
 export type DataItemDefinition = {
     id: string,
@@ -29,7 +15,6 @@ export type DataItemDefinitions = {
 
 export type ChangelogFilterProps = {
     classes: { container: string },
-    records: Array<RecordType>,
     filterValue: FilterValueType,
     setFilterValue: (value: FilterValueType) => void,
     columnToFilterBy: string | null,

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

@@ -3,10 +3,7 @@ import React, { useMemo, useState, useCallback } from 'react';
 import i18n from '@dhis2/d2-i18n';
 import { withStyles } from '@material-ui/core/styles';
 import { spacers } from '@dhis2/ui';
-import type {
-    ChangelogFilterProps,
-    FilterValueType,
-} from './ChangelogFilter.types';
+import type { ChangelogFilterProps, FilterValueType } from './ChangelogFilter.types';
 import { DropdownFilter } from './DropdownFilter';
 
 const styles = {
@@ -15,6 +12,11 @@ const styles = {
     },
 };
 
+const getFilterColumn = (id: string) =>
+    (['occurredAt', 'scheduledAt', 'geometry'].includes(id)
+        ? 'field'
+        : 'dataElement');
+
 const ChangelogFilterBarPlain = ({
     classes,
     filterValue,
@@ -30,37 +32,41 @@ const ChangelogFilterBarPlain = ({
     }, []);
 
     const handleItemSelected = useCallback(
-        (value: FilterValueType, filterColumn: string) => {
+        (value: FilterValueType) => {
             setOpenMenu(null);
             if (value === 'SHOW_ALL') {
                 setFilterValue('SHOW_ALL');
                 setColumnToFilterBy(null);
             } else {
+                const column = getFilterColumn(value.id);
                 setFilterValue(value);
-                setColumnToFilterBy(filterColumn);
+                setColumnToFilterBy(column);
             }
         },
         [setFilterValue, setColumnToFilterBy],
     );
 
     const dataItems = useMemo(
-        () => Object.keys(dataItemDefinitions).map(key => ({
-            id: key,
-            name: dataItemDefinitions[key].name,
-        })),
+        () =>
+            Object.keys(dataItemDefinitions).map(key => ({
+                id: key,
+                name: dataItemDefinitions[key].name,
+            })),
         [dataItemDefinitions],
     );
 
+    const selectedFilterValue = columnToFilterBy ? filterValue : 'SHOW_ALL';
+
     return (
         <div className={classes.container}>
             <DropdownFilter
                 label={i18n.t('Data item')}
                 items={dataItems}
-                filterColumn="dataElement"
+                filterColumn="changelogFilterMenu"
                 openMenuName={openMenu}
                 onToggleMenu={toggleMenu}
                 onItemSelected={handleItemSelected}
-                selectedFilterValue={columnToFilterBy === 'dataElement' ? filterValue : 'SHOW_ALL'}
+                selectedFilterValue={selectedFilterValue}
             />
         </div>
     );