From 53a6d89fd24abbae8de5f8668457a762d3e3ee1d Mon Sep 17 00:00:00 2001 From: achour94 Date: Wed, 19 Feb 2025 10:40:27 +0100 Subject: [PATCH 1/3] Highlight updated equipment row Signed-off-by: achour94 --- .../custom-columns/use-custom-column.ts | 1 + src/components/spreadsheet/table-wrapper.tsx | 40 ++++++++++++++++++- .../spreadsheet/use-spreadsheet-equipments.ts | 6 ++- 3 files changed, 43 insertions(+), 4 deletions(-) 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..6ed318cbde 100644 --- a/src/components/spreadsheet/table-wrapper.tsx +++ b/src/components/spreadsheet/table-wrapper.tsx @@ -21,7 +21,7 @@ import { formatFetchedEquipments } from './utils/equipment-table-utils'; import { SPREADSHEET_SORT_STORE } from 'utils/store-sort-filter-fields'; import { useCustomColumn } from './custom-columns/use-custom-column'; import CustomColumnsConfig from './custom-columns/custom-columns-config'; -import { AppState, CurrentTreeNode } from '../../redux/reducer'; +import { AppState, CurrentTreeNode, EquipmentUpdateType, getUpdateTypeFromEquipmentType } from '../../redux/reducer'; import { AgGridReact } from 'ag-grid-react'; import { ColumnMovedEvent, ColumnState, RowClickedEvent } from 'ag-grid-community'; import { mergeSx } from '../utils/functions'; @@ -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,43 @@ export const TableWrapper: FunctionComponent = ({ [tableDefinition.type] ); + const highlightUpdatedEquipment = useCallback( + (updatedEquipments: Record) => { + if (!equipmentToUpdateId) { + return; + } + + const equipmentUpdateType = getUpdateTypeFromEquipmentType(tableDefinition.type); + const updatedEquipmentsOfType = equipmentUpdateType && updatedEquipments[equipmentUpdateType]; + + if (updatedEquipmentsOfType) { + // Find the specific updated equipment + const updatedEquipment = updatedEquipmentsOfType.find( + (equipment) => equipment.id === equipmentToUpdateId + ); + + if (updatedEquipment) { + const api = gridRef.current?.api; + const rowNode = api?.getRowNode(updatedEquipment.id); + + if (rowNode && api) { + api.flashCells({ + rowNodes: [rowNode], + flashDuration: 1000, + }); + } + } + } + + setEquipmentToUpdateId(null); + }, + [tableDefinition.type, equipmentToUpdateId] + ); + const { equipments, errorMessage, isFetching } = useSpreadsheetEquipments( tableDefinition.type, - formatFetchedEquipmentsHandler + formatFetchedEquipmentsHandler, + highlightUpdatedEquipment ); useEffect(() => { @@ -314,6 +349,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..8c0dbec2e2 100644 --- a/src/components/spreadsheet/use-spreadsheet-equipments.ts +++ b/src/components/spreadsheet/use-spreadsheet-equipments.ts @@ -20,7 +20,7 @@ import { resetEquipmentsByTypes, updateEquipments, } from 'redux/actions'; -import { AppState } from 'redux/reducer'; +import { AppState, EquipmentUpdateType } from 'redux/reducer'; import type { SpreadsheetEquipmentType } from './config/spreadsheet.type'; import { fetchAllEquipments } from 'services/study/network-map'; import { getFetcher } from './config/equipment/common-config'; @@ -31,7 +31,8 @@ type FormatFetchedEquipments = (equipments: Identifiable[]) => Identifiable[]; export const useSpreadsheetEquipments = ( type: SpreadsheetEquipmentType, - formatFetchedEquipments: FormatFetchedEquipments + formatFetchedEquipments: FormatFetchedEquipments, + highlightUpdatedEquipment: (updatedEquipments: Record) => 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(values as Record); dispatch(updateEquipments(values, nodeId)); }); resetImpactedSubstationsIds(); From d7bb978fe6cc95f09476f7a641f16e1d09c45e54 Mon Sep 17 00:00:00 2001 From: achour94 Date: Wed, 19 Feb 2025 10:43:59 +0100 Subject: [PATCH 2/3] Highlight updated equipment row Signed-off-by: achour94 --- src/components/spreadsheet/use-spreadsheet-equipments.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/spreadsheet/use-spreadsheet-equipments.ts b/src/components/spreadsheet/use-spreadsheet-equipments.ts index 8c0dbec2e2..1ca967c7de 100644 --- a/src/components/spreadsheet/use-spreadsheet-equipments.ts +++ b/src/components/spreadsheet/use-spreadsheet-equipments.ts @@ -165,6 +165,7 @@ export const useSpreadsheetEquipments = ( resetImpactedSubstationsIds, resetDeletedEquipments, resetImpactedElementTypes, + highlightUpdatedEquipment, ]); useEffect(() => { From 7564628a8a569a1805fd41efa7826f4fe43e5b21 Mon Sep 17 00:00:00 2001 From: achour94 Date: Tue, 25 Feb 2025 17:09:44 +0100 Subject: [PATCH 3/3] Resolve Signed-off-by: achour94 --- src/components/spreadsheet/table-wrapper.tsx | 45 +++++++------------ .../spreadsheet/use-spreadsheet-equipments.ts | 6 +-- 2 files changed, 18 insertions(+), 33 deletions(-) diff --git a/src/components/spreadsheet/table-wrapper.tsx b/src/components/spreadsheet/table-wrapper.tsx index 6ed318cbde..765dbb554b 100644 --- a/src/components/spreadsheet/table-wrapper.tsx +++ b/src/components/spreadsheet/table-wrapper.tsx @@ -21,7 +21,7 @@ import { formatFetchedEquipments } from './utils/equipment-table-utils'; import { SPREADSHEET_SORT_STORE } from 'utils/store-sort-filter-fields'; import { useCustomColumn } from './custom-columns/use-custom-column'; import CustomColumnsConfig from './custom-columns/custom-columns-config'; -import { AppState, CurrentTreeNode, EquipmentUpdateType, getUpdateTypeFromEquipmentType } from '../../redux/reducer'; +import { AppState, CurrentTreeNode } from '../../redux/reducer'; import { AgGridReact } from 'ag-grid-react'; import { ColumnMovedEvent, ColumnState, RowClickedEvent } from 'ag-grid-community'; import { mergeSx } from '../utils/functions'; @@ -191,38 +191,23 @@ export const TableWrapper: FunctionComponent = ({ [tableDefinition.type] ); - const highlightUpdatedEquipment = useCallback( - (updatedEquipments: Record) => { - if (!equipmentToUpdateId) { - return; - } - - const equipmentUpdateType = getUpdateTypeFromEquipmentType(tableDefinition.type); - const updatedEquipmentsOfType = equipmentUpdateType && updatedEquipments[equipmentUpdateType]; - - if (updatedEquipmentsOfType) { - // Find the specific updated equipment - const updatedEquipment = updatedEquipmentsOfType.find( - (equipment) => equipment.id === equipmentToUpdateId - ); + const highlightUpdatedEquipment = useCallback(() => { + if (!equipmentToUpdateId) { + return; + } - if (updatedEquipment) { - const api = gridRef.current?.api; - const rowNode = api?.getRowNode(updatedEquipment.id); + const api = gridRef.current?.api; + const rowNode = api?.getRowNode(equipmentToUpdateId); - if (rowNode && api) { - api.flashCells({ - rowNodes: [rowNode], - flashDuration: 1000, - }); - } - } - } + if (rowNode && api) { + api.flashCells({ + rowNodes: [rowNode], + flashDuration: 1000, + }); + } - setEquipmentToUpdateId(null); - }, - [tableDefinition.type, equipmentToUpdateId] - ); + setEquipmentToUpdateId(null); + }, [equipmentToUpdateId]); const { equipments, errorMessage, isFetching } = useSpreadsheetEquipments( tableDefinition.type, diff --git a/src/components/spreadsheet/use-spreadsheet-equipments.ts b/src/components/spreadsheet/use-spreadsheet-equipments.ts index 1ca967c7de..9d3efccd02 100644 --- a/src/components/spreadsheet/use-spreadsheet-equipments.ts +++ b/src/components/spreadsheet/use-spreadsheet-equipments.ts @@ -20,7 +20,7 @@ import { resetEquipmentsByTypes, updateEquipments, } from 'redux/actions'; -import { AppState, EquipmentUpdateType } from 'redux/reducer'; +import { AppState } from 'redux/reducer'; import type { SpreadsheetEquipmentType } from './config/spreadsheet.type'; import { fetchAllEquipments } from 'services/study/network-map'; import { getFetcher } from './config/equipment/common-config'; @@ -32,7 +32,7 @@ type FormatFetchedEquipments = (equipments: Identifiable[]) => Identifiable[]; export const useSpreadsheetEquipments = ( type: SpreadsheetEquipmentType, formatFetchedEquipments: FormatFetchedEquipments, - highlightUpdatedEquipment: (updatedEquipments: Record) => void + highlightUpdatedEquipment: () => void ) => { const dispatch = useDispatch(); const allEquipments = useSelector((state: AppState) => state.spreadsheetNetwork); @@ -123,7 +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(values as Record); + highlightUpdatedEquipment(); dispatch(updateEquipments(values, nodeId)); }); resetImpactedSubstationsIds();