@topconsultnpm/sdkui-react-beta 6.11.107 → 6.11.109

package/lib/components/editors/TMFormulaEditor.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { ValidationItem, SDK_Globals, MetadataDataTypes, DBBrands, ResultTypes } from '@topconsultnpm/sdk-ts-beta';
 import { TreeView } from 'devextreme-react';
-import { IconActivityLog, IconAtSign, IconDcmtTypeSys, IconFunction, IconMetadata, IconMetadata_Numeric, IconMetadata_Text, IconNotification, IconPencil, IconSettings, SDKUI_Localizator } from '../../helper';
+import { IconActivityLog, IconAtSign, IconDcmtTypeSys, IconFunction, IconMetadata, IconMetadata_Numeric, IconMetadata_Text, IconNotification, IconSettings, SDKUI_Localizator } from '../../helper';
 import { TMColors, FontSize } from '../../utils/theme';
 import { StyledDivHorizontal } from '../base/Styled';
 import ShowAlert from '../base/TMAlert';
@@ -15,6 +15,7 @@ import TMApplyForm from '../forms/TMApplyForm';
 import { TMMetadataIcon } from '../viewers/TMMidViewer';
 import { useApplyForm } from '../../hooks/useForm';
 import { DeviceType, useDeviceType } from '../base/TMDeviceProvider';
+import { useResizeObserver } from '../../hooks/useResizeObserver';
 // import CodeEditor from '@uiw/react-textarea-code-editor';
 // npm i @uiw/react-textarea-code-editor
 export var FormulaTargets;
@@ -58,10 +59,18 @@ export const renderFormulaIcon = (iconType, tid, md) => {
     }
 };
 const TMFormulaEditor = (props) => {
+    const deviceType = useDeviceType();
     const [validationItems, setValidationItems] = useState([]);
     const { formData, setFormData, formDataOrig, exception, applyData } = useApplyForm(props.formMode, props.inputData, () => new FormulaDescriptor(), props.onApplied);
+    const [isVertical, setIsVertical] = useState(deviceType === DeviceType.MOBILE);
     // const [code, setCode] = useState(`function add(a, b) {\n  return a + b;\n}` );
     const textAreaRef = useRef(null);
+    const { ref, width } = useResizeObserver();
+    useEffect(() => {
+        if (deviceType === DeviceType.MOBILE)
+            return;
+        setIsVertical(width < 500);
+    }, [width]);
     /// esegue la validazione lato-backend
     function formulaValidator_BackEnd() {
         (async () => {
@@ -121,19 +130,25 @@ const TMFormulaEditor = (props) => {
         }
     };
     const renderTreeViewItem = useCallback((item) => {
-        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); } }) })] }));
+        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 })] }));
     }, []);
-    let devicrType = useDeviceType();
+    const handleTreeViewItemClick = (e) => {
+        if (!e)
+            return;
+        if (e.itemData?.hasItems)
+            return;
+        insertText(e.itemData?.text);
+    };
     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: () => {
             setFormData(formDataOrig);
             setValidationItems([]);
-        }, 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) => {
+        }, 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) => {
                                             setFormData({ ...formData, expression: e.target.value });
                                             if (e.target.value != formDataOrig?.expression)
                                                 insertValidationItem();
                                             else
                                                 setValidationItems([]);
-                                        }, 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 }) })] }) })] }) }));
+                                        }, 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 }) })] })] }) }) }));
 };
 export default TMFormulaEditor;
 export class FormulaHelper {

package/lib/components/editors/TMMetadataValues.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { useEffect, useState } from "react";
 import styled from "styled-components";
 import { AccessLevels, DcmtTypeListCacheService, LayoutModes, MetadataDataDomains, MetadataDataTypes, MetadataValueDescriptor, SDK_Globals } from '@topconsultnpm/sdk-ts-beta';
-import { IconUndo, IconPencil, IconFunction, IconMenuVertical, IconDataList, SDKUI_Localizator, IconNull } from "../../helper";
+import { IconUndo, IconPencil, IconFunction, IconMenuVertical, IconDataList, SDKUI_Localizator, IconNull, stringIsNullOrEmpty } from "../../helper";
 import { TMColors } from "../../utils/theme";
 import TMButton from "../base/TMButton";
 import TMDropDownMenu from "../base/TMDropDownMenu";
@@ -37,7 +37,7 @@ const TMMetadataValues = ({ showCheckBoxes = ShowCheckBoxesMode.Never, checkPerm
         if (item) {
             item.value = newValue;
             if (showCheckBoxes !== ShowCheckBoxesMode.Never)
-                item.isSelected = true;
+                item.isSelected = !stringIsNullOrEmpty(newValue);
         }
         if (!newValue) {
             let dynDLToBeRefreshed = dynDataListsToBeRefreshed.find(o => o.midStarter === mid);
@@ -180,7 +180,7 @@ const TMMetadataValues = ({ showCheckBoxes = ShowCheckBoxesMode.Never, checkPerm
                             if (mvd)
                                 mvd.isSelected = newValue;
                             onValueChanged?.(newValues);
-                        } }), _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) => {
+                        } }), _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) => {
                                 let newDynDataListsToBeRefreshed = [];
                                 for (const item of dynDataListsToBeRefreshed) {
                                     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
                                     mvd.isNull = !mvd.isNull;
                                     if (mvd.isNull)
                                         mvd.isSelected = true;
+                                    else
+                                        mvd.isSelected = !stringIsNullOrEmpty(mvd.value);
                                 }
                                 onValueChanged?.(newValues);
                             } }) }), 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))) }));

package/lib/hooks/useResizeObserver.d.ts

@@ -0,0 +1,4 @@
+export declare const useResizeObserver: () => {
+    ref: import("react").RefObject<HTMLDivElement>;
+    width: number;
+};

package/lib/hooks/useResizeObserver.js

@@ -0,0 +1,22 @@
+import { useEffect, useRef, useState } from 'react';
+export const useResizeObserver = () => {
+    const [width, setWidth] = useState(0);
+    const ref = useRef(null);
+    useEffect(() => {
+        const handleResize = (entries) => {
+            if (entries[0].contentRect) {
+                setWidth(entries[0].contentRect.width);
+            }
+        };
+        const observer = new ResizeObserver(handleResize);
+        if (ref.current) {
+            observer.observe(ref.current);
+        }
+        return () => {
+            if (ref.current) {
+                observer.unobserve(ref.current);
+            }
+        };
+    }, []);
+    return { ref, width };
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@topconsultnpm/sdkui-react-beta",
-  "version": "6.11.107",
+  "version": "6.11.109",
   "description": "",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",