From 59fb9ecbac4c4627484ab15eee8beda213548740 Mon Sep 17 00:00:00 2001 From: eirikhaugstulen Date: Thu, 29 Feb 2024 19:20:19 +0700 Subject: [PATCH] fix: review --- i18n/en.pot | 10 +-- .../EventDetailsSection.component.js | 71 +++++++++++++++++-- .../EventDetailsSection.container.js | 1 + .../EditEventDataEntry.container.js | 2 +- .../WidgetProfile/WidgetProfile.component.js | 2 +- .../Changelog/Changelog.component.js | 7 +- .../ChangelogTable/ChangelogTableRow.js | 9 +-- .../common/hooks/useChangelogData.js | 4 +- 8 files changed, 81 insertions(+), 25 deletions(-) diff --git a/i18n/en.pot b/i18n/en.pot index 02bebf553d..b19edc6b3b 100644 --- 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/src/core_modules/capture-core/components/Pages/ViewEvent/EventDetailsSection/EventDetailsSection.component.js b/src/core_modules/capture-core/components/Pages/ViewEvent/EventDetailsSection/EventDetailsSection.component.js index 7f6a2a440f..6119887c16 100644 --- a/src/core_modules/capture-core/components/Pages/ViewEvent/EventDetailsSection/EventDetailsSection.component.js +++ b/src/core_modules/capture-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,6 +68,7 @@ type Props = { const EventDetailsSectionPlain = (props: Props) => { const { classes, + eventId, onOpenEditEvent, showEditEvent, programStage, @@ -61,6 +76,15 @@ const EventDetailsSectionPlain = (props: Props) => { ...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) => { } + {supportsChangelog && ( + setActionsIsOpen(prev => !prev)} + secondary + small + icon={} + component={( + + { + setChangeLogIsOpen(true); + setActionsIsOpen(false); + }} + /> + + )} + /> + )} ); }; @@ -120,14 +165,26 @@ const EventDetailsSectionPlain = (props: Props) => { return orgUnit ? (
} + header={( +
+ + {renderActionsContainer()} +
+ )} > -
+
{renderDataEntryContainer()} - {renderActionsContainer()}
{showEditEvent && } + {supportsChangelog && changeLogIsOpen && ( + + )}
) : null; }; diff --git a/src/core_modules/capture-core/components/Pages/ViewEvent/EventDetailsSection/EventDetailsSection.container.js b/src/core_modules/capture-core/components/Pages/ViewEvent/EventDetailsSection/EventDetailsSection.container.js index 474b064aa4..5f0b9946b7 100644 --- a/src/core_modules/capture-core/components/Pages/ViewEvent/EventDetailsSection/EventDetailsSection.container.js +++ b/src/core_modules/capture-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/src/core_modules/capture-core/components/WidgetEventEdit/EditEventDataEntry/EditEventDataEntry.container.js b/src/core_modules/capture-core/components/WidgetEventEdit/EditEventDataEntry/EditEventDataEntry.container.js index 40c2eaa0e7..3ea09fea11 100644 --- a/src/core_modules/capture-core/components/WidgetEventEdit/EditEventDataEntry/EditEventDataEntry.container.js +++ b/src/core_modules/capture-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 index f67209443b..15898c35f0 100644 --- 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')} )} - {supportsChangelog && ( + {!readOnlyMode && supportsChangelog && ( 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 index 40066cf72c..b7dbe5c68c 100644 --- 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 = ({ - diff --git a/src/core_modules/capture-core/components/WidgetsChangelog/common/ChangelogTable/ChangelogTableRow.js b/src/core_modules/capture-core/components/WidgetsChangelog/common/ChangelogTable/ChangelogTableRow.js index 0085d0de17..d8614e7f82 100644 --- a/src/core_modules/capture-core/components/WidgetsChangelog/common/ChangelogTable/ChangelogTableRow.js +++ b/src/core_modules/capture-core/components/WidgetsChangelog/common/ChangelogTable/ChangelogTableRow.js @@ -1,7 +1,6 @@ // @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'; @@ -9,11 +8,7 @@ type Props = {| record: ChangelogRecord, |} -const styles = { - -}; - -const ChangelogTableRowPLain = ({ record }: Props) => ( +export const ChangelogTableRow = ({ record }: Props) => ( {record.date} @@ -32,5 +27,3 @@ const ChangelogTableRowPLain = ({ record }: Props) => ( ); - -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 index abea58c1dc..cf159f4df8 100644 --- 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}`, + }, }, }, {