diff --git a/src/pages/common/table-selection.tsx b/src/pages/common/table-selection.tsx index 564a2d1..8cf4c22 100644 --- a/src/pages/common/table-selection.tsx +++ b/src/pages/common/table-selection.tsx @@ -20,6 +20,11 @@ export interface TableSelectionProps { onSelectionChanged: (selectedItems: string[]) => void; } +const rowSelection = { + ...defaultRowSelection, + headerCheckbox: false, +}; + const TableSelection: FunctionComponent = (props) => { const [selectedRowsLength, setSelectedRowsLength] = useState(0); const gridRef = useRef(null); @@ -82,7 +87,7 @@ const TableSelection: FunctionComponent = (props) => { rowData={rowData} columnDefs={columnDefs} defaultColDef={defaultColDef} - rowSelection={defaultRowSelection} + rowSelection={rowSelection} getRowId={getRowId} onSelectionChanged={handleEquipmentSelectionChanged} onGridReady={onGridReady} diff --git a/src/pages/groups/groups-table.tsx b/src/pages/groups/groups-table.tsx index 16cca42..94591b6 100644 --- a/src/pages/groups/groups-table.tsx +++ b/src/pages/groups/groups-table.tsx @@ -10,11 +10,12 @@ import { useIntl } from 'react-intl'; import { GroupAdd } from '@mui/icons-material'; import { GridButton, GridButtonDelete, GridTable, GridTableRef } from '../../components/Grid'; import { GroupInfos, UserAdminSrv, UserInfos } from '../../services'; -import { ColDef, GetRowIdParams, RowClickedEvent, SelectionChangedEvent, TextFilterParams } from 'ag-grid-community'; +import { ColDef, GetRowIdParams, RowClickedEvent, TextFilterParams } from 'ag-grid-community'; import { useSnackMessage } from '@gridsuite/commons-ui'; import DeleteConfirmationDialog from '../common/delete-confirmation-dialog'; import { defaultColDef, defaultRowSelection } from '../common/table-config'; import MultiChipCellRenderer from '../common/multi-chip-cell-renderer'; +import { useTableSelection } from '../../utils/hooks'; export interface GroupsTableProps { gridRef: RefObject>; @@ -26,18 +27,13 @@ const GroupsTable: FunctionComponent = (props) => { const intl = useIntl(); const { snackError } = useSnackMessage(); - const [rowsSelection, setRowsSelection] = useState([]); + const { rowsSelection, onSelectionChanged, onFilterChanged } = useTableSelection(); const [showDeletionDialog, setShowDeletionDialog] = useState(false); function getRowId(params: GetRowIdParams): string { return params.data.name; } - const onSelectionChanged = useCallback( - (event: SelectionChangedEvent) => setRowsSelection(event.api.getSelectedRows() ?? []), - [setRowsSelection] - ); - const onAddButton = useCallback(() => props.setOpenAddGroupDialog(true), [props]); const deleteGroups = useCallback((): Promise | undefined => { @@ -114,6 +110,7 @@ const GroupsTable: FunctionComponent = (props) => { rowSelection={defaultRowSelection} onRowClicked={props.onRowClicked} onSelectionChanged={onSelectionChanged} + onFilterChanged={onFilterChanged} > >; @@ -33,18 +27,13 @@ const ProfilesTable: FunctionComponent = (props) => { const intl = useIntl(); const { snackError } = useSnackMessage(); - const [rowsSelection, setRowsSelection] = useState([]); + const { rowsSelection, onSelectionChanged, onFilterChanged } = useTableSelection(); const [showDeletionDialog, setShowDeletionDialog] = useState(false); function getRowId(params: GetRowIdParams): string { return params.data.id ?? ''; } - const onSelectionChanged = useCallback( - (event: SelectionChangedEvent) => setRowsSelection(event.api.getSelectedRows() ?? []), - [setRowsSelection] - ); - const onAddButton = useCallback(() => props.setOpenAddProfileDialog(true), [props]); const deleteProfiles = useCallback(() => { @@ -134,6 +123,7 @@ const ProfilesTable: FunctionComponent = (props) => { rowSelection={defaultRowSelection} onRowClicked={props.onRowClicked} onSelectionChanged={onSelectionChanged} + onFilterChanged={onFilterChanged} > >; @@ -33,18 +33,13 @@ const UsersTable: FunctionComponent = (props) => { const intl = useIntl(); const { snackError } = useSnackMessage(); - const [rowsSelection, setRowsSelection] = useState([]); + const { rowsSelection, onSelectionChanged, onFilterChanged } = useTableSelection(); const [showDeletionDialog, setShowDeletionDialog] = useState(false); function getRowId(params: GetRowIdParams): string { return params.data.sub ?? ''; } - const onSelectionChanged = useCallback( - (event: SelectionChangedEvent) => setRowsSelection(event.api.getSelectedRows() ?? []), - [setRowsSelection] - ); - const onAddButton = useCallback(() => props.setOpenAddUserDialog(true), [props]); const deleteUsers = useCallback(() => { @@ -147,6 +142,7 @@ const UsersTable: FunctionComponent = (props) => { rowSelection={defaultRowSelection} onRowClicked={props.onRowClicked} onSelectionChanged={onSelectionChanged} + onFilterChanged={onFilterChanged} tooltipShowDelay={1000} > () { + const [rowsSelection, setRowsSelection] = useState([]); + + // update visible selections based on current filter state + const updateVisibleSelection = useCallback((api: GridApi) => { + const visibleSelectedRows: T[] = []; + api.forEachNodeAfterFilterAndSort((node: IRowNode) => { + if (node.isSelected() && node.data) { + visibleSelectedRows.push(node.data); + } + }); + setRowsSelection(visibleSelectedRows); + }, []); + + const onSelectionChanged = useCallback( + (event: SelectionChangedEvent) => { + updateVisibleSelection(event.api); + }, + [updateVisibleSelection] + ); + + const onFilterChanged = useCallback( + (event: FilterChangedEvent) => { + updateVisibleSelection(event.api); + }, + [updateVisibleSelection] + ); + + return { rowsSelection, onSelectionChanged, onFilterChanged }; +}