@topconsultnpm/sdkui-react-beta 6.16.63 → 6.16.65

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

@@ -6,6 +6,7 @@ interface IWFDiagramProps {
     translateX?: number;
     translateY?: number;
     currentSetID?: string;
+    onDiagramImport?: (newXmlString: string) => void;
 }
 declare const WFDiagram: React.FC<IWFDiagramProps>;
 export default WFDiagram;

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

@@ -8,7 +8,7 @@ import ConnectionComponent from './ConnectionComponent';
 import DiagramItemComponent from './DiagramItemComponent';
 import DiagramItemSvgContent from './DiagramItemSvgContent';
 import { calculateArrowAngle, downloadFile, getConnectionPoint, isConnectionNonLinear, validateDiagram } from './workflowHelpers';
-import { IconFlowChart, IconUndo, IconRestore, IconAdjust, IconCopy, IconCut, IconPaste, IconPin, IconUnpin, IconChevronRight, IconCloseOutline, IconNew, SDKUI_Localizator, generateUUID, IconExport } from '../../../../helper';
+import { IconFlowChart, IconUndo, IconRestore, IconAdjust, IconCopy, IconCut, IconPaste, IconPin, IconUnpin, IconChevronRight, IconCloseOutline, IconNew, SDKUI_Localizator, generateUUID, IconExport, IconImport } from '../../../../helper';
 import { TMExceptionBoxManager } from '../../../base/TMPopUp';
 import { StyledLoadingContainer, StyledSpinner } from '../../../base/Styled';
 import DiagramItemForm from './DiagramItemForm';
@@ -205,7 +205,7 @@ const DiagramMessage = styled.div `
   color: #555;
   text-align: center;
 `;
-const WFDiagram = ({ xmlDiagramString, currentSetID, readOnly = false, zoomLevel = 1, translateX = 0, translateY = 0 }) => {
+const WFDiagram = ({ xmlDiagramString, currentSetID, readOnly = false, zoomLevel = 1, translateX = 0, translateY = 0, onDiagramImport }) => {
     const [isLoading, setIsLoading] = useState(true);
     const [wfDiagram, setWfDiagram] = useState(null);
     const [selectedItems, setSelectedItems] = useState(new Set());
@@ -589,7 +589,7 @@ const WFDiagram = ({ xmlDiagramString, currentSetID, readOnly = false, zoomLevel
             return;
         }
     }, [wfDiagram, selectedItems, selectedConnections, handleUndo, handleRedo, handleDelete, updateDiagram, handleCopy, handleCut, handlePaste, readOnly]);
-    const handleExportDiagram = useCallback(() => {
+    const handleExportDiagram = useCallback(async () => {
         if (!wfDiagram) {
             // Visualizza un errore se il diagramma non è stato caricato o è vuoto
             TMExceptionBoxManager.show({ exception: new Error('Diagram not loaded.') });
@@ -597,7 +597,7 @@ const WFDiagram = ({ xmlDiagramString, currentSetID, readOnly = false, zoomLevel
         }
         try {
             // 1. Serializza il diagramma in XML
-            const xmlString = serializeWfDiagramToXml(wfDiagram);
+            const xmlString = await serializeWfDiagramToXml(wfDiagram);
             // 2. Determina il nome del file (usa l'ID o un UUID se non disponibile)
             const filename = `WorkflowDiagram_${wfDiagram.Info?.ID || generateUUID()}.xml`;
             // 3. Avvia il download (la cartella è scelta dal browser)
@@ -607,6 +607,49 @@ const WFDiagram = ({ xmlDiagramString, currentSetID, readOnly = false, zoomLevel
             TMExceptionBoxManager.show({ exception: e });
         }
     }, [wfDiagram]); // Dipende dallo stato attuale del diagramma
+    const fileInputRef = useRef(null);
+    // Gestore dell'evento click sul bottone (apre la finestra di selezione file)
+    const handleImportDiagramClick = useCallback(() => {
+        if (fileInputRef.current) {
+            fileInputRef.current.click();
+        }
+    }, []);
+    // Gestore dell'evento di selezione file (esegue il parse e chiama il genitore)
+    const handleFileChange = useCallback((event) => {
+        const file = event.target.files?.[0];
+        if (!file) {
+            return;
+        }
+        const reader = new FileReader();
+        reader.onload = (e) => {
+            try {
+                const xmlContent = e.target?.result;
+                // 1. Esegui il parse per validare il file.
+                // parseWfDiagramXml lancerà un errore se l'XML è invalido o malformato,
+                // intercettato nel blocco catch.
+                // NON ASSEGNIAMO wfDiagram QUI, MA CHIAMIAMO SOLO PER VERIFICA.
+                parseWfDiagramXml(xmlContent);
+                // 2. Se il parsing ha successo, comunichiamo la nuova stringa XML al genitore.
+                // Il genitore sarà responsabile di aggiornare lo stato di xmlDiagramString,
+                // il che farà re-renderizzare questo componente con il nuovo diagramma.
+                onDiagramImport?.(xmlContent);
+                // 3. Resetta l'input per permettere re-import dello stesso file
+                if (fileInputRef.current) {
+                    fileInputRef.current.value = '';
+                }
+            }
+            catch (error) {
+                // Gestione dell'errore di parsing (es. file non valido)
+                const errorMessage = 'Error importing diagram. Invalid XML format.';
+                TMExceptionBoxManager.show({ exception: new Error(errorMessage + `\n${error.message}`) });
+                // Resetta l'input anche in caso di errore
+                if (fileInputRef.current) {
+                    fileInputRef.current.value = '';
+                }
+            }
+        };
+        reader.readAsText(file, 'UTF-8');
+    }, [onDiagramImport]);
     const calculateConnectionPath = useCallback((connection, sourceItem, sinkItem) => {
         const sourcePoint = getConnectionPoint(sourceItem, connection.Source.ConnectorName);
         const sinkPoint = getConnectionPoint(sinkItem, connection.Sink.ConnectorName);
@@ -1410,7 +1453,8 @@ const WFDiagram = ({ xmlDiagramString, currentSetID, readOnly = false, zoomLevel
             isUndoingRedoing.current = false;
         }
     }, [wfDiagram]);
-    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" })] }), _jsxs("button", { onClick: handleExportDiagram, disabled: readOnly || !wfDiagram, title: SDKUI_Localizator.Export || 'Export Diagram', children: [_jsx(IconExport, {}), _jsx("span", { children: SDKUI_Localizator.Export || 'Export' })] })] }), _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 ?
+    return (_jsxs(CanvasContainer, { children: [_jsx("input", { ref: fileInputRef, type: "file", accept: ".xml" // Filtra per file XML
+                , onChange: handleFileChange, style: { display: 'none' } }), !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" })] }), _jsxs("button", { onClick: handleExportDiagram, disabled: readOnly || !wfDiagram, title: SDKUI_Localizator.Export || 'Export Diagram', children: [_jsx(IconExport, {}), _jsx("span", { children: SDKUI_Localizator.Export || 'Export' })] }), _jsxs("button", { onClick: handleImportDiagramClick, disabled: readOnly, title: SDKUI_Localizator.Import || 'Import Diagram', children: [_jsx(IconImport, {}), _jsx("span", { children: SDKUI_Localizator.Import || 'Import' })] })] }), _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, 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: 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);

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

@@ -1,10 +1,11 @@
 import { WfDiagram } from './interfaces';
-import { CultureIDs, Severities, WFAppTypes, WorkItemSetRules, WorkItemStatus } from '@topconsultnpm/sdk-ts-beta';
+import { CultureIDs, QueryDescriptor, Severities, WFAppTypes, WorkItemSetRules, WorkItemStatus } from '@topconsultnpm/sdk-ts-beta';
 export declare const getCultureIDsNumber: (cultureID: CultureIDs | undefined) => number;
 export declare const getWorkItemStatusNumber: (status: WorkItemStatus | undefined) => number;
 export declare const getSeveritiesNumber: (severity: Severities | undefined) => number;
 export declare const getWorkItemSetRulesNumber: (setRule: WorkItemSetRules | undefined) => number;
 export declare const getWFAppTypesNumber: (appType: WFAppTypes | undefined) => number;
 export declare const mapCultureIDs: (cultureIDValue: number) => CultureIDs;
+export declare const serializeQueryDescriptorXml: (qd: QueryDescriptor | undefined) => Promise<string>;
 export declare const parseWfDiagramXml: (xmlString: string) => WfDiagram;
-export declare const serializeWfDiagramToXml: (wfDiagram: WfDiagram | null) => string;
+export declare const serializeWfDiagramToXml: (wfDiagram: WfDiagram | null) => Promise<string>;

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

@@ -1,5 +1,5 @@
 import { ArrowSymbol } from './interfaces';
-import { CultureIDs, Severities, WFAppTypes, WorkItemSetRules, WorkItemStatus } from '@topconsultnpm/sdk-ts-beta';
+import { CultureIDs, SDK_Globals, Severities, WFAppTypes, WorkItemSetRules, WorkItemStatus } from '@topconsultnpm/sdk-ts-beta';
 import { parseQueryDescriptorXml } from './queryDescriptorParser'; // Import the new parser
 import { parseMetadataValuesXml } from './metadataParser';
 // Funzione helper per escapare i caratteri XML speciali (necessaria per i campi stringa)
@@ -173,14 +173,17 @@ const mapWFAppTypes = (appTypeValue) => {
             return WFAppTypes.None;
     }
 };
-// Placeholder per la serializzazione di QueryDescriptor in XML (DA MODIFICARE CON LA LOGICA REALE)
-const serializeQueryDescriptorXml = (qd) => {
-    if (qd) {
-        // Logica di serializzazione reale qui, ad esempio:
-        // return `<ID>${qd.ID}</ID><Query>${escapeXml(qd.Query)}</Query>...`
-        return '[QUERY_DESCRIPTOR_XML_PLACEHOLDER]';
-    }
-    return '';
+export const serializeQueryDescriptorXml = async (qd) => {
+    // try {
+    if (!qd)
+        return '';
+    let xml = await SDK_Globals.tmSession?.NewDcmtPlatformEngine().UtilsSerializeQdAsync(qd) ?? '';
+    return xml;
+    // } catch (error) {
+    // console.error('Error serializing QueryDescriptor to XML:', error);
+    //TODO: gestire errore
+    // 	return '';
+    // }
 };
 // Placeholder per la serializzazione di MetadataValues in XML (DA MODIFICARE CON LA LOGICA REALE)
 const serializeMetadataValuesXml = (values) => {
@@ -193,7 +196,6 @@ const serializeMetadataValuesXml = (values) => {
 export const parseWfDiagramXml = (xmlString) => {
     const parser = new DOMParser();
     const xmlDoc = parser.parseFromString(xmlString, "application/xml");
-    console.log('xmlDoc', xmlDoc);
     const wfDiagram = {
         Info: {
             ID: "",
@@ -337,7 +339,7 @@ export const parseWfDiagramXml = (xmlString) => {
     return wfDiagram;
 };
 // Funzione di serializzazione (inclusa per completezza, se l'avevi)
-export const serializeWfDiagramToXml = (wfDiagram) => {
+export const serializeWfDiagramToXml = async (wfDiagram) => {
     if (!wfDiagram) {
         return '<?xml version="1.0" encoding="utf-8"?>\n<Root></Root>';
     }
@@ -354,7 +356,8 @@ export const serializeWfDiagramToXml = (wfDiagram) => {
     }
     // 2. Serializzazione DiagramItems
     xml += '  <DiagramItems>\n';
-    wfDiagram.DiagramItems.forEach(item => {
+    // Usa Promise.all con map invece di forEach
+    for (const item of wfDiagram.DiagramItems) {
         xml += '    <DiagramItem>\n';
         xml += `      <ID>${escapeXml(item.ID)}</ID>\n`;
         xml += `      <L>${item.Left}</L>\n`;
@@ -415,16 +418,17 @@ export const serializeWfDiagramToXml = (wfDiagram) => {
             xml += `      <EndWFInstance>${item.EndWFInstance}</EndWFInstance>\n`;
         // QueryDescriptor (QD)
         if (item.QD) {
-            const qdXmlContent = serializeQueryDescriptorXml(item.QD);
-            xml += `      <QD><![CDATA[${qdXmlContent}]]></QD>\n`;
+            let qdXmlContent = await serializeQueryDescriptorXml(item.QD);
+            let qdEscaped = escapeXml(qdXmlContent);
+            xml += `      <QD>${qdEscaped}</QD>\n`;
         }
         if (item.SOD)
             xml += `      <SOD>${escapeXml(item.SOD)}</SOD>\n`;
         // MetadataValues
-        if (item.MetadataValues) {
-            const mvXmlContent = serializeMetadataValuesXml(item.MetadataValues);
-            xml += `      <MetadataValues><![CDATA[${mvXmlContent}]]></MetadataValues>\n`;
-        }
+        // if (item.MetadataValues && item.MetadataValues.length > 0) {
+        // 	const mvXmlContent = serializeMetadataValuesXml(item.MetadataValues);
+        // 	xml += `      <MetadataValues><![CDATA[${mvXmlContent}]]></MetadataValues>\n`;
+        // }
         if (item.Severity !== undefined)
             xml += `      <Severity>${getSeveritiesNumber(item.Severity)}</Severity>\n`;
         if (item.RegAsWfInstPart !== undefined)
@@ -456,7 +460,7 @@ export const serializeWfDiagramToXml = (wfDiagram) => {
         if (item.Trunc !== undefined)
             xml += `      <Trunc>${item.Trunc}</Trunc>\n`;
         xml += '    </DiagramItem>\n';
-    });
+    }
     xml += '  </DiagramItems>\n';
     // 3. Serializzazione Connections
     xml += '  <Connections>\n';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@topconsultnpm/sdkui-react-beta",
-    "version": "6.16.63",
+    "version": "6.16.65",
     "description": "",
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",
@@ -39,7 +39,7 @@
         "lib"
     ],
     "dependencies": {
-        "@topconsultnpm/sdk-ts-beta": "6.16.12",
+        "@topconsultnpm/sdk-ts-beta": "6.16.13",
         "buffer": "^6.0.3",
         "devextreme": "25.1.4",
         "devextreme-react": "25.1.4",