@topconsultnpm/sdkui-react 6.22.0-dev3.24 → 6.22.0-dev3.25

package/lib/components/features/documents/TMRelationViewer.js

@@ -1,5 +1,5 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { DcmtTypeListCacheService, SDK_Globals, DataColumnTypes, MetadataDataDomains, RelationCacheService, RelationTypes, UserListCacheService, LayoutModes } from "@topconsultnpm/sdk-ts";
 import { genUniqueId, IconFolder, IconBackhandIndexPointingRight, IconCircleInfo, getDcmtCicoStatus, IconChevronDown, IconChevronRight, SDKUI_Localizator, buildDcmtDisplayName, SDKUI_Globals, searchResultToMetadataValues, getColumnFormatInfo, formatDateTimeByMetadataFormat, formatNumberByMetadataFormat } from '../../../helper';
 import ShowAlert from '../../base/TMAlert';
@@ -7,7 +7,7 @@ import TMToppyMessage from '../../../helper/TMToppyMessage';
 import { TMColors } from '../../../utils/theme';
 import { StyledDivHorizontal, StyledBadge } from '../../base/Styled';
 import TMTreeView from '../../base/TMTreeView';
-import { TMWaitPanel } from '../../base/TMWaitPanel';
+import TMWaitPanelManager from '../../base/waitPanel/TMWaitPanelManager';
 import TMDataListItemViewer from '../../viewers/TMDataListItemViewer';
 import TMDcmtIcon from './TMDcmtIcon';
 import TMDataUserIdItemViewer from '../../viewers/TMDataUserIdItemViewer';
@@ -66,12 +66,24 @@ export const getDisplayValueByColumn = (col, value) => {
         return formatNumberByMetadataFormat(value, format, formatCulture);
     return value;
 };
+/**
+ * Attende la chiamata, ma smette di aspettarla (restituendo undefined) appena l'utente interrompe.
+ * Serve perché il SearchEngine dell'SDK non accetta un AbortSignal: senza, "Interrompi" aspetterebbe la fine della chiamata in corso.
+ */
+const untilAborted = (promise, signal) => {
+    if (!signal)
+        return promise;
+    if (signal.aborted)
+        return Promise.resolve(undefined);
+    const aborted = new Promise(resolve => signal.addEventListener('abort', () => resolve(undefined), { once: true }));
+    // Vince chi termina prima: la risposta del server oppure l'interruzione (la chiamata prosegue in background e viene ignorata)
+    return Promise.race([promise, aborted]);
+};
 /**
  * Convert SearchResultDescriptor to structured data source with metadata
- * I valori dei documenti sono GIÀ presenti nelle righe restituite dalla ricerca:
+ * I valori dei documenti sono già presenti nelle righe restituite dalla ricerca:
  * qui vengono solo abbinati ai rispettivi MetadataDescriptor (perm,
- * isSpecialSearchOutput, ...), risolti UNA SOLA VOLTA per tipo documento.
- * Nessuna chiamata al server per riga.
+ * isSpecialSearchOutput, ...), risolti una sola volta per tipo documento.
  */
 export const searchResultToDataSource = async (searchResult, hideSysMetadata, signal) => {
     const rows = searchResult?.dtdResult?.rows ?? [];
@@ -144,7 +156,7 @@ export const searchResultToDataSource = async (searchResult, hideSysMetadata, si
     return output;
 };
 export const DEFAULT_RELATION_EXPAND_LEVEL = 4; // Default maximum depth level for expansion (can be adjusted)
-const TMRelationViewer = ({ inputDcmts, isForMaster = false, showCurrentDcmtIndicator = true, allowShowZeroDcmts = true, initialShowZeroDcmts = false, allowedTIDs, allowMultipleSelection = false, focusedItem, selectedItems, onFocusedItemChanged, onSelectedItemsChanged, onAllItemsChanged, onDocumentDoubleClick, customItemRender, customDocumentStyle, customMainContainerContent, customDocumentContent, showMetadataNames = false, maxDepthLevel = 2, invertMasterNavigation = true, additionalStaticItems, showMainDocument = true, labelMainContainer, onNoRelationsFound, onItemContextMenu, focusedItemFormData = [], showExpandAllButton = false, defaultExpandAll = false, onLoadingStateChanged, onLoadingProgress, onStopCalculationReady, onCalculationStopped, initialTreeState, onTreeStateChange }) => {
+const TMRelationViewer = ({ inputDcmts, isForMaster = false, showCurrentDcmtIndicator = true, allowShowZeroDcmts = true, initialShowZeroDcmts = false, allowedTIDs, allowMultipleSelection = false, focusedItem, selectedItems, onFocusedItemChanged, onSelectedItemsChanged, onAllItemsChanged, onDocumentDoubleClick, customItemRender, customDocumentStyle, customMainContainerContent, customDocumentContent, showMetadataNames = false, maxDepthLevel = 2, invertMasterNavigation = true, additionalStaticItems, showMainDocument = true, labelMainContainer, onNoRelationsFound, onItemContextMenu, showExpandAllButton = false, defaultExpandAll = false, onLoadingStateChanged, onStopCalculationReady, onCalculationStopped, initialTreeState, onTreeStateChange }) => {
     // State
     const [dcmtTypes, setDcmtTypes] = useState([]);
     const [treeData, setTreeData] = useState([]);
@@ -153,21 +165,21 @@ const TMRelationViewer = ({ inputDcmts, isForMaster = false, showCurrentDcmtIndi
     const getInitialExpandLevel = () => SDKUI_Globals.userSettings?.searchSettings?.relationExpandLevel ?? DEFAULT_RELATION_EXPAND_LEVEL;
     const [expandLevel, setExpandLevel] = useState(getInitialExpandLevel);
     const [isAllCollapsed, setIsAllCollapsed] = useState(false);
-    const initialExpandAllAppliedRef = React.useRef(false);
-    const [showWaitPanel, setShowWaitPanel] = useState(false);
-    const [waitPanelTextPrimary, setWaitPanelTextPrimary] = useState('');
-    const [waitPanelValuePrimary, setWaitPanelValuePrimary] = useState(0);
-    const [waitPanelMaxValuePrimary, setWaitPanelMaxValuePrimary] = useState(0);
+    const initialExpandAllAppliedRef = useRef(false);
+    // Calcolo iniziale: il pannello e' imperativo, qui resta solo il flag per il render.
+    const [isInitialLoading, setIsInitialLoading] = useState(false);
+    const loadPanelRef = useRef(undefined);
     const [abortController] = useState(new AbortController());
     // True quando l'utente ha interrotto il calcolo delle correlazioni (pulsante "Interrompi")
     const [loadStoppedByUser, setLoadStoppedByUser] = useState(false);
-    const [showExpansionWaitPanel, setShowExpansionWaitPanel] = useState(false);
-    const [expansionWaitPanelText, setExpansionWaitPanelText] = useState('');
-    const [expansionWaitPanelValue, setExpansionWaitPanelValue] = useState(0);
-    const [expansionWaitPanelMaxValue, setExpansionWaitPanelMaxValue] = useState(0);
-    const [expansionAbortController, setExpansionAbortController] = useState(undefined);
+    // Espansione di un nodo: il pannello e' imperativo, qui resta solo il flag per il render.
+    // qui resta solo il flag che serve al render e alla notifica al padre.
+    const [isExpansionLoading, setIsExpansionLoading] = useState(false);
+    // AbortController dell'espansione in corso, accessibile da callback stabili
+    const expansionAbortControllerRef = useRef(undefined);
+    const expansionPanelRef = useRef(undefined);
     // Ref to track last loaded input to prevent unnecessary reloads
-    const lastLoadedInputRef = React.useRef('');
+    const lastLoadedInputRef = useRef('');
     // State to track loaded input key - triggers re-render for focus selection
     const [loadedInputKey, setLoadedInputKey] = React.useState('');
     // State to track how many GetMetadataAsync calls failed
@@ -175,17 +187,17 @@ const TMRelationViewer = ({ inputDcmts, isForMaster = false, showCurrentDcmtIndi
     // State to track total master documents found (used when isForMaster is true)
     const [totalMasterDocuments, setTotalMasterDocuments] = React.useState(0);
     // Ref to track if user has manually expanded/collapsed static items
-    const userInteractedWithStaticItemsRef = React.useRef(false);
+    const userInteractedWithStaticItemsRef = useRef(false);
     // Ref to track the last inputKey for which we set the focused item
-    const lastFocusedInputRef = React.useRef('');
+    const lastFocusedInputRef = useRef('');
     // Catturato al mount (il padre lo aggiorna di continuo) e azzerato dopo l'uso,
     // così vale solo per il primo caricamento
-    const stateToRestoreRef = React.useRef(initialTreeState);
+    const stateToRestoreRef = useRef(initialTreeState);
     // Parte dallo stato ricevuto: il padre azzera il fuoco prima di rimontare, quindi
     // la prima notifica dopo il rimontaggio lo perderebbe
-    const lastReportedStateRef = React.useRef(initialTreeState);
+    const lastReportedStateRef = useRef(initialTreeState);
     // Percorso su cui rimettere il fuoco dopo un ripristino
-    const pendingFocusPathRef = React.useRef(undefined);
+    const pendingFocusPathRef = useRef(undefined);
     // State for all users (used for checkout status display)
     const [allUsers, setAllUsers] = useState([]);
     // Load all users for checkout status resolution
@@ -198,25 +210,19 @@ const TMRelationViewer = ({ inputDcmts, isForMaster = false, showCurrentDcmtIndi
     }, []);
     // Notify parent when loading state changes
     useEffect(() => {
-        const isLoading = showWaitPanel || showExpansionWaitPanel;
+        const isLoading = isInitialLoading || isExpansionLoading;
         onLoadingStateChanged?.(isLoading);
-    }, [showWaitPanel, showExpansionWaitPanel, onLoadingStateChanged]);
-    // Notifica al padre l'avanzamento del caricamento iniziale (documenti processati
-    // sul totale), così può mostrarlo nel proprio overlay che copre il wait panel interno
-    useEffect(() => {
-        onLoadingProgress?.(waitPanelValuePrimary, waitPanelMaxValuePrimary);
-    }, [waitPanelValuePrimary, waitPanelMaxValuePrimary, onLoadingProgress]);
-    // Mantiene l'AbortController dell'espansione in corso accessibile da callback stabili
-    const expansionAbortControllerRef = React.useRef(undefined);
-    useEffect(() => {
-        expansionAbortControllerRef.current = expansionAbortController;
-    }, [expansionAbortController]);
+    }, [isInitialLoading, isExpansionLoading, onLoadingStateChanged]);
+    // I pannelli vivono fuori dall'albero React: se il viewer viene smontato mentre un
+    // caricamento e' in corso vanno chiusi a mano, altrimenti resterebbero a schermo.
+    useEffect(() => () => {
+        loadPanelRef.current?.close();
+        expansionPanelRef.current?.close();
+    }, []);
     /**
      * Interrompe il calcolo delle correlazioni (iniziale e/o espansione in corso):
      * non vengono eseguite ulteriori chiamate GetMetadata e vengono mantenute
      * solo le correlazioni già calcolate.
-     * È sincrona: può essere invocata immediatamente prima di smontare il viewer
-     * (es. pulsante "Indietro"), quando un effect non farebbe in tempo.
      */
     const stopCalculation = useCallback(() => {
         if (!abortController.signal.aborted)
@@ -274,7 +280,7 @@ const TMRelationViewer = ({ inputDcmts, isForMaster = false, showCurrentDcmtIndi
             const searchEngine = SDK_Globals.tmSession?.NewSearchEngine();
             if (!searchEngine)
                 return items;
-            const results = await searchEngine.GetAllDetailDcmtsAsync(mTID, mDID) ?? [];
+            const results = await untilAborted(searchEngine.GetAllDetailDcmtsAsync(mTID, mDID), signal) ?? [];
             for (const searchResult of results) {
                 // Interruzione richiesta dall'utente: restituisce le correlazioni già calcolate
                 if (signal?.aborted)
@@ -364,7 +370,7 @@ const TMRelationViewer = ({ inputDcmts, isForMaster = false, showCurrentDcmtIndi
             const searchEngine = SDK_Globals.tmSession?.NewSearchEngine();
             if (!searchEngine)
                 return items;
-            const results = await searchEngine.GetAllMasterDcmtsAsync(dTID, dDID) ?? [];
+            const results = await untilAborted(searchEngine.GetAllMasterDcmtsAsync(dTID, dDID), signal) ?? [];
             for (const searchResult of results) {
                 // Interruzione richiesta dall'utente: restituisce le correlazioni già calcolate
                 if (signal?.aborted)
@@ -610,7 +616,7 @@ const TMRelationViewer = ({ inputDcmts, isForMaster = false, showCurrentDcmtIndi
     /**
      * Main data loading function
      */
-    const loadData = useCallback(async () => {
+    const loadData = useCallback(async (panel) => {
         if (!inputDcmts || inputDcmts.length === 0 || dcmtTypes.length === 0) {
             setTreeData([]);
             return;
@@ -625,14 +631,14 @@ const TMRelationViewer = ({ inputDcmts, isForMaster = false, showCurrentDcmtIndi
                 break;
             }
             // Update wait panel progress
-            setWaitPanelTextPrimary(`Caricamento correlazione ${processedCount + 1} di ${inputDcmts.length}`);
+            panel.setSubtitle(`Caricamento correlazione ${processedCount + 1} di ${inputDcmts.length}`);
             const searchEngine = SDK_Globals.tmSession?.NewSearchEngine();
             if (!searchEngine)
                 continue;
             // Load document metadata
             let result;
             try {
-                result = await searchEngine.GetMetadataAsync(dcmt.TID, dcmt.DID, false);
+                result = await untilAborted(searchEngine.GetMetadataAsync(dcmt.TID, dcmt.DID, false), abortController.signal);
             }
             catch (metadataError) {
                 console.warn('[TMRelationViewer] GetMetadataAsync failed for TID:', dcmt.TID, 'DID:', dcmt.DID, metadataError);
@@ -645,9 +651,12 @@ const TMRelationViewer = ({ inputDcmts, isForMaster = false, showCurrentDcmtIndi
                 });
                 // Skip this document and continue with the next one
                 processedCount++;
-                setWaitPanelValuePrimary(processedCount);
+                await panel.step();
                 continue;
             }
+            // Interrotto durante la chiamata: esce con le correlazioni gia' calcolate
+            if (abortController.signal.aborted)
+                break;
             const dtd = await DcmtTypeListCacheService.GetAsync(dcmt.TID);
             // Parse document values
             const docValues = await searchResultToDataSource(result, undefined, abortController.signal);
@@ -823,7 +832,8 @@ const TMRelationViewer = ({ inputDcmts, isForMaster = false, showCurrentDcmtIndi
             }
             // Update progress counter
             processedCount++;
-            setWaitPanelValuePrimary(processedCount);
+            // step() attende anche la conferma di interruzione: col dialogo aperto il ciclo resta fermo
+            await panel.step();
         }
         /**
          * Helper function to check if a node has any actual correlated documents
@@ -973,20 +983,28 @@ const TMRelationViewer = ({ inputDcmts, isForMaster = false, showCurrentDcmtIndi
         lastLoadedInputRef.current = currentKey;
         // Reset interaction flag when loading new data
         userInteractedWithStaticItemsRef.current = false;
-        setShowWaitPanel(true);
-        setWaitPanelMaxValuePrimary(inputDcmts.length);
-        setWaitPanelValuePrimary(0);
+        setIsInitialLoading(true);
+        const panel = TMWaitPanelManager.show({
+            title: isForMaster ? SDKUI_Localizator.LoadingMasterDocuments : SDKUI_Localizator.LoadingDetailDocuments,
+            max: inputDcmts.length,
+            showCounters: false,
+            cancelable: true,
+            onAbort: () => abortController.abort(),
+        });
+        loadPanelRef.current = panel;
         // Call loadData and use .then() instead of await to allow React to render
-        loadData().then(() => {
+        loadData(panel).then(() => {
             // Mark as loaded AFTER data is ready - state update triggers re-render for focus selection
             lastLoadedInputRef.current = currentKey;
             setLoadedInputKey(currentKey);
-            setShowWaitPanel(false);
-            setWaitPanelTextPrimary('');
-            setWaitPanelMaxValuePrimary(0);
-            setWaitPanelValuePrimary(0);
+        }).finally(() => {
+            // Il pannello resta aperto per tutto loadData, ripristini inclusi
+            panel.close();
+            if (loadPanelRef.current === panel)
+                loadPanelRef.current = undefined;
+            setIsInitialLoading(false);
         });
-    }, [inputDcmts, dcmtTypes, maxDepthLevel, getInputKey, loadData, treeData.length]);
+    }, [inputDcmts, dcmtTypes, maxDepthLevel, isForMaster, abortController, getInputKey, loadData, treeData.length]);
     /**
      * Update tree when showZeroDcmts changes
      * Updates the visualization without re-fetching data (isLoaded stays true)
@@ -1123,11 +1141,19 @@ const TMRelationViewer = ({ inputDcmts, isForMaster = false, showCurrentDcmtIndi
         // ============================================
         if (node.isDcmt && node.tid && node.did) {
             const newAbortController = new AbortController();
-            setExpansionAbortController(newAbortController);
-            setShowExpansionWaitPanel(true);
-            setExpansionWaitPanelMaxValue(1);
-            setExpansionWaitPanelValue(0);
-            setExpansionWaitPanelText(`Caricamento documenti correlati...`);
+            expansionAbortControllerRef.current = newAbortController;
+            setIsExpansionLoading(true);
+            // Un solo nodo: niente contatori ne' stima dei tempi, solo l'attesa annullabile.
+            const panel = TMWaitPanelManager.show({
+                title: isForMaster ? SDKUI_Localizator.LoadingMasterDocuments : SDKUI_Localizator.LoadingDetailDocuments,
+                subtitle: 'Caricamento documenti correlati...',
+                max: 1,
+                showCounters: false,
+                showEta: false,
+                cancelable: true,
+                onAbort: () => newAbortController.abort(),
+            });
+            expansionPanelRef.current = panel;
             try {
                 // Check for abort
                 if (newAbortController.signal.aborted) {
@@ -1163,8 +1189,10 @@ const TMRelationViewer = ({ inputDcmts, isForMaster = false, showCurrentDcmtIndi
                 return [];
             }
             finally {
-                setShowExpansionWaitPanel(false);
-                setExpansionAbortController(undefined);
+                panel.close();
+                setIsExpansionLoading(false);
+                expansionAbortControllerRef.current = undefined;
+                expansionPanelRef.current = undefined;
             }
         }
         // Default: return existing items
@@ -1292,7 +1320,7 @@ const TMRelationViewer = ({ inputDcmts, isForMaster = false, showCurrentDcmtIndi
                 checkoutStatusIcon = checkoutStatus.icon;
             }
         }
-        return (_jsxs("div", { onDoubleClick: handleDoubleClick, style: documentStyle, children: [item.did && item.tid && showCurrentDcmtIndicator && inputDcmts?.some(d => d.DID === item.did && d.TID === item.tid) ? _jsx(IconBackhandIndexPointingRight, { fontSize: 22, overflow: 'visible' }) : _jsx(_Fragment, {}), item.values && (_jsx(TMDcmtIcon, { tid: item.values?.TID?.value, did: item.values?.DID?.value, fileExtension: item.values?.FILEEXT?.value, fileCount: item.values?.FILECOUNT?.value, isLexProt: item.values?.IsLexProt?.value, isMail: item.values?.ISMAIL?.value, isShared: item.values?.ISSHARED?.value, isSigned: item.values?.ISSIGNED?.value, downloadMode: 'openInNewWindow', usePortal: true })), checkoutStatusIcon, metadataContent] }));
+        return (_jsxs("div", { onDoubleClick: handleDoubleClick, style: documentStyle, children: [item.did && item.tid && showCurrentDcmtIndicator && inputDcmts?.some(d => d.DID === item.did && d.TID === item.tid) ? _jsx(IconBackhandIndexPointingRight, { fontSize: 22, overflow: 'visible' }) : _jsx(_Fragment, {}), item.values && (_jsx(TMDcmtIcon, { tid: item.values?.TID?.value, did: item.values?.DID?.value, fileExtension: item.values?.FILEEXT?.value, fileCount: item.values?.FILECOUNT?.value, isLexProt: item.values?.IsLexProt?.value, isMail: item.values?.ISMAIL?.value, isShared: item.values?.ISSHARED?.value, isSigned: item.values?.ISSIGNED?.value, downloadMode: 'openInNewWindow' })), checkoutStatusIcon, metadataContent] }));
     }, [onDocumentDoubleClick, showCurrentDcmtIndicator, inputDcmts, customMainContainerContent, customDocumentStyle, customDocumentContent, showMetadataNames, showMainDocument, allUsers]);
     /**
      * Wrapper renderer that handles custom rendering if provided
@@ -1406,10 +1434,10 @@ const TMRelationViewer = ({ inputDcmts, isForMaster = false, showCurrentDcmtIndi
         }
         const targetLevel = expandLevel;
         const newAbortController = new AbortController();
-        setExpansionAbortController(newAbortController);
-        // Denominatore subito: con maxValue = 0 TMWaitPanel disegna una barra ferma a 0%
-        setExpansionWaitPanelMaxValue(100);
-        setExpansionWaitPanelValue(0);
+        expansionAbortControllerRef.current = newAbortController;
+        // Aperto solo se servono chiamate API (vedi hasApiCalls): con i figli già in
+        // memoria l'espansione è immediata e il pannello lampeggerebbe soltanto.
+        let panel;
         // CONTATORI DINAMICI:
         // - totalNodes: cresce quando scopriamo nuovi nodi (evita che percentuale > 100%)
         // - processedNodes: quanti nodi abbiamo già processato
@@ -1487,9 +1515,17 @@ const TMRelationViewer = ({ inputDcmts, isForMaster = false, showCurrentDcmtIndi
                         if (!hasApiCalls) {
                             hasApiCalls = true;
                             TMSpinner.hide();
-                            setShowExpansionWaitPanel(true);
-                            setExpansionWaitPanelMaxValue(100);
-                            setExpansionWaitPanelValue(0);
+                            setIsExpansionLoading(true);
+                            // Avanzamento in centesimi: il totale cambia mentre si scoprono i figli, niente ETA.
+                            panel = TMWaitPanelManager.show({
+                                title: isForMaster ? SDKUI_Localizator.LoadingMasterDocuments : SDKUI_Localizator.LoadingDetailDocuments,
+                                max: 100,
+                                showCounters: false,
+                                showEta: false,
+                                cancelable: true,
+                                onAbort: () => newAbortController.abort(),
+                            });
+                            expansionPanelRef.current = panel;
                         }
                         try {
                             let loadedItems = [];
@@ -1537,9 +1573,9 @@ const TMRelationViewer = ({ inputDcmts, isForMaster = false, showCurrentDcmtIndi
                     shownProgress = Math.min(99, realProgress > shownProgress
                         ? realProgress
                         : shownProgress + (99 - shownProgress) * 0.01);
-                    setExpansionWaitPanelValue(shownProgress);
+                    panel?.setValue(shownProgress);
                     // Seconda riga: spiega perché percentuale e conteggio non vanno di pari passo
-                    setExpansionWaitPanelText(SDKUI_Localizator.ExpansionProgress.replaceParams(processedNodes.toString(), totalNodes.toString())
+                    panel?.setSubtitle(SDKUI_Localizator.ExpansionProgress.replaceParams(processedNodes.toString(), totalNodes.toString())
                         + (totalNodes > initialTotalNodes ? `\n${SDKUI_Localizator.ExpansionProgressIsEstimated}` : ''));
                     // ═══════════════════════════════════════════════════════════════════
                     // PASSO 3: CHIAMATA RICORSIVA SUI FIGLI
@@ -1568,8 +1604,10 @@ const TMRelationViewer = ({ inputDcmts, isForMaster = false, showCurrentDcmtIndi
         finally {
             // Cleanup: nascondi spinner e pannello di attesa
             TMSpinner.hide();
-            setShowExpansionWaitPanel(false);
-            setExpansionAbortController(undefined);
+            panel?.close();
+            setIsExpansionLoading(false);
+            expansionAbortControllerRef.current = undefined;
+            expansionPanelRef.current = undefined;
         }
     }, [expandLevel, treeData, staticItemsState, isForMaster, invertMasterNavigation, getDetailDcmtsAsync, getMasterDcmtsAsync, updateHiddenProperty, applyZeroFilterInfoMessage]);
     /**
@@ -1600,8 +1638,10 @@ const TMRelationViewer = ({ inputDcmts, isForMaster = false, showCurrentDcmtIndi
         // Reset collapsed state when user manually expands a node
         setIsAllCollapsed(false);
     }, []);
-    if (showWaitPanel) {
-        return _jsx("div", { style: { padding: '20px', textAlign: 'center' }, children: _jsx(TMWaitPanel, { title: SDKUI_Localizator.LoadingDetailDocuments, showPrimary: true, textPrimary: waitPanelTextPrimary, valuePrimary: waitPanelValuePrimary, maxValuePrimary: waitPanelMaxValuePrimary, isCancelable: true, abortController: abortController, onAbortClick: () => { setTimeout(() => { abortController.abort(); }, 1000); } }) });
+    // Il pannello di attesa è montato dal manager fuori dall'albero React: qui resta
+    // solo il posto dell'albero, che compare a calcolo finito.
+    if (isInitialLoading) {
+        return _jsx("div", { style: { width: '100%', height: '100%' } });
     }
     if (mergedTreeData.length === 0) {
         // Calcolo interrotto dall'utente prima di aver calcolato qualsiasi correlazione
@@ -1658,15 +1698,11 @@ const TMRelationViewer = ({ inputDcmts, isForMaster = false, showCurrentDcmtIndi
                                 whiteSpace: 'nowrap',
                                 outline: 'none',
                                 transition: 'background 0.2s'
-                            }, children: [_jsx(IconChevronRight, { fontSize: 14 }), _jsx("span", { children: SDKUI_Localizator.CollapseAll })] }) })] })), _jsx("div", { style: { flex: 1, minHeight: 0, overflow: 'auto' }, children: _jsx(TMTreeView, { dataSource: mergedTreeData, itemRender: finalItemRender, calculateItemsForNode: calculateItemsForNode, onDataChanged: handleDataChanged, focusedItem: focusedItem, onFocusedItemChanged: handleFocusedItemChanged, allowMultipleSelection: allowMultipleSelection, selectedItems: selectedItems, itemsPerPage: 100, onSelectionChanged: handleSelectedItemsChanged, onItemContextMenu: showExpansionWaitPanel ? undefined : onItemContextMenu, enableVirtualization: true, shouldDelayFocusOnEvent: (node, e) => {
+                            }, children: [_jsx(IconChevronRight, { fontSize: 14 }), _jsx("span", { children: SDKUI_Localizator.CollapseAll })] }) })] })), _jsx("div", { style: { flex: 1, minHeight: 0, overflow: 'auto' }, children: _jsx(TMTreeView, { dataSource: mergedTreeData, itemRender: finalItemRender, calculateItemsForNode: calculateItemsForNode, onDataChanged: handleDataChanged, focusedItem: focusedItem, onFocusedItemChanged: handleFocusedItemChanged, allowMultipleSelection: allowMultipleSelection, selectedItems: selectedItems, itemsPerPage: 100, onSelectionChanged: handleSelectedItemsChanged, onItemContextMenu: isExpansionLoading ? undefined : onItemContextMenu, enableVirtualization: true, shouldDelayFocusOnEvent: (node, e) => {
                         // Ritarda il focus quando si clicca sull'icona del documento
                         // per permettere al doppio click di funzionare
                         const target = e.target;
                         return !!target.closest('.tm-dcmt-icon');
-                    } }) }), showExpansionWaitPanel && (_jsx(TMWaitPanel, { title: isForMaster ? SDKUI_Localizator.LoadingMasterDocuments : SDKUI_Localizator.LoadingDetailDocuments, showPrimary: true, textPrimary: expansionWaitPanelText, valuePrimary: expansionWaitPanelValue, maxValuePrimary: expansionWaitPanelMaxValue, isCancelable: true, abortController: expansionAbortController, onAbortClick: () => {
-                    setTimeout(() => {
-                        expansionAbortController?.abort();
-                    }, 100);
-                } }))] }));
+                    } }) })] }));
 };
 export default TMRelationViewer;

package/lib/components/features/search/TMSearchResult.js

@@ -16,11 +16,10 @@ import TMAccordionNew from '../../base/TMAccordionNew';
 import TMButton from '../../base/TMButton';
 import TMDataGrid, { TMDataGridPageSize } from '../../base/TMDataGrid';
 import { DeviceType, useDeviceType } from '../../base/TMDeviceProvider';
-import { TMLayoutItem, TMSplitterLayout } from '../../base/TMLayout';
+import TMLayoutContainer, { TMLayoutItem, TMSplitterLayout } from '../../base/TMLayout';
 import { ButtonNames, TMExceptionBoxManager, TMMessageBoxManager } from '../../base/TMPopUp';
 import TMSpinner from '../../base/TMSpinner';
 import { StyledMultiViewPanel } from '../../base/Styled';
-import { TMLayoutWaitingContainer } from '../../base/TMWaitPanel';
 import TMMetadataValues from '../../editors/TMMetadataValues';
 import TMTidViewer from '../../viewers/TMTidViewer';
 import { useTMPanelManagerContext } from '../../layout/panelManager/TMPanelManagerContext';
@@ -34,7 +33,6 @@ import TMDcmtPreview from '../documents/TMDcmtPreview';
 import { WorkFlowOperationButtons } from '../workflow/TMWorkflowPopup';
 // Local
 import TMSearchResultFloatingActionButton from './TMSearchResultFloatingActionButton';
-let abortControllerLocal = new AbortController();
 //#region Helper Methods
 export const getSearchResultCountersSingleCategory = (searchResults) => {
     // let totDcmtTypes = searchResults.length;
@@ -397,7 +395,7 @@ handleNavigateToWGs, handleNavigateToDossiers, fetchRemoteCertificates, graphome
             openTaskFormHandler,
         },
     });
-    const { isOpenDcmtForm, isDcmtFormModal, openFormHandler, dcmtFormLayoutMode, onDcmtFormOpenChange, showSearchTMDatagrid, showDcmtTypesSelection, showExportForm, updateBatchUpdateForm, closeDcmtFormHandler, handleSignApprove, checkoutInfo: { showCicoWaitPanel, cicoWaitPanelTitle, showCicoPrimaryProgress, cicoPrimaryProgressText, cicoPrimaryProgressValue, cicoPrimaryProgressMax, }, dcmtOperations: { abortController, showWaitPanel, showPrimary, waitPanelTitle, waitPanelTextPrimary, waitPanelValuePrimary, waitPanelMaxValuePrimary, showSecondary, waitPanelTextSecondary, waitPanelValueSecondary, waitPanelMaxValueSecondary, downloadDcmtsAsync, runOperationAsync, }, relatedDocumentsInfo: { isOpenDetails, isOpenMaster, checkRelatedDcmtsArchiveCapability, checkManyToManyCapability, }, toppyOperations: { showApprovePopup, showRejectPopup, showReAssignPopup, showMoreInfoPopup, updateShowApprovePopup, updateShowRejectPopup, updateShowReAssignPopup, updateShowMoreInfoPopup } } = features;
+    const { isOpenDcmtForm, isDcmtFormModal, openFormHandler, dcmtFormLayoutMode, onDcmtFormOpenChange, showSearchTMDatagrid, showDcmtTypesSelection, showExportForm, updateBatchUpdateForm, closeDcmtFormHandler, handleSignApprove, dcmtOperations: { downloadDcmtsAsync, runOperationAsync, }, relatedDocumentsInfo: { isOpenDetails, isOpenMaster, checkRelatedDcmtsArchiveCapability, checkManyToManyCapability, }, toppyOperations: { showApprovePopup, showRejectPopup, showReAssignPopup, showMoreInfoPopup, updateShowApprovePopup, updateShowRejectPopup, updateShowReAssignPopup, updateShowMoreInfoPopup } } = features;
     // ----- Azioni della colonna di riga (showActionsColumn) -----------------------------------------
     // Le voci di operationItems agiscono sui documenti selezionati o, in mancanza, su quello a fuoco:
     // non accettano una riga come argomento. Il click sull'icona quindi azzera la selezione e porta il
@@ -987,10 +985,10 @@ handleNavigateToWGs, handleNavigateToDossiers, fetchRemoteCertificates, graphome
                     gap: Gutters.getGutters(),
                     width: '100%',
                     height: '100%',
-                }, children: _jsx(TMLayoutWaitingContainer, { direction: 'vertical', showWaitPanel: showWaitPanel, showWaitPanelPrimary: showPrimary, showWaitPanelSecondary: showSecondary, waitPanelTitle: waitPanelTitle, waitPanelTextPrimary: waitPanelTextPrimary, waitPanelValuePrimary: waitPanelValuePrimary, waitPanelMaxValuePrimary: waitPanelMaxValuePrimary, waitPanelTextSecondary: waitPanelTextSecondary, waitPanelValueSecondary: waitPanelValueSecondary, waitPanelMaxValueSecondary: waitPanelMaxValueSecondary, isCancelable: true, abortController: abortController, children: _jsx(TMLayoutWaitingContainer, { direction: 'vertical', showWaitPanel: showCicoWaitPanel, showWaitPanelPrimary: showCicoPrimaryProgress, waitPanelTitle: cicoWaitPanelTitle, waitPanelTextPrimary: cicoPrimaryProgressText, waitPanelValuePrimary: cicoPrimaryProgressValue, waitPanelMaxValuePrimary: cicoPrimaryProgressMax, isCancelable: true, abortController: abortControllerLocal, children: (groupId && groupId.length > 0) ? panelManagerContent
-                            // Senza le prop di persistenza il provider si comporta come quello base:
-                            // i contesti che non ricordano il layout restano come prima
-                            : _jsx(TMPanelManagerWithPersistenceProvider, { panels: initialPanels, initialVisibility: allInitialPanelVisibility, defaultDimensions: initialPanelDimensions, initialDimensions: initialPanelDimensions, initialMobilePanelId: 'tmSearchResult', isPersistenceEnabled: isLayoutPersisted && hasSearchResultPanelLayout(), persistPanelStates: isLayoutPersisted ? (state) => saveSearchResultPanelLayout(state, disabledLayoutPanelIds) : undefined, persistedPanelStates: isLayoutPersisted ? getSearchResultPanelLayout() : undefined, children: panelManagerContent }) }) }) }), renderDcmtOperations] }));
+                }, children: _jsx(TMLayoutContainer, { direction: 'vertical', children: (groupId && groupId.length > 0) ? panelManagerContent
+                        // Senza le prop di persistenza il provider si comporta come quello base:
+                        // i contesti che non ricordano il layout restano come prima
+                        : _jsx(TMPanelManagerWithPersistenceProvider, { panels: initialPanels, initialVisibility: allInitialPanelVisibility, defaultDimensions: initialPanelDimensions, initialDimensions: initialPanelDimensions, initialMobilePanelId: 'tmSearchResult', isPersistenceEnabled: isLayoutPersisted && hasSearchResultPanelLayout(), persistPanelStates: isLayoutPersisted ? (state) => saveSearchResultPanelLayout(state, disabledLayoutPanelIds) : undefined, persistedPanelStates: isLayoutPersisted ? getSearchResultPanelLayout() : undefined, children: panelManagerContent }) }) }), renderDcmtOperations] }));
 };
 export default TMSearchResult;
 /** Cerca una voce di operazione per id, anche dentro i sottomenu */

package/lib/components/features/search/TMViewHistoryDcmt.js

@@ -10,12 +10,13 @@ import TMDcmtIcon from "../documents/TMDcmtIcon";
 import TMDataGrid from "../../base/TMDataGrid";
 import TMDcmtForm from "../documents/TMDcmtForm";
 import { useDcmtOperations } from "../../../hooks/useDcmtOperations";
-import { TMLayoutWaitingContainer } from "../../base/TMWaitPanel";
+import TMLayoutContainer from "../../base/TMLayout";
+import TMWaitPanelManager from "../../base/waitPanel/TMWaitPanelManager";
 import { TMResultManager } from "../../forms/TMResultDialog";
 let abortLocalController = new AbortController();
 const TMViewHistoryDcmt = (props) => {
     const { deviceType, inputDcmt, onClose, fromDTD, allTasks, getAllTasks, deleteTaskByIdsCallback, addTaskCallback, editTaskCallback, handleNavigateToWGs, handleNavigateToDossiers } = props;
-    const { abortController, showWaitPanel, waitPanelTitle, showPrimary, waitPanelTextPrimary, waitPanelValuePrimary, waitPanelMaxValuePrimary, showSecondary, waitPanelTextSecondary, waitPanelValueSecondary, waitPanelMaxValueSecondary, downloadDcmtsAsync } = useDcmtOperations();
+    const { downloadDcmtsAsync } = useDcmtOperations();
     const [dcmtHistory, setDcmtHistory] = useState([]);
     // showId is a state variable that determines whether an ID-related component or feature should be displayed
     const [showId, setShowId] = useState(false);
@@ -33,18 +34,6 @@ const TMViewHistoryDcmt = (props) => {
     const [showDcmtForm, setShowDcmtForm] = useState(false);
     // Memoized value to get the selected draft based on the focused row key
     const selectedDcmt = useMemo(() => dcmtHistory.find(dcmt => dcmt.id === focusedRowKey), [focusedRowKey, dcmtHistory]);
-    // State variable to control the visibility of the wait panel.
-    const [showLocalWaitPanel, setShowLocalWaitPanel] = useState(false);
-    // State variable to store the title of the wait panel.
-    const [waitLocalPanelTitle, setWaitLocalPanelTitle] = useState('');
-    // State variable to control the visibility of the primary section of the wait panel.
-    const [showLocalPrimary, setShowLocalPrimary] = useState(false);
-    // State variable to store the primary text of the wait panel.
-    const [waitLocalPanelTextPrimary, setWaitLocalPanelTextPrimary] = useState('');
-    // State variable to track the current value of the primary progress indicator in the wait panel.
-    const [waitLocalPanelValuePrimary, setWaitLocalPanelValuePrimary] = useState(0);
-    // State variable to define the maximum value for the primary progress indicator in the wait panel.
-    const [waitLocalPanelMaxValuePrimary, setWaitLocalPanelMaxValuePrimary] = useState(0);
     const getParticipantById = (id, users) => {
         if (users.length === 0)
             return null;
@@ -155,18 +144,21 @@ const TMViewHistoryDcmt = (props) => {
                 onButtonClick: async (e) => {
                     if (e !== ButtonNames.YES)
                         return;
-                    setWaitLocalPanelTitle(SDKUI_Localizator.Delete);
-                    setShowLocalWaitPanel(true);
-                    setShowLocalPrimary(true);
                     abortLocalController = new AbortController();
+                    const panel = TMWaitPanelManager.show({
+                        title: SDKUI_Localizator.Delete,
+                        max: 1,
+                        showCounters: false,
+                        cancelable: true,
+                        onAbort: () => abortLocalController.abort(),
+                    });
                     let result = [];
                     let i = 0;
-                    setWaitLocalPanelMaxValuePrimary(1);
                     if (abortLocalController.signal.aborted) {
                         result.push({ rowIndex: i, id1: currentDcmt.id, id2: currentDcmt.id, resultType: ResultTypes.WARNING, description: `Operazione interrotta. Elaborate ${i}` });
                     }
                     else {
-                        setWaitLocalPanelTextPrimary(SDKUI_Localizator.Delete);
+                        panel.setSubtitle(SDKUI_Localizator.Delete);
                         const deleteEngine = new DeleteEngine(SDK_Globals.tmSession);
                         await deleteEngine.PhysDeleteByIDAsync(Number(currentDcmt.TID), Number(currentDcmt.DID), false)
                             .then(async () => {
@@ -178,10 +170,7 @@ const TMViewHistoryDcmt = (props) => {
                         });
                     }
                     setFocusedRowKey(undefined);
-                    setWaitLocalPanelTextPrimary('');
-                    setWaitLocalPanelMaxValuePrimary(0);
-                    setWaitLocalPanelValuePrimary(0);
-                    setShowLocalWaitPanel(false);
+                    panel.close();
                     TMResultManager.show(result, SDKUI_Localizator.Delete, "ID", undefined);
                 }
             });
@@ -279,7 +268,7 @@ const TMViewHistoryDcmt = (props) => {
             { dataField: "LastUpdateTime", caption: SDKUI_Localizator.LastUpdateTime, dataType: 'datetime', format: 'dd/MM/yyyy HH:mm:ss', },
         ]);
     }, [showId]);
-    return _jsx(TMModal, { title: `${SDKUI_Localizator.SearchResult} \u2014 ${SDKUI_Localizator.History + ": " + (fromDTD.nameLoc ?? SDKUI_Localizator.Document) + " (DID:" + inputDcmt.DID})`, width: calcResponsiveSizes(deviceType, '700px', '700px', '95%'), height: calcResponsiveSizes(deviceType, '80%', '80%', '95%'), onClose: onClose, children: _jsx(TMLayoutWaitingContainer, { direction: 'vertical', showWaitPanel: showWaitPanel, showWaitPanelPrimary: showPrimary, showWaitPanelSecondary: showSecondary, waitPanelTitle: waitPanelTitle, waitPanelTextPrimary: waitPanelTextPrimary, waitPanelValuePrimary: waitPanelValuePrimary, waitPanelMaxValuePrimary: waitPanelMaxValuePrimary, waitPanelTextSecondary: waitPanelTextSecondary, waitPanelValueSecondary: waitPanelValueSecondary, waitPanelMaxValueSecondary: waitPanelMaxValueSecondary, isCancelable: true, abortController: abortController, children: _jsxs(TMLayoutWaitingContainer, { direction: 'vertical', showWaitPanel: showLocalWaitPanel, showWaitPanelPrimary: showLocalPrimary, waitPanelTitle: waitLocalPanelTitle, waitPanelTextPrimary: waitLocalPanelTextPrimary, waitPanelValuePrimary: waitLocalPanelValuePrimary, waitPanelMaxValuePrimary: waitLocalPanelMaxValuePrimary, isCancelable: true, abortController: abortLocalController, children: [_jsx(TMDataGrid, { dataSource: dcmtHistory, dataColumns: dataColumns, focusedRowKey: focusedRowKey, selection: selection, customContextMenuItems: customContextMenuItems, onFocusedRowChanged: onFocusedRowChanged, onCellDblClick: onCellDblClick, noDataText: SDKUI_Localizator.NoDataToDisplay, showSearchPanel: showSearch }), (showDcmtForm && selectedDcmt !== undefined) &&
-                        _jsx(TMDcmtForm, { TID: Number(selectedDcmt.TID), DID: Number(selectedDcmt.DID), formMode: FormModes.ReadOnly, isModal: true, widthModal: "95%", heightModal: "95%", titleModal: fromDTD.name ?? SDKUI_Localizator.SearchResult, allowNavigation: dcmtHistory.length > 0, itemIndex: selectedIndex + 1, count: dcmtHistory.length, onClose: () => { setShowDcmtForm(false); }, canNext: canNavigateHandler('next'), canPrev: canNavigateHandler('prev'), onNext: () => onNavigateHandler('next'), onPrev: () => onNavigateHandler('prev'), allTasks: allTasks, getAllTasks: getAllTasks, deleteTaskByIdsCallback: deleteTaskByIdsCallback, addTaskCallback: addTaskCallback, editTaskCallback: editTaskCallback, handleNavigateToWGs: handleNavigateToWGs, handleNavigateToDossiers: handleNavigateToDossiers, moreInfoTasks: getMoreInfoTasksForDocument(allTasks ?? [], Number(selectedDcmt.TID), Number(selectedDcmt.DID)) })] }) }) });
+    return _jsx(TMModal, { title: `${SDKUI_Localizator.SearchResult} \u2014 ${SDKUI_Localizator.History + ": " + (fromDTD.nameLoc ?? SDKUI_Localizator.Document) + " (DID:" + inputDcmt.DID})`, width: calcResponsiveSizes(deviceType, '700px', '700px', '95%'), height: calcResponsiveSizes(deviceType, '80%', '80%', '95%'), onClose: onClose, children: _jsxs(TMLayoutContainer, { direction: 'vertical', children: [_jsx(TMDataGrid, { dataSource: dcmtHistory, dataColumns: dataColumns, focusedRowKey: focusedRowKey, selection: selection, customContextMenuItems: customContextMenuItems, onFocusedRowChanged: onFocusedRowChanged, onCellDblClick: onCellDblClick, noDataText: SDKUI_Localizator.NoDataToDisplay, showSearchPanel: showSearch }), (showDcmtForm && selectedDcmt !== undefined) &&
+                    _jsx(TMDcmtForm, { TID: Number(selectedDcmt.TID), DID: Number(selectedDcmt.DID), formMode: FormModes.ReadOnly, isModal: true, widthModal: "95%", heightModal: "95%", titleModal: fromDTD.name ?? SDKUI_Localizator.SearchResult, allowNavigation: dcmtHistory.length > 0, itemIndex: selectedIndex + 1, count: dcmtHistory.length, onClose: () => { setShowDcmtForm(false); }, canNext: canNavigateHandler('next'), canPrev: canNavigateHandler('prev'), onNext: () => onNavigateHandler('next'), onPrev: () => onNavigateHandler('prev'), allTasks: allTasks, getAllTasks: getAllTasks, deleteTaskByIdsCallback: deleteTaskByIdsCallback, addTaskCallback: addTaskCallback, editTaskCallback: editTaskCallback, handleNavigateToWGs: handleNavigateToWGs, handleNavigateToDossiers: handleNavigateToDossiers, moreInfoTasks: getMoreInfoTasksForDocument(allTasks ?? [], Number(selectedDcmt.TID), Number(selectedDcmt.DID)) })] }) });
 };
 export default TMViewHistoryDcmt;