@topconsultnpm/sdkui-react 6.22.0-t2 → 6.22.0-t3

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

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { DcmtTypeListCacheService, LayoutModes, SDK_Localizator, TreeCacheService, TreeItemTypes } from '@topconsultnpm/sdk-ts';
 import { TreeList, Column, Scrolling, Selection } from 'devextreme-react/tree-list';
@@ -22,9 +22,12 @@ const TMTreeDcmtTypeCell = ({ tid, isMobile }) => {
     }, [isMobile, dtd, tid]);
     return (_jsxs(StyledTreeDcmtTypeRow, { onMouseEnter: loadDTD, children: [_jsx("span", { style: { cursor: 'pointer', flex: 1, minWidth: 0 }, children: _jsx(TMTidViewer, { tid: tid, showIcon: false }) }), !isMobile && (_jsx("span", { className: 'info-icon', children: _jsx(TMDcmtTypeTooltip, { dtd: dtd, children: _jsx(IconInfo, { color: TMColors.info }) }) }))] }));
 };
+// La ricerca e l'archiviazione hanno ciascuna il proprio albero predefinito: il contesto lo decide il layoutMode
+const getDefaultTreeId = (layoutMode) => layoutMode == LayoutModes.Update
+    ? SDKUI_Globals.userSettings.searchSettings.defaultTree
+    : SDKUI_Globals.userSettings.archivingSettings.defaultTree;
 const TMTreeSelector = ({ layoutMode = LayoutModes.Update, isVisible, onSelectedTIDChanged, onClosePanel, allowMaximize = true, onMaximizePanel }) => {
     const [trees, setTrees] = useState([]);
-    const [treeItems, setTreeItems] = useState([]);
     const [selectedTreeId, setSelectedTreeId] = useState(0);
     const [infoDTD, setInfoDTD] = useState();
     // State to store selected row keys
@@ -34,8 +37,11 @@ const TMTreeSelector = ({ layoutMode = LayoutModes.Update, isVisible, onSelected
     // Elemento selezionato nell'albero: dopo un refresh va riproposto se esiste ancora
     const [selectedTreeItemKey, setSelectedTreeItemKey] = useState(undefined);
     const selectedTreeItemKeys = useMemo(() => selectedTreeItemKey !== undefined ? [selectedTreeItemKey] : [], [selectedTreeItemKey]);
-    const [isGridBoxOpened, setIsGridBoxOpened] = useState(false);
-    const [defaultTreeId, setDefaultTreeId] = useState(-1);
+    // Finche' gli alberi non sono arrivati il pannello mostra il loader invece della lista vuota
+    const [isLoadingTrees, setIsLoadingTrees] = useState(true);
+    const [defaultTreeId, setDefaultTreeId] = useState(() => getDefaultTreeId(layoutMode));
+    const dropDownBoxRef = useRef(null);
+    const closeDropDown = useCallback(() => { dropDownBoxRef.current?.instance()?.option('opened', false); }, []);
     const deviceType = useDeviceType();
     const isMobile = deviceType === DeviceType.MOBILE;
     const panelRef = useOutsideClick(() => setInfoDTD(undefined));
@@ -48,6 +54,11 @@ const TMTreeSelector = ({ layoutMode = LayoutModes.Update, isVisible, onSelected
     const loadTreesAsync = useCallback(async (forceRefresh = false) => {
         const isSearchContext = layoutMode == LayoutModes.Update;
         if (forceRefresh) {
+            // Gli alberi arrivano dal server filtrati sui tipi documento della sessione: senza rileggerli
+            // prima (RetrieveAll con refreshCache rigenera anche la cache lato server) un tipo documento
+            // appena creato da Designer non comparirebbe tra gli elementi dell'albero
+            DcmtTypeListCacheService.RemoveAllWithoutMetadata();
+            await DcmtTypeListCacheService.GetAllWithoutMetadataAsync();
             if (isSearchContext)
                 TreeCacheService.RemoveAllSearch();
             else
@@ -73,29 +84,24 @@ const TMTreeSelector = ({ layoutMode = LayoutModes.Update, isVisible, onSelected
             setSelectedRowKeys([currentTreeId]);
             return;
         }
-        let defaultTree = SDKUI_Globals.userSettings.searchSettings.defaultTree;
-        let initialTreeId;
-        let treeToSelect;
-        if (defaultTree > 0) {
-            initialTreeId = defaultTree;
-            treeToSelect = result.find(o => o.id == defaultTree);
-        }
-        else {
-            initialTreeId = result[0]?.id ?? 0;
-            treeToSelect = result[0];
-        }
-        setSelectedTreeId(initialTreeId);
+        // Il predefinito puo' non essere piu' tra gli alberi del contesto (cancellato, o permessi cambiati): si ripiega sul primo
+        const defaultTree = getDefaultTreeId(layoutMode);
+        const treeToSelect = (defaultTree > 0 ? result.find(o => o.id == defaultTree) : undefined) ?? result[0];
+        setSelectedTreeId(treeToSelect?.id ?? 0);
         if (treeToSelect?.id) {
             setSelectedRowKeys([treeToSelect.id]);
         }
     }, [layoutMode]);
-    useEffect(() => { loadTreesAsync(); }, [loadTreesAsync]);
     useEffect(() => {
-        let newTreeItems = trees.find(o => o.id == selectedTreeId)?.items ?? [];
-        setTreeItems(newTreeItems);
+        setIsLoadingTrees(true);
+        loadTreesAsync().finally(() => setIsLoadingTrees(false));
+    }, [loadTreesAsync]);
+    // Derivato nello stesso render degli alberi: con uno state la TreeList mostrerebbe "Nessun dato" per un frame
+    const treeItems = useMemo(() => trees.find(o => o.id == selectedTreeId)?.items ?? [], [trees, selectedTreeId]);
+    useEffect(() => {
         // Mantiene la selezione dopo il refresh solo se l'elemento e' ancora presente (al cambio albero si azzera)
-        setSelectedTreeItemKey(prev => prev !== undefined && newTreeItems.some(o => o.id == prev) ? prev : undefined);
-    }, [selectedTreeId, trees]);
+        setSelectedTreeItemKey(prev => prev !== undefined && treeItems.some(o => o.id == prev) ? prev : undefined);
+    }, [treeItems]);
     const renderCell = useCallback((data) => {
         const treeItem = data.data;
         // Documento (DcmtType)
@@ -129,8 +135,8 @@ const TMTreeSelector = ({ layoutMode = LayoutModes.Update, isVisible, onSelected
         if (selectedKeys.length > 0)
             setSelectedTreeId(selectedKeys[0]);
         setSelectedRowKeys(selectedKeys);
-        setIsGridBoxOpened(false);
-    }, []);
+        closeDropDown();
+    }, [closeDropDown]);
     // Handles click on a tree row in the trees data grid: clicking the already selected tree
     // does not raise onSelectionChanged, so the drop down must be closed here as well
     const onRowClickTrees = useCallback((e) => {
@@ -139,8 +145,8 @@ const TMTreeSelector = ({ layoutMode = LayoutModes.Update, isVisible, onSelected
             return;
         setSelectedTreeId(tree.id);
         setSelectedRowKeys([tree.id]);
-        setIsGridBoxOpened(false);
-    }, []);
+        closeDropDown();
+    }, [closeDropDown]);
     // Handles focus change in the data grid
     const onFocusedRowChanged = useCallback((e) => {
         setFocusedRowKey(e.row?.key);
@@ -150,12 +156,6 @@ const TMTreeSelector = ({ layoutMode = LayoutModes.Update, isVisible, onSelected
         if (treeItemDescriptor?.id)
             setSelectedRowKeys([treeItemDescriptor.id]);
     }, []);
-    const onGridBoxOpened = useCallback((e) => {
-        if (e.name === 'opened') {
-            setIsGridBoxOpened(e.value);
-        }
-        ;
-    }, []);
     // Callback function to handle double-click events on a tree view cell
     const onCellDblClickTreeView = useCallback((e) => {
         // Extract the data from the clicked cell and cast it to the TreeItemDescriptor type
@@ -187,7 +187,7 @@ const TMTreeSelector = ({ layoutMode = LayoutModes.Update, isVisible, onSelected
     const onSelectionChangedTreeView = useCallback((e) => {
         setSelectedTreeItemKey(e.selectedRowKeys?.[0]);
     }, []);
-    return (_jsx(TMPanel, { title: SDK_Localizator.Trees, isVisible: isVisible, totalItems: trees.length, onClose: onClosePanel, allowMaximize: allowMaximize, onMaximize: onMaximizePanel, onHeaderDoubleClick: onMaximizePanel, onRefresh: () => loadTreesAsync(true), toolbar: _jsx(TMButton, { btnStyle: 'icon', caption: defaultTreeId == selectedTreeId ? SDKUI_Localizator.TreeRemoveDefault : SDKUI_Localizator.SetAsDefault, icon: defaultTreeId == selectedTreeId ? _jsx(IconStarRemove, { color: 'rgb(243, 114, 92)' }) : _jsx(IconStar, { color: 'rgb(248, 215, 117)' }), onClick: () => {
+    return (_jsx(TMPanel, { title: SDK_Localizator.Trees, isVisible: isVisible, totalItems: trees.length, onClose: onClosePanel, allowMaximize: allowMaximize, onMaximize: onMaximizePanel, onHeaderDoubleClick: onMaximizePanel, onRefresh: () => loadTreesAsync(true), isRefreshing: isLoadingTrees, toolbar: _jsx(TMButton, { btnStyle: 'icon', caption: defaultTreeId == selectedTreeId ? SDKUI_Localizator.TreeRemoveDefault : SDKUI_Localizator.SetAsDefault, icon: defaultTreeId == selectedTreeId ? _jsx(IconStarRemove, { color: 'rgb(243, 114, 92)' }) : _jsx(IconStar, { color: 'rgb(248, 215, 117)' }), onClick: () => {
                 if (defaultTreeId == selectedTreeId) {
                     if (layoutMode == LayoutModes.Update)
                         SDKUI_Globals.userSettings.searchSettings.defaultTree = -1;
@@ -211,16 +211,18 @@ const TMTreeSelector = ({ layoutMode = LayoutModes.Update, isVisible, onSelected
                         width: '100%',
                         boxSizing: 'border-box',
                         minHeight: 0,
-                    }, children: [_jsx("div", { style: { padding: '10px' }, children: _jsx(DropDownBox, { dropDownOptions: {
+                    }, children: [_jsx("div", { style: { padding: '10px' }, children: _jsx(DropDownBox, { ref: dropDownBoxRef, dropDownOptions: {
                                     resizeEnabled: true,
                                     minWidth: "100%",
                                     height: trees.length <= 10 ? 300 : 500,
                                     maxWidth: "100%"
-                                }, value: selectedTreeId, opened: isGridBoxOpened, valueExpr: "id", displayExpr: "nameLoc", deferRendering: false, dataSource: trees, onValueChanged: syncDataGridSelection, onOptionChanged: onGridBoxOpened, style: { height: 30, padding: '5px' }, children: _jsx(TMDataGrid, { height: "100%", width: "100%", dataSource: trees, dataColumns: [
+                                }, value: selectedTreeId, valueExpr: "id", displayExpr: "nameLoc", deferRendering: false, dataSource: trees, onValueChanged: syncDataGridSelection, style: { height: 30 }, children: _jsx(TMDataGrid, { height: "100%", width: "100%", dataSource: trees, dataColumns: [
                                         { dataField: 'nameLoc', caption: SDKUI_Localizator.Name, width: 'auto' },
                                         { dataField: 'description', caption: SDKUI_Localizator.Description, width: 'auto' },
-                                    ], selection: { mode: 'single', showCheckBoxesMode: "none" }, showHeaderFilter: false, selectedRowKeys: selectedRowKeys, onSelectionChanged: onSelectionChanged, onRowClick: onRowClickTrees, focusedRowKey: focusedRowKey, onFocusedRowChanged: onFocusedRowChanged }) }) }), _jsxs(StyledTreeListWrapper, { children: [_jsxs(TreeList, { height: "100%", dataSource: treeItems, showRowLines: false, showColumnLines: false, showBorders: false, columnAutoWidth: false, keyExpr: "id", parentIdExpr: "parentID", dataStructure: "plain", showColumnHeaders: false, selectedRowKeys: selectedTreeItemKeys, onSelectionChanged: onSelectionChangedTreeView, onCellDblClick: onCellDblClickTreeView, onRowClick: onRowClickTreeView, children: [_jsx(Column, { dataField: "nameLoc", caption: SDKUI_Localizator.Name, cellRender: renderCell, width: "100%" }), _jsx(Scrolling, { mode: "virtual", useNative: Number(SDKUI_Globals.userSettings?.themeSettings.gridSettings.useNativeScrollbar) === 1 }), _jsx(Selection, { mode: "single" })] }), _jsxs(StyledOffCanvasPanel, { ref: panelRef, "$isOpen": isMobile && infoDTD !== undefined, children: [_jsxs(StyledDivHorizontal, { style: { gap: 10, padding: '10px 8px', width: '100%', alignItems: 'center' }, children: [_jsx("p", { style: { fontSize: '1.1rem', fontWeight: 'bold' }, children: `${SDKUI_Localizator.DcmtType} - ${SDKUI_Localizator.About}` }), _jsx(IconCloseOutline, { style: { marginLeft: 'auto', cursor: 'pointer' }, onClick: () => setInfoDTD(undefined) })] }), renderDTDTooltipContent(infoDTD)] })] })] })
-            : _jsx("div", { style: { display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '100%', width: '100%', fontSize: '1.5rem' }, children: SDKUI_Localizator.TreesNoAvailable }) }));
+                                    ], selection: { mode: 'single', showCheckBoxesMode: "none" }, showHeaderFilter: false, selectedRowKeys: selectedRowKeys, onSelectionChanged: onSelectionChanged, onRowClick: onRowClickTrees, focusedRowKey: focusedRowKey, onFocusedRowChanged: onFocusedRowChanged }) }) }), _jsxs(StyledTreeListWrapper, { children: [_jsxs(TreeList, { height: "100%", dataSource: treeItems, showRowLines: false, showColumnLines: false, showBorders: false, columnAutoWidth: false, keyExpr: "id", parentIdExpr: "parentID", dataStructure: "plain", showColumnHeaders: false, selectedRowKeys: selectedTreeItemKeys, onSelectionChanged: onSelectionChangedTreeView, onCellDblClick: onCellDblClickTreeView, onRowClick: onRowClickTreeView, children: [_jsx(Column, { dataField: "nameLoc", caption: SDKUI_Localizator.Name, cellRender: renderCell, width: "100%" }), _jsx(Scrolling, { mode: "standard", useNative: Number(SDKUI_Globals.userSettings?.themeSettings.gridSettings.useNativeScrollbar) === 1 }), _jsx(Selection, { mode: "single" })] }), _jsxs(StyledOffCanvasPanel, { ref: panelRef, $isOpen: isMobile && infoDTD !== undefined, children: [_jsxs(StyledDivHorizontal, { style: { gap: 10, padding: '10px 8px', width: '100%', alignItems: 'center' }, children: [_jsx("p", { style: { fontSize: '1.1rem', fontWeight: 'bold' }, children: `${SDKUI_Localizator.DcmtType} - ${SDKUI_Localizator.About}` }), _jsx(IconCloseOutline, { style: { marginLeft: 'auto', cursor: 'pointer' }, onClick: () => setInfoDTD(undefined) })] }), renderDTDTooltipContent(infoDTD)] })] })] })
+            : isLoadingTrees
+                ? _jsx(_Fragment, {})
+                : _jsx("div", { style: { display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '100%', width: '100%', fontSize: '1.5rem' }, children: SDKUI_Localizator.TreesNoAvailable }) }));
 };
 export default TMTreeSelector;
 const StyledTreeDcmtTypeRow = styled(StyledDivHorizontal) `

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

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

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

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from 'react';
 import { ObjectClasses, TaskDescriptor, PdGs, UserListCacheService, SDK_Localizator } from '@topconsultnpm/sdk-ts';
 import { gotoPDGExtendedLabel, taskValidatorAsync } from './TMTasksUtils';

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

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { PdGs, Priorities, SDK_Globals, Task_States } from "@topconsultnpm/sdk-ts";
 import { FormModes } from "../../../ts";
@@ -358,7 +358,7 @@ const TaskFormResponseComment = (props) => {
                             }, children: currentResponse && currentResponse.length > 0
                                 ? _jsx(TMHtmlContentDisplay, { markup: currentResponse ?? '-', isSelected: false })
                                 : _jsx("span", { style: { color: '#6c757d', fontStyle: 'italic' }, children: SDKUI_Localizator.NoAnswerProvided }) }) }))] })
-            : (_jsxs(ResponseCommentWrapper, { children: [_jsx(ResponseCommentTextArea, { id: "responseId", name: "response", "$isValid": true, value: currentResponse ?? '', onChange: onAnswerChange ? onAnswerChange : undefined }), _jsx(ResponseCommentLabel, { htmlFor: "responseId", children: SDKUI_Localizator.Answer }), _jsx(ResponseCommentCharacterCounter, { children: `${500 - (currentResponse ?? '').length} ${SDKUI_Localizator.CharactersRemaining}` })] })) }));
+            : (_jsxs(ResponseCommentWrapper, { children: [_jsx(ResponseCommentTextArea, { id: "responseId", name: "response", $isValid: true, value: currentResponse ?? '', onChange: onAnswerChange ? onAnswerChange : undefined }), _jsx(ResponseCommentLabel, { htmlFor: "responseId", children: SDKUI_Localizator.Answer }), _jsx(ResponseCommentCharacterCounter, { children: `${500 - (currentResponse ?? '').length} ${SDKUI_Localizator.CharactersRemaining}` })] })) }));
 };
 // Stile comune per i container dei campi
 const fieldContainerStyle = { width: '100%' };
@@ -423,7 +423,7 @@ export const RenderTaskFormStateField = (props) => {
     // Non renderizzare nulla finché i dati non sono pronti
     if (!formDataOrig)
         return null;
-    return (_jsx("div", { style: { width: '100%', marginTop: 15 }, children: _jsxs(FloatingLabelFieldCard, { "$isModifiedWhen": formDataOrig?.state !== formData?.state, style: { display: 'flex', flexDirection: 'column', gap: 10 }, children: [_jsx(FloatingFieldLabel, { "$isModifiedWhen": formDataOrig?.state !== formData?.state, children: SDKUI_Localizator.StatusAndAnswer }), _jsxs("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', width: '100%' }, children: [_jsx(StatusFieldLabel, { children: _jsxs(StatusValue, { "$isModifiedWhen": formDataOrig?.state !== formData?.state, children: [_jsx("span", { style: { display: 'flex', alignItems: 'center' }, children: taskStateIconMap(20).get(formData?.state ?? Task_States.None) }), getStatusLocalizatorValue(formData?.state ?? Task_States.None)] }) }), _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '8px' }, children: [showModifyButton && (_jsxs("div", { onClick: () => handleShowChangeStateForm(true), style: {
+    return (_jsx("div", { style: { width: '100%', marginTop: 15 }, children: _jsxs(FloatingLabelFieldCard, { $isModifiedWhen: formDataOrig?.state !== formData?.state, style: { display: 'flex', flexDirection: 'column', gap: 10 }, children: [_jsx(FloatingFieldLabel, { $isModifiedWhen: formDataOrig?.state !== formData?.state, children: SDKUI_Localizator.StatusAndAnswer }), _jsxs("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', width: '100%' }, children: [_jsx(StatusFieldLabel, { children: _jsxs(StatusValue, { $isModifiedWhen: formDataOrig?.state !== formData?.state, children: [_jsx("span", { style: { display: 'flex', alignItems: 'center' }, children: taskStateIconMap(20).get(formData?.state ?? Task_States.None) }), getStatusLocalizatorValue(formData?.state ?? Task_States.None)] }) }), _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '8px' }, children: [showModifyButton && (_jsxs("div", { onClick: () => handleShowChangeStateForm(true), style: {
                                         backgroundColor: "#d17800",
                                         color: "#fff",
                                         padding: "10px 16px",

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

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } 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";

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

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } 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";

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

@@ -28,7 +28,7 @@ const TMTasksHeader = (props) => {
     const isValidKey = (key) => {
         return key !== FilterCategoryId.AllStates && key !== FilterCategoryId.AllPriorities;
     };
-    return (_jsx(StyledListHeader, { ref: containerRef, "$color": color ?? 'black', "$height": height ?? '100%', onContextMenu: handleContextMenu, children: _jsx(ScrollView, { width: "100%", height: "100%", direction: "horizontal", useNative: true, children: _jsxs(StyledViewChangerContainer, { children: [_jsx(TMTooltip, { content: SDKUI_Localizator.SelectViewMode, showEvent: "mouseenter", hideEvent: "mouseleave", position: "top", children: _jsx(TMDropDown, { elementStyle: { minWidth: "120px", width: "120px", height: "29px" }, dataSource: [
+    return (_jsx(StyledListHeader, { ref: containerRef, $color: color ?? 'black', $height: height ?? '100%', onContextMenu: handleContextMenu, children: _jsx(ScrollView, { width: "100%", height: "100%", direction: "horizontal", useNative: true, children: _jsxs(StyledViewChangerContainer, { children: [_jsx(TMTooltip, { content: SDKUI_Localizator.SelectViewMode, showEvent: "mouseenter", hideEvent: "mouseleave", position: "top", children: _jsx(TMDropDown, { elementStyle: { minWidth: "120px", width: "120px", height: "29px" }, dataSource: [
                                 { value: TaskView.AGENDA_TASK, display: "Agenda", icon: 'clock' },
                                 { value: TaskView.CALENDAR_TASK, display: SDKUI_Localizator.Calendar, icon: 'event' },
                                 { value: TaskView.LIST_TASK, display: SDKUI_Localizator.List, icon: 'fields' },

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

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import { PdGs, Priorities, SDK_Globals, Task_States } from '@topconsultnpm/sdk-ts';
 import { Extended_Task_States, FilterCategoryId, filterTreeTask, gotoPDGExtendedLabel, prioritiesResourceData, taskIsExpiringSoon } from "./TMTasksUtils";

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

@@ -1,22 +1,22 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useState } from "react";
 import { AssignedTab, checkIfNew, createTasksMenuItems, getHeaderPriorityFilterConfig, getHeaderStatusFilterConfig, getMondayOfCurrentWeek, getNewTaskCount, getStatusLocalizatorValue, isTaskAssignedToAnotherUser, LIGTH_CYAN, LIGTH_RED_ORGANGE, TaskView, TEXT_NOT_SELECTED_COLOR } from "./TMTasksUtils";
-import { TabPanel, Item } from 'devextreme-react/tab-panel';
 import { Priorities, ResultTypes, SDK_Globals, Task_States } from "@topconsultnpm/sdk-ts";
 import { calculateNumberOfDays, renderTaskIcons } from "./TMTasksUtilsView";
 import { getPriorityLocalizatorValue } from "../tasks/TMTasksUtils";
-import { getExceptionMessage, SDKUI_Localizator, StyledTabItem, taskModalSizes, TMCountBadge } from "../../../helper";
+import { getExceptionMessage, SDKUI_Localizator, taskModalSizes, TMCountBadge } from "../../../helper";
 import { useDeviceType } from "../../base/TMDeviceProvider";
 import { FormModes } from "../../../ts";
 import TMDataGrid from "../../base/TMDataGrid";
 import { TMMessageBoxManager, ButtonNames } from "../../base/TMPopUp";
 import TMTooltip from "../../base/TMTooltip";
-import { TMLayoutWaitingContainer } from "../../base/TMWaitPanel";
+import TMTabControl, { TMTabPanel } from "../../base/TMTabControl";
+import TMLayoutContainer from "../../base/TMLayout";
+import TMWaitPanelManager from "../../base/waitPanel/TMWaitPanelManager";
 import { TMResultManager } from "../../forms/TMResultDialog";
 import TMTasksCalendar from "./TMTasksCalendar";
 import TMTasksAgenda from "./TMTasksAgenda";
 import TMTaskForm from "./TMTaskForm";
-let abortController = new AbortController();
 const TMTasksView = (props) => {
     const { id, allTasks, getAllTasks, deleteTaskByIdsCallback, addTaskCallback, editTaskCallback, visualizedTasks, activeComponent, activeTabIndex, setActiveTabIndex, currentTask, setCurrentTask, assignedToMeCount, assignedByMeCount, allTasksFilteredCount, showId, setShowId, showSearch, setShowSearch, showContextualWG, setShowContextualWG, showContextualDossier, setShowContextualDossier, showContextualDocument, setShowContextualDocument, handleNavigateToWGs, handleNavigateToDossiers, taskContext, usersList, onOpenS4TViewerRequest, s4TViewerDialogComponent, afterTaskSaved, } = props;
     // Get the current device type (e.g., mobile, tablet, desktop) using a custom hook.
@@ -39,18 +39,6 @@ const TMTasksView = (props) => {
     const [calendarStartDate, setCalendarStartDate] = useState(undefined);
     /* State to manage the calendar end date */
     const [calendarEndDate, setCalendarEndDate] = useState(undefined);
-    // State variable to control the visibility of the wait panel.
-    const [showWaitPanel, setShowWaitPanel] = useState(false);
-    // State variable to store the title of the wait panel.
-    const [waitPanelTitle, setWaitPanelTitle] = useState('');
-    // State variable to control the visibility of the primary section of the wait panel.
-    const [showPrimary, setShowPrimary] = useState(false);
-    // State variable to store the primary text of the wait panel.
-    const [waitPanelTextPrimary, setWaitPanelTextPrimary] = useState('');
-    // State variable to track the current value of the primary progress indicator in the wait panel.
-    const [waitPanelValuePrimary, setWaitPanelValuePrimary] = useState(0);
-    // State variable to define the maximum value for the primary progress indicator in the wait panel.
-    const [waitPanelMaxValuePrimary, setWaitPanelMaxValuePrimary] = useState(0);
     const [isContextualCreate, setIsContextualCreate] = useState(false);
     // This function open the task form for editing a selected task
     const editTaskAgendaCallback = (rowId) => {
@@ -158,49 +146,56 @@ const TMTasksView = (props) => {
             onButtonClick: async (e) => {
                 if (e !== ButtonNames.YES)
                     return;
-                setWaitPanelTitle(SDKUI_Localizator.Delete);
-                setShowWaitPanel(true);
-                setShowPrimary(true);
-                abortController = new AbortController();
-                let result = [];
-                let i = 0;
-                const deletedTaskIds = [];
-                setWaitPanelMaxValuePrimary(rowIds.length);
-                for (const key of rowIds) {
-                    i++;
-                    const deletedTaskId = Number(key);
-                    const deletedTask = visualizedTasks.find(task => task.id === deletedTaskId);
-                    setWaitPanelValuePrimary(i);
-                    if (abortController.signal.aborted) {
-                        result.push({ rowIndex: i, id1: deletedTaskId, id2: deletedTaskId, resultType: ResultTypes.WARNING, description: `Operazione interrotta. Elaborate ${i} attività` });
-                        break;
-                    }
-                    else {
-                        setWaitPanelTextPrimary(SDKUI_Localizator.TaskXofY.replaceParams(i, rowIds.length));
-                        try {
-                            const deletionNotAllowed = deletedTask?.fromID !== SDK_Globals.tmSession?.SessionDescr?.userID;
-                            if (deletionNotAllowed) {
-                                result.push({ rowIndex: key, id1: key, id2: 0, resultType: ResultTypes.ERROR, description: SDKUI_Localizator.OperationNotAllowed });
+                const waitPanel = TMWaitPanelManager.show({
+                    title: SDKUI_Localizator.Delete,
+                    max: rowIds.length,
+                    cancelable: true,
+                });
+                try {
+                    let result = [];
+                    let i = 0;
+                    const deletedTaskIds = [];
+                    for (const key of rowIds) {
+                        i++;
+                        const deletedTaskId = Number(key);
+                        const deletedTask = visualizedTasks.find(task => task.id === deletedTaskId);
+                        waitPanel.setSubtitle(SDKUI_Localizator.TaskXofY.replaceParams(i, rowIds.length));
+                        if (waitPanel.aborted) {
+                            result.push({ rowIndex: i, id1: deletedTaskId, id2: deletedTaskId, resultType: ResultTypes.WARNING, description: `Operazione interrotta. Elaborate ${i - 1} attività` });
+                            waitPanel.warning();
+                            break;
+                        }
+                        else {
+                            try {
+                                const deletionNotAllowed = deletedTask?.fromID !== SDK_Globals.tmSession?.SessionDescr?.userID;
+                                if (deletionNotAllowed) {
+                                    result.push({ rowIndex: key, id1: key, id2: 0, resultType: ResultTypes.ERROR, description: SDKUI_Localizator.OperationNotAllowed });
+                                    waitPanel.error();
+                                }
+                                else {
+                                    await SDK_Globals.tmSession?.NewTaskEngine().DeleteAsync(deletedTaskId);
+                                    result.push({ rowIndex: key, id1: key, id2: 0, description: SDKUI_Localizator.DeletionCompletedSuccessfully, resultType: ResultTypes.SUCCESS });
+                                    deletedTaskIds.push(deletedTaskId);
+                                    waitPanel.ok();
+                                }
                             }
-                            else {
-                                await SDK_Globals.tmSession?.NewTaskEngine().DeleteAsync(deletedTaskId);
-                                result.push({ rowIndex: key, id1: key, id2: 0, description: SDKUI_Localizator.DeletionCompletedSuccessfully, resultType: ResultTypes.SUCCESS });
-                                deletedTaskIds.push(deletedTaskId);
+                            catch (err) {
+                                result.push({ rowIndex: key, id1: key, id2: 0, resultType: ResultTypes.ERROR, description: getExceptionMessage(err) });
+                                waitPanel.error();
                             }
-                        }
-                        catch (err) {
-                            result.push({ rowIndex: key, id1: key, id2: 0, resultType: ResultTypes.ERROR, description: getExceptionMessage(err) });
+                            // Avanza a elaborazione conclusa: con una sola attività la barra non parte dal 100%
+                            await waitPanel.step();
                         }
                     }
+                    await deleteTaskByIdsCallback(deletedTaskIds);
+                    handleSelectionChange([]);
+                    handleFocusedRowChange(undefined);
+                    waitPanel.close();
+                    TMResultManager.show(result, SDKUI_Localizator.Delete, "ID", undefined);
+                }
+                finally {
+                    waitPanel.close();
                 }
-                await deleteTaskByIdsCallback(deletedTaskIds);
-                handleSelectionChange([]);
-                handleFocusedRowChange(undefined);
-                setWaitPanelTextPrimary('');
-                setWaitPanelMaxValuePrimary(0);
-                setWaitPanelValuePrimary(0);
-                setShowWaitPanel(false);
-                TMResultManager.show(result, SDKUI_Localizator.Delete, "ID", undefined);
             }
         });
     }, [visualizedTasks]);
@@ -224,47 +219,53 @@ const TMTasksView = (props) => {
             onButtonClick: async (e) => {
                 if (e !== ButtonNames.YES)
                     return;
-                setWaitPanelTitle(SDKUI_Localizator.MarkAs);
-                setShowWaitPanel(true);
-                setShowPrimary(true);
-                abortController = new AbortController();
-                let result = [];
-                let i = 0;
-                setWaitPanelMaxValuePrimary(rowIds.length);
-                for (const key of rowIds) {
-                    i++;
-                    const selectedTask = visualizedTasks.find(task => task.id === key) || undefined;
-                    if (selectedTask === undefined)
-                        return;
-                    selectedTask.state = status;
-                    setWaitPanelValuePrimary(i);
-                    if (abortController.signal.aborted) {
-                        result.push({ rowIndex: i, id1: selectedTask.id, id2: selectedTask.id, resultType: ResultTypes.WARNING, description: `Operazione interrotta. Elaborate ${i} attività` });
-                        break;
-                    }
-                    else {
-                        setWaitPanelTextPrimary(SDKUI_Localizator.TaskXofY.replaceParams(i, rowIds.length));
-                        try {
-                            await SDK_Globals.tmSession?.NewTaskEngine().UpdateAsync(selectedTask);
-                            result.push({ rowIndex: key, id1: key, id2: 0, description: SDKUI_Localizator.UpdateCompletedSuccessfully, resultType: ResultTypes.SUCCESS });
+                const waitPanel = TMWaitPanelManager.show({
+                    title: SDKUI_Localizator.MarkAs,
+                    max: rowIds.length,
+                    cancelable: true,
+                });
+                try {
+                    let result = [];
+                    let i = 0;
+                    for (const key of rowIds) {
+                        i++;
+                        const selectedTask = visualizedTasks.find(task => task.id === key) || undefined;
+                        if (selectedTask === undefined)
+                            return;
+                        selectedTask.state = status;
+                        waitPanel.setSubtitle(SDKUI_Localizator.TaskXofY.replaceParams(i, rowIds.length));
+                        if (waitPanel.aborted) {
+                            result.push({ rowIndex: i, id1: selectedTask.id, id2: selectedTask.id, resultType: ResultTypes.WARNING, description: `Operazione interrotta. Elaborate ${i - 1} attività` });
+                            waitPanel.warning();
+                            break;
                         }
-                        catch (err) {
-                            result.push({ rowIndex: key, id1: key, id2: 0, resultType: ResultTypes.ERROR, description: getExceptionMessage(err) });
+                        else {
+                            try {
+                                await SDK_Globals.tmSession?.NewTaskEngine().UpdateAsync(selectedTask);
+                                result.push({ rowIndex: key, id1: key, id2: 0, description: SDKUI_Localizator.UpdateCompletedSuccessfully, resultType: ResultTypes.SUCCESS });
+                                waitPanel.ok();
+                            }
+                            catch (err) {
+                                result.push({ rowIndex: key, id1: key, id2: 0, resultType: ResultTypes.ERROR, description: getExceptionMessage(err) });
+                                waitPanel.error();
+                            }
+                            // Avanza a elaborazione conclusa: con una sola attività la barra non parte dal 100%
+                            await waitPanel.step();
                         }
                     }
+                    await getAllTasks().then(() => {
+                        handleSelectionChange([]);
+                        handleFocusedRowChange(undefined);
+                        waitPanel.close();
+                        TMResultManager.show(result, SDKUI_Localizator.MarkAs, "ID", undefined);
+                        if (afterTaskSaved) {
+                            afterTaskSaved(undefined, undefined, true);
+                        }
+                    });
+                }
+                finally {
+                    waitPanel.close();
                 }
-                await getAllTasks().then(() => {
-                    handleSelectionChange([]);
-                    handleFocusedRowChange(undefined);
-                    setWaitPanelTextPrimary('');
-                    setWaitPanelMaxValuePrimary(0);
-                    setWaitPanelValuePrimary(0);
-                    setShowWaitPanel(false);
-                    TMResultManager.show(result, SDKUI_Localizator.MarkAs, "ID", undefined);
-                    if (afterTaskSaved) {
-                        afterTaskSaved(undefined, undefined, true);
-                    }
-                });
             }
         });
     }, [visualizedTasks]);
@@ -538,16 +539,10 @@ const TMTasksView = (props) => {
     const getFromOrToCalendarElement = (fromOrToDataSource, fromCell = false, toCell = false) => {
         return _jsx("div", { style: { width: '100%', height: '100%', display: 'flex', flexDirection: 'column', overflow: "auto" }, children: _jsx("div", { style: { width: "100%", height: "100%" }, children: _jsx(TMTasksCalendar, { id: id, visualizedTasks: fromOrToDataSource, showId: showId, fromCell: fromCell, toCell: toCell, showSearch: showSearch, currentCalendarDate: currentCalendarDate, setCurrentCalendarDate: setCurrentCalendarDate, openTaskForm: openTaskFormCallback, onDeleteCallback: onDeleteCallback, setCalendarStartDate: setCalendarStartDate, setCalendarEndDate: setCalendarEndDate, focusedRowKey: focusedRowKey, handleFocusedRowChange: handleFocusedRowChange, menuItems: menuItems }) }) });
     };
-    return _jsxs("div", { style: { width: '100%', height: '100%' }, onContextMenu: (e) => e.preventDefault(), children: [_jsx(TMLayoutWaitingContainer, { direction: 'vertical', showWaitPanel: showWaitPanel, showWaitPanelPrimary: showPrimary, waitPanelTitle: waitPanelTitle, waitPanelTextPrimary: waitPanelTextPrimary, waitPanelValuePrimary: waitPanelValuePrimary, waitPanelMaxValuePrimary: waitPanelMaxValuePrimary, isCancelable: true, abortController: abortController, children: _jsxs(TabPanel, { width: "100%", height: "100%", animationEnabled: false, swipeEnabled: false, loop: false, showNavButtons: true, repaintChangesOnly: true, stylingMode: "primary", iconPosition: 'start', tabsPosition: 'top', selectedIndex: activeTabIndex, onSelectedIndexChange: onSelectedIndexChange, id: "task-centered-tab-title", children: [_jsx(Item, { title: SDKUI_Localizator.AssignedToMe, icon: "user", tabRender: (params) => {
-                                return _jsxs(StyledTabItem, { "$isSelected": activeTabIndex === AssignedTab.AssignedToMe, children: [_jsxs(TMTooltip, { content: SDKUI_Localizator.AssignedToMe, children: [_jsx("i", { className: `dx-icon-${params.icon}` }), "\u00A0", params.title, " ", (assignedToMeCount > 0) ? `(${assignedToMeCount})` : ''] }), newTaskCount > 0 && (_jsx(TMTooltip, { content: SDKUI_Localizator.NewAssignedActivitiesNumber + ": " + newTaskCount, children: _jsx(TMCountBadge, { children: newTaskCount }) }))] });
-                            }, render: () => activeTabIndex === AssignedTab.AssignedToMe ?
-                                _jsxs(_Fragment, { children: [activeComponent === TaskView.LIST_TASK && getFromOrToDatagridElement(visualizedTasks, true, false), activeComponent === TaskView.AGENDA_TASK && getFromOrToAgendaElement(visualizedTasks, true, false), activeComponent === TaskView.CALENDAR_TASK && getFromOrToCalendarElement(visualizedTasks, true, false)] }) : '' }), _jsx(Item, { title: SDKUI_Localizator.AssignedByMe, icon: "login", tabRender: (params) => {
-                                return _jsx(StyledTabItem, { "$isSelected": activeTabIndex === AssignedTab.AssignedByMe, children: _jsxs(TMTooltip, { content: SDKUI_Localizator.AssignedByMe, children: [_jsx("i", { className: `dx-icon-${params.icon}` }), "\u00A0", params.title, " ", (assignedByMeCount > 0) ? `(${assignedByMeCount})` : ''] }) });
-                            }, render: () => activeTabIndex === AssignedTab.AssignedByMe ?
-                                _jsxs(_Fragment, { children: [activeComponent === TaskView.CALENDAR_TASK && getFromOrToCalendarElement(visualizedTasks, false, true), activeComponent === TaskView.AGENDA_TASK && getFromOrToAgendaElement(visualizedTasks, false, true), activeComponent === TaskView.LIST_TASK && getFromOrToDatagridElement(visualizedTasks, false, true)] }) : '' }), _jsx(Item, { title: SDKUI_Localizator.AllFemale, icon: "fields", tabRender: (params) => {
-                                return _jsxs(StyledTabItem, { "$isSelected": activeTabIndex === AssignedTab.All, children: [_jsxs(TMTooltip, { content: SDKUI_Localizator.AllFemale, children: [_jsx("i", { className: `dx-icon-${params.icon}` }), "\u00A0", params.title, " ", (allTasksFilteredCount > 0) ? `(${allTasksFilteredCount})` : ''] }), newTaskCount > 0 && (_jsx(TMTooltip, { content: SDKUI_Localizator.NewAssignedActivitiesNumber + ": " + newTaskCount, children: _jsx(TMCountBadge, { children: newTaskCount }) }))] });
-                            }, render: () => activeTabIndex === AssignedTab.All ?
-                                _jsxs(_Fragment, { children: [activeComponent === TaskView.CALENDAR_TASK && getFromOrToCalendarElement(visualizedTasks, true, true), activeComponent === TaskView.AGENDA_TASK && getFromOrToAgendaElement(visualizedTasks, true, true), activeComponent === TaskView.LIST_TASK && getFromOrToDatagridElement(visualizedTasks, true, true)] }) : '' })] }) }), showTaskForm && _jsx(TMTaskForm, { id: currentTask?.id ?? -1, width: taskModalSizes(deviceType, formMode ?? FormModes.Create).width, height: taskModalSizes(deviceType, formMode ?? FormModes.Create).height, title: isContextualCreate ? SDKUI_Localizator.ContextualTask : SDKUI_Localizator.Widget_Activities, isModal: true, formMode: formMode ?? FormModes.Create, visualizedTasks: visualizedTasks, currentTask: currentTask, setCurrentTask: setCurrentTask, isContextualCreate: isContextualCreate, selectedRowKeys: selectedRowKeys, handleFocusedRowKeyChange: handleFocusedRowChange, taskContext: taskContext, usersList: usersList, onStatusChanged: () => { }, onClose: closeTaskFormCallback, onCancel: closeTaskFormCallback, showBackButton: false, onSaved: onSavedCallback, startDate: calendarStartDate, endDate: calendarEndDate, onOpenS4TViewerRequest: onOpenS4TViewerRequest, s4TViewerDialogComponent: s4TViewerDialogComponent, allTasks: allTasks, getAllTasks: getAllTasks, deleteTaskByIdsCallback: deleteTaskByIdsCallback, addTaskCallback: addTaskCallback, editTaskCallback: editTaskCallback, handleNavigateToWGs: handleNavigateToWGsWrapper, handleNavigateToDossiers: handleNavigateToDossiersWrapper }), _jsx("button", { style: {
+    return _jsxs("div", { style: { width: '100%', height: '100%' }, onContextMenu: (e) => e.preventDefault(), children: [_jsx(TMLayoutContainer, { direction: 'vertical', children: _jsxs(TMTabControl, { variant: 'moduleFilled', contentAnimation: 'none', swipeEnabled: false, selectedId: String(activeTabIndex), onSelectedIdChange: (id) => onSelectedIndexChange(Number(id)), style: { width: '100%', height: '100%' }, contentStyle: { display: 'flex', flex: 1, minHeight: 0 }, children: [_jsx(TMTabPanel, { id: String(AssignedTab.AssignedToMe), label: _jsxs(_Fragment, { children: [_jsxs(TMTooltip, { content: SDKUI_Localizator.AssignedToMe, children: [_jsx("i", { className: 'dx-icon-user' }), "\u00A0", SDKUI_Localizator.AssignedToMe, " ", (assignedToMeCount > 0) ? `(${assignedToMeCount})` : ''] }), newTaskCount > 0 && (_jsx(TMTooltip, { content: SDKUI_Localizator.NewAssignedActivitiesNumber + ": " + newTaskCount, children: _jsx(TMCountBadge, { children: newTaskCount }) }))] }), children: activeTabIndex === AssignedTab.AssignedToMe &&
+                                _jsxs(_Fragment, { children: [activeComponent === TaskView.LIST_TASK && getFromOrToDatagridElement(visualizedTasks, true, false), activeComponent === TaskView.AGENDA_TASK && getFromOrToAgendaElement(visualizedTasks, true, false), activeComponent === TaskView.CALENDAR_TASK && getFromOrToCalendarElement(visualizedTasks, true, false)] }) }), _jsx(TMTabPanel, { id: String(AssignedTab.AssignedByMe), label: _jsxs(TMTooltip, { content: SDKUI_Localizator.AssignedByMe, children: [_jsx("i", { className: 'dx-icon-login' }), "\u00A0", SDKUI_Localizator.AssignedByMe, " ", (assignedByMeCount > 0) ? `(${assignedByMeCount})` : ''] }), children: activeTabIndex === AssignedTab.AssignedByMe &&
+                                _jsxs(_Fragment, { children: [activeComponent === TaskView.CALENDAR_TASK && getFromOrToCalendarElement(visualizedTasks, false, true), activeComponent === TaskView.AGENDA_TASK && getFromOrToAgendaElement(visualizedTasks, false, true), activeComponent === TaskView.LIST_TASK && getFromOrToDatagridElement(visualizedTasks, false, true)] }) }), _jsx(TMTabPanel, { id: String(AssignedTab.All), label: _jsxs(_Fragment, { children: [_jsxs(TMTooltip, { content: SDKUI_Localizator.AllFemale, children: [_jsx("i", { className: 'dx-icon-fields' }), "\u00A0", SDKUI_Localizator.AllFemale, " ", (allTasksFilteredCount > 0) ? `(${allTasksFilteredCount})` : ''] }), newTaskCount > 0 && (_jsx(TMTooltip, { content: SDKUI_Localizator.NewAssignedActivitiesNumber + ": " + newTaskCount, children: _jsx(TMCountBadge, { children: newTaskCount }) }))] }), children: activeTabIndex === AssignedTab.All &&
+                                _jsxs(_Fragment, { children: [activeComponent === TaskView.CALENDAR_TASK && getFromOrToCalendarElement(visualizedTasks, true, true), activeComponent === TaskView.AGENDA_TASK && getFromOrToAgendaElement(visualizedTasks, true, true), activeComponent === TaskView.LIST_TASK && getFromOrToDatagridElement(visualizedTasks, true, true)] }) })] }) }), showTaskForm && _jsx(TMTaskForm, { id: currentTask?.id ?? -1, width: taskModalSizes(deviceType, formMode ?? FormModes.Create).width, height: taskModalSizes(deviceType, formMode ?? FormModes.Create).height, title: isContextualCreate ? SDKUI_Localizator.ContextualTask : SDKUI_Localizator.Widget_Activities, isModal: true, formMode: formMode ?? FormModes.Create, visualizedTasks: visualizedTasks, currentTask: currentTask, setCurrentTask: setCurrentTask, isContextualCreate: isContextualCreate, selectedRowKeys: selectedRowKeys, handleFocusedRowKeyChange: handleFocusedRowChange, taskContext: taskContext, usersList: usersList, onStatusChanged: () => { }, onClose: closeTaskFormCallback, onCancel: closeTaskFormCallback, showBackButton: false, onSaved: onSavedCallback, startDate: calendarStartDate, endDate: calendarEndDate, onOpenS4TViewerRequest: onOpenS4TViewerRequest, s4TViewerDialogComponent: s4TViewerDialogComponent, allTasks: allTasks, getAllTasks: getAllTasks, deleteTaskByIdsCallback: deleteTaskByIdsCallback, addTaskCallback: addTaskCallback, editTaskCallback: editTaskCallback, handleNavigateToWGs: handleNavigateToWGsWrapper, handleNavigateToDossiers: handleNavigateToDossiersWrapper }), _jsx("button", { style: {
                     position: 'absolute',
                     bottom: hasFilters ? '90px' : '18px',
                     right: '20px',