@topconsultnpm/sdkui-react-beta 6.11.107 → 6.11.109
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.
@@ -1,8 +1,8 @@
|
|
1
1
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
2
|
-
import { useCallback, useRef, useState } from 'react';
|
2
|
+
import { useCallback, useEffect, useRef, useState } from 'react';
|
3
3
|
import { ValidationItem, SDK_Globals, MetadataDataTypes, DBBrands, ResultTypes } from '@topconsultnpm/sdk-ts-beta';
|
4
4
|
import { TreeView } from 'devextreme-react';
|
5
|
-
import { IconActivityLog, IconAtSign, IconDcmtTypeSys, IconFunction, IconMetadata, IconMetadata_Numeric, IconMetadata_Text, IconNotification,
|
5
|
+
import { IconActivityLog, IconAtSign, IconDcmtTypeSys, IconFunction, IconMetadata, IconMetadata_Numeric, IconMetadata_Text, IconNotification, IconSettings, SDKUI_Localizator } from '../../helper';
|
6
6
|
import { TMColors, FontSize } from '../../utils/theme';
|
7
7
|
import { StyledDivHorizontal } from '../base/Styled';
|
8
8
|
import ShowAlert from '../base/TMAlert';
|
@@ -15,6 +15,7 @@ import TMApplyForm from '../forms/TMApplyForm';
|
|
15
15
|
import { TMMetadataIcon } from '../viewers/TMMidViewer';
|
16
16
|
import { useApplyForm } from '../../hooks/useForm';
|
17
17
|
import { DeviceType, useDeviceType } from '../base/TMDeviceProvider';
|
18
|
+
import { useResizeObserver } from '../../hooks/useResizeObserver';
|
18
19
|
// import CodeEditor from '@uiw/react-textarea-code-editor';
|
19
20
|
// npm i @uiw/react-textarea-code-editor
|
20
21
|
export var FormulaTargets;
|
@@ -58,10 +59,18 @@ export const renderFormulaIcon = (iconType, tid, md) => {
|
|
58
59
|
}
|
59
60
|
};
|
60
61
|
const TMFormulaEditor = (props) => {
|
62
|
+
const deviceType = useDeviceType();
|
61
63
|
const [validationItems, setValidationItems] = useState([]);
|
62
64
|
const { formData, setFormData, formDataOrig, exception, applyData } = useApplyForm(props.formMode, props.inputData, () => new FormulaDescriptor(), props.onApplied);
|
65
|
+
const [isVertical, setIsVertical] = useState(deviceType === DeviceType.MOBILE);
|
63
66
|
// const [code, setCode] = useState(`function add(a, b) {\n return a + b;\n}` );
|
64
67
|
const textAreaRef = useRef(null);
|
68
|
+
const { ref, width } = useResizeObserver();
|
69
|
+
useEffect(() => {
|
70
|
+
if (deviceType === DeviceType.MOBILE)
|
71
|
+
return;
|
72
|
+
setIsVertical(width < 500);
|
73
|
+
}, [width]);
|
65
74
|
/// esegue la validazione lato-backend
|
66
75
|
function formulaValidator_BackEnd() {
|
67
76
|
(async () => {
|
@@ -121,19 +130,25 @@ const TMFormulaEditor = (props) => {
|
|
121
130
|
}
|
122
131
|
};
|
123
132
|
const renderTreeViewItem = useCallback((item) => {
|
124
|
-
return (_jsxs(StyledDivHorizontal, { style: { display: 'flex', gap: '5px' }, children: [renderFormulaIcon(item.icon, item.tid, item.md), _jsx("
|
133
|
+
return (_jsxs(StyledDivHorizontal, { style: { display: 'flex', gap: '5px', overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis' }, children: [renderFormulaIcon(item.icon, item.tid, item.md), _jsx("p", { style: { verticalAlign: 'middle', whiteSpace: 'nowrap', textOverflow: 'ellipsis' }, children: item.text })] }));
|
125
134
|
}, []);
|
126
|
-
|
135
|
+
const handleTreeViewItemClick = (e) => {
|
136
|
+
if (!e)
|
137
|
+
return;
|
138
|
+
if (e.itemData?.hasItems)
|
139
|
+
return;
|
140
|
+
insertText(e.itemData?.text);
|
141
|
+
};
|
127
142
|
return (_jsx(TMApplyForm, { isModal: props.isModal, formMode: props.formMode, isModified: formData.expression !== formDataOrig.expression, exception: exception, validationItems: validationItems, title: SDKUI_Localizator.Formula, hasNavigation: false, showBack: props.showBack, height: '600px', width: '800px', onApply: () => applyData(), onClose: props.onClose, onUndo: () => {
|
128
143
|
setFormData(formDataOrig);
|
129
144
|
setValidationItems([]);
|
130
|
-
}, customToolbarElements: _jsx(TMButton, { caption: SDKUI_Localizator.EvaluateResult, onClick: () => { formulaValidator_BackEnd(); }, btnStyle: 'toolbar', icon: _jsx(IconNotification, {}) }), children: _jsxs(TMSplitterLayout, { direction:
|
145
|
+
}, customToolbarElements: _jsx(TMButton, { caption: SDKUI_Localizator.EvaluateResult, onClick: () => { formulaValidator_BackEnd(); }, btnStyle: 'toolbar', icon: _jsx(IconNotification, {}) }), children: _jsx("div", { ref: ref, style: { width: '100%', height: '100%' }, children: _jsxs(TMSplitterLayout, { direction: isVertical ? 'vertical' : 'horizontal', showSeparator: true, separatorSize: 5, start: isVertical ? ['50%', '50%'] : ['35%', '65%'], min: ['0px', '0px'], children: [_jsx(TMCard, { scrollX: true, children: _jsx(TreeView, { id: "treeview", items: props.inputData?.items, width: '100%', height: '100%', scrollDirection: 'vertical', itemRender: renderTreeViewItem, onItemClick: handleTreeViewItemClick }) }), _jsxs(TMLayoutContainer, { direction: 'vertical', children: [_jsx(TMLayoutItem, { children: _jsx(TMCard, { scrollX: true, children: _jsx("textarea", { ref: textAreaRef, spellCheck: false, value: formData?.expression ?? '', onChange: (e) => {
|
131
146
|
setFormData({ ...formData, expression: e.target.value });
|
132
147
|
if (e.target.value != formDataOrig?.expression)
|
133
148
|
insertValidationItem();
|
134
149
|
else
|
135
150
|
setValidationItems([]);
|
136
|
-
}, style: { border: 'none', color: TMColors.text_normal, fontSize: FontSize.defaultFontSize, padding: '5px', width: '100%', height: 'calc(100% - 4px)' } }) }) }), _jsx(TMLayoutItem, { height: "max-content", children: _jsx(TMVilViewer, { vil: validationItems }) })] }) })
|
151
|
+
}, style: { border: 'none', resize: 'none', color: TMColors.text_normal, fontSize: FontSize.defaultFontSize, padding: '5px', width: '100%', height: 'calc(100% - 4px)' } }) }) }), _jsx(TMLayoutItem, { height: "max-content", children: _jsx(TMVilViewer, { vil: validationItems }) })] })] }) }) }));
|
137
152
|
};
|
138
153
|
export default TMFormulaEditor;
|
139
154
|
export class FormulaHelper {
|
@@ -2,7 +2,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
|
|
2
2
|
import { useEffect, useState } from "react";
|
3
3
|
import styled from "styled-components";
|
4
4
|
import { AccessLevels, DcmtTypeListCacheService, LayoutModes, MetadataDataDomains, MetadataDataTypes, MetadataValueDescriptor, SDK_Globals } from '@topconsultnpm/sdk-ts-beta';
|
5
|
-
import { IconUndo, IconPencil, IconFunction, IconMenuVertical, IconDataList, SDKUI_Localizator, IconNull } from "../../helper";
|
5
|
+
import { IconUndo, IconPencil, IconFunction, IconMenuVertical, IconDataList, SDKUI_Localizator, IconNull, stringIsNullOrEmpty } from "../../helper";
|
6
6
|
import { TMColors } from "../../utils/theme";
|
7
7
|
import TMButton from "../base/TMButton";
|
8
8
|
import TMDropDownMenu from "../base/TMDropDownMenu";
|
@@ -37,7 +37,7 @@ const TMMetadataValues = ({ showCheckBoxes = ShowCheckBoxesMode.Never, checkPerm
|
|
37
37
|
if (item) {
|
38
38
|
item.value = newValue;
|
39
39
|
if (showCheckBoxes !== ShowCheckBoxesMode.Never)
|
40
|
-
item.isSelected =
|
40
|
+
item.isSelected = !stringIsNullOrEmpty(newValue);
|
41
41
|
}
|
42
42
|
if (!newValue) {
|
43
43
|
let dynDLToBeRefreshed = dynDataListsToBeRefreshed.find(o => o.midStarter === mid);
|
@@ -180,7 +180,7 @@ const TMMetadataValues = ({ showCheckBoxes = ShowCheckBoxesMode.Never, checkPerm
|
|
180
180
|
if (mvd)
|
181
181
|
mvd.isSelected = newValue;
|
182
182
|
onValueChanged?.(newValues);
|
183
|
-
} }), _jsxs("div", { style: { position: 'relative', height: '100%', width: '100%', opacity: showNullValueCheckBoxes && item.isNull ? 0.4 : 1 }, children: [_jsx(TMMetadataEditor, { tid: TID, mid: item.mid, layoutMode: layoutMode, isLexProt: item.isLexProt, isSelected: isOpenDistinctValues && item.mid === selectedMID, isModifiedWhen:
|
183
|
+
} }), _jsxs("div", { style: { position: 'relative', height: '100%', width: '100%', opacity: showNullValueCheckBoxes && item.isNull ? 0.4 : 1 }, children: [_jsx(TMMetadataEditor, { tid: TID, mid: item.mid, layoutMode: layoutMode, isLexProt: item.isLexProt, isSelected: isOpenDistinctValues && item.mid === selectedMID, isModifiedWhen: (item?.value ?? '') !== (metadataValuesOrig.find(m => m.mid === item.mid)?.value ?? ''), isReadOnly: showNullValueCheckBoxes ? item.isNull : undefined, isEditable: isEditable(item.mid) || item.isEditable, validationItems: editorValidationHandler(item.mid ?? 0), value: metadataValues.find(m => m.mid === item.mid)?.value, openChooserBySingleClick: openChooserBySingleClick, onValueChanged: (newValue) => onChangeHandler(newValue, item.mid ?? 0), onValueChange: (newValue) => onChangeHandler(newValue, item.mid ?? 0), containerElement: undefined, queryParamsDynDataList: dynDataListsToBeRefreshed.find(o => o.mid == item.mid)?.queryParams ?? [], onCascadeRefreshDynDataLists: (ddlToBeRefreshed) => {
|
184
184
|
let newDynDataListsToBeRefreshed = [];
|
185
185
|
for (const item of dynDataListsToBeRefreshed) {
|
186
186
|
let index = ddlToBeRefreshed.findIndex(o => o.mid == item.mid || (o.mid == -1 && o.midStarter == item.midStarter));
|
@@ -222,6 +222,8 @@ const TMMetadataValues = ({ showCheckBoxes = ShowCheckBoxesMode.Never, checkPerm
|
|
222
222
|
mvd.isNull = !mvd.isNull;
|
223
223
|
if (mvd.isNull)
|
224
224
|
mvd.isSelected = true;
|
225
|
+
else
|
226
|
+
mvd.isSelected = !stringIsNullOrEmpty(mvd.value);
|
225
227
|
}
|
226
228
|
onValueChanged?.(newValues);
|
227
229
|
} }) }), showAdvancedMenu && _jsx("div", { style: { marginTop: item.md?.dataType === MetadataDataTypes.DateTime ? '12px' : '18px' }, onClick: () => { handleMetadataValueSelection(item); }, children: _jsx(TMDropDownMenu, { backgroundColor: 'white', color: TMColors.button_icon, borderRadius: '3px', content: _jsx(TMButton, { btnStyle: 'icon', icon: _jsx(IconMenuVertical, {}), showTooltip: false }), disabled: item.isLexProt === 1, items: getAdvancedMenuItems(TID, item.mid) }) })] }, item.mid))) }));
|
@@ -0,0 +1,22 @@
|
|
1
|
+
import { useEffect, useRef, useState } from 'react';
|
2
|
+
export const useResizeObserver = () => {
|
3
|
+
const [width, setWidth] = useState(0);
|
4
|
+
const ref = useRef(null);
|
5
|
+
useEffect(() => {
|
6
|
+
const handleResize = (entries) => {
|
7
|
+
if (entries[0].contentRect) {
|
8
|
+
setWidth(entries[0].contentRect.width);
|
9
|
+
}
|
10
|
+
};
|
11
|
+
const observer = new ResizeObserver(handleResize);
|
12
|
+
if (ref.current) {
|
13
|
+
observer.observe(ref.current);
|
14
|
+
}
|
15
|
+
return () => {
|
16
|
+
if (ref.current) {
|
17
|
+
observer.unobserve(ref.current);
|
18
|
+
}
|
19
|
+
};
|
20
|
+
}, []);
|
21
|
+
return { ref, width };
|
22
|
+
};
|