Facilitate the substations hierarchy selection in generators dispatch modification (#3101)

* Facilitate the substations hierarchy selection in generators dispatch modification

Signed-off-by: Franck LECUYER <[email protected]>

Author: FranckLecuyer

src/components/dialogs/network-modifications/generation-dispatch/generation-dispatch-dialog.jsx

@@ -91,6 +91,7 @@ const GenerationDispatchDialog = ({
     editData,
     currentNode,
     studyUuid,
+    currentRootNetworkUuid,
     isUpdate,
     editDataFetchStatus,
     ...dialogProps
@@ -169,7 +170,11 @@ const GenerationDispatchDialog = ({
                 isDataFetching={isUpdate && editDataFetchStatus === FetchStatus.RUNNING}
                 {...dialogProps}
             >
-                <GenerationDispatchForm />
+                <GenerationDispatchForm
+                    currentNode={currentNode}
+                    studyUuid={studyUuid}
+                    currentRootNetworkUuid={currentRootNetworkUuid}
+                />
             </ModificationDialog>
         </CustomFormProvider>
     );

src/components/dialogs/network-modifications/generation-dispatch/generation-dispatch-form.jsx

@@ -22,12 +22,33 @@ import { FormattedMessage } from 'react-intl';
 import SubstationsGeneratorsOrderingPane from './substations-generators-ordering-pane';
 import GridItem from '../../commons/grid-item';
 import GridSection from '../../commons/grid-section';
+import { useEffect, useState } from 'react';
+import { fetchEquipmentsIds } from '../../../../services/study/network-map';
+
+const GenerationDispatchForm = ({ currentNode, studyUuid, currentRootNetworkUuid }) => {
+    const currentNodeUuid = currentNode?.id;
+
+    const [substations, setSubstations] = useState([]);
 
-const GenerationDispatchForm = () => {
     const handleCoefficientValueChange = (id, value) => {
         return formatPercentageValue(value);
     };
 
+    useEffect(() => {
+        if (studyUuid && currentNodeUuid && currentRootNetworkUuid) {
+            fetchEquipmentsIds(
+                studyUuid,
+                currentNodeUuid,
+                currentRootNetworkUuid,
+                undefined,
+                EQUIPMENT_TYPES.SUBSTATION,
+                true
+            ).then((values) => {
+                setSubstations(values.sort((a, b) => a.localeCompare(b)));
+            });
+        }
+    }, [studyUuid, currentNodeUuid, currentRootNetworkUuid]);
+
     const lossCoefficientField = (
         <FloatInput
             name={LOSS_COEFFICIENT}
@@ -112,7 +133,7 @@ const GenerationDispatchForm = () => {
             </Grid>
             <GridSection title="GeneratorsOrdering" />
             <Grid container direction="column" spacing={2} alignItems="start">
-                <SubstationsGeneratorsOrderingPane />
+                <SubstationsGeneratorsOrderingPane substations={substations} />
             </Grid>
         </Box>
     );

src/components/dialogs/network-modifications/generation-dispatch/substations-autocomplete.tsx

@@ -0,0 +1,77 @@
+/**
+ * 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 { AutocompleteInputProps, genHelperError } from '@gridsuite/commons-ui';
+
+import { useController } from 'react-hook-form';
+import { SyntheticEvent } from 'react';
+import { Autocomplete, AutocompleteProps, TextField, TextFieldProps, Theme } from '@mui/material';
+
+const styles = {
+    autocomplete: (theme: Theme) => ({
+        '.MuiAutocomplete-inputRoot': {
+            display: 'flex',
+            alignItems: 'flex-start',
+            justifyContent: 'flex-start',
+            flexWrap: 'nowrap',
+            padding: '1px',
+            paddingLeft: '5px',
+        },
+        '.Mui-expanded, .Mui-focused, .Mui-focusVisible': {
+            width: 'inherit',
+            background: theme.palette.tabBackground,
+            flexWrap: 'wrap',
+        },
+    }),
+};
+
+type SubstationsAutocompleteProps = Pick<AutocompleteProps<string, true, false, false>, 'disabled'> & {
+    name: AutocompleteInputProps['name'];
+    label?: TextFieldProps['label'];
+    disabled?: boolean;
+    substations: string[];
+};
+
+export default function SubstationsAutocomplete({
+    name,
+    label,
+    disabled,
+    substations,
+    ...props
+}: SubstationsAutocompleteProps) {
+    const {
+        field: { onChange, value, ref },
+        fieldState: { error },
+    } = useController({ name });
+
+    const handleChange = (_: SyntheticEvent, value: string[]) => {
+        onChange(value);
+    };
+
+    return (
+        <Autocomplete
+            multiple
+            disabled={disabled}
+            value={value}
+            onChange={handleChange}
+            options={substations}
+            size={'small'}
+            sx={styles.autocomplete}
+            renderInput={({ inputProps, ...rest }) => (
+                <TextField
+                    inputRef={ref}
+                    inputProps={{ ...inputProps }}
+                    label={label}
+                    {...genHelperError(error?.message)}
+                    {...rest}
+                />
+            )}
+            autoHighlight={true}
+            disableCloseOnSelect={true}
+            {...props}
+        />
+    );
+}

src/components/dialogs/network-modifications/generation-dispatch/substations-generators-ordering-pane.jsx

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2023, RTE (http://www.rte-france.com)
+ * 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/.
@@ -10,9 +10,11 @@ import { useIntl } from 'react-intl';
 import { useMemo } from 'react';
 import { useFieldArray } from 'react-hook-form';
 import { DndTable, DndColumnType } from '@gridsuite/commons-ui';
+import SubstationsAutocomplete from './substations-autocomplete.js';
 
-const SubstationsGeneratorsOrderingPane = ({ id = SUBSTATIONS_GENERATORS_ORDERING }) => {
+const SubstationsGeneratorsOrderingPane = ({ substations }) => {
     const intl = useIntl();
+    const id = SUBSTATIONS_GENERATORS_ORDERING;
 
     const columnsDefinition = useMemo(() => {
         return [
@@ -21,7 +23,12 @@ const SubstationsGeneratorsOrderingPane = ({ id = SUBSTATIONS_GENERATORS_ORDERIN
                 dataKey: SUBSTATION_IDS,
                 initialValue: [],
                 editable: true,
-                type: DndColumnType.CHIP_ITEMS,
+                type: DndColumnType.CUSTOM,
+                component: (rowIndex) =>
+                    SubstationsAutocomplete({
+                        name: `${id}[${rowIndex}].${SUBSTATION_IDS}`,
+                        substations: substations,
+                    }),
             },
         ].map((column) => ({
             ...column,
@@ -30,7 +37,7 @@ const SubstationsGeneratorsOrderingPane = ({ id = SUBSTATIONS_GENERATORS_ORDERIN
                 .toLowerCase()
                 .replace(/^\w/, (c) => c.toUpperCase()),
         }));
-    }, [intl]);
+    }, [intl, substations, id]);
 
     const useFieldArraySubstationsGeneratorsOrdering = useFieldArray({
         name: `${id}`,