fix: [DHIS2-16994] Image and File DE and TEA not Displayed in Changelog

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-10-25T18:18:11.518Z\n"
-"PO-Revision-Date: 2024-10-25T18:18:11.518Z\n"
+"POT-Creation-Date: 2024-11-07T11:57:59.094Z\n"
+"PO-Revision-Date: 2024-11-07T11:57:59.094Z\n"
 
 msgid "Choose one or more dates..."
 msgstr "Choose one or more dates..."
@@ -1532,6 +1532,12 @@ msgstr "Change"
 msgid "Value"
 msgstr "Value"
 
+msgid "File"
+msgstr "File"
+
+msgid "Image"
+msgstr "Image"
+
 msgid "New {{trackedEntityTypeName}} relationship"
 msgstr "New {{trackedEntityTypeName}} relationship"
 

src/core_modules/capture-core/components/Pages/ViewEvent/EventDetailsSection/EventDetailsSection.component.js

@@ -56,6 +56,7 @@ const getStyles = () => ({
 type Props = {
     showEditEvent: ?boolean,
     eventId: string,
+    eventData: Object,
     onOpenEditEvent: (orgUnit: Object, programCategory: ?ProgramCategory) => void,
     programStage: ProgramStage,
     eventAccess: { read: boolean, write: boolean },
@@ -76,6 +77,7 @@ const EventDetailsSectionPlain = (props: Props) => {
     const {
         classes,
         eventId,
+        eventData,
         onOpenEditEvent,
         showEditEvent,
         programStage,
@@ -200,6 +202,7 @@ const EventDetailsSectionPlain = (props: Props) => {
                 <EventChangelogWrapper
                     isOpen
                     setIsOpen={setChangeLogIsOpen}
+                    eventData={eventData}
                     eventId={eventId}
                     formFoundation={programStage.stageForm}
                 />

src/core_modules/capture-core/components/Pages/ViewEvent/EventDetailsSection/EventDetailsSection.container.js

@@ -10,6 +10,7 @@ import type { ProgramCategory } from '../../../WidgetEventSchedule/CategoryOptio
 const mapStateToProps = (state: ReduxState) => ({
     showEditEvent: state.viewEventPage.eventDetailsSection && state.viewEventPage.eventDetailsSection.showEditEvent,
     eventId: state.viewEventPage.eventId,
+    eventData: state.viewEventPage.loadedValues?.eventContainer?.values || {},
     programId: state.currentSelections.programId,
 });
 

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

@@ -5,7 +5,7 @@ import { dataElementTypes } from '../../../metaData';
 import type { Props } from './EventChangelogWrapper.types';
 import { WidgetEventChangelog } from '../../WidgetsChangelog';
 
-export const EventChangelogWrapper = ({ formFoundation, eventId, ...passOnProps }: Props) => {
+export const EventChangelogWrapper = ({ formFoundation, eventId, eventData, ...passOnProps }: Props) => {
     const dataItemDefinitions = useMemo(() => {
         const elements = formFoundation.getElements();
         const contextLabels = formFoundation.getLabels();
@@ -52,6 +52,7 @@ export const EventChangelogWrapper = ({ formFoundation, eventId, ...passOnProps
         <WidgetEventChangelog
             {...passOnProps}
             eventId={eventId}
+            eventData={eventData}
             dataItemDefinitions={dataItemDefinitions}
         />
     );

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

@@ -10,4 +10,5 @@ type PassOnProps = {|
 export type Props = {
     ...PassOnProps,
     formFoundation: RenderFoundation,
+    eventData: Object,
 };

src/core_modules/capture-core/components/WidgetEventEdit/WidgetEventEdit.container.js

@@ -228,6 +228,7 @@ export const WidgetEventEditPlain = ({
                     isOpen
                     setIsOpen={setChangeLogIsOpen}
                     eventId={loadedValues.eventContainer.id}
+                    eventData={loadedValues.eventContainer.values}
                     formFoundation={formFoundation}
                 />
             )}

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

@@ -9,6 +9,7 @@ import { TrackedEntityChangelogWrapper } from './TrackedEntityChangelogWrapper';
 
 export const OverflowMenuComponent = ({
     trackedEntity,
+    trackedEntityData,
     trackedEntityTypeName,
     canWriteData,
     canCascadeDeleteTei,
@@ -68,6 +69,7 @@ export const OverflowMenuComponent = ({
                     programAPI={programAPI}
                     isOpen={changelogIsOpen}
                     setIsOpen={setChangelogIsOpen}
+                    trackedEntityData={trackedEntityData}
                 />
             )}
         </>

src/core_modules/capture-core/components/WidgetProfile/OverflowMenu/OverflowMenu.container.js

@@ -8,6 +8,7 @@ export const OverflowMenu = ({
     trackedEntityTypeName,
     canWriteData,
     trackedEntity,
+    trackedEntityData,
     onDeleteSuccess,
     displayChangelog,
     teiId,
@@ -21,6 +22,7 @@ export const OverflowMenu = ({
             canWriteData={canWriteData}
             canCascadeDeleteTei={hasAuthority}
             trackedEntity={trackedEntity}
+            trackedEntityData={trackedEntityData}
             onDeleteSuccess={onDeleteSuccess}
             displayChangelog={displayChangelog}
             teiId={teiId}

src/core_modules/capture-core/components/WidgetProfile/OverflowMenu/OverflowMenu.types.js

@@ -3,6 +3,7 @@
 export type Props = {|
     trackedEntity: { trackedEntity: string },
     trackedEntityTypeName: string,
+    trackedEntityData: Object,
     canWriteData: boolean,
     onDeleteSuccess?: () => void,
     displayChangelog: boolean,
@@ -13,6 +14,7 @@ export type Props = {|
 export type PlainProps = {|
     trackedEntity: { trackedEntity: string },
     trackedEntityTypeName: string,
+    trackedEntityData: Object,
     canWriteData: boolean,
     canCascadeDeleteTei: boolean,
     onDeleteSuccess?: () => void,

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

@@ -5,9 +5,14 @@ import { useFormFoundation } from '../../DataEntry/hooks';
 import { WidgetTrackedEntityChangelog } from '../../../WidgetsChangelog';
 import type { Props } from './TrackedEntityChangelogWrapper.types';
 
-export const TrackedEntityChangelogWrapper = ({ programAPI, teiId, setIsOpen, ...passOnProps }: Props) => {
+export const TrackedEntityChangelogWrapper = ({ programAPI, teiId, setIsOpen, trackedEntityData, ...passOnProps }: Props) => {
     const formFoundation: RenderFoundation = useFormFoundation(programAPI);
 
+    const transformedTrackedEntityData = trackedEntityData.reduce((acc, item) => {
+        acc[item.attribute] = item.value;
+        return acc;
+    }, {});
+
     const dataItemDefinitions = useMemo(() => {
         if (!Object.keys(formFoundation)?.length) return {};
         const elements = formFoundation.getElements();
@@ -58,6 +63,7 @@ export const TrackedEntityChangelogWrapper = ({ programAPI, teiId, setIsOpen, ..
             close={() => setIsOpen(false)}
             programId={programAPI.id}
             dataItemDefinitions={dataItemDefinitions}
+            trackedEntityData={transformedTrackedEntityData}
         />
     );
 };

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

@@ -5,6 +5,7 @@ type PassOnProps = {|
     teiId: string,
     isOpen: boolean,
     setIsOpen: (boolean | boolean => boolean) => void,
+    trackedEntityData: Object,
 |}
 
 export type Props = {

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

@@ -162,6 +162,7 @@ const WidgetProfilePlain = ({
                                 trackedEntity={trackedEntity}
                                 onDeleteSuccess={onDeleteSuccess}
                                 displayChangelog={displayChangelog}
+                                trackedEntityData={clientAttributesWithSubvalues}
                                 teiId={teiId}
                                 programAPI={program}
                             />

src/core_modules/capture-core/components/WidgetsChangelog/WidgetEventChangelog/WidgetEventChangelog.js

@@ -5,20 +5,23 @@ import { Changelog, CHANGELOG_ENTITY_TYPES } from '../common/Changelog';
 
 type Props = {
     eventId: string,
+    eventData: Object,
     dataItemDefinitions: ItemDefinitions,
     isOpen: boolean,
     setIsOpen: (boolean | boolean => boolean) => void,
 }
 
 export const WidgetEventChangelog = ({
     eventId,
+    eventData,
     setIsOpen,
     ...passOnProps
 }: Props) => (
     <Changelog
         {...passOnProps}
         close={() => setIsOpen(false)}
         entityId={eventId}
+        entityData={eventData}
         entityType={CHANGELOG_ENTITY_TYPES.EVENT}
     />
 );

src/core_modules/capture-core/components/WidgetsChangelog/WidgetTrackedEntityChangelog/WidgetTrackedEntityChangelog.js

@@ -9,17 +9,20 @@ type Props = {
     dataItemDefinitions: ItemDefinitions,
     isOpen: boolean,
     close: () => void,
+    trackedEntityData: Object,
 }
 
 export const WidgetTrackedEntityChangelog = ({
     teiId,
     programId,
     close,
+    trackedEntityData,
     ...passOnProps
 }: Props) => (
     <Changelog
         {...passOnProps}
         close={close}
+        entityData={trackedEntityData}
         entityId={teiId}
         programId={programId}
         entityType={CHANGELOG_ENTITY_TYPES.TRACKED_ENTITY}

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

@@ -1,33 +1,37 @@
 // @flow
 import React from 'react';
 import { Modal } from '@dhis2/ui';
-import { useChangelogData } from '../hooks';
+import { useChangelogData, useListDataValues } from '../hooks';
 import { ChangelogComponent } from './Changelog.component';
 import { CHANGELOG_ENTITY_TYPES } from './index';
 import { LoadingMaskElementCenter } from '../../../LoadingMasks';
 import type { ItemDefinitions } from './Changelog.types';
 
 type Props = {
     entityId: string,
+    entityData: Object,
     entityType: $Values<typeof CHANGELOG_ENTITY_TYPES>,
     isOpen: boolean,
     close: () => void,
     dataItemDefinitions: ItemDefinitions,
     programId?: string,
-}
+};
 
 export const Changelog = ({
     entityId,
+    entityData,
     entityType,
     programId,
     isOpen,
     close,
     dataItemDefinitions,
 }: Props) => {
     const {
-        records,
+        rawRecords,
         pager,
-        isLoading,
+        isLoading: isChangelogLoading,
+        page,
+        pageSize,
         setPage,
         setPageSize,
         sortDirection,
@@ -36,10 +40,24 @@ export const Changelog = ({
         entityId,
         entityType,
         programId,
+    });
+
+    const {
+        processedRecords,
+        isLoading: isProcessingLoading,
+    } = useListDataValues({
+        rawRecords,
         dataItemDefinitions,
+        entityId,
+        entityData,
+        entityType,
+        programId,
+        sortDirection,
+        page,
+        pageSize,
     });
 
-    if (isLoading) {
+    if (isChangelogLoading || isProcessingLoading) {
         return (
             <Modal onClose={close}>
                 <LoadingMaskElementCenter />
@@ -51,7 +69,7 @@ export const Changelog = ({
         <ChangelogComponent
             isOpen={isOpen}
             close={close}
-            records={records}
+            records={processedRecords}
             pager={pager}
             setPage={setPage}
             setPageSize={setPageSize}

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

@@ -14,43 +14,36 @@ type Props = {
         container: string,
         previousValue: string,
         currentValue: string,
-        updatePreviousValue: string,
-        updateCurrentValue: string,
-        updateArrow: string,
+        arrow: string,
     }
 }
 
 const styles = {
     container: {
-        alignItems: 'center',
         display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+        whiteSpace: 'normal',
+        height: '100%',
     },
     previousValue: {
         color: colors.grey700,
+        wordBreak: 'break-word',
     },
     currentValue: {
         color: colors.grey900,
+        wordBreak: 'break-word',
     },
-    updatePreviousValue: {
-        color: colors.grey700,
-        maxWidth: '45%',
-    },
-    updateCurrentValue: {
-        color: colors.grey900,
-        maxWidth: '45%',
-    },
-    updateArrow: {
-        display: 'inline-flex',
-        alignItems: 'center',
-        margin: `${spacers.dp4}`,
+    arrow: {
+        margin: `0 ${spacers.dp4}`,
     },
 };
 
 const Updated = ({ previousValue, currentValue, classes }) => (
     <div className={classes.container}>
-        <span className={classes.updatePreviousValue}>{previousValue}</span>
-        <span className={classes.updateArrow}><IconArrowRight16 /></span>
-        <span className={classes.updateCurrentValue}>{currentValue}</span>
+        <div className={classes.previousValue}>{previousValue}</div>
+        <div className={classes.arrow}><IconArrowRight16 /></div>
+        <div className={classes.currentValue}>{currentValue}</div>
     </div>
 );
 

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

@@ -13,13 +13,11 @@ type Props = {
     },
     classes: {
         dataItemColumn: string,
-        valueColumn: string,
     },
 };
 
 const styles = {
     dataItemColumn: { wordWrap: 'break-word', hyphens: 'auto' },
-    valueColumn: { wordWrap: 'break-word' },
 };
 
 const ChangelogTableRowPlain = ({ record, classes }: Props) => (
@@ -28,7 +26,7 @@ const ChangelogTableRowPlain = ({ record, classes }: Props) => (
         <DataTableCell>{record.user}</DataTableCell>
         <DataTableCell className={classes.dataItemColumn}>{record.dataItemLabel}</DataTableCell>
         <DataTableCell><ChangelogChangeCell changeType={record.changeType} /></DataTableCell>
-        <DataTableCell className={classes.valueColumn}><ChangelogValueCell {...record} /></DataTableCell>
+        <DataTableCell><ChangelogValueCell {...record} /></DataTableCell>
     </DataTableRow>
 );
 

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

@@ -1,3 +1,4 @@
 // @flow
 
 export { useChangelogData } from './useChangelogData';
+export { useListDataValues } from './useListDataValues';