fixes

Signed-off-by: Ayoub LABIDI <[email protected]>

Author: ayolab

src/pages/common/table-selection.tsx

@@ -5,13 +5,14 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-import { FunctionComponent, useCallback, useMemo, useRef, useState } from 'react';
+import { FunctionComponent, useCallback, useEffect, useMemo, useRef } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { CustomAGGrid } from '@gridsuite/commons-ui';
 import { Grid, Typography } from '@mui/material';
 import { AgGridReact } from 'ag-grid-react';
 import { ColDef, GetRowIdParams, GridReadyEvent } from 'ag-grid-community';
 import { defaultColDef, defaultRowSelection } from './table-config';
+import { useTableSelection } from 'utils/hooks';
 
 export interface TableSelectionProps {
     itemName: string;
@@ -21,19 +22,12 @@ export interface TableSelectionProps {
 }
 
 const TableSelection: FunctionComponent<TableSelectionProps> = (props) => {
-    const [selectedRowsLength, setSelectedRowsLength] = useState(0);
+    const { rowsSelection, onSelectionChanged: handleSelection, onFilterChanged } = useTableSelection<{ id: string }>();
     const gridRef = useRef<AgGridReact>(null);
 
-    const handleEquipmentSelectionChanged = useCallback(() => {
-        const selectedRows = gridRef.current?.api.getSelectedRows();
-        if (selectedRows == null) {
-            setSelectedRowsLength(0);
-            props.onSelectionChanged([]);
-        } else {
-            setSelectedRowsLength(selectedRows.length);
-            props.onSelectionChanged(selectedRows.map((r) => r.id));
-        }
-    }, [props]);
+    useEffect(() => {
+        props.onSelectionChanged(rowsSelection.map((r) => r.id));
+    }, [rowsSelection, props]);
 
     const rowData = useMemo(() => {
         return props.tableItems.map((str) => ({ id: str }));
@@ -72,7 +66,7 @@ const TableSelection: FunctionComponent<TableSelectionProps> = (props) => {
             <Grid item>
                 <Typography variant="subtitle1">
                     <FormattedMessage id={props.itemName}></FormattedMessage>
-                    {` (${selectedRowsLength} / ${rowData?.length ?? 0})`}
+                    {` (${rowsSelection?.length} / ${rowData?.length ?? 0})`}
                 </Typography>
             </Grid>
             <Grid item xs>
@@ -84,7 +78,8 @@ const TableSelection: FunctionComponent<TableSelectionProps> = (props) => {
                     defaultColDef={defaultColDef}
                     rowSelection={defaultRowSelection}
                     getRowId={getRowId}
-                    onSelectionChanged={handleEquipmentSelectionChanged}
+                    onSelectionChanged={handleSelection}
+                    onFilterChanged={onFilterChanged}
                     onGridReady={onGridReady}
                 />
             </Grid>

src/pages/groups/groups-table.tsx

@@ -27,7 +27,7 @@ const GroupsTable: FunctionComponent<GroupsTableProps> = (props) => {
     const intl = useIntl();
     const { snackError } = useSnackMessage();
 
-    const { rowsSelection, onSelectionChanged } = useTableSelection<GroupInfos>();
+    const { rowsSelection, onSelectionChanged, onFilterChanged } = useTableSelection<GroupInfos>();
     const [showDeletionDialog, setShowDeletionDialog] = useState(false);
 
     function getRowId(params: GetRowIdParams<GroupInfos>): string {
@@ -110,6 +110,7 @@ const GroupsTable: FunctionComponent<GroupsTableProps> = (props) => {
                 rowSelection={defaultRowSelection}
                 onRowClicked={props.onRowClicked}
                 onSelectionChanged={onSelectionChanged}
+                onFilterChanged={onFilterChanged}
             >
                 <GridButton
                     labelId="groups.table.toolbar.add.label"

src/pages/profiles/profiles-table.tsx

@@ -27,7 +27,7 @@ const ProfilesTable: FunctionComponent<ProfilesTableProps> = (props) => {
     const intl = useIntl();
     const { snackError } = useSnackMessage();
 
-    const { rowsSelection, onSelectionChanged } = useTableSelection<UserProfile>();
+    const { rowsSelection, onSelectionChanged, onFilterChanged } = useTableSelection<UserProfile>();
     const [showDeletionDialog, setShowDeletionDialog] = useState(false);
 
     function getRowId(params: GetRowIdParams<UserProfile>): string {
@@ -125,6 +125,7 @@ const ProfilesTable: FunctionComponent<ProfilesTableProps> = (props) => {
                 rowSelection={defaultRowSelection}
                 onRowClicked={props.onRowClicked}
                 onSelectionChanged={onSelectionChanged}
+                onFilterChanged={onFilterChanged}
             >
                 <GridButton
                     labelId="profiles.table.toolbar.add.label"

src/pages/users/users-table.tsx

@@ -33,7 +33,7 @@ const UsersTable: FunctionComponent<UsersTableProps> = (props) => {
     const intl = useIntl();
     const { snackError } = useSnackMessage();
 
-    const { rowsSelection, onSelectionChanged } = useTableSelection<UserInfos>();
+    const { rowsSelection, onSelectionChanged, onFilterChanged } = useTableSelection<UserInfos>();
     const [showDeletionDialog, setShowDeletionDialog] = useState(false);
 
     function getRowId(params: GetRowIdParams<UserInfos>): string {
@@ -142,6 +142,7 @@ const UsersTable: FunctionComponent<UsersTableProps> = (props) => {
                 rowSelection={defaultRowSelection}
                 onRowClicked={props.onRowClicked}
                 onSelectionChanged={onSelectionChanged}
+                onFilterChanged={onFilterChanged}
                 tooltipShowDelay={1000}
             >
                 <GridButton

src/utils/hooks.ts

@@ -5,8 +5,8 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-import { SelectionChangedEvent } from "ag-grid-community";
-import { useCallback, useState } from "react";
+import { FilterChangedEvent, GridApi, IRowNode, SelectionChangedEvent } from 'ag-grid-community';
+import { useCallback, useState } from 'react';
 
 export function useDebugRender(label: string) {
     // uncomment when you want the output in the console
@@ -19,21 +19,35 @@ export function useDebugRender(label: string) {
 
 /**
  * Custom hook to handle table row selection with proper filtering support
- * @returns Selection state and handler for AG Grid's onSelectionChanged
+ * @returns Selection state and handlers for AG Grid's selection and filter changes
  */
 export function useTableSelection<T>() {
     const [rowsSelection, setRowsSelection] = useState<T[]>([]);
 
-    const onSelectionChanged = useCallback((event: SelectionChangedEvent<T, {}>) => {
-        // Get only selected rows that are currently visible (after filtering)
+    // update visible selections based on current filter state
+    const updateVisibleSelection = useCallback((api: GridApi) => {
         const visibleSelectedRows: T[] = [];
-        event.api.forEachNodeAfterFilterAndSort((node) => {
+        api.forEachNodeAfterFilterAndSort((node: IRowNode) => {
             if (node.isSelected() && node.data) {
                 visibleSelectedRows.push(node.data);
             }
         });
         setRowsSelection(visibleSelectedRows);
     }, []);
 
-    return { rowsSelection, setRowsSelection, onSelectionChanged };
+    const onSelectionChanged = useCallback(
+        (event: SelectionChangedEvent) => {
+            updateVisibleSelection(event.api);
+        },
+        [updateVisibleSelection]
+    );
+
+    const onFilterChanged = useCallback(
+        (event: FilterChangedEvent) => {
+            updateVisibleSelection(event.api);
+        },
+        [updateVisibleSelection]
+    );
+
+    return { rowsSelection, onSelectionChanged, onFilterChanged };
 }