@topconsultnpm/sdkui-react 6.20.0-dev1.97 → 6.20.0-dev1.98

package/lib/components/NewComponents/FloatingMenuBar/styles.js

@@ -37,7 +37,7 @@ export const FloatingContainer = styled.div.attrs(props => ({
     },
 })) `
   position: ${props => props.$isConstrained ? 'absolute' : 'fixed'};
-  z-index: ${props => props.$isConfigMode ? 9999 : 10000};
+  z-index: ${props => props.$isConfigMode ? 9999 : 1500};
   display: flex;
   flex-direction: ${props => props.$orientation === 'horizontal' ? 'row' : 'column'};
   align-items: center;

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

@@ -587,14 +587,12 @@ const TMDcmtForm = ({ allTasks = [], getAllTasks, deleteTaskByIdsCallback, addTa
                 return;
             }
             try {
-                // Estrai i dati necessari dal primo workItem
-                const firstWorkItem = workItems[0];
                 // Costruisci WFInstanceDescriptor dai dati disponibili
                 const wfInstance = {
                     wfid: workflows[0].id,
-                    tid: TID,
-                    did: DID,
-                    instanceId: "", // Puoi adattare questo se hai un instanceId specifico,
+                    tid: workflows[0].mtid,
+                    did: DID ? Number(DID) : 0,
+                    instanceId: undefined,
                     rowIndex: 0,
                     values: []
                 };

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

@@ -618,7 +618,7 @@ const TMSearchResult = ({ allTasks = [], getAllTasks, deleteTaskByIdsCallback, a
                                     setIsOpenBatchUpdate(false);
                                     setIsModifiedBatchUpdate(false);
                                     await refreshSelectionDataRowsAsync();
-                                }, onStatusChanged: (isModified) => { setIsModifiedBatchUpdate(isModified); } }), _jsx(TMToppyDraggableHelpCenter, { usePortal: false, isVisible: isToppyHelpCenterVisible, content: _jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: '10px' }, children: _jsx(WorkFlowOperationButtons, { deviceType: deviceType, onApprove: () => {
+                                }, onStatusChanged: (isModified) => { setIsModifiedBatchUpdate(isModified); } }), _jsx(TMToppyDraggableHelpCenter, { usePortal: true, isVisible: isToppyHelpCenterVisible, content: _jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: '10px' }, children: _jsx(WorkFlowOperationButtons, { deviceType: deviceType, onApprove: () => {
                                             setShowApprovePopup(true);
                                         }, onSignApprove: () => {
                                             handleSignApprove();

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

@@ -6,6 +6,7 @@ interface DiagramItemComponentProps {
     isSelected: boolean;
     isCurrent: boolean;
     readOnly: boolean;
+    allowItemClick?: boolean;
     onClick: (id: string, event: React.MouseEvent) => void;
     onDrag: (id: string, newX: number, newY: number) => void;
     onDragEnd: (id: string, finalX: number, finalY: number) => void;

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

@@ -38,7 +38,13 @@ const AnimatingGroup = styled.g `
     `}
 `;
 const StyledDiagramItem = styled.g `
-  cursor: ${props => (props.$isReadOnly ? 'default' : (props.$isDragging ? 'grabbing' : 'grab'))};
+  cursor: ${props => {
+    if (props.$isReadOnly && props.$allowItemClick)
+        return 'pointer';
+    if (props.$isReadOnly)
+        return 'default';
+    return props.$isDragging ? 'grabbing' : 'grab';
+}};
   filter: ${props => (props.$isSelected || props.$isDragging || props.$isHovered ? 'drop-shadow(2px 4px 6px rgba(0,0,0,0.4))' : 'none')};
   
   & .item-main-shape {
@@ -81,7 +87,7 @@ const ConnectorHitArea = styled.circle `
   opacity: 0;
   pointer-events: all;
 `;
-const DiagramItemComponent = ({ wf, item, isSelected, isCurrent, readOnly, onClick, onDrag, onDragEnd, onConnectorMouseDown, onConnectorMouseUp, onDimensionsChange, onDoubleClick, backgroundColor, }) => {
+const DiagramItemComponent = ({ wf, item, isSelected, isCurrent, readOnly, allowItemClick = false, onClick, onDrag, onDragEnd, onConnectorMouseDown, onConnectorMouseUp, onDimensionsChange, onDoubleClick, backgroundColor, }) => {
     const diagramItemRef = useRef(null);
     const textRef = useRef(null);
     const [isDragging, setIsDragging] = useState(false);
@@ -206,12 +212,12 @@ const DiagramItemComponent = ({ wf, item, isSelected, isCurrent, readOnly, onCli
         };
     }, [isDragging, handleMouseMove, handleMouseUp, readOnly]);
     const handleItemClick = useCallback((event) => {
-        if (readOnly)
+        if (readOnly && !allowItemClick)
             return;
         if (!isDragging) {
             onClick(item.ID, event);
         }
-    }, [item.ID, onClick, isDragging, readOnly]);
+    }, [item.ID, onClick, isDragging, readOnly, allowItemClick]);
     const handleMouseEnter = useCallback(() => {
         setIsHovered(true);
     }, []);
@@ -258,6 +264,6 @@ const DiagramItemComponent = ({ wf, item, isSelected, isCurrent, readOnly, onCli
         }
         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() }) }));
+    return (_jsx(StyledDiagramItem, { ref: diagramItemRef, transform: `translate(${currentPosition.x}, ${currentPosition.y})`, "$isSelected": isSelected, "$itemType": item.Type, "$isDragging": isDragging, "$isHovered": isHovered, "$isReadOnly": readOnly, "$allowItemClick": allowItemClick, onMouseDown: handleMouseDown, onClick: handleItemClick, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onDoubleClick: handleDoubleClick, children: _jsx(AnimatingGroup, { "$isCurrent": isCurrent, children: renderContent() }) }));
 };
 export default React.memo(DiagramItemComponent);

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

@@ -7,6 +7,7 @@ interface IWFDiagramProps {
     onDiagramChange?: (newXmlDiagram: string) => void;
     workitems?: IWorkItemData[];
     defaultAutoZoom?: boolean;
+    onDiagramItemClick?: (itemId: string, event: React.MouseEvent) => void;
 }
 declare const WFDiagram: React.FC<IWFDiagramProps>;
 export default WFDiagram;

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

@@ -319,7 +319,7 @@ const DiagramMessage = styled.div `
   color: #555;
   text-align: center;
 `;
-const WFDiagram = ({ xmlDiagramString, currentSetID, allowEdit = true, onDiagramChange, workitems, defaultAutoZoom = false }) => {
+const WFDiagram = ({ xmlDiagramString, currentSetID, allowEdit = true, onDiagramChange, workitems, defaultAutoZoom = false, onDiagramItemClick }) => {
     const [isReadOnly, setIsReadOnly] = useState(true);
     const [isFullScreen, setIsFullScreen] = useState(false);
     const [zoomLevel, setZoomLevel] = useState(1);
@@ -1258,6 +1258,12 @@ const WFDiagram = ({ xmlDiagramString, currentSetID, allowEdit = true, onDiagram
         setDraggedItemType(null);
     }, [isDrawingConnection, tempConnectionSource, tempConnectionEnd, isDrawingSelectionRect, selectionRectStart, selectionRectEnd, wfDiagram, zoomLevel, translateX, translateY, isReadOnly, isDraggingExistingConnectionEndpoint, draggingConnectionId, draggingEndpointType, draggingConnectionFixedPoint]);
     const handleDiagramItemClick = useCallback((id, event) => {
+        // Se allowEdit è false e ci sono workitems, delega al parent se la callback è definita
+        if (!allowEdit && workitems && workitems.length > 0 && onDiagramItemClick) {
+            event.stopPropagation();
+            onDiagramItemClick(id, event);
+            return;
+        }
         if (isReadOnly)
             return;
         event.stopPropagation();
@@ -1280,7 +1286,7 @@ const WFDiagram = ({ xmlDiagramString, currentSetID, allowEdit = true, onDiagram
         });
         if (!isCtrlPressed)
             setSelectedConnections(new Set());
-    }, [isReadOnly]);
+    }, [isReadOnly, allowEdit, workitems, onDiagramItemClick]);
     const handleConnectionClick = useCallback((id, event) => {
         if (isReadOnly)
             return;
@@ -1816,7 +1822,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' } }), SDK_Globals.tmSession?.SessionDescr?.appModuleID === AppModules.SURFER ?
-                _jsx(TMFloatingMenuBar, { containerRef: diagramRef, defaultPosition: { x: 1, y: 85 }, disbaleConfigMode: true, defaultItems: [
+                _jsx(TMFloatingMenuBar, { containerRef: diagramRef, defaultPosition: { x: 45, y: 85 }, disbaleConfigMode: true, defaultItems: [
                         { icon: _jsx(IconZoomIn, {}), name: SDKUI_Localizator.ZoomIn, disabled: isAutoZoomEnabled, onClick: () => { handleZoomIn(); }, id: 'zoom-in', isPinned: true },
                         { icon: _jsx(IconZoomOut, {}), name: SDKUI_Localizator.ZoomOut, disabled: isAutoZoomEnabled, onClick: () => { handleZoomOut(); }, id: 'zoom-out', isPinned: true },
                         { icon: _jsx(IconZoomAuto, {}), name: 'AutoZoom', onClick: () => { handleToggleAutoZoom(); }, id: 'zoom-auto', isPinned: true, isToggle: isAutoZoomEnabled },
@@ -1826,7 +1832,7 @@ const WFDiagram = ({ xmlDiagramString, currentSetID, allowEdit = true, onDiagram
                     (_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, style: {
                         opacity: (defaultAutoZoom && !isInitialZoomCalculated) ? 0 : 1,
                         transition: 'opacity 0.15s ease-in'
-                    }, 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 => {
+                    }, children: _jsxs(ScalableGroup, { "$scale": zoomLevel, "$translateX": translateX, "$translateY": translateY, children: [wfDiagram?.DiagramItems.map(item => (_jsx(DiagramItemComponent, { wf: wfDiagram?.Info, readOnly: isReadOnly, allowItemClick: !allowEdit && workitems && workitems.length > 0 && !!onDiagramItemClick, 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/hooks/useDataListItem.js

@@ -95,6 +95,7 @@ export const useDataListItem = () => {
     const renderDataListCell = useCallback((value, dataListID, dataListViewMode) => {
         const stringValue = convertToDataListValue(value);
         const showIcon = dataListViewMode !== DataListViewModes.Description;
+        const showText = dataListViewMode !== DataListViewModes.Image;
         const dataListItem = getDataListItem(dataListID, stringValue);
         const getIcon = () => {
             if (!showIcon)
@@ -107,7 +108,7 @@ export const useDataListItem = () => {
                 ? _jsx(TMImageLibrary, { imageID: dataListItem.imageID })
                 : _jsx(IconWarning, { color: TMColors.warning });
         };
-        return (_jsxs(StyledDivHorizontal, { style: { width: '100%' }, title: dataListItem ? dataListItem.value : SDKUI_Localizator.ValueNotPresent, children: [getIcon(), _jsx("p", { style: {
+        return (_jsxs(StyledDivHorizontal, { style: { width: '100%' }, title: dataListItem ? dataListItem.value : SDKUI_Localizator.ValueNotPresent, children: [getIcon(), showText && (_jsx("p", { style: {
                         textAlign: 'left',
                         marginLeft: showIcon ? '5px' : '',
                         opacity: dataListItem ? 1 : 0.5,
@@ -116,7 +117,7 @@ export const useDataListItem = () => {
                         textOverflow: 'ellipsis',
                         flexGrow: 1,
                         minWidth: 0
-                    }, children: dataListItem ? dataListItem.name : convertToDataListDisplayValue(value) })] }));
+                    }, children: dataListItem ? dataListItem.name : convertToDataListDisplayValue(value) }))] }));
     }, [getDataListItem]);
     return {
         loadDataListsAsync,

package/lib/ts/types.d.ts

@@ -316,7 +316,7 @@ export declare enum buildTypes {
  */
 export interface WFInstanceDescriptor {
     /** ID dell'istanza */
-    instanceId: string;
+    instanceId: string | undefined;
     /** Indice della riga nel search result */
     rowIndex: number;
     /** Struttura metadati completa da searchResultToDataSource: { [key: string]: { md: MetadataDescriptor, value: any } } */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@topconsultnpm/sdkui-react",
-  "version": "6.20.0-dev1.97",
+  "version": "6.20.0-dev1.98",
   "description": "",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",