Add color map to DirectoryItemInput so we can give different color by equipment type and add new Fields for Aleas by filter

Signed-off-by: basseche <[email protected]>

Author: basseche

src/components/directoryItemSelector/DirectoryItemSelector.tsx

@@ -159,6 +159,7 @@ export interface DirectoryItemSelectorProps extends TreeViewFinderProps {
     itemFilter?: (val: ElementAttributes) => boolean;
     expanded?: UUID[];
     selected?: UUID[];
+    fetchMetaData?: boolean;
 }
 
 function sortHandlingDirectories(a: TreeViewFinderNodeProps, b: TreeViewFinderNodeProps): number {
@@ -180,6 +181,7 @@ export function DirectoryItemSelector({
     expanded,
     selected,
     onClose,
+    fetchMetaData,
     ...otherTreeViewFinderProps
 }: Readonly<DirectoryItemSelectorProps>) {
     const [data, setData] = useState<TreeViewFinderNodeProps[]>([]);
@@ -268,7 +270,10 @@ export function DirectoryItemSelector({
                         contentFilter().has(item.type)
                     );
 
-                    if (childrenMatchedTypes.length > 0 && equipmentTypes && equipmentTypes.length > 0) {
+                    if (
+                        childrenMatchedTypes.length > 0 &&
+                        ((equipmentTypes && equipmentTypes.length > 0) || fetchMetaData)
+                    ) {
                         fetchElementsInfos(
                             childrenMatchedTypes.map((e: ElementAttributes) => e.elementUuid),
                             types,
@@ -296,7 +301,7 @@ export function DirectoryItemSelector({
                     console.warn(`Could not update subs (and content) of '${nodeId}' : ${error.message}`);
                 });
         },
-        [types, equipmentTypes, itemFilter, contentFilter, addToDirectory]
+        [types, equipmentTypes, fetchMetaData, contentFilter, itemFilter, addToDirectory]
     );
 
     // Helper function to fetch children for a node if not already loaded

src/components/inputs/reactHookForm/DirectoryItemsInput.tsx

@@ -5,25 +5,22 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-import { Chip, FormControl, Grid, IconButton, Theme, Tooltip } from '@mui/material';
+import { Box, Chip, FormControl, FormHelperText, Grid, IconButton, Theme, Tooltip } from '@mui/material';
 import { Folder as FolderIcon } from '@mui/icons-material';
 import { useCallback, useMemo, useState } from 'react';
 import { FieldValues, useController, useFieldArray } from 'react-hook-form';
-import { useIntl } from 'react-intl';
+import { FormattedMessage, useIntl } from 'react-intl';
 import { UUID } from 'crypto';
 import { RawReadOnlyInput } from './RawReadOnlyInput';
-import { FieldLabel } from './utils/FieldLabel';
-import { useCustomFormContext } from './provider/useCustomFormContext';
-import { isFieldRequired } from './utils/functions';
-import { ErrorInput } from './errorManagement/ErrorInput';
-import { useSnackMessage } from '../../../hooks/useSnackMessage';
+import { FieldLabel, isFieldRequired } from './utils';
+import { useCustomFormContext } from './provider';
+import { ErrorInput, MidFormError } from './errorManagement';
+import { useSnackMessage } from '../../../hooks';
 import { TreeViewFinderNodeProps } from '../../treeViewFinder';
-import { mergeSx } from '../../../utils/styles';
 import { OverflowableText } from '../../overflowableText';
-import { MidFormError } from './errorManagement/MidFormError';
-import { DirectoryItemSelector } from '../../directoryItemSelector/DirectoryItemSelector';
+import { DirectoryItemSelector } from '../../directoryItemSelector';
 import { fetchDirectoryElementPath } from '../../../services';
-import { ElementAttributes } from '../../../utils';
+import { BASE_EQUIPMENTS, ElementAttributes, EquipmentType, mergeSx } from '../../../utils';
 import { NAME } from './constants';
 
 const styles = {
@@ -67,6 +64,12 @@ export interface DirectoryItemsInputProps {
     disable?: boolean;
     allowMultiSelect?: boolean;
     labelRequiredFromContext?: boolean;
+    equipmentColorsMap?: Map<string, string>;
+}
+
+interface EquipmentMetaData {
+    color: string;
+    translateLabel: string | undefined;
 }
 
 export function DirectoryItemsInput({
@@ -82,6 +85,7 @@ export function DirectoryItemsInput({
     disable = false,
     allowMultiSelect = true,
     labelRequiredFromContext = true,
+    equipmentColorsMap,
 }: Readonly<DirectoryItemsInputProps>) {
     const { snackError } = useSnackMessage();
     const intl = useIntl();
@@ -90,6 +94,7 @@ export function DirectoryItemsInput({
     const [multiSelect, setMultiSelect] = useState(allowMultiSelect);
     const types = useMemo(() => [elementType], [elementType]);
     const [directoryItemSelectorOpen, setDirectoryItemSelectorOpen] = useState(false);
+    const [elementsMetadata, setElementsMetadata] = useState<EquipmentMetaData[]>([]);
     const {
         fields: elements,
         append,
@@ -118,6 +123,7 @@ export function DirectoryItemsInput({
                     remove(getValues(name).findIndex((item: FieldValues) => item.id === chip));
                 });
             }
+            const currentColors = [...elementsMetadata];
             values.forEach((value) => {
                 const { icon, children, ...otherElementAttributes } = value;
 
@@ -129,23 +135,49 @@ export function DirectoryItemsInput({
                     });
                 } else {
                     append(otherElementAttributes);
+                    if (equipmentColorsMap && value?.specificMetadata?.equipmentType) {
+                        const type: EquipmentType = value?.specificMetadata?.equipmentType as EquipmentType;
+                        currentColors.push({
+                            color: equipmentColorsMap.get(value.specificMetadata.equipmentType) ?? '',
+                            translateLabel:
+                                type !== EquipmentType.HVDC_LINE ? BASE_EQUIPMENTS[type]?.label : 'HvdcLines',
+                        });
+                    }
                     onRowChanged?.(true);
                     onChange?.(getValues(name));
                 }
             });
             setDirectoryItemSelectorOpen(false);
             setSelected([]);
+            if (equipmentColorsMap) {
+                setElementsMetadata(currentColors);
+            }
         },
-        [append, getValues, snackError, name, onRowChanged, onChange, selected, remove]
+        [
+            selected,
+            elementsMetadata,
+            equipmentColorsMap,
+            remove,
+            getValues,
+            name,
+            snackError,
+            append,
+            onRowChanged,
+            onChange,
+        ]
     );
 
     const removeElements = useCallback(
         (index: number) => {
             remove(index);
             onRowChanged?.(true);
             onChange?.(getValues(name));
+            if (elementsMetadata.length > 0) {
+                const currentColors = [...elementsMetadata.slice(0, index), ...elementsMetadata.slice(index + 1)];
+                setElementsMetadata(currentColors);
+            }
         },
-        [onRowChanged, remove, getValues, name, onChange]
+        [remove, onRowChanged, onChange, getValues, name, elementsMetadata]
     );
 
     const handleChipClick = useCallback(
@@ -189,18 +221,28 @@ export function DirectoryItemsInput({
                 {elements?.length > 0 && (
                     <FormControl sx={styles.formDirectoryElements2}>
                         {elements.map((item, index) => (
-                            <Chip
-                                key={item.id}
-                                size="small"
-                                onDelete={() => removeElements(index)}
-                                onClick={() => handleChipClick(index)}
-                                label={
-                                    <OverflowableText
-                                        text={<RawReadOnlyInput name={`${name}.${index}.${NAME}`} />}
-                                        sx={{ width: '100%' }}
-                                    />
-                                }
-                            />
+                            <Box key={`Box${item.id}`} sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
+                                <Chip
+                                    key={item.id}
+                                    size="small"
+                                    sx={{ backgroundColor: elementsMetadata?.[index].color }}
+                                    onDelete={() => removeElements(index)}
+                                    onClick={() => handleChipClick(index)}
+                                    label={
+                                        <OverflowableText
+                                            text={<RawReadOnlyInput name={`${name}.${index}.${NAME}`} />}
+                                            sx={{ width: '100%' }}
+                                        />
+                                    }
+                                />
+                                <FormHelperText>
+                                    {elementsMetadata?.[index]?.translateLabel ? (
+                                        <FormattedMessage id={elementsMetadata?.[index]?.translateLabel} />
+                                    ) : (
+                                        ''
+                                    )}
+                                </FormHelperText>
+                            </Box>
                         ))}
                     </FormControl>
                 )}
@@ -241,6 +283,7 @@ export function DirectoryItemsInput({
                 selected={selected}
                 expanded={expanded}
                 multiSelect={multiSelect}
+                fetchMetaData={!!equipmentColorsMap}
             />
         </>
     );

src/components/treeViewFinder/TreeViewFinder.tsx

@@ -82,6 +82,9 @@ export interface TreeViewFinderNodeProps {
     childrenCount?: number;
     children?: TreeViewFinderNodeProps[];
     parents?: TreeViewFinderNodeProps[];
+    specificMetadata?: {
+        equipmentType: string;
+    };
 }
 
 interface TreeViewFinderNodeMapProps {

src/translations/en/equipmentsEn.ts

@@ -24,4 +24,5 @@ export const equipmentsEn = {
     LccConverterStations: 'LCC converter stations',
     VscConverterStations: 'VSC converter stations',
     StaticVarCompensators: 'Static var compensators',
+    HvdcLines: 'HVDC lines',
 };

src/translations/fr/equipmentsFr.ts

@@ -24,4 +24,5 @@ export const equipmentsFr = {
     LccConverterStations: 'Stations de conversion LCC',
     VscConverterStations: 'Stations de conversion VSC',
     StaticVarCompensators: 'CSPR',
+    HvdcLines: 'lignes HVDC',
 };

src/utils/constants/fieldConstants.ts

@@ -27,6 +27,7 @@ export enum FieldConstants {
     EQUIPMENT_TABLE = 'equipmentTable',
     EQUIPMENT_TYPE = 'equipmentType',
     FILTER_TYPE = 'filterType',
+    FILTERS = 'filters',
     FOLDER_ID = 'folderId',
     FOLDER_NAME = 'folderName',
     FORMATTED_CASE_PARAMETERS = 'formattedCaseParameters',
@@ -37,6 +38,7 @@ export enum FieldConstants {
     NOMINAL_VOLTAGE_3 = 'nominalVoltage3',
     NOMINAL_VOLTAGE = 'nominalVoltage',
     OPERATION_TYPE = 'type',
+    PATH_NAME = 'pathName',
     PROPERTY_NAME = 'propertyName',
     PROPERTY_OPERATOR = 'propertyOperator',
     PROPERTY = 'PROPERTY',