@topconsultnpm/sdkui-react 6.19.0-dev2.2 → 6.19.0-dev2.20

package/lib/components/base/TMCustomButton.js

@@ -8,6 +8,7 @@ const IframeContainer = styled.div `
   display: flex;
   height: 100%;
   flex-direction: column;
+  padding-left: 15px;
 `;
 const StyledIframe = styled.iframe `
   border: none;
@@ -36,7 +37,6 @@ const TMCustomButton = (props) => {
             const mergedAttributes = { ...attributes, selectedItems: selectedItems };
             iframeRef.current.contentWindow.postMessage({
                 "options": mergedAttributes,
-                "selectedItems": selectedItems,
                 "session": SDK_Globals.tmSession
             }, getTargetOrigin(scriptUrl));
         }
@@ -58,6 +58,6 @@ const TMCustomButton = (props) => {
             onClose?.();
         }
     }, [isModal, scriptUrl, onClose]);
-    return isModal ? (_jsx(TMModal, { title: button.title, width: '60%', height: '60%', resizable: true, onClose: onClose, children: _jsxs(IframeContainer, { children: [error && _jsx("div", { children: "Si \u00E8 verificato un errore nel caricamento del contenuto." }), !error && _jsx(StyledIframe, { ref: iframeRef, loading: 'lazy', onLoad: handleLoad, onError: handleError, src: scriptUrl })] }) })) : null;
+    return isModal ? (_jsx(TMModal, { title: button.title, width: '60%', height: '70%', resizable: true, onClose: onClose, children: _jsxs(IframeContainer, { children: [error && _jsx("div", { children: "Si \u00E8 verificato un errore nel caricamento del contenuto." }), !error && _jsx(StyledIframe, { ref: iframeRef, loading: 'lazy', onLoad: handleLoad, onError: handleError, src: scriptUrl })] }) })) : null;
 };
 export default TMCustomButton;

package/lib/components/base/TMDataGridExportForm.d.ts

@@ -1,4 +1,4 @@
-import { IColumnProps } from 'devextreme-react/cjs/data-grid';
+import { IColumnProps } from 'devextreme-react/data-grid';
 import { SearchResultDescriptor } from '@topconsultnpm/sdk-ts';
 export type FormatOption = {
     value: 'csv' | 'xlsx' | 'xls' | 'txt';

package/lib/components/base/TMDataGridExportForm.js

@@ -64,7 +64,7 @@ const TMDataGridExportForm = (props) => {
             // Retrieve columns from the search result, or use an empty array if not available
             const columns = searchResult?.dtdResult?.columns ?? [];
             // If exportDescriptionsForDataLists is true, build a map of values to labels for the columns; otherwise use an empty Map
-            const { valueToNameMap, captions } = exportDescriptionsForDataLists ? await buildValueToLabelMapFromDataColumns(columns) : { valueToNameMap: new Map(), captions: new Set() };
+            const valueToNameMap = exportDescriptionsForDataLists ? await buildValueToLabelMapFromDataColumns(columns) : new Map();
             // Create a Set from selectedRowKeys for efficient lookup
             const selectedSet = new Set(selectedRowKeys);
             // If exporting only selected rows, filter the dataSource accordingly; otherwise use the full dataSource
@@ -82,8 +82,14 @@ const TMDataGridExportForm = (props) => {
             const getValue = (col, value) => {
                 // Replace raw value with corresponding label from the map if applicable
                 let result = value;
-                if (exportDescriptionsForDataLists && col.caption && captions.has(col.caption.toString())) {
-                    result = valueToNameMap.get(value) ?? value;
+                if (exportDescriptionsForDataLists && col.dataField && valueToNameMap.size > 0) {
+                    const mapForField = valueToNameMap.get(col.dataField);
+                    if (mapForField) {
+                        result = mapForField.get(value) ?? value;
+                    }
+                    else {
+                        result = value;
+                    }
                 }
                 // If the column is a datetime type, attempt to format it as a locale date string
                 if (col.dataType === 'datetime' && result) {

package/lib/components/base/TMFileManager.js

@@ -8,11 +8,12 @@ import { TMColors } from "../../utils/theme";
 import TMPanel from "./TMPanel";
 import { TMSplitterLayout } from "./TMLayout";
 import { ContextMenu, TreeView } from "devextreme-react";
-import Toolbar, { Item as ToolbarItem } from 'devextreme-react/cjs/toolbar';
+import Toolbar, { Item as ToolbarItem } from 'devextreme-react/toolbar';
 import TMButton from "./TMButton";
 import { TMSearchBar } from "../sidebar/TMHeader";
 import TMFileManagerThumbnailsView from "./TMFileManagerThumbnailsView";
 import TMFileManagerDataGridView from "./TMFileManagerDataGridView";
+import { UserListCacheService } from "@topconsultnpm/sdk-ts";
 const TMFileManager = (props) => {
     // Destructure props
     const { 
@@ -44,6 +45,14 @@ const TMFileManager = (props) => {
     const [droppedFiles, setDroppedFiles] = useState([]);
     // State to track whether a file drag operation is in progress
     const [isDragging, setIsDragging] = useState(false);
+    const [allUsers, setAllUsers] = useState([]);
+    useEffect(() => {
+        const fetchAllUsers = async () => {
+            const users = await UserListCacheService.GetAllAsync();
+            setAllUsers(users ?? []);
+        };
+        fetchAllUsers();
+    }, []);
     // useEffect runs whenever `treeFs` changes
     useEffect(() => {
         // Initialize an empty array to hold tree view directory data
@@ -219,6 +228,6 @@ const TMFileManager = (props) => {
                                             pointerEvents: "none",
                                             backdropFilter: "blur(3px)",
                                             textShadow: "0 2px 4px rgba(0,0,0,0.5)"
-                                        }, children: SDKUI_Localizator.DropFileToShare }), viewMode === 'thumbnails' && _jsx(TMFileManagerThumbnailsView, { items: filteredFileItems ?? [], focusedFile: focusedFile, handleFocusedFile: handleFocusedFile, selectedFiles: selectedFiles, handleSelectedFiles: handleSelectedFiles, fileContextMenuItems: fileContextMenuItems, searchText: searchText, userID: userID, draftThumbViewAnchor: draftThumbViewAnchor, setDraftThumbViewAnchor: setDraftThumbViewAnchor, onDoubleClickHandler: onDoubleClickHandler }), viewMode === 'details' && _jsx(TMFileManagerDataGridView, { items: filteredFileItems ?? [], focusedFile: focusedFile, handleFocusedFile: handleFocusedFile, selectedFiles: selectedFiles, handleSelectedFiles: handleSelectedFiles, fileContextMenuItems: fileContextMenuItems, searchText: searchText, userID: userID, onDoubleClickHandler: onDoubleClickHandler })] })] })] }) }) });
+                                        }, children: SDKUI_Localizator.DropFileToShare }), viewMode === 'thumbnails' && _jsx(TMFileManagerThumbnailsView, { items: filteredFileItems ?? [], allUsers: allUsers, focusedFile: focusedFile, handleFocusedFile: handleFocusedFile, selectedFiles: selectedFiles, handleSelectedFiles: handleSelectedFiles, fileContextMenuItems: fileContextMenuItems, searchText: searchText, userID: userID, draftThumbViewAnchor: draftThumbViewAnchor, setDraftThumbViewAnchor: setDraftThumbViewAnchor, onDoubleClickHandler: onDoubleClickHandler }), viewMode === 'details' && _jsx(TMFileManagerDataGridView, { items: filteredFileItems ?? [], allUsers: allUsers, focusedFile: focusedFile, handleFocusedFile: handleFocusedFile, selectedFiles: selectedFiles, handleSelectedFiles: handleSelectedFiles, fileContextMenuItems: fileContextMenuItems, searchText: searchText, userID: userID, onDoubleClickHandler: onDoubleClickHandler })] })] })] }) }) });
 };
 export default TMFileManager;

package/lib/components/base/TMFileManagerDataGridView.d.ts

@@ -1,6 +1,8 @@
 import { FileItem, TMFileManagerContextMenuItem } from "./TMFileManagerUtils";
+import { UserDescriptor } from "@topconsultnpm/sdk-ts";
 interface TMFileManagerDataGridViewProps {
     items: Array<FileItem>;
+    allUsers: Array<UserDescriptor>;
     focusedFile: FileItem | undefined;
     handleFocusedFile: (fileItem: FileItem | undefined) => void;
     selectedFiles: Array<FileItem>;

package/lib/components/base/TMFileManagerDataGridView.js

@@ -5,7 +5,7 @@ import TMDataGrid from "./TMDataGrid";
 import TMDcmtIcon from "../features/documents/TMDcmtIcon";
 import TMTooltip from "./TMTooltip";
 const TMFileManagerDataGridView = (props) => {
-    const { items, focusedFile, handleFocusedFile, selectedFiles, handleSelectedFiles, fileContextMenuItems, searchText, userID, onDoubleClickHandler } = props;
+    const { items, allUsers, focusedFile, handleFocusedFile, selectedFiles, handleSelectedFiles, fileContextMenuItems, searchText, userID, onDoubleClickHandler } = props;
     // State hook to store the currently focused row key, initially set to undefined
     const [focusedRowKey, setFocusedRowKey] = useState(focusedFile?.id);
     // State to store selected row keys
@@ -16,6 +16,15 @@ const TMFileManagerDataGridView = (props) => {
     useEffect(() => {
         setSelectedRowKeys(selectedFiles.map(selectedFile => selectedFile.id));
     }, [selectedFiles]);
+    const findCheckOutUserName = useCallback((checkOutUserName, checkOutUserID) => {
+        if (checkOutUserName) {
+            return checkOutUserName;
+        }
+        else {
+            let checkOutUser = allUsers.find(user => user.id === checkOutUserID);
+            return checkOutUser ? checkOutUser.name : '-';
+        }
+    }, [allUsers]);
     // DataGrid Callback    
     // Handles focus change in the data grid
     const onFocusedRowChanged = useCallback((e) => {
@@ -58,7 +67,7 @@ const TMFileManagerDataGridView = (props) => {
         const checkoutUsedId = checkOutUserID;
         const editMode = checkoutDate && checkoutUsedId && userID && userID === checkoutUsedId;
         const lockMode = checkoutDate && checkoutUsedId && userID && userID !== checkoutUsedId;
-        const editLockTooltipText = _jsxs(_Fragment, { children: [_jsxs("div", { style: { textAlign: "center" }, children: [editMode && (_jsxs(_Fragment, { children: [_jsx("i", { style: { fontSize: "18px", color: "#28a745", fontWeight: "bold" }, className: "dx-icon-edit" }), SDKUI_Localizator.CurrentUserExtract] })), lockMode && (_jsxs(_Fragment, { children: [_jsx("i", { style: { fontSize: "18px", color: "#28a745", fontWeight: "bold" }, className: "dx-icon-lock" }), SDKUI_Localizator.ExtractedFromOtherUser] }))] }), _jsx("hr", {}), _jsxs("div", { style: { textAlign: "left" }, children: [_jsxs("ul", { children: [_jsxs("li", { children: ["- ", _jsx("span", { style: { fontWeight: 'bold' }, children: SDKUI_Localizator.ExtractedBy }), ": ", checkOutUserName ?? '-', " (ID: ", checkOutUserID, ")"] }), _jsxs("li", { children: ["- ", _jsx("span", { style: { fontWeight: 'bold' }, children: SDKUI_Localizator.ExtractedOn }), ": ", Globalization.getDateTimeDisplayValue(checkoutDate?.toString())] })] }), _jsx("hr", {}), _jsx("ul", { children: _jsxs("li", { children: ["- ", _jsx("span", { style: { fontWeight: 'bold' }, children: SDKUI_Localizator.Version }), ": ", version ?? 1] }) }), _jsx("hr", {}), _jsxs("ul", { children: [_jsxs("li", { children: ["- ", _jsx("span", { style: { fontWeight: 'bold' }, children: SDKUI_Localizator.Type }), ": ", ext] }), _jsxs("li", { children: ["- ", _jsx("span", { style: { fontWeight: 'bold' }, children: SDKUI_Localizator.CreationTime }), ": ", Globalization.getDateTimeDisplayValue(creationTime?.toString())] }), _jsxs("li", { children: ["- ", _jsx("span", { style: { fontWeight: 'bold' }, children: SDKUI_Localizator.LastUpdateTime }), ": ", Globalization.getDateTimeDisplayValue(lastUpdateTime?.toString())] })] })] })] });
+        const editLockTooltipText = _jsxs(_Fragment, { children: [_jsxs("div", { style: { textAlign: "center" }, children: [editMode && (_jsxs(_Fragment, { children: [_jsx("i", { style: { fontSize: "18px", color: "#28a745", fontWeight: "bold" }, className: "dx-icon-edit" }), SDKUI_Localizator.CurrentUserExtract] })), lockMode && (_jsxs(_Fragment, { children: [_jsx("i", { style: { fontSize: "18px", color: "#28a745", fontWeight: "bold" }, className: "dx-icon-lock" }), SDKUI_Localizator.ExtractedFromOtherUser] }))] }), _jsx("hr", {}), _jsxs("div", { style: { textAlign: "left" }, children: [_jsxs("ul", { children: [_jsxs("li", { children: ["- ", _jsx("span", { style: { fontWeight: 'bold' }, children: SDKUI_Localizator.ExtractedBy }), ": ", findCheckOutUserName(checkOutUserName, checkOutUserID) ?? '-', " (ID: ", checkOutUserID, ")"] }), _jsxs("li", { children: ["- ", _jsx("span", { style: { fontWeight: 'bold' }, children: SDKUI_Localizator.ExtractedOn }), ": ", Globalization.getDateTimeDisplayValue(checkoutDate?.toString())] })] }), _jsx("hr", {}), _jsx("ul", { children: _jsxs("li", { children: ["- ", _jsx("span", { style: { fontWeight: 'bold' }, children: SDKUI_Localizator.Version }), ": ", version ?? 1] }) }), _jsx("hr", {}), _jsxs("ul", { children: [_jsxs("li", { children: ["- ", _jsx("span", { style: { fontWeight: 'bold' }, children: SDKUI_Localizator.Type }), ": ", ext] }), _jsxs("li", { children: ["- ", _jsx("span", { style: { fontWeight: 'bold' }, children: SDKUI_Localizator.CreationTime }), ": ", Globalization.getDateTimeDisplayValue(creationTime?.toString())] }), _jsxs("li", { children: ["- ", _jsx("span", { style: { fontWeight: 'bold' }, children: SDKUI_Localizator.LastUpdateTime }), ": ", Globalization.getDateTimeDisplayValue(lastUpdateTime?.toString())] })] })] })] });
         return _jsxs("div", { style: { display: "inline-flex", alignItems: "center", gap: "4px" }, children: [editMode && _jsx(TMTooltip, { content: editLockTooltipText, children: _jsx("i", { style: { fontSize: "18px", color: "#28a745", fontWeight: "bold" }, className: "dx-icon-edit" }) }), lockMode && _jsx(TMTooltip, { content: editLockTooltipText, children: _jsx("i", { style: { fontSize: "18px", color: "#28a745", fontWeight: "bold" }, className: "dx-icon-lock" }) }), renderHighlightedText(cellData.value, searchText, false)] });
     }, [searchText]);
     const cellExtRender = useCallback((cellData) => {

package/lib/components/base/TMFileManagerThumbnailItems.d.ts

@@ -1,7 +1,9 @@
 import React from 'react';
 import { FileItem } from './TMFileManagerUtils';
+import { UserDescriptor } from '@topconsultnpm/sdk-ts';
 export interface TMFileManagerThumbnailItemsProps {
     items: Array<FileItem>;
+    allUsers: Array<UserDescriptor>;
     paginatedItems: Array<FileItem>;
     focusedFile: FileItem | undefined;
     handleFocusedFile: (fileItem: FileItem | undefined) => void;

package/lib/components/base/TMFileManagerThumbnailItems.js

@@ -6,7 +6,7 @@ import TMTooltip from './TMTooltip';
 import TMDcmtIcon from '../features/documents/TMDcmtIcon';
 const TMFileManagerThumbnailItems = (props) => {
     // Destructuring props for cleaner usage
-    const { items, paginatedItems, selectedFiles, searchText, userID, onDoubleClick, handleSelectedFiles, handleFocusedFile, setDraftThumbViewAnchor } = props;
+    const { items, allUsers, paginatedItems, selectedFiles, searchText, userID, onDoubleClick, handleSelectedFiles, handleFocusedFile, setDraftThumbViewAnchor } = props;
     // Ref for the scrollable container
     const containerRef = useRef(null);
     // Stores index of the last selected item for shift selection
@@ -112,6 +112,16 @@ const TMFileManagerThumbnailItems = (props) => {
         setDraftThumbViewAnchor(e.currentTarget);
         handleFocusedFile(item);
     }, []);
+    const findCheckOutUserName = useCallback((item) => {
+        if (item.checkOutUserName) {
+            return item.checkOutUserName;
+        }
+        else {
+            const checkOutUserID = item.checkOutUserID;
+            let checkOutUser = allUsers.find(user => user.id === checkOutUserID);
+            return checkOutUser ? checkOutUser.name : '-';
+        }
+    }, [allUsers]);
     return _jsx("div", { style: { width: "100%", height: "100%" }, children: paginatedItems.map(item => {
             const isSelected = selectedFiles?.map(file => file.id).includes(item.id) ?? false;
             const checkoutDate = item.checkoutDate;
@@ -130,7 +140,7 @@ const TMFileManagerThumbnailItems = (props) => {
                 bgColor = isSelected ? colors.PRIMARY_BLUE : backgroundColors.lockMode;
                 bgHoverColor = isSelected ? colors.PRIMARY_BLUE : "#fff59d";
             }
-            const editLockTooltipText = _jsxs(_Fragment, { children: [_jsxs("div", { style: { textAlign: "center" }, children: [editMode && (_jsxs(_Fragment, { children: [_jsx("i", { style: { fontSize: "18px", color: colors.MEDIUM_GREEN, fontWeight: "bold" }, className: "dx-icon-edit" }), SDKUI_Localizator.CurrentUserExtract] })), lockMode && (_jsxs(_Fragment, { children: [_jsx("i", { style: { fontSize: "18px", color: colors.MEDIUM_GREEN, fontWeight: "bold" }, className: "dx-icon-lock" }), SDKUI_Localizator.ExtractedFromOtherUser] }))] }), _jsx("hr", {}), _jsxs("div", { style: { textAlign: "left" }, children: [_jsxs("ul", { children: [_jsxs("li", { children: ["- ", _jsx("span", { style: { fontWeight: 'bold' }, children: SDKUI_Localizator.ExtractedBy }), ": ", item.checkOutUserName ?? '-', " (ID: ", item.checkOutUserID, ")"] }), _jsxs("li", { children: ["- ", _jsx("span", { style: { fontWeight: 'bold' }, children: SDKUI_Localizator.ExtractedOn }), ": ", Globalization.getDateTimeDisplayValue(item.checkoutDate?.toString())] })] }), _jsx("hr", {}), _jsx("ul", { children: _jsxs("li", { children: ["- ", _jsx("span", { style: { fontWeight: 'bold' }, children: SDKUI_Localizator.Version }), ": ", item.version ?? 1] }) }), _jsx("hr", {}), _jsxs("ul", { children: [_jsxs("li", { children: ["- ", _jsx("span", { style: { fontWeight: 'bold' }, children: SDKUI_Localizator.Type }), ": ", item.ext] }), _jsxs("li", { children: ["- ", _jsx("span", { style: { fontWeight: 'bold' }, children: SDKUI_Localizator.CreationTime }), ": ", Globalization.getDateTimeDisplayValue(item.creationTime?.toString())] }), _jsxs("li", { children: ["- ", _jsx("span", { style: { fontWeight: 'bold' }, children: SDKUI_Localizator.LastUpdateTime }), ": ", Globalization.getDateTimeDisplayValue(item.lastUpdateTime?.toString())] })] })] })] });
+            const editLockTooltipText = _jsxs(_Fragment, { children: [_jsxs("div", { style: { textAlign: "center" }, children: [editMode && (_jsxs(_Fragment, { children: [_jsx("i", { style: { fontSize: "18px", color: colors.MEDIUM_GREEN, fontWeight: "bold" }, className: "dx-icon-edit" }), SDKUI_Localizator.CurrentUserExtract] })), lockMode && (_jsxs(_Fragment, { children: [_jsx("i", { style: { fontSize: "18px", color: colors.MEDIUM_GREEN, fontWeight: "bold" }, className: "dx-icon-lock" }), SDKUI_Localizator.ExtractedFromOtherUser] }))] }), _jsx("hr", {}), _jsxs("div", { style: { textAlign: "left" }, children: [_jsxs("ul", { children: [_jsxs("li", { children: ["- ", _jsx("span", { style: { fontWeight: 'bold' }, children: SDKUI_Localizator.ExtractedBy }), ": ", findCheckOutUserName(item) ?? '-', " (ID: ", item.checkOutUserID, ")"] }), _jsxs("li", { children: ["- ", _jsx("span", { style: { fontWeight: 'bold' }, children: SDKUI_Localizator.ExtractedOn }), ": ", Globalization.getDateTimeDisplayValue(item.checkoutDate?.toString())] })] }), _jsx("hr", {}), _jsx("ul", { children: _jsxs("li", { children: ["- ", _jsx("span", { style: { fontWeight: 'bold' }, children: SDKUI_Localizator.Version }), ": ", item.version ?? 1] }) }), _jsx("hr", {}), _jsxs("ul", { children: [_jsxs("li", { children: ["- ", _jsx("span", { style: { fontWeight: 'bold' }, children: SDKUI_Localizator.Type }), ": ", item.ext] }), _jsxs("li", { children: ["- ", _jsx("span", { style: { fontWeight: 'bold' }, children: SDKUI_Localizator.CreationTime }), ": ", Globalization.getDateTimeDisplayValue(item.creationTime?.toString())] }), _jsxs("li", { children: ["- ", _jsx("span", { style: { fontWeight: 'bold' }, children: SDKUI_Localizator.LastUpdateTime }), ": ", Globalization.getDateTimeDisplayValue(item.lastUpdateTime?.toString())] })] })] })] });
             const tooltipContent = (_jsxs("div", { style: { textAlign: 'left' }, children: [_jsxs("div", { children: [_jsx("span", { style: { fontWeight: 'bold' }, children: "ID:" }), " ", item.id ?? '-'] }), _jsxs("div", { children: [_jsx("span", { style: { fontWeight: 'bold' }, children: "DID:" }), " ", item.did ?? '-'] }), _jsxs("div", { children: [_jsx("span", { style: { fontWeight: 'bold' }, children: "TID:" }), " ", item.tid ?? '-'] }), _jsx("hr", {}), _jsxs("div", { children: [_jsxs("span", { style: { fontWeight: 'bold' }, children: [SDKUI_Localizator.Name, ":"] }), " ", item.name ?? '-'] }), _jsxs("div", { children: [_jsxs("span", { style: { fontWeight: 'bold' }, children: [SDKUI_Localizator.Author, ":"] }), " ", item.updaterName ?? '-'] }), _jsx("hr", {}), _jsxs("div", { children: [_jsxs("span", { style: { fontWeight: 'bold' }, children: [SDKUI_Localizator.Version, ":"] }), " ", item.version] }), _jsxs("div", { children: [_jsxs("span", { style: { fontWeight: 'bold' }, children: [SDKUI_Localizator.Size, ":"] }), " ", formatBytes(item.size ?? 0)] }), _jsx("hr", {}), _jsxs("div", { children: [_jsxs("span", { style: { fontWeight: 'bold' }, children: [SDKUI_Localizator.CreationTime, ":"] }), " ", Globalization.getDateTimeDisplayValue(item.creationTime)] }), _jsxs("div", { children: [_jsxs("span", { style: { fontWeight: 'bold' }, children: [SDKUI_Localizator.LastUpdateTime, ":"] }), " ", Globalization.getDateTimeDisplayValue(item.lastUpdateTime)] })] }));
             return _jsx(TMFileItemContainer, { className: "tm-file-manager-thumbnail-items", ref: containerRef, id: "tm-file-manager-thumbnail-item-" + item.id.toString(), "$backgroundColor": bgColor, "$bgHoverColor": bgHoverColor, "$textColor": textColor, onDoubleClick: () => onDoubleClickHandler(item), onContextMenu: (e) => onContextMenu(e, item), onClick: (e) => onClickHandler(e, item), tabIndex: 0, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, children: _jsxs("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', width: '100%' }, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', flex: 1, minWidth: 0 }, children: [_jsxs("div", { style: { marginRight: '16px', flexShrink: 0 }, children: [_jsx(TMDcmtIcon, { tid: item.tid, did: item.did, fileExtension: item.ext, downloadMode: 'openInNewWindow', tooltipContent: tooltipContent }), editMode && _jsx(TMTooltip, { content: editLockTooltipText, children: _jsx("i", { style: { fontSize: "18px", color: !isSelected ? colors.MEDIUM_GREEN : '#fff', fontWeight: "bold" }, className: "dx-icon-edit" }) }), lockMode && _jsx(TMTooltip, { content: editLockTooltipText, children: _jsx("i", { style: { fontSize: "18px", color: !isSelected ? colors.MEDIUM_GREEN : '#fff', fontWeight: "bold" }, className: "dx-icon-lock" }) })] }), _jsxs("div", { style: { overflow: 'hidden', minWidth: 0 }, children: [_jsx("div", { style: { whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', width: '100%', display: 'block', fontSize: '1rem', fontWeight: "bold" }, children: _jsx(TMTooltip, { parentStyle: { overflow: 'hidden' }, childStyle: { whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', width: '100%', display: 'block' }, children: renderHighlightedText(item.name, searchText, isSelected) }) }), _jsx("div", { style: { whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', width: '100%', display: 'block', fontSize: 'calc(1rem - 1px)' }, children: formatBytes(item.size ?? 0) })] })] }), item.version && (_jsx("div", { style: { flexShrink: 0, marginLeft: '12px', whiteSpace: 'nowrap' }, children: _jsx(TMTooltip, { content: SDKUI_Localizator.Version, children: _jsx("div", { style: { border: "2px solid #28a745", backgroundColor: "#28a745", color: "#ffffff", borderRadius: '50%', width: '30px', height: '30px', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '12px', fontWeight: 'bold' }, children: item.version }) }) }))] }) }, "tm-file-manager-thumbnail-item-" + item.id);
         }) });

package/lib/components/base/TMFileManagerThumbnailsView.d.ts

@@ -1,7 +1,9 @@
 import React from "react";
 import { FileItem, TMFileManagerContextMenuItem } from "./TMFileManagerUtils";
+import { UserDescriptor } from "@topconsultnpm/sdk-ts";
 interface TMFileManagerThumbnailsViewProps {
     items: Array<FileItem>;
+    allUsers: Array<UserDescriptor>;
     focusedFile: FileItem | undefined;
     handleFocusedFile: (fileItem: FileItem | undefined) => void;
     selectedFiles: Array<FileItem>;

package/lib/components/base/TMFileManagerThumbnailsView.js

@@ -5,7 +5,7 @@ import { ContextMenu, Pagination, ScrollView } from "devextreme-react";
 import TMFileManagerThumbnailItems from "./TMFileManagerThumbnailItems";
 import { SDKUI_Localizator } from "../../helper";
 const TMFileManagerThumbnailsView = (props) => {
-    const { items, focusedFile, handleFocusedFile, selectedFiles = [], handleSelectedFiles, fileContextMenuItems, searchText, userID, onDoubleClickHandler, draftThumbViewAnchor, setDraftThumbViewAnchor } = props;
+    const { items, allUsers, focusedFile, handleFocusedFile, selectedFiles = [], handleSelectedFiles, fileContextMenuItems, searchText, userID, onDoubleClickHandler, draftThumbViewAnchor, setDraftThumbViewAnchor } = props;
     const PAGE_SIZES = [TMFileManagerPageSize.Small, TMFileManagerPageSize.Medium, TMFileManagerPageSize.Large];
     const initPageSize = TMFileManagerPageSize.Small;
     const showPagination = (items?.length ?? 0) > initPageSize;
@@ -39,7 +39,7 @@ const TMFileManagerThumbnailsView = (props) => {
         handleSelectedFiles?.([]);
     };
     return items.length > 0 ?
-        _jsxs("div", { style: { width: "100%", height: "100%" }, onContextMenu: onBackgroundContextMenu, children: [_jsx(ScrollView, { width: "100%", height: showPagination ? "calc(100% - 50px)" : "100%", useNative: true, direction: 'vertical', children: _jsx(TMFileManagerThumbnailItems, { items: items, paginatedItems: paginatedItems, focusedFile: focusedFile, selectedFiles: selectedFiles, userID: userID, searchText: searchText, handleFocusedFile: handleFocusedFile, handleSelectedFiles: handleSelectedFiles, onDoubleClick: handleItemDoubleClick, setDraftThumbViewAnchor: setDraftThumbViewAnchor }) }), showPagination && _jsx(Pagination, { height: "50px", showInfo: true, showNavigationButtons: true, allowedPageSizes: PAGE_SIZES, displayMode: 'compact', itemCount: items.length, pageIndex: pageIndex, pageSize: pageSize, onPageIndexChange: setPageIndex, onPageSizeChange: setPageSize }), draftThumbViewAnchor && _jsx(ContextMenu, { id: 'fileViewContextMenuMobile', dataSource: fileContextMenuItems, target: draftThumbViewAnchor, onHiding: closeViewContextMenu })] })
+        _jsxs("div", { style: { width: "100%", height: "100%" }, onContextMenu: onBackgroundContextMenu, children: [_jsx(ScrollView, { width: "100%", height: showPagination ? "calc(100% - 50px)" : "100%", useNative: true, direction: 'vertical', children: _jsx(TMFileManagerThumbnailItems, { items: items, allUsers: allUsers, paginatedItems: paginatedItems, focusedFile: focusedFile, selectedFiles: selectedFiles, userID: userID, searchText: searchText, handleFocusedFile: handleFocusedFile, handleSelectedFiles: handleSelectedFiles, onDoubleClick: handleItemDoubleClick, setDraftThumbViewAnchor: setDraftThumbViewAnchor }) }), showPagination && _jsx(Pagination, { height: "50px", showInfo: true, showNavigationButtons: true, allowedPageSizes: PAGE_SIZES, displayMode: 'compact', itemCount: items.length, pageIndex: pageIndex, pageSize: pageSize, onPageIndexChange: setPageIndex, onPageSizeChange: setPageSize }), draftThumbViewAnchor && _jsx(ContextMenu, { id: 'fileViewContextMenuMobile', dataSource: fileContextMenuItems, target: draftThumbViewAnchor, onHiding: closeViewContextMenu })] })
         :
             _jsxs("div", { onContextMenu: onBackgroundContextMenu, style: { width: "100%", height: "100%", display: 'flex', justifyContent: 'center', alignItems: 'center', marginTop: '10px' }, children: [SDKUI_Localizator.FolderIsEmpty, draftThumbViewAnchor && _jsx(ContextMenu, { id: 'fileViewContextMenuMobile', dataSource: fileContextMenuItems, target: draftThumbViewAnchor, onHiding: closeViewContextMenu })] });
 };

package/lib/components/base/TMTooltip.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ITooltipOptions } from 'devextreme-react/cjs/tooltip';
+import { ITooltipOptions } from 'devextreme-react/tooltip';
 import { Position } from 'devextreme/common';
 import { PositionConfig } from 'devextreme/animation/position';
 interface ITMTooltipProps extends ITooltipOptions {

package/lib/components/base/TMTooltip.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
-import { Tooltip } from 'devextreme-react/cjs/tooltip';
+import { Tooltip } from 'devextreme-react/tooltip';
 import { genUniqueId } from '../../helper';
 import { DeviceType, useDeviceType } from './TMDeviceProvider';
 const TMTooltip = ({ children, position, content, hideAfterDelay, parentStyle, childStyle }) => {

package/lib/components/choosers/TMMetadataChooser.d.ts

@@ -2,6 +2,9 @@ import React from 'react';
 import { MetadataDescriptor, QueryDescriptor, ValidationItem } from '@topconsultnpm/sdk-ts';
 import { ITMChooserFormProps, ITMChooserProps, TID_MID } from '../../ts';
 import { TID_Alias } from '../../helper/queryHelper';
+type MetadataDescriptorWithKey = MetadataDescriptor & {
+    uniqueKey: string;
+};
 interface ITMMetadataChooserProps extends ITMChooserProps {
     /** Allows you to view system metadata  */
     allowSysMetadata?: boolean;
@@ -32,7 +35,7 @@ interface ITMMetadataChooserProps extends ITMChooserProps {
 }
 declare const TMMetadataChooser: React.FunctionComponent<ITMMetadataChooserProps>;
 export default TMMetadataChooser;
-interface ITMMetadataChooserFormProps extends ITMChooserFormProps<MetadataDescriptor> {
+interface ITMMetadataChooserFormProps extends ITMChooserFormProps<MetadataDescriptorWithKey> {
     /** Allows you to view system metadata  */
     allowSysMetadata?: boolean;
     /** TIDs of document types to retrieve metadata from */

package/lib/components/choosers/TMMetadataChooser.js

@@ -50,15 +50,19 @@ export const TMMetadataChooserForm = ({ tmSession, tids, qd, filterMetadata, qdS
                     dtd.customData2 = alias;
                     if (!qdShowOnlySelectItems) {
                         dtd.metadata?.forEach((md) => {
-                            md.customData1 = dtd.id;
-                            md.customData2 = alias;
+                            const mdWithKey = md;
+                            mdWithKey.customData1 = dtd.id;
+                            mdWithKey.customData2 = alias;
+                            mdWithKey.uniqueKey = `${dtd.id}_${md.id}_${alias}`;
                         });
                     }
                     else {
                         let newMetadata = dtd.metadata?.filter(o => qd.select?.some(s => s.tid == dtd.id && s.mid == o.id && ((s.alias ?? '') == alias)));
                         newMetadata?.forEach((md) => {
-                            md.customData1 = dtd.id;
-                            md.customData2 = alias;
+                            const mdWithKey = md;
+                            mdWithKey.customData1 = dtd.id;
+                            mdWithKey.customData2 = alias;
+                            mdWithKey.uniqueKey = `${dtd.id}_${md.id}_${alias}`;
                         });
                     }
                     let mds = filterMetadata ? dtd.metadata?.filter(filterMetadata) : dtd.metadata;
@@ -81,7 +85,11 @@ export const TMMetadataChooserForm = ({ tmSession, tids, qd, filterMetadata, qdS
                         continue;
                     }
                     let mds = filterMetadata ? dtd.metadata?.filter(filterMetadata) : dtd.metadata;
-                    mds?.forEach((md) => { md.customData1 = dtd?.id; });
+                    mds?.forEach((md) => {
+                        const mdWithKey = md;
+                        mdWithKey.customData1 = dtd?.id;
+                        mdWithKey.uniqueKey = `${dtd.id}_${md.id}_${md.customData2 ?? ''}`;
+                    });
                     dtdList.push({ ...dtd, metadata: mds });
                 }
             }
@@ -130,5 +138,5 @@ export const TMMetadataChooserForm = ({ tmSession, tids, qd, filterMetadata, qdS
     const cellRenderNameAndDesc = useCallback((data) => {
         return _jsx("p", { style: { textAlign: 'left', color: data.data.isRequired == 1 ? 'red' : '' }, children: data.value });
     }, []);
-    return (_jsx(TMChooserForm, { title: SDK_Localizator.Metadatas, allowMultipleSelection: allowMultipleSelection, allowSorting: false, allowGrouping: dcmtTypes.length > 1, width: width, height: height, selectedIDs: selectedIDs?.map((item) => item.mid), convertID: convertID, cellRenderIcon: cellRenderIcon, cellRenderNameAndDesc: cellRenderNameAndDesc, dataSource: dataSource, getItems: getItems, customButtons: renderCustomButtons(), columns: dataColumns, summaryItems: renderSummaryItems, onClose: onClose, onChoose: (IDs) => { onChoose?.(IDs); } }));
+    return (_jsx(TMChooserForm, { title: SDK_Localizator.Metadatas, allowMultipleSelection: allowMultipleSelection, allowSorting: false, allowGrouping: dcmtTypes.length > 1, width: width, height: height, keyName: 'uniqueKey', selectedIDs: selectedIDs?.map((item) => `${item.tid}_${item.mid}_${item.aliasTID ?? ''}`), convertID: convertID, cellRenderIcon: cellRenderIcon, cellRenderNameAndDesc: cellRenderNameAndDesc, dataSource: dataSource, getItems: getItems, customButtons: renderCustomButtons(), columns: dataColumns, summaryItems: renderSummaryItems, onClose: onClose, onChoose: (IDs) => { onChoose?.(IDs); } }));
 };

package/lib/components/editors/TMDateBox.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ValidationItem } from '@topconsultnpm/sdk-ts';
-import { IDateBoxOptions } from 'devextreme-react/cjs/date-box';
+import { IDateBoxOptions } from 'devextreme-react/date-box';
 import { DateDisplayTypes } from '../../helper';
 interface ITMDateBoxProps extends IDateBoxOptions {
     dateDisplayType?: DateDisplayTypes;

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

@@ -8,7 +8,7 @@ import { DownloadTypes, FormModes } from '../../../ts';
 import { DeviceType, useDeviceType } from '../../base/TMDeviceProvider';
 import { useDcmtOperations } from '../../../hooks/useDcmtOperations';
 import { getWorkItemSetIDAsync, handleArchiveVisibility, searchResultToMetadataValues } from '../../../helper/queryHelper';
-import { genUniqueId, IconShow, SDKUI_Localizator, updateMruTids, IconBoard, IconDcmtTypeSys, IconDetailDcmts, svgToString, IconDownload, calcIsModified, IconMenuVertical, Globalization, getListMaxItems, getSystemMetadata, IconBoxArchiveIn, IconClear, IconUndo, SDKUI_Globals, IconPreview, isTaskMoreInfo, IconWorkflow, IconSearch, deepCompare, IconCheck, IconActivity } from '../../../helper';
+import { genUniqueId, IconShow, SDKUI_Localizator, updateMruTids, IconBoard, IconDcmtTypeSys, IconDetailDcmts, svgToString, IconDownload, calcIsModified, IconMenuVertical, Globalization, getListMaxItems, getSystemMetadata, IconBoxArchiveIn, IconClear, IconUndo, SDKUI_Globals, IconPreview, isTaskMoreInfo, IconWorkflow, IconSearch, deepCompare, IconCheck, IconActivity, TMImageLibrary } from '../../../helper';
 import { hasDetailRelations, hasMasterRelations, isXMLFileExt } from '../../../helper/dcmtsHelper';
 import { Gutters, TMColors } from '../../../utils/theme';
 import { StyledFormButtonsContainer, StyledLoadingContainer, StyledModalContainer, StyledReferenceButton, StyledSpinner, StyledToolbarCardContainer } from '../../base/Styled';
@@ -477,13 +477,16 @@ const TMDcmtForm = ({ allTasks = [], getAllTasks, deleteTaskByIdsCallback, addTa
         ];
         // Aggiungi submenu "Bottoni personalizzati" se esistono customButtons
         if (customButtonsLayout?.customButtons && Array.isArray(customButtonsLayout.customButtons) && customButtonsLayout.customButtons.length > 0) {
-            const customButtonsItems = customButtonsLayout.customButtons.map((customButton) => ({
+            const customButtonsItems = customButtonsLayout.customButtons
+                .filter((customButton) => customButton.isForUpdate && customButton.isForUpdate > 0)
+                .map((customButton) => ({
+                icon: svgToString(TMImageLibrary({ imageID: customButton.glyphID, showPath: true })),
                 text: customButton.title || 'Bottone personalizzato',
                 onClick: () => setCustomButton(customButton)
             }));
             items.push({
                 icon: svgToString(_jsx(IconCheck, {})),
-                text: 'Bottoni personalizzati',
+                text: SDKUI_Localizator.CustomButtons,
                 items: customButtonsItems
             });
         }
@@ -1122,42 +1125,42 @@ const TMDcmtForm = ({ allTasks = [], getAllTasks, deleteTaskByIdsCallback, addTa
                 height: '100%',
                 position: 'relative',
                 overflow: 'hidden'
-            }, children: [isNavigating && _jsx(Spinner, { description: SDKUI_Localizator.Loading, flat: false }), (fromDTD) && _jsxs(TMLayoutWaitingContainer, { direction: 'vertical', showWaitPanel: useWaitPanelLocalState ? showWaitPanelLocal : showWaitPanel, showWaitPanelPrimary: useWaitPanelLocalState ? showPrimaryLocal : showPrimary, showWaitPanelSecondary: useWaitPanelLocalState ? showSecondaryLocal : showSecondary, waitPanelTitle: useWaitPanelLocalState ? waitPanelTitleLocal : waitPanelTitle, waitPanelTextPrimary: useWaitPanelLocalState ? waitPanelTextPrimaryLocal : waitPanelTextPrimary, waitPanelValuePrimary: useWaitPanelLocalState ? waitPanelValuePrimaryLocal : waitPanelValuePrimary, waitPanelMaxValuePrimary: useWaitPanelLocalState ? waitPanelMaxValuePrimaryLocal : waitPanelMaxValuePrimary, waitPanelTextSecondary: useWaitPanelLocalState ? waitPanelTextSecondaryLocal : waitPanelTextSecondary, waitPanelValueSecondary: useWaitPanelLocalState ? waitPanelValueSecondaryLocal : waitPanelValueSecondary, waitPanelMaxValueSecondary: useWaitPanelLocalState ? waitPanelMaxValueSecondaryLocal : waitPanelMaxValueSecondary, isCancelable: useWaitPanelLocalState ? dcmtFile ? dcmtFile.size >= 1000000 : false : true, abortController: useWaitPanelLocalState ? abortControllerLocal : abortController, children: [(groupId && groupId.length > 0)
-                            ? _jsx(TMPanelManagerContainer, { panels: initialPanels, direction: "horizontal", parentId: groupId, showToolbar: showDcmtFormSidebar })
-                            : _jsxs(TMPanelManagerWithPersistenceProvider, { panels: initialPanels, initialVisibility: allInitialPanelVisibility, defaultDimensions: defaultPanelDimensions, initialDimensions: defaultPanelDimensions, initialMobilePanelId: 'tmDcmtForm', isPersistenceEnabled: !isMobile ? hasSavedLayout() : false, persistPanelStates: !isMobile ? (state) => persistPanelStates(state) : undefined, persistedPanelStates: getPersistedPanelStates(), children: [_jsx(WfButtonStateHandler, { isWFDisabled: isWFDisabled }), _jsx(TMPanelManagerContainer, { panels: initialPanels, direction: "horizontal", parentId: groupId, showToolbar: showDcmtFormSidebar })] }), isOpenDistinctValues &&
-                            _jsx(TMDistinctValues, { tid: TID, mid: focusedMetadataValue?.mid, isModal: true, showHeader: false, layoutMode: layoutMode, onSelectionChanged: (e) => {
-                                    if (!e)
-                                        return;
-                                    setFormData((prevItems) => prevItems.map((item) => item.tid == e.tid && item.mid === e.mid ? { ...item, value: e.newValue } : item));
-                                } }), isOpenFormulaEditor &&
-                            _jsx(TMFormulaEditor, { isModal: true, formMode: FormModes.Update, inputData: getFormula(), showBack: false, onClose: () => setIsOpenFormulaEditor(false), onApplied: (newFormula) => {
-                                    setFormData((prevItems) => prevItems.map((item) => item.tid == newFormula.tid && item.mid === newFormula.mid ? { ...item, value: FormulaHelper.addFormulaTag(newFormula.expression), isSelected: true, isEditable: true } : item));
-                                    setFocusedMetadataValue(prevState => ({
-                                        ...prevState,
-                                        isSelected: true,
-                                        isEditable: true,
-                                        value: FormulaHelper.addFormulaTag(newFormula.expression)
-                                    }));
-                                } }), showApprovePopup && _jsx(WorkFlowApproveRejectPopUp, { deviceType: deviceType, onCompleted: handleWFOperationCompleted, TID: approvalVID, DID: DID, isReject: 0, onClose: () => setShowApprovePopup(false) }), showRejectPopup && _jsx(WorkFlowApproveRejectPopUp, { deviceType: deviceType, onCompleted: handleWFOperationCompleted, TID: approvalVID, DID: DID, isReject: 1, onClose: () => setShowRejectPopup(false) }), showReAssignPopup && _jsx(WorkFlowReAssignPopUp, { deviceType: deviceType, onCompleted: handleWFOperationCompleted, TID: approvalVID, DID: DID, onClose: () => setShowReAssignPopup(false) }), showMoreInfoPopup && _jsx(WorkFlowMoreInfoPopUp, { deviceType: deviceType, onCompleted: handleWFOperationCompleted, TID: approvalVID, DID: DID, onClose: () => setShowMoreInfoPopup(false) }), (isModal && onClose) && _jsx("div", { id: "TMDcmtFormShowConfirmForClose-" + id })] }), (showToppyForApprove || showToppyForCompleteMoreInfo || showToppyForReferences) && (_jsx(ToppyHelpCenter, { deviceType: deviceType, usePortal: false, content: _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '10px' }, children: [showToppyForApprove && (workItems.length === 1 ?
-                                _jsx(WorkFlowOperationButtons, { deviceType: deviceType, onApprove: () => setShowApprovePopup(true), onSignApprove: handleSignApprove, onReject: () => setShowRejectPopup(true), onReAssign: () => setShowReAssignPopup(true), onMoreInfo: () => setShowMoreInfoPopup(true), dtd: fromDTD })
-                                :
-                                    _jsxs("div", { style: { padding: 10, color: 'white', maxWidth: '180px', borderRadius: 10, background: '#1B1464 0% 0% no-repeat padding-box', border: '1px solid #FFFFFF' }, children: [`Devi approvare ${workItems.length} workitem(s) per questo documento.`, `Vai alla sezione di approvazione.`] })), showToppyForCompleteMoreInfo && (_jsxs(_Fragment, { children: [_jsx("div", { style: { padding: 10, color: 'white', maxWidth: '180px', borderRadius: 10, background: '#1B1464 0% 0% no-repeat padding-box', border: '1px solid #FFFFFF' }, children: `${SDKUI_Localizator.MoreInfoCompleteRequestSentBy} ${taskMoreInfo?.fromName}!` }), _jsx(TMButton, { caption: SDKUI_Localizator.CommentAndComplete, color: 'success', showTooltip: false, onClick: () => {
-                                            setShowCommentForm(true);
-                                        } })] })), showToppyForReferences && dcmtReferences && dcmtReferences
-                                .filter(ref => ref.objClass === ObjectClasses.Dossier || ref.objClass === ObjectClasses.WorkingGroup) // keep only known objClass types
-                                .map((ref, index, arr) => {
-                                const mapEntry = referenceActionMap[String(ref.objClass)];
-                                const label = mapEntry?.label ?? 'Vai a riferimento';
-                                return (_jsxs(React.Fragment, { children: [index === 0 && (showToppyForApprove || showToppyForCompleteMoreInfo) && (_jsx("div", { style: {
-                                                height: 1,
-                                                backgroundColor: 'rgba(255,255,255,0.2)',
-                                                margin: '6px 0'
-                                            } })), _jsxs(StyledReferenceButton, { onClick: () => handleNavigateToReference(ref), children: [_jsx("span", { children: label }), _jsx("span", { children: `"${ref.objName}"` })] }, `ref-${index}-${ref.objID}`)] }, `ref-frag-${index}-${ref.objID}`));
-                            })] }) })), (showCommentForm && TID && DID) &&
+            }, children: [_jsxs("div", { style: { width: '100%', height: '100%', display: isOpenDetails || isOpenMaster ? 'none' : 'flex' }, children: [isNavigating && _jsx(Spinner, { description: SDKUI_Localizator.Loading, flat: false }), (fromDTD) && _jsxs(TMLayoutWaitingContainer, { direction: 'vertical', showWaitPanel: useWaitPanelLocalState ? showWaitPanelLocal : showWaitPanel, showWaitPanelPrimary: useWaitPanelLocalState ? showPrimaryLocal : showPrimary, showWaitPanelSecondary: useWaitPanelLocalState ? showSecondaryLocal : showSecondary, waitPanelTitle: useWaitPanelLocalState ? waitPanelTitleLocal : waitPanelTitle, waitPanelTextPrimary: useWaitPanelLocalState ? waitPanelTextPrimaryLocal : waitPanelTextPrimary, waitPanelValuePrimary: useWaitPanelLocalState ? waitPanelValuePrimaryLocal : waitPanelValuePrimary, waitPanelMaxValuePrimary: useWaitPanelLocalState ? waitPanelMaxValuePrimaryLocal : waitPanelMaxValuePrimary, waitPanelTextSecondary: useWaitPanelLocalState ? waitPanelTextSecondaryLocal : waitPanelTextSecondary, waitPanelValueSecondary: useWaitPanelLocalState ? waitPanelValueSecondaryLocal : waitPanelValueSecondary, waitPanelMaxValueSecondary: useWaitPanelLocalState ? waitPanelMaxValueSecondaryLocal : waitPanelMaxValueSecondary, isCancelable: useWaitPanelLocalState ? dcmtFile ? dcmtFile.size >= 1000000 : false : true, abortController: useWaitPanelLocalState ? abortControllerLocal : abortController, children: [(groupId && groupId.length > 0)
+                                    ? _jsx(TMPanelManagerContainer, { panels: initialPanels, direction: "horizontal", parentId: groupId, showToolbar: showDcmtFormSidebar })
+                                    : _jsxs(TMPanelManagerWithPersistenceProvider, { panels: initialPanels, initialVisibility: allInitialPanelVisibility, defaultDimensions: defaultPanelDimensions, initialDimensions: defaultPanelDimensions, initialMobilePanelId: 'tmDcmtForm', isPersistenceEnabled: !isMobile ? hasSavedLayout() : false, persistPanelStates: !isMobile ? (state) => persistPanelStates(state) : undefined, persistedPanelStates: getPersistedPanelStates(), children: [_jsx(WfButtonStateHandler, { isWFDisabled: isWFDisabled }), _jsx(TMPanelManagerContainer, { panels: initialPanels, direction: "horizontal", parentId: groupId, showToolbar: showDcmtFormSidebar })] }), isOpenDistinctValues &&
+                                    _jsx(TMDistinctValues, { tid: TID, mid: focusedMetadataValue?.mid, isModal: true, showHeader: false, layoutMode: layoutMode, onSelectionChanged: (e) => {
+                                            if (!e)
+                                                return;
+                                            setFormData((prevItems) => prevItems.map((item) => item.tid == e.tid && item.mid === e.mid ? { ...item, value: e.newValue } : item));
+                                        } }), isOpenFormulaEditor &&
+                                    _jsx(TMFormulaEditor, { isModal: true, formMode: FormModes.Update, inputData: getFormula(), showBack: false, onClose: () => setIsOpenFormulaEditor(false), onApplied: (newFormula) => {
+                                            setFormData((prevItems) => prevItems.map((item) => item.tid == newFormula.tid && item.mid === newFormula.mid ? { ...item, value: FormulaHelper.addFormulaTag(newFormula.expression), isSelected: true, isEditable: true } : item));
+                                            setFocusedMetadataValue(prevState => ({
+                                                ...prevState,
+                                                isSelected: true,
+                                                isEditable: true,
+                                                value: FormulaHelper.addFormulaTag(newFormula.expression)
+                                            }));
+                                        } }), showApprovePopup && _jsx(WorkFlowApproveRejectPopUp, { deviceType: deviceType, onCompleted: handleWFOperationCompleted, TID: approvalVID, DID: DID, isReject: 0, onClose: () => setShowApprovePopup(false) }), showRejectPopup && _jsx(WorkFlowApproveRejectPopUp, { deviceType: deviceType, onCompleted: handleWFOperationCompleted, TID: approvalVID, DID: DID, isReject: 1, onClose: () => setShowRejectPopup(false) }), showReAssignPopup && _jsx(WorkFlowReAssignPopUp, { deviceType: deviceType, onCompleted: handleWFOperationCompleted, TID: approvalVID, DID: DID, onClose: () => setShowReAssignPopup(false) }), showMoreInfoPopup && _jsx(WorkFlowMoreInfoPopUp, { deviceType: deviceType, onCompleted: handleWFOperationCompleted, TID: approvalVID, DID: DID, onClose: () => setShowMoreInfoPopup(false) }), (isModal && onClose) && _jsx("div", { id: "TMDcmtFormShowConfirmForClose-" + id })] }), (showToppyForApprove || showToppyForCompleteMoreInfo || showToppyForReferences) && (_jsx(ToppyHelpCenter, { deviceType: deviceType, usePortal: false, content: _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '10px' }, children: [showToppyForApprove && (workItems.length === 1 ?
+                                        _jsx(WorkFlowOperationButtons, { deviceType: deviceType, onApprove: () => setShowApprovePopup(true), onSignApprove: handleSignApprove, onReject: () => setShowRejectPopup(true), onReAssign: () => setShowReAssignPopup(true), onMoreInfo: () => setShowMoreInfoPopup(true), dtd: fromDTD })
+                                        :
+                                            _jsxs("div", { style: { padding: 10, color: 'white', maxWidth: '180px', borderRadius: 10, background: '#1B1464 0% 0% no-repeat padding-box', border: '1px solid #FFFFFF' }, children: [`Devi approvare ${workItems.length} workitem(s) per questo documento.`, `Vai alla sezione di approvazione.`] })), showToppyForCompleteMoreInfo && (_jsxs(_Fragment, { children: [_jsx("div", { style: { padding: 10, color: 'white', maxWidth: '180px', borderRadius: 10, background: '#1B1464 0% 0% no-repeat padding-box', border: '1px solid #FFFFFF' }, children: `${SDKUI_Localizator.MoreInfoCompleteRequestSentBy} ${taskMoreInfo?.fromName}!` }), _jsx(TMButton, { caption: SDKUI_Localizator.CommentAndComplete, color: 'success', showTooltip: false, onClick: () => {
+                                                    setShowCommentForm(true);
+                                                } })] })), showToppyForReferences && dcmtReferences && dcmtReferences
+                                        .filter(ref => ref.objClass === ObjectClasses.Dossier || ref.objClass === ObjectClasses.WorkingGroup) // keep only known objClass types
+                                        .map((ref, index, arr) => {
+                                        const mapEntry = referenceActionMap[String(ref.objClass)];
+                                        const label = mapEntry?.label ?? 'Vai a riferimento';
+                                        return (_jsxs(React.Fragment, { children: [index === 0 && (showToppyForApprove || showToppyForCompleteMoreInfo) && (_jsx("div", { style: {
+                                                        height: 1,
+                                                        backgroundColor: 'rgba(255,255,255,0.2)',
+                                                        margin: '6px 0'
+                                                    } })), _jsxs(StyledReferenceButton, { onClick: () => handleNavigateToReference(ref), children: [_jsx("span", { children: label }), _jsx("span", { children: `"${ref.objName}"` })] }, `ref-${index}-${ref.objID}`)] }, `ref-frag-${index}-${ref.objID}`));
+                                    })] }) }))] }), (showCommentForm && TID && DID) &&
                     _jsx(TMBlogCommentForm, { context: { engine: 'SearchEngine', object: { tid: TID, did: DID } }, onClose: () => setShowCommentForm(false), refreshCallback: handleCompleteMoreInfo, participants: [], showAttachmentsSection: false, allArchivedDocumentsFileItems: [] }), isOpenDetails &&
-                    _jsx(StyledModalContainer, { style: { backgroundColor: 'white' }, children: _jsx(TMMasterDetailDcmts, { deviceType: deviceType, isForMaster: false, inputDcmts: getSelectionDcmtInfo(), allowNavigation: allowNavigation, canNext: canNext, canPrev: canPrev, onNext: onNext, onPrev: onPrev, onBack: () => setIsOpenDetails(false), allTasks: allTasks, getAllTasks: getAllTasks, deleteTaskByIdsCallback: deleteTaskByIdsCallback, addTaskCallback: addTaskCallback, editTaskCallback: editTaskCallback, handleNavigateToWGs: handleNavigateToWGs, handleNavigateToDossiers: handleNavigateToDossiers }) }), isOpenMaster &&
-                    _jsxs(StyledModalContainer, { style: { backgroundColor: 'white' }, children: [_jsx(TMMasterDetailDcmts, { deviceType: deviceType, inputDcmts: getSelectionDcmtInfo(), isForMaster: true, allowNavigation: allowNavigation, canNext: canNext, canPrev: canPrev, onNext: onNext, onPrev: onPrev, onBack: () => setIsOpenMaster(false), appendMasterDcmts: handleAddItem, allTasks: allTasks, getAllTasks: getAllTasks, deleteTaskByIdsCallback: deleteTaskByIdsCallback, addTaskCallback: addTaskCallback, editTaskCallback: editTaskCallback, handleNavigateToWGs: handleNavigateToWGs, handleNavigateToDossiers: handleNavigateToDossiers }), secondaryMasterDcmts.length > 0 && secondaryMasterDcmts.map((dcmt, index) => {
-                                return (_jsx(StyledModalContainer, { style: { backgroundColor: 'white' }, children: _jsx(TMMasterDetailDcmts, { deviceType: deviceType, inputDcmts: [dcmt], isForMaster: true, allowNavigation: false, onBack: () => handleRemoveItem(dcmt.TID, dcmt.DID), appendMasterDcmts: handleAddItem, allTasks: allTasks, getAllTasks: getAllTasks, deleteTaskByIdsCallback: deleteTaskByIdsCallback, addTaskCallback: addTaskCallback, editTaskCallback: editTaskCallback, handleNavigateToWGs: handleNavigateToWGs, handleNavigateToDossiers: handleNavigateToDossiers }) }, `${index}-${dcmt.DID}`));
+                    _jsx(StyledModalContainer, { children: _jsx(TMMasterDetailDcmts, { deviceType: deviceType, isForMaster: false, inputDcmts: getSelectionDcmtInfo(), allowNavigation: allowNavigation, canNext: canNext, canPrev: canPrev, onNext: onNext, onPrev: onPrev, onBack: () => setIsOpenDetails(false), allTasks: allTasks, getAllTasks: getAllTasks, deleteTaskByIdsCallback: deleteTaskByIdsCallback, addTaskCallback: addTaskCallback, editTaskCallback: editTaskCallback, handleNavigateToWGs: handleNavigateToWGs, handleNavigateToDossiers: handleNavigateToDossiers }) }), isOpenMaster &&
+                    _jsxs(StyledModalContainer, { children: [_jsx(TMMasterDetailDcmts, { deviceType: deviceType, inputDcmts: getSelectionDcmtInfo(), isForMaster: true, allowNavigation: allowNavigation, canNext: canNext, canPrev: canPrev, onNext: onNext, onPrev: onPrev, onBack: () => setIsOpenMaster(false), appendMasterDcmts: handleAddItem, allTasks: allTasks, getAllTasks: getAllTasks, deleteTaskByIdsCallback: deleteTaskByIdsCallback, addTaskCallback: addTaskCallback, editTaskCallback: editTaskCallback, handleNavigateToWGs: handleNavigateToWGs, handleNavigateToDossiers: handleNavigateToDossiers }), secondaryMasterDcmts.length > 0 && secondaryMasterDcmts.map((dcmt, index) => {
+                                return (_jsx(StyledModalContainer, { children: _jsx(TMMasterDetailDcmts, { deviceType: deviceType, inputDcmts: [dcmt], isForMaster: true, allowNavigation: false, onBack: () => handleRemoveItem(dcmt.TID, dcmt.DID), appendMasterDcmts: handleAddItem, allTasks: allTasks, getAllTasks: getAllTasks, deleteTaskByIdsCallback: deleteTaskByIdsCallback, addTaskCallback: addTaskCallback, editTaskCallback: editTaskCallback, handleNavigateToWGs: handleNavigateToWGs, handleNavigateToDossiers: handleNavigateToDossiers }) }, `${index}-${dcmt.DID}`));
                             })] }), taskFormDialogComponent, s4TViewerDialogComponent] }));
     };
     return (_jsx(_Fragment, { children: (isModal && onClose)

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

@@ -136,18 +136,22 @@ export const searchResultToDataSource = async (searchResult, hideSysMetadata) =>
     }
     return output;
 };
-const TMRelationViewer = ({ inputDcmts, isForMaster = false, showCurrentDcmtIndicator = true, allowShowZeroDcmts = true, initialShowZeroDcmts = false, allowedTIDs, allowMultipleSelection = false, focusedItem, selectedItems, onFocusedItemChanged, onSelectedItemsChanged, onDocumentDoubleClick, customItemRender, customDocumentStyle, customMainContainerContent, customDocumentContent, showMetadataNames = false, maxDepthLevel = 2, invertMasterNavigation = true, additionalStaticItems = [], showMainDocument = true, labelMainContainer, }) => {
+const TMRelationViewer = ({ inputDcmts, isForMaster = false, showCurrentDcmtIndicator = true, allowShowZeroDcmts = true, initialShowZeroDcmts = false, allowedTIDs, allowMultipleSelection = false, focusedItem, selectedItems, onFocusedItemChanged, onSelectedItemsChanged, onDocumentDoubleClick, customItemRender, customDocumentStyle, customMainContainerContent, customDocumentContent, showMetadataNames = false, maxDepthLevel = 2, invertMasterNavigation = true, additionalStaticItems, showMainDocument = true, labelMainContainer, }) => {
     // State
     const [dcmtTypes, setDcmtTypes] = useState([]);
     const [treeData, setTreeData] = useState([]);
     const [showZeroDcmts, setShowZeroDcmts] = useState(initialShowZeroDcmts);
     const [staticItemsState, setStaticItemsState] = useState([]);
-    // Wait Panel State (only used if allowWaitPanel is true)
     const [showWaitPanel, setShowWaitPanel] = useState(false);
     const [waitPanelTextPrimary, setWaitPanelTextPrimary] = useState('');
     const [waitPanelValuePrimary, setWaitPanelValuePrimary] = useState(0);
     const [waitPanelMaxValuePrimary, setWaitPanelMaxValuePrimary] = useState(0);
     const [abortController] = useState(new AbortController());
+    const [showExpansionWaitPanel, setShowExpansionWaitPanel] = useState(false);
+    const [expansionWaitPanelText, setExpansionWaitPanelText] = useState('');
+    const [expansionWaitPanelValue, setExpansionWaitPanelValue] = useState(0);
+    const [expansionWaitPanelMaxValue, setExpansionWaitPanelMaxValue] = useState(0);
+    const [expansionAbortController, setExpansionAbortController] = useState(undefined);
     // Ref to track last loaded input to prevent unnecessary reloads
     const lastLoadedInputRef = React.useRef('');
     // Ref to track if user has manually expanded/collapsed static items
@@ -560,30 +564,55 @@ const TMRelationViewer = ({ inputDcmts, isForMaster = false, showCurrentDcmtIndi
         // If container is already loaded, return items
         if (node.isLoaded)
             return node.items;
-        // Load sub-documents for each document in the container
-        const newItems = [];
-        for (const dcmt of node.items ?? []) {
-            const item = { ...dcmt }; // Create a new reference
-            if (item.tid && item.did && !item.isLoaded) {
-                // Nella modalità originale (invertMasterNavigation=false), 
-                // i documenti detail non devono caricare i master come figli
-                if (isForMaster && !invertMasterNavigation) {
-                    // Carica i detail dei detail (navigazione naturale detail→detail)
-                    const loadedItems = await getDetailDcmtsAsync(item.tid, item.did, 1);
-                    item.items = updateHiddenProperty(loadedItems);
+        const newAbortController = new AbortController();
+        setExpansionAbortController(newAbortController);
+        const itemsToLoad = node.items?.length ?? 0;
+        setShowExpansionWaitPanel(true);
+        setExpansionWaitPanelMaxValue(itemsToLoad);
+        setExpansionWaitPanelValue(0);
+        setExpansionWaitPanelText(`Caricamento documenti correlati...`);
+        try {
+            const newItems = [];
+            let processedCount = 0;
+            for (const dcmt of node.items ?? []) {
+                if (newAbortController.signal.aborted) {
+                    console.log('Folder expansion aborted by user');
+                    return node.items;
                 }
-                else {
-                    // Modalità standard o invertita
-                    const loadedItems = isForMaster
-                        ? await getMasterDcmtsAsync(item.tid, item.did, 1)
-                        : await getDetailDcmtsAsync(item.tid, item.did, 1);
-                    item.items = updateHiddenProperty(loadedItems);
+                const item = { ...dcmt };
+                if (item.tid && item.did && !item.isLoaded) {
+                    // Update progress
+                    processedCount++;
+                    setExpansionWaitPanelValue(processedCount);
+                    setExpansionWaitPanelText(`Caricamento ${processedCount} di ${itemsToLoad}...`);
+                    // Nella modalità originale (invertMasterNavigation=false), 
+                    // i documenti detail non devono caricare i master come figli
+                    if (isForMaster && !invertMasterNavigation) {
+                        // Carica i detail dei detail (navigazione naturale detail→detail)
+                        const loadedItems = await getDetailDcmtsAsync(item.tid, item.did, 1);
+                        item.items = updateHiddenProperty(loadedItems);
+                    }
+                    else {
+                        // Modalità standard o invertita
+                        const loadedItems = isForMaster
+                            ? await getMasterDcmtsAsync(item.tid, item.did, 1)
+                            : await getDetailDcmtsAsync(item.tid, item.did, 1);
+                        item.items = updateHiddenProperty(loadedItems);
+                    }
+                    item.isLoaded = true;
                 }
-                item.isLoaded = true;
+                newItems.push(item);
             }
-            newItems.push(item);
+            return newItems;
+        }
+        catch (error) {
+            console.error('Error loading folder contents:', error);
+            return node.items;
+        }
+        finally {
+            setShowExpansionWaitPanel(false);
+            setExpansionAbortController(undefined);
         }
-        return newItems;
     }, [isForMaster, invertMasterNavigation, getDetailDcmtsAsync, getMasterDcmtsAsync, updateHiddenProperty]);
     /**
      * Default item renderer with metadata display (adapted from TMMasterDetailDcmts.tsx)
@@ -715,6 +744,10 @@ const TMRelationViewer = ({ inputDcmts, isForMaster = false, showCurrentDcmtIndi
     if (mergedTreeData.length === 0) {
         return _jsx("div", { style: { padding: '20px', textAlign: 'center', color: '#666' }, children: "Nessuna relazione disponibile." });
     }
-    return (_jsx(TMTreeView, { dataSource: mergedTreeData, itemRender: finalItemRender, calculateItemsForNode: calculateItemsForNode, onDataChanged: handleDataChanged, focusedItem: focusedItem, onFocusedItemChanged: handleFocusedItemChanged, allowMultipleSelection: allowMultipleSelection, selectedItems: selectedItems, onSelectionChanged: handleSelectedItemsChanged }));
+    return (_jsxs(_Fragment, { children: [_jsx(TMTreeView, { dataSource: mergedTreeData, itemRender: finalItemRender, calculateItemsForNode: calculateItemsForNode, onDataChanged: handleDataChanged, focusedItem: focusedItem, onFocusedItemChanged: handleFocusedItemChanged, allowMultipleSelection: allowMultipleSelection, selectedItems: selectedItems, onSelectionChanged: handleSelectedItemsChanged }), showExpansionWaitPanel && (_jsx(TMWaitPanel, { title: isForMaster ? 'Caricamento documenti master' : 'Caricamento documenti dettaglio', showPrimary: true, textPrimary: expansionWaitPanelText, valuePrimary: expansionWaitPanelValue, maxValuePrimary: expansionWaitPanelMaxValue, isCancelable: true, abortController: expansionAbortController, onAbortClick: (abortController) => {
+                    setTimeout(() => {
+                        abortController?.abort();
+                    }, 100);
+                } }))] }));
 };
 export default TMRelationViewer;