fix: review

dhis2 · Feb 29, 2024 · 59fb9ec · 59fb9ec
1 parent f72bce5
commit 59fb9ec
Show file tree

Hide file tree

Showing 8 changed files with 81 additions and 25 deletions.
diff --git a/i18n/en.pot b/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-02-27T15:15:55.309Z\n"
-"PO-Revision-Date: 2024-02-27T15:15:55.309Z\n"
+"POT-Creation-Date: 2024-02-29T10:05:58.402Z\n"
+"PO-Revision-Date: 2024-02-29T10:05:58.402Z\n"
 
 msgid "Choose one or more dates..."
 msgstr "Choose one or more dates..."
@@ -889,6 +889,9 @@ msgstr "You don't have access to edit this event"
 msgid "Edit event"
 msgstr "Edit event"
 
+msgid "View changelog"
+msgstr "View changelog"
+
 msgid "Event details"
 msgstr "Event details"
 
@@ -1275,9 +1278,6 @@ msgstr "Event completed"
 msgid "Back to all stages and events"
 msgstr "Back to all stages and events"
 
-msgid "View changelog"
-msgstr "View changelog"
-
 msgid "Schedule date info"
 msgstr "Schedule date info"
 

diff --git a/...ture-core/components/Pages/ViewEvent/EventDetailsSection/EventDetailsSection.component.js b/...ture-core/components/Pages/ViewEvent/EventDetailsSection/EventDetailsSection.component.js
@@ -1,9 +1,10 @@
 // @flow
-import React from 'react';
+import React, { useState } from 'react';
 import { useSelector } from 'react-redux';
 import { dataEntryIds, dataEntryKeys } from 'capture-core/constants';
 import { withStyles } from '@material-ui/core/';
-import { spacers, IconFileDocument24, Button } from '@dhis2/ui';
+import { spacers, IconFileDocument24, Button, IconMore16, FlyoutMenu, MenuItem } from '@dhis2/ui';
+import { useQueryClient } from 'react-query';
 import i18n from '@dhis2/d2-i18n';
 import { ConditionalTooltip } from 'capture-core/components/Tooltips/ConditionalTooltip';
 import { ViewEventSection } from '../Section/ViewEventSection.component';
@@ -13,19 +14,30 @@ import { ViewEventDataEntry } from '../../../WidgetEventEdit/ViewEventDataEntry/
 import type { ProgramStage } from '../../../../metaData';
 import { useCoreOrgUnit } from '../../../../metadataRetrieval/coreOrgUnit';
 import { NoticeBox } from '../../../NoticeBox';
+import { FEATURES, useFeature } from '../../../../../capture-core-utils';
+import { EventChangelogWrapper } from '../../../WidgetEventEdit/EventChangelogWrapper';
+import { OverflowButton } from '../../../Buttons';
+import { ReactQueryAppNamespace } from '../../../../utils/reactQueryHelpers';
+import { CHANGELOG_ENTITY_TYPES } from '../../../WidgetsChangelog';
 
 const getStyles = () => ({
     container: {
         flexGrow: 2,
         flexBasis: 0,
     },
-    content: {
+    dataEntryContent: {
         display: 'flex',
         gap: spacers.dp8,
     },
     dataEntryContainer: {
         flexGrow: 1,
     },
+    headerContainer: {
+        display: 'flex',
+        width: '100%',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+    },
     actionsContainer: {
         flexShrink: 0,
     },
@@ -38,12 +50,14 @@ const getStyles = () => ({
 
 type Props = {
     showEditEvent: ?boolean,
+    eventId: string,
     onOpenEditEvent: (orgUnit: Object) => void,
     programStage: ProgramStage,
     eventAccess: { read: boolean, write: boolean },
     classes: {
         container: string,
-        content: string,
+        headerContainer: string,
+        dataEntryContent: string,
         dataEntryContainer: string,
         actionsContainer: string,
         button: string,
@@ -54,13 +68,23 @@ type Props = {
 const EventDetailsSectionPlain = (props: Props) => {
     const {
         classes,
+        eventId,
         onOpenEditEvent,
         showEditEvent,
         programStage,
         eventAccess,
         ...passOnProps } = props;
     const orgUnitId = useSelector(({ viewEventPage }) => viewEventPage.loadedValues?.orgUnit?.id);
     const { orgUnit, error } = useCoreOrgUnit(orgUnitId);
+    const queryClient = useQueryClient();
+    const supportsChangelog = useFeature(FEATURES.changelogs);
+    const [changeLogIsOpen, setChangeLogIsOpen] = useState(false);
+    const [actionsIsOpen, setActionsIsOpen] = useState(false);
+
+    const onSaveExternal = () => {
+        const queryKey = [ReactQueryAppNamespace, 'changelog', CHANGELOG_ENTITY_TYPES.EVENT, eventId];
+        queryClient.removeQueries(queryKey);
+    };
 
     if (error) {
         return error.errorComponent;
@@ -76,6 +100,7 @@ const EventDetailsSectionPlain = (props: Props) => {
                         dataEntryId={dataEntryIds.SINGLE_EVENT}
                         formFoundation={formFoundation}
                         orgUnit={orgUnit}
+                        onSaveExternal={onSaveExternal}
                         {...passOnProps}
                     /> :
                     // $FlowFixMe[cannot-spread-inexact] automated comment
@@ -112,6 +137,26 @@ const EventDetailsSectionPlain = (props: Props) => {
                         </Button>
                     </ConditionalTooltip>
                 </div>}
+                {supportsChangelog && (
+                    <OverflowButton
+                        open={actionsIsOpen}
+                        onClick={() => setActionsIsOpen(prev => !prev)}
+                        secondary
+                        small
+                        icon={<IconMore16 />}
+                        component={(
+                            <FlyoutMenu dense maxWidth="250px">
+                                <MenuItem
+                                    label={i18n.t('View changelog')}
+                                    onClick={() => {
+                                        setChangeLogIsOpen(true);
+                                        setActionsIsOpen(false);
+                                    }}
+                                />
+                            </FlyoutMenu>
+                        )}
+                    />
+                )}
             </div>
         );
     };
@@ -120,14 +165,26 @@ const EventDetailsSectionPlain = (props: Props) => {
     return orgUnit ? (
         <div className={classes.container}>
             <ViewEventSection
-                header={<ViewEventSectionHeader text={i18n.t('Event details')} icon={IconFileDocument24} />}
+                header={(
+                    <div className={classes.headerContainer}>
+                        <ViewEventSectionHeader text={i18n.t('Event details')} icon={IconFileDocument24} />
+                        {renderActionsContainer()}
+                    </div>
+                )}
             >
-                <div className={classes.content}>
+                <div className={classes.dataEntryContainer}>
                     {renderDataEntryContainer()}
-                    {renderActionsContainer()}
                 </div>
                 {showEditEvent && <NoticeBox formId={`${dataEntryIds.SINGLE_EVENT}-${dataEntryKeys.EDIT}`} /> }
             </ViewEventSection>
+            {supportsChangelog && changeLogIsOpen && (
+                <EventChangelogWrapper
+                    isOpen
+                    setIsOpen={setChangeLogIsOpen}
+                    eventId={eventId}
+                    formFoundation={programStage.stageForm}
+                />
+            )}
         </div>
     ) : null;
 };

diff --git a/...ture-core/components/Pages/ViewEvent/EventDetailsSection/EventDetailsSection.container.js b/...ture-core/components/Pages/ViewEvent/EventDetailsSection/EventDetailsSection.container.js
@@ -8,6 +8,7 @@ import {
 
 const mapStateToProps = (state: ReduxState) => ({
     showEditEvent: state.viewEventPage.eventDetailsSection && state.viewEventPage.eventDetailsSection.showEditEvent,
+    eventId: state.viewEventPage.eventId,
     programId: state.currentSelections.programId,
 });
 

diff --git a/...apture-core/components/WidgetEventEdit/EditEventDataEntry/EditEventDataEntry.container.js b/...apture-core/components/WidgetEventEdit/EditEventDataEntry/EditEventDataEntry.container.js
@@ -93,7 +93,7 @@ const mapDispatchToProps = (dispatch: ReduxDispatch, props): any => ({
     onSave: (orgUnit: OrgUnit) => (eventId: string, dataEntryId: string, formFoundation: RenderFoundation) => {
         const { onSaveExternal } = props;
         window.scrollTo(0, 0);
-        onSaveExternal && onSaveExternal(eventId);
+        onSaveExternal && onSaveExternal();
         dispatch(requestSaveEditEventDataEntry(eventId, dataEntryId, formFoundation, orgUnit));
     },
     onCancel: () => {

diff --git a/src/core_modules/capture-core/components/WidgetProfile/WidgetProfile.component.js b/src/core_modules/capture-core/components/WidgetProfile/WidgetProfile.component.js
@@ -133,7 +133,7 @@ const WidgetProfilePlain = ({
                                     {i18n.t('Edit')}
                                 </Button>
                             )}
-                            {supportsChangelog && (
+                            {!readOnlyMode && supportsChangelog && (
                                 <OverflowButton
                                     open={actionsIsOpen}
                                     onClick={() => setActionsIsOpen(prev => !prev)}

diff --git a/src/core_modules/capture-core/components/WidgetsChangelog/Changelog/Changelog.component.js b/src/core_modules/capture-core/components/WidgetsChangelog/Changelog/Changelog.component.js
@@ -76,8 +76,11 @@ export const ChangelogComponent = ({
 
         <ModalActions>
             <ButtonStrip>
-                <Button onClick={() => setIsOpen(false)}>
-                    Close
+                <Button
+                    onClick={() => setIsOpen(false)}
+                    secondary
+                >
+                    {i18n.t('Close')}
                 </Button>
             </ButtonStrip>
         </ModalActions>

diff --git a/...dules/capture-core/components/WidgetsChangelog/common/ChangelogTable/ChangelogTableRow.js b/...dules/capture-core/components/WidgetsChangelog/common/ChangelogTable/ChangelogTableRow.js
@@ -1,19 +1,14 @@
 // @flow
 import React from 'react';
 import { DataTableCell, DataTableRow } from '@dhis2/ui';
-import { withStyles } from '@material-ui/core/styles';
 import { ChangelogChangeCell } from './ChangelogChangeCell';
 import type { ChangelogRecord } from '../../Changelog/Changelog.types';
 
 type Props = {|
     record: ChangelogRecord,
 |}
 
-const styles = {
-
-};
-
-const ChangelogTableRowPLain = ({ record }: Props) => (
+export const ChangelogTableRow = ({ record }: Props) => (
     <DataTableRow>
         <DataTableCell>
             {record.date}
@@ -32,5 +27,3 @@ const ChangelogTableRowPLain = ({ record }: Props) => (
         </DataTableCell>
     </DataTableRow>
 );
-
-export const ChangelogTableRow = withStyles(styles)(ChangelogTableRowPLain);
diff --git a/src/core_modules/capture-core/components/WidgetsChangelog/common/hooks/useChangelogData.js b/src/core_modules/capture-core/components/WidgetsChangelog/common/hooks/useChangelogData.js
@@ -54,7 +54,9 @@ export const useChangelogData = ({
             params: {
                 page,
                 pageSize,
-                ...{ sortDirection: sortDirection === DEFAULT_SORT_DIRECTION ? undefined : sortDirection },
+                ...{
+                    order: sortDirection === DEFAULT_SORT_DIRECTION ? undefined : `createdAt:${sortDirection}`,
+                },
             },
         },
         {