@topconsultnpm/sdkui-react 6.19.0 → 6.20.0-dev1.100

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

@@ -333,7 +333,7 @@ const TMSignSettingsForm = (props) => {
                         fontWeight: 'bold',
                         color: isModified ? MODIFIED_COLOR : '#777',
                         transition: 'opacity 0.2s ease'
-                    }, onMouseEnter: (e) => { e.currentTarget.style.opacity = '0.9'; }, onMouseLeave: (e) => { e.currentTarget.style.opacity = '0.5'; }, children: "\u00D7" })] }));
+                    }, onMouseEnter: (e) => { e.currentTarget.style.opacity = '0.9'; }, onMouseLeave: (e) => { e.currentTarget.style.opacity = '0.5'; }, children: _jsx("i", { className: "dx-icon-close" }) })] }));
     };
     const renderMultiSignerTag = (tagData) => {
         const handleRemoveTag = () => {

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

@@ -0,0 +1,6 @@
+import { DcmtInfo } from "../../../ts";
+interface TMSignatureInfoContentProps {
+    inputDcmt: DcmtInfo;
+}
+declare const TMSignatureInfoContent: (props: TMSignatureInfoContentProps) => import("react/jsx-runtime").JSX.Element | null;
+export default TMSignatureInfoContent;

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

@@ -0,0 +1,140 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { SDK_Globals } from "@topconsultnpm/sdk-ts";
+import { IconCopy, getExceptionMessage } from "../../../helper";
+import TMSpinner from "../../base/TMSpinner";
+const TMSignatureInfoContent = (props) => {
+    const { inputDcmt } = props;
+    const [selectedHash, setSelectedHash] = useState('sha256');
+    const [signerInfo, setSignerInfo] = useState(undefined);
+    const [error, setError] = useState(undefined);
+    const [copiedHash, setCopiedHash] = useState(false);
+    useEffect(() => {
+        const fetchSignerInfo = async () => {
+            TMSpinner.show();
+            try {
+                const ue = SDK_Globals.tmSession?.NewUpdateEngineByID();
+                if (!ue) {
+                    setError("Sessione non disponibile");
+                    TMSpinner.hide();
+                    return;
+                }
+                ue.TID = inputDcmt.TID;
+                ue.DID = inputDcmt.DID;
+                const signerInfoDescriptor = await ue.GetSignersAsync();
+                if (!signerInfoDescriptor) {
+                    setError("Informazioni di firma non disponibili");
+                    TMSpinner.hide();
+                    return;
+                }
+                setSignerInfo(signerInfoDescriptor);
+                setError(undefined);
+                TMSpinner.hide();
+            }
+            catch (err) {
+                setError(getExceptionMessage(err));
+                TMSpinner.hide();
+            }
+        };
+        fetchSignerInfo();
+    }, [inputDcmt]);
+    const hashButtonStyle = (isActive) => ({
+        padding: '8px 16px',
+        margin: '0 2px',
+        border: isActive ? '2px solid #0078d4' : '1px solid #ccc',
+        borderRadius: '6px',
+        background: isActive ? '#e6f2ff' : '#fff',
+        color: isActive ? '#0078d4' : '#333',
+        cursor: 'pointer',
+        fontSize: '13px',
+        fontWeight: isActive ? '600' : '400',
+        transition: 'all 0.2s ease',
+        outline: 'none',
+        userSelect: 'none',
+        whiteSpace: 'nowrap'
+    });
+    const getHashValue = () => {
+        switch (selectedHash) {
+            case 'sha256': return signerInfo?.shA256;
+            case 'sha1': return signerInfo?.shA1;
+            case 'sha256base64': return signerInfo?.shA256Base64;
+        }
+    };
+    const getHashLabel = () => {
+        switch (selectedHash) {
+            case 'sha256': return 'SHA-256';
+            case 'sha1': return 'SHA-1';
+            case 'sha256base64': return 'SHA-256 (Base64)';
+        }
+    };
+    const copyToClipboard = async () => {
+        const value = getHashValue();
+        if (value) {
+            try {
+                await navigator.clipboard.writeText(value);
+                setCopiedHash(true);
+                setTimeout(() => setCopiedHash(false), 2000);
+            }
+            catch (err) {
+                console.error('Failed to copy:', err);
+            }
+        }
+    };
+    if (error) {
+        return (_jsx("div", { style: {
+                padding: '20px',
+                textAlign: 'center',
+                color: '#d32f2f',
+                background: '#ffebee',
+                borderRadius: '8px'
+            }, children: error }));
+    }
+    if (!signerInfo) {
+        return null;
+    }
+    return (_jsxs("div", { style: { lineHeight: "1.5em", overflowY: "auto", maxHeight: "500px", paddingRight: "8px", boxSizing: "border-box", userSelect: 'text' }, children: [signerInfo.signers && signerInfo.signers.length > 0 ? (_jsxs("div", { children: [_jsxs("h4", { style: { margin: '0 0 12px 0', color: '#0078d4', fontSize: '16px' }, children: ["Firme digitali (", signerInfo.signers.length, ")"] }), signerInfo.signers.map((signer, idx) => (_jsxs("div", { style: {
+                            border: "1px solid #d0d0d0",
+                            borderRadius: "8px",
+                            padding: "16px",
+                            marginBottom: "12px",
+                            background: "linear-gradient(135deg, #ffffff 0%, #f9f9f9 100%)",
+                            boxShadow: "0 2px 4px rgba(0,0,0,0.08)",
+                            userSelect: 'text',
+                        }, children: [_jsxs("h3", { style: { margin: "0 0 12px", color: "#0078d4", fontSize: '15px', fontWeight: '600' }, children: ["Firma ", signer.levelAndIndex] }), _jsxs("div", { style: {
+                                    display: 'grid',
+                                    gap: '10px',
+                                    fontSize: '13px'
+                                }, children: [_jsxs("div", { children: [_jsx("strong", { style: { color: '#555' }, children: "Intestatario:" }), _jsx("div", { style: { marginTop: '4px', color: '#333' }, children: signer.info1 ?? '-' })] }), _jsxs("div", { children: [_jsx("strong", { style: { color: '#555' }, children: "Riferimento temporale:" }), _jsx("div", { style: { marginTop: '4px', color: '#333' }, children: signer.info2 ?? '-' })] }), _jsxs("div", { children: [_jsx("strong", { style: { color: '#555' }, children: "Dettagli:" }), _jsx("div", { style: { marginTop: '4px', color: '#333' }, children: signer.info3 ?? '-' })] })] })] }, idx)))] })) : (_jsx("div", { style: {
+                    padding: '20px',
+                    textAlign: 'center',
+                    color: '#666',
+                    background: '#f5f5f5',
+                    borderRadius: '8px'
+                }, children: "Nessuna firma trovata" })), signerInfo.shA256 && (_jsxs("div", { style: {
+                    marginBottom: '12px',
+                    padding: '16px',
+                    background: '#f5f5f5',
+                    borderRadius: '8px',
+                    border: '1px solid #e0e0e0'
+                }, children: [_jsxs("div", { style: { marginBottom: '12px', display: 'flex', gap: '4px', flexWrap: 'wrap' }, children: [signerInfo.shA256 && (_jsx("button", { onClick: () => setSelectedHash('sha256'), style: hashButtonStyle(selectedHash === 'sha256'), children: "SHA-256" })), signerInfo.shA1 && (_jsx("button", { onClick: () => setSelectedHash('sha1'), style: hashButtonStyle(selectedHash === 'sha1'), children: "SHA-1" })), signerInfo.shA256Base64 && (_jsx("button", { onClick: () => setSelectedHash('sha256base64'), style: hashButtonStyle(selectedHash === 'sha256base64'), children: "Base64" }))] }), _jsxs("div", { style: {
+                            background: '#fff',
+                            padding: '12px',
+                            borderRadius: '6px',
+                            wordBreak: 'break-all',
+                            fontSize: '12px',
+                            border: '1px solid #d0d0d0',
+                            userSelect: 'text',
+                        }, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '6px' }, children: [_jsxs("strong", { style: { color: '#0078d4', fontSize: '14px' }, children: [getHashLabel(), ":"] }), _jsxs("button", { onClick: copyToClipboard, style: {
+                                            background: copiedHash ? '#d4edda' : 'transparent',
+                                            border: 'none',
+                                            cursor: 'pointer',
+                                            padding: '4px 8px',
+                                            borderRadius: '4px',
+                                            display: 'flex',
+                                            alignItems: 'center',
+                                            gap: '4px',
+                                            transition: 'all 0.2s ease',
+                                            color: copiedHash ? '#155724' : '#666'
+                                        }, title: "Copia", children: [_jsx(IconCopy, { width: 16, height: 16 }), copiedHash && _jsx("span", { style: { fontSize: '11px' }, children: "Copiato" })] })] }), _jsx("div", { style: { color: '#333' }, children: getHashValue() })] })] }))] }));
+};
+export default TMSignatureInfoContent;

package/lib/components/features/search/{TMViewHistoryDcmtForm.d.ts → TMViewHistoryDcmt.d.ts}

@@ -1,7 +1,7 @@
 import { DcmtInfo } from "../../../ts/types";
 import { DeviceType } from "../../base/TMDeviceProvider";
 import { DcmtTypeDescriptor, HomeBlogPost, TaskDescriptor } from "@topconsultnpm/sdk-ts";
-interface TMViewHistoryDcmtFormProps {
+interface TMViewHistoryDcmtProps {
     fromDTD: DcmtTypeDescriptor;
     deviceType: DeviceType | undefined;
     inputDcmt: DcmtInfo;
@@ -14,5 +14,5 @@ interface TMViewHistoryDcmtFormProps {
     handleNavigateToWGs?: (value: HomeBlogPost | number) => Promise<void>;
     handleNavigateToDossiers?: (value: HomeBlogPost | number) => Promise<void>;
 }
-declare const TMViewHistoryDcmtForm: (props: TMViewHistoryDcmtFormProps) => import("react/jsx-runtime").JSX.Element;
-export default TMViewHistoryDcmtForm;
+declare const TMViewHistoryDcmt: (props: TMViewHistoryDcmtProps) => import("react/jsx-runtime").JSX.Element;
+export default TMViewHistoryDcmt;

package/lib/components/features/search/{TMViewHistoryDcmtForm.js → TMViewHistoryDcmt.js}

@@ -1,16 +1,21 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useState } from "react";
-import { FormModes } from "../../../ts/types";
-import { associateColumnsToRows, calcResponsiveSizes, formatBytes, Globalization, SDKUI_Localizator } from "../../../helper";
+import { DownloadTypes, FormModes } from "../../../ts/types";
+import { associateColumnsToRows, calcResponsiveSizes, formatBytes, getExceptionMessage, getMoreInfoTasksForDocument, Globalization, SDKUI_Localizator } from "../../../helper";
 import TMModal from "../../base/TMModal";
-import { SDK_Globals, UpdateEngineByID, UserListCacheService } from "@topconsultnpm/sdk-ts";
+import { DeleteEngine, ResultTypes, SDK_Globals, UpdateEngineByID, UserListCacheService } from "@topconsultnpm/sdk-ts";
 import TMSpinner from "../../base/TMSpinner";
-import { TMExceptionBoxManager } from "../../base/TMPopUp";
+import { ButtonNames, TMExceptionBoxManager, TMMessageBoxManager } from "../../base/TMPopUp";
 import TMDcmtIcon from "../documents/TMDcmtIcon";
 import TMDataGrid from "../../base/TMDataGrid";
 import TMDcmtForm from "../documents/TMDcmtForm";
-const TMViewHistoryDcmtForm = (props) => {
+import { useDcmtOperations } from "../../../hooks/useDcmtOperations";
+import { TMLayoutWaitingContainer } from "../../base/TMWaitPanel";
+import { TMResultManager } from "../../forms/TMResultDialog";
+let abortLocalController = new AbortController();
+const TMViewHistoryDcmt = (props) => {
     const { deviceType, inputDcmt, onClose, fromDTD, allTasks, getAllTasks, deleteTaskByIdsCallback, addTaskCallback, editTaskCallback, handleNavigateToWGs, handleNavigateToDossiers } = props;
+    const { abortController, showWaitPanel, waitPanelTitle, showPrimary, waitPanelTextPrimary, waitPanelValuePrimary, waitPanelMaxValuePrimary, showSecondary, waitPanelTextSecondary, waitPanelValueSecondary, waitPanelMaxValueSecondary, downloadDcmtsAsync } = useDcmtOperations();
     const [dcmtHistory, setDcmtHistory] = useState([]);
     // showId is a state variable that determines whether an ID-related component or feature should be displayed
     const [showId, setShowId] = useState(false);
@@ -28,6 +33,18 @@ const TMViewHistoryDcmtForm = (props) => {
     const [showDcmtForm, setShowDcmtForm] = useState(false);
     // Memoized value to get the selected draft based on the focused row key
     const selectedDcmt = useMemo(() => dcmtHistory.find(dcmt => dcmt.id === focusedRowKey), [focusedRowKey, dcmtHistory]);
+    // State variable to control the visibility of the wait panel.
+    const [showLocalWaitPanel, setShowLocalWaitPanel] = useState(false);
+    // State variable to store the title of the wait panel.
+    const [waitLocalPanelTitle, setWaitLocalPanelTitle] = useState('');
+    // State variable to control the visibility of the primary section of the wait panel.
+    const [showLocalPrimary, setShowLocalPrimary] = useState(false);
+    // State variable to store the primary text of the wait panel.
+    const [waitLocalPanelTextPrimary, setWaitLocalPanelTextPrimary] = useState('');
+    // State variable to track the current value of the primary progress indicator in the wait panel.
+    const [waitLocalPanelValuePrimary, setWaitLocalPanelValuePrimary] = useState(0);
+    // State variable to define the maximum value for the primary progress indicator in the wait panel.
+    const [waitLocalPanelMaxValuePrimary, setWaitLocalPanelMaxValuePrimary] = useState(0);
     const getParticipantById = (id, users) => {
         if (users.length === 0)
             return null;
@@ -111,6 +128,60 @@ const TMViewHistoryDcmtForm = (props) => {
             setSelectedIndex(-1);
         }
     }, [dcmtHistory]);
+    const downloadFilesCallback = async () => {
+        if (focusedRowKey === undefined)
+            return;
+        const focusedRow = dcmtHistory.find(dcmt => dcmt.id === focusedRowKey);
+        const files = [];
+        if (focusedRow && focusedRow.TID && focusedRow.DID && focusedRow.FileExt) {
+            files.push({ TID: Number(focusedRow.TID), DID: Number(focusedRow.DID), FILEEXT: focusedRow.FileExt });
+        }
+        if (files.length > 0)
+            await downloadDcmtsAsync(files, DownloadTypes.Dcmt, "download");
+    };
+    const deleteFilesCallback = () => {
+        if (!focusedRowKey)
+            return;
+        const currentDcmt = dcmtHistory.find(dcmt => dcmt.id === focusedRowKey);
+        if (currentDcmt && currentDcmt.id) {
+            const msg = SDKUI_Localizator.Delete_ConfirmFor1.replaceParams((fromDTD.name ?? SDKUI_Localizator.SearchResult) + " - DID " + currentDcmt.DID + ", " + SDKUI_Localizator.Version + ": " + currentDcmt.Version);
+            TMMessageBoxManager.show({
+                title: SDKUI_Localizator.Delete, message: msg, buttons: [ButtonNames.YES, ButtonNames.NO],
+                onButtonClick: async (e) => {
+                    if (e !== ButtonNames.YES)
+                        return;
+                    setWaitLocalPanelTitle(SDKUI_Localizator.Delete);
+                    setShowLocalWaitPanel(true);
+                    setShowLocalPrimary(true);
+                    abortLocalController = new AbortController();
+                    let result = [];
+                    let i = 0;
+                    setWaitLocalPanelMaxValuePrimary(1);
+                    if (abortLocalController.signal.aborted) {
+                        result.push({ rowIndex: i, id1: currentDcmt.id, id2: currentDcmt.id, resultType: ResultTypes.WARNING, description: `Operazione interrotta. Elaborate ${i}` });
+                    }
+                    else {
+                        setWaitLocalPanelTextPrimary(SDKUI_Localizator.Delete);
+                        const deleteEngine = new DeleteEngine(SDK_Globals.tmSession);
+                        await deleteEngine.PhysDeleteByIDAsync(Number(currentDcmt.TID), Number(currentDcmt.DID), false)
+                            .then(async () => {
+                            result.push({ rowIndex: Number(currentDcmt.TID), id1: Number(currentDcmt.TID), id2: Number(currentDcmt.DID), description: SDKUI_Localizator.DeletionCompletedSuccessfully, resultType: ResultTypes.SUCCESS });
+                            await loadData();
+                        })
+                            .catch((err) => {
+                            result.push({ rowIndex: Number(currentDcmt.TID), id1: Number(currentDcmt.TID), id2: Number(currentDcmt.DID), resultType: ResultTypes.ERROR, description: getExceptionMessage(err) });
+                        });
+                    }
+                    setFocusedRowKey(undefined);
+                    setWaitLocalPanelTextPrimary('');
+                    setWaitLocalPanelMaxValuePrimary(0);
+                    setWaitLocalPanelValuePrimary(0);
+                    setShowLocalWaitPanel(false);
+                    TMResultManager.show(result, SDKUI_Localizator.Delete, "ID", undefined);
+                }
+            });
+        }
+    };
     const cellExtRender = useCallback((cellData) => {
         const data = cellData.data;
         const tooltipContent = (_jsxs("div", { style: { textAlign: 'left' }, children: [_jsxs("div", { children: [_jsx("span", { style: { fontWeight: 'bold' }, children: "ID:" }), " ", data.id ?? '-'] }), _jsxs("div", { children: [_jsx("span", { style: { fontWeight: 'bold' }, children: "DID:" }), " ", data.DID ?? '-'] }), _jsxs("div", { children: [_jsx("span", { style: { fontWeight: 'bold' }, children: "TID:" }), " ", data.TID ?? '-'] }), _jsx("hr", {}), _jsxs("div", { children: [_jsxs("span", { style: { fontWeight: 'bold' }, children: [SDKUI_Localizator.Author, ":"] }), " ", data.UpdaterDisplayName ?? '-'] }), _jsxs("div", { children: [_jsxs("span", { style: { fontWeight: 'bold' }, children: [SDKUI_Localizator.Version, ":"] }), " ", data.Version] }), _jsxs("div", { children: [_jsxs("span", { style: { fontWeight: 'bold' }, children: [SDKUI_Localizator.Size, ":"] }), " ", formatBytes(Number(data.FileSize ?? 0))] }), _jsx("hr", {}), _jsxs("div", { children: [_jsxs("span", { style: { fontWeight: 'bold' }, children: [SDKUI_Localizator.CreationTime, ":"] }), " ", Globalization.getDateTimeDisplayValue(data.CreationTime)] }), _jsxs("div", { children: [_jsxs("span", { style: { fontWeight: 'bold' }, children: [SDKUI_Localizator.LastUpdateTime, ":"] }), " ", Globalization.getDateTimeDisplayValue(data.LastUpdateTime)] })] }));
@@ -128,20 +199,19 @@ const TMViewHistoryDcmtForm = (props) => {
                     disabled: focusedRowKey === undefined,
                     onClick: () => setShowDcmtForm(true),
                 },
-                /* {
+                {
                     icon: "download",
                     text: 'Download',
-                    tooltip: SURFER_Localizator.DownloadSelectedDraftFile,
                     disabled: focusedRowKey === undefined,
                     onClick: () => downloadFilesCallback(),
                 },
                 {
                     icon: "trash",
                     text: SDKUI_Localizator.Delete,
-                    disabled: isGroupArchived || focusedRowKey === undefined,
+                    disabled: focusedRowKey === undefined,
                     onClick: deleteFilesCallback,
                     beginGroup: true
-                }, */
+                },
                 {
                     icon: showSearch ? "eyeclose" : "eyeopen",
                     onClick: () => setShowSearch(prevShowSearch => !prevShowSearch),
@@ -203,13 +273,13 @@ const TMViewHistoryDcmtForm = (props) => {
         return ([
             { dataField: "id", caption: "ID", dataType: 'string', visible: showId },
             { dataField: "FileExt", caption: "", cellRender: cellExtRender },
-            { dataField: "Version", caption: "V." },
+            { dataField: "Version", caption: "V.", dataType: 'number' },
             { dataField: "FileSizeDisplay", caption: SDKUI_Localizator.Size },
             { dataField: "UpdaterDisplayName", caption: SDKUI_Localizator.Author },
             { dataField: "LastUpdateTimeDisplay", caption: SDKUI_Localizator.LastUpdateTime },
         ]);
     }, [showId]);
-    return _jsxs(TMModal, { title: `${SDKUI_Localizator.SearchResult} \u2014 ${SDKUI_Localizator.History + ": " + (fromDTD.nameLoc ?? SDKUI_Localizator.Document) + " (DID:" + inputDcmt.DID})`, width: calcResponsiveSizes(deviceType, '700px', '700px', '95%'), height: calcResponsiveSizes(deviceType, '80%', '80%', '95%'), onClose: onClose, children: [_jsx(TMDataGrid, { dataSource: dcmtHistory, dataColumns: dataColumns, focusedRowKey: focusedRowKey, selection: selection, onContextMenuPreparing: onContextMenuPreparing, onFocusedRowChanged: onFocusedRowChanged, onCellDblClick: onCellDblClick, noDataText: SDKUI_Localizator.NoDataToDisplay, showSearchPanel: showSearch }), (showDcmtForm && selectedDcmt !== undefined) &&
-                _jsx(TMDcmtForm, { TID: Number(selectedDcmt.TID), DID: Number(selectedDcmt.DID), formMode: FormModes.ReadOnly, isModal: true, widthModal: "95%", heightModal: "95%", titleModal: fromDTD.name ?? SDKUI_Localizator.SearchResult, allowNavigation: dcmtHistory.length > 0, itemIndex: selectedIndex + 1, count: dcmtHistory.length, onClose: () => { setShowDcmtForm(false); }, canNext: canNavigateHandler('next'), canPrev: canNavigateHandler('prev'), onNext: () => onNavigateHandler('next'), onPrev: () => onNavigateHandler('prev'), allTasks: allTasks, getAllTasks: getAllTasks, deleteTaskByIdsCallback: deleteTaskByIdsCallback, addTaskCallback: addTaskCallback, editTaskCallback: editTaskCallback })] });
+    return _jsx(TMModal, { title: `${SDKUI_Localizator.SearchResult} \u2014 ${SDKUI_Localizator.History + ": " + (fromDTD.nameLoc ?? SDKUI_Localizator.Document) + " (DID:" + inputDcmt.DID})`, width: calcResponsiveSizes(deviceType, '700px', '700px', '95%'), height: calcResponsiveSizes(deviceType, '80%', '80%', '95%'), onClose: onClose, children: _jsx(TMLayoutWaitingContainer, { direction: 'vertical', showWaitPanel: showWaitPanel, showWaitPanelPrimary: showPrimary, showWaitPanelSecondary: showSecondary, waitPanelTitle: waitPanelTitle, waitPanelTextPrimary: waitPanelTextPrimary, waitPanelValuePrimary: waitPanelValuePrimary, waitPanelMaxValuePrimary: waitPanelMaxValuePrimary, waitPanelTextSecondary: waitPanelTextSecondary, waitPanelValueSecondary: waitPanelValueSecondary, waitPanelMaxValueSecondary: waitPanelMaxValueSecondary, isCancelable: true, abortController: abortController, children: _jsxs(TMLayoutWaitingContainer, { direction: 'vertical', showWaitPanel: showLocalWaitPanel, showWaitPanelPrimary: showLocalPrimary, waitPanelTitle: waitLocalPanelTitle, waitPanelTextPrimary: waitLocalPanelTextPrimary, waitPanelValuePrimary: waitLocalPanelValuePrimary, waitPanelMaxValuePrimary: waitLocalPanelMaxValuePrimary, isCancelable: true, abortController: abortLocalController, children: [_jsx(TMDataGrid, { dataSource: dcmtHistory, dataColumns: dataColumns, focusedRowKey: focusedRowKey, selection: selection, onContextMenuPreparing: onContextMenuPreparing, onFocusedRowChanged: onFocusedRowChanged, onCellDblClick: onCellDblClick, noDataText: SDKUI_Localizator.NoDataToDisplay, showSearchPanel: showSearch }), (showDcmtForm && selectedDcmt !== undefined) &&
+                        _jsx(TMDcmtForm, { TID: Number(selectedDcmt.TID), DID: Number(selectedDcmt.DID), formMode: FormModes.ReadOnly, isModal: true, widthModal: "95%", heightModal: "95%", titleModal: fromDTD.name ?? SDKUI_Localizator.SearchResult, allowNavigation: dcmtHistory.length > 0, itemIndex: selectedIndex + 1, count: dcmtHistory.length, onClose: () => { setShowDcmtForm(false); }, canNext: canNavigateHandler('next'), canPrev: canNavigateHandler('prev'), onNext: () => onNavigateHandler('next'), onPrev: () => onNavigateHandler('prev'), allTasks: allTasks, getAllTasks: getAllTasks, deleteTaskByIdsCallback: deleteTaskByIdsCallback, addTaskCallback: addTaskCallback, editTaskCallback: editTaskCallback, handleNavigateToWGs: handleNavigateToWGs, handleNavigateToDossiers: handleNavigateToDossiers, moreInfoTasks: getMoreInfoTasksForDocument(allTasks ?? [], Number(selectedDcmt.TID), Number(selectedDcmt.DID)) })] }) }) });
 };
-export default TMViewHistoryDcmtForm;
+export default TMViewHistoryDcmt;

package/lib/components/features/tasks/TMTaskForm.js

@@ -325,6 +325,25 @@ const TMTaskForm = (props) => {
         await editTaskCallback(task);
         onClose?.();
     };
+    const handleNavigateToReference = (ref) => {
+        switch (ref.objClass) {
+            case ObjectClasses.Dossier:
+                if (ref.objID)
+                    handleNavigateToDossiers(ref.objID);
+                else
+                    console.log("Dossier reference missing objID");
+                break;
+            case ObjectClasses.WorkingGroup:
+                if (ref.objID)
+                    handleNavigateToWGs(ref.objID);
+                else
+                    console.log("Working Group reference missing objID");
+                break;
+            // Handle other object types as needed
+            default:
+                console.warn(`Unhandled object type: ${ref.objClass}`);
+        }
+    };
     return (_jsx("div", { style: { width: "100%", height: "100%", overflow: "auto" }, ref: containerRef, children: _jsx(TMSaveForm, { width: width, height: height, id: id, title: title, isModal: isModal, formMode: formMode, onSaveAsync: saveDataAsync, onClose: onCloseCallback, onUndo: onUndoCallback, exception: exception, isModified: calcIsModified(formData, formDataOrig), validationItems: validationItems, showBackButton: showBackButton, hasNavigation: (hasNavigation && formMode !== FormModes.Create), canNext: canNext(), onNext: onNextCallback, canPrev: canPrev(), onPrev: onPrevCallback, showToolbar: !(showDcmtForm && formData?.iD1 && formData?.iD2), children: _jsxs(_Fragment, { children: [_jsx(ScrollView, { direction: "vertical", useNative: true, height: "calc(100% - 35px)", children: _jsx("div", { style: { marginRight: "5px" }, children: _jsxs(TMLayoutContainer, { direction: 'vertical', gap: 2, children: [(formMode === FormModes.Update && areDifferentIDs(formDataOrig?.fromID, SDK_Globals.tmSession?.SessionDescr?.userID)) && _jsx(TMConditionalWrapper, { condition: !isMobile, wrapper: children => _jsx("div", { style: { display: 'flex', flexDirection: 'row', width: '100%', gap: 10 }, children: children }), children: _jsxs("div", { style: { width: '100%', display: 'flex', alignItems: 'center', color: "#E29000" }, children: [_jsx("i", { className: "dx-icon-info", style: { fontSize: 20 } }), "\u00A0", _jsx("span", { children: SDKUI_Localizator.TaskAssignedMessage.replaceParams(formDataOrig?.fromName ?? '') })] }) }), taskContext?.workItem === undefined && (!areDifferentIDs(formData?.fromID, SDK_Globals.tmSession?.SessionDescr?.userID)
                                         && !areDifferentIDs(formData?.toID, SDK_Globals.tmSession?.SessionDescr?.userID))
                                         && _jsx(TMConditionalWrapper, { condition: !isMobile, wrapper: children => _jsx("div", { style: { display: 'flex', flexDirection: 'row', width: '100%', gap: 10 }, children: children }), children: _jsxs("div", { style: { width: '100%', display: 'flex', alignItems: 'center', color: "#2559A5" }, children: [_jsx("i", { className: "dx-icon-info", style: { fontSize: 20 } }), "\u00A0", _jsx("span", { children: SDKUI_Localizator.PersonalTaskAssignmentMessage })] }) }), (!areDifferentIDs(formData?.fromID, SDK_Globals.tmSession?.SessionDescr?.userID)
@@ -387,6 +406,6 @@ const TMTaskForm = (props) => {
                                                         : _jsx(TMTextBox, { label: SDKUI_Localizator.Priority, value: getPriorityLocalizatorValue(formData?.priority ?? Priorities.Low), readOnly: true }) })] }) }), _jsx(TMConditionalWrapper, { condition: !isMobile, wrapper: children => _jsx("div", { style: { display: 'flex', flexDirection: 'row', width: '100%', gap: 10 }, children: children }), children: _jsxs(_Fragment, { children: [_jsx("div", { style: { width: isMobile ? '100%' : '50%', marginTop: 10 }, children: !fieldsReadOnly.startDate ? _jsx(TMDateBox, { id: "start-date", resetTimeToZeroOnKeyPress: false, label: SDKUI_Localizator.StartDate, dateDisplayType: DateDisplayTypes.DateTime, value: formData?.startTime, isModifiedWhen: formData?.startTime !== formDataOrig?.startTime, validationItems: validationItems?.filter(o => o.PropertyName === SDKUI_Localizator.ErrorStartEndDate), onContentReady: handleStartTimeContentReady, onValueChange: (value) => { setFormData({ ...formData ?? {}, startTime: value }); }, showClearButton: true }) : _jsx(TMTextBox, { label: SDKUI_Localizator.StartDate, value: formData?.startTime ? formatDate(formData?.startTime) : '', readOnly: true }) }), _jsx("div", { style: { width: isMobile ? '100%' : '50%', marginTop: 10 }, children: !fieldsReadOnly.startDate ? _jsx(TMDateBox, { id: "end-date", resetTimeToZeroOnKeyPress: false, label: SDKUI_Localizator.Expiration, dateDisplayType: DateDisplayTypes.DateTime, value: formData?.endTime, isModifiedWhen: formData?.endTime !== formDataOrig?.endTime, validationItems: validationItems?.filter(o => o.PropertyName === SDKUI_Localizator.ErrorStartEndDate || o.PropertyName === SDKUI_Localizator.ErrorEndRemDate), onContentReady: handleEndTimeContentReady, onValueChange: (value) => { setFormData({ ...formData ?? {}, endTime: value }); }, showClearButton: true, readOnly: fieldsReadOnly.endDate }) : _jsx(TMTextBox, { label: SDKUI_Localizator.Expiration, value: formData?.endTime ? formatDate(formData?.endTime) : '', readOnly: true }) })] }) }), _jsx(TMConditionalWrapper, { condition: !isMobile, wrapper: children => _jsx("div", { style: { display: 'flex', flexDirection: 'row', width: '100%', gap: 3 }, children: children }), children: _jsx("div", { style: { width: isMobile ? '100%' : '50%', marginTop: 10 }, children: _jsx(TMDateBox, { id: "alert-time", resetTimeToZeroOnKeyPress: false, label: SDKUI_Localizator.Reminder, dateDisplayType: DateDisplayTypes.DateTime, value: formData?.remTime ?? undefined, isModifiedWhen: formData?.remTime !== formDataOrig?.remTime, validationItems: validationItems?.filter(o => o.PropertyName === SDKUI_Localizator.ErrorEndRemDate), onValueChange: (value) => { setFormData({ ...formData ?? {}, remTime: value }); }, showClearButton: true, readOnly: fieldsReadOnly.remTime }) }) }), (formData?.state && [Task_States.Completed, Task_States.Waiting, Task_States.Deferred].includes(formData?.state) ||
                                         (formData?.response ?? "") !== "") && _jsx(TMConditionalWrapper, { condition: !isMobile, wrapper: children => _jsx("div", { style: { display: 'flex', flexDirection: 'row', width: '100%', gap: 3 }, children: children }), children: _jsx("div", { style: { width: isMobile ? '100%' : '50%', marginTop: 10 }, children: _jsxs(ResponseCommentWrapper, { children: [_jsx(ResponseCommentTextArea, { id: "responseId", name: "response", "$isValid": true, value: formData?.response ?? '', onChange: onAnswerChange, "$isModifiedWhen": formData?.response !== formDataOrig?.response, disabled: (formData?.response ?? "") !== "" &&
                                                             (formData?.state && ![Task_States.Completed, Task_States.Waiting, Task_States.Deferred].includes(formData?.state)) }), _jsxs(ResponseCommentLabel, { htmlFor: "responseId", children: [SDKUI_Localizator.Answer, _jsxs(TMTooltip, { content: SDKUI_Localizator.AnswerTooltip, children: [" ", _jsx("i", { className: 'dx-icon-info' }), " "] })] }), _jsx(ResponseCommentCharacterCounter, { children: `${500 - (formData?.response ?? '').length} ${SDKUI_Localizator.CharactersRemaining}` })] }) }) })] }) }) }), (showDcmtForm && formData?.iD1 && formData?.iD2) &&
-                        _jsx(TMDcmtForm, { titleModal: formData.iD1Name ?? '-', isModal: true, TID: formData.iD1, DID: formData.iD2, allowButtonsRefs: true, taskMoreInfo: formData, onWFOperationCompleted: refreshWorkflowApprove, onTaskCompleted: onTaskCompleted, onClose: () => { setShowDcmtForm(false); }, onOpenS4TViewerRequest: onOpenS4TViewerRequest, s4TViewerDialogComponent: s4TViewerDialogComponent, allTasks: allTasks, getAllTasks: getAllTasks, deleteTaskByIdsCallback: deleteTaskByIdsCallback, addTaskCallback: addTaskCallback, editTaskCallback: editTaskCallback, handleNavigateToWGs: handleNavigateToWGs, handleNavigateToDossiers: handleNavigateToDossiers })] }) }) }));
+                        _jsx(TMDcmtForm, { titleModal: formData.iD1Name ?? '-', isModal: true, TID: formData.iD1, DID: formData.iD2, allowButtonsRefs: true, moreInfoTasks: [formData], onWFOperationCompleted: refreshWorkflowApprove, onTaskCompleted: onTaskCompleted, onClose: () => { setShowDcmtForm(false); }, onOpenS4TViewerRequest: onOpenS4TViewerRequest, s4TViewerDialogComponent: s4TViewerDialogComponent, allTasks: allTasks, getAllTasks: getAllTasks, deleteTaskByIdsCallback: deleteTaskByIdsCallback, addTaskCallback: addTaskCallback, editTaskCallback: editTaskCallback, handleNavigateToWGs: handleNavigateToWGs, handleNavigateToDossiers: handleNavigateToDossiers, onReferenceClick: handleNavigateToReference })] }) }) }));
 };
 export default TMTaskForm;

package/lib/components/features/tasks/TMTasksAgenda.d.ts

@@ -1,6 +1,7 @@
 import React from "react";
 import { TaskDescriptor } from "@topconsultnpm/sdk-ts";
 import { FormModes } from "../../../ts";
+import { TMContextMenuItemProps } from "../../NewComponents/ContextMenu";
 interface TMTasksAgendaProps {
     id: string;
     showId: boolean;
@@ -12,6 +13,7 @@ interface TMTasksAgendaProps {
     setCurrentAgendaDate: React.Dispatch<React.SetStateAction<Date>>;
     openTaskForm: (formMode: FormModes, task?: TaskDescriptor) => void;
     handleFocusedRowChange: (row: TaskDescriptor | undefined) => void;
+    menuItems: TMContextMenuItemProps[];
 }
-declare const TMTasksAgenda: React.MemoExoticComponent<(props: TMTasksAgendaProps) => import("react/jsx-runtime").JSX.Element>;
+declare const TMTasksAgenda: (props: TMTasksAgendaProps) => import("react/jsx-runtime").JSX.Element;
 export default TMTasksAgenda;

package/lib/components/features/tasks/TMTasksAgenda.js

@@ -1,5 +1,5 @@
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import React, { useCallback, useEffect, useState } from "react";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import ArrayStore from "devextreme/data/array_store";
 import Scheduler from "devextreme-react/scheduler";
 import { calculateNumberOfDays, highlightTaskText, priorityLegend, renderTaskIcons } from "./TMTasksUtilsView";
@@ -11,14 +11,31 @@ import { FormModes } from "../../../ts";
 import { SDKUI_Localizator } from "../../../helper";
 import TMCustomSearchBar from "../../../helper/TMCustomSearchBar";
 import TMTooltip from "../../base/TMTooltip";
-const TMTasksAgenda = React.memo((props) => {
+import TMContextMenu from "../../NewComponents/ContextMenu/TMContextMenu";
+const MemoizedScheduler = React.memo(({ dataSource, currentAgendaDate, appointmentRender, onAppointmentDblClick, onCurrentDateChange, onAppointmentContextMenu, onAppointmentClick }) => {
     const views = ['agenda'];
-    const { id, showId, showSearch, visualizedTasks, fromCell, toCell, currentAgendaDate, setCurrentAgendaDate, openTaskForm, handleFocusedRowChange } = props;
+    return (_jsx(Scheduler, { id: "tasks-agenda", defaultCurrentView: "agenda", dataSource: dataSource, width: "100%", height: "100%", editing: false, views: views, currentDate: currentAgendaDate, appointmentRender: appointmentRender, onAppointmentDblClick: onAppointmentDblClick, onCurrentDateChange: onCurrentDateChange, onAppointmentContextMenu: onAppointmentContextMenu, onAppointmentClick: onAppointmentClick }));
+});
+const TMTasksAgenda = (props) => {
+    const { id, showId, showSearch, visualizedTasks, fromCell, toCell, currentAgendaDate, setCurrentAgendaDate, openTaskForm, handleFocusedRowChange, menuItems } = props;
     const [schedulerData, setSchedulerData] = useState([]);
     const [loading, setLoading] = useState(false);
     const [searchText, setSearchText] = useState('');
+    const [contextMenuVisible, setContextMenuVisible] = useState(false);
+    const [contextMenuPosition, setContextMenuPosition] = useState({ x: 0, y: 0 });
+    const prevTasksRef = useRef({ length: 0 });
     useEffect(() => {
-        setSchedulerData(convertToSchedulerAppointments(visualizedTasks));
+        const currentSignature = {
+            length: visualizedTasks.length,
+            firstId: visualizedTasks[0]?.id,
+            lastId: visualizedTasks[visualizedTasks.length - 1]?.id
+        };
+        if (prevTasksRef.current.length !== currentSignature.length ||
+            prevTasksRef.current.firstId !== currentSignature.firstId ||
+            prevTasksRef.current.lastId !== currentSignature.lastId) {
+            prevTasksRef.current = currentSignature;
+            setSchedulerData(convertToSchedulerAppointments(visualizedTasks));
+        }
     }, [visualizedTasks]);
     useEffect(() => {
         let timeoutId;
@@ -74,13 +91,16 @@ const TMTasksAgenda = React.memo((props) => {
         if (e === undefined || e.event === undefined || e.appointmentData.id === undefined)
             return;
         e.event.preventDefault();
+        e.event.stopPropagation();
         const { id } = e.appointmentData;
-        // Update the state with the new set of selected appointments
         const task = visualizedTasks.find(task => task.id === id);
         if (task) {
             handleFocusedRowChange(task);
         }
-    }, []);
+        const event = e.event;
+        setContextMenuPosition({ x: event.clientX, y: event.clientY });
+        setContextMenuVisible(true);
+    }, [visualizedTasks, handleFocusedRowChange]);
     const onCurrentDateChange = useCallback((value) => {
         // Exit early if it's not a valid Date
         if (!(value instanceof Date) || isNaN(value.getTime())) {
@@ -101,7 +121,26 @@ const TMTasksAgenda = React.memo((props) => {
             openTaskForm(FormModes.Update, task);
         }
     }, [visualizedTasks]);
+    const handleWrapperContextMenu = useCallback((e) => {
+        handleFocusedRowChange(undefined);
+        setContextMenuPosition({ x: e.clientX, y: e.clientY });
+        setContextMenuVisible(true);
+    }, [handleFocusedRowChange]);
+    const handleCloseContextMenu = useCallback(() => {
+        setContextMenuVisible(false);
+    }, []);
+    const dataSourceRef = useRef(new ArrayStore({ key: `tasks-agenda-data`, data: schedulerData }));
+    const dataLengthRef = useRef(0);
+    if (dataLengthRef.current !== schedulerData.length) {
+        dataLengthRef.current = schedulerData.length;
+        dataSourceRef.current = new ArrayStore({ key: `tasks-agenda-data`, data: schedulerData });
+    }
+    const memoizedDataSource = useMemo(() => dataSourceRef.current, [schedulerData.length]);
     return _jsxs("div", { style: { height: "100%", width: "100%" }, children: [_jsxs("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', width: '100%', height: "48px" }, children: [_jsx("div", { style: { width: showSearch ? "160px" : "0", marginLeft: '10px' }, children: showSearch && (_jsx(TMCustomSearchBar, { initialValue: searchText, onSearchChange: (value) => setSearchText(value) })) }), _jsx("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: "default" }, children: _jsxs(TMTooltip, { content: priorityLegend(), children: [" ", SDKUI_Localizator.PriorityLegend] }) })] }), _jsx("div", { style: { height: "calc(100% - 48px)", width: "100%" }, children: loading ? _jsx("div", { style: { display: "flex", justifyContent: "center", alignItems: "center", height: "100%", width: "100%" }, children: _jsx(LoadIndicator, {}) })
-                    : _jsx("div", { id: `tasks-agenda-wrapper-${id}`, style: { width: "100%", height: "100%" }, onContextMenu: () => { handleFocusedRowChange(undefined); }, onClick: () => { handleFocusedRowChange(undefined); }, children: _jsx(Scheduler, { id: "tasks-agenda", defaultCurrentView: "agenda", dataSource: new ArrayStore({ key: `tasks-agenda-data`, data: schedulerData }), width: "100%", height: "100%", editing: false, views: views, currentDate: currentAgendaDate, appointmentRender: appointmentRender, onAppointmentDblClick: handleAppointmentDblClick, onCurrentDateChange: onCurrentDateChange, onAppointmentContextMenu: onAppointmentContextMenu, onAppointmentClick: handleAppointmentClick }) }) })] });
-});
+                    : _jsxs(_Fragment, { children: [_jsx(TMContextMenu, { items: menuItems, externalControl: {
+                                    visible: contextMenuVisible,
+                                    position: contextMenuPosition,
+                                    onClose: handleCloseContextMenu
+                                } }), _jsx("div", { id: `tasks-agenda-wrapper-${id}`, style: { width: "100%", height: "100%" }, onContextMenu: handleWrapperContextMenu, children: _jsx(MemoizedScheduler, { dataSource: memoizedDataSource, currentAgendaDate: currentAgendaDate, appointmentRender: appointmentRender, onAppointmentDblClick: handleAppointmentDblClick, onCurrentDateChange: onCurrentDateChange, onAppointmentContextMenu: onAppointmentContextMenu, onAppointmentClick: handleAppointmentClick }) })] }) })] });
+};
 export default TMTasksAgenda;

package/lib/components/features/tasks/TMTasksCalendar.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import { TaskDescriptor } from "@topconsultnpm/sdk-ts";
 import { FormModes } from '../../../ts';
+import { TMContextMenuItemProps } from '../../NewComponents/ContextMenu/types';
 interface TMTasksCalendarProps {
     id: string;
     visualizedTasks: Array<TaskDescriptor>;
@@ -16,6 +17,7 @@ interface TMTasksCalendarProps {
     setCalendarEndDate: React.Dispatch<React.SetStateAction<Date | undefined>>;
     focusedRowKey: number | undefined;
     handleFocusedRowChange: (row: TaskDescriptor | undefined) => void;
+    menuItems: TMContextMenuItemProps[];
 }
 declare const TMTasksCalendar: (props: TMTasksCalendarProps) => import("react/jsx-runtime").JSX.Element;
 export default TMTasksCalendar;

package/lib/components/features/tasks/TMTasksCalendar.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import ArrayStore from 'devextreme/data/array_store';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { Priorities, Task_States } from "@topconsultnpm/sdk-ts";
@@ -10,13 +10,15 @@ import { FormModes } from '../../../ts';
 import { SDKUI_Localizator } from '../../../helper';
 import TMTooltip from '../../base/TMTooltip';
 import TMCustomSearchBar from '../../../helper/TMCustomSearchBar';
+import TMContextMenu from '../../NewComponents/ContextMenu/TMContextMenu';
 const views = ['month'];
-let clickTimeout = null; // Timeout reference
+let clickTimeout = null;
 let clickCount = 0; // Click counter
 let lastClickedCell = null;
 const TMTasksCalendar = (props) => {
-    const { id, visualizedTasks, showId, showSearch, fromCell, toCell, openTaskForm, onDeleteCallback, currentCalendarDate, setCurrentCalendarDate, focusedRowKey, handleFocusedRowChange, setCalendarStartDate, setCalendarEndDate } = props;
+    const { id, visualizedTasks, showId, showSearch, fromCell, toCell, openTaskForm, onDeleteCallback, currentCalendarDate, setCurrentCalendarDate, focusedRowKey, handleFocusedRowChange, setCalendarStartDate, setCalendarEndDate, menuItems } = props;
     const [isMobile, setIsMobile] = useState(false);
+    const [contextMenuControl, setContextMenuControl] = useState({ visible: false, position: { x: 0, y: 0 } });
     const mobileBreakpoint = 768;
     const [schedulerData, setSchedulerData] = useState([]);
     const [isRange, setIsRange] = useState(false);
@@ -228,13 +230,23 @@ const TMTasksCalendar = (props) => {
             }
         }
     };
-    const onWrapperContextMenu = useCallback(() => {
-        handleFocusedRowChange(undefined);
-    }, []);
     const onWrapperClick = useCallback(() => {
         handleFocusedRowChange(undefined);
     }, []);
+    const handleWrapperContextMenu = useCallback((e) => {
+        setContextMenuControl({
+            visible: true,
+            position: { x: e.clientX, y: e.clientY }
+        });
+    }, []);
+    const handleCloseContextMenu = useCallback(() => {
+        setContextMenuControl(prev => ({ ...prev, visible: false }));
+    }, []);
     return (_jsxs("div", { style: { width: "100%", height: "100%" }, children: [_jsxs("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', width: '100%', height: "48px", padding: 5 }, children: [_jsx("div", { style: { width: showSearch ? "160px" : "0", marginLeft: '10px' }, children: showSearch && (_jsx(TMCustomSearchBar, { initialValue: searchText, onSearchChange: (value) => setSearchText(value) })) }), _jsx("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: "default" }, children: _jsx(TMTooltip, { content: priorityLegend(), children: SDKUI_Localizator.PriorityLegend }) })] }), _jsx("div", { style: { height: "calc(100% - 48px)", width: "100%" }, children: loading ? _jsx("div", { style: { display: "flex", justifyContent: "center", alignItems: "center", height: "100%", width: "100%" }, children: _jsx(LoadIndicator, {}) })
-                    : _jsx("div", { id: `tasks-calendar-wrapper-${id}`, style: { width: "100%", height: "100%" }, onContextMenu: onWrapperContextMenu, onClick: onWrapperClick, children: _jsx(Scheduler, { ref: schedulerRef, id: "tasks-calendar", dataSource: new ArrayStore({ key: 'tasks-calendar-data', data: schedulerData }), views: views, defaultCurrentView: "month", adaptivityEnabled: isMobile, editing: false, width: "100%", height: "100%", currentDate: currentCalendarDate, appointmentComponent: appointmentComponent, onAppointmentFormOpening: handleAppointmentFormOpening, appointmentTooltipComponent: appointmentTooltipComponent, onAppointmentDblClick: handleAppointmentDblClick, onCurrentDateChange: onCurrentCalendarDateChange, onAppointmentContextMenu: onAppointmentContextMenu, onCellContextMenu: onCellContextMenu, onCellClick: handleCellClick, onAppointmentClick: handleAppointmentClick, onContentReady: handleContentReady, onOptionChanged: onOptionChanged, children: _jsx(Resource, { dataSource: prioritiesResourceData, fieldExpr: "priority", label: "Priority" }) }) }) })] }));
+                    : _jsxs(_Fragment, { children: [_jsx(TMContextMenu, { items: menuItems, externalControl: {
+                                    visible: contextMenuControl.visible,
+                                    position: contextMenuControl.position,
+                                    onClose: handleCloseContextMenu
+                                } }), _jsx("div", { id: `tasks-calendar-wrapper-${id}`, style: { width: "100%", height: "100%" }, onContextMenu: handleWrapperContextMenu, onClick: onWrapperClick, children: _jsx(Scheduler, { ref: schedulerRef, id: "tasks-calendar", dataSource: new ArrayStore({ key: 'tasks-calendar-data', data: schedulerData }), views: views, defaultCurrentView: "month", adaptivityEnabled: isMobile, editing: false, width: "100%", height: "100%", currentDate: currentCalendarDate, appointmentComponent: appointmentComponent, onAppointmentFormOpening: handleAppointmentFormOpening, appointmentTooltipComponent: appointmentTooltipComponent, onAppointmentDblClick: handleAppointmentDblClick, onCurrentDateChange: onCurrentCalendarDateChange, onAppointmentContextMenu: onAppointmentContextMenu, onCellContextMenu: onCellContextMenu, onCellClick: handleCellClick, onAppointmentClick: handleAppointmentClick, onContentReady: handleContentReady, onOptionChanged: onOptionChanged, children: _jsx(Resource, { dataSource: prioritiesResourceData, fieldExpr: "priority", label: "Priority" }) }) })] }) })] }));
 };
 export default TMTasksCalendar;

package/lib/components/features/tasks/TMTasksUtils.d.ts

@@ -2,7 +2,7 @@ import { Appointment } from 'devextreme/ui/scheduler';
 import { ContextMenuTypes } from 'devextreme-react/context-menu';
 import { TaskDescriptor, Task_States, PdGs, Priorities, ValidationItem } from '@topconsultnpm/sdk-ts';
 import { FormModes, TaskContext } from '../../../ts';
-import { TMDataGridContextMenuItem } from '../../base/TMDataGrid';
+import { TMContextMenuItemProps } from '../../NewComponents/ContextMenu';
 export declare const TEXT_SELECTED_COLOR = "#ff5e1a";
 export declare const BG_COLOR_INACTIVE_WIDGET = "#fff";
 export declare const BG_COLOR_ACTIVE_WIDGET = "#fff0b7";
@@ -100,7 +100,7 @@ export declare const gotoPDGExtendedLabel: (gotoVisible: boolean, pdg: PdGs, iD1
 export declare const convertToSchedulerAppointments: (tasks: Array<TaskDescriptor>) => Array<Appointment>;
 export declare const formatDate: (date: Date) => string;
 export declare const areDifferentIDs: (fromID: number | undefined, userID: number | undefined) => boolean;
-export declare const createTasksMenuItems: (taskDescriptor: TaskDescriptor | undefined, showId: boolean, setShowId: React.Dispatch<React.SetStateAction<boolean>>, showSearch: boolean, setShowSearch: React.Dispatch<React.SetStateAction<boolean>>, openTaskForm: (formMode: FormModes, task?: TaskDescriptor, isContextual?: boolean) => void, openEditTaskForm: (rowId: number | undefined) => void, openDuplicateTaskForm: (rowId: number | undefined) => void, onDeleteCallback: (rowIds: Array<number>) => void, markAsStatus: (rowIds: Array<number>, status: Task_States) => void, getAllTasks: () => Promise<void>, fromWG: boolean, showContextualWG: boolean, setShowContextualWG: React.Dispatch<React.SetStateAction<boolean>>, fromDossier: boolean, showContextualDossier: boolean, setShowContextualDossier: React.Dispatch<React.SetStateAction<boolean>>, fromDocument: boolean, showContextualDocument: boolean, setShowContextualDocument: React.Dispatch<React.SetStateAction<boolean>>, showGoToToday: boolean, handleGoToToday?: () => void, fromDatagrid?: boolean) => Array<TMDataGridContextMenuItem>;
+export declare const createTasksMenuItems: (taskDescriptor: TaskDescriptor | undefined, showId: boolean, setShowId: React.Dispatch<React.SetStateAction<boolean>>, showSearch: boolean, setShowSearch: React.Dispatch<React.SetStateAction<boolean>>, openTaskForm: (formMode: FormModes, task?: TaskDescriptor, isContextual?: boolean) => void, openEditTaskForm: (rowId: number | undefined) => void, openDuplicateTaskForm: (rowId: number | undefined) => void, onDeleteCallback: (rowIds: Array<number>) => void, markAsStatus: (rowIds: Array<number>, status: Task_States) => void, getAllTasks: () => Promise<void>, fromWG: boolean, showContextualWG: boolean, setShowContextualWG: React.Dispatch<React.SetStateAction<boolean>>, fromDossier: boolean, showContextualDossier: boolean, setShowContextualDossier: React.Dispatch<React.SetStateAction<boolean>>, fromDocument: boolean, showContextualDocument: boolean, setShowContextualDocument: React.Dispatch<React.SetStateAction<boolean>>, showGoToToday: boolean, handleGoToToday?: () => void, fromDatagrid?: boolean) => Array<TMContextMenuItemProps>;
 export declare const checkIfNew: (fromId: number | undefined, isNew: number | undefined) => boolean;
 export declare const getNewTaskCount: (tasks: Array<TaskDescriptor>) => number;
 export declare const isTaskAssignedToAnotherUser: (task: TaskDescriptor) => boolean;