diff --git a/cypress/e2e/WorkingLists/EventWorkingLists/EventBulkActions/EventBulkAction.feature b/cypress/e2e/WorkingLists/EventWorkingLists/EventBulkActions/EventBulkAction.feature new file mode 100644 index 0000000000..f44f8caa8d --- /dev/null +++ b/cypress/e2e/WorkingLists/EventWorkingLists/EventBulkActions/EventBulkAction.feature @@ -0,0 +1,49 @@ +Feature: User facing tests for bulk actions on event working lists + + Scenario: the user should be able to select rows + Given you open the main page with Ngelehun and malaria case context + When you select the first 5 rows + Then the bulk action bar should say 5 selected + And the first 5 rows should be selected + + Scenario: the user should be able to deselect rows + Given you open the main page with Ngelehun and malaria case context + When you select the first 5 rows + And you deselect the first 3 rows + Then the bulk action bar should say 2 selected + + Scenario: the user should be able to select all rows + Given you open the main page with Ngelehun and malaria case context + When you select all rows + Then the bulk action bar should say 15 selected + And all rows should be selected + + Scenario: the user should be able to deselect all rows + Given you open the main page with Ngelehun and malaria case context + When you select all rows + And all rows should be selected + And you select all rows + Then the bulk action bar should not be present + And no rows should be selected + + Scenario: the filters should be disabled when rows are selected + Given you open the main page with Ngelehun and malaria case context + When you select the first 5 rows + Then the filters should be disabled + + @v<42 + Scenario: the user should be able to bulk complete events + Given you open the main page with Ngelehun and malaria case context + And you select the first 3 rows + And you click the bulk complete button + And the bulk complete modal should open + When you click the confirm complete events button + Then the bulk complete modal should close + + Scenario: the user should be able to bulk delete events + Given you open the main page with Ngelehun and malaria case context + And you select the first 3 rows + And you click the bulk Delete button + And the bulk delete modal should open + When you click the confirm delete events button + Then the bulk delete modal should close diff --git a/cypress/e2e/WorkingLists/EventWorkingLists/EventBulkActions/EventBulkAction.js b/cypress/e2e/WorkingLists/EventWorkingLists/EventBulkActions/EventBulkAction.js new file mode 100644 index 0000000000..3a89c95cba --- /dev/null +++ b/cypress/e2e/WorkingLists/EventWorkingLists/EventBulkActions/EventBulkAction.js @@ -0,0 +1,73 @@ +import { Given, Then, When } from '@badeball/cypress-cucumber-preprocessor'; +import '../../sharedSteps'; + +Given('you open the main page with Ngelehun and malaria case context', () => { + cy.visit('#/?programId=VBqh0ynB2wv&orgUnitId=DiszpKrYNg8'); +}); + +Then('the bulk complete modal should open', () => { + cy.get('[data-test="bulk-complete-events-dialog"]') + .should('exist'); +}); + +When('you click the confirm complete events button', () => { + cy.intercept({ + method: 'POST', + url: '**/tracker?async=false**', + }, { + statusCode: 200, + body: {}, + }).as('completeEvents'); + + cy.get('[data-test="bulk-complete-events-dialog"]') + .find('[data-test="dhis2-uicore-button"]') + .contains('Complete').click(); + + cy.wait('@completeEvents') + .its('request.body') + .should(({ events }) => { + expect(events).to.have.length(3); + expect(events[0]).to.include({ status: 'COMPLETED' }); + expect(events[1]).to.include({ status: 'COMPLETED' }); + expect(events[2]).to.include({ status: 'COMPLETED' }); + }); +}); + +Then('the bulk complete modal should close', () => { + cy.get('[data-test="bulk-complete-events-dialog"]') + .should('not.exist'); +}); + +Then('the bulk delete modal should open', () => { + cy.get('[data-test="bulk-delete-events-dialog"]') + .should('exist'); +}); + +// you click the confirm delete events button +When('you click the confirm delete events button', () => { + cy.intercept({ + method: 'POST', + url: '**/tracker?async=false**', + }, { + statusCode: 200, + body: {}, + }).as('deleteEvents'); + + cy.get('[data-test="bulk-delete-events-dialog"]') + .find('[data-test="dhis2-uicore-button"]') + .contains('Delete').click(); + + cy.wait('@deleteEvents') + .its('request.body') + .should(({ events }) => { + expect(events).to.have.length(3); + expect(events).to.deep.include({ event: 'a969f7a3bf1' }); + expect(events).to.deep.include({ event: 'a6f092d0d44' }); + expect(events).to.deep.include({ event: 'a5e67163090' }); + }); +}); + +Then('the bulk delete modal should close', () => { + cy.get('[data-test="bulk-delete-events-dialog"]') + .should('not.exist'); +}); diff --git a/cypress/e2e/WorkingLists/EventWorkingLists/EventWorkingListsUser/EventWorkingListsUser.js b/cypress/e2e/WorkingLists/EventWorkingLists/EventWorkingListsUser/EventWorkingListsUser.js index b1a6158642..4932225eac 100644 --- a/cypress/e2e/WorkingLists/EventWorkingLists/EventWorkingListsUser/EventWorkingListsUser.js +++ b/cypress/e2e/WorkingLists/EventWorkingLists/EventWorkingListsUser/EventWorkingListsUser.js @@ -1,7 +1,7 @@ -import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor'; +import { Given, Then, When } from '@badeball/cypress-cucumber-preprocessor'; import { v4 as uuid } from 'uuid'; import '../sharedSteps'; -import { getCurrentYear, combineDataAndYear } from '../../../../support/date'; +import { combineDataAndYear, getCurrentYear } from '../../../../support/date'; Given('you open the main page with Ngelehun and malaria case context', () => { cy.visit('#/?programId=VBqh0ynB2wv&orgUnitId=DiszpKrYNg8'); @@ -29,7 +29,7 @@ Then('the default working list should be displayed', () => { .should('have.length', 16) .each(($row, index) => { if (index) { - cy.wrap($row).find('td').first().invoke('text') + cy.wrap($row).find('td').eq(1).invoke('text') .then((date) => { const firstArgs = rows[date].length > 1 ? new RegExp(`${rows[date].map(item => item.split(' ')[0]).join('|')}`, 'g') @@ -185,7 +185,7 @@ Then('the list should display data for the second page', () => { .should('have.length', 16) .each(($row, index) => { if (index) { - cy.wrap($row).find('td').first().invoke('text') + cy.wrap($row).find('td').eq(1).invoke('text') .then((date) => { const firstArgs = rows[date].length > 1 ? new RegExp(`${rows[date].map(item => item.split(' ')[0]).join('|')}`, 'g') @@ -219,7 +219,7 @@ Then('the list should display 10 rows of data', () => { .should('have.length', 11) .each(($row, index) => { if (index) { - cy.wrap($row).find('td').first().invoke('text') + cy.wrap($row).find('td').eq(1).invoke('text') .then((date) => { const firstArgs = rows[date].length > 1 ? new RegExp(`${rows[date].map(item => item.split(' ')[0]).join('|')}`, 'g') @@ -278,7 +278,7 @@ Then('the list should display data ordered descendingly by report date', () => { .should('have.length', 16) .each(($row, index) => { if (index) { - cy.wrap($row).find('td').first().invoke('text') + cy.wrap($row).find('td').eq(1).invoke('text') .then((date) => { const firstArgs = rows[date].length > 1 ? new RegExp(`${rows[date].map(item => item.split(' ')[0]).join('|')}`, 'g') diff --git a/cypress/e2e/WorkingLists/TeiWorkingLists/TeiBulkActions/TeiBulkActions.feature b/cypress/e2e/WorkingLists/TeiWorkingLists/TeiBulkActions/TeiBulkActions.feature new file mode 100644 index 0000000000..06eb0a2fb1 --- /dev/null +++ b/cypress/e2e/WorkingLists/TeiWorkingLists/TeiBulkActions/TeiBulkActions.feature @@ -0,0 +1,86 @@ +Feature: User facing tests for bulk actions on Tracked Entity working lists + + Scenario: the user should be able to select rows + Given you open the main page with Ngelehun and child programe context + When you select the first 5 rows + Then the bulk action bar should say 5 selected + And the first 5 rows should be selected + + Scenario: the user should be able to deselect rows + Given you open the main page with Ngelehun and child programe context + When you select the first 5 rows + And you deselect the first 3 rows + Then the bulk action bar should say 2 selected + + Scenario: the user should be able to select all rows + Given you open the main page with Ngelehun and child programe context + When you select all rows + Then the bulk action bar should say 15 selected + And all rows should be selected + + Scenario: the user should be able to deselect all rows + Given you open the main page with Ngelehun and child programe context + When you select all rows + And all rows should be selected + And you select all rows + Then the bulk action bar should not be present + And no rows should be selected + + Scenario: the filters should be disabled when rows are selected + Given you open the main page with Ngelehun and child programe context + When you select the first 5 rows + Then the filters should be disabled + + Scenario: The user should see an error message when trying to bulk complete enrollments with errors + Given you open the main page with Ngelehun and Malaria focus investigation context + And you select the first 3 rows + And you click the bulk complete enrollments button + And the bulk complete enrollments modal should open + And the modal content should say: This action will complete 2 active enrollments in your selection. 1 enrollment already marked as completed will not be changed. + When you confirm 2 active enrollments with errors + Then an error dialog will be displayed to the user + And you close the error dialog + And the unsuccessful enrollments should still be selected + + Scenario: the user should be able to bulk complete enrollments and events + Given you open the main page with Ngelehun and Malaria focus investigation context + And you select the first 4 rows + And you click the bulk complete enrollments button + And the bulk complete enrollments modal should open + And the modal content should say: This action will complete 3 active enrollments in your selection. 1 enrollment already marked as completed will not be changed. + When you confirm 3 active enrollments successfully + Then the bulk complete enrollments modal should close + + Scenario: the user should be able to bulk complete enrollments without completing events + Given you open the main page with Ngelehun and Malaria Case diagnosis context + And you select row number 1 + And you click the bulk complete enrollments button + And the bulk complete enrollments modal should open + And you deselect the complete events checkbox + And the modal content should say: This action will complete 1 active enrollment in your selection. + When you confirm 1 active enrollment without completing events successfully + Then the bulk complete enrollments modal should close + + Scenario: the user should be able to bulk delete enrollments + Given you open the main page with Ngelehun and Malaria Case diagnosis context + And you select the first 3 rows + And you click the bulk delete enrollments button + And the bulk delete enrollments modal should open + When you confirm deleting 3 enrollments + Then the bulk delete enrollments modal should close + + Scenario: the user should be able to bulk delete only active enrollments + Given you open the main page with Ngelehun and Malaria Case diagnosis context + And you select the first 3 rows + And you click the bulk delete enrollments button + And the bulk delete enrollments modal should open + When you deselect completed enrollments + And you confirm deleting 2 active enrollments + Then the bulk delete enrollments modal should close + + @user:trackerAutoTestRestricted + Scenario: a restricted user should not be able to bulk delete enrollments + Given you open the main page with Ngelehun and WHO RMNCH Tracker context + And you open the working lists + When you select the first 3 rows + Then the bulk delete enrollments button should not be visible diff --git a/cypress/e2e/WorkingLists/TeiWorkingLists/TeiBulkActions/TeiBulkActions.js b/cypress/e2e/WorkingLists/TeiWorkingLists/TeiBulkActions/TeiBulkActions.js new file mode 100644 index 0000000000..9a8931cc7f --- /dev/null +++ b/cypress/e2e/WorkingLists/TeiWorkingLists/TeiBulkActions/TeiBulkActions.js @@ -0,0 +1,284 @@ +import { Given, Then, When } from '@badeball/cypress-cucumber-preprocessor'; +import '../../sharedSteps'; + +Given('you open the main page with Ngelehun and child programe context', () => { + cy.visit('#/?programId=IpHINAT79UW&orgUnitId=DiszpKrYNg8'); +}); + +Given('you open the main page with Ngelehun and Malaria Case diagnosis context', () => { + cy.visit('#/?programId=qDkgAbB5Jlk&orgUnitId=DiszpKrYNg8'); +}); + +Given('you open the main page with Ngelehun and Malaria focus investigation context', () => { + cy.visit('#/?programId=M3xtLkYBlKI&orgUnitId=DiszpKrYNg8'); +}); + +Given('you open the main page with Ngelehun and WHO RMNCH Tracker context', () => { + cy.visit('#/?programId=WSGAb5XwJ3Y&orgUnitId=DiszpKrYNg8'); +}); + +// you open the working lists +Given('you open the working lists', () => { + cy.get('[data-test="template-selector-create-list"]') + .click(); +}); + +Then('the bulk complete enrollments modal should open', () => { + cy.get('[data-test="bulk-complete-enrollments-dialog"]') + .should('exist'); +}); + +When('it should say there are 2 active enrollments and 1 completed enrollment', () => { + cy.get('[data-test="bulk-complete-enrollments-dialog"]') + .contains('This action will complete 2 active enrollments in your selection.' + + ' 1 enrollment already marked as completed will not be changed.'); +}); + +Then('you confirm 3 active enrollments successfully', () => { + cy.intercept({ + method: 'POST', + url: '**/tracker?async=false&importStrategy=UPDATE&importMode=VALIDATE', + }, { + statusCode: 200, + body: {}, + }).as('completeEnrollmentsDryRun'); + + cy.intercept({ + method: 'POST', + url: '**/tracker?async=false&importStrategy=UPDATE&importMode=COMMIT', + }, { + statusCode: 200, + body: {}, + }).as('completeEnrollments'); + + cy.get('[data-test="bulk-complete-enrollments-dialog"]') + .find('[data-test="bulk-complete-enrollments-confirm-button"]') + .click(); + + cy.wait('@completeEnrollmentsDryRun') + .then((interception) => { + expect(interception.response.statusCode).to.eq(200); + expect(interception.request.body.enrollments).to.have.length(3); + }); + + cy.wait('@completeEnrollments') + .its('request.body') + .should(({ enrollments }) => { + // Should be 3 enrollments + expect(enrollments).to.have.length(3); + + // Assert that all enrollments are completed + enrollments.forEach((enrollment) => { + expect(enrollment).to.include({ status: 'COMPLETED' }); + + enrollment.events.forEach((event) => { + expect(event).to.include({ status: 'COMPLETED' }); + }); + }); + }); +}); + +Then('the bulk complete enrollments modal should close', () => { + cy.get('[data-test="bulk-complete-enrollments-dialog"]') + .should('not.exist'); +}); + +When(/^you select row number (.*)$/, (rowNumber) => { + cy.get('[data-test="dhis2-uicore-tablebody"]') + .find('tr') + .eq(rowNumber) + .find('[data-test="select-row-checkbox"]') + .click(); +}); + +Then(/^the modal content should say: (.*)$/, (content) => { + cy.get('[data-test="bulk-complete-enrollments-dialog"]') + .contains(content); +}); + +When('you deselect the complete events checkbox', () => { + cy.get('[data-test="bulk-complete-enrollments-dialog"]') + .find('[data-test="dhis2-uicore-checkbox"]') + .click(); +}); + +When('you confirm 1 active enrollment without completing events successfully', () => { + cy.intercept({ + method: 'POST', + url: '**/tracker?async=false&importStrategy=UPDATE&importMode=VALIDATE', + }).as('completeEnrollmentsDryRun'); + + cy.intercept({ + method: 'POST', + url: '**/tracker?async=false&importStrategy=UPDATE&importMode=COMMIT', + }, { + statusCode: 200, + body: {}, + }).as('completeEnrollments'); + + cy.get('[data-test="bulk-complete-enrollments-dialog"]') + .find('[data-test="bulk-complete-enrollments-confirm-button"]') + .click(); + + cy.wait('@completeEnrollmentsDryRun') + .then((interception) => { + expect(interception.response.statusCode).to.eq(200); + expect(interception.request.body.enrollments).to.have.length(1); + }); + + cy.wait('@completeEnrollments') + .its('request.body') + .should(({ enrollments }) => { + // Should be 1 enrollment + expect(enrollments).to.have.length(1); + + // Assert that first enrollment is completed with one completed event + expect(enrollments[0]).to.include({ status: 'COMPLETED' }); + expect(enrollments[0].events).to.have.length(0); + }); +}); + +When('you confirm 2 active enrollments with errors', () => { + cy.intercept({ + method: 'POST', + url: '**/tracker?async=false&importStrategy=UPDATE&importMode=VALIDATE', + }).as('completeEnrollmentsDryRun'); + + cy.intercept({ + method: 'POST', + url: '**/tracker?async=false&importStrategy=UPDATE&importMode=COMMIT', + }, { + statusCode: 200, + body: {}, + }).as('completeEnrollments'); + + cy.get('[data-test="bulk-complete-enrollments-dialog"]') + .find('[data-test="bulk-complete-enrollments-confirm-button"]') + .click(); + + cy.wait('@completeEnrollmentsDryRun') + .then((interception) => { + expect(interception.response.statusCode).to.eq(409); + expect(interception.request.body.enrollments).to.have.length(2); + }); + + cy.wait('@completeEnrollments') + .its('request.body') + .should(({ enrollments }) => { + // The bad data should be filtered out and not sent to the server + expect(enrollments).to.have.length(1); + + const enrollment = enrollments[0]; + expect(enrollment).to.include({ enrollment: 'MqSC9Vuckeh', status: 'COMPLETED' }); + }); +}); + +Then('an error dialog will be displayed to the user', () => { + cy.get('[data-test="bulk-complete-enrollments-dialog"]') + .contains('Error completing enrollments'); + + cy.get('[data-test="bulk-complete-enrollments-dialog"]') + .contains('Some enrollments were completed successfully, ' + + 'but there was an error while completing the rest. Please see the details below.'); + + cy.get('[data-test="widget-open-close-toggle-button"]') + .click(); + + cy.get('[data-test="bulk-complete-enrollments-dialog"]') + .find('li') + .should('have.length', 2); + + cy.get('[data-test="bulk-complete-enrollments-dialog"]') + .find('li') + .contains('Mandatory DataElement `fjdU9F6EngS` is not present'); +}); + +When('you close the error dialog', () => { + cy.get('[data-test="bulk-complete-enrollments-dialog"]') + .find('[data-test="dhis2-uicore-button"]') + .contains('Cancel'); +}); + +Then('the unsuccessful enrollments should still be selected', () => { + cy.get('[data-test="dhis2-uicore-tablebody"]') + .find('tr') + .eq(0) + .should('have.class', 'selected'); + + cy.get('[data-test="dhis2-uicore-tablebody"]') + .find('tr') + .eq(2) + .should('have.class', 'selected'); +}); + +Then('the bulk delete enrollments modal should open', () => { + cy.get('[data-test="bulk-delete-enrollments-dialog"]') + .should('exist'); + + cy.contains('Delete selected enrollments'); +}); + +When('you deselect completed enrollments', () => { + cy.get('[data-test="bulk-delete-enrollments-dialog"]') + .find('[data-test="bulk-delete-enrollments-completed-checkbox"]') + .click(); +}); + +When('you confirm deleting 2 active enrollments', () => { + cy.intercept({ + method: 'POST', + url: '**/tracker?async=false&importStrategy=DELETE', + }, { + statusCode: 200, + body: {}, + }).as('deleteEnrollments'); + + cy.get('[data-test="bulk-delete-enrollments-dialog"]') + .find('[data-test="dhis2-uicore-button"]') + .contains('Delete 2 enrollments') + .click(); + + cy.wait('@deleteEnrollments') + .its('request.body') + .should(({ enrollments }) => { + expect(enrollments).to.have.length(2); + expect(enrollments).to.deep.include({ enrollment: 'Rkx1QOZeBra' }); + expect(enrollments).to.deep.include({ enrollment: 'hDVHG1OavhE' }); + }); +}); + +Then('the bulk delete enrollments modal should close', () => { + cy.get('[data-test="bulk-delete-enrollments-dialog"]') + .should('not.exist'); +}); + +When('you confirm deleting 3 enrollments', () => { + cy.intercept({ + method: 'POST', + url: '**/tracker?async=false&importStrategy=DELETE', + }, { + statusCode: 200, + body: {}, + }).as('deleteEnrollments'); + + cy.get('[data-test="bulk-delete-enrollments-dialog"]') + .find('[data-test="dhis2-uicore-button"]') + .contains('Delete 3 enrollments') + .click(); + + cy.wait('@deleteEnrollments') + .its('request.body') + .should(({ enrollments }) => { + expect(enrollments).to.have.length(3); + expect(enrollments).to.deep.include({ enrollment: 'PvJFfKjNWbq' }); + expect(enrollments).to.deep.include({ enrollment: 'Rkx1QOZeBra' }); + expect(enrollments).to.deep.include({ enrollment: 'hDVHG1OavhE' }); + }); +}); + +Then('the bulk delete enrollments button should not be visible', () => { + cy.get('[data-test="bulk-action-bar"]') + .find('[data-test="dhis2-uicore-button"]') + .contains('Delete enrollments') + .should('not.exist'); +}); diff --git a/cypress/e2e/WorkingLists/sharedSteps.js b/cypress/e2e/WorkingLists/sharedSteps.js index dbe0bb9928..41c60e6159 100644 --- a/cypress/e2e/WorkingLists/sharedSteps.js +++ b/cypress/e2e/WorkingLists/sharedSteps.js @@ -1,4 +1,4 @@ -import { When, Then } from '@badeball/cypress-cucumber-preprocessor'; +import { Then, When } from '@badeball/cypress-cucumber-preprocessor'; Then('for an event program the page navigation should show that you are on the first page', () => { cy.get('[data-test="event-working-lists"]') @@ -127,3 +127,80 @@ When('you change rows per page to 10', () => { .contains('10') .click(); }); + +When(/^you select the first (.*) rows$/, (rows) => { + cy.get('[data-test="dhis2-uicore-tablebody"]') + .find('tr') + .each(($tr, index) => { + if (index < rows) { + cy.wrap($tr).find('[data-test="select-row-checkbox"]').click(); + } + }); +}); + +Then(/^the bulk action bar should say (.*) selected$/, (rows) => { + cy.get('[data-test="bulk-action-bar"]') + .contains(`${rows} selected`); +}); + +Then(/^the first (.*) rows should be selected$/, (rows) => { + cy.get('[data-test="dhis2-uicore-tablebody"]') + .find('tr') + .each(($tr, index) => { + if (index < rows) { + cy.wrap($tr) + .should('have.class', 'selected') + .find('[data-test="select-row-checkbox"]'); + } + }); +}); + +When('you select all rows', () => { + cy.get('[data-test="select-all-rows-checkbox"]').click(); +}); + +Then('all rows should be selected', () => { + cy.get('[data-test="dhis2-uicore-tablebody"]') + .find('tr') + .each(($tr) => { + cy.wrap($tr) + .should('have.class', 'selected') + .find('[data-test="select-row-checkbox"]'); + }); +}); + +Then('the bulk action bar should not be present', () => { + cy.get('[data-test="bulk-action-bar"]').should('not.exist'); +}); + +Then('no rows should be selected', () => { + cy.get('[data-test="dhis2-uicore-tablebody"]') + .find('tr') + .each(($tr) => { + cy.wrap($tr).should('not.have.class', 'selected'); + }); +}); + +When(/^you deselect the first (.*) rows$/, (rows) => { + cy.get('[data-test="dhis2-uicore-tablebody"]') + .find('tr') + .each(($tr, index) => { + if (index < rows) { + cy.wrap($tr).find('[data-test="select-row-checkbox"]').click(); + } + }); +}); + +Then('the filters should be disabled', () => { + cy.get('[data-test="workinglist-template-selector-chip"]') + .each(($chip) => { + cy.wrap($chip).should('have.class', 'disabled'); + }); +}); + +When(/^you click the bulk (.*) button$/, (text) => { + cy.get('[data-test="bulk-action-bar"]') + .find('[data-test="dhis2-uicore-button"]') + .contains(text, { matchCase: false }) + .click(); +}); diff --git a/docs/user/resources/images/event-bulk-actions-selected-rows.png b/docs/user/resources/images/event-bulk-actions-selected-rows.png new file mode 100644 index 0000000000..84c93e2626 Binary files /dev/null and b/docs/user/resources/images/event-bulk-actions-selected-rows.png differ diff --git a/docs/user/resources/images/tracked-entity-bulk-actions-complete-enrollments.png b/docs/user/resources/images/tracked-entity-bulk-actions-complete-enrollments.png new file mode 100644 index 0000000000..84a094746f Binary files /dev/null and b/docs/user/resources/images/tracked-entity-bulk-actions-complete-enrollments.png differ diff --git a/docs/user/resources/images/tracked-entity-bulk-actions-delete-enrollments.png b/docs/user/resources/images/tracked-entity-bulk-actions-delete-enrollments.png new file mode 100644 index 0000000000..b5a861fb26 Binary files /dev/null and b/docs/user/resources/images/tracked-entity-bulk-actions-delete-enrollments.png differ diff --git a/docs/user/resources/images/tracked-entity-bulk-actions-selected-rows.png b/docs/user/resources/images/tracked-entity-bulk-actions-selected-rows.png new file mode 100644 index 0000000000..4999e42518 Binary files /dev/null and b/docs/user/resources/images/tracked-entity-bulk-actions-selected-rows.png differ diff --git a/docs/user/using-the-capture-app.md b/docs/user/using-the-capture-app.md index fab4c41175..1325519885 100644 --- a/docs/user/using-the-capture-app.md +++ b/docs/user/using-the-capture-app.md @@ -560,6 +560,17 @@ You can set up your own views and save them for later use. The views can also be ![](resources/images/view_delete.png) + +## Event bulk actions + +You can perform bulk actions on events in the event list. + +1. Select the events you want to perform the action on by clicking the checkbox to the left of the event. + +2. You can choose between quickly completing the selected events or deleting them. + +![](resources/images/event-bulk-actions-selected-rows.png) + ## User assignment in events programs { #capture_user_assignment } Events can be assigned to users. This feature must be enabled per program. @@ -796,6 +807,37 @@ You will find the predefined list views above the filters for the list. Click to > **Note** > You can download the tracked entities list in JSON or CSV formats. + +## Tracked entity bulk actions + +You can perform bulk actions on tracked entities and their enrollments in the tracked entity list. + +![](resources/images/tracked-entity-bulk-actions-selected-rows.png) + +### Completing active enrollments + +1. Select the tracked entities you want to perform the action on by clicking the checkbox to the left of the tracked entity. + +2. Click the **Complete enrollments** button. + 1. You can also choose if you want to complete all active events within the selected enrollments. + +3. Confirm the action in the dialog that appears. + +![](resources/images/tracked-entity-bulk-actions-complete-enrollments.png) + +### Deleting enrollments + +1. Select the tracked entities you want to perform the action on by clicking the checkbox to the left of the tracked entity. + +2. Click the **Delete enrollments** button. + +3. In the dialog that appears, select what enrollment statuses you want to delete and confirm the action. + 1. You can choose any combination of enrollment statuses to delete. + +4. Confirm the action in the dialog that appears. + +![](resources/images/tracked-entity-bulk-actions-delete-enrollments.png) + ## Tracker program stage working list You can show data elements from a single stage in a working list. Select the "Program stage" option from the "More filters" dropdown, then choose a program stage. diff --git a/i18n/en.pot b/i18n/en.pot index 370523a4b2..c14d1bcb73 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-25T18:18:11.518Z\n" -"PO-Revision-Date: 2024-10-25T18:18:11.518Z\n" +"POT-Creation-Date: 2024-10-28T13:13:50.133Z\n" +"PO-Revision-Date: 2024-10-28T13:13:50.133Z\n" msgid "Choose one or more dates..." msgstr "Choose one or more dates..." @@ -1593,6 +1593,45 @@ msgstr "Download data..." msgid "an error occurred loading working lists" msgstr "an error occurred loading working lists" +msgid "You do not have access to complete events" +msgstr "You do not have access to complete events" + +msgid "Complete events" +msgstr "Complete events" + +msgid "Are you sure you want to complete all active events in selection?" +msgstr "Are you sure you want to complete all active events in selection?" + +msgid "There are no active events to complete in the current selection." +msgstr "There are no active events to complete in the current selection." + +msgid "Error completing events" +msgstr "Error completing events" + +msgid "There was an error completing the events." +msgstr "There was an error completing the events." + +msgid "Details (Advanced)" +msgstr "Details (Advanced)" + +msgid "An unknown error occurred." +msgstr "An unknown error occurred." + +msgid "An error occurred while completing events" +msgstr "An error occurred while completing events" + +msgid "An error occurred while deleting the events" +msgstr "An error occurred while deleting the events" + +msgid "You do not have access to delete events" +msgstr "You do not have access to delete events" + +msgid "Delete events" +msgstr "Delete events" + +msgid "This cannot be undone. Are you sure you want to delete the selected events?" +msgstr "This cannot be undone. Are you sure you want to delete the selected events?" + msgid "Registration Date" msgstr "Registration Date" @@ -1617,6 +1656,130 @@ msgstr "Completed enrollments" msgid "Cancelled enrollments" msgstr "Cancelled enrollments" +msgid "" +"Some enrollments were completed successfully, but there was an error while " +"completing the rest. Please see the details below." +msgstr "" +"Some enrollments were completed successfully, but there was an error while " +"completing the rest. Please see the details below." + +msgid "" +"There was an error while completing the enrollments. Please see the details " +"below." +msgstr "" +"There was an error while completing the enrollments. Please see the details " +"below." + +msgid "" +"An unexpected error occurred while fetching the enrollments. Please try " +"again." +msgstr "" +"An unexpected error occurred while fetching the enrollments. Please try " +"again." + +msgid "" +"There are currently no active enrollments in the selection. All enrollments " +"are already completed or cancelled." +msgstr "" +"There are currently no active enrollments in the selection. All enrollments " +"are already completed or cancelled." + +msgid "This action will complete {{count}} active enrollment in your selection." +msgid_plural "This action will complete {{count}} active enrollment in your selection." +msgstr[0] "This action will complete {{count}} active enrollment in your selection." +msgstr[1] "This action will complete {{count}} active enrollments in your selection." + +msgid "{{count}} enrollment already marked as completed will not be changed." +msgid_plural "{{count}} enrollment already marked as completed will not be changed." +msgstr[0] "{{count}} enrollment already marked as completed will not be changed." +msgstr[1] "{{count}} enrollments already marked as completed will not be changed." + +msgid "Mark all events within enrollments as complete" +msgstr "Mark all events within enrollments as complete" + +msgid "You do not have access to bulk complete enrollments" +msgstr "You do not have access to bulk complete enrollments" + +msgid "Complete enrollments" +msgstr "Complete enrollments" + +msgid "Error completing enrollments" +msgstr "Error completing enrollments" + +msgid "No active enrollments to complete" +msgstr "No active enrollments to complete" + +msgid "Complete {{count}} enrollment" +msgid_plural "Complete {{count}} enrollment" +msgstr[0] "Complete {{count}} enrollment" +msgstr[1] "Complete {{count}} enrollments" + +msgid "An error occurred when completing the enrollments" +msgstr "An error occurred when completing the enrollments" + +msgid "An unknown error occurred when completing enrollments" +msgstr "An unknown error occurred when completing enrollments" + +msgid "You do not have access to delete enrollments" +msgstr "You do not have access to delete enrollments" + +msgid "Delete enrollments" +msgstr "Delete enrollments" + +msgid "Delete selected enrollments" +msgstr "Delete selected enrollments" + +msgid "An error occurred while loading the selected enrollments. Please try again." +msgstr "An error occurred while loading the selected enrollments. Please try again." + +msgid "" +"This action will permanently delete the selected enrollments, including all " +"associated data and events." +msgstr "" +"This action will permanently delete the selected enrollments, including all " +"associated data and events." + +msgid "Active enrollments ({{count}})" +msgid_plural "Active enrollments ({{count}})" +msgstr[0] "Active enrollments ({{count}})" +msgstr[1] "Active enrollments ({{count}})" + +msgid "Completed enrollments ({{count}})" +msgid_plural "Completed enrollments ({{count}})" +msgstr[0] "Completed enrollments ({{count}})" +msgstr[1] "Completed enrollments ({{count}})" + +msgid "Cancelled enrollments ({{count}})" +msgid_plural "Cancelled enrollments ({{count}})" +msgstr[0] "Cancelled enrollments ({{count}})" +msgstr[1] "Cancelled enrollments ({{count}})" + +msgid "Delete {{count}} enrollment" +msgid_plural "Delete {{count}} enrollment" +msgstr[0] "Delete {{count}} enrollment" +msgstr[1] "Delete {{count}} enrollments" + +msgid "An error occurred when deleting enrollments" +msgstr "An error occurred when deleting enrollments" + +msgid "Delete {{ trackedEntityName }} with all enrollments" +msgstr "Delete {{ trackedEntityName }} with all enrollments" + +msgid "Delete {{count}} {{ trackedEntityName }}" +msgid_plural "Delete {{count}} {{ trackedEntityName }}" +msgstr[0] "Delete {{count}} {{ trackedEntityName }}" +msgstr[1] "Delete {{count}} {{ trackedEntityName }}" + +msgid "" +"Deleting records will also delete any associated enrollments and events. " +"This cannot be undone. Are you sure you want to delete?" +msgstr "" +"Deleting records will also delete any associated enrollments and events. " +"This cannot be undone. Are you sure you want to delete?" + +msgid "An error occurred while deleting the records" +msgstr "An error occurred while deleting the records" + msgid "Working list could not be updated" msgstr "Working list could not be updated" @@ -1626,6 +1789,14 @@ msgstr "an error occurred loading the working lists" msgid "an error occurred loading Tracked entity instance lists" msgstr "an error occurred loading Tracked entity instance lists" +msgid "{{count}} selected" +msgid_plural "{{count}} selected" +msgstr[0] "{{count}} selected" +msgstr[1] "{{count}} selected" + +msgid "Deselect all" +msgstr "Deselect all" + msgid "Update view" msgstr "Update view" diff --git a/src/core_modules/capture-core-utils/featuresSupport/support.js b/src/core_modules/capture-core-utils/featuresSupport/support.js index 103df995a5..ff5fb4f11a 100644 --- a/src/core_modules/capture-core-utils/featuresSupport/support.js +++ b/src/core_modules/capture-core-utils/featuresSupport/support.js @@ -10,6 +10,7 @@ export const FEATURES = Object.freeze({ trackerFileEndpoint: 'trackerFileEndpoint', trackedEntitiesCSV: 'trackedEntitiesCSV', newAocApiSeparator: 'newAocApiSeparator', + newEntityFilterQueryParam: 'newEntityFilterQueryParam', }); // The first minor version that supports the feature @@ -24,6 +25,7 @@ const MINOR_VERSION_SUPPORT = Object.freeze({ [FEATURES.changelogs]: 41, [FEATURES.trackedEntitiesCSV]: 40, [FEATURES.newAocApiSeparator]: 41, + [FEATURES.newEntityFilterQueryParam]: 41, }); export const hasAPISupportForFeature = (minorVersion: string | number, featureName: string) => diff --git a/src/core_modules/capture-core/components/List/OnlineList/OnlineList.component.js b/src/core_modules/capture-core/components/List/OnlineList/OnlineList.component.js index 21b085e8d0..f511499c7f 100644 --- a/src/core_modules/capture-core/components/List/OnlineList/OnlineList.component.js +++ b/src/core_modules/capture-core/components/List/OnlineList/OnlineList.component.js @@ -2,11 +2,19 @@ import * as React from 'react'; import i18n from '@dhis2/d2-i18n'; -import { DataTableHead, DataTable, DataTableBody, DataTableRow, DataTableCell, DataTableColumnHeader } from '@dhis2/ui'; +import { + CheckboxField, + DataTable, + DataTableBody, + DataTableCell, + DataTableColumnHeader, + DataTableHead, + DataTableRow, +} from '@dhis2/ui'; import classNames from 'classnames'; import { withStyles } from '@material-ui/core/styles'; -import { dataElementTypes } from '../../../metaData'; import type { OptionSet } from '../../../metaData'; +import { dataElementTypes } from '../../../metaData'; const getStyles = () => ({ tableContainer: { @@ -34,7 +42,13 @@ type Props = { dataSource: Array, rowIdKey: string, columns: ?Array, + selectedRows: { [key: string]: boolean }, + onSelectAll: (ids: Array) => void, + onRowSelect: (id: string) => void, + allRowsAreSelected: boolean, + isSelectionInProgress: ?boolean, sortById: string, + showSelectCheckBox: ?boolean, sortByDirection: string, onSort: (id: string, direction: string) => void, updating?: ?boolean, @@ -86,7 +100,7 @@ class Index extends React.Component { }; renderHeaderRow(visibleColumns: Array) { - const { classes, sortById, sortByDirection } = this.props; + const { classes, sortById, sortByDirection, dataSource, onSelectAll, allRowsAreSelected } = this.props; const headerCells = visibleColumns.map(column => ( { )); + const checkboxCell = this.props.showSelectCheckBox ? ( + + onSelectAll(dataSource.map(({ id }) => id))} + /> + + ) : null; + return ( + {checkboxCell} {headerCells} {this.getCustomEndCellHeader()} @@ -121,7 +147,7 @@ class Index extends React.Component { } renderRows(visibleColumns: Array, columnsCount: number) { - const { dataSource, rowIdKey, ...customEndCellBodyProps } = this.props; + const { dataSource, rowIdKey, selectedRows, onRowSelect, ...customEndCellBodyProps } = this.props; if (!dataSource || dataSource.length === 0) { return ( @@ -136,13 +162,37 @@ class Index extends React.Component { this.props.onRowClick(row)} + style={{ cursor: this.props.isSelectionInProgress ? 'pointer' : 'default' }} + onClick={() => { + if (this.props.isSelectionInProgress) { + onRowSelect(row[rowIdKey]); + return; + } + this.props.onRowClick(row); + }} > {row[column.id]} )); + + const rowId = row[rowIdKey]; return ( - + + {this.props.showSelectCheckBox && ( + + onRowSelect(rowId)} + /> + + )} {cells} {this.getCustomEndCellBody(row, customEndCellBodyProps)} diff --git a/src/core_modules/capture-core/components/ListView/ContextBuilder/ListViewContextBuilder.component.js b/src/core_modules/capture-core/components/ListView/ContextBuilder/ListViewContextBuilder.component.js index 7b3ec7806a..16d19dfc2c 100644 --- a/src/core_modules/capture-core/components/ListView/ContextBuilder/ListViewContextBuilder.component.js +++ b/src/core_modules/capture-core/components/ListView/ContextBuilder/ListViewContextBuilder.component.js @@ -9,6 +9,11 @@ import type { Props } from './listViewContextBuilder.types'; export const ListViewContextBuilder = ({ filters, + selectedRows, + allRowsAreSelected, + onRowSelect, + onSelectAll, + selectionInProgress, onChangePage, onChangeRowsPerPage, rowsPerPage, @@ -40,6 +45,11 @@ export const ListViewContextBuilder = ({ diff --git a/src/core_modules/capture-core/components/ListView/Main/ListViewMain.component.js b/src/core_modules/capture-core/components/ListView/Main/ListViewMain.component.js index 87c71afbee..5460022419 100644 --- a/src/core_modules/capture-core/components/ListView/Main/ListViewMain.component.js +++ b/src/core_modules/capture-core/components/ListView/Main/ListViewMain.component.js @@ -39,7 +39,20 @@ const getStyles = (theme: Theme) => ({ class ListViewMainPlain extends React.PureComponent { renderTopBar = () => { - const { classes, filters, columns, customMenuContents, onSetColumnOrder } = this.props; + const { + classes, + filters, + columns, + customMenuContents, + onSetColumnOrder, + isSelectionInProgress, + bulkActionBarComponent, + } = this.props; + + if (isSelectionInProgress) { + return bulkActionBarComponent; + } + return (
{ > {filters}
-
+
{ } renderPager = () => { - const classes = this.props.classes; + const { classes, isSelectionInProgress } = this.props; return (
- +
); } @@ -80,8 +93,11 @@ class ListViewMainPlain extends React.PureComponent { classes, filters, updatingWithDialog, - onSelectRow, + onClickListRow, + onRowSelect, + onSelectAll, customRowMenuContents, + isSelectionInProgress, ...passOnProps } = this.props; @@ -92,8 +108,12 @@ class ListViewMainPlain extends React.PureComponent { return ( ); } diff --git a/src/core_modules/capture-core/components/ListView/Main/listViewMain.types.js b/src/core_modules/capture-core/components/ListView/Main/listViewMain.types.js index da7edd0124..c164f94591 100644 --- a/src/core_modules/capture-core/components/ListView/Main/listViewMain.types.js +++ b/src/core_modules/capture-core/components/ListView/Main/listViewMain.types.js @@ -1,6 +1,6 @@ // @flow import type { ListViewContextBuilderPassOnProps } from '../ContextBuilder'; -import type { CustomRowMenuContents, CustomMenuContents, Columns } from '../types'; +import type { Columns, CustomMenuContents, CustomRowMenuContents } from '../types'; type WithFilterPassOnProps = {| ...ListViewContextBuilderPassOnProps, @@ -14,7 +14,11 @@ type ComponentProps = {| rowIdKey: string, customMenuContents?: CustomMenuContents, customRowMenuContents?: CustomRowMenuContents, - onSelectRow: Function, + onClickListRow: Function, + onRowSelect: Function, + onSelectAll: Function, + isSelectionInProgress: ?boolean, + bulkActionBarComponent: React$Node, ...CssClasses, |}; diff --git a/src/core_modules/capture-core/components/ListView/types/listView.types.js b/src/core_modules/capture-core/components/ListView/types/listView.types.js index 96f98f4c90..c367075b4e 100644 --- a/src/core_modules/capture-core/components/ListView/types/listView.types.js +++ b/src/core_modules/capture-core/components/ListView/types/listView.types.js @@ -1,10 +1,7 @@ // @flow import { typeof dataElementTypes } from '../../../metaData'; -import type { - FilterData, - Options, -} from '../../FiltersForTypes'; +import type { FilterData, Options } from '../../FiltersForTypes'; export type Column = { id: string, @@ -103,7 +100,7 @@ export type InterfaceProps = $ReadOnly<{| onClearFilter: ClearFilter, onRemoveFilter: RemoveFilter, onSelectRestMenuItem: SelectRestMenuItem, - onSelectRow: SelectRow, + onClickListRow: SelectRow, onSetColumnOrder: SetColumnOrder, onSort: Sort, onUpdateFilter: UpdateFilter, @@ -114,7 +111,13 @@ export type InterfaceProps = $ReadOnly<{| stickyFilters: StickyFilters, updating: boolean, updatingWithDialog: boolean, - programStageId?: string + onRowSelect: (id: string) => void, + programStageId?: string, + selectedRows: { [key: string]: boolean }, + onSelectAll: (rows: Array) => void, + allRowsAreSelected: ?boolean, + selectionInProgress: ?boolean, + bulkActionBarComponent: React$Element, |}>; export type ListViewPassOnProps = $ReadOnly<{| diff --git a/src/core_modules/capture-core/components/Pagination/withDefaultNavigation.js b/src/core_modules/capture-core/components/Pagination/withDefaultNavigation.js index 77fe10dafa..980303faea 100644 --- a/src/core_modules/capture-core/components/Pagination/withDefaultNavigation.js +++ b/src/core_modules/capture-core/components/Pagination/withDefaultNavigation.js @@ -54,6 +54,7 @@ type Props = { nextPageButtonDisabled: boolean, currentPage: number, onChangePage: (pageNumber: number) => void, + disabled?: boolean, classes: { root: string, }, @@ -74,7 +75,7 @@ const getNavigation = (InnerComponent: React.ComponentType) => }; renderNavigationElement() { - const { currentPage, classes, theme, nextPageButtonDisabled } = this.props; + const { currentPage, disabled, classes, theme, nextPageButtonDisabled } = this.props; return (
) => {theme.direction === 'rtl' ? : } @@ -91,7 +92,7 @@ const getNavigation = (InnerComponent: React.ComponentType) => {theme.direction === 'rtl' ? : } @@ -99,7 +100,7 @@ const getNavigation = (InnerComponent: React.ComponentType) => {theme.direction === 'rtl' ? : } diff --git a/src/core_modules/capture-core/components/Pagination/withRowsPerPageSelector.js b/src/core_modules/capture-core/components/Pagination/withRowsPerPageSelector.js index 46cbe2fe34..2d3edee629 100644 --- a/src/core_modules/capture-core/components/Pagination/withRowsPerPageSelector.js +++ b/src/core_modules/capture-core/components/Pagination/withRowsPerPageSelector.js @@ -12,6 +12,7 @@ const OptionsSelectWithTranslations = withTranslations()(OptionsSelectVirtualize type Props = { rowsPerPage: number, onChangeRowsPerPage: (rowsPerPage: number) => void, + disabled?: boolean, }; const getRowsPerPageSelector = (InnerComponent: React.ComponentType) => @@ -37,7 +38,7 @@ const getRowsPerPageSelector = (InnerComponent: React.ComponentType) => } renderSelectorElement = () => { - const rowsPerPage = this.props.rowsPerPage; + const { rowsPerPage, disabled } = this.props; return (
@@ -46,6 +47,7 @@ const getRowsPerPageSelector = (InnerComponent: React.ComponentType) => options={this.options} value={rowsPerPage} nullable={false} + disabled={disabled} withoutUnderline searchable={false} /> diff --git a/src/core_modules/capture-core/components/WorkingLists/EventWorkingLists/ReduxProvider/EventWorkingListsReduxProvider.container.js b/src/core_modules/capture-core/components/WorkingLists/EventWorkingLists/ReduxProvider/EventWorkingListsReduxProvider.container.js index 3bacc8df11..bcb525bcc6 100644 --- a/src/core_modules/capture-core/components/WorkingLists/EventWorkingLists/ReduxProvider/EventWorkingListsReduxProvider.container.js +++ b/src/core_modules/capture-core/components/WorkingLists/EventWorkingLists/ReduxProvider/EventWorkingListsReduxProvider.container.js @@ -38,7 +38,7 @@ export const EventWorkingListsReduxProvider = ({ storeId, program, programStage, const downloadRequest = useSelector(({ workingLists }) => workingLists[storeId] && workingLists[storeId].currentRequest); // TODO: Remove when DownloadDialog is rewritten - const onSelectListRow = useCallback(({ id }) => { + const onClickListRow = useCallback(({ id }) => { window.scrollTo(0, 0); dispatch(openViewEventPage(id)); }, [dispatch]); @@ -98,7 +98,7 @@ export const EventWorkingListsReduxProvider = ({ storeId, program, programStage, currentTemplate={currentTemplate} templates={templates} lastIdDeleted={lastEventIdDeleted} - onSelectListRow={onSelectListRow} + onClickListRow={onClickListRow} onLoadView={injectDownloadRequestToLoadView} onUpdateList={injectDownloadRequestToUpdateList} onDeleteEvent={onDeleteEvent} diff --git a/src/core_modules/capture-core/components/WorkingLists/EventWorkingLists/ReduxProvider/eventWorkingListsReduxProvider.types.js b/src/core_modules/capture-core/components/WorkingLists/EventWorkingLists/ReduxProvider/eventWorkingListsReduxProvider.types.js index 3be72bf3d8..33a53d67a6 100644 --- a/src/core_modules/capture-core/components/WorkingLists/EventWorkingLists/ReduxProvider/eventWorkingListsReduxProvider.types.js +++ b/src/core_modules/capture-core/components/WorkingLists/EventWorkingLists/ReduxProvider/eventWorkingListsReduxProvider.types.js @@ -79,7 +79,7 @@ export type EventWorkingListsReduxOutputProps = {| onDeleteTemplate: DeleteTemplate, onLoadView: LoadView, onLoadTemplates: LoadTemplates, - onSelectListRow: SelectRow, + onClickListRow: SelectRow, onSelectRestMenuItem: SelectRestMenuItem, onSelectTemplate: SelectTemplate, onSetListColumnOrder: SetColumnOrder, diff --git a/src/core_modules/capture-core/components/WorkingLists/EventWorkingLists/UpdateTrigger/EventWorkingListsUpdateTrigger.component.js b/src/core_modules/capture-core/components/WorkingLists/EventWorkingLists/UpdateTrigger/EventWorkingListsUpdateTrigger.component.js index d79f2af5d6..0b1954c4eb 100644 --- a/src/core_modules/capture-core/components/WorkingLists/EventWorkingLists/UpdateTrigger/EventWorkingListsUpdateTrigger.component.js +++ b/src/core_modules/capture-core/components/WorkingLists/EventWorkingLists/UpdateTrigger/EventWorkingListsUpdateTrigger.component.js @@ -6,6 +6,7 @@ import type { Props } from './eventWorkingListsUpdateTrigger.types'; export const EventWorkingListsUpdateTrigger = ({ lastTransaction, + customUpdateTrigger, lastIdDeleted, listDataRefreshTimestamp, lastTransactionOnListDataRefresh, @@ -16,12 +17,6 @@ export const EventWorkingListsUpdateTrigger = ({ const forceUpdateOnMount = moment().diff(moment(listDataRefreshTimestamp || 0), 'minutes') > 5 || lastTransaction !== lastTransactionOnListDataRefresh; - // Creating a string that will force an update of the list when it changes. - const customUpdateTrigger = [ - lastTransaction, - lastIdDeleted, - ].join('##'); - const injectCustomUpdateContextToLoadList = useCallback((selectedTemplate: Object, context: Object, meta: Object) => onLoadView(selectedTemplate, { ...context, lastTransaction }, meta), [onLoadView, lastTransaction]); diff --git a/src/core_modules/capture-core/components/WorkingLists/EventWorkingLists/ViewMenuSetup/EventWorkingListsViewMenuSetup.component.js b/src/core_modules/capture-core/components/WorkingLists/EventWorkingLists/ViewMenuSetup/EventWorkingListsViewMenuSetup.component.js index 8ae6c0609c..79b1c6aa32 100644 --- a/src/core_modules/capture-core/components/WorkingLists/EventWorkingLists/ViewMenuSetup/EventWorkingListsViewMenuSetup.component.js +++ b/src/core_modules/capture-core/components/WorkingLists/EventWorkingLists/ViewMenuSetup/EventWorkingListsViewMenuSetup.component.js @@ -1,13 +1,33 @@ // @flow -import React, { useState, useMemo, useCallback } from 'react'; +import React, { useCallback, useMemo, useState } from 'react'; import i18n from '@dhis2/d2-i18n'; +import { v4 as uuid } from 'uuid'; import { EventWorkingListsRowMenuSetup } from '../RowMenuSetup'; import { DownloadDialog } from '../../WorkingListsCommon'; import type { CustomMenuContents } from '../../WorkingListsBase'; import type { Props } from './EventWorkingListsViewMenuSetup.types'; +import { useSelectedRowsController } from '../../WorkingListsBase/BulkActionBar'; +import { EventBulkActions } from '../../EventWorkingListsCommon/EventBulkActions'; -export const EventWorkingListsViewMenuSetup = ({ downloadRequest, program, ...passOnProps }: Props) => { +export const EventWorkingListsViewMenuSetup = ({ + downloadRequest, + program, + dataSource, + ...passOnProps +}: Props) => { const [downloadDialogOpen, setDownloadDialogOpenStatus] = useState(false); + const [customUpdateTrigger, setCustomUpdateTrigger] = useState(); + + const { + selectedRows, + clearSelection, + selectAllRows, + selectionInProgress, + toggleRowSelected, + allRowsAreSelected, + removeRowsFromSelection, + } = useSelectedRowsController({ recordIds: dataSource?.map(data => data.id) }); + const customListViewMenuContents: CustomMenuContents = useMemo(() => [{ key: 'downloadData', clickHandler: () => setDownloadDialogOpenStatus(true), @@ -18,12 +38,38 @@ export const EventWorkingListsViewMenuSetup = ({ downloadRequest, program, ...pa setDownloadDialogOpenStatus(false); }, [setDownloadDialogOpenStatus]); + + const onUpdateList = useCallback((disableClearSelection?: boolean) => { + const id = uuid(); + setCustomUpdateTrigger(id); + !disableClearSelection && clearSelection(); + }, [clearSelection]); + + const eventBulkActions = ( + + ); + return ( void, + onSelectAll: (rows: Array) => void, + selectionInProgress: ?boolean, + selectedRows: { [key: string]: boolean }, + bulkActionBarComponent: React$Element, |}; diff --git a/src/core_modules/capture-core/components/WorkingLists/EventWorkingListsCommon/EventBulkActions/Actions/CompleteAction/CompleteAction.js b/src/core_modules/capture-core/components/WorkingLists/EventWorkingListsCommon/EventBulkActions/Actions/CompleteAction/CompleteAction.js new file mode 100644 index 0000000000..6c3fce11fa --- /dev/null +++ b/src/core_modules/capture-core/components/WorkingLists/EventWorkingListsCommon/EventBulkActions/Actions/CompleteAction/CompleteAction.js @@ -0,0 +1,169 @@ +// @flow +import React, { type ComponentType, useState } from 'react'; +import i18n from '@dhis2/d2-i18n'; +import { withStyles } from '@material-ui/core'; +import { Button, ButtonStrip, colors, Modal, ModalActions, ModalContent, ModalTitle } from '@dhis2/ui'; +import { useBulkCompleteEvents } from './hooks/useBulkCompleteEvents'; +import { ConditionalTooltip } from '../../../../../Tooltips/ConditionalTooltip'; +import { Widget } from '../../../../../Widget'; + +type Props = {| + selectedRows: { [key: string]: boolean }, + disabled?: boolean, + onUpdateList: (disableClearSelections?: boolean) => void, + removeRowsFromSelection: (rows: Array) => void, +|} + +const styles = { + container: { + fontSize: '14px', + lineHeight: '19px', + color: colors.grey900, + display: 'flex', + flexDirection: 'column', + gap: '8px', + }, + errorContainer: { + padding: '0px 20px', + }, +}; + +const CompleteActionPlain = ({ + selectedRows, + disabled, + removeRowsFromSelection, + onUpdateList, + classes, +}) => { + const [isCompleteDialogOpen, setIsCompleteDialogOpen] = useState(false); + const [openAccordion, setOpenAccordion] = useState(false); + const { + eventCounts, + isLoading, + isCompletingEvents, + onCompleteEvents, + validationError, + } = useBulkCompleteEvents({ + selectedRows, + isCompleteDialogOpen, + setIsCompleteDialogOpen, + removeRowsFromSelection, + onUpdateList, + }); + + return ( + <> + + + + + {isCompleteDialogOpen && eventCounts && !validationError && ( + setIsCompleteDialogOpen(false)} + dataTest={'bulk-complete-events-dialog'} + > + + {i18n.t('Complete events')} + + + + + {eventCounts.active > 0 ? + i18n.t('Are you sure you want to complete all active events in selection?') + : + i18n.t('There are no active events to complete in the current selection.') + } + + + + + + + + + + + + + )} + + {isCompleteDialogOpen && validationError && ( + setIsCompleteDialogOpen(false)} + dataTest={'bulk-complete-events-dialog'} + > + + {i18n.t('Error completing events')} + + + + + {i18n.t('There was an error completing the events.')} + + setOpenAccordion(true)} + onClose={() => setOpenAccordion(false)} + borderless + header={i18n.t('Details (Advanced)')} + > + +
    + {validationError?.validationReport?.errorReports ? + validationError.validationReport.errorReports.map(errorReport => ( +
  • + {errorReport?.message} +
    • + )) : ( +
  • + {i18n.t('An unknown error occurred.')} +
    • + ) + } +
+ + + + + + + + + + + + + )} + + ); +}; + +export const CompleteAction: ComponentType<$Diff> = withStyles(styles)(CompleteActionPlain); diff --git a/src/core_modules/capture-core/components/WorkingLists/EventWorkingListsCommon/EventBulkActions/Actions/CompleteAction/hooks/useBulkCompleteEvents.js b/src/core_modules/capture-core/components/WorkingLists/EventWorkingListsCommon/EventBulkActions/Actions/CompleteAction/hooks/useBulkCompleteEvents.js new file mode 100644 index 0000000000..5c91e35cd7 --- /dev/null +++ b/src/core_modules/capture-core/components/WorkingLists/EventWorkingListsCommon/EventBulkActions/Actions/CompleteAction/hooks/useBulkCompleteEvents.js @@ -0,0 +1,141 @@ +// @flow +import { useCallback, useEffect, useMemo } from 'react'; +import i18n from '@dhis2/d2-i18n'; +import { useMutation } from 'react-query'; +import { useAlert, useConfig, useDataEngine } from '@dhis2/app-runtime'; +import { useApiDataQuery } from '../../../../../../../utils/reactQueryHelpers'; +import { handleAPIResponse, REQUESTED_ENTITIES } from '../../../../../../../utils/api'; +import { FEATURES, hasAPISupportForFeature } from '../../../../../../../../capture-core-utils'; + +type Props = {| + selectedRows: { [key: string]: boolean }, + isCompleteDialogOpen: boolean, + setIsCompleteDialogOpen: (isCompleteDialogOpen: boolean) => void, + onUpdateList: (disableClearSelection?: boolean) => void, + removeRowsFromSelection: (rows: Array) => void, +|} + +export const useBulkCompleteEvents = ({ + selectedRows, + isCompleteDialogOpen, + setIsCompleteDialogOpen, + removeRowsFromSelection, + onUpdateList, +}: Props) => { + const { serverVersion: { minor } } = useConfig(); + const dataEngine = useDataEngine(); + const { show: showAlert } = useAlert( + ({ message }) => message, + { critical: true }, + ); + + const { data: events, isLoading } = useApiDataQuery( + ['WorkingLists', 'BulkActionBar', 'CompleteAction', 'Events', selectedRows], + { + resource: 'tracker/events', + params: () => { + const supportForFeature = hasAPISupportForFeature(minor, FEATURES.newEntityFilterQueryParam); + const filterQueryParam: string = supportForFeature ? 'events' : 'event'; + + return ({ + fields: '*,!completedAt,!completedBy,!dataValues,!relationships', + [filterQueryParam]: Object.keys(selectedRows).join(supportForFeature ? ',' : ';'), + }); + }, + }, + { + enabled: Object.keys(selectedRows).length > 0 && isCompleteDialogOpen, + staleTime: 0, + cacheTime: 0, + select: (data: any) => { + const apiEvents = handleAPIResponse(REQUESTED_ENTITIES.events, data); + + return apiEvents.reduce((acc, event) => { + if (event.status === 'ACTIVE') { + acc.activeEvents.push(event); + } else { + acc.completedEvents.push(event); + } + + return acc; + }, { activeEvents: [], completedEvents: [] }); + }, + }, + ); + + const { + mutate: completeEvents, + isLoading: isCompletingEvents, + data: validationError, + error, + reset: resetCompleteEvents, + } = useMutation( + ({ payload }: any) => dataEngine.mutate({ + resource: 'tracker?async=false&importStrategy=UPDATE&atomicMode=OBJECT', + type: 'create', + data: { + events: payload, + }, + }), + { + onError: () => { + showAlert({ message: i18n.t('An error occurred while completing events') }); + }, + onSuccess: (response, { payload }: any) => { + const errorReports = response?.validationReport?.errorReports; + if (errorReports && errorReports.length) { + const eventIds = payload.map(event => event.event); + const validEventIds = eventIds + .filter(eventId => !errorReports + .find(errorReport => errorReport.uid === eventId), + ); + + removeRowsFromSelection(validEventIds); + onUpdateList(true); + } else { + onUpdateList(); + setIsCompleteDialogOpen(false); + } + }, + }, + ); + + const onCompleteEvents = useCallback(() => { + if (!events) { + return; + } + + const serverPayload = events.activeEvents.map(event => ({ + ...event, + status: 'COMPLETED', + })); + + completeEvents({ payload: serverPayload }); + }, [completeEvents, events]); + + const eventCounts = useMemo(() => { + if (!events) { + return null; + } + + return { + active: events.activeEvents.length, + completed: events.completedEvents.length, + }; + }, [events]); + + useEffect(() => { + if (!isCompleteDialogOpen) { + resetCompleteEvents(); + } + }, [isCompleteDialogOpen, resetCompleteEvents]); + + return { + eventCounts, + error, + validationError, + onCompleteEvents, + isCompletingEvents, + isLoading, + }; +}; diff --git a/src/core_modules/capture-core/components/WorkingLists/EventWorkingListsCommon/EventBulkActions/Actions/DeleteAction/DeleteAction.js b/src/core_modules/capture-core/components/WorkingLists/EventWorkingListsCommon/EventBulkActions/Actions/DeleteAction/DeleteAction.js new file mode 100644 index 0000000000..e4d1df4b63 --- /dev/null +++ b/src/core_modules/capture-core/components/WorkingLists/EventWorkingListsCommon/EventBulkActions/Actions/DeleteAction/DeleteAction.js @@ -0,0 +1,102 @@ +// @flow + +import React, { useState } from 'react'; +import log from 'loglevel'; +import i18n from '@dhis2/d2-i18n'; +import { Button, ButtonStrip, Modal, ModalActions, ModalContent, ModalTitle } from '@dhis2/ui'; +import { useMutation } from 'react-query'; +import { useAlert, useDataEngine } from '@dhis2/app-runtime'; +import { errorCreator } from '../../../../../../../capture-core-utils'; +import { ConditionalTooltip } from '../../../../../Tooltips/ConditionalTooltip'; + +type Props = { + selectedRows: { [id: string]: boolean }, + disabled?: boolean, + onUpdateList: () => void, +} + +export const DeleteAction = ({ + selectedRows, + disabled, + onUpdateList, +}: Props) => { + const [isModalOpen, setIsModalOpen] = useState(false); + const dataEngine = useDataEngine(); + const { show: showAlert } = useAlert( + ({ message }) => message, + { critical: true }, + ); + + const { mutate: deleteEvents, isLoading } = useMutation( + () => dataEngine.mutate({ + resource: 'tracker?async=false&importStrategy=DELETE', + type: 'create', + data: { + events: Object + .keys(selectedRows) + .map(id => ({ event: id })), + }, + }), + { + onError: (error) => { + log.error(errorCreator('An error occurred while deleting the events')({ error })); + showAlert({ message: i18n.t('An error occurred while deleting the events') }); + }, + onSuccess: () => { + onUpdateList(); + setIsModalOpen(false); + }, + }, + ); + + return ( + <> + + + + + {isModalOpen && ( + setIsModalOpen(false)} + dataTest={'bulk-delete-events-dialog'} + > + + {i18n.t('Delete events')} + + + + {i18n.t('This cannot be undone. Are you sure you want to delete the selected events?')} + + + + + + + + + + )} + + ); +}; diff --git a/src/core_modules/capture-core/components/WorkingLists/EventWorkingListsCommon/EventBulkActions/Actions/index.js b/src/core_modules/capture-core/components/WorkingLists/EventWorkingListsCommon/EventBulkActions/Actions/index.js new file mode 100644 index 0000000000..d90e5aa2e7 --- /dev/null +++ b/src/core_modules/capture-core/components/WorkingLists/EventWorkingListsCommon/EventBulkActions/Actions/index.js @@ -0,0 +1,4 @@ +// @flow + +export { DeleteAction } from './DeleteAction/DeleteAction'; +export { CompleteAction } from './CompleteAction/CompleteAction'; diff --git a/src/core_modules/capture-core/components/WorkingLists/EventWorkingListsCommon/EventBulkActions/EventBulkActions.js b/src/core_modules/capture-core/components/WorkingLists/EventWorkingListsCommon/EventBulkActions/EventBulkActions.js new file mode 100644 index 0000000000..5311ca7780 --- /dev/null +++ b/src/core_modules/capture-core/components/WorkingLists/EventWorkingListsCommon/EventBulkActions/EventBulkActions.js @@ -0,0 +1,47 @@ +// @flow +import React from 'react'; +import { BulkActionBar } from '../../WorkingListsBase/BulkActionBar'; +import { CompleteAction, DeleteAction } from './Actions'; +import type { ProgramStage } from '../../../../metaData'; + +type Props = {| + selectedRows: { [key: string]: boolean }, + onClearSelection: () => void, + stage: ProgramStage, + onUpdateList: (disableClearSelection?: boolean) => void, + removeRowsFromSelection: (rows: Array) => void, +|} + +export const EventBulkActions = ({ + selectedRows, + stage, + onClearSelection, + removeRowsFromSelection, + onUpdateList, +}: Props) => { + const selectedRowsCount = Object.keys(selectedRows).length; + + if (!selectedRowsCount) { + return null; + } + + return ( + + + + + + ); +}; diff --git a/src/core_modules/capture-core/components/WorkingLists/EventWorkingListsCommon/EventBulkActions/index.js b/src/core_modules/capture-core/components/WorkingLists/EventWorkingListsCommon/EventBulkActions/index.js new file mode 100644 index 0000000000..492ab82c49 --- /dev/null +++ b/src/core_modules/capture-core/components/WorkingLists/EventWorkingListsCommon/EventBulkActions/index.js @@ -0,0 +1,3 @@ +// @flow + +export { EventBulkActions } from './EventBulkActions'; diff --git a/src/core_modules/capture-core/components/WorkingLists/TeiWorkingLists/ReduxProvider/TeiWorkingListsReduxProvider.container.js b/src/core_modules/capture-core/components/WorkingLists/TeiWorkingLists/ReduxProvider/TeiWorkingListsReduxProvider.container.js index 071103a706..cb10ad31d8 100644 --- a/src/core_modules/capture-core/components/WorkingLists/TeiWorkingLists/ReduxProvider/TeiWorkingListsReduxProvider.container.js +++ b/src/core_modules/capture-core/components/WorkingLists/TeiWorkingLists/ReduxProvider/TeiWorkingListsReduxProvider.container.js @@ -62,7 +62,7 @@ export const TeiWorkingListsReduxProvider = ({ } }, [selectedTemplateId, viewPreloaded, currentTemplateId, onSelectTemplate]); - const onSelectListRow = useCallback(({ id }) => { + const onClickListRow = useCallback(({ id }) => { const record = records[id]; const orgUnitIdParameter = orgUnitId || record.orgUnit?.id || record.programOwner; @@ -109,7 +109,7 @@ export const TeiWorkingListsReduxProvider = ({ currentTemplateId={currentTemplateId} viewPreloaded={viewPreloaded} templateSharingType={templateSharingType} - onSelectListRow={onSelectListRow} + onClickListRow={onClickListRow} onLoadTemplates={onLoadTemplates} program={program} programStageId={programStage} diff --git a/src/core_modules/capture-core/components/WorkingLists/TeiWorkingLists/ReduxProvider/teiWorkingListsReduxProvider.types.js b/src/core_modules/capture-core/components/WorkingLists/TeiWorkingLists/ReduxProvider/teiWorkingListsReduxProvider.types.js index f4637bf5cf..0b9a66d3b4 100644 --- a/src/core_modules/capture-core/components/WorkingLists/TeiWorkingLists/ReduxProvider/teiWorkingListsReduxProvider.types.js +++ b/src/core_modules/capture-core/components/WorkingLists/TeiWorkingLists/ReduxProvider/teiWorkingListsReduxProvider.types.js @@ -66,7 +66,7 @@ export type TeiWorkingListsReduxOutputProps = {| onClearFilters: ClearFilters, onLoadView: LoadView, onLoadTemplates: LoadTemplates, - onSelectListRow: SelectRow, + onClickListRow: SelectRow, onSelectRestMenuItem: SelectRestMenuItem, onSelectTemplate: SelectTemplate, onSetListColumnOrder: SetColumnOrder, diff --git a/src/core_modules/capture-core/components/WorkingLists/TeiWorkingLists/Setup/TeiWorkingListsSetup.component.js b/src/core_modules/capture-core/components/WorkingLists/TeiWorkingLists/Setup/TeiWorkingListsSetup.component.js index b59d0233cd..24f6b4d333 100644 --- a/src/core_modules/capture-core/components/WorkingLists/TeiWorkingLists/Setup/TeiWorkingListsSetup.component.js +++ b/src/core_modules/capture-core/components/WorkingLists/TeiWorkingLists/Setup/TeiWorkingListsSetup.component.js @@ -1,14 +1,14 @@ // @flow -import React, { useCallback, useMemo, useEffect, useRef } from 'react'; +import React, { useCallback, useEffect, useMemo, useRef } from 'react'; import type { Props } from './teiWorkingListsSetup.types'; import { WorkingListsBase } from '../../WorkingListsBase'; import { useDefaultColumnConfig, - useStaticTemplates, useFiltersOnly, - useProgramStageFilters, useInjectDataFetchingMetaToLoadList, useInjectDataFetchingMetaToUpdateList, + useProgramStageFilters, + useStaticTemplates, } from './hooks'; import { useColumns, useDataSource, useViewHasTemplateChanges } from '../../WorkingListsCommon'; import type { TeiWorkingListsColumnConfigs } from '../types'; @@ -55,6 +55,8 @@ export const TeiWorkingListsSetup = ({ onUpdateTemplate, onDeleteTemplate, forceUpdateOnMount, + customUpdateTrigger, + bulkActionBarComponent, ...passOnProps }: Props) => { const prevProgramStageId = useRef(programStageId); @@ -189,6 +191,7 @@ export const TeiWorkingListsSetup = ({ {...passOnProps} forceUpdateOnMount={forceUpdateOnMount} currentTemplate={useCurrentTemplate(templates, currentTemplateId)} + customUpdateTrigger={customUpdateTrigger} templates={templates} columns={columns} onAddTemplate={injectArgumentsForAddTemplate} @@ -217,6 +220,7 @@ export const TeiWorkingListsSetup = ({ filters={filters} sortById={sortById} sortByDirection={sortByDirection} + bulkActionBarComponent={bulkActionBarComponent} /> ); }; diff --git a/src/core_modules/capture-core/components/WorkingLists/TeiWorkingLists/Setup/teiWorkingListsSetup.types.js b/src/core_modules/capture-core/components/WorkingLists/TeiWorkingLists/Setup/teiWorkingListsSetup.types.js index 963367d643..426ab63241 100644 --- a/src/core_modules/capture-core/components/WorkingLists/TeiWorkingLists/Setup/teiWorkingListsSetup.types.js +++ b/src/core_modules/capture-core/components/WorkingLists/TeiWorkingLists/Setup/teiWorkingListsSetup.types.js @@ -12,6 +12,7 @@ import type { } from '../../WorkingListsCommon'; import type { FiltersData, WorkingListTemplates, SetTemplateSharingSettings } from '../../WorkingListsBase'; import type { LoadTeiView, TeiRecords } from '../types'; +import type { TrackerWorkingListsViewMenuSetupOutputProps } from '../ViewMenuSetup/TrackerWorkingListsViewMenuSetup.types'; type ExtractedProps = $ReadOnly<{| customColumnOrder?: CustomColumnOrder, @@ -35,7 +36,7 @@ type ExtractedProps = $ReadOnly<{| |}>; export type Props = $ReadOnly<{| - ...TeiWorkingListsReduxOutputProps, + ...TrackerWorkingListsViewMenuSetupOutputProps, ...ExtractedProps, |}>; diff --git a/src/core_modules/capture-core/components/WorkingLists/TeiWorkingLists/TrackedEntityBulkActions/Actions/CompleteAction/CompleteAction.js b/src/core_modules/capture-core/components/WorkingLists/TeiWorkingLists/TrackedEntityBulkActions/Actions/CompleteAction/CompleteAction.js new file mode 100644 index 0000000000..73543ad15a --- /dev/null +++ b/src/core_modules/capture-core/components/WorkingLists/TeiWorkingLists/TrackedEntityBulkActions/Actions/CompleteAction/CompleteAction.js @@ -0,0 +1,239 @@ +// @flow + +import i18n from '@dhis2/d2-i18n'; +import { withStyles } from '@material-ui/core'; +import React, { type ComponentType, useState } from 'react'; +import { + Button, + ButtonStrip, + Checkbox, + CircularLoader, + colors, + Modal, + ModalActions, + ModalContent, + ModalTitle, +} from '@dhis2/ui'; +import { ConditionalTooltip } from '../../../../../Tooltips/ConditionalTooltip'; +import { useCompleteBulkEnrollments } from './hooks/useCompleteBulkEnrollments'; +import { Widget } from '../../../../../Widget'; +import type { ProgramStage } from '../../../../../../metaData'; + +type Props = { + selectedRows: { [id: string]: any }, + programId: string, + stages: Map, + programDataWriteAccess: boolean, + onUpdateList: (disableClearSelections?: boolean) => void, + removeRowsFromSelection: (rows: Array) => void, +}; + +const styles = { + container: { + fontSize: '14px', + lineHeight: '19px', + color: colors.grey900, + display: 'flex', + flexDirection: 'column', + gap: '8px', + }, + spinner: { + display: 'flex', + justifyContent: 'center', + margin: '20px 0', + }, + errorContainer: { + padding: '0px 20px', + }, +}; + +const CompleteActionPlain = ({ + selectedRows, + programId, + stages, + programDataWriteAccess, + onUpdateList, + removeRowsFromSelection, + classes, +}) => { + const [modalIsOpen, setModalIsOpen] = useState(false); + const [completeEvents, setCompleteEvents] = useState(true); + const [openAccordion, setOpenAccordion] = useState(false); + const { + completeEnrollments, + enrollmentCounts, + isLoading, + validationError, + isCompleting, + hasPartiallyUploadedEnrollments, + isError: errorFetchingTrackedEntities, + } = useCompleteBulkEnrollments({ + selectedRows, + programId, + modalIsOpen, + stages, + onUpdateList, + removeRowsFromSelection, + }); + + const ModalTextContent = () => { + // If the data is still loading, show a spinner + if (!enrollmentCounts || isLoading) { + return ( +
+ +
+ ); + } + + // If there was an error importing the data, show an error message + if (validationError) { + const errors = (validationError: any)?.details?.validationReport?.errorReports; + return ( +
+ + {hasPartiallyUploadedEnrollments ? + i18n.t('Some enrollments were completed successfully, but there was an error while completing the rest. Please see the details below.') : + i18n.t('There was an error while completing the enrollments. Please see the details below.') + } + + + setOpenAccordion(true)} + onClose={() => setOpenAccordion(false)} + borderless + header={i18n.t('Details (Advanced)')} + > + +
    + {errors ? errors.map(errorReport => ( +
  • + {errorReport?.message} +
    • + )) : ( +
  • + {i18n.t('An unknown error occurred.')} +
    • + )} +
+ + +
+ ); + } + + if (errorFetchingTrackedEntities) { + return ( +
+ {i18n.t('An unexpected error occurred while fetching the enrollments. Please try again.')} +
+ ); + } + + // If there are no active enrollments, show a message and disable the complete button + if (enrollmentCounts.active === 0) { + return ( +
+ {i18n.t('There are currently no active enrollments in the selection. All enrollments are already completed or cancelled.')} +
+ ); + } + + return ( +
+ {i18n.t('This action will complete {{count}} active enrollment in your selection.', + { + count: enrollmentCounts.active, + defaultValue: 'This action will complete {{count}} active enrollment in your selection.', + defaultValue_plural: 'This action will complete {{count}} active enrollments in your selection.', + }) + } + + {' '} + + {enrollmentCounts.completed > 0 && + i18n.t('{{count}} enrollment already marked as completed will not be changed.', { + count: enrollmentCounts.completed, + defaultValue: '{{count}} enrollment already marked as completed will not be changed.', + defaultValue_plural: '{{count}} enrollments already marked as completed will not be changed.', + }) + } + + setCompleteEvents(prevState => !prevState)} + /> + +
+ ); + }; + + return ( + <> + + + + + {modalIsOpen && ( + setModalIsOpen(false)} + loading={isLoading} + dataTest={'bulk-complete-enrollments-dialog'} + > + + {validationError ? i18n.t('Error completing enrollments') + : i18n.t('Complete enrollments')} + + + + + + + + + + {!validationError && ( + + + + )} + + + + )} + + ); +}; + +export const CompleteAction: ComponentType<$Diff> = withStyles(styles)(CompleteActionPlain); diff --git a/src/core_modules/capture-core/components/WorkingLists/TeiWorkingLists/TrackedEntityBulkActions/Actions/CompleteAction/hooks/useCompleteBulkEnrollments.js b/src/core_modules/capture-core/components/WorkingLists/TeiWorkingLists/TrackedEntityBulkActions/Actions/CompleteAction/hooks/useCompleteBulkEnrollments.js new file mode 100644 index 0000000000..a1bcbf350d --- /dev/null +++ b/src/core_modules/capture-core/components/WorkingLists/TeiWorkingLists/TrackedEntityBulkActions/Actions/CompleteAction/hooks/useCompleteBulkEnrollments.js @@ -0,0 +1,267 @@ +// @flow + +import { useEffect, useMemo } from 'react'; +import { useAlert, useConfig, useDataEngine } from '@dhis2/app-runtime'; +import { useMutation, useQueryClient } from 'react-query'; +import i18n from '@dhis2/d2-i18n'; +import log from 'loglevel'; +import { ReactQueryAppNamespace, useApiDataQuery } from '../../../../../../../utils/reactQueryHelpers'; +import { handleAPIResponse, REQUESTED_ENTITIES } from '../../../../../../../utils/api'; +import { errorCreator, FEATURES, hasAPISupportForFeature } from '../../../../../../../../capture-core-utils'; +import type { ProgramStage } from '../../../../../../../metaData'; + +type Props = { + selectedRows: { [id: string]: any }, + programId: string, + stages: Map, + modalIsOpen: boolean, + onUpdateList: (disableClearSelections?: boolean) => void, + removeRowsFromSelection: (rows: Array) => void, +} + +const validateEnrollments = async ({ dataEngine, enrollments }) => dataEngine.mutate({ + resource: 'tracker?async=false&importStrategy=UPDATE&importMode=VALIDATE', + type: 'create', + data: () => ({ enrollments }), +}); + +const importValidEnrollments = async ({ dataEngine, enrollments }) => dataEngine.mutate({ + resource: 'tracker?async=false&importStrategy=UPDATE&importMode=COMMIT', + type: 'create', + data: () => ({ enrollments }), +}); + +const formatServerPayload = (trackedEntities, completeEvents, stages) => { + const enrollments = trackedEntities?.activeEnrollments ?? []; + let updatedEnrollments; + + if (completeEvents) { + updatedEnrollments = enrollments.map(enrollment => ({ + ...enrollment, + status: 'COMPLETED', + events: enrollment.events + .filter((event) => { + const access = stages.get(event.programStage)?.access?.data?.write; + const isEventActive = event.status === 'ACTIVE'; + return access && isEventActive; + }) + .map(event => ({ ...event, status: 'COMPLETED' })), + })); + } else { + updatedEnrollments = enrollments.map(enrollment => ({ + ...enrollment, + status: 'COMPLETED', + events: [], + })); + } + + return updatedEnrollments; +}; + +const filterValidEnrollments = (enrollments, errors) => { + const invalidEnrollments = new Set(); + + errors.forEach((apiErrorMessage) => { + if (apiErrorMessage.trackerType === 'ENROLLMENT') { + invalidEnrollments.add(apiErrorMessage.uid); + } else if (apiErrorMessage.trackerType === 'EVENT') { + const invalidEnrollment = enrollments.find(enrollment => + enrollment.events.some(event => event.event === apiErrorMessage.uid), + ); + + if (invalidEnrollment) { + invalidEnrollments.add(invalidEnrollment.enrollment); + } + } + }); + + return enrollments.filter( + enrollment => !invalidEnrollments.has(enrollment.enrollment), + ); +}; + + +export const useCompleteBulkEnrollments = ({ + selectedRows, + programId, + stages, + modalIsOpen, + removeRowsFromSelection, + onUpdateList, +}: Props) => { + const { serverVersion: { minor } } = useConfig(); + const dataEngine = useDataEngine(); + const queryClient = useQueryClient(); + const { show: showAlert } = useAlert( + ({ message }) => message, + { critical: true }, + ); + + const removeQueries = () => { + queryClient.removeQueries( + [ + ReactQueryAppNamespace, + 'WorkingLists', + 'BulkActionBar', + 'CompleteAction', + 'trackedEntities', + ], + ); + }; + + const { + data: trackedEntities, + isError: isTrackedEntitiesError, + isLoading: isFetchingTrackedEntities, + } = useApiDataQuery( + ['WorkingLists', 'BulkActionBar', 'CompleteAction', 'trackedEntities', selectedRows], + { + resource: 'tracker/trackedEntities', + params: () => { + const supportForFeature = hasAPISupportForFeature(minor, FEATURES.newEntityFilterQueryParam); + const filterQueryParam: string = supportForFeature ? 'trackedEntities' : 'trackedEntity'; + + return ({ + program: programId, + fields: 'trackedEntity,enrollments[*,!attributes,!completedBy,!completedAt,!relationships,events[*,!dataValues,!completedAt,!completedBy,!relationships]]', + [filterQueryParam]: Object.keys(selectedRows).join(supportForFeature ? ',' : ';'), + }); + }, + }, + { + enabled: modalIsOpen && Object.keys(selectedRows).length > 0, + select: (data: any) => { + const apiTrackedEntities = handleAPIResponse(REQUESTED_ENTITIES.trackedEntities, data); + if (!apiTrackedEntities) return null; + + const { activeEnrollments, completedEnrollments } = apiTrackedEntities + .flatMap(trackedEntity => trackedEntity.enrollments) + .reduce((acc, enrollment) => { + if (enrollment.status === 'ACTIVE') { + acc.activeEnrollments.push(enrollment); + } else { + acc.completedEnrollments.push(enrollment); + } + + return acc; + }, { activeEnrollments: [], completedEnrollments: [] }); + + return { + activeEnrollments, + completedEnrollments, + }; + }, + }, + ); + + const { + mutate: importEnrollments, + isLoading: isImportingEnrollments, + } = useMutation( + ({ enrollments }: any) => importValidEnrollments({ dataEngine, enrollments }), + { + onSuccess: () => { + onUpdateList(); + removeQueries(); + }, + onError: (serverResponse, variables) => { + removeQueries(); + showAlert({ message: i18n.t('An error occurred when completing the enrollments') }); + log.error( + errorCreator('An error occurred when completing enrollments')({ + serverResponse, + variables, + }), + ); + }, + }, + ); + + const { + mutate: importPartialEnrollments, + isLoading: isImportingPartialEnrollments, + isSuccess: hasPartiallyUploadedEnrollments, + } = useMutation( + ({ enrollments }: any) => importValidEnrollments({ dataEngine, enrollments }), + { + onSuccess: (serverResponse, { enrollments }) => { + const enrollmentIds = enrollments.map(enrollment => enrollment.trackedEntity); + removeRowsFromSelection(enrollmentIds); + removeQueries(); + onUpdateList(true); + }, + onError: (serverResponse, variables) => { + showAlert({ message: i18n.t('An error occurred when completing the enrollments') }); + log.error( + errorCreator('An error occurred when completing enrollments')({ + serverResponse, + variables, + }), + ); + }, + }, + ); + + const { + mutate: onValidateEnrollments, + isLoading: isCompletingEnrollments, + error: validationError, + reset: resetCompleteEnrollments, + } = useMutation( + ({ enrollments }: any) => validateEnrollments({ + dataEngine, + enrollments, + }), + { + onSuccess: (serverResponse: any, { enrollments }: any) => { + importEnrollments({ enrollments }); + }, + onError: (serverResponse: any, { enrollments }: any) => { + const errors = serverResponse?.details?.validationReport?.errorReports; + if (!errors) { + log.error( + errorCreator('An unknown error occurred when completing enrollments', + )({ + serverResponse, + enrollments, + })); + showAlert({ message: i18n.t('An unknown error occurred when completing enrollments') }); + return; + } + const validEnrollments = filterValidEnrollments(enrollments, errors); + + if (validEnrollments.length === 0) { + return; + } + + importPartialEnrollments({ enrollments: validEnrollments }); + }, + }, + ); + + const enrollmentCounts = useMemo(() => ({ + active: trackedEntities?.activeEnrollments?.length ?? 0, + completed: trackedEntities?.completedEnrollments?.length ?? 0, + }), [trackedEntities]); + + useEffect(() => { + if (!modalIsOpen) { + resetCompleteEnrollments(); + } + }, [modalIsOpen, resetCompleteEnrollments]); + + const onStartCompleteEnrollments = ({ completeEvents }: { completeEvents: boolean }) => { + const enrollments = formatServerPayload(trackedEntities, completeEvents, stages); + onValidateEnrollments({ completeEvents, enrollments }); + }; + + return { + completeEnrollments: onStartCompleteEnrollments, + enrollmentCounts, + isLoading: isFetchingTrackedEntities, + isError: isTrackedEntitiesError, + validationError, + isCompleting: isImportingEnrollments || isImportingPartialEnrollments || isCompletingEnrollments, + hasPartiallyUploadedEnrollments, + }; +}; diff --git a/src/core_modules/capture-core/components/WorkingLists/TeiWorkingLists/TrackedEntityBulkActions/Actions/CompleteAction/index.js b/src/core_modules/capture-core/components/WorkingLists/TeiWorkingLists/TrackedEntityBulkActions/Actions/CompleteAction/index.js new file mode 100644 index 0000000000..0c51a6978f --- /dev/null +++ b/src/core_modules/capture-core/components/WorkingLists/TeiWorkingLists/TrackedEntityBulkActions/Actions/CompleteAction/index.js @@ -0,0 +1,3 @@ +// @flow + +export { CompleteAction } from './CompleteAction'; diff --git a/src/core_modules/capture-core/components/WorkingLists/TeiWorkingLists/TrackedEntityBulkActions/Actions/DeleteEnrollmentsAction/DeleteEnrollmentsAction.js b/src/core_modules/capture-core/components/WorkingLists/TeiWorkingLists/TrackedEntityBulkActions/Actions/DeleteEnrollmentsAction/DeleteEnrollmentsAction.js new file mode 100644 index 0000000000..7e0a4bcb68 --- /dev/null +++ b/src/core_modules/capture-core/components/WorkingLists/TeiWorkingLists/TrackedEntityBulkActions/Actions/DeleteEnrollmentsAction/DeleteEnrollmentsAction.js @@ -0,0 +1,56 @@ +// @flow +import React, { useState } from 'react'; +import i18n from '@dhis2/d2-i18n'; +import { Button } from '@dhis2/ui'; +import { useAuthority } from '../../../../../../utils/userInfo/useAuthority'; +import { EnrollmentDeleteModal } from './EnrollmentDeleteModal'; +import { ConditionalTooltip } from '../../../../../Tooltips/ConditionalTooltip'; + +type Props = { + selectedRows: { [id: string]: boolean }, + programDataWriteAccess: boolean, + programId: string, + onUpdateList: () => void, +} + +const CASCADE_DELETE_TEI_AUTHORITY = 'F_ENROLLMENT_CASCADE_DELETE'; + +export const DeleteEnrollmentsAction = ({ + selectedRows, + programDataWriteAccess, + programId, + onUpdateList, +}: Props) => { + const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false); + const { hasAuthority } = useAuthority({ authority: CASCADE_DELETE_TEI_AUTHORITY }); + + if (!hasAuthority) { + return null; + } + + return ( + <> + + + + + {isDeleteDialogOpen && ( + + )} + + ); +}; diff --git a/src/core_modules/capture-core/components/WorkingLists/TeiWorkingLists/TrackedEntityBulkActions/Actions/DeleteEnrollmentsAction/EnrollmentDeleteModal/CustomCheckbox/CustomCheckbox.js b/src/core_modules/capture-core/components/WorkingLists/TeiWorkingLists/TrackedEntityBulkActions/Actions/DeleteEnrollmentsAction/EnrollmentDeleteModal/CustomCheckbox/CustomCheckbox.js new file mode 100644 index 0000000000..4c1d5f255e --- /dev/null +++ b/src/core_modules/capture-core/components/WorkingLists/TeiWorkingLists/TrackedEntityBulkActions/Actions/DeleteEnrollmentsAction/EnrollmentDeleteModal/CustomCheckbox/CustomCheckbox.js @@ -0,0 +1,80 @@ +// @flow +import type { ComponentType } from 'react'; +import React from 'react'; +import cx from 'classnames'; +import { withStyles } from '@material-ui/core'; +import { Checkbox } from '@dhis2/ui'; + +type Props = { + label: string, + checked: boolean, + disabled?: boolean, + id: string, + onChange: (status: string) => void, + dataTest?: string, +} + +const styles = { + checkboxButton: { + // Reset default browser styles + appearance: 'none', + background: 'none', + font: 'inherit', + cursor: 'pointer', + outline: 'inherit', + + // Custom styles + display: 'flex', + alignItems: 'center', + width: '100%', + padding: '16px', + border: '2px solid #E2E8F0', + borderRadius: '6px', + marginBottom: '8px', + transition: 'all 0.2s', + textAlign: 'left', + backgroundColor: 'white', + '&:hover': { + backgroundColor: '#F7FAFC', + }, + '&.checked': { + borderColor: '#38A169', + }, + '&.disabled': { + borderColor: '#E2E8F0', + backgroundColor: '#F7FAFC', + cursor: 'not-allowed', + }, + }, +}; + +const CustomCheckboxPlain = ({ + checked, + id, + onChange, + label, + disabled, + dataTest, + classes, +}) => ( + +); + +export const CustomCheckbox: ComponentType<$Diff> = withStyles(styles)(CustomCheckboxPlain); diff --git a/src/core_modules/capture-core/components/WorkingLists/TeiWorkingLists/TrackedEntityBulkActions/Actions/DeleteEnrollmentsAction/EnrollmentDeleteModal/CustomCheckbox/index.js b/src/core_modules/capture-core/components/WorkingLists/TeiWorkingLists/TrackedEntityBulkActions/Actions/DeleteEnrollmentsAction/EnrollmentDeleteModal/CustomCheckbox/index.js new file mode 100644 index 0000000000..e981c34310 --- /dev/null +++ b/src/core_modules/capture-core/components/WorkingLists/TeiWorkingLists/TrackedEntityBulkActions/Actions/DeleteEnrollmentsAction/EnrollmentDeleteModal/CustomCheckbox/index.js @@ -0,0 +1,3 @@ +// @flow + +export { CustomCheckbox } from './CustomCheckbox'; diff --git a/src/core_modules/capture-core/components/WorkingLists/TeiWorkingLists/TrackedEntityBulkActions/Actions/DeleteEnrollmentsAction/EnrollmentDeleteModal/EnrollmentDeleteModal.js b/src/core_modules/capture-core/components/WorkingLists/TeiWorkingLists/TrackedEntityBulkActions/Actions/DeleteEnrollmentsAction/EnrollmentDeleteModal/EnrollmentDeleteModal.js new file mode 100644 index 0000000000..4d00490f6e --- /dev/null +++ b/src/core_modules/capture-core/components/WorkingLists/TeiWorkingLists/TrackedEntityBulkActions/Actions/DeleteEnrollmentsAction/EnrollmentDeleteModal/EnrollmentDeleteModal.js @@ -0,0 +1,188 @@ +// @flow +import React from 'react'; +import { withStyles } from '@material-ui/core'; +import { Button, ButtonStrip, CircularLoader, Modal, ModalActions, ModalContent, ModalTitle } from '@dhis2/ui'; +import i18n from '@dhis2/d2-i18n'; +import { useDeleteEnrollments } from '../hooks/useDeleteEnrollments'; +import { CustomCheckbox } from './CustomCheckbox'; + +type Props = { + selectedRows: { [id: string]: boolean }, + programId: string, + onUpdateList: () => void, + setIsDeleteDialogOpen: (open: boolean) => void, + classes: Object, +} + +const styles = { + modalContent: { + display: 'flex', + flexDirection: 'column', + gap: '10px', + fontSize: '16px', + }, + loadingContainer: { + display: 'flex', + justifyContent: 'center', + }, +}; + +const EnrollmentDeleteModalPlain = ({ + selectedRows, + programId, + onUpdateList, + setIsDeleteDialogOpen, + classes, +}: Props) => { + const { + deleteEnrollments, + isDeletingEnrollments, + enrollmentCounts, + isLoadingEnrollments, + statusToDelete, + updateStatusToDelete, + numberOfEnrollmentsToDelete, + isEnrollmentsError, + } = useDeleteEnrollments({ + selectedRows, + programId, + onUpdateList, + setIsDeleteDialogOpen, + }); + + if (isEnrollmentsError) { + return ( + setIsDeleteDialogOpen(false)} + small + > + + {i18n.t('Delete selected enrollments')} + + + +
+ {i18n.t('An error occurred while loading the selected enrollments. Please try again.')} +
+ + + + + + + + + ); + } + + if (isLoadingEnrollments || !enrollmentCounts) { + return ( + setIsDeleteDialogOpen(false)} + > + + {i18n.t('Delete selected enrollments')} + + + + + + + + + + + + + + + ); + } + + return ( + setIsDeleteDialogOpen(false)} + dataTest={'bulk-delete-enrollments-dialog'} + > + + {i18n.t('Delete selected enrollments')} + + + +
+
+ {i18n.t('This action will permanently delete the selected enrollments, including all associated data and events.')} +
+ +
+ {i18n.t('Please select which enrollment statuses you want to delete:')} +
+ +
+ + + + + +
+
+ + + + + + + + + + + ); +}; + +export const EnrollmentDeleteModal = withStyles(styles)(EnrollmentDeleteModalPlain); diff --git a/src/core_modules/capture-core/components/WorkingLists/TeiWorkingLists/TrackedEntityBulkActions/Actions/DeleteEnrollmentsAction/EnrollmentDeleteModal/index.js b/src/core_modules/capture-core/components/WorkingLists/TeiWorkingLists/TrackedEntityBulkActions/Actions/DeleteEnrollmentsAction/EnrollmentDeleteModal/index.js new file mode 100644 index 0000000000..7dbb8bad62 --- /dev/null +++ b/src/core_modules/capture-core/components/WorkingLists/TeiWorkingLists/TrackedEntityBulkActions/Actions/DeleteEnrollmentsAction/EnrollmentDeleteModal/index.js @@ -0,0 +1,3 @@ +// @flow + +export { EnrollmentDeleteModal } from './EnrollmentDeleteModal'; diff --git a/src/core_modules/capture-core/components/WorkingLists/TeiWorkingLists/TrackedEntityBulkActions/Actions/DeleteEnrollmentsAction/hooks/useDeleteEnrollments.js b/src/core_modules/capture-core/components/WorkingLists/TeiWorkingLists/TrackedEntityBulkActions/Actions/DeleteEnrollmentsAction/hooks/useDeleteEnrollments.js new file mode 100644 index 0000000000..fa71ff5eb4 --- /dev/null +++ b/src/core_modules/capture-core/components/WorkingLists/TeiWorkingLists/TrackedEntityBulkActions/Actions/DeleteEnrollmentsAction/hooks/useDeleteEnrollments.js @@ -0,0 +1,159 @@ +// @flow +import { useCallback, useMemo, useState } from 'react'; +import log from 'loglevel'; +import i18n from '@dhis2/d2-i18n'; +import { useMutation, useQueryClient } from 'react-query'; +import { useAlert, useConfig, useDataEngine } from '@dhis2/app-runtime'; +import { handleAPIResponse, REQUESTED_ENTITIES } from '../../../../../../../utils/api'; +import { ReactQueryAppNamespace, useApiDataQuery } from '../../../../../../../utils/reactQueryHelpers'; +import { errorCreator, FEATURES, hasAPISupportForFeature } from '../../../../../../../../capture-core-utils'; + +type Props = { + selectedRows: { [id: string]: boolean }, + programId: string, + onUpdateList: () => void, + setIsDeleteDialogOpen: (open: boolean) => void, +} + +const QueryKey = ['WorkingLists', 'BulkActionBar', 'DeleteEnrollmentsAction', 'trackedEntities']; + +export const useDeleteEnrollments = ({ + selectedRows, + programId, + onUpdateList, + setIsDeleteDialogOpen, +}: Props) => { + const { serverVersion: { minor } } = useConfig(); + const queryClient = useQueryClient(); + const [statusToDelete, setStatusToDelete] = useState({ + active: true, + completed: true, + cancelled: true, + }); + const dataEngine = useDataEngine(); + const { show: showAlert } = useAlert( + ({ message }) => message, + { critical: true }, + ); + + const updateStatusToDelete = useCallback((status: string) => { + setStatusToDelete(prevStatus => ({ + ...prevStatus, + [status]: !prevStatus[status], + })); + }, []); + + const { + data: enrollments, + isLoading: isLoadingEnrollments, + isError: isEnrollmentsError, + } = useApiDataQuery( + [...QueryKey, selectedRows], + { + resource: 'tracker/trackedEntities', + params: () => { + const supportForFeature = hasAPISupportForFeature(minor, FEATURES.newEntityFilterQueryParam); + const filterQueryParam: string = supportForFeature ? 'trackedEntities' : 'trackedEntity'; + + return ({ + fields: 'trackedEntity,enrollments[enrollment,program,status]', + [filterQueryParam]: Object.keys(selectedRows).join(supportForFeature ? ',' : ';'), + program: programId, + }); + }, + }, + { + enabled: Object.keys(selectedRows).length > 0, + select: (data: any) => { + const apiTrackedEntities = handleAPIResponse(REQUESTED_ENTITIES.trackedEntities, data); + if (!apiTrackedEntities) return []; + + return apiTrackedEntities + .flatMap(apiTrackedEntity => apiTrackedEntity.enrollments); + }, + }, + ); + + const { mutate: deleteEnrollments, isLoading: isDeletingEnrollments } = useMutation( + () => dataEngine.mutate({ + resource: 'tracker?async=false&importStrategy=DELETE', + type: 'create', + data: { + enrollments: enrollments + // $FlowFixMe - business logic dictates that enrollments is not undefined at this point + .filter(({ status }) => status && statusToDelete[status.toLowerCase()]) + .map(({ enrollment }) => ({ enrollment })), + }, + }), + { + onError: (error) => { + log.error(errorCreator('An error occurred when deleting enrollments')({ error })); + showAlert({ message: i18n.t('An error occurred when deleting enrollments') }); + }, + onSuccess: () => { + queryClient.removeQueries([ReactQueryAppNamespace, ...QueryKey]); + onUpdateList(); + setIsDeleteDialogOpen(false); + }, + }, + ); + + const enrollmentCounts = useMemo(() => { + if (!enrollments) { + return null; + } + + const { + activeEnrollments, + completedEnrollments, + cancelledEnrollments, + } = enrollments.reduce((acc, enrollment) => { + if (enrollment.status === 'ACTIVE') { + acc.activeEnrollments += 1; + } else if (enrollment.status === 'CANCELLED') { + acc.cancelledEnrollments += 1; + } else { + acc.completedEnrollments += 1; + } + + return acc; + }, { activeEnrollments: 0, completedEnrollments: 0, cancelledEnrollments: 0 }); + + return { + active: activeEnrollments, + completed: completedEnrollments, + cancelled: cancelledEnrollments, + total: enrollments.length, + }; + }, [enrollments]); + + const numberOfEnrollmentsToDelete = useMemo(() => { + if (!enrollments || !enrollmentCounts) { + return 0; + } + + let total = 0; + if (statusToDelete.active) { + total += enrollmentCounts.active; + } + if (statusToDelete.completed) { + total += enrollmentCounts.completed; + } + if (statusToDelete.cancelled) { + total += enrollmentCounts.cancelled; + } + + return total; + }, [enrollments, enrollmentCounts, statusToDelete]); + + return { + deleteEnrollments, + isDeletingEnrollments, + isLoadingEnrollments, + isEnrollmentsError, + enrollmentCounts, + statusToDelete, + updateStatusToDelete, + numberOfEnrollmentsToDelete, + }; +}; diff --git a/src/core_modules/capture-core/components/WorkingLists/TeiWorkingLists/TrackedEntityBulkActions/Actions/DeleteEnrollmentsAction/index.js b/src/core_modules/capture-core/components/WorkingLists/TeiWorkingLists/TrackedEntityBulkActions/Actions/DeleteEnrollmentsAction/index.js new file mode 100644 index 0000000000..801079a513 --- /dev/null +++ b/src/core_modules/capture-core/components/WorkingLists/TeiWorkingLists/TrackedEntityBulkActions/Actions/DeleteEnrollmentsAction/index.js @@ -0,0 +1,3 @@ +// @flow + +export { DeleteEnrollmentsAction } from './DeleteEnrollmentsAction'; diff --git a/src/core_modules/capture-core/components/WorkingLists/TeiWorkingLists/TrackedEntityBulkActions/Actions/DeleteTeiAction/DeleteTeiAction.js b/src/core_modules/capture-core/components/WorkingLists/TeiWorkingLists/TrackedEntityBulkActions/Actions/DeleteTeiAction/DeleteTeiAction.js new file mode 100644 index 0000000000..12ffed180b --- /dev/null +++ b/src/core_modules/capture-core/components/WorkingLists/TeiWorkingLists/TrackedEntityBulkActions/Actions/DeleteTeiAction/DeleteTeiAction.js @@ -0,0 +1,87 @@ +// @flow +import React, { useState } from 'react'; +import i18n from '@dhis2/d2-i18n'; +import { Button, ButtonStrip, Modal, ModalActions, ModalContent, ModalTitle } from '@dhis2/ui'; +import { useAuthority } from '../../../../../../utils/userInfo/useAuthority'; +import { useCascadeDeleteTei } from './hooks/useCascadeDeleteTei'; + +type Props = { + selectedRows: { [id: string]: boolean }, + selectedRowsCount: number, + trackedEntityName: string, + onUpdateList: () => void, +} + +const CASCADE_DELETE_TEI_AUTHORITY = 'F_TEI_CASCADE_DELETE'; + + +// TODO - Add program and TEType access checks before adding action to prod +export const DeleteTeiAction = ({ + selectedRows, + selectedRowsCount, + trackedEntityName, + onUpdateList, +}: Props) => { + const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false); + const { hasAuthority } = useAuthority({ authority: CASCADE_DELETE_TEI_AUTHORITY }); + const { deleteTeis, isLoading } = useCascadeDeleteTei({ + selectedRows, + setIsDeleteDialogOpen, + onUpdateList, + }); + + if (!hasAuthority) { + return null; + } + + return ( + <> + + + {isDeleteDialogOpen && ( + setIsDeleteDialogOpen(false)} + > + + {i18n.t('Delete {{count}} {{ trackedEntityName }}', { + count: selectedRowsCount, + trackedEntityName: trackedEntityName.toLowerCase(), + defaultValue: 'Delete {{count}} {{ trackedEntityName }}', + defaultValue_plural: 'Delete {{count}} {{ trackedEntityName }}', + })} + + + + {i18n.t('Deleting records will also delete any associated enrollments and events. This cannot be undone. Are you sure you want to delete?')} + + + + + + + + + + )} + + ); +}; diff --git a/src/core_modules/capture-core/components/WorkingLists/TeiWorkingLists/TrackedEntityBulkActions/Actions/DeleteTeiAction/hooks/useCascadeDeleteTei.js b/src/core_modules/capture-core/components/WorkingLists/TeiWorkingLists/TrackedEntityBulkActions/Actions/DeleteTeiAction/hooks/useCascadeDeleteTei.js new file mode 100644 index 0000000000..1ae0862e9d --- /dev/null +++ b/src/core_modules/capture-core/components/WorkingLists/TeiWorkingLists/TrackedEntityBulkActions/Actions/DeleteTeiAction/hooks/useCascadeDeleteTei.js @@ -0,0 +1,51 @@ +// @flow +import log from 'loglevel'; +import i18n from '@dhis2/d2-i18n'; +import { useAlert, useDataEngine } from '@dhis2/app-runtime'; +import { useMutation } from 'react-query'; +import { errorCreator } from '../../../../../../../../capture-core-utils'; + +type Props = { + selectedRows: { [id: string]: boolean }, + setIsDeleteDialogOpen: (open: boolean) => void, + onUpdateList: () => void, +} + +export const useCascadeDeleteTei = ({ + selectedRows, + setIsDeleteDialogOpen, + onUpdateList, +}: Props) => { + const dataEngine = useDataEngine(); + const { show: showAlert } = useAlert( + ({ message }) => message, + { critical: true }, + ); + + const { mutate: deleteTeis, isLoading } = useMutation( + () => dataEngine.mutate({ + resource: 'tracker?async=false&importStrategy=DELETE', + type: 'create', + data: { + trackedEntities: Object + .keys(selectedRows) + .map(id => ({ trackedEntity: id })), + }, + }), + { + onError: (error) => { + log.error(errorCreator('An error occurred while deleting the tracked entities')({ error })); + showAlert({ message: i18n.t('An error occurred while deleting the records') }); + }, + onSuccess: () => { + onUpdateList(); + setIsDeleteDialogOpen(false); + }, + }, + ); + + return { + deleteTeis, + isLoading, + }; +}; diff --git a/src/core_modules/capture-core/components/WorkingLists/TeiWorkingLists/TrackedEntityBulkActions/Actions/DeleteTeiAction/index.js b/src/core_modules/capture-core/components/WorkingLists/TeiWorkingLists/TrackedEntityBulkActions/Actions/DeleteTeiAction/index.js new file mode 100644 index 0000000000..e2522d77d4 --- /dev/null +++ b/src/core_modules/capture-core/components/WorkingLists/TeiWorkingLists/TrackedEntityBulkActions/Actions/DeleteTeiAction/index.js @@ -0,0 +1,3 @@ +// @flow + +export { DeleteTeiAction } from './DeleteTeiAction'; diff --git a/src/core_modules/capture-core/components/WorkingLists/TeiWorkingLists/TrackedEntityBulkActions/Actions/index.js b/src/core_modules/capture-core/components/WorkingLists/TeiWorkingLists/TrackedEntityBulkActions/Actions/index.js new file mode 100644 index 0000000000..d8e44d744b --- /dev/null +++ b/src/core_modules/capture-core/components/WorkingLists/TeiWorkingLists/TrackedEntityBulkActions/Actions/index.js @@ -0,0 +1,4 @@ +// @flow + +export { CompleteAction } from './CompleteAction'; +export { DeleteTeiAction } from './DeleteTeiAction'; diff --git a/src/core_modules/capture-core/components/WorkingLists/TeiWorkingLists/TrackedEntityBulkActions/TrackedEntityBulkActions.component.js b/src/core_modules/capture-core/components/WorkingLists/TeiWorkingLists/TrackedEntityBulkActions/TrackedEntityBulkActions.component.js new file mode 100644 index 0000000000..2b2002ce53 --- /dev/null +++ b/src/core_modules/capture-core/components/WorkingLists/TeiWorkingLists/TrackedEntityBulkActions/TrackedEntityBulkActions.component.js @@ -0,0 +1,51 @@ +// @flow +import React from 'react'; +import { BulkActionBar } from '../../WorkingListsBase/BulkActionBar'; +import { CompleteAction } from './Actions'; +import type { Props } from './TrackedEntityBulkActions.types'; +import { DeleteEnrollmentsAction } from './Actions/DeleteEnrollmentsAction'; + +export const TrackedEntityBulkActionsComponent = ({ + selectedRows, + programId, + stages, + programDataWriteAccess, + onClearSelection, + onUpdateList, + removeRowsFromSelection, +}: Props) => { + const selectedRowsCount = Object.keys(selectedRows).length; + + if (!selectedRowsCount) { + return null; + } + + return ( + + + + + + {/* */} + + ); +}; diff --git a/src/core_modules/capture-core/components/WorkingLists/TeiWorkingLists/TrackedEntityBulkActions/TrackedEntityBulkActions.container.js b/src/core_modules/capture-core/components/WorkingLists/TeiWorkingLists/TrackedEntityBulkActions/TrackedEntityBulkActions.container.js new file mode 100644 index 0000000000..3cd769eb56 --- /dev/null +++ b/src/core_modules/capture-core/components/WorkingLists/TeiWorkingLists/TrackedEntityBulkActions/TrackedEntityBulkActions.container.js @@ -0,0 +1,40 @@ +// @flow +import React from 'react'; +import log from 'loglevel'; +import { EventBulkActions } from '../../EventWorkingListsCommon/EventBulkActions'; +import { TrackedEntityBulkActionsComponent } from './TrackedEntityBulkActions.component'; +import type { ContainerProps } from './TrackedEntityBulkActions.types'; +import { errorCreator } from '../../../../../capture-core-utils'; + +export const TrackedEntityBulkActions = ({ + programStageId, + stages, + programDataWriteAccess, + programId, + ...passOnProps +}: ContainerProps) => { + if (programStageId) { + const stage = stages.get(programStageId); + + if (!stage) { + log.error(errorCreator('Program stage not found')({ programStageId, stages })); + throw new Error('Program stage not found'); + } + + return ( + + ); + } + + return ( + + ); +}; diff --git a/src/core_modules/capture-core/components/WorkingLists/TeiWorkingLists/TrackedEntityBulkActions/TrackedEntityBulkActions.types.js b/src/core_modules/capture-core/components/WorkingLists/TeiWorkingLists/TrackedEntityBulkActions/TrackedEntityBulkActions.types.js new file mode 100644 index 0000000000..37f18324fa --- /dev/null +++ b/src/core_modules/capture-core/components/WorkingLists/TeiWorkingLists/TrackedEntityBulkActions/TrackedEntityBulkActions.types.js @@ -0,0 +1,17 @@ +// @flow +import type { ProgramStage } from '../../../../metaData'; + +export type Props = {| + selectedRows: { [key: string]: boolean }, + programId: string, + stages: Map, + onClearSelection: () => void, + programDataWriteAccess: boolean, + onUpdateList: () => void, + removeRowsFromSelection: (rows: Array) => void, +|} + +export type ContainerProps = {| + ...Props, + programStageId: ?string, +|} diff --git a/src/core_modules/capture-core/components/WorkingLists/TeiWorkingLists/TrackedEntityBulkActions/index.js b/src/core_modules/capture-core/components/WorkingLists/TeiWorkingLists/TrackedEntityBulkActions/index.js new file mode 100644 index 0000000000..47f38f1e9a --- /dev/null +++ b/src/core_modules/capture-core/components/WorkingLists/TeiWorkingLists/TrackedEntityBulkActions/index.js @@ -0,0 +1,3 @@ +// @flow + +export { TrackedEntityBulkActions } from './TrackedEntityBulkActions.container'; diff --git a/src/core_modules/capture-core/components/WorkingLists/TeiWorkingLists/ViewMenuSetup/TrackerWorkingListsViewMenuSetup.component.js b/src/core_modules/capture-core/components/WorkingLists/TeiWorkingLists/ViewMenuSetup/TrackerWorkingListsViewMenuSetup.component.js index ba35786506..ca74b7a97c 100644 --- a/src/core_modules/capture-core/components/WorkingLists/TeiWorkingLists/ViewMenuSetup/TrackerWorkingListsViewMenuSetup.component.js +++ b/src/core_modules/capture-core/components/WorkingLists/TeiWorkingLists/ViewMenuSetup/TrackerWorkingListsViewMenuSetup.component.js @@ -1,5 +1,6 @@ // @flow -import React, { useState, useMemo, useCallback } from 'react'; +import React, { useCallback, useMemo, useState } from 'react'; +import { v4 as uuid } from 'uuid'; import { useSelector } from 'react-redux'; import { useDataEngine } from '@dhis2/app-runtime'; import { makeQuerySingleResource } from 'capture-core/utils/api'; @@ -11,15 +12,29 @@ import { DownloadDialog } from '../../WorkingListsCommon'; import { computeDownloadRequest } from './downloadRequest'; import { convertToClientConfig } from '../helpers/TEIFilters'; import { FEATURES, useFeature } from '../../../../../capture-core-utils'; +import { useSelectedRowsController } from '../../WorkingListsBase/BulkActionBar'; +import { TrackedEntityBulkActions } from '../TrackedEntityBulkActions'; export const TrackerWorkingListsViewMenuSetup = ({ onLoadView, onUpdateList, storeId, + program, programStageId, orgUnitId, + recordsOrder, ...passOnProps }: Props) => { + const [customUpdateTrigger, setCustomUpdateTrigger] = useState(); + const { + selectedRows, + clearSelection, + selectAllRows, + selectionInProgress, + toggleRowSelected, + allRowsAreSelected, + removeRowsFromSelection, + } = useSelectedRowsController({ recordIds: recordsOrder }); const hasCSVSupport = useFeature(FEATURES.trackedEntitiesCSV); const downloadRequest = useSelector( ({ workingLists }) => workingLists[storeId] && workingLists[storeId].currentRequest, @@ -87,15 +102,43 @@ export const TrackerWorkingListsViewMenuSetup = ({ [onUpdateList, storeId], ); + const handleCustomUpdateTrigger = useCallback((disableClearSelection?: boolean) => { + const id = uuid(); + setCustomUpdateTrigger(id); + !disableClearSelection && clearSelection(); + }, [clearSelection]); + + const TrackedEntityBulkActionsComponent = useMemo(() => ( + + ), [program, programStageId, selectedRows, clearSelection, handleCustomUpdateTrigger, removeRowsFromSelection]); + return ( <> void, + onSelectAll: (rows: Array) => void, + selectionInProgress: ?boolean, + bulkActionBarComponent: React$Element, +|}; diff --git a/src/core_modules/capture-core/components/WorkingLists/WorkingListsBase/BulkActionBar/BulkActionBar.component.js b/src/core_modules/capture-core/components/WorkingLists/WorkingListsBase/BulkActionBar/BulkActionBar.component.js new file mode 100644 index 0000000000..a100abb1f6 --- /dev/null +++ b/src/core_modules/capture-core/components/WorkingLists/WorkingListsBase/BulkActionBar/BulkActionBar.component.js @@ -0,0 +1,50 @@ +// @flow +import React from 'react'; +import { Button, colors } from '@dhis2/ui'; +import i18n from '@dhis2/d2-i18n'; +import { withStyles } from '@material-ui/core/styles'; +import type { ComponentProps } from './BulkActionBar.types'; + +const styles = { + container: { + background: colors.teal100, + height: '60px', + border: `2px solid ${colors.teal400}`, + width: '100%', + padding: '8px', + fontSize: '14px', + gap: '8px', + display: 'flex', + alignItems: 'center', + }, +}; + +export const BulkActionBarComponentPlain = ({ + selectedRowsCount, + onClearSelection, + children, + classes, +}: ComponentProps) => ( +
+ + {i18n.t('{{count}} selected', { count: selectedRowsCount })} + + + {children} + + +
+); + +export const BulkActionBarComponent = withStyles( + styles, +)(BulkActionBarComponentPlain); diff --git a/src/core_modules/capture-core/components/WorkingLists/WorkingListsBase/BulkActionBar/BulkActionBar.container.js b/src/core_modules/capture-core/components/WorkingLists/WorkingListsBase/BulkActionBar/BulkActionBar.container.js new file mode 100644 index 0000000000..604e5133d2 --- /dev/null +++ b/src/core_modules/capture-core/components/WorkingLists/WorkingListsBase/BulkActionBar/BulkActionBar.container.js @@ -0,0 +1,19 @@ +// @flow +import React from 'react'; +import { BulkActionBarComponent } from './BulkActionBar.component'; +import type { ContainerProps } from './BulkActionBar.types'; + +export const BulkActionBar = ({ + onClearSelection, + selectedRowsCount, + children, +}: ContainerProps) => ( + <> + + {children} + + +); diff --git a/src/core_modules/capture-core/components/WorkingLists/WorkingListsBase/BulkActionBar/BulkActionBar.types.js b/src/core_modules/capture-core/components/WorkingLists/WorkingListsBase/BulkActionBar/BulkActionBar.types.js new file mode 100644 index 0000000000..140806a1fe --- /dev/null +++ b/src/core_modules/capture-core/components/WorkingLists/WorkingListsBase/BulkActionBar/BulkActionBar.types.js @@ -0,0 +1,16 @@ +// @flow + +type SharedProps = {| + onClearSelection: () => void, + selectedRowsCount: number, + children: React$Node, +|} + +export type ContainerProps = {| + ...SharedProps, +|} + +export type ComponentProps = {| + ...SharedProps, + ...CssClasses, +|} diff --git a/src/core_modules/capture-core/components/WorkingLists/WorkingListsBase/BulkActionBar/hooks/index.js b/src/core_modules/capture-core/components/WorkingLists/WorkingListsBase/BulkActionBar/hooks/index.js new file mode 100644 index 0000000000..41247da8ff --- /dev/null +++ b/src/core_modules/capture-core/components/WorkingLists/WorkingListsBase/BulkActionBar/hooks/index.js @@ -0,0 +1,3 @@ +// @flow + +export { useSelectedRowsController } from './useSelectedRowsController'; diff --git a/src/core_modules/capture-core/components/WorkingLists/WorkingListsBase/BulkActionBar/hooks/useSelectedRowsController.js b/src/core_modules/capture-core/components/WorkingLists/WorkingListsBase/BulkActionBar/hooks/useSelectedRowsController.js new file mode 100644 index 0000000000..bf7aff3de0 --- /dev/null +++ b/src/core_modules/capture-core/components/WorkingLists/WorkingListsBase/BulkActionBar/hooks/useSelectedRowsController.js @@ -0,0 +1,66 @@ +// @flow +import { useCallback, useMemo, useState } from 'react'; + +type Props = { + recordIds: ?Array, +} + +export const useSelectedRowsController = ({ recordIds }: Props) => { + const [selectedRows, setSelectedRows] = useState({}); + + const allRowsAreSelected = useMemo( + () => recordIds && recordIds.length > 0 && recordIds.every(rowId => selectedRows[rowId]), + [recordIds, selectedRows]); + + const toggleRowSelected = useCallback((rowId: string) => { + setSelectedRows((prevSelectedRows) => { + const newSelectedRows = { ...prevSelectedRows }; + if (newSelectedRows[rowId]) { + delete newSelectedRows[rowId]; + } else { + newSelectedRows[rowId] = true; + } + return newSelectedRows; + }); + }, []); + + const selectAllRows = useCallback((rows: Array) => { + if (allRowsAreSelected) { + setSelectedRows({}); + return; + } + + setSelectedRows(rows.reduce((acc, rowId) => { + acc[rowId] = true; + return acc; + }, {})); + }, [allRowsAreSelected]); + + const clearSelection = useCallback(() => { + setSelectedRows({}); + }, []); + + const selectionInProgress = useMemo( + () => Object.keys(selectedRows).length > 0, + [selectedRows]); + + const removeRowsFromSelection = useCallback((rows: Array) => { + setSelectedRows((prevSelectedRows) => { + const newSelectedRows = { ...prevSelectedRows }; + rows.forEach((rowId) => { + delete newSelectedRows[rowId]; + }); + return newSelectedRows; + }); + }, []); + + return { + selectedRows, + toggleRowSelected, + allRowsAreSelected, + selectAllRows, + selectionInProgress, + clearSelection, + removeRowsFromSelection, + }; +}; diff --git a/src/core_modules/capture-core/components/WorkingLists/WorkingListsBase/BulkActionBar/index.js b/src/core_modules/capture-core/components/WorkingLists/WorkingListsBase/BulkActionBar/index.js new file mode 100644 index 0000000000..f40a1d152b --- /dev/null +++ b/src/core_modules/capture-core/components/WorkingLists/WorkingListsBase/BulkActionBar/index.js @@ -0,0 +1,4 @@ +// @flow + +export { BulkActionBar } from './BulkActionBar.container'; +export { useSelectedRowsController } from './hooks'; diff --git a/src/core_modules/capture-core/components/WorkingLists/WorkingListsBase/ContextBuilder/ContextProviders/WorkingListsListViewBuilderContextProvider.component.js b/src/core_modules/capture-core/components/WorkingLists/WorkingListsBase/ContextBuilder/ContextProviders/WorkingListsListViewBuilderContextProvider.component.js index 655b2b30ca..e1aafab6da 100644 --- a/src/core_modules/capture-core/components/WorkingLists/WorkingListsBase/ContextBuilder/ContextProviders/WorkingListsListViewBuilderContextProvider.component.js +++ b/src/core_modules/capture-core/components/WorkingLists/WorkingListsBase/ContextBuilder/ContextProviders/WorkingListsListViewBuilderContextProvider.component.js @@ -1,15 +1,18 @@ // @flow import React, { useMemo } from 'react'; -import { - ListViewBuilderContext, -} from '../../workingListsBase.context'; +import { ListViewBuilderContext } from '../../workingListsBase.context'; import type { Props } from './workingListsListViewBuilderContextProvider.types'; export const WorkingListsListViewBuilderContextProvider = ({ updating, updatingWithDialog, + selectedRows, + allRowsAreSelected, + selectionInProgress, dataSource, - onSelectListRow, + onClickListRow, + onRowSelect, + onSelectAll, onSortList, onSetListColumnOrder, customRowMenuContents, @@ -21,13 +24,19 @@ export const WorkingListsListViewBuilderContextProvider = ({ onChangeRowsPerPage, stickyFilters, programStageId, + bulkActionBarComponent, children, }: Props) => { const listViewBuilderContextData = useMemo(() => ({ updating, updatingWithDialog, dataSource, - onSelectListRow, + selectedRows, + allRowsAreSelected, + selectionInProgress, + onClickListRow, + onRowSelect, + onSelectAll, onSortList, onSetListColumnOrder, customRowMenuContents, @@ -39,11 +48,17 @@ export const WorkingListsListViewBuilderContextProvider = ({ onChangeRowsPerPage, stickyFilters, programStageId, + bulkActionBarComponent, }), [ updating, updatingWithDialog, dataSource, - onSelectListRow, + selectedRows, + allRowsAreSelected, + selectionInProgress, + onClickListRow, + onRowSelect, + onSelectAll, onSortList, onSetListColumnOrder, customRowMenuContents, @@ -55,6 +70,7 @@ export const WorkingListsListViewBuilderContextProvider = ({ onChangeRowsPerPage, stickyFilters, programStageId, + bulkActionBarComponent, ]); return ( diff --git a/src/core_modules/capture-core/components/WorkingLists/WorkingListsBase/ContextBuilder/ContextProviders/workingListsListViewBuilderContextProvider.types.js b/src/core_modules/capture-core/components/WorkingLists/WorkingListsBase/ContextBuilder/ContextProviders/workingListsListViewBuilderContextProvider.types.js index 96db7de391..a82e67aab6 100644 --- a/src/core_modules/capture-core/components/WorkingLists/WorkingListsBase/ContextBuilder/ContextProviders/workingListsListViewBuilderContextProvider.types.js +++ b/src/core_modules/capture-core/components/WorkingLists/WorkingListsBase/ContextBuilder/ContextProviders/workingListsListViewBuilderContextProvider.types.js @@ -1,24 +1,24 @@ // @flow import type { - DataSource, - SelectRow, - Sort, - SetColumnOrder, - CustomRowMenuContents, - UpdateFilter, + ChangePage, + ChangeRowsPerPage, ClearFilter, + CustomRowMenuContents, + DataSource, RemoveFilter, SelectRestMenuItem, - ChangePage, - ChangeRowsPerPage, + SelectRow, + SetColumnOrder, + Sort, StickyFilters, + UpdateFilter, } from '../../../../ListView'; export type Props = $ReadOnly<{| updating: boolean, updatingWithDialog: boolean, dataSource?: DataSource, - onSelectListRow: SelectRow, + onClickListRow: SelectRow, onSortList: Sort, onSetListColumnOrder: SetColumnOrder, customRowMenuContents?: CustomRowMenuContents, @@ -30,5 +30,11 @@ export type Props = $ReadOnly<{| onChangeRowsPerPage: ChangeRowsPerPage, stickyFilters?: StickyFilters, programStageId?: string, + onRowSelect: (id: string) => void, + onSelectAll: (rows: Array) => void, + selectedRows: { [key: string]: boolean }, + allRowsAreSelected: ?boolean, + selectionInProgress: ?boolean, + bulkActionBarComponent: React$Element, children: React$Node, |}>; diff --git a/src/core_modules/capture-core/components/WorkingLists/WorkingListsBase/ContextBuilder/WorkingListsContextBuilder.component.js b/src/core_modules/capture-core/components/WorkingLists/WorkingListsBase/ContextBuilder/WorkingListsContextBuilder.component.js index 5c43c5324f..2a6e4e6004 100644 --- a/src/core_modules/capture-core/components/WorkingLists/WorkingListsBase/ContextBuilder/WorkingListsContextBuilder.component.js +++ b/src/core_modules/capture-core/components/WorkingLists/WorkingListsBase/ContextBuilder/WorkingListsContextBuilder.component.js @@ -1,11 +1,11 @@ // @flow -import React, { useMemo, useRef, useEffect } from 'react'; +import React, { useEffect, useMemo, useRef } from 'react'; import { - WorkingListsManagerContextProvider, + WorkingListsListViewBuilderContextProvider, WorkingListsListViewConfigContextProvider, WorkingListsListViewLoaderContextProvider, WorkingListsListViewUpdaterContextProvider, - WorkingListsListViewBuilderContextProvider, + WorkingListsManagerContextProvider, } from './ContextProviders'; import { TemplatesLoader } from '../TemplatesLoader'; import type { Props } from './workingListsContextBuilder.types'; @@ -15,6 +15,9 @@ export const WorkingListsContextBuilder = (props: Props) => { const { templates: allTemplates, currentTemplate, + selectedRows, + selectionInProgress, + allRowsAreSelected, onSelectTemplate, onLoadView, loadViewError, @@ -33,7 +36,9 @@ export const WorkingListsContextBuilder = (props: Props) => { categories, loadedContext, dataSource, - onSelectListRow, + onClickListRow, + onRowSelect, + onSelectAll, sortById, sortByDirection, onSortList, @@ -54,6 +59,7 @@ export const WorkingListsContextBuilder = (props: Props) => { customUpdateTrigger, forceUpdateOnMount, programStageId, + bulkActionBarComponent, ...passOnProps } = props; @@ -125,10 +131,15 @@ export const WorkingListsContextBuilder = (props: Props) => { loadedOrgUnitId={loadedContextDefined.orgUnitId} > { onChangeRowsPerPage={onChangeRowsPerPage} stickyFilters={stickyFilters} programStageId={programStageId} + bulkActionBarComponent={bulkActionBarComponent} > { dirtyTemplates={!!dirtyTemplatesStateFirstRunRef.current} loadedProgramIdForTemplates={loadedProgramIdForTemplates} programStageId={programStageId} + selectionInProgress={selectionInProgress} /> diff --git a/src/core_modules/capture-core/components/WorkingLists/WorkingListsBase/ContextBuilder/workingListsContextBuilder.types.js b/src/core_modules/capture-core/components/WorkingLists/WorkingListsBase/ContextBuilder/workingListsContextBuilder.types.js index 481cfb721c..e882b5910d 100644 --- a/src/core_modules/capture-core/components/WorkingLists/WorkingListsBase/ContextBuilder/workingListsContextBuilder.types.js +++ b/src/core_modules/capture-core/components/WorkingLists/WorkingListsBase/ContextBuilder/workingListsContextBuilder.types.js @@ -12,18 +12,18 @@ import type { UnloadingContext, UpdateList, UpdateTemplate, - WorkingListTemplates, - WorkingListTemplate, WorkingListsOutputProps, + WorkingListTemplate, + WorkingListTemplates, } from '../workingListsBase.types'; import type { ChangePage, ChangeRowsPerPage, ClearFilter, - RemoveFilter, - DataSource, CustomRowMenuContents, + DataSource, FiltersData, + RemoveFilter, SelectRestMenuItem, SelectRow, SetColumnOrder, @@ -56,7 +56,7 @@ type ExtractedProps = $ReadOnly<{| onDeleteTemplate?: DeleteTemplate, onLoadView: LoadView, onUpdateFilter: UpdateFilter, - onSelectListRow: SelectRow, + onClickListRow: SelectRow, onSelectRestMenuItem: SelectRestMenuItem, onSelectTemplate: SelectTemplate, onSetListColumnOrder: SetColumnOrder, @@ -74,6 +74,7 @@ type ExtractedProps = $ReadOnly<{| updatingWithDialog: boolean, templates?: WorkingListTemplates, viewPreloaded?: boolean, + bulkActionBarComponent: React$Node, |}>; type OptionalExtractedProps = {| diff --git a/src/core_modules/capture-core/components/WorkingLists/WorkingListsBase/ListViewBuilder/ListViewBuilder.component.js b/src/core_modules/capture-core/components/WorkingLists/WorkingListsBase/ListViewBuilder/ListViewBuilder.component.js index a5c7a86516..c33d6e6cb5 100644 --- a/src/core_modules/capture-core/components/WorkingLists/WorkingListsBase/ListViewBuilder/ListViewBuilder.component.js +++ b/src/core_modules/capture-core/components/WorkingLists/WorkingListsBase/ListViewBuilder/ListViewBuilder.component.js @@ -16,7 +16,11 @@ export const ListViewBuilder = ({ customListViewMenuContents, ...passOnProps }: const { dataSource, - onSelectListRow, + onClickListRow, + onRowSelect, + onSelectAll, + selectedRows, + allRowsAreSelected, onSortList, onSetListColumnOrder, stickyFilters, @@ -36,7 +40,11 @@ export const ListViewBuilder = ({ customListViewMenuContents, ...passOnProps }: {...passOnProps} {...passOnContext} dataSource={dataSource} - onSelectRow={onSelectListRow} + selectedRows={selectedRows} + allRowsAreSelected={allRowsAreSelected} + onClickListRow={onClickListRow} + onRowSelect={onRowSelect} + onSelectAll={onSelectAll} onSort={onSortList} onSetColumnOrder={onSetListColumnOrder} customMenuContents={customListViewMenuContents} diff --git a/src/core_modules/capture-core/components/WorkingLists/WorkingListsBase/TemplateSelector.component.js b/src/core_modules/capture-core/components/WorkingLists/WorkingListsBase/TemplateSelector.component.js index 95ce24415b..b6b91b495d 100644 --- a/src/core_modules/capture-core/components/WorkingLists/WorkingListsBase/TemplateSelector.component.js +++ b/src/core_modules/capture-core/components/WorkingLists/WorkingListsBase/TemplateSelector.component.js @@ -54,6 +54,7 @@ type Props = { currentTemplateId: string, currentListIsModified: boolean, onSelectTemplate: Function, + selectionInProgress: boolean, classes: Object, }; @@ -63,6 +64,7 @@ const TemplateSelectorPlain = (props: Props) => { currentTemplateId, currentListIsModified, onSelectTemplate, + selectionInProgress, classes, } = props; @@ -111,6 +113,7 @@ const TemplateSelectorPlain = (props: Props) => { currentTemplateId={currentTemplateId} onSelectTemplate={onSelectTemplate} currentListIsModified={currentListIsModified} + disabled={selectionInProgress} />
); diff --git a/src/core_modules/capture-core/components/WorkingLists/WorkingListsBase/TemplateSelectorChip.component.js b/src/core_modules/capture-core/components/WorkingLists/WorkingListsBase/TemplateSelectorChip.component.js index 238423ef2c..81ca6c10a1 100644 --- a/src/core_modules/capture-core/components/WorkingLists/WorkingListsBase/TemplateSelectorChip.component.js +++ b/src/core_modules/capture-core/components/WorkingLists/WorkingListsBase/TemplateSelectorChip.component.js @@ -15,6 +15,7 @@ type Props = { currentTemplateId: string, onSelectTemplate: Function, maxCharacters?: number, + disabled?: boolean, }; export const TemplateSelectorChip = (props: Props) => { @@ -22,14 +23,18 @@ export const TemplateSelectorChip = (props: Props) => { template, currentTemplateId, onSelectTemplate, + disabled, maxCharacters = 30, ...passOnProps } = props; const { name, id } = template; const selectTemplateHandler = React.useCallback(() => { - onSelectTemplate(template); + if (!disabled) { + onSelectTemplate(template); + } }, [ + disabled, onSelectTemplate, template, ]); @@ -49,12 +54,14 @@ export const TemplateSelectorChip = (props: Props) => { marginRight={0} dataTest="workinglist-template-selector-chip" selected={id === currentTemplateId} + disabled={disabled} > diff --git a/src/core_modules/capture-core/components/WorkingLists/WorkingListsBase/TemplatesLoader/templatesLoader.types.js b/src/core_modules/capture-core/components/WorkingLists/WorkingListsBase/TemplatesLoader/templatesLoader.types.js index 437e5330a7..5ad89c8434 100644 --- a/src/core_modules/capture-core/components/WorkingLists/WorkingListsBase/TemplatesLoader/templatesLoader.types.js +++ b/src/core_modules/capture-core/components/WorkingLists/WorkingListsBase/TemplatesLoader/templatesLoader.types.js @@ -12,9 +12,14 @@ type ExtractedProps = {| |}; type OptionalExtractedProps = { + allRowsAreSelected: boolean, + selectedRows: { [key: string]: boolean }, loadTemplatesError: string, onCancelLoadTemplates: Function, loadedProgramIdForTemplates: string, + onRowSelect: Function, + onSelectAll: Function, + bulkActionBarComponent: React$Element, }; type RestProps = $Rest; diff --git a/src/core_modules/capture-core/components/WorkingLists/WorkingListsBase/TemplatesManager/TemplatesManager.component.js b/src/core_modules/capture-core/components/WorkingLists/WorkingListsBase/TemplatesManager/TemplatesManager.component.js index 17dacb39f3..180e0634c9 100644 --- a/src/core_modules/capture-core/components/WorkingLists/WorkingListsBase/TemplatesManager/TemplatesManager.component.js +++ b/src/core_modules/capture-core/components/WorkingLists/WorkingListsBase/TemplatesManager/TemplatesManager.component.js @@ -1,18 +1,16 @@ // @flow -import React, { useContext, useCallback, type ComponentType } from 'react'; +import React, { type ComponentType, useCallback, useContext } from 'react'; import log from 'loglevel'; import { errorCreator } from 'capture-core-utils'; import { ListViewConfig } from '../ListViewConfig'; import { TemplateSelector } from '../TemplateSelector.component'; import { ManagerContext } from '../workingListsBase.context'; import { withBorder } from '../borderHOC'; -import type { - WorkingListTemplate, -} from '../workingListsBase.types'; +import type { WorkingListTemplate } from '../workingListsBase.types'; import type { Props } from './templatesManager.types'; const TemplatesManagerPlain = (props: Props) => { - const { templates, ...passOnProps } = props; + const { templates, selectionInProgress, ...passOnProps } = props; const { currentTemplate, onSelectTemplate, @@ -42,6 +40,7 @@ const TemplatesManagerPlain = (props: Props) => { return ( { @@ -51,6 +50,7 @@ const TemplatesManagerPlain = (props: Props) => { currentTemplateId={currentTemplate.id} currentListIsModified={currentListIsModified} onSelectTemplate={handleSelectTemplate} + selectionInProgress={selectionInProgress} /> ) } diff --git a/src/core_modules/capture-core/components/WorkingLists/WorkingListsBase/workingListsBase.types.js b/src/core_modules/capture-core/components/WorkingLists/WorkingListsBase/workingListsBase.types.js index f6b8f82ef9..046c59d246 100644 --- a/src/core_modules/capture-core/components/WorkingLists/WorkingListsBase/workingListsBase.types.js +++ b/src/core_modules/capture-core/components/WorkingLists/WorkingListsBase/workingListsBase.types.js @@ -1,22 +1,22 @@ // @flow import { typeof dataElementTypes } from '../../../metaData'; import type { + AdditionalFilters, + ChangePage, + ChangeRowsPerPage, + ClearFilter, CustomMenuContents, CustomRowMenuContents, DataSource, FiltersData, FiltersOnly, - AdditionalFilters, - StickyFilters, - ChangePage, - ChangeRowsPerPage, - ClearFilter, RemoveFilter, - UpdateFilter, SelectRestMenuItem, - SetColumnOrder, SelectRow, + SetColumnOrder, Sort, + StickyFilters, + UpdateFilter, } from '../../ListView'; export type WorkingListTemplate = { @@ -141,7 +141,7 @@ export type ListViewBuilderContextData = {| updating: boolean, updatingWithDialog: boolean, dataSource?: DataSource, - onSelectListRow: SelectRow, + onClickListRow: SelectRow, onSortList: Sort, onSetListColumnOrder: SetColumnOrder, customRowMenuContents?: CustomRowMenuContents, @@ -153,6 +153,12 @@ export type ListViewBuilderContextData = {| onChangeRowsPerPage: ChangeRowsPerPage, stickyFilters?: StickyFilters, programStageId?: string, + onRowSelect: (id: string) => void, + onSelectAll: (rows: Array) => void, + selectedRows: { [key: string]: boolean }, + selectionInProgress: ?boolean, + allRowsAreSelected: ?boolean, + bulkActionBarComponent: React$Element, |}; export type SharingSettings = {| @@ -200,7 +206,7 @@ export type InterfaceProps = $ReadOnly<{| onDeleteTemplate?: DeleteTemplate, onLoadView: LoadView, onLoadTemplates: LoadTemplates, - onSelectListRow: SelectRow, + onClickListRow: SelectRow, onSelectRestMenuItem: SelectRestMenuItem, onSelectTemplate: SelectTemplate, onSetListColumnOrder: SetColumnOrder, @@ -224,6 +230,12 @@ export type InterfaceProps = $ReadOnly<{| viewPreloaded?: boolean, programStageId?: string, templateSharingType: string, + allRowsAreSelected: ?boolean, + onRowSelect: (id: string) => void, + onSelectAll: (rows: Array) => void, + selectionInProgress: ?boolean, + selectedRows: { [key: string]: boolean }, + bulkActionBarComponent: React$Element, |}>; export type WorkingListsOutputProps = InterfaceProps; diff --git a/src/core_modules/capture-core/components/WorkingLists/WorkingListsCommon/hooks/useWorkingListsCommonStateManagement.js b/src/core_modules/capture-core/components/WorkingLists/WorkingListsCommon/hooks/useWorkingListsCommonStateManagement.js index 8e53fd7e01..7f50dd459f 100644 --- a/src/core_modules/capture-core/components/WorkingLists/WorkingListsCommon/hooks/useWorkingListsCommonStateManagement.js +++ b/src/core_modules/capture-core/components/WorkingLists/WorkingListsCommon/hooks/useWorkingListsCommonStateManagement.js @@ -189,6 +189,7 @@ const useView = ( const nextFilters = useSelector(({ workingListsMeta }) => workingListsMeta[storeId] && workingListsMeta[storeId].next && workingListsMeta[storeId].next.filters); + const filtersState = useMemo(() => ({ ...appliedFilters, ...nextFilters }), [ appliedFilters, nextFilters, diff --git a/src/core_modules/capture-core/utils/userInfo/useAuthority.js b/src/core_modules/capture-core/utils/userInfo/useAuthority.js new file mode 100644 index 0000000000..fdf2c62539 --- /dev/null +++ b/src/core_modules/capture-core/utils/userInfo/useAuthority.js @@ -0,0 +1,27 @@ +// @flow + +import { useApiMetadataQuery } from '../reactQueryHelpers'; + +type Props = { + authority: string, +} + +export const useAuthority = ({ authority }: Props) => { + const queryKey = ['authorities']; + const queryFn = { + resource: 'me.json', + params: { + fields: 'authorities', + }, + }; + const queryOptions = { + select: ({ authorities }) => + authorities && + authorities.some(apiAuthority => apiAuthority === 'ALL' || apiAuthority === authority), + }; + const { data } = useApiMetadataQuery(queryKey, queryFn, queryOptions); + + return { + hasAuthority: Boolean(data), + }; +};