group dialog with user table

Signed-off-by: David BRAQUART <[email protected]>

Author: dbraquart

src/pages/common/table-selection.tsx

@@ -6,12 +6,12 @@
  */
 
 import { FunctionComponent, useCallback, useMemo, useRef, useState } from 'react';
-import { FormattedMessage, useIntl } from 'react-intl';
+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, RowSelectionOptions } from 'ag-grid-community';
-import { defaultColDef } from './table-config';
+import { ColDef, GetRowIdParams, GridReadyEvent } from 'ag-grid-community';
+import { defaultColDef, defaultRowSelection } from './table-config';
 
 export interface TableSelectionProps {
     itemNameTranslationKey: string;
@@ -21,7 +21,6 @@ export interface TableSelectionProps {
 }
 
 const TableSelection: FunctionComponent<TableSelectionProps> = (props) => {
-    const intl = useIntl();
     const [selectedRowsLength, setSelectedRowsLength] = useState(0);
     const gridRef = useRef<AgGridReact>(null);
 
@@ -40,27 +39,16 @@ const TableSelection: FunctionComponent<TableSelectionProps> = (props) => {
         return props.tableItems.map((str) => ({ id: str }));
     }, [props.tableItems]);
 
-    const rowSelection: RowSelectionOptions = {
-        mode: 'multiRow',
-        enableClickSelection: false,
-        checkboxes: true,
-        headerCheckbox: true,
-        hideDisabledCheckboxes: false,
-    };
-
     const columnDefs = useMemo(
         (): ColDef[] => [
             {
                 field: 'id',
                 filter: true,
                 sortable: true,
                 minWidth: 80,
-                headerName: intl.formatMessage({
-                    id: props.itemNameTranslationKey,
-                }),
             },
         ],
-        [intl, props.itemNameTranslationKey]
+        []
     );
 
     function getRowId(params: GetRowIdParams): string {
@@ -93,8 +81,8 @@ const TableSelection: FunctionComponent<TableSelectionProps> = (props) => {
                     rowData={rowData}
                     columnDefs={columnDefs}
                     defaultColDef={defaultColDef}
+                    rowSelection={defaultRowSelection}
                     getRowId={getRowId}
-                    rowSelection={rowSelection}
                     onSelectionChanged={handleEquipmentSelectionChanged}
                     onGridReady={onGridReady}
                 />

src/pages/groups/groups-page.tsx

@@ -40,22 +40,24 @@ const GroupsPage: FunctionComponent = () => {
     }, []);
 
     return (
-        <Grid item container direction="column" spacing={2} component="section">
-            <Grid item container xs sx={{ width: 1 }}>
-                <GroupModificationDialog
-                    groupInfos={editingGroup}
-                    open={openGroupModificationDialog}
-                    onClose={handleCloseGroupModificationDialog}
-                    onUpdate={handleUpdateGroupModificationDialog}
-                />
-                <GroupsTable
-                    gridRef={gridRef}
-                    onRowClicked={onRowClicked}
-                    setOpenAddGroupDialog={setOpenAddGroupDialog}
-                />
-                <AddGroupDialog gridRef={gridRef} open={openAddGroupDialog} setOpen={setOpenAddGroupDialog} />
+        <>
+            <Grid item container direction="column" spacing={2} component="section">
+                <Grid item container xs sx={{ width: 1 }}>
+                    <GroupsTable
+                        gridRef={gridRef}
+                        onRowClicked={onRowClicked}
+                        setOpenAddGroupDialog={setOpenAddGroupDialog}
+                    />
+                </Grid>
             </Grid>
-        </Grid>
+            <AddGroupDialog gridRef={gridRef} open={openAddGroupDialog} setOpen={setOpenAddGroupDialog} />
+            <GroupModificationDialog
+                groupInfos={editingGroup}
+                open={openGroupModificationDialog}
+                onClose={handleCloseGroupModificationDialog}
+                onUpdate={handleUpdateGroupModificationDialog}
+            />
+        </>
     );
 };
 export default GroupsPage;

src/pages/groups/groups-table.tsx

@@ -5,25 +5,16 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-import { FunctionComponent, RefObject, useCallback, useEffect, useMemo, useState } from 'react';
+import { FunctionComponent, RefObject, useCallback, useMemo, useState } from 'react';
 import { useIntl } from 'react-intl';
 import { GroupAdd } from '@mui/icons-material';
 import { GridButton, GridButtonDelete, GridTable, GridTableRef } from '../../components/Grid';
-import { GroupInfos, UpdateGroupInfos, UserAdminSrv, UserInfos } from '../../services';
-import {
-    ColDef,
-    GetRowIdParams,
-    ICellEditorParams,
-    RowClickedEvent,
-    SelectionChangedEvent,
-    TextFilterParams,
-} from 'ag-grid-community';
+import { GroupInfos, UserAdminSrv, UserInfos } from '../../services';
+import { ColDef, GetRowIdParams, RowClickedEvent, SelectionChangedEvent, 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 MultiChipsRendererComponent from '../common/multi-chips-renderer-component';
-import MultiSelectEditorComponent from '../common/multi-select-editor-component';
-import { UUID } from 'crypto';
 
 export interface GroupsTableProps {
     gridRef: RefObject<GridTableRef<GroupInfos>>;
@@ -37,21 +28,6 @@ const GroupsTable: FunctionComponent<GroupsTableProps> = (props) => {
 
     const [rowsSelection, setRowsSelection] = useState<GroupInfos[]>([]);
     const [showDeletionDialog, setShowDeletionDialog] = useState(false);
-    const [usersOptions, setUsersOptions] = useState<string[]>([]);
-
-    useEffect(() => {
-        UserAdminSrv.fetchUsers()
-            .then((allUsers: UserInfos[]) => {
-                const users = allUsers?.map((u) => u.sub) || [];
-                setUsersOptions(users);
-            })
-            .catch((error) =>
-                snackError({
-                    messageTxt: error.message,
-                    headerId: 'groups.table.error.users',
-                })
-            );
-    }, [snackError]);
 
     function getRowId(params: GetRowIdParams<GroupInfos>): string {
         return params.data.name;
@@ -84,25 +60,6 @@ const GroupsTable: FunctionComponent<GroupsTableProps> = (props) => {
 
     const deleteGroupsDisabled = useMemo(() => rowsSelection.length <= 0, [rowsSelection.length]);
 
-    const updateGroupCallback = useCallback(
-        (id: UUID, name: string, users: string[]) => {
-            const newData: UpdateGroupInfos = {
-                id: id,
-                name: name,
-                users: [],
-            };
-            UserAdminSrv.udpateGroup(newData)
-                .catch((error) =>
-                    snackError({
-                        messageTxt: error.message,
-                        headerId: 'groups.table.error.update',
-                    })
-                )
-                .then(() => props.gridRef?.current?.context?.refresh?.());
-        },
-        [props.gridRef, snackError]
-    );
-
     const columns = useMemo(
         (): ColDef<GroupInfos>[] => [
             {
@@ -136,20 +93,10 @@ const GroupsTable: FunctionComponent<GroupsTableProps> = (props) => {
                     caseSensitive: false,
                     trimInput: true,
                 } as TextFilterParams<UserInfos>,
-                editable: true,
                 cellRenderer: MultiChipsRendererComponent,
-                cellEditor: MultiSelectEditorComponent,
-                cellEditorParams: (params: ICellEditorParams<GroupInfos>) => ({
-                    options: usersOptions,
-                    setValue: (values: string[]) => {
-                        if (params.data?.id) {
-                            updateGroupCallback(params.data.id, params.data.name, values);
-                        }
-                    },
-                }),
             },
         ],
-        [intl, usersOptions, updateGroupCallback]
+        [intl]
     );
 
     return (

src/pages/groups/modification/group-modification-dialog.tsx

@@ -5,10 +5,11 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-import ProfileModificationForm, {
+import GroupModificationForm, {
     GROUP_NAME,
     GroupModificationFormType,
     GroupModificationSchema,
+    SELECTED_USERS,
 } from './group-modification-form';
 import { yupResolver } from '@hookform/resolvers/yup';
 import { useForm } from 'react-hook-form';
@@ -33,12 +34,21 @@ const GroupModificationDialog: FunctionComponent<GroupModificationDialogProps> =
     const formMethods = useForm({
         resolver: yupResolver(GroupModificationSchema),
     });
-    const { reset } = formMethods;
+    const { reset, setValue } = formMethods;
     const [userOptions, setUserOptions] = useState<string[]>([]);
+    const [selectedUsers, setSelectedUsers] = useState<string[]>([]);
     const [dataFetchStatus, setDataFetchStatus] = useState<string>(FetchStatus.IDLE);
 
     useEffect(() => {
         if (groupInfos && open) {
+            const sortedUsers = Array.from(groupInfos.users).sort((a, b) => a.localeCompare(b));
+            reset({
+                [GROUP_NAME]: groupInfos.name,
+                [SELECTED_USERS]: JSON.stringify(sortedUsers), // only used to dirty the form
+            });
+            setSelectedUsers(groupInfos.users);
+
+            // fetch all users
             setDataFetchStatus(FetchStatus.FETCHING);
             UserAdminSrv.fetchUsers()
                 .then((allUsers: UserInfos[]) => {
@@ -55,15 +65,18 @@ const GroupModificationDialog: FunctionComponent<GroupModificationDialogProps> =
                     });
                 });
         }
-    }, [open, snackError, groupInfos]);
+    }, [open, snackError, groupInfos, reset]);
 
-    useEffect(() => {
-        if (groupInfos && open) {
-            reset({
-                [GROUP_NAME]: groupInfos.name,
+    const onSelectionChanged = useCallback(
+        (selectedItems: string[]) => {
+            setSelectedUsers(selectedItems);
+            selectedItems.sort((a, b) => a.localeCompare(b));
+            setValue(SELECTED_USERS, JSON.stringify(selectedItems), {
+                shouldDirty: true,
             });
-        }
-    }, [groupInfos, open, reset]);
+        },
+        [setValue]
+    );
 
     const onDialogClose = useCallback(() => {
         setDataFetchStatus(FetchStatus.IDLE);
@@ -76,7 +89,7 @@ const GroupModificationDialog: FunctionComponent<GroupModificationDialogProps> =
                 const newData: UpdateGroupInfos = {
                     id: groupInfos.id,
                     name: groupFormData.name,
-                    users: [],
+                    users: selectedUsers,
                 };
                 UserAdminSrv.udpateGroup(newData)
                     .catch((error) =>
@@ -90,7 +103,7 @@ const GroupModificationDialog: FunctionComponent<GroupModificationDialogProps> =
                     });
             }
         },
-        [onUpdate, snackError, groupInfos]
+        [groupInfos?.id, selectedUsers, snackError, onUpdate]
     );
 
     const isDataReady = useMemo(() => dataFetchStatus === FetchStatus.FETCH_SUCCESS, [dataFetchStatus]);
@@ -106,8 +119,15 @@ const GroupModificationDialog: FunctionComponent<GroupModificationDialogProps> =
             titleId={'groups.form.modification.title'}
             removeOptional={true}
             isDataFetching={isDataFetching}
+            unscrollableFullHeight
         >
-            {isDataReady && <ProfileModificationForm usersOptions={userOptions} />}
+            {isDataReady && (
+                <GroupModificationForm
+                    usersOptions={userOptions}
+                    selectedUsers={selectedUsers}
+                    onSelectionChanged={onSelectionChanged}
+                />
+            )}
         </CustomMuiDialog>
     );
 };

src/pages/groups/modification/group-modification-form.tsx

@@ -9,28 +9,45 @@ import { TextInput } from '@gridsuite/commons-ui';
 import Grid from '@mui/material/Grid';
 import React, { FunctionComponent } from 'react';
 import yup from '../../../utils/yup-config';
+import TableSelection from 'pages/common/table-selection';
 
 export const GROUP_NAME = 'name';
+export const SELECTED_USERS = 'users';
 
 export const GroupModificationSchema = yup
     .object()
     .shape({
         [GROUP_NAME]: yup.string().trim().required('nameEmpty'),
+        [SELECTED_USERS]: yup.string().nullable(),
     })
     .required();
 
 export type GroupModificationFormType = yup.InferType<typeof GroupModificationSchema>;
 
 interface GroupModificationFormProps {
     usersOptions: string[];
+    selectedUsers?: string[];
+    onSelectionChanged: (selectedItems: string[]) => void;
 }
 
-const GroupModificationForm: FunctionComponent<GroupModificationFormProps> = ({ usersOptions }) => {
+const GroupModificationForm: FunctionComponent<GroupModificationFormProps> = ({
+    usersOptions,
+    selectedUsers,
+    onSelectionChanged,
+}) => {
     return (
-        <Grid container spacing={2} marginTop={'auto'}>
+        <Grid item container spacing={2} marginTop={0} style={{ height: '100%' }}>
             <Grid item xs={12}>
                 <TextInput name={GROUP_NAME} label={'groups.table.id'} clearable={true} />
             </Grid>
+            <Grid item xs={12} style={{ height: '85%' }}>
+                <TableSelection
+                    itemNameTranslationKey={'groups.table.users'}
+                    tableItems={usersOptions}
+                    tableSelectedItems={selectedUsers}
+                    onSelectionChanged={onSelectionChanged}
+                />
+            </Grid>
         </Grid>
     );
 };