From ce7282ca440c1bddae3f02b938d505a9412d9ea6 Mon Sep 17 00:00:00 2001 From: henrikmv <110386561+henrikmv@users.noreply.github.com> Date: Mon, 26 Feb 2024 16:31:36 +0100 Subject: [PATCH] fix: [DHIS2-15621] row view broken up in section (#3457) --- .../EnrollmentPage/BreakingTheGlass/index.js | 6 +-- .../index.js | 10 ++-- cypress/e2e/sharedSteps.js | 2 +- .../components/D2Form/D2Section.component.js | 53 +++++++++---------- .../D2Form/D2SectionFields.component.js | 44 +++++++++------ 5 files changed, 62 insertions(+), 53 deletions(-) diff --git a/cypress/e2e/EnrollmentPage/BreakingTheGlass/index.js b/cypress/e2e/EnrollmentPage/BreakingTheGlass/index.js index d9fc185179..9fc0d9eb74 100644 --- a/cypress/e2e/EnrollmentPage/BreakingTheGlass/index.js +++ b/cypress/e2e/EnrollmentPage/BreakingTheGlass/index.js @@ -21,12 +21,12 @@ And('you create a new tei in Child programme from Ngelehun CHC', () => { .eq(1) .type('1999-09-01') .blur(); - cy.get('[data-test="d2-form-component"]') + cy.get('[data-test="d2-section"]') .find('[data-test="capture-ui-input"]') .eq(0) .type('Breaking') .blur(); - cy.get('[data-test="d2-form-component"]') + cy.get('[data-test="d2-section"]') .find('[data-test="capture-ui-input"]') .eq(1) .type('TheGlass') @@ -68,7 +68,7 @@ And('you enroll the tei from Njandama MCHP', () => { .contains('Enroll Breaking TheGlass in this program') .click(); - cy.get('[data-test="d2-form-component"]') + cy.get('[data-test="d2-section"]') .find('[data-test="capture-ui-input"]') .eq(8) .type('1999-09-01') diff --git a/cypress/e2e/SearchForDuplicatesThroughAddRelationship/index.js b/cypress/e2e/SearchForDuplicatesThroughAddRelationship/index.js index 388903e301..212cda0b04 100644 --- a/cypress/e2e/SearchForDuplicatesThroughAddRelationship/index.js +++ b/cypress/e2e/SearchForDuplicatesThroughAddRelationship/index.js @@ -2,7 +2,7 @@ import { When, defineStep as And } from '@badeball/cypress-cucumber-preprocessor import '../sharedSteps'; And('you fill in the first name with values that have duplicates', () => { - cy.get('[data-test="d2-form-component"]') + cy.get('[data-test="d2-section"]') .find('[data-test="capture-ui-input"]') .eq(1) .wait(500) @@ -11,12 +11,12 @@ And('you fill in the first name with values that have duplicates', () => { }); And('you fill in the first name with values that have less than 5 duplicates', () => { - cy.get('[data-test="d2-form-component"]') + cy.get('[data-test="d2-section"]') .find('[data-test="capture-ui-input"]') .eq(1) .type('Sarah') .blur(); - cy.get('[data-test="d2-form-component"]') + cy.get('[data-test="d2-section"]') .find('[data-test="capture-ui-input"]') .eq(2) .type('Fis') @@ -24,13 +24,13 @@ And('you fill in the first name with values that have less than 5 duplicates', ( }); And('you fill in the first name with values that have exactly 5 duplicates', () => { - cy.get('[data-test="d2-form-component"]') + cy.get('[data-test="d2-section"]') .find('[data-test="capture-ui-input"]') .eq(1) .wait(500) .type('Tesmi') .blur(); - cy.get('[data-test="d2-form-component"]') + cy.get('[data-test="d2-section"]') .find('[data-test="capture-ui-input"]') .eq(2) .type('Abel') diff --git a/cypress/e2e/sharedSteps.js b/cypress/e2e/sharedSteps.js index 6fa9febef3..61143d9146 100644 --- a/cypress/e2e/sharedSteps.js +++ b/cypress/e2e/sharedSteps.js @@ -121,7 +121,7 @@ Then('all pagination is disabled', () => { And('you click search', () => { // click outside of the input for the values to be updated - cy.get('[data-test="d2-form-component"]') + cy.get('[data-test="d2-section"]') .click(); cy.get('button') diff --git a/src/core_modules/capture-core/components/D2Form/D2Section.component.js b/src/core_modules/capture-core/components/D2Form/D2Section.component.js index e0cf89264c..0eb7207524 100644 --- a/src/core_modules/capture-core/components/D2Form/D2Section.component.js +++ b/src/core_modules/capture-core/components/D2Form/D2Section.component.js @@ -75,39 +75,34 @@ class D2SectionPlain extends React.PureComponent { renderSection(sectionProps) { const { sectionMetaData, classes, sectionId, ...passOnProps } = sectionProps; - if (!sectionMetaData.showContainer || this.props.formHorizontal) { + const sectionFields = ( + // $FlowFixMe[cannot-spread-inexact] automated comment + { this.sectionFieldsInstance = instance; }} + fieldsMetaData={sectionMetaData.elements} + customForm={sectionMetaData.customForm} + {...passOnProps} + /> + ); + + if (sectionMetaData.showContainer && !this.props.formHorizontal) { return ( - // $FlowFixMe[cannot-spread-inexact] automated comment - { this.sectionFieldsInstance = instance; }} - fieldsMetaData={sectionMetaData.elements} - customForm={sectionMetaData.customForm} - {...passOnProps} - /> +
+
+ {sectionFields} +
+
); } - return ( -
-
- {/* $FlowFixMe[cannot-spread-inexact] automated comment */} - { - this.sectionFieldsInstance = instance; - }} - fieldsMetaData={sectionMetaData.elements} - {...passOnProps} - /> - -
-
- ); + return sectionFields; } + render() { const { isHidden, applyCustomFormClass, ...passOnProps } = this.props; @@ -116,7 +111,7 @@ class D2SectionPlain extends React.PureComponent { } return (
{ diff --git a/src/core_modules/capture-core/components/D2Form/D2SectionFields.component.js b/src/core_modules/capture-core/components/D2Form/D2SectionFields.component.js index 440c3f7196..c9b12c15c0 100644 --- a/src/core_modules/capture-core/components/D2Form/D2SectionFields.component.js +++ b/src/core_modules/capture-core/components/D2Form/D2SectionFields.component.js @@ -17,6 +17,15 @@ import { FormFieldPlugin } from './FormFieldPlugin'; import { FormFieldPluginConfig } from '../../metaData/FormFieldPluginConfig'; const CustomFormHOC = withCustomForm()(withDivider()(withAlternateBackgroundColors()(FormBuilderContainer))); + +const styles = { + horizontalSection: { + display: 'flex', + flexWrap: 'wrap', + alignItems: 'flex-start', + }, +}; + type FormsValues = { [id: string]: any }; @@ -178,8 +187,8 @@ export class D2SectionFieldsComponent extends Component { getInvalidFields() { const messagesInvalidFields = Object.keys(this.props.rulesMessages).reduce((accInvalidFields, key) => { if (this.props.rulesMessages[key] && - (this.props.rulesMessages[key][messageStateKeys.ERROR] || - this.props.rulesMessages[key][messageStateKeys.ERROR_ON_COMPLETE])) { + (this.props.rulesMessages[key][messageStateKeys.ERROR] || + this.props.rulesMessages[key][messageStateKeys.ERROR_ON_COMPLETE])) { accInvalidFields[key] = true; } return accInvalidFields; @@ -273,19 +282,24 @@ export class D2SectionFieldsComponent extends Component { this.buildRulesCompulsoryErrors(); return ( - // $FlowFixMe[cannot-spread-inexact] automated comment - { this.formBuilderInstance = instance; }} - id={formId} - fields={this.getFieldConfigWithRulesEffects()} - dataElements={this.formFields} - values={values} - onUpdateField={this.handleUpdateField} - onUpdateFieldAsync={this.handleUpdateFieldAsync} - validateIfNoUIData - loadNr={loadNr} - {...passOnProps} - /> +
+ {/* $FlowFixMe[cannot-spread-inexact] automated comment */} + { this.formBuilderInstance = instance; }} + id={formId} + fields={this.getFieldConfigWithRulesEffects()} + dataElements={this.formFields} + values={values} + onUpdateField={this.handleUpdateField} + onUpdateFieldAsync={this.handleUpdateFieldAsync} + validateIfNoUIData + loadNr={loadNr} + {...passOnProps} + /> +
); } }