-
-
- {currentPageMode === dataEntryKeys.VIEW && (
-
-
- }
- onClick={() => dispatch(startShowEditEventDataEntry(orgUnit, programCategory))}
+
+
+
+
+ }
+ noncollapsible
+ borderless
+ >
+
+ {currentPageMode === dataEntryKeys.VIEW ? (
+
- {i18n.t('Edit event')}
-
-
-
- {supportsChangelog && (
- setActionsIsOpen(prev => !prev)}
- icon={}
- small
- secondary
- dataTest={'widget-event-edit-overflow-button'}
- component={(
-
-
- )}
- />
- )}
-
- )}
-
-
- {icon && (
-
-
+
+ ) : (
+
+
)}
- {name}
-
- }
- noncollapsible
- >
- {currentPageMode === dataEntryKeys.VIEW ? (
-
-
- ) : (
-
-
-
- )}
-
+
+
+
+
+ )}
+ {name}
+
+ {currentPageMode === dataEntryKeys.VIEW && (
+
+
+ }
+ onClick={() => dispatch(startShowEditEventDataEntry(orgUnit, programCategory))}
+ data-test="widget-enrollment-event-edit-button"
+ >
+ {i18n.t('Edit event')}
+
+
+
+ {supportsChangelog && (
+ setActionsIsOpen(prev => !prev)}
+ icon={}
+ small
+ secondary
+ dataTest={'widget-event-edit-overflow-button'}
+ component={
+
+
+ }
+ />
+ )}
+
+ )}
+
+
+
+ )}
+ {linkedStage.name}
+ {currentPage === EnrollmentPageKeys.VIEW_EVENT && (
+
+ setActionsIsOpen(prev => !prev)}
+ icon={}
+ small
+ secondary
+ dataTest={'widget-event-navigate-to-linked-event'}
+ component={
+
+
+ }
+ />
+
+ )}
+
+ );
+};
+
+export const WidgetHeader: ComponentType = withStyles(styles)(WidgetHeaderPlain);
+
diff --git a/src/core_modules/capture-core/components/WidgetTwoEventWorkspace/WidgetHeader/WidgetHeader.types.js b/src/core_modules/capture-core/components/WidgetTwoEventWorkspace/WidgetHeader/WidgetHeader.types.js
new file mode 100644
index 0000000000..9a8b8d460f
--- /dev/null
+++ b/src/core_modules/capture-core/components/WidgetTwoEventWorkspace/WidgetHeader/WidgetHeader.types.js
@@ -0,0 +1,17 @@
+// @flow
+import { EnrollmentPageKeys }
+ from '../../Pages/common/EnrollmentOverviewDomain/EnrollmentPageLayout/DefaultEnrollmentLayout.constants';
+import type { ProgramStage } from '../../../metaData';
+
+export type PlainProps = {|
+ orgUnitId: string,
+ linkedEvent: { event: string },
+ linkedStage: ProgramStage,
+ currentPage: $Values | string,
+|};
+
+export type Props = {|
+ ...PlainProps,
+ ...CssClasses,
+|};
+
diff --git a/src/core_modules/capture-core/components/WidgetTwoEventWorkspace/WidgetHeader/index.js b/src/core_modules/capture-core/components/WidgetTwoEventWorkspace/WidgetHeader/index.js
new file mode 100644
index 0000000000..efff17d3ce
--- /dev/null
+++ b/src/core_modules/capture-core/components/WidgetTwoEventWorkspace/WidgetHeader/index.js
@@ -0,0 +1,2 @@
+// @flow
+export { WidgetHeader } from './WidgetHeader.container';
diff --git a/src/core_modules/capture-core/components/WidgetTwoEventWorkspace/WidgetTwoEventWorkspace.container.js b/src/core_modules/capture-core/components/WidgetTwoEventWorkspace/WidgetTwoEventWorkspace.container.js
index a889aace6b..645f84064a 100644
--- a/src/core_modules/capture-core/components/WidgetTwoEventWorkspace/WidgetTwoEventWorkspace.container.js
+++ b/src/core_modules/capture-core/components/WidgetTwoEventWorkspace/WidgetTwoEventWorkspace.container.js
@@ -1,55 +1,23 @@
// @flow
-import React, { useState } from 'react';
-import { useHistory } from 'react-router-dom';
-import { colors, FlyoutMenu, IconMore16, MenuItem, spacersNum } from '@dhis2/ui';
+import React from 'react';
import i18n from '@dhis2/d2-i18n';
-import { withStyles } from '@material-ui/core/';
import type { Props } from './WidgetTwoEventWorkspace.types';
import { useMetadataForProgramStage } from '../DataEntries/common/ProgramStage/useMetadataForProgramStage';
import { Widget } from '../Widget';
import { useLinkedEventByOriginId } from './hooks/useLinkedEventByOriginId';
import { WidgetTwoEventWorkspaceComponent } from './WidgetTwoEventWorkspace.component';
-import { OverflowButton } from '../Buttons';
-import { buildUrlQueryString } from '../../utils/routing';
-import {
- EnrollmentPageKeys,
-} from '../Pages/common/EnrollmentOverviewDomain/EnrollmentPageLayout/DefaultEnrollmentLayout.constants';
-import { NonBundledDhis2Icon } from '../NonBundledDhis2Icon';
import { useClientDataValues } from './hooks/useClientDataValues';
+import { WidgetWrapper } from './WidgetWrapper';
+import { WidgetHeader } from './WidgetHeader';
-const styles = {
- menu: {
- display: 'flex',
- alignItems: 'center',
- padding: spacersNum.dp8,
- justifyContent: 'end',
- background: colors.white,
- borderTopLeftRadius: 3,
- borderTopRightRadius: 3,
- borderStyle: 'solid',
- borderColor: colors.grey400,
- borderWidth: 1,
- borderBottomWidth: 0,
- },
- header: {
- display: 'flex',
- alignItems: 'center',
- padding: spacersNum.dp8,
- },
- icon: {
- marginRight: spacersNum.dp8,
- },
-};
-
-const WidgetTwoEventWorkspacePlain = ({
+export const WidgetTwoEventWorkspace = ({
eventId,
programId,
orgUnitId,
currentPage,
- classes,
+ stage,
+ type,
}: Props) => {
- const [actionsIsOpen, setActionsIsOpen] = useState(false);
- const { push } = useHistory();
const {
linkedEvent,
dataValues,
@@ -59,7 +27,7 @@ const WidgetTwoEventWorkspacePlain = ({
const {
formFoundation,
- stage,
+ stage: linkedStage,
isLoading: isLoadingMetadata,
isError: isMetadataError,
} = useMetadataForProgramStage({
@@ -89,69 +57,34 @@ const WidgetTwoEventWorkspacePlain = ({
);
}
- if (!linkedEvent || !formFoundation || !stage) {
+ if (!linkedEvent || !formFoundation || !linkedStage) {
return null;
}
return (
-
- {currentPage === EnrollmentPageKeys.VIEW_EVENT && (
-
- setActionsIsOpen(prev => !prev)}
- icon={}
- small
- secondary
- dataTest={'widget-event-navigate-to-linked-event'}
- component={(
-
-
- )}
+
+ }
+ noncollapsible
+ >
+
-
- )}
-
-
- {stage.icon && (
-
-
-
- )}
- {stage.name}
-
+
+ }
+ />
);
};
-
-export const WidgetTwoEventWorkspace = withStyles(
- styles,
-)(WidgetTwoEventWorkspacePlain);
diff --git a/src/core_modules/capture-core/components/WidgetTwoEventWorkspace/WidgetTwoEventWorkspace.types.js b/src/core_modules/capture-core/components/WidgetTwoEventWorkspace/WidgetTwoEventWorkspace.types.js
index 52aff39ded..c79a68c5d5 100644
--- a/src/core_modules/capture-core/components/WidgetTwoEventWorkspace/WidgetTwoEventWorkspace.types.js
+++ b/src/core_modules/capture-core/components/WidgetTwoEventWorkspace/WidgetTwoEventWorkspace.types.js
@@ -2,13 +2,17 @@
import {
EnrollmentPageKeys,
} from '../Pages/common/EnrollmentOverviewDomain/EnrollmentPageLayout/DefaultEnrollmentLayout.constants';
+import { WidgetTwoEventWorkspaceWrapperTypes } from './index';
+import type { ProgramStage } from '../../metaData';
-type PlainProps = {|
+export type Props = {|
programId: string,
eventId: string,
orgUnitId: string,
stageId: string,
- currentPage: $Values
,
+ currentPage: $Values | string,
+ stage?: ProgramStage,
+ type?: $Values,
|}
export type LinkedEvent = {|
@@ -18,7 +22,3 @@ export type LinkedEvent = {|
orgUnit: string,
|}
-export type Props = {|
- ...PlainProps,
- ...CssClasses,
-|}
diff --git a/src/core_modules/capture-core/components/WidgetTwoEventWorkspace/WidgetTwoEventWorkspaceWrapper.const.js b/src/core_modules/capture-core/components/WidgetTwoEventWorkspace/WidgetTwoEventWorkspaceWrapper.const.js
new file mode 100644
index 0000000000..421d827ca5
--- /dev/null
+++ b/src/core_modules/capture-core/components/WidgetTwoEventWorkspace/WidgetTwoEventWorkspaceWrapper.const.js
@@ -0,0 +1,5 @@
+// @flow
+
+export const WidgetTwoEventWorkspaceWrapperTypes = {
+ EDIT_EVENT: 'editEvent',
+};
diff --git a/src/core_modules/capture-core/components/WidgetTwoEventWorkspace/WidgetWrapper/WidgetWrapper.container.js b/src/core_modules/capture-core/components/WidgetTwoEventWorkspace/WidgetWrapper/WidgetWrapper.container.js
new file mode 100644
index 0000000000..dcc0defdc9
--- /dev/null
+++ b/src/core_modules/capture-core/components/WidgetTwoEventWorkspace/WidgetWrapper/WidgetWrapper.container.js
@@ -0,0 +1,74 @@
+// @flow
+import React from 'react';
+import { colors, spacersNum, IconLink16 } from '@dhis2/ui';
+import i18n from '@dhis2/d2-i18n';
+import { withStyles } from '@material-ui/core/';
+import type { Props } from './WidgetWrapper.types';
+import { WidgetTwoEventWorkspaceWrapperTypes } from '../index';
+
+const styles = {
+ container: {
+ width: 'fit-content',
+ marginBottom: '16px',
+ margin: '16px',
+ },
+ header: {
+ display: 'flex',
+ alignItems: 'center',
+ paddingBottom: spacersNum.dp16,
+ fontWeight: 500,
+ fontSize: 16,
+ color: colors.grey800,
+ },
+ referalResponse: {
+ padding: spacersNum.dp16,
+ backgroundColor: colors.blue100,
+ borderRadius: '3px',
+ },
+ linkedEvent: {
+ color: colors.blue900,
+ verticalAlign: 'middle',
+ display: 'flex',
+ fontSize: '16px',
+ fontWeight: '500',
+ },
+ icon: {
+ marginRight: spacersNum.dp8,
+ },
+ decription: {
+ margin: `${spacersNum.dp8}px 0`,
+ },
+};
+
+const WidgetWrapperPlain = ({ widget, type, stage, linkedStage, classes }: Props) => {
+ if (type === WidgetTwoEventWorkspaceWrapperTypes.EDIT_EVENT) {
+ return (
+
+
{stage?.name}
+
+
+
+
+
+
{i18n.t('Linked event')}
+
+
+ {i18n.t(
+ 'This {{stageName}} event is linked to a {{linkedStageName}} event. Review the linked event details before entering data below',
+ {
+ linkedStageName: linkedStage?.name,
+ stageName: stage?.name,
+ interpolation: { escapeValue: false },
+ },
+ )}
+
+ {widget}
+
+