@topconsultnpm/sdkui-react 6.20.0-test1 → 6.21.0-dev1.10

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

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useCallback, useEffect, useMemo, useState } from 'react';
-import { DcmtTypeListCacheService, SDK_Localizator } from '@topconsultnpm/sdk-ts';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { DcmtTypeListCacheService, LayoutModes, SDK_Globals, SDK_Localizator } from '@topconsultnpm/sdk-ts';
 import TMRelationViewer from './TMRelationViewer';
 import TMContextMenu from '../../NewComponents/ContextMenu/TMContextMenu';
-import { genUniqueId, IconMultipleSelection, IconCheckFile, IconDetailDcmts, SDKUI_Localizator, IconMail, IconDcmtTypeOnlyMetadata, IconCopy, IconMenuVertical, IconDataList, IconPreview, IconSearchCheck, IconBoard, IconDcmtTypeSys, IconShow, getMoreInfoTasksForDocument } from '../../../helper';
+import { IconMultipleSelection, IconCheckFile, IconDetailDcmts, SDKUI_Localizator, IconMenuVertical, IconDataList, IconPreview, IconSearchCheck, IconBoard, IconDcmtTypeSys, IconShow, getMoreInfoTasksForDocument, isApprovalWorkflowView, searchResultToMetadataValues } from '../../../helper';
 import { FormModes, SearchResultContext } from '../../../ts';
 import { TMColors } from '../../../utils/theme';
 import ShowAlert from '../../base/TMAlert';
@@ -14,14 +14,190 @@ import { TMPanelManagerProvider, useTMPanelManagerContext } from '../../layout/p
 import TMSearchResult from '../search/TMSearchResult';
 import TMDcmtForm from './TMDcmtForm';
 import { TMNothingToShow } from './TMDcmtPreview';
-const TMMasterDetailDcmts = ({ allTasks = [], getAllTasks, deleteTaskByIdsCallback, addTaskCallback, editTaskCallback, handleNavigateToWGs, handleNavigateToDossiers, deviceType, inputDcmts, isForMaster, showCurrentDcmtIndicator = true, allowNavigation, canNext, canPrev, onNext, onPrev, onBack, appendMasterDcmts, onTaskCreateRequest }) => {
-    const [id, setID] = useState('');
+import { Spinner } from '../..';
+import { useDocumentOperations } from '../../../hooks/useDocumentOperations';
+const TMMasterDetailDcmts = ({ allTasks = [], getAllTasks, deleteTaskByIdsCallback, addTaskCallback, editTaskCallback, handleNavigateToWGs, handleNavigateToDossiers, deviceType, inputDcmts, isForMaster, showCurrentDcmtIndicator = true, allowNavigation, canNext, canPrev, onNext, onPrev, onBack, appendMasterDcmts, onTaskCreateRequest, onRefreshAfterAddDcmtToFavs, editPdfForm, openS4TViewer, onOpenS4TViewerRequest, onOpenPdfEditorRequest, datagridUtility, dcmtUtility }) => {
+    const floatingBarContainerRef = useRef(null);
     const [focusedItem, setFocusedItem] = useState();
     const [selectedItems, setSelectedItems] = useState([]);
     const [showZeroDcmts, setShowZeroDcmts] = useState(false);
     const [allowMultipleSelection, setAllowMultipleSelection] = useState(false);
     const [dtdMaster, setDtdMaster] = useState();
-    useEffect(() => { setID(genUniqueId()); }, []);
+    const [noRelationsOnFirstLoad, setNoRelationsOnFirstLoad] = useState(false);
+    const [isCheckingFirstLoad, setIsCheckingFirstLoad] = useState(true);
+    const [contextMenuVisible, setContextMenuVisible] = useState(false);
+    const [contextMenuPosition, setContextMenuPosition] = useState({ x: 0, y: 0 });
+    const [dtdFocused, setDtdFocused] = useState();
+    const [refreshKey, setRefreshKey] = useState(0);
+    // Stato per gestire la transizione fluida durante il refresh
+    const [isRefreshing, setIsRefreshing] = useState(false);
+    /** State for transformed focusedItem metadata values (similar to formData in TMDcmtForm) */
+    const [focusedItemFormData, setFocusedItemFormData] = useState([]);
+    // Trigger operationItems refresh (after file substitution, etc.)
+    const [refreshOperationsTrigger, setRefreshOperationsTrigger] = useState(0);
+    // Increments trigger counter to force operationItems to re-calculate
+    const onRefreshOperationsDatagrid = useCallback(async () => {
+        setRefreshOperationsTrigger(prev => prev + 1);
+    }, []);
+    // Refresh con transizione fluida: fade-out -> update -> fade-in
+    const onRefreshSearch = async () => {
+        await dcmtUtility?.onRefreshPreviewForm?.();
+        // Avvia fade-out
+        setIsRefreshing(true);
+        // Attendi che il fade-out sia completato, poi aggiorna
+        setTimeout(() => {
+            setRefreshKey(prev => prev + 1);
+            onRefreshOperationsDatagrid();
+            // Attendi un po' per dare tempo al re-render, poi fade-in
+            setTimeout(() => {
+                setIsRefreshing(false);
+            }, 300); // Durata extra dell'overlay dopo l'update
+        }, 200); // Durata del fade-out
+    };
+    useEffect(() => {
+        const fetchFocusedItemMetadata = async () => {
+            if (!focusedItem?.tid || !focusedItem?.did) {
+                setFocusedItemFormData([]);
+                return;
+            }
+            try {
+                const tid = focusedItem?.tid;
+                const did = focusedItem?.did;
+                const metadata = await SDK_Globals.tmSession?.NewSearchEngine().GetMetadataAsync(tid, did, true);
+                // Transform metadata to MetadataValueDescriptorEx[] (similar to setMetadataList in TMDcmtForm)
+                if (metadata) {
+                    const dtdResult = metadata.dtdResult;
+                    const rows = dtdResult?.rows ? dtdResult.rows[0] : [];
+                    const mids = metadata.selectMIDs;
+                    // Get DTD with metadata descriptors
+                    const dtdWithMetadata = await DcmtTypeListCacheService.GetWithNotGrantedAsync(tid, did, metadata);
+                    const mdList = dtdWithMetadata?.metadata ?? [];
+                    const metadataList = searchResultToMetadataValues(tid, dtdResult, rows, mids, mdList, LayoutModes.Update);
+                    setFocusedItemFormData(structuredClone(metadataList));
+                }
+            }
+            catch (error) {
+                console.error('Error fetching focusedItem metadata:', error);
+                setFocusedItemFormData([]);
+            }
+        };
+        fetchFocusedItemMetadata();
+    }, [focusedItem?.tid, focusedItem?.did, refreshOperationsTrigger]);
+    // Load dtdFocused when focusedItem changes
+    useEffect(() => {
+        const loadDtdFocused = async () => {
+            if (!focusedItem?.tid) {
+                setDtdFocused(undefined);
+                return;
+            }
+            const dtd = await DcmtTypeListCacheService.GetAsync(focusedItem.tid);
+            setDtdFocused(dtd);
+        };
+        loadDtdFocused();
+    }, [focusedItem?.tid]);
+    const openTaskFormHandler = (onTaskCreated) => {
+        if (selectedItems.length > 1)
+            return;
+        const item = selectedItems.length === 1 ? selectedItems[0] : focusedItem;
+        if (item && item.tid && item.did) {
+            const createTaskFromDocumentOrWorkItem = async () => {
+                try {
+                    const dtd = await DcmtTypeListCacheService.GetWithNotGrantedAsync(item.tid, item?.did);
+                    if (dtd) {
+                        const isWorkItem = isApprovalWorkflowView(dtd);
+                        if (item.tid === undefined || item.did === undefined) {
+                            console.error("TID or DID is undefined for the selected item.");
+                            return;
+                        }
+                        const name = `${dtd.name ?? '-'} (DID: ${item.did})`;
+                        onTaskCreateRequest?.(isWorkItem
+                            ? { workItem: { tid: item.tid, did: item.did, name } }
+                            : { document: { tid: item.tid, did: item.did, name } }, onTaskCreated);
+                    }
+                }
+                catch (error) {
+                    console.error("Error fetching data:", error);
+                }
+            };
+            createTaskFromDocumentOrWorkItem();
+        }
+    };
+    const { operationItems, renderFloatingBar, renderDcmtOperations, features } = useDocumentOperations({
+        context: SearchResultContext.MASTER_DETAIL,
+        documentData: {
+            dtd: dtdFocused,
+            selectedItems: selectedItems ? selectedItems.map(item => ({ TID: item.tid, DID: item.did, FILEEXT: item.fileExt })) : [],
+            focusedItem: focusedItem ? { TID: focusedItem.tid, DID: focusedItem.did, FILEEXT: focusedItem.fileExt } : undefined,
+            currentSearchResults: [],
+            currentMetadataValues: [],
+            allUsers: [],
+            // searchResult: selectedSearchResult,
+            datagridUtility: {
+                visibleItems: [],
+                onRefreshSearchAsyncDatagrid: datagridUtility?.onRefreshSearchAsyncDatagrid,
+                onRefreshDataRowsAsync: datagridUtility?.onRefreshDataRowsAsync,
+                refreshFocusedDataRowAsync: datagridUtility?.refreshFocusedDataRowAsync,
+                onRefreshBlogDatagrid: datagridUtility?.onRefreshBlogDatagrid,
+                onRefreshPreviewDatagrid: datagridUtility?.onRefreshPreviewDatagrid,
+                refreshOperationsTrigger,
+                onRefreshOperationsDatagrid,
+            },
+            dcmtUtility: {
+                approvalVID: dcmtUtility?.approvalVID,
+                dcmtDataRowForCicoStatus: focusedItemFormData, // Passa i metadata trasformati del focusedItem per le operazioni di CICO
+                selectedDcmtSearchResultRelations: dcmtUtility?.selectedDcmtSearchResultRelations,
+                dcmtTIDHasDetailRelations: dcmtUtility?.dcmtTIDHasDetailRelations,
+                dcmtTIDHasMasterRelations: dcmtUtility?.dcmtTIDHasMasterRelations,
+                updateCurrentDcmt: onRefreshSearch,
+                onCloseDcmtForm: dcmtUtility?.onCloseDcmtForm,
+                onRefreshBlogForm: dcmtUtility?.onRefreshBlogForm,
+                onRefreshPreviewForm: onRefreshSearch,
+                taskFormDialogComponent: dcmtUtility?.taskFormDialogComponent,
+                s4TViewerDialogComponent: dcmtUtility?.s4TViewerDialogComponent
+            },
+        },
+        uiConfig: {
+            floatingBarContainerRef,
+            openS4TViewer,
+            showDcmtFormSidebar: true,
+            openDcmtFormAsModal: true,
+            allowFloatingBar: false,
+            enablePinIcons: false,
+            allowRelations: true,
+            inputDcmtFormLayoutMode: LayoutModes.Update,
+        },
+        tasks: {
+            allTasks: allTasks,
+            getAllTasks: getAllTasks,
+            deleteTaskByIdsCallback: deleteTaskByIdsCallback,
+            addTaskCallback: addTaskCallback,
+            editTaskCallback: editTaskCallback
+        },
+        callbacks: {
+            // Refresh operations (data consistency)
+            /* onSavedAsyncCallback, */
+            // Workflow operations
+            /* onWFOperationCompleted, */
+            // Navigation
+            /* canNavigateHandler,
+            onNavigateHandler, */
+            handleNavigateToWGs,
+            handleNavigateToDossiers,
+            /* onReferenceClick, */
+            // Document forms/operations
+            /* openAddDocumentForm,
+            openCommentFormCallback,
+            onFileOpened,
+            passToArchiveCallback,
+            openWGsCopyMoveForm, */
+            onOpenS4TViewerRequest,
+            onOpenPdfEditorRequest,
+            // Task related
+            onTaskCreateRequest,
+            openTaskFormHandler,
+            onRefreshAfterAddDcmtToFavs,
+        },
+    });
     // Load dtdMaster when inputDcmts changes
     useEffect(() => {
         const loadDtdMaster = async () => {
@@ -40,10 +216,37 @@ const TMMasterDetailDcmts = ({ allTasks = [], getAllTasks, deleteTaskByIdsCallba
     }, [inputDcmts?.length, inputDcmts?.[0]?.TID, isForMaster]);
     const handleFocusedItemChanged = useCallback((item) => {
         setFocusedItem(item);
+        if (item) {
+            setIsCheckingFirstLoad(false);
+        }
     }, []);
     const handleSelectedItemsChanged = useCallback((items) => {
         setSelectedItems(items);
     }, []);
+    const handleNoRelationsFound = useCallback(() => {
+        if (isCheckingFirstLoad) {
+            setNoRelationsOnFirstLoad(true);
+        }
+    }, [isCheckingFirstLoad]);
+    const onItemContextMenu = useCallback((item, e) => {
+        if (!item.isDcmt)
+            return; // Show context menu only for document items
+        setContextMenuPosition({ x: e.clientX, y: e.clientY });
+        setContextMenuVisible(true);
+    }, []);
+    // Show warning alert and navigate back when no relations found on first load
+    useEffect(() => {
+        if (noRelationsOnFirstLoad) {
+            setNoRelationsOnFirstLoad(false);
+            ShowAlert({
+                message: SDKUI_Localizator.RelatedDcmtsNotFound,
+                title: SDKUI_Localizator.RelationsNotFound,
+                duration: 3000,
+                mode: 'warning',
+            });
+            onBack?.();
+        }
+    }, [noRelationsOnFirstLoad, onBack]);
     const commandsMenuItems = [
         {
             icon: _jsx(IconMultipleSelection, { color: allowMultipleSelection ? TMColors.tertiary : TMColors.text_normal }),
@@ -66,95 +269,28 @@ const TMMasterDetailDcmts = ({ allTasks = [], getAllTasks, deleteTaskByIdsCallba
             onClick: () => {
                 appendMasterDcmts?.(focusedItem?.tid, focusedItem?.did);
             }
-        },
-        {
-            icon: _jsx(IconMail, {}),
-            name: "Invia per posta",
-            disabled: false,
-            beginGroup: true,
-            submenu: [
-                {
-                    icon: _jsx(IconMail, {}),
-                    name: "I documenti selezionati",
-                    disabled: false,
-                    onClick: () => ShowAlert({ message: "TODO", mode: 'info', title: `${"TODO"}`, duration: 3000 })
-                },
-                {
-                    icon: _jsx(IconMail, {}),
-                    name: "I documenti di primo livello e tutti i documenti correlati",
-                    disabled: false,
-                    onClick: () => ShowAlert({ message: "TODO", mode: 'info', title: `${"TODO"}`, duration: 3000 })
-                },
-                {
-                    icon: _jsx(IconMail, {}),
-                    name: "I documenti di primo livello e i documenti correlati personalizzando l'operazione",
-                    disabled: false,
-                    onClick: () => ShowAlert({ message: "TODO", mode: 'info', title: `${"TODO"}`, duration: 3000 })
-                },
-            ]
-        },
-        {
-            icon: _jsx(IconDcmtTypeOnlyMetadata, {}),
-            name: "Unisci in un file PDF",
-            disabled: false,
-            submenu: [
-                {
-                    icon: _jsx(IconDcmtTypeOnlyMetadata, {}),
-                    name: "I documenti selezionati",
-                    disabled: false,
-                    onClick: () => ShowAlert({ message: "TODO", mode: 'info', title: `${"TODO"}`, duration: 3000 })
-                },
-                {
-                    icon: _jsx(IconDcmtTypeOnlyMetadata, {}),
-                    name: "I documenti di primo livello e tutti i documenti correlati",
-                    disabled: false,
-                    onClick: () => ShowAlert({ message: "TODO", mode: 'info', title: `${"TODO"}`, duration: 3000 })
-                },
-                {
-                    icon: _jsx(IconDcmtTypeOnlyMetadata, {}),
-                    name: "I documenti di primo livello e i documenti correlati personalizzando l'operazione",
-                    disabled: false,
-                    onClick: () => ShowAlert({ message: "TODO", mode: 'info', title: `${"TODO"}`, duration: 3000 })
-                },
-            ]
-        },
-        {
-            icon: _jsx(IconCopy, {}),
-            name: "Copia in una cartella",
-            disabled: false,
-            submenu: [
-                {
-                    icon: _jsx(IconCopy, {}),
-                    name: "I documenti selezionati",
-                    disabled: false,
-                    onClick: () => ShowAlert({ message: "TODO", mode: 'info', title: `${"TODO"}`, duration: 3000 })
-                },
-                {
-                    icon: _jsx(IconCopy, {}),
-                    name: "I documenti di primo livello e tutti i documenti correlati",
-                    disabled: false,
-                    onClick: () => ShowAlert({ message: "TODO", mode: 'info', title: `${"TODO"}`, duration: 3000 })
-                },
-                {
-                    icon: _jsx(IconCopy, {}),
-                    name: "I documenti di primo livello e i documenti correlati personalizzando l'operazione",
-                    disabled: false,
-                    onClick: () => ShowAlert({ message: "TODO", mode: 'info', title: `${"TODO"}`, duration: 3000 })
-                },
-            ]
         }
     ];
-    const toolbar = _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '10px' }, children: [allowMultipleSelection && _jsx("p", { style: { color: TMColors.colorHeader, textAlign: 'center', padding: '1px 4px', borderRadius: '3px', display: 'flex' }, children: `${selectedItems.length} selezionati` }), allowNavigation && canPrev != undefined && _jsx(TMSaveFormButtonPrevious, { btnStyle: 'icon', iconColor: 'white', isModified: false, formMode: FormModes.ReadOnly, canPrev: canPrev, onPrev: onPrev }), allowNavigation && canNext != undefined && _jsx(TMSaveFormButtonNext, { btnStyle: 'icon', iconColor: 'white', isModified: false, formMode: FormModes.ReadOnly, canNext: canNext, onNext: onNext }), _jsx(TMContextMenu, { items: commandsMenuItems, trigger: 'left', children: _jsx(IconMenuVertical, { color: 'white', cursor: 'pointer' }) })] });
+    const toolbar = _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '10px' }, children: [allowMultipleSelection && _jsx("p", { style: { color: TMColors.colorHeader, textAlign: 'center', padding: '1px 4px', borderRadius: '3px', display: 'flex' }, children: `${selectedItems.filter(item => item.isDcmt).length} selezionati` }), allowNavigation && canPrev != undefined && _jsx(TMSaveFormButtonPrevious, { btnStyle: 'icon', iconColor: 'white', isModified: false, formMode: FormModes.ReadOnly, canPrev: canPrev, onPrev: onPrev }), allowNavigation && canNext != undefined && _jsx(TMSaveFormButtonNext, { btnStyle: 'icon', iconColor: 'white', isModified: false, formMode: FormModes.ReadOnly, canNext: canNext, onNext: onNext }), _jsx(TMContextMenu, { items: commandsMenuItems, trigger: 'left', children: _jsx(IconMenuVertical, { color: 'white', cursor: 'pointer' }) })] });
     const getTitle = () => isForMaster ? `${SDKUI_Localizator.DcmtsMaster} - ${dtdMaster?.nameLoc}` : SDKUI_Localizator.DcmtsDetail;
     const isMobile = deviceType === DeviceType.MOBILE;
     const tmTreeView = useMemo(() => _jsx(_Fragment, { children: !inputDcmts || inputDcmts.length === 0
             ?
                 _jsx(TMNothingToShow, { text: getTitle(), secondText: SDKUI_Localizator.NoDataToDisplay, icon: isForMaster ? _jsx(IconDetailDcmts, { fontSize: 96, transform: 'scale(-1, 1)' }) : _jsx(IconDetailDcmts, { fontSize: 96 }) })
             :
-                _jsx(TMRelationViewerWrapper, { inputDcmts: inputDcmts, isForMaster: isForMaster, showCurrentDcmtIndicator: showCurrentDcmtIndicator, showZeroDcmts: showZeroDcmts, 
-                    // customItemRender={customItemRender}
-                    allowMultipleSelection: allowMultipleSelection, focusedItem: focusedItem, selectedItems: selectedItems, onFocusedItemChanged: handleFocusedItemChanged, onSelectedItemsChanged: handleSelectedItemsChanged }) }), [inputDcmts, isForMaster, showCurrentDcmtIndicator, showZeroDcmts, allowMultipleSelection, focusedItem, selectedItems, handleFocusedItemChanged, handleSelectedItemsChanged]);
-    const tmFormOrResult = useMemo(() => _jsx(TMFormOrResultWrapper, { deviceType: deviceType, focusedItem: focusedItem, onTaskCreateRequest: onTaskCreateRequest, allTasks: allTasks, getAllTasks: getAllTasks, deleteTaskByIdsCallback: deleteTaskByIdsCallback, addTaskCallback: addTaskCallback, editTaskCallback: editTaskCallback, handleNavigateToWGs: handleNavigateToWGs, handleNavigateToDossiers: handleNavigateToDossiers }), [focusedItem, deviceType, allTasks, handleNavigateToWGs, handleNavigateToDossiers]);
+                _jsxs("div", { ref: floatingBarContainerRef, style: { width: "100%", height: "100%" }, onContextMenu: (e) => {
+                        // Mostra context menu anche sullo spazio bianco (quando non si clicca su un item)
+                        e.preventDefault();
+                        setContextMenuPosition({ x: e.clientX, y: e.clientY });
+                        setContextMenuVisible(true);
+                    }, children: [_jsx(TMRelationViewerWrapper, { refreshKey: refreshKey, inputDcmts: inputDcmts, isForMaster: isForMaster, showCurrentDcmtIndicator: showCurrentDcmtIndicator, showZeroDcmts: showZeroDcmts, 
+                            // customItemRender={customItemRender}
+                            allowMultipleSelection: allowMultipleSelection, focusedItem: focusedItem, selectedItems: selectedItems, onFocusedItemChanged: handleFocusedItemChanged, onSelectedItemsChanged: handleSelectedItemsChanged, onNoRelationsFound: handleNoRelationsFound, onItemContextMenu: onItemContextMenu, focusedItemFormData: focusedItemFormData }), _jsx(TMContextMenu, { items: operationItems, externalControl: {
+                                visible: contextMenuVisible,
+                                position: contextMenuPosition,
+                                onClose: () => setContextMenuVisible(false)
+                            } })] }) }), [inputDcmts, isForMaster, showCurrentDcmtIndicator, showZeroDcmts, allowMultipleSelection, focusedItem, selectedItems, handleFocusedItemChanged, handleSelectedItemsChanged, handleNoRelationsFound, onItemContextMenu, contextMenuVisible, contextMenuPosition, refreshKey, focusedItemFormData]);
+    const tmFormOrResult = useMemo(() => _jsx(TMFormOrResultWrapper, { refreshKey: refreshKey, deviceType: deviceType, focusedItem: focusedItem, onTaskCreateRequest: onTaskCreateRequest, allTasks: allTasks, getAllTasks: getAllTasks, deleteTaskByIdsCallback: deleteTaskByIdsCallback, addTaskCallback: addTaskCallback, editTaskCallback: editTaskCallback, handleNavigateToWGs: handleNavigateToWGs, handleNavigateToDossiers: handleNavigateToDossiers, onRefreshAfterAddDcmtToFavs: onRefreshAfterAddDcmtToFavs, editPdfForm: editPdfForm, openS4TViewer: openS4TViewer, onOpenS4TViewerRequest: onOpenS4TViewerRequest, onOpenPdfEditorRequest: onOpenPdfEditorRequest }), [focusedItem, deviceType, allTasks, handleNavigateToWGs, handleNavigateToDossiers, editPdfForm, openS4TViewer, onOpenS4TViewerRequest, onOpenPdfEditorRequest, onRefreshAfterAddDcmtToFavs, refreshKey]);
     const initialPanelDimensions = {
         'tmTreeView': { width: '50%', height: '100%' },
         'tmFormOrResult': { width: '50%', height: '100%' },
@@ -231,7 +367,28 @@ const TMMasterDetailDcmts = ({ allTasks = [], getAllTasks, deleteTaskByIdsCallba
             toolbarOptions: { icon: _jsx(IconSearchCheck, { fontSize: 24 }), visible: false, orderNumber: 2, isActive: allInitialPanelVisibility['tmFormOrResult'] }
         }
     ], [tmTreeView, tmFormOrResult, focusedItem?.isDcmt, dtdMaster]);
-    return (_jsx(TMPanelManagerProvider, { panels: initialPanels, initialVisibility: allInitialPanelVisibility, defaultDimensions: initialPanelDimensions, initialDimensions: initialPanelDimensions, initialMobilePanelId: 'tmTreeView', children: _jsx(TMPanelManagerContainer, { panels: initialPanels, direction: "horizontal", showToolbar: true }) }));
+    return (_jsxs("div", { style: { width: '100%', height: '100%', position: 'relative' }, children: [isCheckingFirstLoad && (_jsx(Spinner, { description: SDKUI_Localizator.Loading, flat: true })), _jsxs("div", { style: isCheckingFirstLoad ? { position: 'absolute', width: 0, height: 0, overflow: 'hidden', opacity: 0, pointerEvents: 'none' } : { width: '100%', height: '100%' }, children: [_jsx(TMPanelManagerProvider, { panels: initialPanels, initialVisibility: allInitialPanelVisibility, defaultDimensions: initialPanelDimensions, initialDimensions: initialPanelDimensions, initialMobilePanelId: 'tmTreeView', children: _jsx(TMPanelManagerContainer, { panels: initialPanels, direction: "horizontal", showToolbar: true }) }), _jsxs("div", { style: {
+                            position: 'absolute',
+                            top: 0,
+                            left: 0,
+                            right: 0,
+                            bottom: 0,
+                            backgroundColor: 'rgba(255, 255, 255, 0.7)',
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            opacity: isRefreshing ? 1 : 0,
+                            pointerEvents: isRefreshing ? 'auto' : 'none',
+                            transition: 'opacity 200ms ease-in-out',
+                            zIndex: 10,
+                        }, children: [_jsx("div", { style: {
+                                    width: 40,
+                                    height: 40,
+                                    border: '3px solid #e0e0e0',
+                                    borderTopColor: TMColors.primaryColor,
+                                    borderRadius: '50%',
+                                    animation: 'spin 0.8s linear infinite',
+                                } }), _jsx("style", { children: `@keyframes spin { to { transform: rotate(360deg); } }` })] }), renderDcmtOperations, renderFloatingBar] })] }));
 };
 export default TMMasterDetailDcmts;
 /**
@@ -240,7 +397,7 @@ export default TMMasterDetailDcmts;
  * - Panel visibility toggling
  * - Focus delay handling
  */
-const TMRelationViewerWrapper = ({ inputDcmts, isForMaster, showCurrentDcmtIndicator, showZeroDcmts, customItemRender, allowMultipleSelection, focusedItem, selectedItems, onFocusedItemChanged, onSelectedItemsChanged }) => {
+const TMRelationViewerWrapper = ({ refreshKey, inputDcmts, isForMaster, showCurrentDcmtIndicator, showZeroDcmts, customItemRender, allowMultipleSelection, focusedItem, selectedItems, onFocusedItemChanged, onSelectedItemsChanged, onNoRelationsFound, onItemContextMenu, focusedItemFormData }) => {
     const { setPanelVisibilityById, setToolbarButtonVisibility } = useTMPanelManagerContext();
     // Handle focused item changes with panel visibility management
     const handleFocusedItemChanged = useCallback((item) => {
@@ -259,15 +416,25 @@ const TMRelationViewerWrapper = ({ inputDcmts, isForMaster, showCurrentDcmtIndic
             setToolbarButtonVisibility('tmDcmtForm', false);
         }
     }, [onFocusedItemChanged, setPanelVisibilityById, setToolbarButtonVisibility]);
-    return (_jsx(TMRelationViewer, { inputDcmts: inputDcmts, isForMaster: isForMaster, showCurrentDcmtIndicator: showCurrentDcmtIndicator, initialShowZeroDcmts: showZeroDcmts, customItemRender: customItemRender, allowMultipleSelection: allowMultipleSelection, focusedItem: focusedItem, selectedItems: selectedItems, onFocusedItemChanged: handleFocusedItemChanged, onSelectedItemsChanged: onSelectedItemsChanged, maxDepthLevel: 1, invertMasterNavigation: false }));
+    const onContextMenu = useCallback((item, e) => {
+        // Ferma la propagazione per evitare che l'evento arrivi al div contenitore
+        // (che ha il suo handler per il context menu sullo spazio bianco)
+        e.stopPropagation();
+        handleFocusedItemChanged(item);
+        // Il setTimeout è necessario per permettere a React di completare il re-render
+        // dopo il cambio di focus (handleFocusedItemChanged aggiorna stato e visibilità pannelli).
+        // Senza il delay, il context menu potrebbe mostrare opzioni basate sul vecchio stato.
+        setTimeout(() => {
+            onItemContextMenu?.(item, e);
+        }, 100);
+    }, [onItemContextMenu, handleFocusedItemChanged]);
+    return (_jsx(TMRelationViewer, { inputDcmts: inputDcmts, isForMaster: isForMaster, showCurrentDcmtIndicator: showCurrentDcmtIndicator, initialShowZeroDcmts: showZeroDcmts, customItemRender: customItemRender, allowMultipleSelection: allowMultipleSelection, focusedItem: focusedItem, selectedItems: selectedItems, onFocusedItemChanged: handleFocusedItemChanged, onSelectedItemsChanged: onSelectedItemsChanged, maxDepthLevel: 1, invertMasterNavigation: false, onNoRelationsFound: onNoRelationsFound, onItemContextMenu: onContextMenu, focusedItemFormData: focusedItemFormData }, refreshKey));
 };
-const TMFormOrResultWrapper = ({ deviceType, focusedItem, onTaskCreateRequest, allTasks = [], getAllTasks, deleteTaskByIdsCallback, addTaskCallback, editTaskCallback, handleNavigateToWGs, handleNavigateToDossiers }) => {
+const TMFormOrResultWrapper = ({ refreshKey, deviceType, focusedItem, onTaskCreateRequest, allTasks = [], getAllTasks, deleteTaskByIdsCallback, addTaskCallback, editTaskCallback, handleNavigateToWGs, handleNavigateToDossiers, onRefreshAfterAddDcmtToFavs, editPdfForm, openS4TViewer, onOpenS4TViewerRequest, onOpenPdfEditorRequest, onRefreshSearchAsyncDatagrid }) => {
     const { setPanelVisibilityById } = useTMPanelManagerContext();
     return (_jsx(_Fragment, { children: focusedItem?.isDcmt ?
-            _jsx(TMDcmtForm, { groupId: 'tmFormOrResult', TID: focusedItem?.tid, DID: focusedItem.did, allowButtonsRefs: true, isClosable: deviceType !== DeviceType.MOBILE, allowNavigation: false, allowRelations: deviceType !== DeviceType.MOBILE, showDcmtFormSidebar: false, onClose: () => {
-                    setPanelVisibilityById('tmTreeView', true);
-                }, allTasks: allTasks, getAllTasks: getAllTasks, deleteTaskByIdsCallback: deleteTaskByIdsCallback, addTaskCallback: addTaskCallback, editTaskCallback: editTaskCallback, handleNavigateToWGs: handleNavigateToWGs, handleNavigateToDossiers: handleNavigateToDossiers, moreInfoTasks: getMoreInfoTasksForDocument(allTasks, focusedItem?.tid, focusedItem?.did) }) :
-            _jsx(TMSearchResult, { groupId: 'tmFormOrResult', isClosable: deviceType !== DeviceType.MOBILE, context: SearchResultContext.METADATA_SEARCH, allowFloatingBar: false, allowRelations: false, openDcmtFormAsModal: true, searchResults: focusedItem?.searchResult ?? [], showSearchResultSidebar: false, onTaskCreateRequest: onTaskCreateRequest, onClose: () => {
-                    setPanelVisibilityById('tmTreeView', true);
-                }, allTasks: allTasks, getAllTasks: getAllTasks, deleteTaskByIdsCallback: deleteTaskByIdsCallback, addTaskCallback: addTaskCallback, editTaskCallback: editTaskCallback, handleNavigateToWGs: handleNavigateToWGs, handleNavigateToDossiers: handleNavigateToDossiers }) }));
+            _jsx(TMDcmtForm, { groupId: 'tmFormOrResult', TID: focusedItem?.tid, DID: focusedItem.did, allowButtonsRefs: true, isClosable: deviceType !== DeviceType.MOBILE, allowNavigation: false, allowRelations: deviceType !== DeviceType.MOBILE, showDcmtFormSidebar: false, onClose: () => { setPanelVisibilityById('tmTreeView', true); }, allTasks: allTasks, getAllTasks: getAllTasks, deleteTaskByIdsCallback: deleteTaskByIdsCallback, addTaskCallback: addTaskCallback, editTaskCallback: editTaskCallback, handleNavigateToWGs: handleNavigateToWGs, handleNavigateToDossiers: handleNavigateToDossiers, moreInfoTasks: getMoreInfoTasksForDocument(allTasks, focusedItem?.tid, focusedItem?.did), openS4TViewer: openS4TViewer, onOpenS4TViewerRequest: onOpenS4TViewerRequest, onOpenPdfEditorRequest: onOpenPdfEditorRequest, datagridUtility: {
+                    onRefreshSearchAsyncDatagrid,
+                } }, refreshKey) :
+            _jsx(TMSearchResult, { groupId: 'tmFormOrResult', isClosable: deviceType !== DeviceType.MOBILE, context: SearchResultContext.METADATA_SEARCH, allowFloatingBar: false, allowRelations: false, openDcmtFormAsModal: true, searchResults: focusedItem?.searchResult ?? [], showSearchResultSidebar: false, showDcmtFormSidebar: false, onTaskCreateRequest: onTaskCreateRequest, onClose: () => { setPanelVisibilityById('tmTreeView', true); }, allTasks: allTasks, getAllTasks: getAllTasks, deleteTaskByIdsCallback: deleteTaskByIdsCallback, addTaskCallback: addTaskCallback, editTaskCallback: editTaskCallback, handleNavigateToWGs: handleNavigateToWGs, handleNavigateToDossiers: handleNavigateToDossiers, editPdfForm: editPdfForm, onOpenPdfEditorRequest: onOpenPdfEditorRequest, openS4TViewer: openS4TViewer, onOpenS4TViewerRequest: onOpenS4TViewerRequest, enablePinIcons: false, onRefreshAfterAddDcmtToFavs: onRefreshAfterAddDcmtToFavs }, refreshKey) }));
 };

package/lib/components/features/documents/TMRelationViewer.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { DcmtTypeDescriptor, SearchResultDescriptor, DataColumnDescriptor } from "@topconsultnpm/sdk-ts";
-import { DcmtInfo } from '../../../ts';
+import { DcmtInfo, MetadataValueDescriptorEx } from '../../../ts';
 import { ITMTreeItem } from '../../base/TMTreeView';
 /**
  * Tree item structure for relations
@@ -16,11 +16,13 @@ export interface RelationTreeItem extends ITMTreeItem {
     isRoot?: boolean;
     isMaster?: boolean;
     isCorrelated?: boolean;
-    isLoaded?: boolean;
     isSeparator?: boolean;
+    isInfoMessage?: boolean;
+    isLogDel?: number;
     values?: any;
     searchResult?: SearchResultDescriptor[];
     itemsCount?: number;
+    fileExt?: string;
 }
 /**
  * Props for TMRelationViewer component
@@ -92,6 +94,21 @@ export interface TMRelationViewerProps {
      * If not provided, uses the document type name.
      */
     labelMainContainer?: string;
+    /**
+     * Callback invoked when no relations are found for any of the input documents.
+     * Useful to notify parent component that there are no correlated documents to display.
+     */
+    onNoRelationsFound?: () => void;
+    /**
+     * Callback invoked when user right-clicks on a tree item.
+     * Use to show a context menu.
+     */
+    onItemContextMenu?: (item: RelationTreeItem, e: React.MouseEvent) => void;
+    /**
+     * Metadata values for the focused item
+     * (used in master-detail context)
+     */
+    focusedItemFormData?: MetadataValueDescriptorEx[];
 }
 /**
  * Check if document type has detail relations