@topconsultnpm/sdkui-react 6.22.0-dev3.9 → 6.22.0-dev4.11

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

@@ -11,12 +11,12 @@ import TMDataGrid from "../../base/TMDataGrid";
 import { TMMessageBoxManager, ButtonNames } from "../../base/TMPopUp";
 import TMTooltip from "../../base/TMTooltip";
 import TMTabControl, { TMTabPanel } from "../../base/TMTabControl";
-import { TMLayoutWaitingContainer } from "../../base/TMWaitPanel";
+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,60 @@ 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) {
+                            const description = SDKUI_Localizator.OperationItemsInterrupted.replaceParams(i - 1);
+                            result.push({ rowIndex: i, id1: deletedTaskId, id2: deletedTaskId, resultType: ResultTypes.WARNING, description });
+                            waitPanel.warning(1, description);
+                            break;
+                        }
+                        else {
+                            // Messaggio per il popover del pannello: il nome dice a quale attività si riferisce.
+                            const panelMessage = (message) => `${deletedTask?.name ?? `ID ${deletedTaskId}`}: ${message}`;
+                            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(1, panelMessage(SDKUI_Localizator.OperationNotAllowed));
+                                }
+                                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) {
+                                const description = getExceptionMessage(err);
+                                result.push({ rowIndex: key, id1: key, id2: 0, resultType: ResultTypes.ERROR, description });
+                                waitPanel.error(1, panelMessage(description));
                             }
-                        }
-                        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 +223,55 @@ 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) {
+                            const description = SDKUI_Localizator.OperationItemsInterrupted.replaceParams(i - 1);
+                            result.push({ rowIndex: i, id1: selectedTask.id, id2: selectedTask.id, resultType: ResultTypes.WARNING, description });
+                            waitPanel.warning(1, description);
+                            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) {
+                                const description = getExceptionMessage(err);
+                                result.push({ rowIndex: key, id1: key, id2: 0, resultType: ResultTypes.ERROR, description });
+                                waitPanel.error(1, `${selectedTask.name ?? `ID ${selectedTask.id}`}: ${description}`);
+                            }
+                            // 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,7 +545,7 @@ 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(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 &&
+    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: {

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,95 @@ 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,
+                            // Il controllo precede l'elemento i: quelli elaborati sono i, non i + 1.
+                            description: SDKUI_Localizator.OperationItemsInterrupted.replaceParams(i)
+                        });
+                        waitPanel.warning(1, SDKUI_Localizator.OperationItemsInterrupted.replaceParams(i));
+                        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) {
+                        const description = getExceptionMessage(err);
+                        result.push({
+                            rowIndex: i + 1,
+                            id1: item.DID ?? i + 1,
+                            id2: item.TID ?? i + 1,
+                            resultType: ResultTypes.ERROR,
+                            description
+                        });
+                        // Bozza: nome del file; documento archiviato: DID.
+                        const label = item.name ?? `DID ${item.DID ?? item.did}`;
+                        waitPanel.error(1, `${label}: ${description}`);
                     }
-                    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 +368,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 +377,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',
@@ -419,15 +423,15 @@ const TMWGsCopyMoveForm = (props) => {
                             }, children: SDKUI_Localizator.Cancel })] })] }) });
 };
 export default TMWGsCopyMoveForm;
-const StepSpan = styled.span `
-  color: ${({ $isCurrent, $isPast }) => ($isCurrent ? TMColors.primary : $isPast ? '#555' : '#888')};
-  font-weight: ${({ $isCurrent }) => ($isCurrent ? 600 : 400)};
-  cursor: ${({ $isPast }) => ($isPast ? 'pointer' : 'default')};
-  transition: color 0.3s ease;
-  &:hover {
-    color: ${({ $isPast }) => ($isPast ? '#007bff' : undefined)};
-    text-decoration: ${({ $isPast }) => ($isPast ? 'underline' : 'none')};
-  }
+const StepSpan = styled.span `
+  color: ${({ $isCurrent, $isPast }) => ($isCurrent ? TMColors.primary : $isPast ? '#555' : '#888')};
+  font-weight: ${({ $isCurrent }) => ($isCurrent ? 600 : 400)};
+  cursor: ${({ $isPast }) => ($isPast ? 'pointer' : 'default')};
+  transition: color 0.3s ease;
+  &:hover {
+    color: ${({ $isPast }) => ($isPast ? '#007bff' : undefined)};
+    text-decoration: ${({ $isPast }) => ($isPast ? 'underline' : 'none')};
+  }
 `;
 export const TMStepNavigator = (props) => {
     const { steps, currentStep, onStepChange } = props;

package/lib/components/forms/TMResultDialog.js

@@ -25,7 +25,7 @@ const TMResultDialog = ({ title, result, id1Caption, id2Caption }) => {
             TMExceptionBoxManager.show({ exception: e.data.description });
         }
     };
-    return (_jsx(TMModal, { height: '65%', width: '75%', title: `${SDKUI_Localizator.OperationResult} - ${title}`, children: _jsxs(TMLayoutContainer, { children: [_jsxs("div", { style: { display: 'flex', flexDirection: 'row', gap: '5px', padding: '5px', justifyContent: 'center', alignItems: 'center' }, children: [_jsx("p", { children: `${SDKUI_Localizator.ProcessedItems}: ${result.length}` }), _jsx(IconSuccessCirlce, { fontSize: 22, color: TMColors.success }), _jsx("p", { children: result.filter(o => o.resultType == ResultTypes.SUCCESS).length ?? 0 }), _jsx(IconWarning, { fontSize: 22, color: TMColors.warning }), _jsx("p", { children: result.filter(o => o.resultType == ResultTypes.WARNING).length ?? 0 }), _jsx(IconCloseCircle, { fontSize: 22, color: TMColors.error }), _jsx("p", { children: result.filter(o => o.resultType == ResultTypes.ERROR).length ?? 0 })] }), _jsxs(DataGrid, { dataSource: result.filter(o => o.resultType != ResultTypes.SUCCESS), showColumnLines: Number(SDKUI_Globals.userSettings?.themeSettings.gridSettings.showRowLines) === 1, showRowLines: Number(SDKUI_Globals.userSettings?.themeSettings.gridSettings.showColumnLines) === 1, keyExpr: "rowIndex", width: "100%", height: "100%", columnResizingMode: "widget", allowColumnResizing: true, focusedRowEnabled: true, hoverStateEnabled: true, rowAlternationEnabled: true, onRowDblClick: handleRowDblClick, children: [_jsx(Column, { dataField: 'resultType', caption: '', width: "5%", allowResizing: true, allowSorting: true, cellRender: cellRender }), _jsx(Column, { dataField: 'id1', caption: id1Caption, width: "10%" }), id2Caption && _jsx(Column, { dataField: 'id2', caption: id2Caption, width: "10%" }), _jsx(Column, { dataField: 'description', allowResizing: true, caption: SDKUI_Localizator.Description, allowSorting: true, width: id2Caption ? "75%" : "85%" }), _jsx(HeaderFilter, { visible: true }), _jsx(Paging, { enabled: true, pageSize: 30 }), _jsx(Pager, { visible: true, showInfo: true, showNavigationButtons: true }), _jsx(Scrolling, { mode: 'standard', useNative: Number(SDKUI_Globals.userSettings?.themeSettings.gridSettings.useNativeScrollbar) === 1 })] })] }) }));
+    return (_jsx(TMModal, { height: '65%', width: '75%', title: `${SDKUI_Localizator.OperationResult} - ${title}`, children: _jsxs(TMLayoutContainer, { children: [_jsxs("div", { style: { display: 'flex', flexDirection: 'row', gap: '5px', padding: '5px', justifyContent: 'center', alignItems: 'center', flexShrink: 0 }, children: [_jsx("p", { children: `${SDKUI_Localizator.ProcessedItems}: ${result.length}` }), _jsx(IconSuccessCirlce, { fontSize: 22, color: TMColors.success }), _jsx("p", { children: result.filter(o => o.resultType == ResultTypes.SUCCESS).length ?? 0 }), _jsx(IconWarning, { fontSize: 22, color: TMColors.warning }), _jsx("p", { children: result.filter(o => o.resultType == ResultTypes.WARNING).length ?? 0 }), _jsx(IconCloseCircle, { fontSize: 22, color: TMColors.error }), _jsx("p", { children: result.filter(o => o.resultType == ResultTypes.ERROR).length ?? 0 })] }), _jsx("div", { style: { flex: '1 1 auto', minHeight: 0, width: '100%', overflow: 'hidden' }, children: _jsxs(DataGrid, { dataSource: result.filter(o => o.resultType != ResultTypes.SUCCESS), showColumnLines: Number(SDKUI_Globals.userSettings?.themeSettings.gridSettings.showRowLines) === 1, showRowLines: Number(SDKUI_Globals.userSettings?.themeSettings.gridSettings.showColumnLines) === 1, keyExpr: "rowIndex", width: "100%", height: "100%", columnResizingMode: "widget", allowColumnResizing: true, focusedRowEnabled: true, hoverStateEnabled: true, rowAlternationEnabled: true, onRowDblClick: handleRowDblClick, children: [_jsx(Column, { dataField: 'resultType', caption: '', width: "5%", allowResizing: true, allowSorting: true, cellRender: cellRender }), _jsx(Column, { dataField: 'id1', caption: id1Caption, width: "10%" }), id2Caption && _jsx(Column, { dataField: 'id2', caption: id2Caption, width: "10%" }), _jsx(Column, { dataField: 'description', allowResizing: true, caption: SDKUI_Localizator.Description, allowSorting: true, width: id2Caption ? "75%" : "85%" }), _jsx(HeaderFilter, { visible: true }), _jsx(Paging, { enabled: true, pageSize: 30 }), _jsx(Pager, { visible: true, showInfo: true, showNavigationButtons: true }), _jsx(Scrolling, { mode: 'standard', useNative: Number(SDKUI_Globals.userSettings?.themeSettings.gridSettings.useNativeScrollbar) === 1 })] }) })] }) }));
 };
 export default TMResultDialog;
 export class TMResultManager {