feat: show related stages widget in view event page

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-12-05T11:39:04.447Z\n"
-"PO-Revision-Date: 2024-12-05T11:39:04.447Z\n"
+"POT-Creation-Date: 2024-12-11T08:18:31.184Z\n"
+"PO-Revision-Date: 2024-12-11T08:18:31.184Z\n"
 
 msgid "Choose one or more dates..."
 msgstr "Choose one or more dates..."
@@ -1397,12 +1397,21 @@ msgstr "Actions - {{relationshipName}}"
 msgid "Ambiguous relationships, contact system administrator"
 msgstr "Ambiguous relationships, contact system administrator"
 
+msgid "Enter details"
+msgstr "Enter details"
+
+msgid "Linked event"
+msgstr "Linked event"
+
 msgid "Enter details now"
 msgstr "Enter details now"
 
 msgid "Link to an existing event"
 msgstr "Link to an existing event"
 
+msgid "An error occurred while linking the event"
+msgstr "An error occurred while linking the event"
+
 msgid "Scheduled date"
 msgstr "Scheduled date"
 
@@ -1513,9 +1522,6 @@ msgstr "You do not have access to remove the link and delete the linked event"
 msgid "An error occurred while loading the widget."
 msgstr "An error occurred while loading the widget."
 
-msgid "Linked event"
-msgstr "Linked event"
-
 msgid ""
 "This {{stageName}} event is linked to a {{linkedStageName}} event. Review "
 "the linked event details before entering data below"

src/core_modules/capture-core/components/DataEntries/Enrollment/EnrollmentWithFirstStageDataEntry/EnrollmentWithFirstStageDataEntry.container.js

@@ -4,7 +4,7 @@ import type { Props } from './EnrollmentWithFirstStageDataEntry.types';
 import { FirstStageDataEntry } from './EnrollmentWithFirstStageDataEntry.component';
 import { useDataEntrySections } from './hooks';
 import { Section } from '../../../../metaData';
-import { WidgetRelatedStages } from '../../../WidgetRelatedStages';
+import { RelatedStagesActions } from '../../../WidgetRelatedStages';
 
 const getSectionId = sectionId =>
     (sectionId === Section.MAIN_SECTION_ID ? `${Section.MAIN_SECTION_ID}-stage` : sectionId);
@@ -26,7 +26,7 @@ export const EnrollmentWithFirstStageDataEntry = (props: Props) => {
                 firstStageMetaData={firstStageMetaData}
                 dataEntrySections={dataEntrySections}
             />
-            <WidgetRelatedStages
+            <RelatedStagesActions
                 ref={relatedStageRef}
                 programId={passOnProps.programId}
                 programStageId={firstStageMetaData.stage?.id}

src/core_modules/capture-core/components/DataEntries/converters/getConvertedRelatedStageEvent/getConvertedRelatedStageEvent.types.js

@@ -11,20 +11,18 @@ type CommonEventDetails = {
     enrollment?: string,
     scheduledAt: string,
     dataValues: Array<{ dataElement: string, value: any }>,
-    status?: string,
+    status: 'ACTIVE' | 'VISITED' | 'COMPLETED' | 'SCHEDULE' | 'OVERDUE' | 'SKIPPED',
 }
 
 export type RequestEvent = {
     ...CommonEventDetails,
     occurredAt: string,
     notes?: Array<{ value: string }>,
-    completedAt?: string,
 }
 
 export type LinkedRequestEvent = {
     ...CommonEventDetails,
     occurredAt?: string,
-    completedAt?: string,
 }
 
 export type ConvertedRelatedStageEventProps = {|

src/core_modules/capture-core/components/Pages/EnrollmentEditEvent/EnrollmentEditEventPage.component.js

@@ -57,6 +57,7 @@ export const EnrollmentEditEventPageComponent = ({
     onSaveAssigneeError,
     onDeleteTrackedEntitySuccess,
     onAccessLostFromTransfer,
+    onNavigateToEvent,
 }: PlainProps) => (
     <OrgUnitFetcher orgUnitId={orgUnitId}>
         <TopBar
@@ -121,6 +122,7 @@ export const EnrollmentEditEventPageComponent = ({
             onAccessLostFromTransfer={onAccessLostFromTransfer}
             feedbackEmptyText={i18n.t('No feedback for this event yet')}
             indicatorEmptyText={i18n.t('No indicator output for this event yet')}
+            onNavigateToEvent={onNavigateToEvent}
         />
         <NoticeBox formId={`${dataEntryIds.ENROLLMENT_EVENT}-${mode}`} />
     </OrgUnitFetcher>

src/core_modules/capture-core/components/Pages/EnrollmentEditEvent/EnrollmentEditEventPage.container.js

@@ -187,6 +187,17 @@ const EnrollmentEditEventPageWithContextPlain = ({
     const onGoBack = () =>
         history.push(`/enrollment?${buildUrlQueryString({ enrollmentId })}`);
 
+    const onNavigateToEvent = (eventIdToRedirectTo: string) => {
+        history.push(
+            `/enrollmentEventEdit?${buildUrlQueryString({
+                eventId: eventIdToRedirectTo,
+                orgUnitId,
+                programId,
+                enrollmentId,
+            })}`,
+        );
+    };
+
     const onHandleScheduleSave = (eventData: Object) => {
         dispatch(updateEnrollmentEvent(eventId, eventData));
         history.push(`enrollment?${buildUrlQueryString({ enrollmentId })}`);
@@ -291,6 +302,7 @@ const EnrollmentEditEventPageWithContextPlain = ({
             onSaveAssigneeError={onSaveAssigneeError}
             events={enrollmentSite?.events}
             onAccessLostFromTransfer={onAccessLostFromTransfer}
+            onNavigateToEvent={onNavigateToEvent}
         />
     );
 };

src/core_modules/capture-core/components/Pages/EnrollmentEditEvent/EnrollmentEditEventPage.types.js

@@ -29,6 +29,7 @@ export type PlainProps = {|
     onDelete: () => void,
     onAddNew: () => void,
     onGoBack: () => void,
+    onNavigateToEvent: (eventId: string) => void,
     onBackToMainPage: () => void,
     onBackToDashboard: () => void,
     onBackToViewEvent: () => void,

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

@@ -10,11 +10,13 @@ import {
     AssigneeWidget,
     WidgetTypes,
     TwoEventWorkspace,
+    WidgetRelatedStagesWorkspace,
 } from '../../common/EnrollmentOverviewDomain/EnrollmentPageLayout';
 
 export const WidgetsForEnrollmentEventEdit: $ReadOnly<{ [key: string]: WidgetConfig }> = Object.freeze({
     EditEventWorkspace,
     TwoEventWorkspace,
+    WidgetRelatedStagesWorkspace,
     EventNote,
     AssigneeWidget,
     ...DefaultWidgetsForEnrollmentOverview,
@@ -26,6 +28,10 @@ export const DefaultPageLayout: PageLayoutConfig = {
             type: WidgetTypes.COMPONENT,
             name: 'EditEventWorkspace',
         },
+        {
+            type: WidgetTypes.COMPONENT,
+            name: 'WidgetRelatedStagesWorkspace',
+        },
     ],
     rightColumn: [
         {

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

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

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

@@ -29,6 +29,10 @@ import type {
     InputIndicatorProps,
 } from '../../../../../WidgetFeedback/WidgetFeedback.types';
 import { WidgetTwoEventWorkspace } from '../../../../../WidgetTwoEventWorkspace';
+import { WidgetRelatedStages } from '../../../../../WidgetRelatedStages';
+import {
+    EnrollmentPageKeys,
+} from '../DefaultEnrollmentLayout.constants';
 
 export const QuickActions: WidgetConfig = {
     Component: EnrollmentQuickActions,
@@ -286,3 +290,29 @@ export const EventNote: WidgetConfig = {
         dataEntryId,
     }),
 };
+
+export const WidgetRelatedStagesWorkspace: WidgetConfig = {
+    Component: WidgetRelatedStages,
+    shouldHideWidget: ({ currentPage }) => currentPage === EnrollmentPageKeys.EDIT_EVENT,
+    getProps: ({
+        program,
+        stageId,
+        enrollmentId,
+        eventId,
+        teiId,
+        onUpdateEnrollmentStatus,
+        onUpdateEnrollmentStatusSuccess,
+        onUpdateEnrollmentStatusError,
+        onNavigateToEvent,
+    }) => ({
+        programId: program.id,
+        programStageId: stageId,
+        enrollmentId,
+        eventId,
+        teiId,
+        onUpdateEnrollment: onUpdateEnrollmentStatus,
+        onUpdateEnrollmentSuccess: onUpdateEnrollmentStatusSuccess,
+        onUpdateEnrollmentError: onUpdateEnrollmentStatusError,
+        onNavigateToEvent,
+    }),
+};

src/core_modules/capture-core/components/WidgetEnrollmentEventNew/Validated/Validated.component.js

@@ -6,7 +6,7 @@ import { Widget } from '../../Widget';
 import { DataEntry } from '../DataEntry';
 import { FinishButtons } from '../FinishButtons';
 import { SavingText } from '../SavingText';
-import { WidgetRelatedStages } from '../../WidgetRelatedStages';
+import { RelatedStagesActions } from '../../WidgetRelatedStages';
 import type { Props } from './validated.types';
 
 const styles = () => ({
@@ -47,7 +47,7 @@ const ValidatedPlain = ({
                     id={id}
                     orgUnit={orgUnit}
                 />
-                <WidgetRelatedStages
+                <RelatedStagesActions
                     ref={relatedStageRef}
                     enrollmentId={enrollmentId}
                     programId={programId}

src/core_modules/capture-core/components/WidgetRelatedStages/RelatedStagesActions/RelatedStagesActions.component.js

@@ -5,11 +5,11 @@ import { Button, colors, Radio, spacers, spacersNum } from '@dhis2/ui';
 import { withStyles } from '@material-ui/core';
 import { ConditionalTooltip } from 'capture-core/components/Tooltips/ConditionalTooltip';
 import { relatedStageActions, mainOptionTranslatedTexts, relatedStageStatus } from '../constants';
-import { useCanAddNewEventToStage } from '../hooks/useCanAddNewEventToStage';
+import { useCanAddNewEventToStage } from '../hooks';
 import { DataSection } from '../../DataSection';
 import { ScheduleInOrgUnit } from '../ScheduleInOrgUnit';
 import { useProgramStageInfo } from '../../../metaDataMemoryStores/programCollection/helpers';
-import type { Props } from './RelatedStagesActions.types';
+import type { PlainProps } from './RelatedStagesActions.types';
 import { LinkToExisting } from '../LinkToExisting';
 import { EnterDataInOrgUnit } from '../EnterDataInOrgUnit/EnterData.component';
 
@@ -38,6 +38,9 @@ const styles = () => ({
     clearSelections: {
         padding: spacers.dp8,
     },
+    link: {
+        padding: spacers.dp8,
+    },
 });
 
 const Schedule = ({
@@ -171,6 +174,16 @@ const LinkExistingResponse = ({
     );
 };
 
+const LinkButton = withStyles(styles)(({ onLink, label, loading, classes }) => (
+    onLink ? (
+        <div className={classes.link}>
+            <Button secondary small onClick={onLink} loading={loading}>
+                {label}
+            </Button>
+        </div>
+    ) : null
+));
+
 const RelatedStagesActionsPlain = ({
     classes,
     type,
@@ -184,7 +197,8 @@ const RelatedStagesActionsPlain = ({
     errorMessages,
     saveAttempted,
     actionsOptions,
-}: Props) => {
+    onLink,
+}: PlainProps) => {
     const { programStage } = useProgramStageInfo(constraint?.programStage?.id);
 
     const selectedAction = useMemo(() => relatedStagesDataValues.linkMode, [relatedStagesDataValues.linkMode]);
@@ -253,37 +267,47 @@ const RelatedStagesActionsPlain = ({
             )}
 
             {selectedAction === relatedStageActions.SCHEDULE_IN_ORG && (
-                <ScheduleInOrgUnit
-                    relatedStagesDataValues={relatedStagesDataValues}
-                    setRelatedStagesDataValues={setRelatedStagesDataValues}
-                    scheduledLabel={scheduledLabel}
-                    saveAttempted={saveAttempted}
-                    errorMessages={errorMessages}
-                />
+                <>
+                    <ScheduleInOrgUnit
+                        relatedStagesDataValues={relatedStagesDataValues}
+                        setRelatedStagesDataValues={setRelatedStagesDataValues}
+                        scheduledLabel={scheduledLabel}
+                        saveAttempted={saveAttempted}
+                        errorMessages={errorMessages}
+                    />
+                    <LinkButton onLink={onLink} label={i18n.t('Schedule')} loading={saveAttempted} />
+                </>
             )}
 
             {selectedAction === relatedStageActions.ENTER_DATA && (
-                <EnterDataInOrgUnit
-                    linkableStageLabel={programStage.stageForm.name}
-                    relatedStagesDataValues={relatedStagesDataValues}
-                    setRelatedStagesDataValues={setRelatedStagesDataValues}
-                    saveAttempted={saveAttempted}
-                    errorMessages={errorMessages}
-                />
+                <>
+                    <EnterDataInOrgUnit
+                        linkableStageLabel={programStage.stageForm.name}
+                        relatedStagesDataValues={relatedStagesDataValues}
+                        setRelatedStagesDataValues={setRelatedStagesDataValues}
+                        saveAttempted={saveAttempted}
+                        errorMessages={errorMessages}
+                    />
+                    <LinkButton onLink={onLink} label={i18n.t('Enter details')} loading={saveAttempted} />
+                </>
             )}
 
             {selectedAction === relatedStageActions.LINK_EXISTING_RESPONSE && (
-                <LinkToExisting
-                    relatedStagesDataValues={relatedStagesDataValues}
-                    setRelatedStagesDataValues={setRelatedStagesDataValues}
-                    linkableEvents={linkableEvents}
-                    linkableStageLabel={programStage.stageForm.name}
-                    errorMessages={errorMessages}
-                    saveAttempted={saveAttempted}
-                />
+                <>
+                    <LinkToExisting
+                        relatedStagesDataValues={relatedStagesDataValues}
+                        setRelatedStagesDataValues={setRelatedStagesDataValues}
+                        linkableEvents={linkableEvents}
+                        linkableStageLabel={programStage.stageForm.name}
+                        errorMessages={errorMessages}
+                        saveAttempted={saveAttempted}
+                    />
+                    <LinkButton onLink={onLink} label={i18n.t('Link')} loading={saveAttempted} />
+                </>
             )}
+
         </DataSection>
     );
 };
 
-export const RelatedStagesActions: ComponentType<$Diff<Props, CssClasses>> = withStyles(styles)(RelatedStagesActionsPlain);
+export const RelatedStagesActions: ComponentType<$Diff<PlainProps, CssClasses>> = withStyles(styles)(RelatedStagesActionsPlain);