@topconsultnpm/sdkui-react-beta 6.16.7 → 6.16.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,9 @@
1
+ import React from 'react';
2
+ import { DataListItemDescriptor } from '@topconsultnpm/sdk-ts-beta';
3
+ interface TMDataListItemPickerProps {
4
+ dataListID: number | undefined;
5
+ selectedValue: string | undefined;
6
+ onItemSelect: (item: DataListItemDescriptor) => void;
7
+ }
8
+ declare const TMDataListItemPicker: React.FC<TMDataListItemPickerProps>;
9
+ export default TMDataListItemPicker;
@@ -0,0 +1,96 @@
1
+ import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
2
+ import { useEffect, useState } from 'react';
3
+ import styled, { keyframes } from 'styled-components';
4
+ import { DataListCacheService, SDK_Localizator } from '@topconsultnpm/sdk-ts-beta';
5
+ import { SDKUI_Localizator, TMImageLibrary } from '../../helper';
6
+ const PickerContainer = styled.div `
7
+ display: flex;
8
+ flex-direction: column;
9
+ gap: 10px;
10
+ padding: 5px;
11
+ border: 1px solid #ccc;
12
+ border-radius: 4px;
13
+ `;
14
+ const ItemsContainer = styled.div `
15
+ display: flex;
16
+ flex-direction: row;
17
+ flex-wrap: nowrap;
18
+ gap: 3px;
19
+ align-items: center;
20
+ overflow-x: auto;
21
+ padding: 10px;
22
+ `;
23
+ const slideIn = keyframes `
24
+ from {
25
+ opacity: 0;
26
+ transform: translateX(-50px);
27
+ }
28
+ to {
29
+ opacity: 1;
30
+ transform: translateX(0);
31
+ }
32
+ `;
33
+ const StatusItem = styled.div `
34
+ display: flex;
35
+ flex-direction: column;
36
+ align-items: center;
37
+ justify-content: center;
38
+ cursor: pointer;
39
+ text-align: center;
40
+ font-size: 0.8em;
41
+ padding: 5px 10px;
42
+ border-radius: 8px;
43
+ border: 2px solid transparent;
44
+ transition: all 0.2s ease-in-out;
45
+ flex-shrink: 0;
46
+
47
+ // Aggiungi l'animazione con un ritardo basato sull'indice
48
+ animation: ${slideIn} 0.5s ease-out forwards;
49
+ animation-delay: ${props => props.$index * 0.1}s;
50
+ opacity: 0; // Inizialmente l'elemento è invisibile
51
+
52
+ &:hover {
53
+ background-color: #f0f0f0;
54
+ }
55
+
56
+ ${props => props.$isSelected && `
57
+ border-color: #007bff;
58
+ background-color: #e6f2ff;
59
+ `}
60
+ `;
61
+ const Label = styled.div `
62
+ font-weight: bold;
63
+ margin-bottom: 5px;
64
+ `;
65
+ const TMDataListItemPicker = ({ dataListID, selectedValue, onItemSelect }) => {
66
+ const [dataList, setDataList] = useState(undefined);
67
+ const [loading, setLoading] = useState(true);
68
+ const [error, setError] = useState(undefined);
69
+ useEffect(() => {
70
+ if (dataListID) {
71
+ setLoading(true);
72
+ setError(undefined);
73
+ DataListCacheService.GetAsync(dataListID)
74
+ .then(dl => {
75
+ setDataList(dl);
76
+ setLoading(false);
77
+ })
78
+ .catch(err => {
79
+ console.error("Failed to fetch data list:", err);
80
+ setError("Failed to load statuses.");
81
+ setLoading(false);
82
+ });
83
+ }
84
+ }, [dataListID]);
85
+ if (loading) {
86
+ return _jsxs("p", { children: [SDKUI_Localizator.Loading, "..."] });
87
+ }
88
+ if (error) {
89
+ return _jsx("p", { children: error });
90
+ }
91
+ if (!dataList || !dataList.items || dataList.items.length === 0) {
92
+ return _jsx("p", { children: SDKUI_Localizator.NoDataToDisplay });
93
+ }
94
+ return (_jsxs(PickerContainer, { children: [_jsx(Label, { children: `${SDK_Localizator.DataList}: ${dataList.name}` }), _jsx(ItemsContainer, { children: dataList.items.map((item, index) => (_jsxs(StatusItem, { "$isSelected": item.value === selectedValue, "$index": index, onClick: () => onItemSelect(item), children: [item.imageID && _jsx(TMImageLibrary, { imageID: item.imageID }), _jsx("span", { children: item.name })] }, item.value))) })] }));
95
+ };
96
+ export default TMDataListItemPicker;
@@ -10,6 +10,7 @@ import styled from 'styled-components';
10
10
  import TMQuerySummary from '../../../query/TMQuerySummary';
11
11
  import { CultureIDs } from '@topconsultnpm/sdk-ts-beta';
12
12
  import TMLocalizedTextBox from '../../../editors/TMLocalizedTextBox';
13
+ import TMDataListItemPicker from '../../../choosers/TMDataListItemPicker';
13
14
  const FormContainer = styled.div `
14
15
  display: flex;
15
16
  flex-direction: column;
@@ -47,6 +48,10 @@ const DiagramItemForm = ({ itemToEdit, wf, onClose, onApply }) => {
47
48
  width = '40%';
48
49
  height = '60%';
49
50
  break;
51
+ case DiagramItemTypes.Status:
52
+ width = '700px';
53
+ height = '230px';
54
+ break;
50
55
  default:
51
56
  width = '50%';
52
57
  height = '50%';
@@ -54,13 +59,6 @@ const DiagramItemForm = ({ itemToEdit, wf, onClose, onApply }) => {
54
59
  }
55
60
  return { calculatedWidth: width, calculatedHeight: height };
56
61
  }, [localItem.Type]);
57
- const handleNameChange = useCallback((event) => {
58
- const newValue = event.target.value;
59
- setLocalItem(prevLocalItem => ({
60
- ...prevLocalItem,
61
- ItemName: newValue
62
- }));
63
- }, []);
64
62
  const handleStartAfterArchiveChange = useCallback((newValue) => {
65
63
  setLocalItem(prevLocalItem => ({
66
64
  ...prevLocalItem,
@@ -98,6 +96,13 @@ const DiagramItemForm = ({ itemToEdit, wf, onClose, onApply }) => {
98
96
  QD: newValue
99
97
  }));
100
98
  }, []);
99
+ const handleStatusChange = useCallback((selectedItem) => {
100
+ setLocalItem(prevLocalItem => ({
101
+ ...prevLocalItem,
102
+ ItemName: selectedItem.name || '',
103
+ StatusValue: selectedItem.value
104
+ }));
105
+ }, []);
101
106
  // Gestore per il salvataggio
102
107
  const handleSave = () => {
103
108
  onApply(localItem);
@@ -135,16 +140,8 @@ const DiagramItemForm = ({ itemToEdit, wf, onClose, onApply }) => {
135
140
  }, []);
136
141
  // Function to render common elements like the name textbox
137
142
  const renderCommonFields = () => {
138
- if (localItem.Type !== DiagramItemTypes.Start && localItem.Type !== DiagramItemTypes.End && localItem.Type !== DiagramItemTypes.Exit) {
139
- return (_jsx(TMLocalizedTextBox, { label: SDKUI_Localizator.Name, value: localItem.ItemName, value_IT: localItem.ItemName_IT, value_EN: localItem.ItemName_EN, value_FR: localItem.ItemName_FR, value_PT: localItem.ItemName_PT, value_ES: localItem.ItemName_ES, value_DE: localItem.ItemName_DE, onValueChanged: handleLocalizedNameChange })
140
- // <TMTextBox
141
- // type="text"
142
- // label={SDKUI_Localizator.Name}
143
- // value={localItem.ItemName}
144
- // isModifiedWhen={localItem.ItemName !== localItemOrig.ItemName}
145
- // onValueChanged={handleNameChange}
146
- // />
147
- );
143
+ if (localItem.Type !== DiagramItemTypes.Start && localItem.Type !== DiagramItemTypes.End && localItem.Type !== DiagramItemTypes.Exit && localItem.Type !== DiagramItemTypes.Status) {
144
+ return (_jsx(TMLocalizedTextBox, { label: SDKUI_Localizator.Name, value: localItem.ItemName, value_IT: localItem.ItemName_IT, value_EN: localItem.ItemName_EN, value_FR: localItem.ItemName_FR, value_PT: localItem.ItemName_PT, value_ES: localItem.ItemName_ES, value_DE: localItem.ItemName_DE, onValueChanged: handleLocalizedNameChange }));
148
145
  }
149
146
  return null;
150
147
  };
@@ -163,6 +160,10 @@ const DiagramItemForm = ({ itemToEdit, wf, onClose, onApply }) => {
163
160
  const renderConditionFields = () => {
164
161
  return (_jsx(TMQuerySummary, { qd: localItem.QD, onValueChanged: handleQDChange }));
165
162
  };
163
+ // Function to render Status-specific fields
164
+ const renderStatusFields = () => {
165
+ return (_jsx(TMDataListItemPicker, { dataListID: wf?.MStatusDLID, selectedValue: localItem.StatusValue, onItemSelect: handleStatusChange }));
166
+ };
166
167
  const renderForm = () => {
167
168
  let specificFields;
168
169
  switch (localItem.Type) {
@@ -178,6 +179,9 @@ const DiagramItemForm = ({ itemToEdit, wf, onClose, onApply }) => {
178
179
  case DiagramItemTypes.Condition:
179
180
  specificFields = renderConditionFields();
180
181
  break;
182
+ case DiagramItemTypes.Status:
183
+ specificFields = renderStatusFields();
184
+ break;
181
185
  default:
182
186
  specificFields = null;
183
187
  }
@@ -41,12 +41,10 @@ const DiagramItemSvgContent = ({ itemType, width, height, isToolboxPreview = fal
41
41
  case DiagramItemTypes.Status:
42
42
  svgContent = (_jsx("svg", { x: svgCenterX - ICON_SIZE / 2, y: svgCenterY - ICON_SIZE / 2, width: ICON_SIZE, height: ICON_SIZE, viewBox: "0 0 24 24", fill: "orange", children: _jsx("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z" }) }));
43
43
  break;
44
+ case DiagramItemTypes.DataEntry:
44
45
  case DiagramItemTypes.Approval:
45
46
  svgContent = (_jsx("svg", { x: svgCenterX - ICON_SIZE / 2, y: svgCenterY - ICON_SIZE / 2, width: ICON_SIZE, height: ICON_SIZE, viewBox: "0 0 512 640", fill: "green", children: _jsx("path", { fill: "green", d: "M96 128a128 128 0 1 1 256 0a128 128 0 1 1-256 0M0 482.3C0 383.8 79.8 304 178.3 304h91.4c98.5 0 178.3 79.8 178.3 178.3c0 16.4-13.3 29.7-29.7 29.7H29.7C13.3 512 0 498.7 0 482.3M625 177L497 305c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L591 143c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z" }) }));
46
47
  break;
47
- case DiagramItemTypes.DataEntry:
48
- svgContent = (_jsxs(_Fragment, { children: [_jsx("rect", { x: PADDING, y: PADDING, width: calculatedWidth - 2 * PADDING, height: calculatedHeight - 2 * PADDING, fill: "#ffe0b2", stroke: "#ffb74d", strokeWidth: "2", rx: "5", ry: "5" }), _jsx("svg", { x: svgCenterX - SMALL_ICON_SIZE / 2, y: svgCenterY - SMALL_ICON_SIZE / 2, width: SMALL_ICON_SIZE, height: SMALL_ICON_SIZE, viewBox: "0 0 24 24", fill: "#d84315", children: _jsx("path", { d: "M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm-1 7V3.5L18.5 9H13z" }) })] }));
49
- break;
50
48
  case DiagramItemTypes.ExecTask:
51
49
  svgContent = (_jsx("svg", { x: svgCenterX - ICON_SIZE / 2, y: svgCenterY - ICON_SIZE / 2, width: ICON_SIZE, height: ICON_SIZE, viewBox: "0 0 24 24", fill: "#1976d2", className: "item-svg", children: _jsx("path", { fill: "#1976d2", d: "M10 4a4 4 0 0 0-4 4a4 4 0 0 0 4 4a4 4 0 0 0 4-4a4 4 0 0 0-4-4m7 8a.26.26 0 0 0-.26.21l-.19 1.32c-.3.13-.59.29-.85.47l-1.24-.5c-.11 0-.24 0-.31.13l-1 1.73c-.06.11-.04.24.06.32l1.06.82a4.2 4.2 0 0 0 0 1l-1.06.82a.26.26 0 0 0-.06.32l1 1.73c.06.13.19.13.31.13l1.24-.5c.26.18.54.35.85.47l.19 1.32c.02.12.12.21.26.21h2c.11 0 .22-.09.24-.21l.19-1.32c.3-.13.57-.29.84-.47l1.23.5c.13 0 .26 0 .33-.13l1-1.73a.26.26 0 0 0-.06-.32l-1.07-.82c.02-.17.04-.33.04-.5s-.01-.33-.04-.5l1.06-.82a.26.26 0 0 0 .06-.32l-1-1.73c-.06-.13-.19-.13-.32-.13l-1.23.5c-.27-.18-.54-.35-.85-.47l-.19-1.32A.236.236 0 0 0 19 12zm-7 2c-4.42 0-8 1.79-8 4v2h9.68a7 7 0 0 1-.68-3a7 7 0 0 1 .64-2.91c-.53-.06-1.08-.09-1.64-.09m8 1.5c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5c-.84 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5" }) }));
52
50
  break;
@@ -8,7 +8,7 @@ import ConnectionComponent from './ConnectionComponent';
8
8
  import DiagramItemComponent from './DiagramItemComponent';
9
9
  import DiagramItemSvgContent from './DiagramItemSvgContent';
10
10
  import { calculateArrowAngle, getConnectionPoint, isConnectionNonLinear, validateDiagram } from './workflowHelpers';
11
- import { IconFlowChart, IconUndo, IconRestore, IconAdjust, IconCopy, IconCut, IconPaste, IconPin, IconUnpin, IconChevronRight, IconCloseOutline, IconNew, SDKUI_Localizator } from '../../../../helper';
11
+ import { IconFlowChart, IconUndo, IconRestore, IconAdjust, IconCopy, IconCut, IconPaste, IconPin, IconUnpin, IconChevronRight, IconCloseOutline, IconNew, SDKUI_Localizator, generateUUID } from '../../../../helper';
12
12
  import { TMExceptionBoxManager } from '../../../base/TMPopUp';
13
13
  import { StyledLoadingContainer, StyledSpinner } from '../../../base/Styled';
14
14
  import DiagramItemForm from './DiagramItemForm';
@@ -405,7 +405,7 @@ const WFDiagram = ({ xmlDiagramString, currentSetID, readOnly = false, zoomLevel
405
405
  const newDiagramItems = [];
406
406
  const oldIdToNewIdMap = new Map();
407
407
  copiedItems.forEach(item => {
408
- const newId = `item-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;
408
+ const newId = generateUUID();
409
409
  oldIdToNewIdMap.set(item.ID, newId);
410
410
  newDiagramItems.push({
411
411
  ...item,
@@ -421,7 +421,7 @@ const WFDiagram = ({ xmlDiagramString, currentSetID, readOnly = false, zoomLevel
421
421
  if (newSourceItemId && newSinkItemId) {
422
422
  newConnections.push({
423
423
  ...connection,
424
- ID: `conn-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`,
424
+ ID: generateUUID(),
425
425
  Source: { ParentDiagramItem: { ID: newSourceItemId }, ConnectorName: connection.Source.ConnectorName },
426
426
  Sink: { ParentDiagramItem: { ID: newSinkItemId }, ConnectorName: connection.Sink.ConnectorName },
427
427
  PathGeometry: "",
@@ -449,7 +449,7 @@ const WFDiagram = ({ xmlDiagramString, currentSetID, readOnly = false, zoomLevel
449
449
  if (readOnly)
450
450
  return;
451
451
  const startItem = {
452
- ID: `item-start-${Date.now()}`,
452
+ ID: generateUUID(),
453
453
  Left: 100,
454
454
  Top: 100,
455
455
  Width: 64,
@@ -459,7 +459,7 @@ const WFDiagram = ({ xmlDiagramString, currentSetID, readOnly = false, zoomLevel
459
459
  Description: '',
460
460
  };
461
461
  const endItem = {
462
- ID: `item-end-${Date.now()}`,
462
+ ID: generateUUID(),
463
463
  Left: 300,
464
464
  Top: 100,
465
465
  Width: 64,
@@ -1184,7 +1184,7 @@ const WFDiagram = ({ xmlDiagramString, currentSetID, readOnly = false, zoomLevel
1184
1184
  if (isDrawingConnection && tempConnectionSource && wfDiagram) {
1185
1185
  // Logica per la creazione di una nuova connessione
1186
1186
  const newConnection = {
1187
- ID: `conn-${Date.now()}`,
1187
+ ID: generateUUID(),
1188
1188
  Source: { ParentDiagramItem: { ID: tempConnectionSource.item.ID }, ConnectorName: tempConnectionSource.connectorName },
1189
1189
  Sink: { ParentDiagramItem: { ID: targetItemId }, ConnectorName: targetConnectorName },
1190
1190
  OutputStatus: WorkItemStatus.New,
@@ -1253,7 +1253,7 @@ const WFDiagram = ({ xmlDiagramString, currentSetID, readOnly = false, zoomLevel
1253
1253
  const x = (event.clientX - svgRect.left) / zoomLevel;
1254
1254
  const y = (event.clientY - svgRect.top) / zoomLevel;
1255
1255
  const newItem = {
1256
- ID: `item-${Date.now()}`,
1256
+ ID: generateUUID(),
1257
1257
  Left: x - 50,
1258
1258
  Top: y - 50,
1259
1259
  Width: 64,
@@ -130,7 +130,6 @@ export const parseQueryDescriptorXml = (xmlString) => {
130
130
  if (!xmlString || xmlString.trim() === '') {
131
131
  return undefined;
132
132
  }
133
- console.log('QD xmlString', xmlString);
134
133
  const parser = new DOMParser();
135
134
  const xmlDoc = parser.parseFromString(xmlString, "application/xml");
136
135
  let queryDescriptorElement = xmlDoc.querySelector("QueryDescriptor");
@@ -173,6 +172,5 @@ export const parseQueryDescriptorXml = (xmlString) => {
173
172
  paramsItems.push(parseQueryParameterDescriptor(itemXML));
174
173
  });
175
174
  queryDescriptor.params = paramsItems.length > 0 ? paramsItems : undefined;
176
- console.log('queryDescriptor', queryDescriptor);
177
175
  return queryDescriptor;
178
176
  };
@@ -65,11 +65,6 @@ const TMApplyForm = ({ children, width, height, showToolbar = true, formMode, is
65
65
  onClose?.();
66
66
  return;
67
67
  }
68
- // Se ci sono errori, chiudi direttamente senza chiedere di applicare
69
- if (errorsCount > 0) {
70
- onClose?.();
71
- return;
72
- }
73
68
  TMMessageBoxManager.show({
74
69
  message: "Applicare le modifiche apportate?", buttons: [ButtonNames.YES, ButtonNames.NO, ButtonNames.CANCEL], //TODO SDKUI_Localizator.ApplyQuestion
75
70
  onButtonClick: async (e) => {
@@ -77,6 +72,8 @@ const TMApplyForm = ({ children, width, height, showToolbar = true, formMode, is
77
72
  if (e == ButtonNames.CANCEL)
78
73
  return;
79
74
  if (e == ButtonNames.YES) {
75
+ if (errorsCount > 0)
76
+ return;
80
77
  onApply?.();
81
78
  }
82
79
  onClose?.();
@@ -86,8 +86,8 @@ const TMChooserForm = ({ children, title, allowMultipleSelection = false, allowA
86
86
  ...summaryItems ?? {}
87
87
  });
88
88
  }, [manageUseLocalizedName, summaryItems]);
89
- return (_jsx(TMModal, { title: renderTitle(), width: width ?? '550px', height: height ?? '600px', toolbar: _jsx(ToolbarButtons, {}), onClose: onClose, children: (children ??
90
- filteredItems.length > 0)
89
+ return (_jsx(TMModal, { title: renderTitle(), width: width ?? '550px', height: height ?? '600px', toolbar: _jsx(ToolbarButtons, {}), onClose: onClose, children: children ??
90
+ filteredItems.length > 0
91
91
  ? _jsx(TMDataGrid, { dataSource: filteredItems, keyExpr: keyName, dataColumns: dataColumns, focusedRowKey: focusedRowKey, selectedRowKeys: selectedRowKeys, searchPanelFocusStarting: true, headerFilter: { visible: true }, selection: { mode: allowMultipleSelection ? 'multiple' : 'single', showCheckBoxesMode: 'always', selectAllMode: 'allPages' }, grouping: allowGrouping ? { autoExpandAll: false, expandMode: 'rowClick' } : undefined, summary: customSummary, onFocusedRowChanged: handleFocusedRowChange, onSelectionChanged: handleSelectionChanged, onRowDblClick: handleRowDoubleClick })
92
92
  : _jsx(TMLayoutContainer, { gap: 30, alignItems: 'center', justifyContent: 'center', children: _jsx(TMLayoutItem, { children: _jsx("p", { style: { height: "100%", color: TMColors.primaryColor, fontSize: "1.5rem", display: 'flex', alignItems: 'center', justifyContent: 'center' }, children: SDKUI_Localizator.NoDataToDisplay }) }) }) }));
93
93
  };
@@ -9,6 +9,12 @@ declare const openApps: (appModule: AppModules, tmSession: ITopMediaSession, app
9
9
  export declare const setSDK_GlobalsInfoAsync: (tms: ITopMediaSession | undefined) => Promise<ITopMediaSession>;
10
10
  declare const calcResponsiveSizes: (deviceType: DeviceType | undefined, desktopSize: string, tabletSize: string, mobileSize: string) => string;
11
11
  declare const getColor: (color: ColorsType) => string;
12
+ /**
13
+ * Genera un Universally Unique Identifier (UUID) versione 4.
14
+ * Simile a Guid.NewGuid() in C#.
15
+ * @returns {string} Un UUID in formato stringa.
16
+ */
17
+ export declare const generateUUID: () => string;
12
18
  declare const makeID: (length: number) => string;
13
19
  export declare const truncateText: (text: string, maxLength: number) => string;
14
20
  declare function genUniqueId(): string;
@@ -88,6 +88,14 @@ const getColor = (color) => {
88
88
  }
89
89
  return c;
90
90
  };
91
+ /**
92
+ * Genera un Universally Unique Identifier (UUID) versione 4.
93
+ * Simile a Guid.NewGuid() in C#.
94
+ * @returns {string} Un UUID in formato stringa.
95
+ */
96
+ export const generateUUID = () => {
97
+ return crypto.randomUUID();
98
+ };
91
99
  const makeID = (length) => {
92
100
  let result = '';
93
101
  const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@topconsultnpm/sdkui-react-beta",
3
- "version": "6.16.7",
3
+ "version": "6.16.8",
4
4
  "description": "",
5
5
  "scripts": {
6
6
  "test": "echo \"Error: no test specified\" && exit 1",