@topconsultnpm/sdkui-react-beta 6.15.93 → 6.15.95

package/lib/components/base/Styled.js

@@ -252,6 +252,30 @@ export const StyledToolbarCardContainer = styled.div `
     flex-direction: column; 
     gap: 10px; 
 `;
+const spinAnimation = keyframes `
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+`;
+export const StyledSpinner = styled.div `
+  border: 4px solid #f3f3f3; /* Light grey */
+  border-top: 4px solid #C2388B; /* Colore primario della toolbar */
+  border-radius: 50%;
+  width: 40px;
+  height: 40px;
+  animation: ${spinAnimation} 1s linear infinite;
+`;
+export const StyledLoadingContainer = styled.div `
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 15px;
+  font-size: 1rem;
+  color: #555;
+`;
 //#region  Animations
 const scaleAndColorChange = (scaleValue) => keyframes `
   0% { transform: scale(1); color: white; }

package/lib/components/features/archive/TMArchive.js

@@ -13,7 +13,7 @@ import TMPanel from '../../base/TMPanel';
 import { TMPanelManagerProvider, useTMPanelManagerContext } from '../../layout/panelManager/TMPanelManagerContext';
 import TMPanelManagerContainer from '../../layout/panelManager/TMPanelManagerContainer';
 const TMArchive = ({ inputTID, inputFile = null, connectorFileSave = undefined, onSavedAsyncCallback, inputMids = [], onCurrentTIDChanged }) => {
-    const [currentTID, setCurrentTID] = useState(0);
+    const [currentTID, setCurrentTID] = useState(inputTID ?? 0);
     const [mruTIDs, setMruTIDs] = useState([]);
     const [currentMruTID, setCurrentMruTID] = useState(0);
     const [fromDTD, setFromDTD] = useState();
@@ -117,7 +117,7 @@ const TMArchive = ({ inputTID, inputFile = null, connectorFileSave = undefined,
             ]
         },
     ], [tmTreeSelectorElement, tmRecentsManagerElement, tmFormElement, currentTID, mruTIDs]);
-    return (_jsx(TMPanelManagerProvider, { panels: initialPanels, initialVisibility: allInitialPanelVisibility, defaultDimensions: initialPanelDimensions, initialDimensions: initialPanelDimensions, initialMobilePanelId: 'tmRecentsManager', children: _jsx(TMPanelManagerContainer, { panels: initialPanels, direction: "horizontal", showToolbar: true }) }));
+    return (_jsx(TMPanelManagerProvider, { panels: initialPanels, initialVisibility: allInitialPanelVisibility, defaultDimensions: initialPanelDimensions, initialDimensions: initialPanelDimensions, initialMobilePanelId: inputTID ? 'tmDcmtForm' : 'tmRecentsManager', children: _jsx(TMPanelManagerContainer, { panels: initialPanels, direction: "horizontal", showToolbar: true }) }));
 };
 export default TMArchive;
 const TMTreeSelectorWrapper = ({ isMobile, onSelectedTIDChanged }) => {

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

@@ -11,7 +11,7 @@ import { handleArchiveVisibility, searchResultToMetadataValues } from '../../../
 import { genUniqueId, IconShow, SDKUI_Localizator, updateMruTids, IconBoard, IconDcmtTypeSys, IconDetailDcmts, svgToString, IconDownload, calcIsModified, IconMenuVertical, Globalization, getListMaxItems, getSystemMetadata, IconBoxArchiveIn, IconClear, IconUndo, SDKUI_Globals, IconPreview, isTaskMoreInfo, IconWorkflow, IconZoomIn, IconZoomOut } from '../../../helper';
 import { hasDetailRelations, hasMasterRelations, isXMLFileExt } from '../../../helper/dcmtsHelper';
 import { Gutters, TMColors } from '../../../utils/theme';
-import { StyledClickableIconWrapper, StyledFormButtonsContainer, StyledModalContainer, StyledToolbarCardContainer } from '../../base/Styled';
+import { StyledClickableIconWrapper, StyledFormButtonsContainer, StyledLoadingContainer, StyledModalContainer, StyledSpinner, StyledToolbarCardContainer } from '../../base/Styled';
 import ShowAlert from '../../base/TMAlert';
 import TMButton from '../../base/TMButton';
 import { TMExceptionBoxManager, TMMessageBoxManager, ButtonNames } from '../../base/TMPopUp';
@@ -70,6 +70,7 @@ const TMDcmtForm = ({ showHeader = true, onSaveRecents, layoutMode = LayoutModes
     const [focusedMetadataValue, setFocusedMetadataValue] = useState();
     const [showAll, setShowAll] = useState(layoutMode === LayoutModes.Ark);
     const [fetchError, setFetchError] = useState(false);
+    const [isWFDataLoading, setIsWFDataLoading] = useState(false);
     const [workItems, setWorkItems] = useState([]);
     const [workflows, setWorkflows] = useState([]);
     const [showCommentForm, setShowCommentForm] = useState(false);
@@ -210,10 +211,12 @@ const TMDcmtForm = ({ showHeader = true, onSaveRecents, layoutMode = LayoutModes
             return;
         if (!DID) {
             setWorkItems([]);
+            setWorkflows([]); // Assicurati di pulire anche i workflows
             return;
         }
+        setIsWFDataLoading(true);
         let items = [];
-        // Cerchiamo tutti i workitem(S) associati al DID corrente (potrebbero esserci più istanze di workflow)
+        // Cerchiamo tutti i workitem(S) associati al DID corrente...
         for (const workflow of workflowApproveData) {
             for (const dataRow of workflow.dtdResult?.rows ?? []) {
                 let did = Number(dataRow?.[1]);
@@ -225,12 +228,15 @@ const TMDcmtForm = ({ showHeader = true, onSaveRecents, layoutMode = LayoutModes
                 }
             }
         }
-        setWorkItems(items);
-        // Attendi tutte le chiamate async e aggiorna lo stato solo quando tutte sono terminate
+        // Attendi tutte le chiamate async...
         Promise.all(items.map(item => WorkflowCacheService.GetWFInfoAsync(item.tid)))
             .then(results => {
             // Filtra solo i workflow validi
             setWorkflows(results.filter(Boolean));
+        })
+            .finally(() => {
+            setWorkItems(items);
+            setIsWFDataLoading(false);
         });
     }, [workflowApproveData, DID, layoutMode]);
     const getSelectionDcmtInfo = () => {
@@ -508,6 +514,16 @@ const TMDcmtForm = ({ showHeader = true, onSaveRecents, layoutMode = LayoutModes
             setDcmtFile(setFile);
         } }), [currentDcmt, dcmtFile, deviceType, fromDTD, layoutMode, inputFile]);
     const tmWF = useMemo(() => {
+        if (isWFDataLoading) {
+            return (_jsx("div", { style: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    width: '100%',
+                    height: '100%',
+                    minHeight: '200px' // Evita salti nel layout
+                }, children: _jsxs(StyledLoadingContainer, { children: [_jsx(StyledSpinner, {}), _jsx("span", { children: `${'Caricamento dati workflow'}...` })] }) }));
+        }
         return (_jsxs("div", { style: { position: 'relative', width: '100%', height: '100%', display: 'flex', flexDirection: 'column', gap: 3 }, children: [workItems.length > 0
                     ? _jsx(WFDiagram, { xmlDiagramString: workflows?.[0]?.diagram || '', currentSetID: WIsetIdValue, readOnly: true, zoomLevel: zoomLevel, translateX: 0, translateY: 0 })
                     : _jsx("div", { style: {

package/lib/components/features/workflow/diagram/WFDiagram.js

@@ -11,6 +11,7 @@ import { calculateArrowAngle, getConnectionPoint, isConnectionNonLinear, validat
 import { IconFlowChart, IconUndo, IconRestore, IconAdjust, IconCopy, IconCut, IconPaste, IconPin, IconUnpin, IconChevronRight, IconCloseOutline, IconNew, SDKUI_Localizator } from '../../../../helper';
 import TMModal from '../../../base/TMModal';
 import { TMExceptionBoxManager } from '../../../base/TMPopUp';
+import { StyledLoadingContainer, StyledSpinner } from '../../../base/Styled';
 const CanvasContainer = styled.div `
   position: relative;
   width: 100%;
@@ -201,6 +202,7 @@ const DiagramMessage = styled.div `
   text-align: center;
 `;
 const WFDiagram = ({ xmlDiagramString, currentSetID, readOnly = false, zoomLevel = 1, translateX = 0, translateY = 0 }) => {
+    const [isLoading, setIsLoading] = useState(true);
     const [wfDiagram, setWfDiagram] = useState(null);
     const [selectedItems, setSelectedItems] = useState(new Set());
     const [selectedConnections, setSelectedConnections] = useState(new Set());
@@ -265,18 +267,33 @@ const WFDiagram = ({ xmlDiagramString, currentSetID, readOnly = false, zoomLevel
         return { svgWidth: Math.max(0, totalWidth * zoomLevel), svgHeight: Math.max(0, totalHeight * zoomLevel) };
     }, [wfDiagram, zoomLevel]);
     useEffect(() => {
-        let newDiagram = null;
-        if (xmlDiagramString) {
-            newDiagram = parseWfDiagramXml(xmlDiagramString);
-            if (newDiagram) {
-                // Applica l'auto-aggiustamento subito dopo il parsing
-                newDiagram = autoAdjustDiagram(newDiagram);
+        setIsLoading(true); // Imposta il caricamento all'avvio dell'effetto
+        const processDiagram = () => {
+            try {
+                let newDiagram = null;
+                if (xmlDiagramString) {
+                    newDiagram = parseWfDiagramXml(xmlDiagramString);
+                    if (newDiagram) {
+                        newDiagram = autoAdjustDiagram(newDiagram);
+                    }
+                }
+                setWfDiagram(newDiagram);
+                initialDiagramRef.current = newDiagram;
+                setWfDiagramHistory(newDiagram ? [newDiagram] : []);
+                setHistoryIndex(newDiagram ? 0 : -1);
             }
-        }
-        setWfDiagram(newDiagram);
-        initialDiagramRef.current = newDiagram;
-        setWfDiagramHistory(newDiagram ? [newDiagram] : []);
-        setHistoryIndex(newDiagram ? 0 : -1);
+            catch (error) {
+                console.error("Errore durante l'elaborazione del diagramma:", error);
+                setWfDiagram(null); // Assicurati che il diagramma sia nullo in caso di errore
+            }
+            finally {
+                setIsLoading(false); // Termina il caricamento, sia in caso di successo che di errore
+            }
+        };
+        // Utilizziamo un timeout di 0ms per consentire a React di renderizzare lo stato di caricamento
+        // prima di eseguire il calcolo potenzialmente pesante, evitando che il browser si blocchi.
+        const timerId = setTimeout(processDiagram, 0);
+        return () => clearTimeout(timerId); // Pulisce il timeout se il componente viene smontato
     }, [xmlDiagramString]);
     useEffect(() => {
         if (isUndoingRedoing.current) {
@@ -1322,7 +1339,7 @@ const WFDiagram = ({ xmlDiagramString, currentSetID, readOnly = false, zoomLevel
             // DiagramItemTypes.SignAndTimeStamp
         ];
     }, []);
-    return (_jsxs(CanvasContainer, { children: [!readOnly && (_jsxs(ToolbarContainer, { "$isCollapsed": isToolbarCollapsed, "$isFloating": isToolbarFloating, "$isToolboxVisible": isToolboxVisible, children: [_jsx(ButtonGroup, { "$isFloating": isToolbarFloating, children: _jsxs("button", { onClick: handleToggleToolboxVisibility, title: "Show toolbox", children: [_jsx(IconFlowChart, {}), !isToolbarCollapsed && _jsx("span", { children: "Mostra/nascondi toolbox" })] }) }), _jsxs(ButtonGroup, { "$isFloating": isToolbarFloating, children: [_jsxs("button", { onClick: handleUndo, disabled: historyIndex === 0, title: "Undo", children: [_jsx(IconUndo, {}), " ", !isToolbarCollapsed && _jsx("span", { children: "Undo" })] }), _jsxs("button", { onClick: handleRedo, disabled: historyIndex === wfDiagramHistory.length - 1, title: "Redo", children: [_jsx(IconUndo, { style: { transform: 'scaleX(-1)' } }), " ", !isToolbarCollapsed && _jsx("span", { children: "Redo" })] }), _jsxs("button", { onClick: handleRestore, title: "Restore", children: [_jsx(IconRestore, {}), " ", !isToolbarCollapsed && _jsx("span", { children: "Restore" })] }), _jsxs("button", { onClick: handleNew, title: "New diagram", disabled: readOnly, children: [_jsx(IconNew, {}), " ", !isToolbarCollapsed && _jsx("span", { children: "New" })] })] }), _jsx(ButtonGroup, { "$isFloating": isToolbarFloating, children: _jsxs("button", { onClick: handleAutoAdjust, title: "Auto adjust", children: [_jsx(IconAdjust, {}), " ", !isToolbarCollapsed && _jsx("span", { children: "Auto Adjust" })] }) }), _jsxs(ButtonGroup, { "$isFloating": isToolbarFloating, children: [_jsxs("button", { onClick: handleCopy, disabled: selectedItems.size === 0, title: "Copy", children: [_jsx(IconCopy, {}), " ", !isToolbarCollapsed && _jsx("span", { children: "Copy" })] }), _jsxs("button", { onClick: handleCut, disabled: selectedItems.size === 0, title: "Cut", children: [_jsx(IconCut, {}), " ", !isToolbarCollapsed && _jsx("span", { children: "Cut" })] }), _jsxs("button", { onClick: handlePaste, disabled: copiedItems.length === 0 && copiedConnections.length === 0, title: "Paste", children: [_jsx(IconPaste, {}), " ", !isToolbarCollapsed && _jsx("span", { children: "Paste" })] })] }), _jsxs("button", { onClick: handleToggleToolbarMode, title: isToolbarFloating ? "Dock Toolbar" : "Float Toolbar", children: [isToolbarFloating ? _jsx(IconPin, {}) : _jsx(IconUnpin, {}), !isToolbarCollapsed && !isToolbarFloating && _jsx("span", { children: "Toggle Mode" })] }), !isToolbarFloating && _jsx(ToolbarToggle, { onClick: () => setIsToolbarCollapsed(!isToolbarCollapsed), title: isToolbarCollapsed ? "Expand Toolbar" : "Collapse Toolbar", children: isToolbarCollapsed ? _jsx(IconChevronRight, {}) : _jsx(IconCloseOutline, {}) })] })), !readOnly && (_jsx(ToolboxContainer, { "$isVisible": isToolboxVisible, children: isToolboxVisible && availableItemTypes.map(type => (_jsxs(ToolboxItem, { draggable: true, onDragStart: (e) => handleToolboxDragStart(e, type), onDragEnd: handleToolboxDragEnd, children: [_jsx(DiagramItemSvgContent, { itemType: type, width: 40, height: 40, isToolboxPreview: true }), _jsx("span", { children: DiagramItemTypes[type] })] }, type))) })), _jsx(SvgScrollContainer, { children: wfDiagram ? (_jsx(StyledSvg, { ref: svgRef, onMouseMove: handleMouseMove, onMouseUp: handleMouseUp, onMouseDown: handleMouseDown, onDrop: handleDropOnCanvas, onDragOver: handleDragOver, width: svgWidth, height: svgHeight, children: _jsxs(ScalableGroup, { "$scale": zoomLevel, "$translateX": translateX, "$translateY": translateY, children: [wfDiagram?.DiagramItems.map(item => (_jsx(DiagramItemComponent, { readOnly: readOnly, item: item, isSelected: selectedItems.has(item.ID), isCurrent: item.ID === currentSetID, onClick: handleDiagramItemClick, onDrag: handleDrag, onDragEnd: handleDragEnd, onConnectorMouseDown: handleConnectorMouseDown, onConnectorMouseUp: handleConnectorMouseUp, onDimensionsChange: handleItemDimensionsChange, onDoubleClick: handleDoubleClickItem }, item.ID))), calculatedConnections.map(connection => {
+    return (_jsxs(CanvasContainer, { children: [!readOnly && (_jsxs(ToolbarContainer, { "$isCollapsed": isToolbarCollapsed, "$isFloating": isToolbarFloating, "$isToolboxVisible": isToolboxVisible, children: [_jsx(ButtonGroup, { "$isFloating": isToolbarFloating, children: _jsxs("button", { onClick: handleToggleToolboxVisibility, title: "Show toolbox", children: [_jsx(IconFlowChart, {}), !isToolbarCollapsed && _jsx("span", { children: "Mostra/nascondi toolbox" })] }) }), _jsxs(ButtonGroup, { "$isFloating": isToolbarFloating, children: [_jsxs("button", { onClick: handleUndo, disabled: historyIndex === 0, title: "Undo", children: [_jsx(IconUndo, {}), " ", !isToolbarCollapsed && _jsx("span", { children: "Undo" })] }), _jsxs("button", { onClick: handleRedo, disabled: historyIndex === wfDiagramHistory.length - 1, title: "Redo", children: [_jsx(IconUndo, { style: { transform: 'scaleX(-1)' } }), " ", !isToolbarCollapsed && _jsx("span", { children: "Redo" })] }), _jsxs("button", { onClick: handleRestore, title: "Restore", children: [_jsx(IconRestore, {}), " ", !isToolbarCollapsed && _jsx("span", { children: "Restore" })] }), _jsxs("button", { onClick: handleNew, title: "New diagram", disabled: readOnly, children: [_jsx(IconNew, {}), " ", !isToolbarCollapsed && _jsx("span", { children: "New" })] })] }), _jsx(ButtonGroup, { "$isFloating": isToolbarFloating, children: _jsxs("button", { onClick: handleAutoAdjust, title: "Auto adjust", children: [_jsx(IconAdjust, {}), " ", !isToolbarCollapsed && _jsx("span", { children: "Auto Adjust" })] }) }), _jsxs(ButtonGroup, { "$isFloating": isToolbarFloating, children: [_jsxs("button", { onClick: handleCopy, disabled: selectedItems.size === 0, title: "Copy", children: [_jsx(IconCopy, {}), " ", !isToolbarCollapsed && _jsx("span", { children: "Copy" })] }), _jsxs("button", { onClick: handleCut, disabled: selectedItems.size === 0, title: "Cut", children: [_jsx(IconCut, {}), " ", !isToolbarCollapsed && _jsx("span", { children: "Cut" })] }), _jsxs("button", { onClick: handlePaste, disabled: copiedItems.length === 0 && copiedConnections.length === 0, title: "Paste", children: [_jsx(IconPaste, {}), " ", !isToolbarCollapsed && _jsx("span", { children: "Paste" })] })] }), _jsxs("button", { onClick: handleToggleToolbarMode, title: isToolbarFloating ? "Dock Toolbar" : "Float Toolbar", children: [isToolbarFloating ? _jsx(IconPin, {}) : _jsx(IconUnpin, {}), !isToolbarCollapsed && !isToolbarFloating && _jsx("span", { children: "Toggle Mode" })] }), !isToolbarFloating && _jsx(ToolbarToggle, { onClick: () => setIsToolbarCollapsed(!isToolbarCollapsed), title: isToolbarCollapsed ? "Expand Toolbar" : "Collapse Toolbar", children: isToolbarCollapsed ? _jsx(IconChevronRight, {}) : _jsx(IconCloseOutline, {}) })] })), !readOnly && (_jsx(ToolboxContainer, { "$isVisible": isToolboxVisible, children: isToolboxVisible && availableItemTypes.map(type => (_jsxs(ToolboxItem, { draggable: true, onDragStart: (e) => handleToolboxDragStart(e, type), onDragEnd: handleToolboxDragEnd, children: [_jsx(DiagramItemSvgContent, { itemType: type, width: 40, height: 40, isToolboxPreview: true }), _jsx("span", { children: DiagramItemTypes[type] })] }, type))) })), _jsx(SvgScrollContainer, { children: isLoading ? (_jsxs(StyledLoadingContainer, { children: [_jsx(StyledSpinner, {}), _jsx("span", { children: `${'Caricamento diagramma'}...` })] })) : wfDiagram ? (_jsx(StyledSvg, { ref: svgRef, onMouseMove: handleMouseMove, onMouseUp: handleMouseUp, onMouseDown: handleMouseDown, onDrop: handleDropOnCanvas, onDragOver: handleDragOver, width: svgWidth, height: svgHeight, children: _jsxs(ScalableGroup, { "$scale": zoomLevel, "$translateX": translateX, "$translateY": translateY, children: [wfDiagram?.DiagramItems.map(item => (_jsx(DiagramItemComponent, { readOnly: readOnly, item: item, isSelected: selectedItems.has(item.ID), isCurrent: item.ID === currentSetID, onClick: handleDiagramItemClick, onDrag: handleDrag, onDragEnd: handleDragEnd, onConnectorMouseDown: handleConnectorMouseDown, onConnectorMouseUp: handleConnectorMouseUp, onDimensionsChange: handleItemDimensionsChange, onDoubleClick: handleDoubleClickItem }, item.ID))), calculatedConnections.map(connection => {
                                 const sourceItem = wfDiagram?.DiagramItems.find(item => item.ID === connection.Source.ParentDiagramItem.ID);
                                 const sinkItem = wfDiagram?.DiagramItems.find(item => item.ID === connection.Sink.ParentDiagramItem.ID);
                                 if (!sourceItem || !sinkItem)

package/package.json

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