Rework user and group modification and display (#111)

Signed-off-by: David BRAQUART <[email protected]>
Co-authored-by: Ayoub LABIDI <[email protected]>

Author: dbraquart

src/components/Grid/GridTable.tsx

@@ -76,7 +76,7 @@ export const GridTable: GridTableWithRef = forwardRef(function AgGridToolbar<TDa
     );
 
     return (
-        <Grid container direction="column" justifyContent="flex-start" alignItems="stretch">
+        <Grid container direction="column" justifyContent="flex-start" alignItems="stretch" width={'100%'}>
             <Grid item xs="auto">
                 <AppBar position="static" color="default">
                     <Toolbar

src/pages/common/multi-chip-cell-renderer.tsx

@@ -0,0 +1,94 @@
+/**
+ * Copyright (c) 2025, RTE (http://www.rte-france.com)
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+
+import React, { useRef, useState, useEffect } from 'react';
+import { Chip, Grid, Tooltip } from '@mui/material';
+import { mergeSx } from '@gridsuite/commons-ui';
+
+const maxChipWidth = 100;
+const counterChipWidth = 25;
+
+const chipStyles = {
+    default: {
+        marginTop: 2,
+        marginLeft: 1,
+        maxWidth: maxChipWidth,
+    },
+    withCounter: {
+        '&.MuiChip-root': {
+            fontWeight: 'bold',
+        },
+    },
+};
+
+export interface MultiChipCellRendererProps {
+    value: string[];
+}
+
+const MultiChipCellRenderer = (props: MultiChipCellRendererProps) => {
+    const values: string[] = props.value ? [...props.value].sort((a: string, b: string) => a.localeCompare(b)) : [];
+    const containerRef = useRef<HTMLDivElement>(null);
+    const [chipLimit, setChipLimit] = useState<number>(5);
+
+    useEffect(() => {
+        const updateChipLimit = () => {
+            if (!containerRef.current) {
+                return;
+            }
+            const zoomLevel = window.devicePixelRatio;
+            const adjustedContainerWidth = containerRef.current.clientWidth / zoomLevel;
+            const maxChips = Math.max(1, Math.floor(adjustedContainerWidth / (maxChipWidth + counterChipWidth)));
+            setChipLimit(maxChips);
+        };
+
+        updateChipLimit();
+        const resizeObserver = new ResizeObserver(updateChipLimit);
+        if (containerRef.current) {
+            resizeObserver.observe(containerRef.current);
+        }
+        return () => resizeObserver.disconnect();
+    }, [values.length]);
+
+    const customChip = (label: string, index: number, chipsNumber: number) => {
+        if (index < chipLimit) {
+            return (
+                <Tooltip title={label} key={`tooltip-${label}`}>
+                    <Chip key={label} label={label} size="small" sx={chipStyles.default} />
+                </Tooltip>
+            );
+        } else if (index === chipLimit) {
+            const hiddenLabels = values.slice(chipLimit);
+            const tooltipContent = (
+                <>
+                    {hiddenLabels.map((hiddenLabel) => (
+                        <div key={`hidden-label-${hiddenLabel}`}>{'- ' + hiddenLabel}</div>
+                    ))}
+                </>
+            );
+
+            return (
+                <Tooltip title={tooltipContent} key="tooltip-counter">
+                    <Chip
+                        size="small"
+                        label={`+${chipsNumber - chipLimit}`}
+                        key="chip-counter"
+                        sx={mergeSx(chipStyles.default, chipStyles.withCounter)}
+                    />
+                </Tooltip>
+            );
+        }
+        return null;
+    };
+
+    return (
+        <Grid container direction="row" spacing={1} wrap="nowrap" ref={containerRef}>
+            {values.map((label: string, index: number) => customChip(label, index, values.length))}
+        </Grid>
+    );
+};
+
+export default MultiChipCellRenderer;

src/pages/common/multi-chips-renderer-component.tsx

@@ -0,0 +1,24 @@
+/**
+ * Copyright (c) 2025, RTE (http://www.rte-france.com)
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+
+import { ColDef, RowSelectionOptions } from 'ag-grid-community';
+
+export const defaultColDef: ColDef = {
+    editable: false,
+    resizable: true,
+    minWidth: 50,
+    rowDrag: false,
+    sortable: true,
+};
+
+export const defaultRowSelection: RowSelectionOptions = {
+    mode: 'multiRow',
+    enableClickSelection: false,
+    checkboxes: true,
+    headerCheckbox: true,
+    hideDisabledCheckboxes: false,
+};

src/pages/common/multi-select-editor-component.tsx

@@ -0,0 +1,94 @@
+/**
+ * Copyright (c) 2025, RTE (http://www.rte-france.com)
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+
+import { FunctionComponent, useCallback, useMemo, useRef, useState } 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';
+
+export interface TableSelectionProps {
+    itemName: string;
+    tableItems: string[];
+    tableSelectedItems?: string[];
+    onSelectionChanged: (selectedItems: string[]) => void;
+}
+
+const TableSelection: FunctionComponent<TableSelectionProps> = (props) => {
+    const [selectedRowsLength, setSelectedRowsLength] = useState(0);
+    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]);
+
+    const rowData = useMemo(() => {
+        return props.tableItems.map((str) => ({ id: str }));
+    }, [props.tableItems]);
+
+    const columnDefs = useMemo(
+        (): ColDef[] => [
+            {
+                field: 'id',
+                filter: true,
+                sortable: true,
+                tooltipField: 'id',
+                flex: 1,
+            },
+        ],
+        []
+    );
+
+    function getRowId(params: GetRowIdParams): string {
+        return params.data.id;
+    }
+
+    const onGridReady = useCallback(
+        ({ api }: GridReadyEvent) => {
+            api?.forEachNode((n) => {
+                if (props.tableSelectedItems !== undefined && n.id && props.tableSelectedItems.includes(n.id)) {
+                    n.setSelected(true);
+                }
+            });
+        },
+        [props.tableSelectedItems]
+    );
+
+    return (
+        <Grid item container direction={'column'} style={{ height: '100%' }}>
+            <Grid item>
+                <Typography variant="subtitle1">
+                    <FormattedMessage id={props.itemName}></FormattedMessage>
+                    {` (${selectedRowsLength} / ${rowData?.length ?? 0})`}
+                </Typography>
+            </Grid>
+            <Grid item xs>
+                <CustomAGGrid
+                    gridId="table-selection"
+                    ref={gridRef}
+                    rowData={rowData}
+                    columnDefs={columnDefs}
+                    defaultColDef={defaultColDef}
+                    rowSelection={defaultRowSelection}
+                    getRowId={getRowId}
+                    onSelectionChanged={handleEquipmentSelectionChanged}
+                    onGridReady={onGridReady}
+                />
+            </Grid>
+        </Grid>
+    );
+};
+export default TableSelection;