feat: [DHIS2-17655] Two event workspace (#3726)

i18n/en.pot

@@ -35,6 +35,9 @@ msgstr ""
 "(in the same domain). Please refresh this page if you would like to use "
 "this version again, but be aware that this will close other versions."
 
+msgid "More"
+msgstr "More"
+
 msgid "View {{programName}} dashboard"
 msgstr "View {{programName}} dashboard"
 
@@ -995,6 +998,9 @@ msgstr "The enrollment event data could not be found"
 msgid "Loading"
 msgstr "Loading"
 
+msgid "An error occurred while loading the form"
+msgstr "An error occurred while loading the form"
+
 msgid "Possible duplicates found"
 msgstr "Possible duplicates found"
 
@@ -1537,6 +1543,15 @@ msgstr "{{ scheduledEvents }} scheduled"
 msgid "Stages and Events"
 msgstr "Stages and Events"
 
+msgid "An error occurred while loading the widget."
+msgstr "An error occurred while loading the widget."
+
+msgid "View linked event"
+msgstr "View linked event"
+
+msgid "Scheduled"
+msgstr "Scheduled"
+
 msgid "Changelog"
 msgstr "Changelog"
 
@@ -1703,9 +1718,6 @@ msgstr "An error has occured. See log for details"
 msgid "Scheduled{{ escape }} due {{ time }}"
 msgstr "Scheduled{{ escape }} due {{ time }}"
 
-msgid "Scheduled"
-msgstr "Scheduled"
-
 msgid "Overdue{{ escape }} due {{ time }}"
 msgstr "Overdue{{ escape }} due {{ time }}"
 

src/core_modules/capture-core/components/Buttons/OverflowButton.component.js

@@ -1,5 +1,6 @@
 // @flow
 import * as React from 'react';
+import i18n from '@dhis2/d2-i18n';
 import { useRef, useState } from 'react';
 import { Button, Layer, Popper } from '@dhis2/ui';
 
@@ -42,6 +43,7 @@ export const OverflowButton = ({
     return (
         <div ref={anchorRef}>
             <Button
+                aria-label={label ?? i18n.t('More')}
                 primary={primary}
                 secondary={secondary}
                 dataTest={dataTest}

src/core_modules/capture-core/components/Pages/EnrollmentEditEvent/PageLayout/DefaultPageLayout.constants.js

@@ -9,17 +9,23 @@ import {
     EventNote,
     AssigneeWidget,
     WidgetTypes,
+    TwoEventWorkspace,
 } from '../../common/EnrollmentOverviewDomain/EnrollmentPageLayout';
 
 export const WidgetsForEnrollmentEventEdit: $ReadOnly<{ [key: string]: WidgetConfig }> = Object.freeze({
     EditEventWorkspace,
+    TwoEventWorkspace,
     EventNote,
     AssigneeWidget,
     ...DefaultWidgetsForEnrollmentOverview,
 });
 
 export const DefaultPageLayout: PageLayoutConfig = {
     leftColumn: [
+        {
+            type: WidgetTypes.COMPONENT,
+            name: 'TwoEventWorkspace',
+        },
         {
             type: WidgetTypes.COMPONENT,
             name: 'EditEventWorkspace',

src/core_modules/capture-core/components/Pages/common/EnrollmentOverviewDomain/EnrollmentPageLayout/DefaultEnrollmentLayout.types.js

@@ -8,6 +8,7 @@ type DefaultComponents = 'QuickActions'
     | 'AssigneeWidget'
     | 'NewEventWorkspace'
     | 'EditEventWorkspace'
+    | 'TwoEventWorkspace'
     | 'EnrollmentNote'
     | 'EventNote'
     | 'TrackedEntityRelationship'

src/core_modules/capture-core/components/Pages/common/EnrollmentOverviewDomain/EnrollmentPageLayout/EnrollmentPageLayout.js

@@ -69,9 +69,10 @@ const EnrollmentPageLayoutPlain = ({
 
     const allProps = useMemo(() => ({
         ...passOnProps,
+        currentPage,
         toggleVisibility,
         addRelationShipContainerElement,
-    }), [addRelationShipContainerElement, passOnProps, toggleVisibility]);
+    }), [addRelationShipContainerElement, currentPage, passOnProps, toggleVisibility]);
 
     const {
         leftColumnWidgets,

src/core_modules/capture-core/components/Pages/common/EnrollmentOverviewDomain/EnrollmentPageLayout/LayoutComponentConfig/LayoutComponentConfig.js

@@ -28,6 +28,7 @@ import type {
     InputFeedbackProps,
     InputIndicatorProps,
 } from '../../../../../WidgetFeedback/WidgetFeedback.types';
+import { WidgetTwoEventWorkspace } from '../../../../../WidgetTwoEventWorkspace';
 
 export const QuickActions: WidgetConfig = {
     Component: EnrollmentQuickActions,
@@ -242,6 +243,17 @@ export const EditEventWorkspace: WidgetConfig = {
     }),
 };
 
+export const TwoEventWorkspace: WidgetConfig = {
+    Component: WidgetTwoEventWorkspace,
+    getProps: ({ currentPage, eventId, program, stageId, orgUnitId }) => ({
+        currentPage,
+        eventId,
+        programId: program.id,
+        orgUnitId,
+        stageId,
+    }),
+};
+
 export const AssigneeWidget: WidgetConfig = {
     Component: WidgetAssignee,
     getProps: ({

src/core_modules/capture-core/components/Pages/common/WidgetEventEditWrapper/WidgetEventEditWrapper.js

@@ -12,7 +12,12 @@ type WidgetProps = {|
     ...Props,
 |}
 
-export const WidgetEventEditWrapper = ({ pageStatus, programId, stageId, ...passOnProps }: WidgetProps) => {
+export const WidgetEventEditWrapper = ({ pageStatus, ...passOnProps }: WidgetProps) => {
+    const {
+        programId,
+        stageId,
+    } = passOnProps;
+
     const {
         formFoundation,
         stage,
@@ -34,14 +39,22 @@ export const WidgetEventEditWrapper = ({ pageStatus, programId, stageId, ...pass
         );
     }
 
-    if (isLoading || !formFoundation || !stage || isError) {
+    if (isLoading) {
         return (
             <div>
                 {i18n.t('Loading')}
             </div>
         );
     }
 
+    if (!formFoundation || !stage || isError) {
+        return (
+            <div>
+                {i18n.t('An error occurred while loading the form')}
+            </div>
+        );
+    }
+
     return (
         <WidgetEventEdit
             {...passOnProps}

src/core_modules/capture-core/components/WidgetTwoEventWorkspace/FlatListOrgUnitField/FlatListOrgUnitField.js

@@ -0,0 +1,19 @@
+// @flow
+import React from 'react';
+import { useOrgUnitName } from '../../../metadataRetrieval/orgUnitName';
+
+type Props = {
+    orgUnitId: string,
+}
+
+export const FlatListOrgUnitField = ({
+    orgUnitId,
+}: Props) => {
+    const { displayName } = useOrgUnitName(orgUnitId);
+
+    return (
+        <span>
+            {displayName}
+        </span>
+    );
+};

src/core_modules/capture-core/components/WidgetTwoEventWorkspace/FlatListOrgUnitField/index.js

@@ -0,0 +1,3 @@
+// @flow
+
+export { FlatListOrgUnitField } from './FlatListOrgUnitField';

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

@@ -0,0 +1,59 @@
+// @flow
+import React, { useMemo } from 'react';
+import { spacers } from '@dhis2/ui';
+import { FlatList } from 'capture-ui';
+import withStyles from '@material-ui/core/styles/withStyles';
+import type { RenderFoundation } from '../../metaData';
+import { getDataEntryDetails, Placements } from './utils/getDataEntryDetails';
+
+type Props = {
+    linkedEvent: any,
+    dataValues: any,
+    formFoundation: RenderFoundation,
+    classes: {
+        container: string,
+    },
+}
+
+const styles = {
+    container: {
+        padding: `${spacers.dp8} ${spacers.dp16}`,
+        display: 'flex',
+        flexDirection: 'column',
+        gap: spacers.dp8,
+    },
+};
+
+const WidgetTwoEventWorkspacePlain = ({ linkedEvent, dataValues, formFoundation, classes }: Props) => {
+    const dataEntryValues = useMemo(() => getDataEntryDetails(
+        linkedEvent,
+        formFoundation,
+    ), [linkedEvent, formFoundation]);
+
+    const listValues = useMemo(() => {
+        const elements = formFoundation.getElements();
+
+        return elements.map((dataElement) => {
+            const value = dataValues[dataElement.id];
+            return {
+                key: dataElement.formName,
+                value: value ?? '',
+                reactKey: dataElement.id,
+            };
+        }).filter(Boolean);
+    }, [dataValues, formFoundation]);
+
+    return (
+        <div className={classes.container}>
+            <FlatList
+                list={[
+                    ...dataEntryValues[Placements.TOP],
+                    ...listValues,
+                    ...dataEntryValues[Placements.BOTTOM],
+                ]}
+            />
+        </div>
+    );
+};
+
+export const WidgetTwoEventWorkspaceComponent = withStyles(styles)(WidgetTwoEventWorkspacePlain);