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

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',

package/lib/components/features/wg/TMWGsCopyMoveForm.js

@@ -2,9 +2,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { ResultTypes, SDK_Globals, WorkingGroupCacheService, WorkingGroupEngine } from "@topconsultnpm/sdk-ts";
 import { TreeView } from 'devextreme-react';
+import { LoadIndicator } from 'devextreme-react/load-indicator';
 import styled from 'styled-components';
 import { buildFolderHierarchy, findFileItems, setFolderTreeViewItems } from '../../base/TMFileManagerUtils';
-import TMSpinner from '../../base/TMSpinner';
 import { TMExceptionBoxManager } from '../../base/TMPopUp';
 import { useDeviceType } from '../../base/TMDeviceProvider';
 import { SDKUI_Localizator, getExceptionMessage, Globalization, IconUserGroup, IconFolder, calcResponsiveSizes } from '../../../helper';
@@ -13,7 +13,8 @@ import { FormModes } from '../../../ts';
 import { TMColors } from '../../../utils/theme';
 import TMDataGrid from '../../base/TMDataGrid';
 import TMTooltip from '../../base/TMTooltip';
-import { TMLayoutWaitingContainer } from '../../base/TMWaitPanel';
+import TMLayoutContainer from '../../base/TMLayout';
+import TMWaitPanelManager from '../../base/waitPanel/TMWaitPanelManager';
 import { TMResultManager } from '../../forms/TMResultDialog';
 import TMSaveForm from '../../forms/TMSaveForm';
 // Returns a formatted name and optional description based on document type and item DID.
@@ -34,7 +35,6 @@ export const getDocumentDisplayInfo = (descriptor, item) => {
         : '';
     return { name, description };
 };
-let abortController = new AbortController();
 const TMWGsCopyMoveForm = (props) => {
     const { mode, workingGroups, context, folder, onClose, focusedWorkingGroupId = undefined, fetchTreeFileSystemForWorkingGroup, fetchArchivedDocumentsForWorkingGroup } = props;
     // Destructure context to get the current working group descriptor or document type descriptor based on the engine type
@@ -58,18 +58,10 @@ const TMWGsCopyMoveForm = (props) => {
     const [treeViewData, setTreeViewData] = useState([]);
     // State to manage the selected file
     const [selectedFolder, setSelectedFolder] = 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);
+    // True until the list of working groups is ready
+    const [isLoadingWgs, setIsLoadingWgs] = useState(true);
+    // Id of the working group whose folder tree has been loaded
+    const [loadedTreeWgId, setLoadedTreeWgId] = useState(undefined);
     // State to manage the current working group descriptor, initially set to the one from context
     const steps = useMemo(() => {
         return mode === 'copyToWgArchivedDoc'
@@ -104,7 +96,6 @@ const TMWGsCopyMoveForm = (props) => {
             let groupsToUse = workingGroups;
             if (!groupsToUse) {
                 try {
-                    TMSpinner.show({ description: SDKUI_Localizator.LoadingWorkGroups });
                     // Clear cache and fetch working groups
                     WorkingGroupCacheService.RemoveAll();
                     const fetchedGroups = await WorkingGroupCacheService.GetAllAsync();
@@ -113,9 +104,6 @@ const TMWGsCopyMoveForm = (props) => {
                 catch (error) {
                     TMExceptionBoxManager.show({ exception: error });
                 }
-                finally {
-                    TMSpinner.hide();
-                }
             }
             if (groupsToUse) {
                 const sortedGroups = [...groupsToUse].sort((a, b) => {
@@ -134,6 +122,7 @@ const TMWGsCopyMoveForm = (props) => {
                     setCurrentStep(1);
                 }
             }
+            setIsLoadingWgs(false);
         };
         loadWorkingGroups();
     }, [workingGroups, currentWorkingGroupDescriptor]);
@@ -154,11 +143,16 @@ const TMWGsCopyMoveForm = (props) => {
             catch (error) {
                 TMExceptionBoxManager.show({ exception: error });
             }
+            finally {
+                setLoadedTreeWgId(selectedWg.id);
+            }
         };
         if (selectedWg && wgs.length) {
             fetchWgTree();
         }
     }, [selectedWg, wgs]);
+    // Loading while the working groups are fetched, or while the folder tree of the selected working group is not loaded yet
+    const isLoading = isLoadingWgs || (currentStep === 1 && mode !== 'copyToWgArchivedDoc' && !!selectedWg?.id && loadedTreeWgId !== selectedWg.id);
     // When the current step resets to the first step (index 0), clear the selected folder by setting it to undefined
     useEffect(() => {
         if (currentStep === 0) {
@@ -235,86 +229,91 @@ const TMWGsCopyMoveForm = (props) => {
             if (missingWgOrFolder) {
                 return Promise.resolve();
             }
-            setWaitPanelTitle(mode !== 'move' ? SDKUI_Localizator.Copy : SDKUI_Localizator.Move);
-            setShowWaitPanel(true);
-            setShowPrimary(true);
-            abortController = new AbortController();
             let result = [];
             const totalDrafts = context.selectedDrafts.length;
-            setWaitPanelMaxValuePrimary(totalDrafts);
-            const workingGroupEngine = new WorkingGroupEngine(SDK_Globals.tmSession);
-            const selectedFolderId = selectedFolder?.id === -1 ? 0 : selectedFolder?.id ?? 0;
-            const isWgEngine = context.engine === 'WorkingGroupEngine';
-            const isSearchEngine = context.engine === 'SearchEngine';
-            for (let i = 0; i < totalDrafts; i++) {
-                if (abortController.signal.aborted) {
-                    result.push({
-                        rowIndex: i + 1,
-                        id1: i + 1,
-                        id2: i + 1,
-                        resultType: ResultTypes.WARNING,
-                        description: SDKUI_Localizator.OperationFilesInterrupted.replaceParams(i + 1)
-                    });
-                    break;
-                }
-                setWaitPanelValuePrimary(i + 1);
-                setWaitPanelTextPrimary(`${i + 1}/${totalDrafts}`);
-                const item = context.selectedDrafts[i];
-                try {
-                    if (isWgEngine && targetWorkingGroup && targetWorkingGroup.id && currentWorkingGroupDescriptor && currentWorkingGroupDescriptor.id && selectedFolder && item.did) {
-                        const draft = item;
-                        const did = draft.did ?? 0;
-                        if (mode === 'copy') {
-                            await workingGroupEngine.DraftsCopyAsync(currentWorkingGroupDescriptor.id, did, targetWorkingGroup.id, selectedFolderId);
-                            if (fetchTreeFileSystemForWorkingGroup) {
-                                await fetchTreeFileSystemForWorkingGroup(targetWorkingGroup.id);
+            const waitPanel = TMWaitPanelManager.show({
+                title: mode !== 'move' ? SDKUI_Localizator.Copy : SDKUI_Localizator.Move,
+                max: totalDrafts,
+                cancelable: true,
+            });
+            try {
+                const workingGroupEngine = new WorkingGroupEngine(SDK_Globals.tmSession);
+                const selectedFolderId = selectedFolder?.id === -1 ? 0 : selectedFolder?.id ?? 0;
+                const isWgEngine = context.engine === 'WorkingGroupEngine';
+                const isSearchEngine = context.engine === 'SearchEngine';
+                for (let i = 0; i < totalDrafts; i++) {
+                    if (waitPanel.aborted) {
+                        result.push({
+                            rowIndex: i + 1,
+                            id1: i + 1,
+                            id2: i + 1,
+                            resultType: ResultTypes.WARNING,
+                            description: SDKUI_Localizator.OperationFilesInterrupted.replaceParams(i + 1)
+                        });
+                        waitPanel.warning();
+                        break;
+                    }
+                    waitPanel.setSubtitle(`${i + 1}/${totalDrafts}`);
+                    const item = context.selectedDrafts[i];
+                    try {
+                        if (isWgEngine && targetWorkingGroup && targetWorkingGroup.id && currentWorkingGroupDescriptor && currentWorkingGroupDescriptor.id && selectedFolder && item.did) {
+                            const draft = item;
+                            const did = draft.did ?? 0;
+                            if (mode === 'copy') {
+                                await workingGroupEngine.DraftsCopyAsync(currentWorkingGroupDescriptor.id, did, targetWorkingGroup.id, selectedFolderId);
+                                if (fetchTreeFileSystemForWorkingGroup) {
+                                    await fetchTreeFileSystemForWorkingGroup(targetWorkingGroup.id);
+                                }
+                            }
+                            else if (mode === 'move') {
+                                await workingGroupEngine.DraftsMoveAsync(currentWorkingGroupDescriptor.id, did, targetWorkingGroup.id, selectedFolderId);
+                                if (fetchTreeFileSystemForWorkingGroup) {
+                                    await fetchTreeFileSystemForWorkingGroup(targetWorkingGroup.id);
+                                    await fetchTreeFileSystemForWorkingGroup(currentWorkingGroupDescriptor.id);
+                                }
                             }
                         }
-                        else if (mode === 'move') {
-                            await workingGroupEngine.DraftsMoveAsync(currentWorkingGroupDescriptor.id, did, targetWorkingGroup.id, selectedFolderId);
-                            if (fetchTreeFileSystemForWorkingGroup) {
-                                await fetchTreeFileSystemForWorkingGroup(targetWorkingGroup.id);
-                                await fetchTreeFileSystemForWorkingGroup(currentWorkingGroupDescriptor.id);
+                        else if (isSearchEngine) {
+                            if (mode === 'copyToWgDraft' && targetWorkingGroup && targetWorkingGroup.id && selectedFolder && currentDcmtTypeDescriptor) {
+                                const documentDisplayInfo = getDocumentDisplayInfo(currentDcmtTypeDescriptor, item);
+                                await workingGroupEngine.DraftsAddByIDAsync(targetWorkingGroup.id, selectedFolderId, documentDisplayInfo.name, documentDisplayInfo.description, item.TID, item.DID);
+                                if (fetchTreeFileSystemForWorkingGroup)
+                                    await fetchTreeFileSystemForWorkingGroup(targetWorkingGroup.id);
+                            }
+                            else if (mode === 'copyToWgArchivedDoc' && targetWorkingGroup && targetWorkingGroup.id) {
+                                await workingGroupEngine.DcmtsAddOrRemoveAsync(targetWorkingGroup.id, item.TID, item.DID, false);
+                                if (fetchArchivedDocumentsForWorkingGroup)
+                                    await fetchArchivedDocumentsForWorkingGroup(targetWorkingGroup.id);
                             }
                         }
+                        result.push({
+                            rowIndex: i + 1,
+                            id1: item.DID ?? i + 1,
+                            id2: item.TID ?? i + 1,
+                            description: SDKUI_Localizator.UpdateCompletedSuccessfully,
+                            resultType: ResultTypes.SUCCESS
+                        });
+                        waitPanel.ok();
                     }
-                    else if (isSearchEngine) {
-                        if (mode === 'copyToWgDraft' && targetWorkingGroup && targetWorkingGroup.id && selectedFolder && currentDcmtTypeDescriptor) {
-                            const documentDisplayInfo = getDocumentDisplayInfo(currentDcmtTypeDescriptor, item);
-                            await workingGroupEngine.DraftsAddByIDAsync(targetWorkingGroup.id, selectedFolderId, documentDisplayInfo.name, documentDisplayInfo.description, item.TID, item.DID);
-                            if (fetchTreeFileSystemForWorkingGroup)
-                                await fetchTreeFileSystemForWorkingGroup(targetWorkingGroup.id);
-                        }
-                        else if (mode === 'copyToWgArchivedDoc' && targetWorkingGroup && targetWorkingGroup.id) {
-                            await workingGroupEngine.DcmtsAddOrRemoveAsync(targetWorkingGroup.id, item.TID, item.DID, false);
-                            if (fetchArchivedDocumentsForWorkingGroup)
-                                await fetchArchivedDocumentsForWorkingGroup(targetWorkingGroup.id);
-                        }
+                    catch (err) {
+                        result.push({
+                            rowIndex: i + 1,
+                            id1: item.DID ?? i + 1,
+                            id2: item.TID ?? i + 1,
+                            resultType: ResultTypes.ERROR,
+                            description: getExceptionMessage(err)
+                        });
+                        waitPanel.error();
                     }
-                    result.push({
-                        rowIndex: i + 1,
-                        id1: item.DID ?? i + 1,
-                        id2: item.TID ?? i + 1,
-                        description: SDKUI_Localizator.UpdateCompletedSuccessfully,
-                        resultType: ResultTypes.SUCCESS
-                    });
-                }
-                catch (err) {
-                    result.push({
-                        rowIndex: i + 1,
-                        id1: item.DID ?? i + 1,
-                        id2: item.TID ?? i + 1,
-                        resultType: ResultTypes.ERROR,
-                        description: getExceptionMessage(err)
-                    });
+                    await waitPanel.step();
                 }
             }
-            setWaitPanelTextPrimary('');
-            setWaitPanelMaxValuePrimary(0);
-            setWaitPanelValuePrimary(0);
-            setShowWaitPanel(false);
-            TMResultManager.show(result, mode !== 'move' ? SDKUI_Localizator.Copy : SDKUI_Localizator.Move, "ID", undefined);
+            finally {
+                waitPanel.close();
+            }
             onClose();
+            // Shown after the modal has closed: the alert animation is time-based, so it must not start while the page is still busy re-rendering
+            setTimeout(() => TMResultManager.show(result, mode !== 'move' ? SDKUI_Localizator.Copy : SDKUI_Localizator.Move, "ID", undefined), 0);
         }
         catch (e) {
             TMExceptionBoxManager.show({ exception: e });
@@ -365,7 +364,7 @@ const TMWGsCopyMoveForm = (props) => {
         const tooltipContent = _jsxs("div", { style: { textAlign: "center" }, children: [_jsx("span", { style: { fontWeight: 'bold' }, children: "ID" }), ": ", itemData.id] });
         return (_jsxs("div", { style: { whiteSpace: "nowrap", display: "flex", alignItems: "center" }, className: isSelected ? 'treeview-selected-item-manager' : '', children: [_jsx(TMTooltip, { content: tooltipContent, children: _jsx(IconFolder, { fontSize: 24, style: { marginRight: 5, color: TMColors.iconLight } }) }), itemData.text] }));
     };
-    return _jsx(TMSaveForm, { title: getTitle(), showTitleFormMode: false, showErrorCount: false, showUndoButton: false, hasNavigation: false, skipIsModifiedCheck: true, isModal: true, width: calcResponsiveSizes(deviceType, '800px', '800px', '95%'), height: '550px', validationItems: validationItems, exception: exception, isModified: isLocalSelectionModified(), showToolbar: false, showSaveButton: false, onClose: onClose, children: _jsxs(TMLayoutWaitingContainer, { direction: 'vertical', showWaitPanel: showWaitPanel, showWaitPanelPrimary: showPrimary, waitPanelTitle: waitPanelTitle, waitPanelTextPrimary: waitPanelTextPrimary, waitPanelValuePrimary: waitPanelValuePrimary, waitPanelMaxValuePrimary: waitPanelMaxValuePrimary, isCancelable: true, abortController: abortController, children: [_jsx("div", { style: { width: "100%", height: '48px' }, children: _jsx(TMStepNavigator, { steps: steps, currentStep: adjustedCurrentStep, onStepChange: (stepIndex) => { setCurrentStep(stepIndex); } }) }), _jsxs("div", { style: {
+    return _jsx(TMSaveForm, { title: getTitle(), showTitleFormMode: false, showErrorCount: false, showUndoButton: false, hasNavigation: false, skipIsModifiedCheck: true, isModal: true, width: calcResponsiveSizes(deviceType, '800px', '800px', '95%'), height: '550px', validationItems: validationItems, exception: exception, isModified: isLocalSelectionModified(), showToolbar: false, showSaveButton: false, onClose: onClose, children: _jsxs(TMLayoutContainer, { direction: 'vertical', children: [_jsx("div", { style: { width: "100%", height: '48px' }, children: _jsx(TMStepNavigator, { steps: steps, currentStep: adjustedCurrentStep, onStepChange: (stepIndex) => { setCurrentStep(stepIndex); } }) }), _jsxs("div", { style: {
                         marginTop: '10px',
                         padding: '10px',
                         borderRadius: '8px',
@@ -374,8 +373,9 @@ const TMWGsCopyMoveForm = (props) => {
                         width: '100%',
                         height: 'calc(100% - 113px)',
                         overflow: 'auto',
-                    }, children: [(currentStep === 0 && wgs.length > 0) &&
-                            _jsx(TMDataGrid, { dataColumns: dataColumns, dataSource: wgs, selection: selection, focusedRowKey: focusedRowKey, onFocusedRowChanged: onFocusedRowChanged, selectedRowKeys: [...selectedRowKeys], onSelectionChanged: onSelectionChanged, onRowClick: onRowClick, onRowDblClick: onRowDblClick, autoNavigateToFocusedRow: true, showColumnHeaders: false }), (currentStep === 1) &&
+                    }, children: [isLoading &&
+                            _jsxs("div", { style: { width: '100%', height: '100%', display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', gap: '10px' }, children: [_jsx(LoadIndicator, { height: 40, width: 40 }), _jsx("div", { children: currentStep === 0 ? SDKUI_Localizator.LoadingWorkGroups : SDKUI_Localizator.Loading })] }), (!isLoading && currentStep === 0 && wgs.length > 0) &&
+                            _jsx(TMDataGrid, { dataColumns: dataColumns, dataSource: wgs, selection: selection, focusedRowKey: focusedRowKey, onFocusedRowChanged: onFocusedRowChanged, selectedRowKeys: [...selectedRowKeys], onSelectionChanged: onSelectionChanged, onRowClick: onRowClick, onRowDblClick: onRowDblClick, autoNavigateToFocusedRow: true, showColumnHeaders: false }), (!isLoading && currentStep === 1) &&
                             _jsx(TreeView, { dataSource: treeViewData, displayExpr: "text", itemRender: renderTreeViewItem, onItemClick: handleTreeViewItemClick })] }), _jsxs("div", { style: {
                         width: "100%",
                         height: '45px',
@@ -434,6 +434,6 @@ export const TMStepNavigator = (props) => {
     return (_jsx("div", { style: { display: 'flex', justifyContent: 'center' }, children: _jsx("div", { style: { display: 'flex', alignItems: 'center', backgroundColor: '#f9f9f9', padding: '6px 16px', borderRadius: '999px', boxShadow: '0 1px 4px rgba(0, 0, 0, 0.05)' }, children: steps.map((step, index) => {
                 const isPastStep = index < currentStep;
                 const isCurrent = currentStep === index;
-                return _jsxs("div", { style: { display: 'flex', alignItems: 'center' }, children: [_jsx(StepSpan, { "$isCurrent": isCurrent, "$isPast": isPastStep, onClick: isPastStep ? () => onStepChange(index) : undefined, children: _jsxs("div", { style: { display: 'flex', flexDirection: 'column', alignItems: 'center' }, children: [_jsx("span", { children: step.title }), step.subtitle && _jsxs("span", { style: { fontSize: '0.90em', fontStyle: "italic" }, children: ["\"", step.subtitle, "\""] })] }) }), index < steps.length - 1 && (_jsx("span", { style: { margin: '0 8px', color: '#ddd' }, children: _jsx("i", { className: 'dx-icon-greater' }) }))] }, step.id);
+                return _jsxs("div", { style: { display: 'flex', alignItems: 'center' }, children: [_jsx(StepSpan, { $isCurrent: isCurrent, $isPast: isPastStep, onClick: isPastStep ? () => onStepChange(index) : undefined, children: _jsxs("div", { style: { display: 'flex', flexDirection: 'column', alignItems: 'center' }, children: [_jsx("span", { children: step.title }), step.subtitle && _jsxs("span", { style: { fontSize: '0.90em', fontStyle: "italic" }, children: ["\"", step.subtitle, "\""] })] }) }), index < steps.length - 1 && (_jsx("span", { style: { margin: '0 8px', color: '#ddd' }, children: _jsx("i", { className: 'dx-icon-greater' }) }))] }, step.id);
             }) }) }));
 };

package/lib/components/features/workflow/TMWorkflowPopup.d.ts

@@ -4,6 +4,16 @@ import { DeviceType } from "../../base/TMDeviceProvider";
 import { WorkItemDetail } from "../../../ts";
 interface IWorkflowOperationButtonsProps {
     dtd: DcmtTypeDescriptor | undefined;
+    /**
+     * Forza la forma dei pulsanti: `true` = flusso di FIRMA (Firma e approva),
+     * `false` = flusso di APPROVAZIONE. Se omesso si deduce dal tipo documento
+     * (widget Sign4Top), che è il comportamento del workflow.
+     *
+     * Serve a chi conosce la natura dell'attività meglio del tipo documento: un
+     * work item di sola approvazione su un tipo ABILITATO alla firma non deve
+     * mostrare "Firma e approva".
+     */
+    signFlow?: boolean;
     approveDisable?: boolean;
     signApproveDisable?: boolean;
     rejectDisable?: boolean;