enhance move feeder

src/components/dialogs/network-modifications/voltage-level/move-feeder-bays/feeder-bay-direction-cell-render.tsx

@@ -6,30 +6,13 @@
  */
 
 import { useCallback, useMemo } from 'react';
-import { Box, IconButton, ToggleButton } from '@mui/material';
+import { IconButton, ToggleButton } from '@mui/material';
 import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward';
 import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward';
 import { useController, useFormContext } from 'react-hook-form';
 import { useIntl } from 'react-intl';
-import type { MuiStyles } from '@gridsuite/commons-ui';
-
-const styles = {
-    container: {
-        display: 'flex',
-        alignItems: 'center',
-        gap: 1,
-        marginTop: 1.75,
-    },
-    button: {
-        width: 100,
-        whiteSpace: 'nowrap',
-    },
-} as const satisfies MuiStyles;
-
-const CONNECTION_DIRECTIONS_VALUES = {
-    TOP: { id: 'TOP', label: 'Top' },
-    BOTTOM: { id: 'BOTTOM', label: 'Bottom' },
-} as const;
+import { HorizontalRule } from '@mui/icons-material';
+import { CONNECTION_DIRECTIONS_VALUES } from './move-voltage-level-feeder-bays.type';
 
 type FeederBayDirectionCellRendererProps = {
     name: string;
@@ -47,31 +30,53 @@ export default function FeederBayDirectionCellRenderer({
     const intl = useIntl();
 
     const translatedLabel = useMemo(() => {
-        const direction = Object.values(CONNECTION_DIRECTIONS_VALUES).find((dir) => dir.id === value);
+        const valueToFind = value ?? 'UNDEFINED'; // null ou undefined → 'UNDEFINED'
+        const direction = Object.values(CONNECTION_DIRECTIONS_VALUES).find((dir) => dir.id === valueToFind);
         return direction ? intl.formatMessage({ id: direction.label }) : '';
     }, [intl, value]);
 
     const handleClick = useCallback(() => {
-        if (value) {
-            const newValue =
-                value === CONNECTION_DIRECTIONS_VALUES.TOP.id
-                    ? CONNECTION_DIRECTIONS_VALUES.BOTTOM.id
-                    : CONNECTION_DIRECTIONS_VALUES.TOP.id;
-            setValue(name, newValue, {
-                shouldDirty: true,
-                shouldTouch: true,
-            });
-        }
+        const newValue =
+            value === CONNECTION_DIRECTIONS_VALUES.TOP.id
+                ? CONNECTION_DIRECTIONS_VALUES.BOTTOM.id
+                : value === CONNECTION_DIRECTIONS_VALUES.BOTTOM.id
+                  ? CONNECTION_DIRECTIONS_VALUES.UNDEFINED.id
+                  : CONNECTION_DIRECTIONS_VALUES.TOP.id; // from null or UNDEFINED, go to TOP
+        setValue(name, newValue, {
+            shouldDirty: true,
+            shouldTouch: true,
+        });
     }, [value, setValue, name]);
-
     return (
-        <Box sx={styles.container}>
+        <ToggleButton
+            value={value}
+            onClick={handleClick}
+            disabled={disabled}
+            size="small"
+            sx={{
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center',
+                width: '100%',
+                height: '100%',
+                border: 'none',
+                gap: 2,
+                padding: '1rem',
+                '&:hover': {
+                    backgroundColor: 'transparent',
+                },
+            }}
+        >
             <IconButton onClick={handleClick} size="small" disabled={disabled}>
-                {value === CONNECTION_DIRECTIONS_VALUES.TOP.id ? <ArrowUpwardIcon /> : <ArrowDownwardIcon />}
+                {value === CONNECTION_DIRECTIONS_VALUES.TOP.id ? (
+                    <ArrowUpwardIcon />
+                ) : value === CONNECTION_DIRECTIONS_VALUES.BOTTOM.id ? (
+                    <ArrowDownwardIcon />
+                ) : (
+                    <HorizontalRule />
+                )}
             </IconButton>
-            <ToggleButton value={value} onClick={handleClick} disabled={disabled} size="small" sx={styles.button}>
-                {translatedLabel}
-            </ToggleButton>
-        </Box>
+            <span>{translatedLabel}</span>
+        </ToggleButton>
     );
 }

src/components/dialogs/network-modifications/voltage-level/move-feeder-bays/move-voltage-level-feeder-bays-dialog.tsx

@@ -42,12 +42,15 @@ import { moveVoltageLevelFeederBays } from '../../../../../services/study/networ
 import { AnyObject, TestFunction } from 'yup';
 
 const isActiveRow = (row: FeederBaysFormInfos) => row && !row.isRemoved;
-const checkConnectionPositionField: TestFunction<string | undefined, AnyObject> = (currentPosition, context) => {
+const checkConnectionPositionField: TestFunction<string | null | undefined, AnyObject> = (currentPosition, context) => {
     // access to rows
     const rows: FeederBaysFormInfos[] = context.from?.[1]?.value?.[MOVE_VOLTAGE_LEVEL_FEEDER_BAYS_TABLE];
     if (!Array.isArray(rows)) {
         return true;
     }
+    if (currentPosition === null || currentPosition === undefined) {
+        return true;
+    }
     // take only active rows
     const activeRows = rows.filter(isActiveRow);
     // counting duplication
@@ -74,13 +77,12 @@ const formSchema = yup.object().shape({
             [BUSBAR_SECTION_ID]: requiredWhenActive(yup.string()),
             [BUSBAR_SECTION_IDS]: requiredWhenActive(yup.array().of(yup.string())),
             [CONNECTION_SIDE]: yup.string().nullable(),
-            [CONNECTION_NAME]: requiredWhenActive(yup.string()),
-            [CONNECTION_DIRECTION]: requiredWhenActive(yup.string()),
-            [CONNECTION_POSITION]: requiredWhenActive(yup.string()).test(
-                'checkUniquePositions',
-                'DuplicatedPositionsError',
-                checkConnectionPositionField
-            ),
+            [CONNECTION_NAME]: yup.string().nullable(),
+            [CONNECTION_DIRECTION]: yup.string().nullable(),
+            [CONNECTION_POSITION]: yup
+                .string()
+                .nullable()
+                .test('checkUniquePositions', 'DuplicatedPositionsError', checkConnectionPositionField),
             [IS_REMOVED]: yup.boolean(),
             [IS_SEPARATOR]: yup.boolean(),
         })
@@ -96,7 +98,7 @@ const emptyFormData = {
             [CONNECTION_SIDE]: null,
             [CONNECTION_NAME]: null,
             [CONNECTION_DIRECTION]: null,
-            [CONNECTION_POSITION]: '0',
+            [CONNECTION_POSITION]: null,
             [IS_REMOVED]: false,
             [IS_SEPARATOR]: false,
         },
@@ -152,14 +154,18 @@ export default function MoveVoltageLevelFeederBaysDialog({
         (feederBaysInfos: FeederBaysInfos, busBarSectionInfos: string[]) => {
             let mergedRowData: FeederBaysFormInfos[] = [];
             if (!editData?.uuid && feederBaysInfos.length > 0) {
+                console.log('================feederBaysInfos', feederBaysInfos);
                 mergedRowData = feederBaysInfos.filter(Boolean).map((bay) => ({
                     equipmentId: bay.equipmentId,
                     busbarSectionId: bay.busbarSectionId || null,
                     busbarSectionIds: busBarSectionInfos,
                     connectionSide: bay.connectionSide || null,
                     connectionName: bay.connectablePositionInfos.connectionName || null,
                     connectionDirection: bay.connectablePositionInfos.connectionDirection || null,
-                    connectionPosition: bay.connectablePositionInfos.connectionPosition || null,
+                    connectionPosition:
+                        bay.connectablePositionInfos.connectionPosition !== undefined
+                            ? String(bay.connectablePositionInfos.connectionPosition)
+                            : null,
                     isRemoved: false,
                     rowId: null,
                 }));
@@ -174,7 +180,10 @@ export default function MoveVoltageLevelFeederBaysDialog({
                             connectionSide: bay.connectionSide,
                             connectionName: bay.connectablePositionInfos.connectionName || null,
                             connectionDirection: bay.connectablePositionInfos.connectionDirection,
-                            connectionPosition: bay.connectablePositionInfos.connectionPosition || '0',
+                            connectionPosition:
+                                bay.connectablePositionInfos.connectionPosition !== undefined
+                                    ? String(bay.connectablePositionInfos.connectionPosition)
+                                    : null,
                             isRemoved: false,
                             rowId: null,
                         });
@@ -294,7 +303,7 @@ export default function MoveVoltageLevelFeederBaysDialog({
                       equipmentId: row?.equipmentId!,
                       busbarSectionId: row?.busbarSectionId!,
                       connectionSide: row?.connectionSide!,
-                      connectionPosition: row?.connectionPosition != null ? String(row.connectionPosition) : '0',
+                      connectionPosition: row?.connectionPosition!,
                       connectionName: row?.connectionName!,
                       connectionDirection: row?.connectionDirection!,
                   }))

src/components/dialogs/network-modifications/voltage-level/move-feeder-bays/move-voltage-level-feeder-bays-form.tsx

@@ -230,7 +230,6 @@ export function MoveVoltageLevelFeederBaysForm({
         ({ data }: { data?: any }) => {
             const watchTable: FeederBaysFormInfos[] = getValues(MOVE_VOLTAGE_LEVEL_FEEDER_BAYS_TABLE);
             const formIndex = watchTable?.findIndex((item) => item.rowId === data.rowId) ?? -1;
-
             return FeederBayDirectionCellRenderer({
                 name: `${MOVE_VOLTAGE_LEVEL_FEEDER_BAYS_TABLE}[${formIndex}].${CONNECTION_DIRECTION}`,
                 disabled: data.isRemoved,
@@ -256,8 +255,6 @@ export function MoveVoltageLevelFeederBaysForm({
                                 '& input': { textAlign: 'center' },
                             },
                         }}
-                        inputTransform={(value) => String(value ?? 0)}
-                        outputTransform={(value) => (value === '0' ? null : Number(value))}
                     />
                 </div>
             );

src/components/dialogs/network-modifications/voltage-level/move-feeder-bays/move-voltage-level-feeder-bays.type.ts

@@ -27,3 +27,9 @@ export type FeederBayInfos = {
 export type FeederBaysInfos = (FeederBayInfos & {
     equipmentId: string;
 })[];
+
+export const CONNECTION_DIRECTIONS_VALUES = {
+    TOP: { id: 'TOP', label: 'Top' },
+    BOTTOM: { id: 'BOTTOM', label: 'Bottom' },
+    UNDEFINED: { id: 'UNDEFINED', label: 'Undefined' },
+} as const;