diff --git a/cypress/e2e/EnrollmentAddEventPage/EnrollmentAddEventPageForm/EnrollmentAddEventPageForm.js b/cypress/e2e/EnrollmentAddEventPage/EnrollmentAddEventPageForm/EnrollmentAddEventPageForm.js index f3a2d9f851..f5369a15cf 100644 --- a/cypress/e2e/EnrollmentAddEventPage/EnrollmentAddEventPageForm/EnrollmentAddEventPageForm.js +++ b/cypress/e2e/EnrollmentAddEventPage/EnrollmentAddEventPageForm/EnrollmentAddEventPageForm.js @@ -38,7 +38,7 @@ const changeEnrollmentAndEventsStatus = () => ( ); const showAllEventsInProgramStage = () => { - cy.get('[data-test="dhis2-uicore-tablefoot"]') + cy.get('[data-test="dhis2-uicore-tabletoolbar"]') .then(($footer) => { if ($footer.find('[data-test="show-more-button"]').length > 0) { $footer.find('[data-test="show-more-button"]') @@ -119,11 +119,6 @@ When(/^you click the button to (.*) without post request/, (buttonText) => { When('the enrollment overview is finished loading', () => { cy.get('[data-test="dhis2-uicore-circularloader"]').should('not.exist'); - cy.get('[data-test="dhis2-uicore-datatable"]') - .within(() => { - cy.get('[data-test="dhis2-uicore-datatablerow"]') - .should('exist'); - }); }); When('the form is finished loading', () => { diff --git a/cypress/e2e/EnrollmentPage/StagesAndEventsWidget/StagesAndEventsWidget.feature b/cypress/e2e/EnrollmentPage/StagesAndEventsWidget/StagesAndEventsWidget.feature index e76f9dac8a..07387fcde5 100644 --- a/cypress/e2e/EnrollmentPage/StagesAndEventsWidget/StagesAndEventsWidget.feature +++ b/cypress/e2e/EnrollmentPage/StagesAndEventsWidget/StagesAndEventsWidget.feature @@ -29,13 +29,10 @@ Feature: User interacts with Stages and Events Widget And you see the first 5 events in the table And you see buttons in the footer list - Scenario: User can view more events and then view less + Scenario: User can view more events Given you open the enrollment page which has multiples events and stages When you click show more button in stages&event list - Then more events should be displayed - And reset button should be displayed - And you click reset button - Then there should be 5 rows in the table + Then there should be 10 rows in the table Scenario: User can sort the list of events Given you open the enrollment page which has multiples events and stages diff --git a/cypress/e2e/EnrollmentPage/StagesAndEventsWidget/StagesAndEventsWidget.js b/cypress/e2e/EnrollmentPage/StagesAndEventsWidget/StagesAndEventsWidget.js index 510bbebae5..d772f41034 100644 --- a/cypress/e2e/EnrollmentPage/StagesAndEventsWidget/StagesAndEventsWidget.js +++ b/cypress/e2e/EnrollmentPage/StagesAndEventsWidget/StagesAndEventsWidget.js @@ -49,7 +49,7 @@ When('you click show more button in stages&event list', () => { }); }); -Then('more events should be displayed', () => { +Then('there should be 10 rows in the table', () => { cy.get('[data-test="stages-and-events-widget"]') .find('[data-test="widget-contents"]') .find('[data-test="stage-content"]') @@ -61,34 +61,6 @@ Then('more events should be displayed', () => { }); }); -Then('reset button should be displayed', () => { - cy.get('[data-test="stages-and-events-widget"]').within(() => { - cy.get('[data-test="view-all-button"]').should('exist'); - cy.get('[data-test="show-more-button"]').should('exist'); - cy.get('[data-test="reset-button"]').should('exist'); - cy.get('[data-test="create-new-button"]').should('exist'); - }); -}); - -And('you click reset button', () => { - cy.get('[data-test="stages-and-events-widget"]').within(() => { - cy.get('[data-test="reset-button"]').click(); - cy.wait(100); - }); -}); - -Then('there should be 5 rows in the table', () => { - cy.get('[data-test="stages-and-events-widget"]') - .find('[data-test="widget-contents"]') - .find('[data-test="stage-content"]') - .eq(2) - .within(() => { - cy.get('[data-test="dhis2-uicore-datatable"]').should('exist'); - cy.get('[data-test="dhis2-uicore-tablebody"]') - .find('[data-test="dhis2-uicore-datatablerow"]').should('have.length', 5); - }); -}); - Then('the default list should be displayed', () => { const rows = [ '07-13|Bumbeh MCHP', diff --git a/i18n/en.pot b/i18n/en.pot index 5612718d04..25f3a5987a 100644 --- a/i18n/en.pot +++ b/i18n/en.pot @@ -1514,9 +1514,6 @@ msgstr "To open this event, please wait until saving is complete" msgid "Show {{ rest }} more" msgstr "Show {{ rest }} more" -msgid "Reset list" -msgstr "Reset list" - msgid "Go to full {{ eventName }}" msgstr "Go to full {{ eventName }}" diff --git a/src/core_modules/capture-core/components/WidgetStagesAndEvents/Stages/Stage/Stage.component.js b/src/core_modules/capture-core/components/WidgetStagesAndEvents/Stages/Stage/Stage.component.js index 6013697b8c..62cbeb7882 100644 --- a/src/core_modules/capture-core/components/WidgetStagesAndEvents/Stages/Stage/Stage.component.js +++ b/src/core_modules/capture-core/components/WidgetStagesAndEvents/Stages/Stage/Stage.component.js @@ -2,7 +2,7 @@ import React, { type ComponentType, useState, useCallback } from 'react'; import cx from 'classnames'; import { withStyles } from '@material-ui/core'; -import { spacersNum, colors } from '@dhis2/ui'; +import { spacersNum } from '@dhis2/ui'; import { StageOverview } from './StageOverview'; import type { Props } from './stage.types'; import { Widget } from '../../../Widget'; @@ -13,10 +13,10 @@ const styles = { overview: { marginLeft: spacersNum.dp16, marginRight: spacersNum.dp16, - borderTop: `1px solid ${colors.grey300}`, + marginBottom: spacersNum.dp24, }, buttonContainer: { - margin: `0 ${spacersNum.dp16}px ${spacersNum.dp16}px ${spacersNum.dp16}px`, + margin: `0 ${spacersNum.dp12}px ${spacersNum.dp8}px ${spacersNum.dp12}px`, }, buttonRow: { display: 'flex', @@ -50,7 +50,6 @@ export const StagePlain = ({ stage, events, classes, className, onCreateNew, rul description={description} events={events} />} - borderless onOpen={handleOpen} onClose={handleClose} open={open} diff --git a/src/core_modules/capture-core/components/WidgetStagesAndEvents/Stages/Stage/StageDetail/StageDetail.component.js b/src/core_modules/capture-core/components/WidgetStagesAndEvents/Stages/Stage/StageDetail/StageDetail.component.js index 644936ef57..2d1f6dd06d 100644 --- a/src/core_modules/capture-core/components/WidgetStagesAndEvents/Stages/Stage/StageDetail/StageDetail.component.js +++ b/src/core_modules/capture-core/components/WidgetStagesAndEvents/Stages/Stage/StageDetail/StageDetail.component.js @@ -3,11 +3,14 @@ import React, { type ComponentType, useState, useCallback } from 'react'; import { withStyles } from '@material-ui/core'; import i18n from '@dhis2/d2-i18n'; // $FlowFixMe -import { colors, +import { + colors, + spacers, spacersNum, + theme, + DataTableToolbar, DataTableBody, DataTableHead, - DataTableFoot, DataTable, DataTableRow, DataTableCell, @@ -35,15 +38,11 @@ const styles = { }, container: { display: 'flex', - marginRight: spacersNum.dp16, - marginLeft: spacersNum.dp16, - marginBottom: spacersNum.dp16, - backgroundColor: colors.grey200, - alignItems: 'center', - overflowX: 'auto', + flexDirection: 'column', }, - button: { - marginRight: spacersNum.dp8, + scrollBox: { + overflowX: 'auto', + overflow: 'hidden', }, hidenButton: { display: 'none !important' }, icon: { @@ -54,6 +53,40 @@ const styles = { label: { paddingLeft: spacersNum.dp32, }, + table: { + border: 'none !important', + }, + tableToolbar: { + borderLeft: 'none !important', + borderBottom: 'none !important', + borderRight: 'none !important', + borderTop: `1px solid ${colors.grey300} !important`, + width: '100%', + padding: '0 !important', + }, + toolbarContent: { + width: '100%', + }, + showMoreButton: { + width: '100%', + border: 'none', + background: colors.grey100, + color: colors.grey800, + fontSize: '13px', + height: '24px', + borderBottom: `1px solid ${colors.grey300}`, + '&:hover': { + background: colors.grey200, + color: colors.grey900, + cursor: 'pointer', + }, + '&:focus': { + outline: `3px solid ${theme.focus}`, + }, + }, + newButton: { + margin: `${spacers.dp8} ${spacers.dp12}`, + }, }; const StageDetailPlain = (props: Props) => { @@ -188,27 +221,17 @@ const StageDetailPlain = (props: Props) => { function renderFooter() { const renderShowMoreButton = () => (dataSource && !loading && events.length > DEFAULT_NUMBER_OF_ROW - && displayedRowNumber < events.length ? + : null); - const renderResetButton = () => (displayedRowNumber > DEFAULT_NUMBER_OF_ROW ? : null); - const renderViewAllButton = () => (events.length > 1 ? : null); const renderCreateNewButton = () => ( - +
+ +
); return ( - - - {renderShowMoreButton()} - {renderViewAllButton()} - {renderCreateNewButton()} - {renderResetButton()} - - +
+ {renderShowMoreButton()} + {renderViewAllButton()} + {renderCreateNewButton()} +
+ ); } @@ -249,19 +272,23 @@ const StageDetailPlain = (props: Props) => { } return (
- - - {renderHeader()} - - - {renderRows()} - - +
+ + + {renderHeader()} + + + {renderRows()} + + +
+ +
{renderFooter()} - - +
+
); }; diff --git a/src/core_modules/capture-core/components/WidgetStagesAndEvents/Stages/Stage/StageOverview/StageOverview.component.js b/src/core_modules/capture-core/components/WidgetStagesAndEvents/Stages/Stage/StageOverview/StageOverview.component.js index b7b576500d..c2e7731421 100644 --- a/src/core_modules/capture-core/components/WidgetStagesAndEvents/Stages/Stage/StageOverview/StageOverview.component.js +++ b/src/core_modules/capture-core/components/WidgetStagesAndEvents/Stages/Stage/StageOverview/StageOverview.component.js @@ -3,7 +3,9 @@ import React, { type ComponentType } from 'react'; import cx from 'classnames'; import { withStyles } from '@material-ui/core'; import { useTimeZoneConversion } from '@dhis2/app-runtime'; -import { colors, spacersNum, IconInfo16, IconWarning16, IconCalendar16, IconClockHistory16, Tooltip } from '@dhis2/ui'; +import { + colors, spacers, spacersNum, IconInfo16, IconWarning16, IconCalendar16, IconClockHistory16, Tooltip, +} from '@dhis2/ui'; import i18n from '@dhis2/d2-i18n'; import moment from 'moment'; import { statusTypes } from 'capture-core/events/statusTypes'; @@ -15,6 +17,10 @@ const styles = { container: { display: 'flex', alignItems: 'center', + padding: '0', + justifyContent: 'space-between', + width: '100%', + marginLeft: '-4px', }, icon: { paddingRight: spacersNum.dp8, @@ -24,22 +30,32 @@ const styles = { marginRight: spacersNum.dp8, height: '16px', }, + infoTitles: { + display: 'flex', + alignItems: 'center', + }, + infoItems: { + display: 'flex', + gap: spacers.dp12, + }, indicatorIcon: { paddingRight: spacersNum.dp4, height: '16px', }, title: { - fontSize: '14px', + fontSize: '18px', lineHeight: '19px', fontWeight: 500, color: colors.grey900, display: 'flex', + marginInlineEnd: spacers.dp4, }, indicator: { - padding: spacersNum.dp8, color: colors.grey800, - fontSize: '14px', + fontSize: '12px', + lineHeight: '16px', fontWeight: 400, + height: '100%', display: 'flex', alignItems: 'center', }, @@ -76,24 +92,26 @@ export const StageOverviewPlain = ({ title, icon, description, events, classes } const scheduledEvents = events.filter(event => event.status === statusTypes.SCHEDULE).length; return (
- { - icon && ( -
- -
- ) - } +
+ { + icon && ( +
+ +
+ ) + } +
-
- {title} -
- { description && +
+ {title} +
+ { description &&
- } -
- {i18n.t('{{ count }} event', { - count: totalEvents, - defaultValue: '{{ count }} event', - defaultValue_plural: '{{count}} events', - })} + }
- {overdueEvents > 0 ?
-
- -
- {i18n.t('{{ overdueEvents }} overdue', { overdueEvents })} -
: null} - {scheduledEvents > 0 ?
-
- +
+
+ {i18n.t('{{ count }} event', { + count: totalEvents, + defaultValue: '{{ count }} event', + defaultValue_plural: '{{count}} events', + })}
- {i18n.t('{{ scheduledEvents }} scheduled', { scheduledEvents })} -
: null } - {totalEvents > 0 &&
-
- -
- {getLastUpdatedAt(events, fromServerDate)} -
} + {overdueEvents > 0 ?
+
+ +
+ {i18n.t('{{ overdueEvents }} overdue', { overdueEvents })} +
: null} + {scheduledEvents > 0 ?
+
+ +
+ {i18n.t('{{ scheduledEvents }} scheduled', { scheduledEvents })} +
: null } + {totalEvents > 0 &&
+
+ +
+ {getLastUpdatedAt(events, fromServerDate)} +
} +
); };