@topconsultnpm/sdkui-react 6.20.0-dev1.64 → 6.20.0-dev1.66

package/lib/components/base/TMDropDownMenu.js

@@ -1,9 +1,8 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useState, forwardRef, useRef, useImperativeHandle } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useRef, useImperativeHandle } from 'react';
 import styled from 'styled-components';
 import { ContextMenu as TMContextMenu } from '../NewComponents/ContextMenu';
 import { TMColors } from '../../utils/theme';
-import { genUniqueId } from '../../helper';
 const StyledContent = styled.div `
     cursor: pointer;
     border-radius: ${props => props.$borderRadius};
@@ -23,9 +22,7 @@ const StyledContent = styled.div `
     }
 `;
 const TMDropDownMenu = forwardRef(({ content, items, disabled = false, color = TMColors.text_normal, backgroundColor = TMColors.default_background, borderRadius, onMenuShown }, ref) => {
-    const [id, setID] = useState('');
-    const dropDownMenuElementRef = useRef(null); // Ref all'elemento DOM div principale
-    useEffect(() => { setID(genUniqueId()); }, [content]);
+    const dropDownMenuElementRef = useRef(null);
     useImperativeHandle(ref, () => ({
         focus: () => {
             dropDownMenuElementRef.current?.focus();
@@ -44,19 +41,6 @@ const TMDropDownMenu = forwardRef(({ content, items, disabled = false, color = T
             submenu: item.items ? convertToContextMenuItems(item.items) : undefined,
         }));
     };
-    const [menuVisible, setMenuVisible] = useState(false);
-    const handleMenuOpen = () => {
-        setMenuVisible(true);
-        onMenuShown?.();
-    };
-    const handleMenuClose = () => {
-        setMenuVisible(false);
-        dropDownMenuElementRef.current?.focus();
-    };
-    return (_jsxs(_Fragment, { children: [_jsx(StyledContent, { id: `idContainer${id}`, ref: dropDownMenuElementRef, tabIndex: disabled ? -1 : 0, "$disabled": disabled, "$color": color, "$backgroundColor": backgroundColor, "$borderRadius": borderRadius, onClick: !disabled ? handleMenuOpen : undefined, children: content }), _jsx(TMContextMenu, { items: convertToContextMenuItems(items), target: `#idContainer${id}`, trigger: "left", externalControl: {
-                    visible: menuVisible,
-                    position: { x: 0, y: 0 },
-                    onClose: handleMenuClose,
-                } })] }));
+    return (_jsx(TMContextMenu, { items: convertToContextMenuItems(items), trigger: "left", children: _jsx(StyledContent, { ref: dropDownMenuElementRef, tabIndex: disabled ? -1 : 0, "$disabled": disabled, "$color": color, "$backgroundColor": backgroundColor, "$borderRadius": borderRadius, children: content }) }));
 });
 export default TMDropDownMenu;

package/lib/components/features/workflow/TMWorkflowPopup.js

@@ -183,7 +183,7 @@ export const WorkflowForceApproveModal = ({ detail, onClose, onCompleted }) => {
     const forceApproveAsync = async () => {
         try {
             TMSpinner.show({ description: 'Forza approvazione in corso...' });
-            await SDK_Globals.tmSession?.NewWorkflowEngine().WFCtrl_ForceWIAsync(detail.tid, detail.did, WFEvents.AfterBtnApprove01, commentValue);
+            await SDK_Globals.tmSession?.NewWorkflowEngine().WFCtrl_ForceWIAsync(detail.wfid, detail.did, WFEvents.AfterBtnApprove01, commentValue);
             ShowAlert({
                 mode: 'success',
                 position: 'TOP_RIGHT',
@@ -214,7 +214,7 @@ export const WorkflowForceRejectModal = ({ detail, onClose, onCompleted }) => {
     const forceRejectAsync = async () => {
         try {
             TMSpinner.show({ description: 'Forza rifiuto in corso...' });
-            await SDK_Globals.tmSession?.NewWorkflowEngine().WFCtrl_ForceWIAsync(detail.tid, detail.did, WFEvents.AfterBtnReject01, commentValue);
+            await SDK_Globals.tmSession?.NewWorkflowEngine().WFCtrl_ForceWIAsync(detail.wfid, detail.did, WFEvents.AfterBtnReject01, commentValue);
             ShowAlert({
                 mode: 'success',
                 position: 'TOP_RIGHT',

package/lib/components/features/workflow/diagram/DiagramItemComponent.d.ts

@@ -13,6 +13,7 @@ interface DiagramItemComponentProps {
     onConnectorMouseUp: (itemId: string, connectorName: string) => void;
     onDimensionsChange: (itemId: string, width: number, height: number) => void;
     onDoubleClick?: (id: string) => void;
+    backgroundColor?: string;
 }
 declare const _default: React.NamedExoticComponent<DiagramItemComponentProps>;
 export default _default;

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

@@ -42,7 +42,6 @@ const StyledDiagramItem = styled.g `
   filter: ${props => (props.$isSelected || props.$isDragging || props.$isHovered ? 'drop-shadow(2px 4px 6px rgba(0,0,0,0.4))' : 'none')};
   
   & .item-main-shape {
-    fill: transparent;
     stroke: ${props => {
     if (props.$isDragging)
         return '#ffc107';
@@ -82,7 +81,7 @@ const ConnectorHitArea = styled.circle `
   opacity: 0;
   pointer-events: all;
 `;
-const DiagramItemComponent = ({ wf, item, isSelected, isCurrent, readOnly, onClick, onDrag, onDragEnd, onConnectorMouseDown, onConnectorMouseUp, onDimensionsChange, onDoubleClick, }) => {
+const DiagramItemComponent = ({ wf, item, isSelected, isCurrent, readOnly, onClick, onDrag, onDragEnd, onConnectorMouseDown, onConnectorMouseUp, onDimensionsChange, onDoubleClick, backgroundColor, }) => {
     const diagramItemRef = useRef(null);
     const textRef = useRef(null);
     const [isDragging, setIsDragging] = useState(false);
@@ -257,7 +256,7 @@ const DiagramItemComponent = ({ wf, item, isSelected, isCurrent, readOnly, onCli
                 isTruncated = textLines[textLines.length - 1].endsWith('...');
             }
         }
-        return (_jsxs(_Fragment, { children: [isTruncated && _jsx("title", { children: item.ItemName }), _jsx("rect", { x: "0", y: "0", width: calculatedWidth, height: calculatedHeight, className: "item-main-shape" }), _jsx("g", { transform: `translate(${svgX}, ${svgY})`, children: _jsx(DiagramItemSvgContent, { itemType: item.Type, width: iconRenderWidth, height: iconRenderHeight, statusData: statusData }) }), textLines.length > 0 && (_jsx("text", { ref: textRef, x: calculatedWidth / 2, dominantBaseline: "central", className: "item-text", children: textLines.map((line, index) => (_jsx("tspan", { x: calculatedWidth / 2, dy: index === 0 ? PADDING_TOP + SVG_ICON_SIZE + SPACING_SVG_TEXT : FONT_SIZE + 1, children: line }, index))) })), connectors] }));
+        return (_jsxs(_Fragment, { children: [isTruncated && _jsx("title", { children: item.ItemName }), backgroundColor && (_jsx("rect", { x: "-5", y: "-5", width: calculatedWidth + 10, height: calculatedHeight + 10, rx: "12", ry: "12", fill: backgroundColor, opacity: "0.4", style: { filter: 'blur(3px)' } })), _jsx("rect", { x: "0", y: "0", width: calculatedWidth, height: calculatedHeight, className: "item-main-shape", fill: "transparent" }), _jsx("g", { transform: `translate(${svgX}, ${svgY})`, children: _jsx(DiagramItemSvgContent, { itemType: item.Type, width: iconRenderWidth, height: iconRenderHeight, statusData: statusData }) }), textLines.length > 0 && (_jsx("text", { ref: textRef, x: calculatedWidth / 2, dominantBaseline: "central", className: "item-text", children: textLines.map((line, index) => (_jsx("tspan", { x: calculatedWidth / 2, dy: index === 0 ? PADDING_TOP + SVG_ICON_SIZE + SPACING_SVG_TEXT : FONT_SIZE + 1, children: line }, index))) })), connectors] }));
     };
     return (_jsx(StyledDiagramItem, { ref: diagramItemRef, transform: `translate(${currentPosition.x}, ${currentPosition.y})`, "$isSelected": isSelected, "$itemType": item.Type, "$isDragging": isDragging, "$isHovered": isHovered, "$isReadOnly": readOnly, onMouseDown: handleMouseDown, onClick: handleItemClick, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onDoubleClick: handleDoubleClick, children: _jsx(AnimatingGroup, { "$isCurrent": isCurrent, children: renderContent() }) }));
 };

package/lib/components/features/workflow/diagram/WFDiagram.d.ts

@@ -1,9 +1,11 @@
 import React from 'react';
+import { IWorkItemData } from '../../../../ts/types';
 interface IWFDiagramProps {
     xmlDiagramString: string;
     currentSetID?: string;
     allowEdit?: boolean;
     onDiagramChange?: (newXmlDiagram: string) => void;
+    workitems?: IWorkItemData[];
 }
 declare const WFDiagram: React.FC<IWFDiagramProps>;
 export default WFDiagram;

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

@@ -317,7 +317,7 @@ const DiagramMessage = styled.div `
   color: #555;
   text-align: center;
 `;
-const WFDiagram = ({ xmlDiagramString, currentSetID, allowEdit = true, onDiagramChange }) => {
+const WFDiagram = ({ xmlDiagramString, currentSetID, allowEdit = true, onDiagramChange, workitems }) => {
     const [isReadOnly, setIsReadOnly] = useState(true);
     const [isFullScreen, setIsFullScreen] = useState(false);
     const [zoomLevel, setZoomLevel] = useState(1);
@@ -338,6 +338,23 @@ const WFDiagram = ({ xmlDiagramString, currentSetID, allowEdit = true, onDiagram
     const [tempConnectionEnd, setTempConnectionEnd] = useState(null);
     const [mouseDownPos, setMouseDownPos] = useState(null);
     const [isDraggingExistingConnectionEndpoint, setIsDraggingExistingConnectionEndpoint] = useState(false);
+    // Helper function per ottenere il colore di sfondo basato sullo stato del workitem
+    const getWorkItemBackgroundColor = useCallback((setID) => {
+        if (!workitems || workitems.length === 0)
+            return undefined;
+        const workitem = workitems.find(wi => wi.setID === setID);
+        if (!workitem || !workitem.setStatus || workitem.setStatus.value === undefined)
+            return undefined;
+        const statusValue = typeof workitem.setStatus.value === 'number'
+            ? workitem.setStatus.value
+            : parseInt(String(workitem.setStatus.value), 10);
+        switch (statusValue) {
+            case 0: return '#FFFACD'; // Giallo pastello (lemon chiffon) (nuovo)
+            case 1: return '#C8E6C9'; // Verde pastello (completato)
+            case -1: return '#FFCDD2'; // Rosso pastello (rifiutato)
+            default: return '#e0e0e0'; // Grigio di default
+        }
+    }, [workitems]);
     const [draggingConnectionId, setDraggingConnectionId] = useState(null);
     const [draggingEndpointType, setDraggingEndpointType] = useState(null);
     const [draggingConnectionFixedPoint, setDraggingConnectionFixedPoint] = useState(null);
@@ -1680,7 +1697,7 @@ const WFDiagram = ({ xmlDiagramString, currentSetID, allowEdit = true, onDiagram
     }, [isFullScreen]);
     const diagramContent = (_jsxs(CanvasContainer, { onDoubleClick: handleCanvasDoubleClick, children: [_jsx("input", { ref: fileInputRef, type: "file", accept: ".xml" // Filtra per file XML
                 , onChange: handleFileChange, style: { display: 'none' } }), _jsxs(ToolbarContainer, { "$isCollapsed": isToolbarCollapsed, "$isFloating": isToolbarFloating, "$isToolboxVisible": isToolboxVisible, "$isReadOnly": isReadOnly, children: [allowEdit && _jsx(ButtonGroup, { "$isFloating": isToolbarFloating, children: _jsxs("button", { onClick: toggleReadOnlyMode, title: isReadOnly ? SDKUI_Localizator.Design : SDKUI_Localizator.ReadOnly, children: [isReadOnly ? _jsx(IconPencil, {}) : _jsx(IconLock, {}), !isToolbarCollapsed && _jsx("span", { children: isReadOnly ? SDKUI_Localizator.Design : SDKUI_Localizator.ReadOnly })] }) }), allowEdit && _jsxs(ButtonGroup, { "$isFloating": isToolbarFloating, children: [!isReadOnly && _jsxs("button", { onClick: handleToggleToolboxVisibility, title: SDKUI_Localizator.ShowToolbox, children: [_jsx(IconFlowChart, {}), !isToolbarCollapsed && _jsx("span", { children: SDKUI_Localizator.ShowToolboxToggle })] }), _jsxs("button", { onClick: toggleFullScreenMode, title: SDKUI_Localizator.ShowFullScreen, children: [isFullScreen ? _jsx(IconWindowMinimize, {}) : _jsx(IconWindowMaximize, {}), !isToolbarCollapsed && _jsx("span", { children: SDKUI_Localizator.ShowFullScreen })] })] }), _jsxs(ButtonGroup, { "$isFloating": isToolbarFloating, children: [_jsxs("button", { onClick: handleZoomIn, title: SDKUI_Localizator.ZoomIn, children: [_jsx(IconZoomIn, {}), !isToolbarCollapsed && _jsx("span", { children: SDKUI_Localizator.ZoomIn })] }), _jsxs("button", { onClick: handleZoomOut, title: SDKUI_Localizator.ZoomOut, children: [_jsx(IconZoomOut, {}), !isToolbarCollapsed && _jsx("span", { children: SDKUI_Localizator.ZoomOut })] }), _jsx(ZoomLevelText, { "$isFloating": isToolbarFloating, "$isCollapsed": isToolbarCollapsed, children: formattedZoomLevel })] }), !isReadOnly && _jsxs(ButtonGroup, { "$isFloating": isToolbarFloating, children: [_jsxs("button", { onClick: handleUndo, disabled: historyIndex === 0, title: SDKUI_Localizator.Undo, children: [_jsx(IconUndo, {}), " ", !isToolbarCollapsed && _jsx("span", { children: SDKUI_Localizator.Undo })] }), _jsxs("button", { onClick: handleRedo, disabled: historyIndex === wfDiagramHistory.length - 1, title: SDKUI_Localizator.Redo, children: [_jsx(IconUndo, { style: { transform: 'scaleX(-1)' } }), " ", !isToolbarCollapsed && _jsx("span", { children: SDKUI_Localizator.Redo })] }), _jsxs("button", { onClick: handleRestore, title: SDKUI_Localizator.Restore, children: [_jsx(IconRestore, {}), " ", !isToolbarCollapsed && _jsx("span", { children: SDKUI_Localizator.Restore })] }), _jsxs("button", { onClick: handleNew, title: SDKUI_Localizator.DiagramNew, disabled: isReadOnly, children: [_jsx(IconNew, {}), " ", !isToolbarCollapsed && _jsx("span", { children: SDKUI_Localizator.DiagramNew })] }), _jsxs("button", { onClick: handleExportDiagram, disabled: isReadOnly || !wfDiagram, title: SDKUI_Localizator.Export, children: [_jsx(IconExport, {}), _jsx("span", { children: SDKUI_Localizator.Export })] }), _jsxs("button", { onClick: handleImportDiagramClick, disabled: isReadOnly, title: SDKUI_Localizator.Import, children: [_jsx(IconImport, {}), _jsx("span", { children: SDKUI_Localizator.Import })] })] }), !isReadOnly && _jsx(ButtonGroup, { "$isFloating": isToolbarFloating, children: _jsxs("button", { onClick: handleAutoAdjust, title: SDKUI_Localizator.AutoAdjust, children: [_jsx(IconAdjust, {}), " ", !isToolbarCollapsed && _jsx("span", { children: SDKUI_Localizator.AutoAdjust })] }) }), !isReadOnly && _jsxs(ButtonGroup, { "$isFloating": isToolbarFloating, children: [_jsxs("button", { onClick: handleCopy, disabled: selectedItems.size === 0, title: SDKUI_Localizator.Copy, children: [_jsx(IconCopy, {}), " ", !isToolbarCollapsed && _jsx("span", { children: SDKUI_Localizator.Copy })] }), _jsxs("button", { onClick: handleCut, disabled: selectedItems.size === 0, title: SDKUI_Localizator.Cut, children: [_jsx(IconCut, {}), " ", !isToolbarCollapsed && _jsx("span", { children: SDKUI_Localizator.Cut })] }), _jsxs("button", { onClick: handlePaste, disabled: copiedItems.length === 0 && copiedConnections.length === 0, title: SDKUI_Localizator.Paste, children: [_jsx(IconPaste, {}), " ", !isToolbarCollapsed && _jsx("span", { children: SDKUI_Localizator.Paste })] })] }), allowEdit && _jsxs("button", { onClick: handleToggleToolbarMode, title: isToolbarFloating ? SDKUI_Localizator.ToolbarDock : SDKUI_Localizator.ToolbarFloat, children: [isToolbarFloating ? _jsx(IconPin, {}) : _jsx(IconUnpin, {}), !isToolbarCollapsed && !isToolbarFloating && _jsx("span", { children: SDKUI_Localizator.ToggleMode })] }), !isToolbarFloating && _jsx(ToolbarToggle, { onClick: () => setIsToolbarCollapsed(!isToolbarCollapsed), title: isToolbarCollapsed ? SDKUI_Localizator.ToolbarExpand : SDKUI_Localizator.ToolbarCollapse, children: isToolbarCollapsed ? _jsx(IconChevronRight, {}) : _jsx(IconCloseOutline, {}) })] }), !isReadOnly && (_jsx(ToolboxContainer, { "$isVisible": isToolboxVisible, children: isToolboxVisible && availableItemTypes.map(type => (_jsxs(ToolboxItem, { draggable: true, onDragStart: (e) => handleToolboxDragStart(e, type), onDragEnd: handleToolboxDragEnd, children: [_jsx(ToolboxIconWrapper, { children: _jsx(DiagramItemSvgContent, { itemType: type, width: 38, height: 38, isToolboxPreview: true }) }), _jsx("span", { children: LocalizeDiagramItemType(type) })] }, type))) })), _jsx(SvgScrollContainer, { children: isLoading ?
-                    (_jsxs(StyledLoadingContainer, { children: [_jsx(StyledSpinner, {}), _jsx("span", { children: `${'Caricamento diagramma'}...` })] })) : wfDiagram ? (_jsx(StyledSvg, { ref: svgRef, tabIndex: 0, onKeyDownCapture: handleKeyDown, 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, { wf: wfDiagram?.Info, readOnly: isReadOnly, 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 => {
+                    (_jsxs(StyledLoadingContainer, { children: [_jsx(StyledSpinner, {}), _jsx("span", { children: `${'Caricamento diagramma'}...` })] })) : wfDiagram ? (_jsx(StyledSvg, { ref: svgRef, tabIndex: 0, onKeyDownCapture: handleKeyDown, 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, { wf: wfDiagram?.Info, readOnly: isReadOnly, 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, backgroundColor: getWorkItemBackgroundColor(item.ID) }, 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/lib/ts/types.d.ts

@@ -339,6 +339,8 @@ export interface WorkItemDetail {
     wid: string;
     tid: number;
     did: number;
+    wfid: number;
+    approvalVID: number;
     status?: DataListItemDescriptor;
     setID: string;
     response?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@topconsultnpm/sdkui-react",
-  "version": "6.20.0-dev1.64",
+  "version": "6.20.0-dev1.66",
   "description": "",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
@@ -40,7 +40,7 @@
     "lib"
   ],
   "dependencies": {
-    "@topconsultnpm/sdk-ts": "6.20.0-dev1.4",
+    "@topconsultnpm/sdk-ts": "6.20.0-dev1.5",
     "buffer": "^6.0.3",
     "devextreme": "25.1.7",
     "devextreme-react": "25.1.7",