Merge pull request #1632 from bcgov/feat/daniel-auto-grid-resize-1580

feat: Dynamically change grid from autoHeight -> Normal
bcgov · Jan 11, 2025 · 98d8346 · 98d8346
2 parents 994ce63 + a48488a
commit 98d8346
Show file tree

Hide file tree

Showing 2 changed files with 146 additions and 88 deletions.
diff --git a/frontend/src/components/BCDataGrid/BCGridBase.jsx b/frontend/src/components/BCDataGrid/BCGridBase.jsx
@@ -3,27 +3,78 @@ import DataGridLoading from '@/components/DataGridLoading'
 import { AgGridReact } from '@ag-grid-community/react'
 import '@ag-grid-community/styles/ag-grid.css'
 import '@ag-grid-community/styles/ag-theme-material.css'
-import { forwardRef, useCallback, useMemo } from 'react'
+import {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState
+} from 'react'
 import { useSearchParams } from 'react-router-dom'
 
-export const BCGridBase = forwardRef(({ autoSizeStrategy, ...props }, ref) => {
-  const [searchParams] = useSearchParams()
-  const highlightedId = searchParams.get('hid')
+const ROW_HEIGHT = 45
 
-  const loadingOverlayComponent = useMemo(() => DataGridLoading, [])
+export const BCGridBase = forwardRef(
+  ({ autoSizeStrategy, autoHeight, ...props }, ref) => {
+    const [searchParams] = useSearchParams()
+    const highlightedId = searchParams.get('hid')
 
-  const getRowStyle = useCallback((params) => {
-    if (params.node.id === highlightedId) {
-      return { backgroundColor: '#fade81' }
-    }
-  }, [])
+    const loadingOverlayComponent = useMemo(() => DataGridLoading, [])
 
-  return (
-    <>
+    const getRowStyle = useCallback((params) => {
+      if (params.node.id === highlightedId) {
+        return { backgroundColor: '#fade81' }
+      }
+    }, [])
+
+    const gridApiRef = useRef(null)
+    const [domLayout, setDomLayout] = useState('autoHeight')
+    const [height, setHeight] = useState('auto')
+
+    const determineHeight = useCallback(() => {
+      if (!gridApiRef.current || !autoHeight) {
+        return
+      }
+
+      const maxVisibleRows = (window.innerHeight * 0.75) / ROW_HEIGHT
+
+      const displayedRowCount = gridApiRef.current.getDisplayedRowCount()
+      if (displayedRowCount <= maxVisibleRows) {
+        setDomLayout('autoHeight')
+        setHeight('auto')
+      } else {
+        setDomLayout('normal')
+        setHeight('75vh')
+      }
+    }, [])
+
+    const onGridReady = useCallback(
+      (params) => {
+        gridApiRef.current = params.api
+        determineHeight()
+        props.onGridReady(params)
+      },
+      [determineHeight]
+    )
+
+    useEffect(() => {
+      const handleResize = () => {
+        determineHeight()
+      }
+
+      window.addEventListener('resize', handleResize)
+      return () => {
+        window.removeEventListener('resize', handleResize)
+      }
+    }, [determineHeight])
+
+    return (
       <AgGridReact
         ref={ref}
+        domLayout={domLayout}
+        containerStyle={{ height }}
         loadingOverlayComponent={loadingOverlayComponent}
-        domLayout="autoHeight"
         loadingOverlayComponentParams={{
           loadingMessage: 'One moment please...'
         }}
@@ -38,13 +89,15 @@ export const BCGridBase = forwardRef(({ autoSizeStrategy, ...props }, ref) => {
         enableBrowserTooltips={true}
         suppressPaginationPanel
         suppressScrollOnNewData
+        onRowDataUpdated={determineHeight}
         getRowStyle={getRowStyle}
-        rowHeight={45}
+        rowHeight={ROW_HEIGHT}
         headerHeight={40}
         {...props}
+        onGridReady={onGridReady}
       />
-    </>
-  )
-})
+    )
+  }
+)
 
 BCGridBase.displayName = 'BCGridBase'
diff --git a/frontend/src/components/BCDataGrid/BCGridEditor.jsx b/frontend/src/components/BCDataGrid/BCGridEditor.jsx
@@ -299,84 +299,89 @@ export const BCGridEditor = ({
         getRowId={(params) => params.data.id}
         onCellClicked={onCellClicked}
         onCellEditingStopped={handleOnCellEditingStopped}
+        autoHeight={true}
         {...props}
       />
-      <BCBox sx={{ height: '40px', marginTop: '15px', width: '100%' }}>
+      <BCBox sx={{ height: '40px', margin: '15px 0', width: '100%' }}>
         <BCAlert2 ref={alertRef} data-test="alert-box" />
       </BCBox>
-      {showAddRowsButton && (
-        <BCBox mt={2}>
-          <BCButton
-            ref={buttonRef}
-            variant="outlined"
-            color="dark"
-            size="small"
-            startIcon={<FontAwesomeIcon icon={faPlus} className="small-icon" />}
-            endIcon={
-              addMultiRow && (
-                <FontAwesomeIcon icon={faCaretDown} className="small-icon" />
-              )
-            }
-            onClick={
-              addMultiRow ? handleAddRowsClick : () => handleAddRowsInternal(1)
-            }
-          >
-            Add row
-          </BCButton>
-          {addMultiRow && (
-            <Menu
-              anchorEl={anchorEl}
-              open={Boolean(anchorEl)}
-              onClose={handleAddRowsClose}
-              slotProps={{
-                paper: {
-                  style: {
-                    width: buttonRef.current?.offsetWidth
+      <BCBox flex={1}>
+        {showAddRowsButton && (
+          <>
+            <BCButton
+              ref={buttonRef}
+              variant="outlined"
+              color="dark"
+              startIcon={
+                <FontAwesomeIcon icon={faPlus} className="small-icon" />
+              }
+              endIcon={
+                addMultiRow && (
+                  <FontAwesomeIcon icon={faCaretDown} className="small-icon" />
+                )
+              }
+              onClick={
+                addMultiRow
+                  ? handleAddRowsClick
+                  : () => handleAddRowsInternal(1)
+              }
+            >
+              Add row
+            </BCButton>
+            {addMultiRow && (
+              <Menu
+                anchorEl={anchorEl}
+                open={Boolean(anchorEl)}
+                onClose={handleAddRowsClose}
+                slotProps={{
+                  paper: {
+                    style: {
+                      width: buttonRef.current?.offsetWidth
+                    }
                   }
-                }
+                }}
+              >
+                <MenuItem onClick={() => handleAddRowsInternal(1)}>
+                  1 row
+                </MenuItem>
+                <MenuItem onClick={() => handleAddRowsInternal(5)}>
+                  5 rows
+                </MenuItem>
+                <MenuItem onClick={() => handleAddRowsInternal(10)}>
+                  10 rows
+                </MenuItem>
+              </Menu>
+            )}
+          </>
+        )}
+        {saveButtonProps.enabled && (
+          <>
+            <BCButton
+              onClick={onSaveExit}
+              variant="contained"
+              color="primary"
+              style={{
+                marginLeft: 20
               }}
             >
-              <MenuItem onClick={() => handleAddRowsInternal(1)}>
-                1 row
-              </MenuItem>
-              <MenuItem onClick={() => handleAddRowsInternal(5)}>
-                5 rows
-              </MenuItem>
-              <MenuItem onClick={() => handleAddRowsInternal(10)}>
-                10 rows
-              </MenuItem>
-            </Menu>
-          )}
-        </BCBox>
-      )}
-      {saveButtonProps.enabled && (
-        <>
-          <BCButton
-            onClick={onSaveExit}
-            variant="contained"
-            color="primary"
-            style={{
-              gap: 8,
-              marginTop: 20
-            }}
-          >
-            {saveButtonProps.text}
-          </BCButton>
-          <BCModal
-            open={showCloseModal}
-            onClose={() => {
-              setShowCloseModal(false)
-            }}
-            data={{
-              title: saveButtonProps.text,
-              content: saveButtonProps.confirmText,
-              primaryButtonAction: saveButtonProps.onSave,
-              primaryButtonText: saveButtonProps.confirmLabel,
-              secondaryButtonText: t('cancelBtn')
-            }}
-          />
-        </>
-      )}
+              {saveButtonProps.text}
+            </BCButton>
+            <BCModal
+              open={showCloseModal}
+              onClose={() => {
+                setShowCloseModal(false)
+              }}
+              data={{
+                title: saveButtonProps.text,
+                content: saveButtonProps.confirmText,
+                primaryButtonAction: saveButtonProps.onSave,
+                primaryButtonText: saveButtonProps.confirmLabel,
+                secondaryButtonText: t('cancelBtn')
+              }}
+            />
+          </>
+        )}
+      </BCBox>
     </BCBox>
   )
 }