From d65882eacb711865d9f6a860c65d56a0f4d68157 Mon Sep 17 00:00:00 2001 From: Eirik Haugstulen Date: Wed, 13 Nov 2024 12:18:09 +0100 Subject: [PATCH] feat: [DHIS2-18250] Breadcrumb for event & enrollment pages (#3849) --- .../EnrollmentAddEventPageForm.feature | 6 +- .../EnrollmentAddEventPageNavigation.feature | 2 +- .../e2e/EnrollmentAddEventPage/sharedSteps.js | 6 +- .../EnrollmentEditEventPageForm.feature | 36 ++-- .../EnrollmentEditEventPageForm.js | 14 +- .../EnrollmentEditEventPageNavigation.feature | 12 +- .../EnrollmentEditEventPageNavigation.js | 10 +- .../EnrollmentPageNavigation.js | 11 +- .../EnrollmentQuickActions.js | 8 +- cypress/e2e/EnrollmentPage/sharedSteps.js | 4 + .../e2e/ScopeSelector/ScopeSelector.feature | 18 +- cypress/e2e/ScopeSelector/ScopeSelector.js | 12 +- .../e2e/TopBarActions/TopBarActions.feature | 4 +- cypress/e2e/TopBarActions/TopBarActions.js | 6 +- .../WidgetEventNote/index.js | 4 +- i18n/en.pot | 55 ++++-- .../EnrollmentBreadcrumb.js | 171 ++++++++++++++++++ .../hooks/useWorkingListLabel.js | 60 ++++++ .../Breadcrumbs/EnrollmentBreadcrumb/index.js | 3 + .../EventBreadcrumb/EventBreadcrumb.js | 106 +++++++++++ .../hooks/useWorkingListLabel.js | 40 ++++ .../Breadcrumbs/EventBreadcrumb/index.js | 3 + .../Breadcrumbs/common/BreadcrumbItem.js | 47 +++++ .../EnrollmentPageDefault.container.js | 29 +-- .../EnrollmentPageDefault.types.js | 11 +- ...EnrollmentAddEventPageDefault.container.js | 23 ++- .../EnrollmentAddEventPageDefault.types.js | 9 +- .../EnrollmentEditEventPage.component.js | 8 + .../EnrollmentEditEventPage.container.js | 28 ++- .../EnrollmentEditEventPage.types.js | 7 +- .../ViewEventComponent/ViewEvent.component.js | 68 ++++--- .../ViewEventComponent/ViewEvent.container.js | 7 +- .../ViewEvent/ViewEventPage.component.js | 1 + .../DefaultEnrollmentLayout.constants.js | 8 - .../EnrollmentPageLayout.js | 56 ++++-- .../ScopeSelector/hooks/useSetProgramId.js | 2 +- .../WidgetEventEdit.container.js | 30 +-- 37 files changed, 744 insertions(+), 181 deletions(-) create mode 100644 src/core_modules/capture-core/components/Breadcrumbs/EnrollmentBreadcrumb/EnrollmentBreadcrumb.js create mode 100644 src/core_modules/capture-core/components/Breadcrumbs/EnrollmentBreadcrumb/hooks/useWorkingListLabel.js create mode 100644 src/core_modules/capture-core/components/Breadcrumbs/EnrollmentBreadcrumb/index.js create mode 100644 src/core_modules/capture-core/components/Breadcrumbs/EventBreadcrumb/EventBreadcrumb.js create mode 100644 src/core_modules/capture-core/components/Breadcrumbs/EventBreadcrumb/hooks/useWorkingListLabel.js create mode 100644 src/core_modules/capture-core/components/Breadcrumbs/EventBreadcrumb/index.js create mode 100644 src/core_modules/capture-core/components/Breadcrumbs/common/BreadcrumbItem.js diff --git a/cypress/e2e/EnrollmentAddEventPage/EnrollmentAddEventPageForm/EnrollmentAddEventPageForm.feature b/cypress/e2e/EnrollmentAddEventPage/EnrollmentAddEventPageForm/EnrollmentAddEventPageForm.feature index 869b837615..e74ed7c4f8 100644 --- a/cypress/e2e/EnrollmentAddEventPage/EnrollmentAddEventPageForm/EnrollmentAddEventPageForm.feature +++ b/cypress/e2e/EnrollmentAddEventPage/EnrollmentAddEventPageForm/EnrollmentAddEventPageForm.feature @@ -50,7 +50,7 @@ Feature: User interacts with the Enrollment New Event Workspace Scenario: User should be asked to create new event after completing a stage and choose to cancel Given you land on the enrollment new event page by having typed #/enrollmentEventNew?enrollmentId=zRfAPUpjoG3&orgUnitId=DiszpKrYNg8&programId=M3xtLkYBlKI&stageId=CWaAcQYKVpq&teiId=S3JjTA4QMNe - Then you see the following Enrollment: New Event + Then you see the new event form And you see the widget header Foci investigation & classification And you type 2022-01-01 in the input number 0 And you type x in the input number 20 @@ -62,7 +62,7 @@ Feature: User interacts with the Enrollment New Event Workspace Scenario: User should be asked to create new event after completing a stage and choose to continue Given you land on the enrollment new event page by having typed #/enrollmentEventNew?enrollmentId=zRfAPUpjoG3&orgUnitId=DiszpKrYNg8&programId=M3xtLkYBlKI&stageId=CWaAcQYKVpq&teiId=S3JjTA4QMNe - Then you see the following Enrollment: New Event + Then you see the new event form And you see the widget header Foci investigation & classification And you type 2022-01-01 in the input number 0 And you type x in the input number 20 @@ -74,7 +74,7 @@ Feature: User interacts with the Enrollment New Event Workspace Scenario: User is able to schedule an event with a note Given you land on the enrollment new event page by having typed /#/enrollmentEventNew?enrollmentId=qcFFRp7DpcX&orgUnitId=DiszpKrYNg8&programId=WSGAb5XwJ3Y&stageId=edqlbukwRfQ&teiId=erqa3phUfpI - And you see the following Enrollment: New Event + And you see the new event form And you select the schedule tab When you add a note to the event And the events saves successfully diff --git a/cypress/e2e/EnrollmentAddEventPage/EnrollmentAddEventPageNavigation/EnrollmentAddEventPageNavigation.feature b/cypress/e2e/EnrollmentAddEventPage/EnrollmentAddEventPageNavigation/EnrollmentAddEventPageNavigation.feature index 5364d08ec0..de83e45d76 100644 --- a/cypress/e2e/EnrollmentAddEventPage/EnrollmentAddEventPageNavigation/EnrollmentAddEventPageNavigation.feature +++ b/cypress/e2e/EnrollmentAddEventPage/EnrollmentAddEventPageNavigation/EnrollmentAddEventPageNavigation.feature @@ -1,7 +1,7 @@ Feature: User interacts with Enrollment Add event page Scenario: The user can land on the enrollment add event page. Given you land on the enrollment add event page by having typed /#/enrollmentEventNew?programId=IpHINAT79UW&orgUnitId=DiszpKrYNg8&teiId=tIJu6iqQxNV&enrollmentId=CCBLMntFuzb&stageId=A03MvHHogjR - Then you see the following Enrollment: New Event + Then you see the new event form And you see the widget header Birth And you see the following Report date And you see the add event form details diff --git a/cypress/e2e/EnrollmentAddEventPage/sharedSteps.js b/cypress/e2e/EnrollmentAddEventPage/sharedSteps.js index 9be509e28c..354b982afa 100644 --- a/cypress/e2e/EnrollmentAddEventPage/sharedSteps.js +++ b/cypress/e2e/EnrollmentAddEventPage/sharedSteps.js @@ -1,4 +1,4 @@ -import { Then, defineStep as And } from '@badeball/cypress-cucumber-preprocessor'; +import { defineStep as And, Then, When } from '@badeball/cypress-cucumber-preprocessor'; Then(/^you see the following (.*)$/, (message) => { cy.contains(message); @@ -12,3 +12,7 @@ And(/^you see the widget header (.*)$/, (name) => { cy.contains(name).should('exist'); }); }); + +When('you see the new event form', () => { + cy.get('[data-test="new-enrollment-event-form"]').should('exist'); +}); diff --git a/cypress/e2e/EnrollmentEditEventPage/EnrollmentEditEventPageForm/EnrollmentEditEventPageForm.feature b/cypress/e2e/EnrollmentEditEventPage/EnrollmentEditEventPageForm/EnrollmentEditEventPageForm.feature index 594b821007..31ab0f99c8 100644 --- a/cypress/e2e/EnrollmentEditEventPage/EnrollmentEditEventPageForm/EnrollmentEditEventPageForm.feature +++ b/cypress/e2e/EnrollmentEditEventPage/EnrollmentEditEventPageForm/EnrollmentEditEventPageForm.feature @@ -25,12 +25,12 @@ And the user see the following text: Yes Scenario: The user can enter and exit the edit mode. Given you land on the enrollment event page with selected Person by having typed /#/enrollmentEventEdit?orgUnitId=DiszpKrYNg8&eventId=V1CerIi3sdL -And the user see the following text: Enrollment: View Event +And the view enrollment event form is in view mode And the user see the following text: Apgar Score When the user clicks on the edit button -Then the user see the following text: Enrollment: Edit Event +Then the view enrollment event form is in edit mode When the user clicks on the cancel button -And the user see the following text: Enrollment: View Event +And the view enrollment event form is in view mode Scenario: The tracker program rules are triggered correctly for the Child Program. Given you land on the enrollment event page with selected Person by having typed /#/enrollmentEventEdit?orgUnitId=DiszpKrYNg8&eventId=V1CerIi3sdL @@ -53,58 +53,58 @@ Then the user don't see the following text: Low-dose acetylsalicylic acid given Scenario: User can modify and save the data in the form Given you land on the enrollment event page with selected Person by having typed /#/enrollmentEventEdit?orgUnitId=DiszpKrYNg8&eventId=V1CerIi3sdL -Then the user see the following text: Enrollment: View Event +Then the view enrollment event form is in view mode And the apgar score is 11 When the user clicks on the edit button And the user set the apgar score to 5 And the user clicks on the save button Then you are redirected to the enrollment dashboard And you open the Birth stage event -Then the user see the following text: Enrollment: View Event +Then the view enrollment event form is in view mode And the user see the following text: 5 When the user clicks on the edit button And the user set the apgar score to 11 And the user clicks on the save button Then you are redirected to the enrollment dashboard And you open the Birth stage event -Then the user see the following text: Enrollment: View Event +Then the view enrollment event form is in view mode And the user see the following text: 11 Scenario: User goes directly to Edit mode for scheduled events Given you land on the enrollment event page with selected Person by having typed /#/enrollmentEventEdit?eventId=RIrfCcEP8Uu&orgUnitId=DiszpKrYNg8 - Then the user see the following text: Enrollment: Edit Event + Then the view enrollment event form is in edit mode And the user see the following text: Infant Feeding When the user clicks on the cancel button - Then the user see the following text: Enrollment Dashboard + Then the user is navigated to the enrollment dashboard -Scenario: User can update schedule date for a scheduled event +Scenario: User can update schedule date for a scheduled event Given you land on the enrollment event page with selected Person by having typed /#/enrollmentEventEdit?eventId=RIrfCcEP8Uu&orgUnitId=DiszpKrYNg8 - Then the user see the following text: Enrollment: Edit Event + Then the view enrollment event form is in edit mode And the user see the following text: Infant Feeding When the user clicks switch tab to Schedule And the user selects another schedule date And the user clicks on the schedule button on widget-enrollment-event - Then the user see the following text: Enrollment Dashboard + Then the user is navigated to the enrollment dashboard Scenario: User can update schedule date if Hide due date is enabled Given you land on the enrollment event page with selected Focus area by having typed /#/enrollmentEventNew?enrollmentId=V8uPJuhvlL7&orgUnitId=DiszpKrYNg8&programId=M3xtLkYBlKI&stageId=uvMKOn1oWvd&tab=SCHEDULE&teiId=dNpxRu1mWG5 - Then the user see the following text: Enrollment: New Event + Then the add event form is displayed And the user see the following text: Foci response And the user see the schedule date and info box And the user clicks on the schedule button on add-event-enrollment-page-content - Then the user see the following text: Enrollment Dashboard + Then the user is navigated to the enrollment dashboard Scenario: User can see disabled scheduled date for active event Given you land on the enrollment event page with selected Person by having typed /#/enrollmentEventEdit?eventId=FV4JCI73wO2&orgUnitId=DiszpKrYNg8 - Then the user see the following text: Enrollment: View Event + Then the view enrollment event form is in view mode When the user clicks on the edit button - Then the user see the following text: Enrollment: Edit Event + Then the view enrollment event form is in edit mode Then the user see the schedule date field with tooltip: Scheduled date cannot be changed for Active events - + @user:trackerAutoTestRestricted Scenario: The user cannot enter edit mode for completed events Given you land on the enrollment event page with selected Person by having typed /#/enrollmentEventEdit?eventId=nUVwTLuQ6FT&orgUnitId=DiszpKrYNg8 - And the user see the following text: Enrollment: View Event + And the view enrollment event form is in view mode Then the edit button should be disabled Scenario: User can edit the event and complete the enrollment @@ -113,4 +113,4 @@ Scenario: User can edit the event and complete the enrollment And the user clicks on the edit button And the user completes the event And the user completes the enrollment - Then the user sees the enrollment status and recently edited event in Case outcome event status is completed \ No newline at end of file + Then the user sees the enrollment status and recently edited event in Case outcome event status is completed diff --git a/cypress/e2e/EnrollmentEditEventPage/EnrollmentEditEventPageForm/EnrollmentEditEventPageForm.js b/cypress/e2e/EnrollmentEditEventPage/EnrollmentEditEventPageForm/EnrollmentEditEventPageForm.js index 70468a3a93..3d94481898 100644 --- a/cypress/e2e/EnrollmentEditEventPage/EnrollmentEditEventPageForm/EnrollmentEditEventPageForm.js +++ b/cypress/e2e/EnrollmentEditEventPage/EnrollmentEditEventPageForm/EnrollmentEditEventPageForm.js @@ -1,4 +1,4 @@ -import { Given, When, Then, defineStep as And } from '@badeball/cypress-cucumber-preprocessor'; +import { defineStep as And, Given, Then, When } from '@badeball/cypress-cucumber-preprocessor'; import { getCurrentYear } from '../../../support/date'; const changeEnrollmentAndEventsStatus = () => ( @@ -212,3 +212,15 @@ Then('the edit button should be disabled', () => { .eq(1) .should('be.disabled'); }); + +And('the add event form is displayed', () => { + cy.get('[data-test="add-event-enrollment-page-content"]').should('exist'); +}); + +And('the user is navigated to the enrollment dashboard', () => { + cy.get('[data-test="enrollment-overview-page"]').should('exist'); +}); + +And(/^the view enrollment event form is in (.*) mode$/, (mode) => { + cy.get(`[data-test="widget-enrollment-event-${mode}"]`).should('exist'); +}); diff --git a/cypress/e2e/EnrollmentEditEventPage/EnrollmentEditEventPageNavigation/EnrollmentEditEventPageNavigation.feature b/cypress/e2e/EnrollmentEditEventPage/EnrollmentEditEventPageNavigation/EnrollmentEditEventPageNavigation.feature index 118c8e4c14..663543760e 100644 --- a/cypress/e2e/EnrollmentEditEventPage/EnrollmentEditEventPageNavigation/EnrollmentEditEventPageNavigation.feature +++ b/cypress/e2e/EnrollmentEditEventPage/EnrollmentEditEventPageNavigation/EnrollmentEditEventPageNavigation.feature @@ -2,18 +2,18 @@ Feature: User interacts with Enrollment event page Scenario: The user can land on the enrollment event page. Given you land on the enrollment event page by having typed #/enrollmentEventEdit?orgUnitId=DiszpKrYNg8&eventId=O7IACPx40nQ - Then you see the following Enrollment: View Event + Then the view enrollment event form is in view mode And you see the following Baby Postnatal - Scenario: User can navigate back and forward between the enrollment event edit page and the enrollment page + Scenario: User can navigate back and forward between the enrollment event edit page and the enrollment page Given you open the enrollment page which has multiple events and stages - Then you see the following Enrollment Dashboard + Then the user is navigated to the enrollment dashboard And the widgets are done rendering And the program stages should be displayed When the user clicks the first second antenatal care visit event - Then you see the following Enrollment: View Event + Then the view enrollment event form is in view mode And you see the following antenatal care visit And you see the following No ARV medication plan When the user clicks the "Back to all stages and events" button - Then you see the following Enrollment Dashboard - And the program stages should be displayed \ No newline at end of file + Then the user is navigated to the enrollment dashboard + And the program stages should be displayed diff --git a/cypress/e2e/EnrollmentEditEventPage/EnrollmentEditEventPageNavigation/EnrollmentEditEventPageNavigation.js b/cypress/e2e/EnrollmentEditEventPage/EnrollmentEditEventPageNavigation/EnrollmentEditEventPageNavigation.js index 76fbb1915c..3664b4c338 100644 --- a/cypress/e2e/EnrollmentEditEventPage/EnrollmentEditEventPageNavigation/EnrollmentEditEventPageNavigation.js +++ b/cypress/e2e/EnrollmentEditEventPage/EnrollmentEditEventPageNavigation/EnrollmentEditEventPageNavigation.js @@ -1,4 +1,4 @@ -import { Given, When, Then, defineStep as And } from '@badeball/cypress-cucumber-preprocessor'; +import { defineStep as And, Given, Then, When } from '@badeball/cypress-cucumber-preprocessor'; Given(/^you land on the enrollment event page by having typed (.*)$/, (url) => { cy.visit(url); @@ -39,3 +39,11 @@ Then('the program stages should be displayed', () => { cy.contains('Care at birth').should('exist'); }); }); + +And('the user is navigated to the enrollment dashboard', () => { + cy.get('[data-test="enrollment-overview-page"]').should('exist'); +}); + +And(/^the view enrollment event form is in (.*) mode$/, (mode) => { + cy.get(`[data-test="widget-enrollment-event-${mode}"]`).should('exist'); +}); diff --git a/cypress/e2e/EnrollmentPage/EnrollmentPageNavigation/EnrollmentPageNavigation.js b/cypress/e2e/EnrollmentPage/EnrollmentPageNavigation/EnrollmentPageNavigation.js index 4d331734b9..46fe376da8 100644 --- a/cypress/e2e/EnrollmentPage/EnrollmentPageNavigation/EnrollmentPageNavigation.js +++ b/cypress/e2e/EnrollmentPage/EnrollmentPageNavigation/EnrollmentPageNavigation.js @@ -1,9 +1,8 @@ -import { Given, When, Then, defineStep as And } from '@badeball/cypress-cucumber-preprocessor'; +import { defineStep as And, Given, Then, When } from '@badeball/cypress-cucumber-preprocessor'; Given('you are on an enrollment page', () => { cy.visit('/#/enrollment?programId=IpHINAT79UW&orgUnitId=UgYg0YW7ZIh&teiId=fhFQhO0xILJ&enrollmentId=gPDueU02tn8'); - cy.get('[data-test="enrollment-page-content"]') - .contains('Enrollment Dashboard'); + cy.get('[data-test="enrollment-overview-page"]'); }); And('you select the Inpatient morbidity program', () => { @@ -90,8 +89,7 @@ Then(/^you should be redirect to (.*)$/, (expectedUrl) => { Given('you land on the enrollment page by having typed only the enrollmentId in the url', () => { cy.visit('/#/enrollment?enrollmentId=gPDueU02tn8'); - cy.get('[data-test="enrollment-page-content"]') - .contains('Enrollment Dashboard'); + cy.get('[data-test="enrollment-overview-page"]'); cy.contains('[data-test="scope-selector"]', 'Carlos Cruz'); cy.contains('[data-test="scope-selector"]', 'Taninahun (Malen) CHP'); cy.contains('1 event'); @@ -119,8 +117,7 @@ When('you reset the org unit selection', () => { Then('you see the enrollment page but there is no org unit id in the url', () => { cy.url().should('not.include', 'orgUnitId'); - cy.get('[data-test="enrollment-page-content"]') - .contains('Enrollment Dashboard'); + cy.get('[data-test="enrollment-overview-page"]'); }); When('you reset the enrollment selection', () => { diff --git a/cypress/e2e/EnrollmentPage/EnrollmentQuickActions/EnrollmentQuickActions.js b/cypress/e2e/EnrollmentPage/EnrollmentQuickActions/EnrollmentQuickActions.js index a450af97d9..ff2c76281f 100644 --- a/cypress/e2e/EnrollmentPage/EnrollmentQuickActions/EnrollmentQuickActions.js +++ b/cypress/e2e/EnrollmentPage/EnrollmentQuickActions/EnrollmentQuickActions.js @@ -1,4 +1,4 @@ -import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor'; +import { Given, Then, When } from '@badeball/cypress-cucumber-preprocessor'; Given(/^you open the enrollment page by typing (.*)$/, url => cy.visit(url), @@ -6,14 +6,12 @@ Given(/^you open the enrollment page by typing (.*)$/, url => Given('you are on an enrollment page with stage available', () => { cy.visit('/#/enrollment?programId=ur1Edk5Oe2n&orgUnitId=UgYg0YW7ZIh&teiId=zmgVvEZ91Kg&enrollmentId=xRnBV5aJDeF'); - cy.get('[data-test="enrollment-page-content"]') - .contains('Enrollment Dashboard'); + cy.get('[data-test="enrollment-overview-page"]'); }); Given('you are on an enrollment page with no stage available', () => { cy.visit('/#/enrollment?programId=IpHINAT79UW&orgUnitId=UgYg0YW7ZIh&teiId=fhFQhO0xILJ&enrollmentId=gPDueU02tn8'); - cy.get('[data-test="enrollment-page-content"]') - .contains('Enrollment Dashboard'); + cy.get('[data-test="enrollment-overview-page"]'); }); When(/^you click the (.*) event-button/, (mode) => { diff --git a/cypress/e2e/EnrollmentPage/sharedSteps.js b/cypress/e2e/EnrollmentPage/sharedSteps.js index 8f8e2992ca..b21b9ec516 100644 --- a/cypress/e2e/EnrollmentPage/sharedSteps.js +++ b/cypress/e2e/EnrollmentPage/sharedSteps.js @@ -7,3 +7,7 @@ Given('you open the enrollment page', () => { Given('you open the enrollment page which has multiples events and stages', () => { cy.visit('#/enrollment?enrollmentId=ek4WWAgXX5i'); }); + +Given('you are on the enrollment dashboard', () => { + cy.url().should('include', '/#/enrollment?'); +}); diff --git a/cypress/e2e/ScopeSelector/ScopeSelector.feature b/cypress/e2e/ScopeSelector/ScopeSelector.feature index ec80a5d2b0..5a06714422 100644 --- a/cypress/e2e/ScopeSelector/ScopeSelector.feature +++ b/cypress/e2e/ScopeSelector/ScopeSelector.feature @@ -144,14 +144,14 @@ Feature: User uses the ScopeSelector to navigate Examples: | url | state | message | - | /#/enrollment?enrollmentId=gPDueU02tn8 | all | Enrollment Dashboard | - | /#/enrollment?teiId=fhFQhO0xILJ&enrollmentId=gPDueU02tn8 | all | Enrollment Dashboard | - | /#/enrollment?orgUnitId=UgYg0YW7ZIh&enrollmentId=gPDueU02tn8 | all | Enrollment Dashboard | - | /#/enrollment?orgUnitId=UgYg0YW7ZIh&teiId=fhFQhO0xILJ&enrollmentId=gPDueU02tn8 | all | Enrollment Dashboard | - | /#/enrollment?programId=IpHINAT79UW&enrollmentId=gPDueU02tn8 | all | Enrollment Dashboard | - | /#/enrollment?programId=IpHINAT79UW&teiId=fhFQhO0xILJ&enrollmentId=gPDueU02tn8 | all | Enrollment Dashboard | - | /#/enrollment?programId=IpHINAT79UW&orgUnitId=UgYg0YW7ZIh&enrollmentId=gPDueU02tn8 | all | Enrollment Dashboard | - | /#/enrollment?programId=IpHINAT79UW&orgUnitId=UgYg0YW7ZIh&teiId=fhFQhO0xILJ&enrollmentId=gPDueU02tn8 | all | Enrollment Dashboard | + | /#/enrollment?enrollmentId=gPDueU02tn8 | all | Enrollment dashboard | + | /#/enrollment?teiId=fhFQhO0xILJ&enrollmentId=gPDueU02tn8 | all | Enrollment dashboard | + | /#/enrollment?orgUnitId=UgYg0YW7ZIh&enrollmentId=gPDueU02tn8 | all | Enrollment dashboard | + | /#/enrollment?orgUnitId=UgYg0YW7ZIh&teiId=fhFQhO0xILJ&enrollmentId=gPDueU02tn8 | all | Enrollment dashboard | + | /#/enrollment?programId=IpHINAT79UW&enrollmentId=gPDueU02tn8 | all | Enrollment dashboard | + | /#/enrollment?programId=IpHINAT79UW&teiId=fhFQhO0xILJ&enrollmentId=gPDueU02tn8 | all | Enrollment dashboard | + | /#/enrollment?programId=IpHINAT79UW&orgUnitId=UgYg0YW7ZIh&enrollmentId=gPDueU02tn8 | all | Enrollment dashboard | + | /#/enrollment?programId=IpHINAT79UW&orgUnitId=UgYg0YW7ZIh&teiId=fhFQhO0xILJ&enrollmentId=gPDueU02tn8 | all | Enrollment dashboard | | /#/enrollment?orgUnitId=UgYg0YW7ZIh&teiId=fhFQhO0xILJ | teiAndOrgUnit | Choose a program to add new or see existing enrollments for Carlos Cruz | | /#/enrollment?programId=IpHINAT79UW&teiId=fhFQhO0xILJ | teiAndChildProgram | Choose an enrollment to view the dashboard. | | /#/enrollment?programId=qDkgAbB5Jlk&teiId=fhFQhO0xILJ | teiAndMalariaProgram | Carlos Cruz is a person and cannot be enrolled in the Malaria case diagnosis, treatment and investigation. Choose another program that allows person enrollment. Enroll a new malaria entity in this program.| @@ -184,6 +184,8 @@ Feature: User uses the ScopeSelector to navigate When you reset the program selection Then you see message explaining you need to select a program + # DHIS2-18326 + @skip Scenario: Enrollment event edit page > resetting the org unit Given you land on a enrollment page domain by having typed /#/enrollmentEventEdit?orgUnitId=UgYg0YW7ZIh&eventId=lQQyjR73hHk When you reset the org unit selection diff --git a/cypress/e2e/ScopeSelector/ScopeSelector.js b/cypress/e2e/ScopeSelector/ScopeSelector.js index 00b119713f..c870644462 100644 --- a/cypress/e2e/ScopeSelector/ScopeSelector.js +++ b/cypress/e2e/ScopeSelector/ScopeSelector.js @@ -1,4 +1,4 @@ -import { Given, When, Then, defineStep as And } from '@badeball/cypress-cucumber-preprocessor'; +import { defineStep as And, Given, Then, When } from '@badeball/cypress-cucumber-preprocessor'; import { getCurrentYear } from '../../support/date'; Given(/^you land on a enrollment page domain by having typed (.*)$/, (url) => { @@ -263,8 +263,7 @@ Then(/^you see the following (.*)$/, (message) => { And('you land on the enrollment page by having typed only the enrollmentId on the url', () => { cy.visit('/#/enrollment?enrollmentId=gPDueU02tn8'); - cy.get('[data-test="enrollment-page-content"]') - .contains('Enrollment Dashboard'); + cy.get('[data-test="enrollment-overview-page"]'); }); And('you reset the tei selection', () => { @@ -288,7 +287,7 @@ And('you reset the org unit selection', () => { And('you see the enrollment event Edit page but there is no org unit id in the url', () => { cy.url().should('eq', `${Cypress.config().baseUrl}/#/enrollmentEventEdit?eventId=lQQyjR73hHk`); - cy.contains('Enrollment: View Event'); + cy.get('[data-test="widget-enrollment-event-view"]').should('exist'); }); And('you see the enrollment event New page but there is no org unit id in the url', () => { @@ -298,13 +297,12 @@ And('you see the enrollment event New page but there is no org unit id in the ur And('you see the enrollment event New page but there is no stage id in the url', () => { cy.url().should('eq', `${Cypress.config().baseUrl}/#/enrollmentEventNew?enrollmentId=gPDueU02tn8&orgUnitId=UgYg0YW7ZIh&programId=IpHINAT79UW&teiId=fhFQhO0xILJ`); - cy.contains('Enrollment: New Event'); + cy.contains('Choose a stage for a new event'); }); And('you see the enrollment page', () => { cy.url().should('eq', `${Cypress.config().baseUrl}/#/enrollment?enrollmentId=gPDueU02tn8&orgUnitId=UgYg0YW7ZIh&programId=IpHINAT79UW&teiId=fhFQhO0xILJ`); - cy.get('[data-test="enrollment-page-content"]') - .contains('Enrollment Dashboard'); + cy.get('[data-test="enrollment-overview-page"]'); }); And('you reset the enrollment selection', () => { diff --git a/cypress/e2e/TopBarActions/TopBarActions.feature b/cypress/e2e/TopBarActions/TopBarActions.feature index 20f8aa8f74..25135c9328 100644 --- a/cypress/e2e/TopBarActions/TopBarActions.feature +++ b/cypress/e2e/TopBarActions/TopBarActions.feature @@ -61,7 +61,7 @@ Feature: User uses the TopBarActions to navigate Given you land on a enrollment page domain by having typed /#/enrollmentEventEdit?orgUnitId=DwpbWkiqjMy&eventId=KNbStF7YTon And the user see the following text: Gestational age at visit When the user clicks on the edit button - And the user see the following text: Enrollment: Edit Event + And the view enrollment event form is in edit mode When the user clicks the element containing the text: Clear selections Then the user sees the warning popup @@ -88,7 +88,7 @@ Feature: User uses the TopBarActions to navigate Given you land on a enrollment page domain by having typed #/enrollmentEventNew?programId=WSGAb5XwJ3Y&orgUnitId=DwpbWkiqjMy&teiId=yFcOhsM1Yoa&enrollmentId=ek4WWAgXX5i&stageId=edqlbukwRfQ And the user see the following text: Clear selections When the user clicks the arrow button to see the dropdown - And the user clicks the element containing the text: Create new in another program... + And the user clicks the element containing the text: Create new in another program... Then the current url is /#/new?orgUnitId=DwpbWkiqjMy Scenario: Enrollment Event New page > You go to the new page inside the same program diff --git a/cypress/e2e/TopBarActions/TopBarActions.js b/cypress/e2e/TopBarActions/TopBarActions.js index 81d8cc996e..6fb563ed38 100644 --- a/cypress/e2e/TopBarActions/TopBarActions.js +++ b/cypress/e2e/TopBarActions/TopBarActions.js @@ -1,4 +1,4 @@ -import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor'; +import { defineStep as And, Given, Then, When } from '@badeball/cypress-cucumber-preprocessor'; Given(/^you land on a enrollment page domain by having typed (.*)$/, (url) => { cy.visit(url); @@ -24,3 +24,7 @@ When(/^the user set the WHOMCH Diastolic blood pressure to (.*)/, score => .type(score) .blur(), ); + +And(/^the view enrollment event form is in (.*) mode$/, (mode) => { + cy.get(`[data-test="widget-enrollment-event-${mode}"]`).should('exist'); +}); diff --git a/cypress/e2e/WidgetsForEnrollmentPages/WidgetEventNote/index.js b/cypress/e2e/WidgetsForEnrollmentPages/WidgetEventNote/index.js index 2a1c5200ef..8b0ae0e38e 100644 --- a/cypress/e2e/WidgetsForEnrollmentPages/WidgetEventNote/index.js +++ b/cypress/e2e/WidgetsForEnrollmentPages/WidgetEventNote/index.js @@ -1,4 +1,4 @@ -import { When, Then } from '@badeball/cypress-cucumber-preprocessor'; +import { Then, When } from '@badeball/cypress-cucumber-preprocessor'; Then('the enrollment widget should be loaded', () => { cy.contains('The enrollment event data could not be found').should('not.exist'); @@ -7,7 +7,7 @@ Then('the enrollment widget should be loaded', () => { When('you click edit mode', () => { cy.contains('[data-test="dhis2-uicore-button"]', 'Edit event') .click(); - cy.contains('Enrollment: Edit Event').should('exist'); + cy.get('[data-test="widget-enrollment-event-edit"]').should('exist'); }); When(/^you fill in the note: (.*)$/, (note) => { diff --git a/i18n/en.pot b/i18n/en.pot index c14d1bcb73..9abb22fa99 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-10-28T13:13:50.133Z\n" -"PO-Revision-Date: 2024-10-28T13:13:50.133Z\n" +"POT-Creation-Date: 2024-11-04T18:45:47.626Z\n" +"PO-Revision-Date: 2024-11-04T18:45:47.626Z\n" msgid "Choose one or more dates..." msgstr "Choose one or more dates..." @@ -35,6 +35,39 @@ 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 "Enrollment dashboard" +msgstr "Enrollment dashboard" + +msgid "View event" +msgstr "View event" + +msgid "Edit event" +msgstr "Edit event" + +msgid "New event" +msgstr "New event" + +msgid "Active enrollments" +msgstr "Active enrollments" + +msgid "Completed enrollments" +msgstr "Completed enrollments" + +msgid "Cancelled enrollments" +msgstr "Cancelled enrollments" + +msgid "{{trackedEntityName}} list" +msgstr "{{trackedEntityName}} list" + +msgid "Search" +msgstr "Search" + +msgid "Working List" +msgstr "Working List" + +msgid "Event list" +msgstr "Event list" + msgid "More" msgstr "More" @@ -293,9 +326,6 @@ msgstr "Yes, discard changes" msgid "No, cancel" msgstr "No, cancel" -msgid "New event" -msgstr "New event" - msgid "You don't have access to create an event in the current selections" msgstr "You don't have access to create an event in the current selections" @@ -514,9 +544,6 @@ msgstr "Type to filter options" msgid "No match found" msgstr "No match found" -msgid "Search" -msgstr "Search" - msgid "Clear" msgstr "Clear" @@ -858,9 +885,6 @@ msgstr "event" msgid "You don't have access to edit this event" msgstr "You don't have access to edit this event" -msgid "Edit event" -msgstr "Edit event" - msgid "View changelog" msgstr "View changelog" @@ -898,15 +922,6 @@ msgstr "Event could not be loaded" msgid "Organisation unit could not be loaded" msgstr "Organisation unit could not be loaded" -msgid "Dashboard" -msgstr "Dashboard" - -msgid "Edit Event" -msgstr "Edit Event" - -msgid "View Event" -msgstr "View Event" - msgid "Selected program" msgstr "Selected program" diff --git a/src/core_modules/capture-core/components/Breadcrumbs/EnrollmentBreadcrumb/EnrollmentBreadcrumb.js b/src/core_modules/capture-core/components/Breadcrumbs/EnrollmentBreadcrumb/EnrollmentBreadcrumb.js new file mode 100644 index 0000000000..1387ce9209 --- /dev/null +++ b/src/core_modules/capture-core/components/Breadcrumbs/EnrollmentBreadcrumb/EnrollmentBreadcrumb.js @@ -0,0 +1,171 @@ +// @flow +import type { ComponentType } from 'react'; +import React, { useCallback, useMemo, useState } from 'react'; +import i18n from '@dhis2/d2-i18n'; +import { withStyles } from '@material-ui/core/styles'; +import { colors, IconChevronRight16 } from '@dhis2/ui'; +import { useWorkingListLabel } from './hooks/useWorkingListLabel'; +import { BreadcrumbItem } from '../common/BreadcrumbItem'; +import { defaultDialogProps } from '../../Dialogs/DiscardDialog.constants'; +import { DiscardDialog } from '../../Dialogs/DiscardDialog.component'; +import { + EnrollmentPageKeys, +} from '../../Pages/common/EnrollmentOverviewDomain/EnrollmentPageLayout/DefaultEnrollmentLayout.constants'; + +type Props = { + onBackToMainPage: () => void, + onBackToDashboard?: () => void, + onBackToViewEvent?: () => void, + displayFrontPageList: boolean, + programId: string, + userInteractionInProgress?: boolean, + trackedEntityName?: string, +}; + +export const EventStatuses = { + ACTIVE: 'ACTIVE', + COMPLETED: 'COMPLETED', + SKIPPED: 'SKIPPED', + SCHEDULE: 'SCHEDULE', + OVERDUE: 'OVERDUE', +}; + +const styles = { + container: { + display: 'flex', + alignItems: 'center', + }, +}; + +const pageKeys = Object.freeze({ + MAIN_PAGE: 'mainPage', + ...EnrollmentPageKeys, +}); + +const eventIsScheduled = eventStatus => [EventStatuses.SCHEDULE, EventStatuses.OVERDUE, EventStatuses.SKIPPED] + .includes(eventStatus); + +const BreadcrumbsPlain = ({ + onBackToMainPage, + onBackToDashboard, + onBackToViewEvent, + eventStatus, + programId, + trackedEntityName, + displayFrontPageList, + userInteractionInProgress = false, + page, + classes, +}) => { + const [openWarning, setOpenWarning] = useState(null); + + const { label } = useWorkingListLabel({ + trackedEntityName, + programId, + displayFrontPageList, + }); + + const handleNavigation = useCallback((callback, warningType) => { + if (userInteractionInProgress) { + setOpenWarning(warningType); + } else { + callback && callback(); + } + }, [userInteractionInProgress]); + + const breadcrumbItems = useMemo(() => ([ + { + key: pageKeys.MAIN_PAGE, + onClick: () => handleNavigation(onBackToMainPage, pageKeys.MAIN_PAGE), + label, + selected: false, + condition: true, + }, + { + key: pageKeys.OVERVIEW, + onClick: () => handleNavigation(onBackToDashboard, pageKeys.OVERVIEW), + label: i18n.t('Enrollment dashboard'), + selected: page === pageKeys.OVERVIEW, + condition: true, + }, + { + key: pageKeys.VIEW_EVENT, + onClick: () => handleNavigation(onBackToViewEvent, pageKeys.VIEW_EVENT), + label: i18n.t('View event'), + selected: page === pageKeys.VIEW_EVENT, + condition: page === pageKeys.VIEW_EVENT || + (page === pageKeys.EDIT_EVENT && !eventIsScheduled(eventStatus)), + }, + { + key: pageKeys.EDIT_EVENT, + onClick: () => {}, + label: i18n.t('Edit event'), + selected: page === pageKeys.EDIT_EVENT, + condition: page === pageKeys.EDIT_EVENT, + }, + { + key: pageKeys.NEW_EVENT, + onClick: () => {}, + label: i18n.t('New event'), + selected: page === pageKeys.NEW_EVENT, + condition: page === pageKeys.NEW_EVENT, + }, + ].filter(item => item.condition)), [ + label, + page, + eventStatus, + handleNavigation, + onBackToMainPage, + onBackToDashboard, + onBackToViewEvent, + ]); + + return ( +
+ {breadcrumbItems.map((button, index) => ( + + + {index < (breadcrumbItems.length - 1) && ( + + )} + + ))} + + { + setOpenWarning(null); + onBackToMainPage && onBackToMainPage(); + }} + onCancel={() => setOpenWarning(null)} + {...defaultDialogProps} + /> + + { + setOpenWarning(null); + onBackToDashboard && onBackToDashboard(); + }} + onCancel={() => setOpenWarning(null)} + {...defaultDialogProps} + /> + + { + setOpenWarning(null); + onBackToViewEvent && onBackToViewEvent(); + }} + onCancel={() => setOpenWarning(null)} + {...defaultDialogProps} + /> +
+ ); +}; + +export const EnrollmentBreadcrumb: ComponentType<$Diff> = withStyles(styles)(BreadcrumbsPlain); diff --git a/src/core_modules/capture-core/components/Breadcrumbs/EnrollmentBreadcrumb/hooks/useWorkingListLabel.js b/src/core_modules/capture-core/components/Breadcrumbs/EnrollmentBreadcrumb/hooks/useWorkingListLabel.js new file mode 100644 index 0000000000..a151d169ed --- /dev/null +++ b/src/core_modules/capture-core/components/Breadcrumbs/EnrollmentBreadcrumb/hooks/useWorkingListLabel.js @@ -0,0 +1,60 @@ +// @flow +import i18n from '@dhis2/d2-i18n'; +import { useMemo } from 'react'; +import { useSelector } from 'react-redux'; + +type Props = { + programId: string, + displayFrontPageList: boolean, + trackedEntityName?: string, +} + +const DefaultFilterLabels = { + active: i18n.t('Active enrollments'), + complete: i18n.t('Completed enrollments'), + cancelled: i18n.t('Cancelled enrollments'), +}; + +export const useWorkingListLabel = ({ + programId, + trackedEntityName, + displayFrontPageList, +}: Props) => { + const workingListTemplates = useSelector(({ workingListsTemplates }) => workingListsTemplates?.teiList); + const workingListProgramId = useSelector(({ workingListsContext }) => workingListsContext?.teiList?.programIdView); + const { selectedTemplateId, loading: isLoadingTemplates, templates } = workingListTemplates ?? {}; + const selectedTemplate = templates?.find(({ id }) => id === selectedTemplateId); + const isSameProgram = workingListProgramId === programId; + + const label = useMemo(() => { + if (isLoadingTemplates) return '...'; + + if (isSameProgram) { + if (selectedTemplate && !selectedTemplate.isDefault) { + return selectedTemplate.name; + } + + if (selectedTemplateId && !selectedTemplate) { + return DefaultFilterLabels[selectedTemplateId]; + } + + if (selectedTemplate.name === 'default') { + return i18n.t('{{trackedEntityName}} list', { trackedEntityName }); + } + } + + if (!displayFrontPageList) return i18n.t('Search'); + return trackedEntityName ? i18n.t('{{trackedEntityName}} list', { trackedEntityName }) : i18n.t('Working List'); + }, [ + displayFrontPageList, + isLoadingTemplates, + isSameProgram, + selectedTemplate, + selectedTemplateId, + trackedEntityName, + ]); + + return { + label, + }; +}; diff --git a/src/core_modules/capture-core/components/Breadcrumbs/EnrollmentBreadcrumb/index.js b/src/core_modules/capture-core/components/Breadcrumbs/EnrollmentBreadcrumb/index.js new file mode 100644 index 0000000000..b4c1a29b6a --- /dev/null +++ b/src/core_modules/capture-core/components/Breadcrumbs/EnrollmentBreadcrumb/index.js @@ -0,0 +1,3 @@ +// @flow + +export { EnrollmentBreadcrumb } from './EnrollmentBreadcrumb'; diff --git a/src/core_modules/capture-core/components/Breadcrumbs/EventBreadcrumb/EventBreadcrumb.js b/src/core_modules/capture-core/components/Breadcrumbs/EventBreadcrumb/EventBreadcrumb.js new file mode 100644 index 0000000000..0665843c00 --- /dev/null +++ b/src/core_modules/capture-core/components/Breadcrumbs/EventBreadcrumb/EventBreadcrumb.js @@ -0,0 +1,106 @@ +// @flow +import React, { type ComponentType, useCallback, useMemo, useState } from 'react'; +import i18n from '@dhis2/d2-i18n'; +import { colors, IconChevronRight16 } from '@dhis2/ui'; +import { withStyles } from '@material-ui/core/styles'; +import { BreadcrumbItem } from '../common/BreadcrumbItem'; +import { DiscardDialog } from '../../Dialogs/DiscardDialog.component'; +import { defaultDialogProps } from '../../Dialogs/DiscardDialog.constants'; +import { useWorkingListLabel } from './hooks/useWorkingListLabel'; + +export const pageKeys = Object.freeze({ + MAIN_PAGE: 'mainPage', + VIEW_EVENT: 'viewEvent', + EDIT_EVENT: 'editEvent', +}); + +type Props = { + page: string, + programId: string, + userInteractionInProgress?: boolean, + onBackToMainPage?: () => void, +}; + +const styles = { + container: { + display: 'flex', + alignItems: 'center', + }, +}; + + +const EventBreadcrumbPlain = ({ + page, + programId, + userInteractionInProgress, + onBackToMainPage, + classes, +}) => { + const [openWarning, setOpenWarning] = useState(null); + const { label } = useWorkingListLabel({ programId }); + + const handleNavigation = useCallback((callback, warningType) => { + if (userInteractionInProgress) { + setOpenWarning(warningType); + } else { + callback && callback(); + } + }, [userInteractionInProgress]); + + const breadcrumbItems = useMemo(() => ([ + { + key: pageKeys.MAIN_PAGE, + onClick: () => handleNavigation(onBackToMainPage, pageKeys.MAIN_PAGE), + label, + selected: page === pageKeys.MAIN_PAGE, + condition: true, + }, + { + key: pageKeys.VIEW_EVENT, + onClick: () => handleNavigation(null, pageKeys.VIEW_EVENT), + label: i18n.t('View event'), + selected: page === pageKeys.VIEW_EVENT, + condition: page === pageKeys.VIEW_EVENT || page === pageKeys.EDIT_EVENT, + }, + { + key: pageKeys.EDIT_EVENT, + onClick: () => {}, + label: i18n.t('Edit event'), + selected: page === pageKeys.EDIT_EVENT, + condition: page === pageKeys.EDIT_EVENT, + }, + ].filter(item => item.condition !== false)), [ + label, + handleNavigation, + onBackToMainPage, + page, + ]); + + return ( +
+ {breadcrumbItems.map((button, index) => ( + + + {index < (breadcrumbItems.length - 1) && ( + + )} + + ))} + + setOpenWarning(null)} + onDestroy={onBackToMainPage} + {...defaultDialogProps} + /> +
+ ); +}; + + +export const EventBreadcrumb: ComponentType<$Diff> = withStyles(styles)(EventBreadcrumbPlain); diff --git a/src/core_modules/capture-core/components/Breadcrumbs/EventBreadcrumb/hooks/useWorkingListLabel.js b/src/core_modules/capture-core/components/Breadcrumbs/EventBreadcrumb/hooks/useWorkingListLabel.js new file mode 100644 index 0000000000..c2c7c461b9 --- /dev/null +++ b/src/core_modules/capture-core/components/Breadcrumbs/EventBreadcrumb/hooks/useWorkingListLabel.js @@ -0,0 +1,40 @@ +// @flow +import { useMemo } from 'react'; +import i18n from '@dhis2/d2-i18n'; +import { useSelector } from 'react-redux'; + +type Props = { + programId: string, +} + +export const useWorkingListLabel = ({ programId }: Props) => { + const workingListTemplate = useSelector(({ workingListsTemplates }) => workingListsTemplates?.eventList); + const workingListProgramId = useSelector(({ workingListsContext }) => workingListsContext + ?.eventList + ?.programIdView, + ); + + + const { + selectedTemplateId, + templates, + loading: loadingTemplates, + } = workingListTemplate ?? {}; + const selectedTemplete = templates?.find(({ id }) => id === selectedTemplateId); + const isDefaultTemplate = selectedTemplete?.isDefault; + const isSameProgram = workingListProgramId === programId; + + const computedLabel = useMemo(() => { + if (loadingTemplates) return '...'; + + if (isSameProgram && !isDefaultTemplate && selectedTemplete) { + return selectedTemplete.name; + } + + return i18n.t('Event list'); + }, [isDefaultTemplate, isSameProgram, loadingTemplates, selectedTemplete]); + + return { + label: computedLabel, + }; +}; diff --git a/src/core_modules/capture-core/components/Breadcrumbs/EventBreadcrumb/index.js b/src/core_modules/capture-core/components/Breadcrumbs/EventBreadcrumb/index.js new file mode 100644 index 0000000000..96d8ae0ea5 --- /dev/null +++ b/src/core_modules/capture-core/components/Breadcrumbs/EventBreadcrumb/index.js @@ -0,0 +1,3 @@ +// @flow + +export { EventBreadcrumb } from './EventBreadcrumb'; diff --git a/src/core_modules/capture-core/components/Breadcrumbs/common/BreadcrumbItem.js b/src/core_modules/capture-core/components/Breadcrumbs/common/BreadcrumbItem.js new file mode 100644 index 0000000000..e122220bf9 --- /dev/null +++ b/src/core_modules/capture-core/components/Breadcrumbs/common/BreadcrumbItem.js @@ -0,0 +1,47 @@ +// @flow +import React, { type ComponentType } from 'react'; +import cx from 'classnames'; +import { withStyles } from '@material-ui/core/styles'; +import { colors } from '@dhis2/ui'; + +type Props = { + label: string, + onClick: () => void, + selected: boolean, +}; + +const styles = { + button: { + // Reset button styles + background: 'none', + border: 'none', + cursor: 'pointer', + font: 'inherit', + + // Custom button styles + fontSize: '14px', + padding: '6px 4px', + color: colors.grey800, + borderRadius: '3px', + + '&:hover': { + textDecoration: 'underline', + color: 'black', + }, + '&.selected': { + color: 'black', + }, + }, +}; + +const BreadcrumbItemPlain = ({ label, onClick, selected, classes }) => ( + +); + +export const BreadcrumbItem: ComponentType<$Diff> = withStyles(styles)(BreadcrumbItemPlain); diff --git a/src/core_modules/capture-core/components/Pages/Enrollment/EnrollmentPageDefault/EnrollmentPageDefault.container.js b/src/core_modules/capture-core/components/Pages/Enrollment/EnrollmentPageDefault/EnrollmentPageDefault.container.js index 1259861683..65050c4641 100644 --- a/src/core_modules/capture-core/components/Pages/Enrollment/EnrollmentPageDefault/EnrollmentPageDefault.container.js +++ b/src/core_modules/capture-core/components/Pages/Enrollment/EnrollmentPageDefault/EnrollmentPageDefault.container.js @@ -4,34 +4,29 @@ import i18n from '@dhis2/d2-i18n'; import moment from 'moment'; import log from 'loglevel'; import { errorCreator } from 'capture-core-utils'; -// $FlowFixMe import { useDispatch, useSelector } from 'react-redux'; import { useHistory } from 'react-router-dom'; import { useTimeZoneConversion } from '@dhis2/app-runtime'; import { - useCommonEnrollmentDomainData, - useRuleEffects, + commitEnrollmentAndEvents, + rollbackEnrollmentAndEvents, + showEnrollmentError, + updateEnrollmentAndEvents, updateEnrollmentAttributeValues, updateEnrollmentDate, updateIncidentDate, - showEnrollmentError, - updateEnrollmentAndEvents, - commitEnrollmentAndEvents, - rollbackEnrollmentAndEvents, + useCommonEnrollmentDomainData, + useRuleEffects, } from '../../common/EnrollmentOverviewDomain'; import { - updateEnrollmentDate as updateTopBarEnrollmentDate, deleteEnrollment, + updateEnrollmentDate as updateTopBarEnrollmentDate, updateTeiDisplayName, } from '../EnrollmentPage.actions'; import { useTrackerProgram } from '../../../../hooks/useTrackerProgram'; import { useCoreOrgUnit } from '../../../../metadataRetrieval/coreOrgUnit'; -import { EnrollmentPageLayout, DataStoreKeyByPage } from '../../common/EnrollmentOverviewDomain/EnrollmentPageLayout'; -import { - useProgramMetadata, - useHideWidgetByRuleLocations, - useProgramStages, -} from './hooks'; +import { DataStoreKeyByPage, EnrollmentPageLayout } from '../../common/EnrollmentOverviewDomain/EnrollmentPageLayout'; +import { useHideWidgetByRuleLocations, useProgramMetadata, useProgramStages } from './hooks'; import { buildUrlQueryString, useLocationQuery } from '../../../../utils/routing'; import { useFilteredWidgetData } from './hooks/useFilteredWidgetData'; import { useLinkedRecordClick } from '../../common/TEIRelationshipsWidget'; @@ -181,6 +176,10 @@ export const EnrollmentPageDefault = () => { dispatch(commitEnrollmentAndEvents()); }, [dispatch]); + const onBackToMainPage = useCallback(() => { + history.push(`/?${buildUrlQueryString({ orgUnitId, programId })}`); + }, [history, orgUnitId, programId]); + if (isLoading) { return ( @@ -208,6 +207,8 @@ export const EnrollmentPageDefault = () => { onDelete={onDelete} onDeleteTrackedEntitySuccess={onDeleteTrackedEntitySuccess} onViewAll={onViewAll} + onBackToMainPage={onBackToMainPage} + trackedEntityName={program.trackedEntityType.name} onCreateNew={onCreateNew} widgetEffects={outputEffects} hideWidgets={hideWidgets} diff --git a/src/core_modules/capture-core/components/Pages/Enrollment/EnrollmentPageDefault/EnrollmentPageDefault.types.js b/src/core_modules/capture-core/components/Pages/Enrollment/EnrollmentPageDefault/EnrollmentPageDefault.types.js index 543130c143..572efeb874 100644 --- a/src/core_modules/capture-core/components/Pages/Enrollment/EnrollmentPageDefault/EnrollmentPageDefault.types.js +++ b/src/core_modules/capture-core/components/Pages/Enrollment/EnrollmentPageDefault/EnrollmentPageDefault.types.js @@ -2,11 +2,12 @@ import { typeof effectActions } from '@dhis2/rules-engine-javascript'; import type { TrackerProgram } from 'capture-core/metaData'; import type { Stage } from 'capture-core/components/WidgetStagesAndEvents/types/common.types'; -import type { WidgetEffects, HideWidgets } from '../../common/EnrollmentOverviewDomain'; +import type { HideWidgets, WidgetEffects } from '../../common/EnrollmentOverviewDomain'; import type { Event } from '../../common/EnrollmentOverviewDomain/useCommonEnrollmentDomainData'; import type { LinkedRecordClick } from '../../../WidgetsRelationship/WidgetTrackedEntityRelationship'; import type { - PageLayoutConfig, WidgetConfig, + PageLayoutConfig, + WidgetConfig, } from '../../common/EnrollmentOverviewDomain/EnrollmentPageLayout/DefaultEnrollmentLayout.types'; import { EnrollmentPageKeys, @@ -22,6 +23,11 @@ export type Props = {| widgetEffects: ?WidgetEffects, hideWidgets: HideWidgets, orgUnitId: string, + onBackToMainPage: () => void, + onBackToDashboard?: () => void, + onBackToViewEvent?: () => void, + userInteractionInProgress?: boolean, + eventStatus?: string, onDelete: () => void, onAddNew: () =>void, onViewAll: (stageId: string) => void, @@ -41,6 +47,7 @@ export type Props = {| pageLayout: PageLayoutConfig, availableWidgets: $ReadOnly<{ [key: string]: WidgetConfig }>, onDeleteTrackedEntitySuccess: () => void, + trackedEntityName: string, |}; export type PlainProps = {| diff --git a/src/core_modules/capture-core/components/Pages/EnrollmentAddEvent/EnrollmentAddEventPageDefault/EnrollmentAddEventPageDefault.container.js b/src/core_modules/capture-core/components/Pages/EnrollmentAddEvent/EnrollmentAddEventPageDefault/EnrollmentAddEventPageDefault.container.js index 88b39abb5d..01ee6a0347 100644 --- a/src/core_modules/capture-core/components/Pages/EnrollmentAddEvent/EnrollmentAddEventPageDefault/EnrollmentAddEventPageDefault.container.js +++ b/src/core_modules/capture-core/components/Pages/EnrollmentAddEvent/EnrollmentAddEventPageDefault/EnrollmentAddEventPageDefault.container.js @@ -9,20 +9,19 @@ import { useHistory } from 'react-router-dom'; import { NoticeBox } from '@dhis2/ui'; import { buildUrlQueryString, useLocationQuery } from '../../../../utils/routing'; import { useProgramInfo } from '../../../../hooks/useProgramInfo'; -import { useEnrollmentAddEventTopBar, EnrollmentAddEventTopBar } from '../TopBar'; +import { EnrollmentAddEventTopBar, useEnrollmentAddEventTopBar } from '../TopBar'; import { deleteEnrollment, fetchEnrollments } from '../../Enrollment/EnrollmentPage.actions'; import { actions as RelatedStageModes } from '../../../WidgetRelatedStages/constants'; import { useWidgetDataFromStore } from '../hooks'; +import { useHideWidgetByRuleLocations } from '../../Enrollment/EnrollmentPageDefault/hooks'; import { - useHideWidgetByRuleLocations, -} from '../../Enrollment/EnrollmentPageDefault/hooks'; -import { - updateOrAddEnrollmentEvents, + commitEnrollmentAndEvents, + rollbackEnrollmentAndEvents, + setExternalEnrollmentStatus, showEnrollmentError, updateEnrollmentAndEvents, - rollbackEnrollmentAndEvents, - setExternalEnrollmentStatus, commitEnrollmentAndEvents, + updateOrAddEnrollmentEvents, } from '../../common/EnrollmentOverviewDomain'; import { dataEntryHasChanges as getDataEntryHasChanges } from '../../../DataEntry/common/dataEntryHasChanges'; import type { ContainerProps } from './EnrollmentAddEventPageDefault.types'; @@ -51,6 +50,10 @@ export const EnrollmentAddEventPageDefault = ({ history.push(`/?${buildUrlQueryString({ orgUnitId, programId })}`); }, [history, orgUnitId, programId]); + const onBackToMainPage = useCallback(() => { + history.push(`/?${buildUrlQueryString({ orgUnitId, programId })}`); + }, [history, orgUnitId, programId]); + const onUpdateEnrollmentStatus = useCallback((enrollmentToUpdate) => { dispatch(updateEnrollmentAndEvents(enrollmentToUpdate)); }, [dispatch]); @@ -113,7 +116,7 @@ export const EnrollmentAddEventPageDefault = ({ const outputEffects = useWidgetDataFromStore(widgetReducerName); const hideWidgets = useHideWidgetByRuleLocations(program?.programRules.concat(selectedProgramStage?.programRules ?? [])); // $FlowFixMe - const trackedEntityName = program?.trackedEntityType?.name; + const trackedEntityName = program?.trackedEntityType?.name ?? ''; const rulesExecutionDependencies = useMemo(() => ({ events: enrollment?.events, @@ -181,6 +184,10 @@ export const EnrollmentAddEventPageDefault = ({ orgUnitId={orgUnitId} teiId={teiId} enrollmentId={enrollmentId} + onBackToMainPage={onBackToMainPage} + onBackToDashboard={handleCancel} + trackedEntityName={trackedEntityName} + userInteractionInProgress={userInteractionInProgress} onSave={handleSave} onCancel={handleCancel} onDelete={handleDelete} diff --git a/src/core_modules/capture-core/components/Pages/EnrollmentAddEvent/EnrollmentAddEventPageDefault/EnrollmentAddEventPageDefault.types.js b/src/core_modules/capture-core/components/Pages/EnrollmentAddEvent/EnrollmentAddEventPageDefault/EnrollmentAddEventPageDefault.types.js index a8929f2b14..99fe0e57e3 100644 --- a/src/core_modules/capture-core/components/Pages/EnrollmentAddEvent/EnrollmentAddEventPageDefault/EnrollmentAddEventPageDefault.types.js +++ b/src/core_modules/capture-core/components/Pages/EnrollmentAddEvent/EnrollmentAddEventPageDefault/EnrollmentAddEventPageDefault.types.js @@ -1,8 +1,9 @@ // @flow -import type { WidgetEffects, HideWidgets } from '../../common/EnrollmentOverviewDomain'; +import type { HideWidgets, WidgetEffects } from '../../common/EnrollmentOverviewDomain'; import type { ExternalSaveHandler } from '../../../WidgetEnrollmentEventNew'; import type { - PageLayoutConfig, WidgetConfig, + PageLayoutConfig, + WidgetConfig, } from '../../common/EnrollmentOverviewDomain/EnrollmentPageLayout/DefaultEnrollmentLayout.types'; import { Program } from '../../../../metaData'; @@ -14,6 +15,10 @@ export type Props = {| enrollmentId: string, onSave: ExternalSaveHandler, dataEntryHasChanges: boolean, + userInteractionInProgress: boolean, + trackedEntityName: string, + onBackToMainPage: () => void, + onBackToDashboard: () => void, onCancel: () => void, onDelete: () => void, onAddNew: () => void, diff --git a/src/core_modules/capture-core/components/Pages/EnrollmentEditEvent/EnrollmentEditEventPage.component.js b/src/core_modules/capture-core/components/Pages/EnrollmentEditEvent/EnrollmentEditEventPage.component.js index d2acb94e3b..679bb616c4 100644 --- a/src/core_modules/capture-core/components/Pages/EnrollmentEditEvent/EnrollmentEditEventPage.component.js +++ b/src/core_modules/capture-core/components/Pages/EnrollmentEditEvent/EnrollmentEditEventPage.component.js @@ -40,6 +40,9 @@ export const EnrollmentEditEventPageComponent = ({ assignee, pageStatus, events, + onBackToDashboard, + onBackToMainPage, + onBackToViewEvent, onEnrollmentError, onEnrollmentSuccess, onUpdateEnrollmentStatus, @@ -73,6 +76,11 @@ export const EnrollmentEditEventPageComponent = ({ pageLayout={pageLayout} currentPage={mode === EnrollmentPageKeys.EDIT_EVENT ? EnrollmentPageKeys.EDIT_EVENT : EnrollmentPageKeys.VIEW_EVENT} availableWidgets={WidgetsForEnrollmentEventEdit} + userInteractionInProgress={mode === EnrollmentPageKeys.EDIT_EVENT} + trackedEntityName={trackedEntityName} + onBackToMainPage={onBackToMainPage} + onBackToDashboard={onBackToDashboard} + onBackToViewEvent={onBackToViewEvent} onSaveExternal={onSaveExternal} trackedEntityTypeId={trackedEntityTypeId} programStage={programStage} diff --git a/src/core_modules/capture-core/components/Pages/EnrollmentEditEvent/EnrollmentEditEventPage.container.js b/src/core_modules/capture-core/components/Pages/EnrollmentEditEvent/EnrollmentEditEventPage.container.js index 995fca5429..f459cff54d 100644 --- a/src/core_modules/capture-core/components/Pages/EnrollmentEditEvent/EnrollmentEditEventPage.container.js +++ b/src/core_modules/capture-core/components/Pages/EnrollmentEditEvent/EnrollmentEditEventPage.container.js @@ -1,18 +1,18 @@ // @flow -import React, { useEffect, useCallback } from 'react'; +import React, { useCallback, useEffect } from 'react'; import { useQueryClient } from 'react-query'; import { useDispatch, useSelector } from 'react-redux'; import { useHistory } from 'react-router-dom'; import { dataEntryIds } from 'capture-core/constants'; import { useEnrollmentEditEventPageMode } from 'capture-core/hooks'; import { - useCommonEnrollmentDomainData, - showEnrollmentError, - updateEnrollmentEvent, - updateEnrollmentAndEvents, commitEnrollmentAndEvents, rollbackEnrollmentAndEvents, setExternalEnrollmentStatus, + showEnrollmentError, + updateEnrollmentAndEvents, + updateEnrollmentEvent, + useCommonEnrollmentDomainData, } from '../common/EnrollmentOverviewDomain'; import { useTeiDisplayName } from '../common/EnrollmentOverviewDomain/useTeiDisplayName'; import { useProgramInfo } from '../../../hooks/useProgramInfo'; @@ -26,7 +26,7 @@ import { changeEventFromUrl } from '../ViewEvent/ViewEventComponent/viewEvent.ac import { buildEnrollmentsAsOptions } from '../../ScopeSelector'; import { convertDateWithTimeForView, convertValue } from '../../../converters/clientToView'; import { dataElementTypes } from '../../../metaData/DataElement'; -import { useEvent, useAssignee, useAssignedUserSaveContext } from './hooks'; +import { useAssignedUserSaveContext, useAssignee, useEvent } from './hooks'; import type { Props } from './EnrollmentEditEventPage.types'; import { LoadingMaskForPage } from '../../LoadingMasks'; import { cleanUpDataEntry } from '../../DataEntry'; @@ -39,11 +39,13 @@ import { import { DataStoreKeyByPage } from '../common/EnrollmentOverviewDomain/EnrollmentPageLayout'; import { DefaultPageLayout } from './PageLayout/DefaultPageLayout.constants'; import { getProgramEventAccess } from '../../../metaData'; -import { setAssignee, rollbackAssignee } from './EnrollmentEditEventPage.actions'; +import { rollbackAssignee, setAssignee } from './EnrollmentEditEventPage.actions'; import { convertClientToServer } from '../../../converters'; import { CHANGELOG_ENTITY_TYPES } from '../../WidgetsChangelog'; import { ReactQueryAppNamespace } from '../../../utils/reactQueryHelpers'; import { statusTypes } from '../../../enrollment'; +import { cancelEditEventDataEntry } from '../../WidgetEventEdit/EditEventDataEntry/editEventDataEntry.actions'; +import { setCurrentDataEntry } from '../../DataEntry/actions/dataEntry.actions'; const getEventDate = (event) => { const eventDataConvertValue = convertDateWithTimeForView(event?.occurredAt || event?.scheduledAt); @@ -139,6 +141,10 @@ const EnrollmentEditEventPageWithContextPlain = ({ history.push(`/?${buildUrlQueryString({ orgUnitId, programId })}`); }, [history, orgUnitId, programId]); + const onBackToMainPage = useCallback(() => { + history.push(`/?${buildUrlQueryString({ orgUnitId, programId })}`); + }, [history, orgUnitId, programId]); + const onDelete = () => { history.push(`/enrollment?${buildUrlQueryString({ orgUnitId, programId, teiId })}`); dispatch(deleteEnrollment({ enrollmentId })); @@ -192,6 +198,11 @@ const EnrollmentEditEventPageWithContextPlain = ({ history.push(`enrollment?${buildUrlQueryString({ enrollmentId })}`); }; + const onBackToViewEvent = () => { + dispatch(cancelEditEventDataEntry()); + dispatch(setCurrentDataEntry(dataEntryIds.ENROLLMENT_EVENT, pageKeys.VIEW_EVENT)); + }; + const { teiDisplayName } = useTeiDisplayName(teiId, programId); // $FlowFixMe const { name: trackedEntityName, id: trackedEntityTypeId } = program?.trackedEntityType; @@ -242,6 +253,9 @@ const EnrollmentEditEventPageWithContextPlain = ({ pageStatus={pageStatus} programStage={programStage} onGoBack={onGoBack} + onBackToMainPage={onBackToMainPage} + onBackToDashboard={onGoBack} + onBackToViewEvent={onBackToViewEvent} widgetEffects={outputEffects} hideWidgets={hideWidgets} teiId={teiId} diff --git a/src/core_modules/capture-core/components/Pages/EnrollmentEditEvent/EnrollmentEditEventPage.types.js b/src/core_modules/capture-core/components/Pages/EnrollmentEditEvent/EnrollmentEditEventPage.types.js index 7f48be3b24..56e2d5c5de 100644 --- a/src/core_modules/capture-core/components/Pages/EnrollmentEditEvent/EnrollmentEditEventPage.types.js +++ b/src/core_modules/capture-core/components/Pages/EnrollmentEditEvent/EnrollmentEditEventPage.types.js @@ -1,12 +1,12 @@ // @flow import type { ProgramStage } from '../../../metaData'; -import type { WidgetEffects, HideWidgets } from '../common/EnrollmentOverviewDomain'; +import { Program } from '../../../metaData'; +import type { HideWidgets, WidgetEffects } from '../common/EnrollmentOverviewDomain'; import type { UserFormField } from '../../FormFields/UserField'; import type { LinkedRecordClick } from '../../WidgetsRelationship/WidgetTrackedEntityRelationship'; import type { PageLayoutConfig, } from '../common/EnrollmentOverviewDomain/EnrollmentPageLayout/DefaultEnrollmentLayout.types'; -import { Program } from '../../../metaData'; export type PlainProps = {| pageLayout: ?PageLayoutConfig, @@ -29,6 +29,9 @@ export type PlainProps = {| onDelete: () => void, onAddNew: () => void, onGoBack: () => void, + onBackToMainPage: () => void, + onBackToDashboard: () => void, + onBackToViewEvent: () => void, onLinkedRecordClick: LinkedRecordClick, onEnrollmentError: (message: string) => void, onEnrollmentSuccess: () => void, diff --git a/src/core_modules/capture-core/components/Pages/ViewEvent/ViewEventComponent/ViewEvent.component.js b/src/core_modules/capture-core/components/Pages/ViewEvent/ViewEventComponent/ViewEvent.component.js index ee5710e754..76d7d1b2dd 100644 --- a/src/core_modules/capture-core/components/Pages/ViewEvent/ViewEventComponent/ViewEvent.component.js +++ b/src/core_modules/capture-core/components/Pages/ViewEvent/ViewEventComponent/ViewEvent.component.js @@ -2,16 +2,21 @@ import React, { Component } from 'react'; import i18n from '@dhis2/d2-i18n'; import { withStyles } from '@material-ui/core/styles'; -import { spacers, IconChevronLeft24, Button } from '@dhis2/ui'; +import { Button, IconChevronLeft24, spacers } from '@dhis2/ui'; import { EventDetails } from '../EventDetailsSection/EventDetailsSection.container'; import { RightColumnWrapper } from '../RightColumn/RightColumnWrapper.component'; import type { ProgramStage } from '../../../../metaData'; import { DiscardDialog } from '../../../Dialogs/DiscardDialog.component'; import { defaultDialogProps } from '../../../Dialogs/DiscardDialog.constants'; import type { UserFormField } from '../../../FormFields/UserField'; +import { EventBreadcrumb } from '../../../Breadcrumbs/EventBreadcrumb'; +import { pageKeys } from '../../../Breadcrumbs/EventBreadcrumb/EventBreadcrumb'; const getStyles = (theme: Theme) => ({ container: { + display: 'flex', + flexDirection: 'column', + gap: spacers.dp12, padding: theme.typography.pxToRem(24), paddingTop: theme.typography.pxToRem(10), }, @@ -36,11 +41,14 @@ const getStyles = (theme: Theme) => ({ }); type Props = { + programId: string, onBackToAllEvents: () => void, currentDataEntryKey: string, programStage: ProgramStage, eventAccess: { read: boolean, write: boolean }, isUserInteractionInProgress: boolean, + showEditEvent: boolean, + onBackToViewEvent: () => void, classes: { container: string, contentContainer: string, @@ -76,7 +84,11 @@ class ViewEventPlain extends Component { render() { const { classes, + programId, programStage, + showEditEvent, + onBackToViewEvent, + isUserInteractionInProgress, currentDataEntryKey, eventAccess, assignee, @@ -88,28 +100,38 @@ class ViewEventPlain extends Component { return (
- -
- - + +
+ +
+ + +
{ assignee: state.viewEventPage.loadedValues?.eventContainer.event.assignee, getAssignedUserSaveContext: () => assignedUserContextSelector(state), eventId: state.viewEventPage.eventId, + showEditEvent: eventDetailsSection.showEditEvent, }; }; }; diff --git a/src/core_modules/capture-core/components/Pages/ViewEvent/ViewEventPage.component.js b/src/core_modules/capture-core/components/Pages/ViewEvent/ViewEventPage.component.js index a137ffb1e7..21a1e71c2b 100644 --- a/src/core_modules/capture-core/components/Pages/ViewEvent/ViewEventPage.component.js +++ b/src/core_modules/capture-core/components/Pages/ViewEvent/ViewEventPage.component.js @@ -37,6 +37,7 @@ export const ViewEventPageComponent = ({ isUserInteractionInProgress, showAddRel showAddRelationship ? : } diff --git a/src/core_modules/capture-core/components/Pages/common/EnrollmentOverviewDomain/EnrollmentPageLayout/DefaultEnrollmentLayout.constants.js b/src/core_modules/capture-core/components/Pages/common/EnrollmentOverviewDomain/EnrollmentPageLayout/DefaultEnrollmentLayout.constants.js index b06c213045..e9edfb3234 100644 --- a/src/core_modules/capture-core/components/Pages/common/EnrollmentOverviewDomain/EnrollmentPageLayout/DefaultEnrollmentLayout.constants.js +++ b/src/core_modules/capture-core/components/Pages/common/EnrollmentOverviewDomain/EnrollmentPageLayout/DefaultEnrollmentLayout.constants.js @@ -1,5 +1,4 @@ // @flow -import i18n from '@dhis2/d2-i18n'; import { EnrollmentWidget, ErrorWidget, @@ -17,13 +16,6 @@ export const EnrollmentPageKeys = Object.freeze({ VIEW_EVENT: 'viewEvent', }); -export const DefaultPageTitle = { - OVERVIEW: i18n.t('Dashboard'), - NEW_EVENT: i18n.t('New Event'), - EDIT_EVENT: i18n.t('Edit Event'), - VIEW_EVENT: i18n.t('View Event'), -}; - // Default components are available across all Enrollment Pages export const DefaultWidgetsForEnrollmentOverview = { TrackedEntityRelationship, diff --git a/src/core_modules/capture-core/components/Pages/common/EnrollmentOverviewDomain/EnrollmentPageLayout/EnrollmentPageLayout.js b/src/core_modules/capture-core/components/Pages/common/EnrollmentOverviewDomain/EnrollmentPageLayout/EnrollmentPageLayout.js index f6d821e872..b8af4f35f9 100644 --- a/src/core_modules/capture-core/components/Pages/common/EnrollmentOverviewDomain/EnrollmentPageLayout/EnrollmentPageLayout.js +++ b/src/core_modules/capture-core/components/Pages/common/EnrollmentOverviewDomain/EnrollmentPageLayout/EnrollmentPageLayout.js @@ -1,12 +1,11 @@ // @flow import React, { useCallback, useMemo, useState } from 'react'; -import i18n from '@dhis2/d2-i18n'; import { colors, spacers, spacersNum } from '@dhis2/ui'; import { withStyles } from '@material-ui/core/styles'; import { useWidgetColumns } from './hooks/useWidgetColumns'; import { AddRelationshipRefWrapper } from './AddRelationshipRefWrapper'; import type { PlainProps } from '../../../Enrollment/EnrollmentPageDefault/EnrollmentPageDefault.types'; -import { DefaultPageTitle, EnrollmentPageKeys } from './DefaultEnrollmentLayout.constants'; +import { EnrollmentBreadcrumb } from '../../../../Breadcrumbs/EnrollmentBreadcrumb'; const getEnrollmentPageStyles = () => ({ container: { @@ -15,6 +14,9 @@ const getEnrollmentPageStyles = () => ({ }, contentContainer: { position: 'relative', + display: 'flex', + flexDirection: 'column', + gap: spacers.dp12, }, columns: { display: 'flex', @@ -41,28 +43,23 @@ const getEnrollmentPageStyles = () => ({ color: colors.grey900, fontWeight: 500, paddingTop: spacersNum.dp8, - paddingBottom: spacersNum.dp16, }, }); // Function to validate hex color const isValidHex = (color: string) => /^#[0-9A-F]{6}$/i.test(color); -const getTitle = (inputTitle, page) => { - const title = inputTitle || i18n.t('Enrollment'); - const titles = { - [EnrollmentPageKeys.OVERVIEW]: !inputTitle ? `${title} ${DefaultPageTitle.OVERVIEW}` : title, - [EnrollmentPageKeys.NEW_EVENT]: `${title}: ${DefaultPageTitle.NEW_EVENT}`, - [EnrollmentPageKeys.EDIT_EVENT]: `${title}: ${DefaultPageTitle.EDIT_EVENT}`, - [EnrollmentPageKeys.VIEW_EVENT]: `${title}: ${DefaultPageTitle.VIEW_EVENT}`, - }; - return titles[page] || title; -}; - const EnrollmentPageLayoutPlain = ({ pageLayout, availableWidgets, + program, + trackedEntityName, + userInteractionInProgress, + eventStatus, currentPage, + onBackToMainPage, + onBackToDashboard, + onBackToViewEvent, classes, ...passOnProps }: PlainProps) => { @@ -73,10 +70,19 @@ const EnrollmentPageLayoutPlain = ({ const allProps = useMemo(() => ({ ...passOnProps, + program, currentPage, + eventStatus, toggleVisibility, addRelationShipContainerElement, - }), [addRelationShipContainerElement, currentPage, passOnProps, toggleVisibility]); + }), [ + addRelationShipContainerElement, + currentPage, + eventStatus, + passOnProps, + program, + toggleVisibility, + ]); const { leftColumnWidgets, @@ -93,13 +99,29 @@ const EnrollmentPageLayoutPlain = ({ }, [pageLayout.backgroundColor]); return ( -
+
-
{getTitle(pageLayout.title, currentPage)}
+
+ +
{pageLayout.leftColumn && !!leftColumnWidgets?.length && (
diff --git a/src/core_modules/capture-core/components/ScopeSelector/hooks/useSetProgramId.js b/src/core_modules/capture-core/components/ScopeSelector/hooks/useSetProgramId.js index c373f3b688..575270becc 100644 --- a/src/core_modules/capture-core/components/ScopeSelector/hooks/useSetProgramId.js +++ b/src/core_modules/capture-core/components/ScopeSelector/hooks/useSetProgramId.js @@ -5,7 +5,7 @@ import { buildUrlQueryString, useLocationQuery } from '../../../utils/routing'; export const useSetProgramId = () => { const history = useHistory(); const { pathname } = useLocation(); - const restOfQueries = useLocationQuery(); + const { selectedTemplateId, ...restOfQueries } = useLocationQuery(); const setProgramId = (programId: string, pageToPush: string = pathname) => { diff --git a/src/core_modules/capture-core/components/WidgetEventEdit/WidgetEventEdit.container.js b/src/core_modules/capture-core/components/WidgetEventEdit/WidgetEventEdit.container.js index b39bb89c7c..075855e6cd 100644 --- a/src/core_modules/capture-core/components/WidgetEventEdit/WidgetEventEdit.container.js +++ b/src/core_modules/capture-core/components/WidgetEventEdit/WidgetEventEdit.container.js @@ -1,24 +1,24 @@ // @flow -import React, { type ComponentType, useState, useEffect } from 'react'; +import React, { type ComponentType, useEffect, useState } from 'react'; import { dataEntryIds, dataEntryKeys } from 'capture-core/constants'; import { useDispatch, useSelector } from 'react-redux'; import { - spacersNum, Button, colors, - IconEdit24, + FlyoutMenu, IconArrowLeft24, + IconEdit24, IconMore16, - FlyoutMenu, MenuItem, spacers, + spacersNum, } from '@dhis2/ui'; import { withStyles } from '@material-ui/core'; import i18n from '@dhis2/d2-i18n'; import { ConditionalTooltip } from 'capture-core/components/Tooltips/ConditionalTooltip'; -import { useEnrollmentEditEventPageMode, useAvailableProgramStages } from 'capture-core/hooks'; +import { useAvailableProgramStages, useEnrollmentEditEventPageMode } from 'capture-core/hooks'; import { useCoreOrgUnit } from 'capture-core/metadataRetrieval/coreOrgUnit'; -import type { PlainProps, ComponentProps } from './widgetEventEdit.types'; +import type { ComponentProps, PlainProps } from './widgetEventEdit.types'; import { startShowEditEventDataEntry } from './WidgetEventEdit.actions'; import { Widget } from '../Widget'; import { EditEventDataEntry } from './EditEventDataEntry/'; @@ -186,15 +186,23 @@ export const WidgetEventEditPlain = ({ } noncollapsible > -
- {currentPageMode === dataEntryKeys.VIEW ? ( + {currentPageMode === dataEntryKeys.VIEW ? ( +
- ) : ( +
+ ) : ( +
- )} -
+
+ )} {supportsChangelog && changeLogIsOpen && (