diff --git a/src/components/spreadsheet/custom-columns/use-custom-column.ts b/src/components/spreadsheet/custom-columns/use-custom-column.ts index 37f204b907..c53909b0ca 100644 --- a/src/components/spreadsheet/custom-columns/use-custom-column.ts +++ b/src/components/spreadsheet/custom-columns/use-custom-column.ts @@ -86,6 +86,7 @@ export function useCustomColumn(tabIndex: number) { valueGetter: createValueGetter(colDef), editable: false, suppressMovable: true, + enableCellChangeFlash: true, }; }), [tableDefinition.columns, tableDefinition.name, tabIndex, createValueGetter] diff --git a/src/components/spreadsheet/table-wrapper.tsx b/src/components/spreadsheet/table-wrapper.tsx index 67fe3e35a0..765dbb554b 100644 --- a/src/components/spreadsheet/table-wrapper.tsx +++ b/src/components/spreadsheet/table-wrapper.tsx @@ -115,6 +115,7 @@ export const TableWrapper: FunctionComponent = ({ const [manualTabSwitch, setManualTabSwitch] = useState(true); const [rowData, setRowData] = useState([]); + const [equipmentToUpdateId, setEquipmentToUpdateId] = useState(null); const isLockedColumnNamesEmpty = useMemo(() => formattedLockedColumns.size === 0, [formattedLockedColumns.size]); @@ -190,9 +191,28 @@ export const TableWrapper: FunctionComponent = ({ [tableDefinition.type] ); + const highlightUpdatedEquipment = useCallback(() => { + if (!equipmentToUpdateId) { + return; + } + + const api = gridRef.current?.api; + const rowNode = api?.getRowNode(equipmentToUpdateId); + + if (rowNode && api) { + api.flashCells({ + rowNodes: [rowNode], + flashDuration: 1000, + }); + } + + setEquipmentToUpdateId(null); + }, [equipmentToUpdateId]); + const { equipments, errorMessage, isFetching } = useSpreadsheetEquipments( tableDefinition.type, - formatFetchedEquipmentsHandler + formatFetchedEquipmentsHandler, + highlightUpdatedEquipment ); useEffect(() => { @@ -314,6 +334,7 @@ export const TableWrapper: FunctionComponent = ({ const onRowClicked = useCallback( (event: RowClickedEvent) => { const equipmentId = event.data.id; + setEquipmentToUpdateId(equipmentId); handleOpenModificationDialog(equipmentId); }, [handleOpenModificationDialog] diff --git a/src/components/spreadsheet/use-spreadsheet-equipments.ts b/src/components/spreadsheet/use-spreadsheet-equipments.ts index a3719fab3d..9d3efccd02 100644 --- a/src/components/spreadsheet/use-spreadsheet-equipments.ts +++ b/src/components/spreadsheet/use-spreadsheet-equipments.ts @@ -31,7 +31,8 @@ type FormatFetchedEquipments = (equipments: Identifiable[]) => Identifiable[]; export const useSpreadsheetEquipments = ( type: SpreadsheetEquipmentType, - formatFetchedEquipments: FormatFetchedEquipments + formatFetchedEquipments: FormatFetchedEquipments, + highlightUpdatedEquipment: () => void ) => { const dispatch = useDispatch(); const allEquipments = useSelector((state: AppState) => state.spreadsheetNetwork); @@ -122,6 +123,7 @@ export const useSpreadsheetEquipments = ( if (impactedSubstationsIds.length > 0 && studyUuid && currentRootNetworkUuid && currentNode?.id) { // The formatting of the fetched equipments is done in the reducer fetchAllEquipments(studyUuid, nodeId, currentRootNetworkUuid, impactedSubstationsIds).then((values) => { + highlightUpdatedEquipment(); dispatch(updateEquipments(values, nodeId)); }); resetImpactedSubstationsIds(); @@ -163,6 +165,7 @@ export const useSpreadsheetEquipments = ( resetImpactedSubstationsIds, resetDeletedEquipments, resetImpactedElementTypes, + highlightUpdatedEquipment, ]); useEffect(() => {