feat(DHIS2-16132): add ability to transpose/pivot a section form

dhis2 · Feb 20, 2024 · daa42bb · daa42bb
1 parent f54e9a0
commit daa42bb
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 1 deletion.
diff --git a/package.json b/package.json
@@ -128,5 +128,8 @@
         "href": ".."
       }
     }
+  },
+  "engines": {
+    "node": "14"
   }
 }
diff --git a/src/EditModel/SectionDialog.component.js b/src/EditModel/SectionDialog.component.js
@@ -26,7 +26,9 @@ class SectionDialog extends React.Component {
 
         this.state = {
             categoryCombo: false,
-            disableDataElementAutoGroup: false
+            disableDataElementAutoGroup: false,
+            transposeSection: false,
+            groupTransposedSection: false
         };
         dataElementStore.setState([]);
         assignedDataElementStore.setState([]);
@@ -85,6 +87,8 @@ class SectionDialog extends React.Component {
                 description: props.sectionModel.description,
                 showRowTotals: props.sectionModel.showRowTotals,
                 showColumnTotals: props.sectionModel.showColumnTotals,
+                transposeSection: props.sectionModel.transposeSection,
+                groupTransposedSection: props.sectionModel.groupTransposedSection,
                 disableDataElementAutoGroup: props.sectionModel.disableDataElementAutoGroup,
                 filterText: '',
                 filterDataElementIds,
@@ -129,6 +133,17 @@ class SectionDialog extends React.Component {
         this.setState({ disableDataElementAutoGroup: value })
     }
 
+    handleTransposeSectionChange = (e, value) => {
+        this.setState({ 
+            transposeSection: value,
+            groupTransposedSection: !value ? false : this.state.groupTransposedSection
+        })
+    }
+
+    handleGroupTransposedSectionChange = (e, value) => {
+        this.setState({ groupTransposedSection: value })
+    }
+
     handleFilterChange = (e) => {
         this.setState({ filterText: e.target.value });
     }
@@ -216,6 +231,8 @@ class SectionDialog extends React.Component {
             description: this.state.description,
             showRowTotals: this.state.showRowTotals,
             showColumnTotals: this.state.showColumnTotals,
+            transposeSection: this.state.transposeSection,
+            groupTransposedSection: this.state.groupTransposedSection,
             disableDataElementAutoGroup: this.state.disableDataElementAutoGroup,
             dataElements: assignedDataElementStore.state.map(de => ({ id: de })),
             indicators: assignedIndicatorStore.state.map(i => ({ id: i })),
@@ -396,6 +413,22 @@ class SectionDialog extends React.Component {
                     style={{ margin: '16px 0' }}
                     onCheck={this.handleDisableDataElementAutoGroupChange}
                 />
+                <label>
+                    { this.getTranslation('section_config_options')}
+                </label>
+                <Checkbox
+                    label={this.getTranslation('transpose_section')}
+                    checked={this.state.transposeSection}
+                    style={{ margin: '16px 0' }}
+                    onCheck={this.handleTransposeSectionChange}
+                />
+                <Checkbox
+                    label={this.getTranslation('transpose_group_by_data_element')}
+                    checked={this.state.groupTransposedSection}
+                    style={{ margin: '16px 0' }}
+                    disabled={!this.state.transposeSection}
+                    onCheck={this.handleGroupTransposedSectionChange}
+                />
                 {this.renderFilters()}
                 {this.renderAvailableOptions()}
             </Dialog>

diff --git a/src/i18n/i18n_module_en.properties b/src/i18n/i18n_module_en.properties
@@ -1779,6 +1779,9 @@ att_opt_combo=Complete registration att opt combo
 open_user_guide=Open user guide
 section_id=Section ID
 show_row_totals=Show row totals
+transpose_section=Pivot section (transpose)
+transpose_group_by_data_element=Group pivoted section by data element
+section_config_options=Section configuration options
 show_column_totals=Show column totals
 category_combo_filter=Category combo filter
 no_filter=<No filter>