update matrix grouped logic

dhis2 · Feb 29, 2024 · 019f2e6 · 019f2e6
1 parent 4ae88d1
commit 019f2e6
Show file tree

Hide file tree

Showing 12 changed files with 5,405 additions and 232 deletions.
diff --git a/...rkspace/category-combo-table-body-pivoted/__snapshots__/generate-form-matrix.test.js.snap b/...rkspace/category-combo-table-body-pivoted/__snapshots__/generate-form-matrix.test.js.snap
diff --git a/src/data-workspace/category-combo-table-body-pivoted/category-combo-table-body-pivoted.js b/src/data-workspace/category-combo-table-body-pivoted/category-combo-table-body-pivoted.js
@@ -10,7 +10,7 @@ import { useMetadata, selectors } from '../../shared/index.js'
 import { DataEntryCell, DataEntryField } from '../data-entry-cell/index.js'
 import { getFieldId } from '../get-field-id.js'
 import styles from '../table-body.module.css'
-import { generateFormMatrix } from './generate-form-matrix.js'
+import { generateFormMatrix } from './generate-form-matrix/index.js'
 
 export const PivotedCategoryComboTableBody = React.memo(
     function PivotedCategoryComboTableBody({
@@ -22,7 +22,7 @@ export const PivotedCategoryComboTableBody = React.memo(
         maxColumnsInSection,
         renderRowTotals,
         renderColumnTotals,
-        grouped
+        displayOptions
     }) {
         const { data: metadata } = useMetadata()
 
@@ -78,24 +78,26 @@ export const PivotedCategoryComboTableBody = React.memo(
             dataElements,
         }
 
-        const rowsMatrix = generateFormMatrix(options, grouped)
+        const rowsMatrix = generateFormMatrix(options, displayOptions)
 
         return (
             <>
                 {rowsMatrix.map((row, id /** todo: find suitable id */) => {
                     return (
                         <TableRow key={row.id}>
                             {row.map((fieldInRow) => {
-                                if (fieldInRow.type === 'columnHeader') {
+                                if (fieldInRow.type === 'columnHeader' || fieldInRow.type === 'rowHeader') {
                                     return (
                                         <TableCellHead
                                             key={fieldInRow.id}
                                             className={classNames([
                                                 styles.categoryNameHeader,
                                                 styles.noWrap,
-                                                // styles.centered
+
                                             ], {
-                                                [styles.centered]: fieldInRow.colSpan > 1
+                                                [styles.centered]: fieldInRow.type === 'rowHeader' || fieldInRow.metadataType === 'category',
+                                                [styles.minimumWidth]: fieldInRow.type === 'rowHeader',
+                                                [styles.dataElementRowHeader]: fieldInRow.metadataType === 'dataElement'
                                             })}
                                             colSpan={fieldInRow.colSpan}
                                             rowSpan={fieldInRow.rowSpan}
@@ -107,21 +109,6 @@ export const PivotedCategoryComboTableBody = React.memo(
                                     )
                                 }
 
-                                if (fieldInRow.type === 'group') {
-                                    return (
-                                        <TableCellHead
-                                            key={fieldInRow.id}
-                                            className={[
-                                                styles.groupHeader,
-                                                styles.noWrap,
-                                            ]}
-                                            colSpan={fieldInRow.colSpan}
-                                        >
-                                            {fieldInRow.displayName}
-                                        </TableCellHead>
-                                    )
-                                }
-
                                 if (fieldInRow.type === 'empty') {
                                     return (
                                         <TableCell
@@ -135,12 +122,6 @@ export const PivotedCategoryComboTableBody = React.memo(
                                     )
                                 }
 
-                                if (
-                                    fieldInRow.rowSpan > 1 &&
-                                    fieldInRow.notFirstInstance
-                                ) {
-                                    return null
-                                }
                                 if (fieldInRow.type === 'de') {
                                     return (
                                         <DataEntryCell key={fieldInRow.id}>
@@ -206,7 +187,7 @@ PivotedCategoryComboTableBody.propTypes = {
     globalFilterText: PropTypes.string,
     /** Greyed fields is a Set where .has(fieldId) is true if that field is greyed/disabled */
     greyedFields: PropTypes.instanceOf(Set),
-    grouped: PropTypes.bool,
+    groupedBy: PropTypes.arrayOf(PropTypes.string),
     maxColumnsInSection: PropTypes.number,
     renderColumnTotals: PropTypes.bool,
     renderRowTotals: PropTypes.bool,

diff --git a/src/data-workspace/category-combo-table-body-pivoted/generate-form-matrix.js b/src/data-workspace/category-combo-table-body-pivoted/generate-form-matrix.js
diff --git a/src/data-workspace/category-combo-table-body-pivoted/generate-form-matrix.test.js b/src/data-workspace/category-combo-table-body-pivoted/generate-form-matrix.test.js
@@ -4,6 +4,7 @@ describe('generate-form-matrix', () => {
     it('should create a transposed matrix', () => {
         const rowsMatrix = generateFormMatrix(options)
         expect(rowsMatrix).toIncludeSameMembers(expectedResult)
+        expect(rowsMatrix).toMatchSnapshot()
     })
 
     describe('grouping by data element', () => {
@@ -110,6 +111,11 @@ describe('generate-form-matrix', () => {
                 }
               ])
         })
+
+        it('should group create the matrix for grouped elements', () => {
+            const rowsMatrix = generateFormMatrix(options, true)
+            expect(rowsMatrix).toMatchSnapshot()
+        })
     })
 })
 

diff --git a/...rkspace/category-combo-table-body-pivoted/generate-form-matrix/generate-column-headers.js b/...rkspace/category-combo-table-body-pivoted/generate-form-matrix/generate-column-headers.js
@@ -0,0 +1,90 @@
+export const generateColumnHeaders = (options, groupedBy) => {
+    const {
+        metadata,
+        categoryOptionsDetails,
+        sortedCOCs,
+        categories,
+        dataElements,
+    } = options
+
+    const transposedOnly = groupedBy?.length === 0
+
+    const headerFields = transposedOnly
+        ? [...categories, ...dataElements]
+        : [...categories.filter((cat) => !groupedBy.includes(cat.id))]
+
+    const transposedCategories = categories.filter((cat) =>
+        groupedBy.includes(cat.id)
+    )
+
+    if (transposedOnly) {
+        return [
+            [
+                ...headerFields.map((header) => {
+                    return {
+                        id: header?.id,
+                        displayFormName: header?.displayFormName,
+                        type: 'columnHeader',
+                        metadataType: header.valueType ? 'dataElement': 'category',
+                    }
+                }),
+            ],
+        ]
+    }
+
+    const columnsHeader = [
+        {
+            id: -1 /** todo: unique id */,
+            type: 'empty',
+            colSpan: (categories.length - headerFields.length) * 2, // 1 for data element
+        },
+        ...headerFields.map((header) => {
+            const isCategory = !!header.categoryOptions // todo: cleaner way to distinguish categories from data elements in header
+
+            return {
+                id: header?.id,
+                displayFormName: header?.displayFormName,
+                type: 'columnHeader',
+                metadataType: isCategory ? 'category' : 'dataElement',
+                colSpan: header.categoryOptions?.length ?? '',
+            }
+        }),
+    ]
+
+    const columnsSubHeader = [
+        {
+            id: -1 /** todo: unique id */,
+            type: 'empty',
+            colSpan:
+                (categories.length - headerFields.length) * 2 -
+                transposedCategories.length, // 1 for data element
+        },
+        ...transposedCategories.map((category) => {
+            return {
+                id: category.id,
+                displayFormName: category?.displayFormName,
+                type: 'columnHeader',
+                metadataType: 'category',
+            }
+        }),
+        ...headerFields
+            .map((header) => {
+                return header.categoryOptions?.map((co) => {
+                    const optionMatch = categoryOptionsDetails.find(
+                        (cod) => cod.id === co
+                    )
+
+                    return {
+                        id: optionMatch?.id,
+                        displayFormName: optionMatch?.displayFormName,
+                        type: 'columnHeader',
+                        metadataType: 'categoryOption',
+                    }
+                })
+            })
+            .flat(),
+    ]
+
+
+    return [[...columnsHeader], [...columnsSubHeader]]
+}