From 93e51fb1e8132df419fb6a06b9f241a9a7652e87 Mon Sep 17 00:00:00 2001 From: achour94 Date: Sun, 12 Jan 2025 17:35:50 +0100 Subject: [PATCH 1/2] migrate aggrid into v33 Signed-off-by: achour94 --- package-lock.json | 37 ++++++++++++------- package.json | 8 ++-- src/components/customAGGrid/customAggrid.tsx | 3 +- .../ExplicitNamingFilterForm.tsx | 2 +- .../agGridTable/CustomAgGridTable.tsx | 13 ++++--- 5 files changed, 36 insertions(+), 27 deletions(-) diff --git a/package-lock.json b/package-lock.json index 937290c8..212ba3bd 100644 --- a/package-lock.json +++ b/package-lock.json @@ -63,8 +63,8 @@ "@typescript-eslint/eslint-plugin": "^7.0.0", "@typescript-eslint/parser": "^7.0.0", "@vitejs/plugin-react": "^4.2.1", - "ag-grid-community": "^31.0.0", - "ag-grid-react": "^31.2.0", + "ag-grid-community": "^33.0.3", + "ag-grid-react": "^33.0.3", "babel-eslint": "^10.1.0", "babel-preset-airbnb": "^5.0.0", "babel-preset-vite": "^1.1.3", @@ -119,8 +119,8 @@ "@mui/material": "^5.15.14", "@mui/system": "^5.15.15", "@mui/x-tree-view": "^6.17.0", - "ag-grid-community": "^31.0.0", - "ag-grid-react": "^31.2.0", + "ag-grid-community": "^33.0.3", + "ag-grid-react": "^33.0.3", "notistack": "^3.0.1", "papaparse": "^5.4.1", "react": "^18.2.0", @@ -6422,24 +6422,33 @@ "node": ">=0.4.0" } }, - "node_modules/ag-grid-community": { - "version": "31.2.0", - "resolved": "https://registry.npmjs.org/ag-grid-community/-/ag-grid-community-31.2.0.tgz", - "integrity": "sha512-Ija6X171Iq3mFZASZlriQIIdEFqA71rZIsjQD6KHy5lMmxnoseZTX2neThBav1gvr6SA6n5B2PD6eUHdZnrUfw==", + "node_modules/ag-charts-types": { + "version": "11.0.3", + "resolved": "https://registry.npmjs.org/ag-charts-types/-/ag-charts-types-11.0.3.tgz", + "integrity": "sha512-q7O2viQXPyO014QVH7KjFCUmQ/NvMBx9ReZtramQ44u+/aAa0ttLi/coK+V0Hse4/MG1eB/2XhgymdooQ0Kalg==", "dev": true }, + "node_modules/ag-grid-community": { + "version": "33.0.3", + "resolved": "https://registry.npmjs.org/ag-grid-community/-/ag-grid-community-33.0.3.tgz", + "integrity": "sha512-HZeVmVieZ5Gm9j09Itecqm+OIX8X6cU4TJToUbsXv3DxdO9SK5/s8aAJAwBHtNRXOhHrhqQYwrY2yc3OtzWwcQ==", + "dev": true, + "dependencies": { + "ag-charts-types": "11.0.3" + } + }, "node_modules/ag-grid-react": { - "version": "31.2.0", - "resolved": "https://registry.npmjs.org/ag-grid-react/-/ag-grid-react-31.2.0.tgz", - "integrity": "sha512-ObFdPmF3EC7/xWZX8NjrZjURePyFa72MWjb1ZgUqDP7Wq09OSXXyKBN1qXmfUIT3h4o5+os6tCQEqoo7Op+3ZA==", + "version": "33.0.3", + "resolved": "https://registry.npmjs.org/ag-grid-react/-/ag-grid-react-33.0.3.tgz", + "integrity": "sha512-6IcraSVqsUG/hzTeZ0D0dtddAcZKcWdN75ek/O+lCA6r22abJPe33nHBYVezkTV8k6D3JhA24mlTwduzn0GZLQ==", "dev": true, "dependencies": { - "ag-grid-community": "31.2.0", + "ag-grid-community": "33.0.3", "prop-types": "^15.8.1" }, "peerDependencies": { - "react": "^16.3.0 || ^17.0.0 || ^18.0.0", - "react-dom": "^16.3.0 || ^17.0.0 || ^18.0.0" + "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", + "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "node_modules/agent-base": { diff --git a/package.json b/package.json index 5b649b8c..7d4de4f9 100644 --- a/package.json +++ b/package.json @@ -55,8 +55,8 @@ "@mui/material": "^5.15.14", "@mui/system": "^5.15.15", "@mui/x-tree-view": "^6.17.0", - "ag-grid-community": "^31.0.0", - "ag-grid-react": "^31.2.0", + "ag-grid-community": "^33.0.3", + "ag-grid-react": "^33.0.3", "notistack": "^3.0.1", "papaparse": "^5.4.1", "react": "^18.2.0", @@ -103,8 +103,8 @@ "@typescript-eslint/eslint-plugin": "^7.0.0", "@typescript-eslint/parser": "^7.0.0", "@vitejs/plugin-react": "^4.2.1", - "ag-grid-community": "^31.0.0", - "ag-grid-react": "^31.2.0", + "ag-grid-community": "^33.0.3", + "ag-grid-react": "^33.0.3", "babel-eslint": "^10.1.0", "babel-preset-airbnb": "^5.0.0", "babel-preset-vite": "^1.1.3", diff --git a/src/components/customAGGrid/customAggrid.tsx b/src/components/customAGGrid/customAggrid.tsx index 7e2708f6..d5b17ad9 100644 --- a/src/components/customAGGrid/customAggrid.tsx +++ b/src/components/customAGGrid/customAggrid.tsx @@ -31,7 +31,7 @@ const onColumnResized = (params: ColumnResizedEvent) => { if (column && colDefinedMinWidth && finished) { const newWidth = column?.getActualWidth(); if (newWidth < colDefinedMinWidth) { - column?.setActualWidth(colDefinedMinWidth, params.source); + params.api.setColumnWidths([{ key: column, newWidth: colDefinedMinWidth }], finished, params.source); } } }; @@ -66,7 +66,6 @@ export const CustomAGGrid = React.forwardRef((pr ) { // FIXME: right type => Theme --> not defined there ( gridStudy and gridExplore definition not the same ) const theme: any = useTheme(); const [gridApi, setGridApi] = useState(null); @@ -243,11 +243,13 @@ export function CustomAgGridTable({ onGridReady={onGridReady} getLocaleText={getLocaleText} cacheOverflowSize={10} - rowSelection="multiple" + rowSelection={{ + mode: 'multiRow', + enableClickSelection, + }} rowDragEntireRow rowDragManaged onRowDragEnd={(e) => move(getIndex(e.node.data), e.overIndex)} - suppressBrowserResizeObserver columnDefs={columnDefs} detailRowAutoHeight onSelectionChanged={() => { @@ -259,7 +261,6 @@ export function CustomAgGridTable({ getRowId={(row) => row.data[FieldConstants.AG_GRID_ROW_UUID]} pagination={pagination} paginationPageSize={paginationPageSize} - suppressRowClickSelection={suppressRowClickSelection} alwaysShowVerticalScroll={alwaysShowVerticalScroll} stopEditingWhenCellsLoseFocus={stopEditingWhenCellsLoseFocus} {...props} From 22f82dc25bdd069faac56102bd8c15e53c63cd5d Mon Sep 17 00:00:00 2001 From: achour94 Date: Tue, 14 Jan 2025 11:49:57 +0100 Subject: [PATCH 2/2] Fix grad and checkboxes definition Signed-off-by: achour94 --- .../ExplicitNamingFilterForm.tsx | 14 +++++++------ .../agGridTable/CustomAgGridTable.tsx | 20 ++++--------------- 2 files changed, 12 insertions(+), 22 deletions(-) diff --git a/src/components/filter/explicitNaming/ExplicitNamingFilterForm.tsx b/src/components/filter/explicitNaming/ExplicitNamingFilterForm.tsx index 940e45ec..f129e0b5 100644 --- a/src/components/filter/explicitNaming/ExplicitNamingFilterForm.tsx +++ b/src/components/filter/explicitNaming/ExplicitNamingFilterForm.tsx @@ -13,10 +13,7 @@ import { v4 as uuid4 } from 'uuid'; import { UUID } from 'crypto'; import { FieldConstants } from '../../../utils/constants/fieldConstants'; import yup from '../../../utils/yupConfig'; -import { - CustomAgGridTable, - ROW_DRAGGING_SELECTION_COLUMN_DEF, -} from '../../inputs/reactHookForm/agGridTable/CustomAgGridTable'; +import { CustomAgGridTable } from '../../inputs/reactHookForm/agGridTable/CustomAgGridTable'; import { SelectInput } from '../../inputs/reactHookForm/selectInputs/SelectInput'; import { Generator, Load } from '../../../utils/types/equipmentTypes'; import { NumericEditor } from '../../inputs/reactHookForm/agGridTable/cellEditors/numericEditor'; @@ -129,11 +126,11 @@ export function ExplicitNamingFilterForm({ sourceFilterForExplicitNamingConversi const columnDefs = useMemo(() => { const newColumnDefs: any[] = [ - ...ROW_DRAGGING_SELECTION_COLUMN_DEF, { headerName: intl.formatMessage({ id: FieldConstants.EQUIPMENT_ID, }), + rowDrag: true, field: FieldConstants.EQUIPMENT_ID, editable: true, singleClickEdit: true, @@ -246,7 +243,12 @@ export function ExplicitNamingFilterForm({ sourceFilterForExplicitNamingConversi makeDefaultRowData={makeDefaultRowData} pagination paginationPageSize={100} - enableClickSelection={false} + rowSelection={{ + mode: 'multiRow', + enableClickSelection: false, + checkboxes: true, + headerCheckbox: true, + }} alwaysShowVerticalScroll stopEditingWhenCellsLoseFocus csvProps={{ diff --git a/src/components/inputs/reactHookForm/agGridTable/CustomAgGridTable.tsx b/src/components/inputs/reactHookForm/agGridTable/CustomAgGridTable.tsx index d2710f90..547a8ef3 100644 --- a/src/components/inputs/reactHookForm/agGridTable/CustomAgGridTable.tsx +++ b/src/components/inputs/reactHookForm/agGridTable/CustomAgGridTable.tsx @@ -12,19 +12,10 @@ import 'ag-grid-community/styles/ag-grid.css'; import 'ag-grid-community/styles/ag-theme-alpine.css'; import { Box, useTheme } from '@mui/material'; import { useIntl } from 'react-intl'; -import { CellEditingStoppedEvent, ColumnState, SortChangedEvent } from 'ag-grid-community'; +import { CellEditingStoppedEvent, ColumnState, RowSelectionOptions, SortChangedEvent } from 'ag-grid-community'; import { BottomRightButtons } from './BottomRightButtons'; import { FieldConstants } from '../../../../utils/constants/fieldConstants'; -export const ROW_DRAGGING_SELECTION_COLUMN_DEF = [ - { - rowDrag: true, - headerCheckboxSelection: true, - checkboxSelection: true, - maxWidth: 50, - }, -]; - const style = (customProps: any) => ({ grid: (theme: any) => ({ width: 'auto', @@ -92,7 +83,7 @@ export interface CustomAgGridTableProps { defaultColDef: unknown; pagination: boolean; paginationPageSize: number; - enableClickSelection: boolean; + rowSelection?: RowSelectionOptions | 'single' | 'multiple'; alwaysShowVerticalScroll: boolean; stopEditingWhenCellsLoseFocus: boolean; } @@ -106,7 +97,7 @@ export function CustomAgGridTable({ defaultColDef, pagination, paginationPageSize, - enableClickSelection, + rowSelection, alwaysShowVerticalScroll, stopEditingWhenCellsLoseFocus, ...props @@ -243,10 +234,7 @@ export function CustomAgGridTable({ onGridReady={onGridReady} getLocaleText={getLocaleText} cacheOverflowSize={10} - rowSelection={{ - mode: 'multiRow', - enableClickSelection, - }} + rowSelection={rowSelection || 'multiple'} rowDragEntireRow rowDragManaged onRowDragEnd={(e) => move(getIndex(e.node.data), e.overIndex)}