@topconsultnpm/sdkui-react-beta 6.16.91 → 6.16.93

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

@@ -16,6 +16,9 @@ interface ITMMessageBox extends ITMPopup {
     parentId?: string;
     onClose?: () => void;
     confirmOnEnter?: boolean;
+    showToppy?: boolean;
+    initialWidth?: string;
+    initialHeight?: string;
 }
 interface ITMExceptionBox extends ITMPopup {
     exception?: any;
@@ -24,6 +27,6 @@ declare class TMExceptionBoxManager {
     static show({ title, exception }: ITMExceptionBox): void;
 }
 declare class TMMessageBoxManager {
-    static show({ title, buttons, onButtonClick, message, parentId, resizable, onClose, confirmOnEnter }: ITMMessageBox): void;
+    static show({ title, buttons, onButtonClick, message, parentId, resizable, onClose, confirmOnEnter, showToppy, initialHeight, initialWidth }: ITMMessageBox): void;
 }
 export { TMExceptionBoxManager, TMMessageBoxManager };

package/lib/components/base/TMPopUp.js

@@ -13,7 +13,6 @@ import TMLayoutContainer, { TMLayoutItem } from './TMLayout';
 import { Popup } from 'devextreme-react';
 import TMTabGroup, { TMTab } from './TMTab';
 import { DeviceType, TMDeviceProvider, useDeviceType } from './TMDeviceProvider';
-let TOOLBAR_HEIGHT = 38;
 export var ButtonNames;
 (function (ButtonNames) {
     ButtonNames["YES"] = "Yes";
@@ -171,14 +170,14 @@ const ResponsiveButton = styled(TMButton) `
         font-size: 7px !important;
     }
 `;
-const ResponsiveMessageBody = ({ message, isMobile, MessageToolbar }) => {
-    return (_jsxs(ResponsiveMessageContainer, { children: [_jsxs(ResponsiveMessageContent, { "$isMobile": isMobile, children: [_jsx(ResponsiveToppyImage, { "$isMobile": isMobile, src: toppy, alt: "Toppy" }), _jsx(ResponsiveMessageText, { "$isMobile": isMobile, children: typeof message === 'string' ? _jsx(Message, { msg: message }) : message })] }), _jsx(MessageToolbar, {})] }));
+const ResponsiveMessageBody = ({ message, isMobile, MessageToolbar, showToppy }) => {
+    return (_jsxs(ResponsiveMessageContainer, { children: [_jsxs(ResponsiveMessageContent, { "$isMobile": isMobile, children: [showToppy && _jsx(ResponsiveToppyImage, { "$isMobile": isMobile, src: toppy, alt: "Toppy" }), _jsx(ResponsiveMessageText, { "$isMobile": isMobile, children: typeof message === 'string' ? _jsx(Message, { msg: message }) : message })] }), _jsx(MessageToolbar, {})] }));
 };
-const TMMessageBox = ({ resizable = false, onButtonClick, title = 'TopMedia', message = '', buttons, onClose, confirmOnEnter = false }) => {
+const TMMessageBox = ({ resizable = false, onButtonClick, title = 'TopMedia', message = '', buttons, onClose, confirmOnEnter = false, showToppy = true, initialWidth = 'clamp(100px, 90vw, 400px)', initialHeight = 'auto' }) => {
     let deviceType = useDeviceType();
     const isMobile = useMemo(() => { return deviceType === DeviceType.MOBILE; }, [deviceType]);
-    const [initialWidth, setInitialWidth] = useState('clamp(100px, 90vw, 400px)');
-    const [initialHeight, setInitialHeight] = useState('auto');
+    const [width, setWidth] = useState(initialWidth);
+    const [height, setHeight] = useState(initialHeight);
     const [isVisible, setIsVisible] = useState(true);
     const [btns, setBtns] = useState(buttons || []);
     useEffect(() => {
@@ -221,14 +220,14 @@ const TMMessageBox = ({ resizable = false, onButtonClick, title = 'TopMedia', me
                         }, caption: SDKUI_Localizator.Cancel, showTooltip: false, color: 'error' })] }));
     };
     const handleResizeEnd = (e) => {
-        setInitialWidth(e.width.toString());
-        setInitialHeight(e.height.toString());
+        setWidth(e.width.toString());
+        setHeight(e.height.toString());
     };
-    return (_jsx(Popup, { animation: undefined, visible: isVisible, showCloseButton: true, width: initialWidth, height: initialHeight, minHeight: 'clamp(100px, 20vh, 180px)', title: title, onHidden: () => { onClose?.(); setIsVisible(false); }, resizeEnabled: resizable, onResizeEnd: handleResizeEnd, wrapperAttr: { id: 'tm-messagebox-wrapper' }, onShown: () => {
+    return (_jsx(Popup, { animation: undefined, visible: isVisible, showCloseButton: true, width: width, height: height, minHeight: 'clamp(100px, 20vh, 180px)', title: title, onHidden: () => { onClose?.(); setIsVisible(false); }, resizeEnabled: resizable, onResizeEnd: handleResizeEnd, wrapperAttr: { id: 'tm-messagebox-wrapper' }, onShown: () => {
             const el = document.getElementById('tm-messagebox-wrapper');
             if (el)
                 el.style.zIndex = '20000';
-        }, children: _jsx(ResponsiveMessageBody, { message: message, isMobile: isMobile, MessageToolbar: MessageToolbar }) }));
+        }, children: _jsx(ResponsiveMessageBody, { message: message, isMobile: isMobile, MessageToolbar: MessageToolbar, showToppy: showToppy }) }));
 };
 const TMExceptionBox = ({ resizable = false, exception, title = `${SDK_Globals.appModule} v. ${SDK_Globals.appVersion}` }) => {
     const [isVisible, setIsVisible] = useState(true);
@@ -260,7 +259,7 @@ class TMExceptionBoxManager {
     }
 }
 class TMMessageBoxManager {
-    static show({ title, buttons, onButtonClick, message, parentId, resizable, onClose, confirmOnEnter = false }) {
+    static show({ title, buttons, onButtonClick, message, parentId, resizable, onClose, confirmOnEnter = false, showToppy = true, initialHeight, initialWidth }) {
         let container = document.createElement('div');
         if (parentId) {
             const parent = document.getElementById(parentId);
@@ -275,7 +274,7 @@ class TMMessageBoxManager {
             document.body.appendChild(container);
         }
         const root = ReactDOM.createRoot(container);
-        root.render(_jsx(TMDeviceProvider, { children: React.createElement(TMMessageBox, { title, buttons, onButtonClick, message, resizable, onClose, confirmOnEnter }) }));
+        root.render(_jsx(TMDeviceProvider, { children: React.createElement(TMMessageBox, { title, buttons, onButtonClick, message, resizable, onClose, confirmOnEnter, showToppy, initialHeight, initialWidth }) }));
     }
 }
 export { TMExceptionBoxManager, TMMessageBoxManager };

package/lib/components/editors/TMHtmlContentDisplay.js

@@ -1,5 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { UserListCacheService } from '@topconsultnpm/sdk-ts-beta';
 import styled from 'styled-components';
+import { TMColors } from '../../utils/theme';
 const Wrapper = styled.div `
     * {
         color: ${(props) => props.$isSelected && '#fff !important'};
@@ -23,6 +26,19 @@ const convertLinksToAnchors = (markup) => {
         return `<a href="${url}" target="_blank" rel="noopener noreferrer">${url}</a>`;
     });
 };
+const addMentionStyling = (input, usersName) => {
+    if (typeof input !== 'string' || input.trim().length === 0)
+        return input;
+    const mentionRegex = /@(\w+)/g;
+    return input.replace(mentionRegex, (_match, username) => {
+        if (usersName.includes(username)) {
+            return `<span style="color: ${TMColors.primary}; font-weight: bold;">${username}</span>`;
+        }
+        else {
+            return `@${username}`;
+        }
+    });
+};
 const highlightText = (input, searchText) => {
     if (!searchText)
         return input;
@@ -44,8 +60,18 @@ const highlightText = (input, searchText) => {
 };
 const TMHtmlContentDisplay = (props) => {
     const { markup, searchText, isSelected } = props;
+    const [usersName, setUsersName] = useState([]);
+    useEffect(() => {
+        const getUserNames = async () => {
+            const userDescriptorList = await UserListCacheService.GetAllAsync();
+            const names = userDescriptorList.map(userDescriptor => userDescriptor.name).filter((name) => name !== undefined);
+            setUsersName(names);
+        };
+        getUserNames();
+    }, []);
     let updatedMarkup = markup.replace(/(\r\n|\n|\r)/g, '</br>');
     updatedMarkup = convertLinksToAnchors(updatedMarkup);
+    updatedMarkup = addMentionStyling(updatedMarkup, usersName);
     updatedMarkup = highlightText(updatedMarkup, searchText);
     return (_jsx(Wrapper, { "$isSelected": isSelected, children: _jsx("div", { dangerouslySetInnerHTML: { __html: updatedMarkup } }) }));
 };

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

@@ -841,9 +841,9 @@ const WfButtonStateHandler = ({ isWFDisabled }) => {
     return null; // Non renderizza elementi nel DOM
 };
 const TMDcmtPreviewWrapper = ({ currentDcmt, layoutMode, fromDTD, dcmtFile, deviceType, isVisible, onFileUpload, enableDragDropOverlay = false }) => {
-    const { setPanelVisibilityById, toggleMaximize, isResizingActive, countVisibleLeafPanels, setToolbarButtonDisabled } = useTMPanelManagerContext();
+    const { setPanelVisibilityById, toggleMaximize, isResizingActive, countVisibleLeafPanels, panelVisibility } = useTMPanelManagerContext();
     const isMobile = deviceType === DeviceType.MOBILE;
     return (layoutMode === LayoutModes.Update ?
         _jsx(TMDcmtPreview, { isVisible: isVisible, onClosePanel: (!isMobile && countVisibleLeafPanels() > 1) ? () => setPanelVisibilityById('tmDcmtPreview', false) : undefined, allowMaximize: !isMobile && countVisibleLeafPanels() > 1, onMaximizePanel: (!isMobile && countVisibleLeafPanels() > 1) ? () => toggleMaximize("tmDcmtPreview") : undefined, dcmtData: currentDcmt, isResizingActive: isResizingActive }) :
-        _jsx(TMFileUploader, { onFileUpload: onFileUpload, onClose: (!isMobile && countVisibleLeafPanels() > 1) ? () => setPanelVisibilityById('tmDcmtPreview', false) : undefined, isRequired: fromDTD?.archiveConstraint === ArchiveConstraints.ContentCompulsory && dcmtFile === null, defaultBlob: dcmtFile, deviceType: deviceType, isResizingActive: isResizingActive, enableDragDropOverlay: enableDragDropOverlay }));
+        _jsx(TMFileUploader, { onFileUpload: onFileUpload, onClose: (!isMobile && countVisibleLeafPanels() > 1) ? () => setPanelVisibilityById('tmDcmtPreview', false) : undefined, isRequired: fromDTD?.archiveConstraint === ArchiveConstraints.ContentCompulsory && dcmtFile === null, defaultBlob: dcmtFile, deviceType: deviceType, isResizingActive: isResizingActive, enableDragDropOverlay: panelVisibility['tmDcmtPreview'] && enableDragDropOverlay }));
 };

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

@@ -22,9 +22,10 @@ const TMDragDropOverlay = (props) => {
             e.preventDefault();
             setDragOver(false);
             const file = e.dataTransfer?.files?.[0];
-            if (file)
+            if (file) {
                 handleFile(file);
-            refocusAfterFileInput();
+                refocusAfterFileInput();
+            }
         };
         window.addEventListener('dragenter', handleWindowDragEnter);
         window.addEventListener('dragover', handleWindowDragOver);

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

@@ -83,10 +83,10 @@ const TMFileUploader = ({ deviceType = DeviceType.DESKTOP, onClose, onFileUpload
         document.getElementById('fileInput')?.click();
     }, []);
     let content = !uploadedFile ?
-        _jsx("div", { style: { display: 'flex', gap: 10, width: '100%', height: '100%' }, children: _jsxs(UploadContainer, { ref: uploaderRef, tabIndex: 0, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, style: { backgroundColor: dragOver ? '#76b1e6' : 'white' }, onDoubleClick: browseHandler, "$isRequired": isRequired, children: [_jsx("div", { style: { display: 'flex', gap: '10px', flexDirection: 'column', position: 'absolute', right: 5, top: 5 }, children: _jsx(TMButton, { btnStyle: 'icon', caption: 'Sfoglia', color: isRequired && !uploadedFile ? 'error' : 'primary', onClick: browseHandler, icon: _jsx(IconFolderOpen, { fontSize: 22 }) }) }), _jsx("p", { style: { fontSize: '1.2rem', fontWeight: 'bold' }, children: deviceType === DeviceType.MOBILE ? 'Clicca per sfogliare il tuo file' : 'Trascina il tuo file o fai doppio click per sfogliarlo' }), isRequired && _jsxs("p", { style: { fontWeight: 'bold' }, children: [" ", SDKUI_Localizator.RequiredField, " "] })] }) }) :
+        _jsxs("div", { style: { display: 'flex', gap: 10, width: '100%', height: '100%' }, children: [_jsx(HiddenInput, { id: "fileInput", type: "file", onChange: handleInputChange }), _jsxs(UploadContainer, { ref: uploaderRef, tabIndex: 0, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, style: { backgroundColor: dragOver ? '#76b1e6' : 'white' }, onDoubleClick: browseHandler, "$isRequired": isRequired, children: [_jsx("div", { style: { display: 'flex', gap: '10px', flexDirection: 'column', position: 'absolute', right: 5, top: 5 }, children: _jsx(TMButton, { btnStyle: 'icon', caption: 'Sfoglia', color: isRequired && !uploadedFile ? 'error' : 'primary', onClick: browseHandler, icon: _jsx(IconFolderOpen, { fontSize: 22 }) }) }), _jsx("p", { style: { fontSize: '1.2rem', fontWeight: 'bold' }, children: deviceType === DeviceType.MOBILE ? 'Clicca per sfogliare il tuo file' : 'Trascina il tuo file o fai doppio click per sfogliarlo' }), isRequired && _jsxs("p", { style: { fontWeight: 'bold' }, children: [" ", SDKUI_Localizator.RequiredField, " "] })] })] }) :
         _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 10, width: '100%', height: '100%' }, children: [_jsxs("div", { style: { backgroundColor: 'white', padding: '5px 10px', borderRadius: 8, display: 'flex', alignItems: 'center', justifyContent: 'space-between', color: TMColors.primaryColor }, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 5 }, children: [_jsx("p", { children: "File name:" }), _jsxs("div", { style: { fontWeight: 'bold' }, children: [fileName, " ", _jsxs("span", { children: [" ", ` (${formatBytes(fileSize)})`, " "] })] })] }), uploadedFile && _jsx(TMButton, { btnStyle: 'icon', color: 'error', caption: 'Pulisci', onClick: () => clearFile(true), icon: _jsx(IconClear, { fontSize: 22 }) })] }), extensionHandler(fileExt) === FileExtensionHandler.READY_TO_SHOW ? _jsx(TMFileViewer, { fileBlob: uploadedFile, isResizingActive: isResizingActive }) :
                     _jsx("div", { style: { backgroundColor: '#f6dbdb', padding: '5px 10px', borderRadius: 8, display: 'flex', alignItems: 'center', justifyContent: 'space-between', color: TMColors.error }, children: _jsxs("div", { children: [" ", 'Anteprima non disponibile.', fileExt && _jsx("b", { children: ` (*.${fileExt})` })] }) })] });
-    const innerContent = (_jsxs("div", { style: { width: '100%', height: '100%', padding: '2px', display: 'flex', flexDirection: 'column', gap: 10 }, children: [_jsx(HiddenInput, { id: "fileInput", type: "file", onChange: handleInputChange }), enableDragDropOverlay && _jsx(TMDragDropOverlay, { handleFile: handleFile, refocusAfterFileInput: refocusAfterFileInput }), content] }));
+    const innerContent = (_jsxs("div", { style: { width: '100%', height: '100%', padding: '2px', display: 'flex', flexDirection: 'column', gap: 10 }, children: [enableDragDropOverlay && _jsx(TMDragDropOverlay, { handleFile: handleFile, refocusAfterFileInput: refocusAfterFileInput }), content] }));
     return showTMPanel ? (_jsx(TMPanel, { ref: fileUploaderPanelRef, panelID: 'file-uploader-panel', title: SDKUI_Localizator.FileUpload, onBack: deviceType === DeviceType.MOBILE ? () => onClose?.() : undefined, toolbar: deviceType !== DeviceType.MOBILE ? (_jsx(StyledHeaderIcon, { onClick: onClose, "$color": 'white', children: _jsx(TMTooltip, { content: SDKUI_Localizator.Close, children: _jsx(IconCloseOutline, {}) }) })) : undefined, children: innerContent })) : (innerContent);
 };
 const UploadContainer = styled.div ` 

package/lib/components/features/search/TMSearchResultsMenuItems.d.ts

@@ -3,5 +3,5 @@ import { DcmtTypeDescriptor, FileDescriptor, FileFormats, LayoutModes, WorkingGr
 import { TMDataGridContextMenuItem } from '../../base/TMDataGrid';
 import { DcmtInfo, DcmtOperationTypes, DownloadModes, DownloadTypes, SearchResultContext } from '../../../ts';
 export declare const getSelectedDcmtsOrFocused: (selectedItems: Array<any>, focusedItem: any, fileFormat?: FileFormats) => DcmtInfo[];
-export declare const signatureInformationCallback: (inputDcmts: DcmtInfo[] | undefined) => Promise<void>;
+export declare const signatureInformationCallback: (isMobile: boolean, inputDcmts: DcmtInfo[] | undefined) => Promise<void>;
 export declare const getCommandsMenuItems: (isMobile: boolean, dtd: DcmtTypeDescriptor | undefined, selectedItems: Array<any>, focusedItem: any, context: SearchResultContext, showFloatingBar: boolean, workingGroupContext: WorkingGroupDescriptor | undefined, showSearch: boolean, setShowFloatingBar: React.Dispatch<React.SetStateAction<boolean>>, openFormHandler: (layoutMode: LayoutModes) => void, downloadDcmtsAsync: (inputDcmts: DcmtInfo[] | undefined, downloadType: DownloadTypes, downloadMode: DownloadModes, onFileDownloaded?: (dcmtFile: File | undefined) => void, confirmAttachments?: (list: FileDescriptor[]) => Promise<string[] | undefined>) => Promise<void>, runOperationAsync: (inputDcmts: DcmtInfo[] | undefined, dcmtOperationType: DcmtOperationTypes, actionAfterOperationAsync?: () => Promise<void>) => Promise<void>, onRefreshSearchAsync: (() => Promise<void>) | undefined, onRefreshDataRowsAsync: (() => Promise<void>) | undefined, onRefreshAfterAddDcmtToFavs: (() => void) | undefined, confirmFormat: () => Promise<FileFormats>, confirmAttachments: (list: FileDescriptor[]) => Promise<string[] | undefined>, openTaskFormHandler: () => void, openDetailDcmtsFormHandler: (value: boolean) => void, openMasterDcmtsFormHandler: (value: boolean) => void, openBatchUpdateFormHandler: (value: boolean) => void, openExportForm: () => void, handleToggleSearch: () => void, handleSignApprove: () => void, openWGsCopyMoveForm?: ((mode: "copyToWgDraft" | "copyToWgArchivedDoc", dcmtTypeDescriptor: DcmtTypeDescriptor, documents: Array<DcmtInfo>) => void), openCommentFormCallback?: ((documents: Array<DcmtInfo>) => void), openEditPdf?: ((documents: Array<DcmtInfo>) => void), openAddDocumentForm?: () => void) => Array<TMDataGridContextMenuItem>;

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

@@ -24,7 +24,7 @@ export const getSelectedDcmtsOrFocused = (selectedItems, focusedItem, fileFormat
     }
     return [];
 };
-export const signatureInformationCallback = async (inputDcmts) => {
+export const signatureInformationCallback = async (isMobile, inputDcmts) => {
     try {
         if (!inputDcmts || inputDcmts.length === 0) {
             ShowAlert({
@@ -56,7 +56,9 @@ export const signatureInformationCallback = async (inputDcmts) => {
             TMMessageBoxManager.show({
                 title: SDKUI_Localizator.SignatureInformation,
                 buttons: [ButtonNames.OK],
+                showToppy: false,
                 resizable: true,
+                initialWidth: !isMobile ? '500px' : undefined,
                 message: (_jsx("div", { style: { lineHeight: "1.4em", overflowY: "auto", maxHeight: "400px", paddingRight: "8px", boxSizing: "border-box" }, children: res.signers && res.signers.length > 0 ? (res.signers.map((signer, idx) => (_jsxs("div", { style: {
                             border: "1px solid #ccc",
                             borderRadius: "10px",
@@ -226,7 +228,7 @@ export const getCommandsMenuItems = (isMobile, dtd, selectedItems, focusedItem,
                     text: SDKUI_Localizator.SignatureInformation,
                     operationType: 'singleRow',
                     disabled: disabledForSingleRow(selectedItems, focusedItem),
-                    onClick: () => signatureInformationCallback(getSelectedDcmtsOrFocused(selectedItems, focusedItem))
+                    onClick: () => signatureInformationCallback(isMobile, getSelectedDcmtsOrFocused(selectedItems, focusedItem))
                 },
                 {
                     icon: svgToString(_jsx(IconSignature, {})),

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@topconsultnpm/sdkui-react-beta",
-    "version": "6.16.91",
+    "version": "6.16.93",
     "description": "",
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",