@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, IconPencil, IconSettings, SDKUI_Localizator } from '../../helper';
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("span", { style: { verticalAlign: 'middle' }, children: item.text }), !item.hasItems && _jsx("span", { style: { verticalAlign: 'middle', color: TMColors.primary }, children: _jsx(IconPencil, { onClick: () => { insertText(item.text); } }) })] }));
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
- let devicrType = useDeviceType();
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: devicrType === DeviceType.MOBILE ? 'vertical' : 'horizontal', showSeparator: true, separatorSize: 2, start: devicrType === DeviceType.MOBILE ? ['50%', '50%'] : ['30%', '70%'], min: ['0px', '0px'], children: [_jsx(TMLayoutItem, { children: _jsx(TMCard, { children: _jsx(TreeView, { id: "treeview", items: props.inputData?.items, width: '100%', scrollDirection: 'vertical', itemRender: renderTreeViewItem }) }) }), _jsx(TMLayoutItem, { children: _jsxs(TMLayoutContainer, { direction: 'vertical', children: [_jsx(TMLayoutItem, { children: _jsx(TMCard, { scrollX: true, children: _jsx("textarea", { ref: textAreaRef, spellCheck: false, value: formData?.expression ?? '', onChange: (e) => {
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 = true;
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: metadataValues.find(m => m.mid === item.mid)?.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) => {
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,4 @@
1
+ export declare const useResizeObserver: () => {
2
+ ref: import("react").RefObject<HTMLDivElement>;
3
+ width: number;
4
+ };
@@ -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
+ };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@topconsultnpm/sdkui-react-beta",
3
- "version": "6.11.107",
3
+ "version": "6.11.109",
4
4
  "description": "",
5
5
  "scripts": {
6
6
  "test": "echo \"Error: no test specified\" && exit 1",