feat: make collapsed section same width of when they are expanded

dhis2 · Sep 9, 2024 · 98217d2 · 98217d2
1 parent 4af627b
commit 98217d2
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 27 deletions.
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
@@ -24,13 +24,14 @@ export const PivotedCategoryComboTableBody = React.memo(
         categoryCombo,
         dataElements,
         greyedFields,
-        /* 
+        /*
         filterText,
         globalFilterText,
         maxColumnsInSection,
         renderRowTotals,
         renderColumnTotals,*/
         displayOptions,
+        collapsed,
     }) {
         const { data: metadata } = useMetadata()
 
@@ -68,7 +69,12 @@ export const PivotedCategoryComboTableBody = React.memo(
             <>
                 {rowsMatrix.map((row, id /** todo: find suitable id */) => {
                     return (
-                        <TableRow key={id}>
+                        <TableRow
+                            key={id}
+                            className={classNames({
+                                [styles.sectionRowCollapsed]: collapsed,
+                            })}
+                        >
                             {row.map((fieldInRow) => {
                                 if (
                                     fieldInRow.type === 'columnHeader' ||
@@ -150,6 +156,7 @@ PivotedCategoryComboTableBody.propTypes = {
     categoryCombo: PropTypes.shape({
         id: PropTypes.string.isRequired,
     }),
+    collapsed: PropTypes.bool,
     dataElements: PropTypes.arrayOf(
         PropTypes.shape({
             id: PropTypes.string.isRequired,

diff --git a/src/data-workspace/category-combo-table-body/category-combo-table-body.js b/src/data-workspace/category-combo-table-body/category-combo-table-body.js
@@ -1,8 +1,8 @@
-import { TableBody, TableRow, TableCell } from '@dhis2/ui'
+import { TableBody, TableCell, TableRow } from '@dhis2/ui'
 import cx from 'classnames'
 import PropTypes from 'prop-types'
 import React, { useCallback } from 'react'
-import { useMetadata, selectors } from '../../shared/index.js'
+import { selectors, useMetadata } from '../../shared/index.js'
 import { DataEntryCell, DataEntryField } from '../data-entry-cell/index.js'
 import { getFieldId } from '../get-field-id.js'
 import { TableBodyHiddenByFiltersRow } from '../table-body-hidden-by-filter-row.js'
@@ -21,6 +21,7 @@ export const CategoryComboTableBody = React.memo(
         maxColumnsInSection,
         renderRowTotals,
         renderColumnTotals,
+        collapsed,
     }) {
         const { data: metadata } = useMetadata()
 
@@ -59,7 +60,11 @@ export const CategoryComboTableBody = React.memo(
         const hiddenItemsCount = filteredDeIds.size
 
         return (
-            <TableBody>
+            <TableBody
+                className={cx({
+                    [styles.sectionRowCollapsed]: collapsed,
+                })}
+            >
                 <CategoryComboTableBodyHeader
                     categoryOptionCombos={sortedCOCs}
                     categories={categories}
@@ -128,6 +133,7 @@ CategoryComboTableBody.propTypes = {
     categoryCombo: PropTypes.shape({
         id: PropTypes.string.isRequired,
     }),
+    collapsed: PropTypes.bool,
     dataElements: PropTypes.arrayOf(
         PropTypes.shape({
             id: PropTypes.string.isRequired,

diff --git a/src/data-workspace/section-form/displayOptions.js b/src/data-workspace/section-form/displayOptions.js
@@ -11,7 +11,6 @@ export const getDisplayOptions = (section) => {
 
     try {
         const { displayOptions: displayOptionString } = section
-
         return JSON.parse(displayOptionString)
     } catch (e) {
         console.error(

diff --git a/src/data-workspace/section-form/section.js b/src/data-workspace/section-form/section.js
@@ -114,9 +114,9 @@ export function SectionFormSection({
                                 >
                                     {collapsible &&
                                         (showSectionContent ? (
-                                            <IconChevronUp16 color="white" />
+                                            <IconChevronUp16 color="var(--colors-white)" />
                                         ) : (
-                                            <IconChevronDown16 color="white" />
+                                            <IconChevronDown16 color="var(--colors-white)" />
                                         ))}
                                 </div>
                                 <div>
@@ -162,23 +162,23 @@ export function SectionFormSection({
                         </TableRowHead>
                     )}
                 </TableHead>
-                {showSectionContent &&
-                    groupedDataElements.map(
-                        ({ categoryCombo, dataElements }, i) => (
-                            <TableComponent
-                                key={i} //if disableDataElementAutoGroup then duplicate catCombo-ids, so have to use index
-                                categoryCombo={categoryCombo}
-                                dataElements={dataElements}
-                                filterText={filterText}
-                                globalFilterText={globalFilterText}
-                                maxColumnsInSection={maxColumnsInSection}
-                                renderRowTotals={section.showRowTotals}
-                                renderColumnTotals={section.showColumnTotals}
-                                greyedFields={greyedFields}
-                                displayOptions={displayOptions}
-                            />
-                        )
-                    )}
+                {groupedDataElements.map(
+                    ({ categoryCombo, dataElements }, i) => (
+                        <TableComponent
+                            key={i} //if disableDataElementAutoGroup then duplicate catCombo-ids, so have to use index
+                            categoryCombo={categoryCombo}
+                            dataElements={dataElements}
+                            filterText={filterText}
+                            globalFilterText={globalFilterText}
+                            maxColumnsInSection={maxColumnsInSection}
+                            renderRowTotals={section.showRowTotals}
+                            renderColumnTotals={section.showColumnTotals}
+                            greyedFields={greyedFields}
+                            displayOptions={displayOptions}
+                            collapsed={!showSectionContent}
+                        />
+                    )
+                )}
                 {indicators.length > 0 && showSectionContent && (
                     <IndicatorsTableBody
                         indicators={indicators}

diff --git a/src/data-workspace/table-body.module.css b/src/data-workspace/table-body.module.css
@@ -3,7 +3,7 @@
     padding: 8px !important;
     height: auto !important;
     font-size: 13px !important;
-    line-height: 15px !important; 
+    line-height: 15px !important;
 }
 
 .tableHeader {
@@ -12,6 +12,10 @@
     font-weight: 500;
 }
 
+.sectionRowCollapsed{
+    visibility: collapse;
+}
+
 .categoryNameHeader {
     composes: tableHeader;
     font-weight: 300;
@@ -99,4 +103,4 @@
 }
 .category {
     font-weight: 300;
-}
+}