@topconsultnpm/sdkui-react-beta 6.11.112 → 6.11.113

package/lib/components/choosers/TMDynDataListItemChooser.js

@@ -27,8 +27,10 @@ const TMDynDataListItemChooser = ({ tid, md, titleForm, openChooserBySingleClick
             }
         }
         setDynDl(d);
-        if (!IsParametricQuery(d?.qd) && !dataSource)
+        if (!IsParametricQuery(d?.qd) && !dataSource) {
+            setDataSource(undefined);
             loadData().then((result) => { setDataSource(result); });
+        }
     }, [md]);
     useEffect(() => {
         if (!tid)
@@ -41,11 +43,6 @@ const TMDynDataListItemChooser = ({ tid, md, titleForm, openChooserBySingleClick
         }
         loadData().then((result) => {
             setDataSource(result);
-            if (values && values.length > 0) {
-                let description = result?.dtdResult?.rows?.filter(o => o[dynDl?.selectItemForValue ?? 0] == values?.[0])?.[0]?.[dynDl?.selectItemForDescription ?? 0];
-                if (!description)
-                    onValueChanged?.(undefined);
-            }
         });
     }, [queryParamsDynDataList, dynDl]);
     const loadData = async () => {
@@ -77,7 +74,7 @@ const TMDynDataListItemChooser = ({ tid, md, titleForm, openChooserBySingleClick
             _jsx(TMTooltip, { content: SDKUI_Localizator.ValueNotPresent, children: _jsx(IconWarning, { color: TMColors.warning }) });
     };
     const renderTemplate = () => {
-        return (_jsxs(StyledDivHorizontal, { style: { minWidth: '125px' }, children: [_jsxs(StyledDivHorizontal, { children: [getIcon(), _jsx("p", { style: { marginLeft: '5px' }, children: getDescription() })] }), values && values.length > 1 && _jsx("p", { style: { marginLeft: '10px' }, children: `(+${values.length - 1} ${values.length == 2 ? 'altro' : 'altri'})` })] }));
+        return (_jsxs(StyledDivHorizontal, { style: { minWidth: '125px' }, children: [dataSource && _jsxs(StyledDivHorizontal, { children: [getIcon(), _jsx("p", { style: { marginLeft: '5px' }, children: getDescription() })] }), values && values.length > 1 && _jsx("p", { style: { marginLeft: '10px' }, children: `(+${values.length - 1} ${values.length == 2 ? 'altro' : 'altri'})` })] }));
     };
     return (_jsxs(_Fragment, { children: [_jsx(TMSummary, { placeHolder: placeHolder, icon: icon, labelColor: labelColor, backgroundColor: backgroundColor, buttons: buttons, showBorder: showBorder, readOnly: readOnly, hasValue: values && values.length > 0, showClearButton: showClearButton, iconEditButton: _jsx(IconSearch, { fontSize: 16 }), onEditorClick: () => !readOnly && setShowChooser(true), elementStyle: elementStyle, isModifiedWhen: isModifiedWhen, openEditorOnSummaryClick: openChooserBySingleClick, label: label, template: renderTemplate(), onClearClick: showClearButton ? () => { onValueChanged?.([]); } : undefined, validationItems: validationItems }), showChooser &&
                 _jsx(TMDynDataListItemChooserForm, { TID: tid, MID: md?.id, dynDL: dynDl, title: titleForm, allowMultipleSelection: allowMultipleSelection, searchResult: dataSource, selectedIDs: values, onClose: () => setShowChooser(false), onChoose: (IDs) => {

package/lib/components/editors/TMHtmlContentDisplay.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+interface IHtmlContentDisplay {
+    markup: string;
+}
+declare const TMHtmlContentDisplay: React.FC<IHtmlContentDisplay>;
+export default TMHtmlContentDisplay;

package/lib/components/editors/TMHtmlContentDisplay.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import styled from 'styled-components';
+const Wrapper = styled.div `
+    ul li {
+        list-style-position: inside;
+    }
+    ol li {
+        list-style-position: inside;
+    }
+`;
+const TMHtmlContentDisplay = ({ markup }) => {
+    return (_jsx(Wrapper, { children: _jsx("div", { dangerouslySetInnerHTML: { __html: markup } }) }));
+};
+export default TMHtmlContentDisplay;

package/lib/components/editors/TMHtmlEditor.d.ts

@@ -0,0 +1,29 @@
+import { ValidationItem } from '@topconsultnpm/sdk-ts-beta';
+export interface ITMHtmlEditor {
+    /** Width of the editor (e.g., '100%', '500px') */
+    width?: string;
+    /** Height of the editor (e.g., '300px') */
+    height?: string;
+    /** Initial or current value of the editor content as an HTML string */
+    value?: string;
+    /** Callback function triggered when the content value changes */
+    onValueChanged?: (e: {
+        value: string;
+    }) => void;
+    /** If true, the editor is in read-only mode and content cannot be edited */
+    readOnly?: boolean;
+    /** Configuration for mention functionality (e.g., @mentions) */
+    mentionsConfig?: Array<{
+        dataSource: Array<{
+            text: string;
+            icon?: string;
+        }>;
+        searchExpr: string;
+        displayExpr: string;
+        valueExpr: string;
+    }>;
+    /** List of validation rules or checks to apply to the editor content */
+    validationItems?: Array<ValidationItem>;
+}
+declare const TMHtmlEditor: (props: ITMHtmlEditor) => import("react/jsx-runtime").JSX.Element;
+export default TMHtmlEditor;

package/lib/components/editors/TMHtmlEditor.js

@@ -0,0 +1,66 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from 'react';
+import HtmlEditor, { Toolbar, Item } from 'devextreme-react/html-editor';
+import TMVilViewer from '../base/TMVilViewer';
+import TMTooltip from '../base/TMTooltip';
+import TMButton from '../base/TMButton';
+const TMHtmlEditor = (props) => {
+    const { width = "100%", height = "100%", readOnly = false, value = "", mentionsConfig, onValueChanged, validationItems } = props;
+    const editorRef = useRef(null); // Create a ref for the HtmlEditor
+    const [isEditorEnabled, setIsEditorEnabled] = useState(false);
+    const handlePaste = (e) => {
+        const clipboardData = e.clipboardData || window.clipboardData;
+        const pastedText = clipboardData.getData('text/plain'); // Get the plain text
+        e.preventDefault(); // Prevent default paste behavior
+        setMarkup(pastedText); // Set the pasted text as plain text
+        onValueChangeCallback(pastedText); // Call the value change callback
+    };
+    useEffect(() => {
+        const editor = editorRef.current?.instance()?.element();
+        if (editor) {
+            // Attach paste event listener to the editor's root DOM element
+            editor.addEventListener('paste', handlePaste);
+        }
+        // Cleanup the event listener when component unmounts
+        return () => {
+            if (editor) {
+                editor.removeEventListener('paste', handlePaste);
+            }
+        };
+    }, []);
+    const [markup, setMarkup] = useState(value);
+    useEffect(() => {
+        // Initialize markup with the value prop
+        setMarkup(value);
+    }, [value]);
+    useEffect(() => {
+        if (!isEditorEnabled) {
+            // When switching to plain text mode, strip HTML tags
+            const doc = new DOMParser().parseFromString(markup, 'text/html');
+            setMarkup(doc.body.textContent || "");
+        }
+    }, [isEditorEnabled]);
+    const onValueChangeCallback = (text) => {
+        setMarkup(text);
+        if (onValueChanged) {
+            onValueChanged({ value: text });
+        }
+    };
+    const hasValidationErrors = useMemo(() => {
+        return validationItems && validationItems.length > 0;
+    }, [validationItems]);
+    const toggleEditorMode = () => {
+        setIsEditorEnabled((prev) => !prev);
+    };
+    return (_jsxs("div", { children: [_jsx("div", { style: { position: 'absolute', top: '10px', right: '10px', zIndex: 10 }, children: _jsx(TMTooltip, { content: isEditorEnabled ? "Nascondi opzioni di formattazione" : "Mostra opzioni di formattazione", children: _jsx(TMButton, { btnStyle: "toolbar", onClick: toggleEditorMode, icon: isEditorEnabled ? _jsx("i", { className: 'dx-icon-eyeclose' }) : _jsx("i", { className: 'dx-icon-eyeopen' }) }) }) }), _jsx("div", { style: { borderWidth: '1px', borderStyle: 'solid', borderColor: hasValidationErrors ? "red" : "#e0e0e0 #e0e0e0 #616161", }, children: !isEditorEnabled ? (_jsx("textarea", { placeholder: "Digita un messaggio...", value: markup, onChange: (e) => onValueChangeCallback(e.target.value), maxLength: 1000, style: {
+                        width,
+                        height,
+                        border: '1px solid #ddd',
+                        boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
+                        resize: 'none',
+                        padding: '10px',
+                        outline: 'none',
+                        paddingRight: "40px"
+                    } })) : (_jsx(HtmlEditor, { ref: editorRef, width: width, height: height, value: markup, onValueChange: onValueChangeCallback, readOnly: readOnly, mentions: mentionsConfig, style: { overflow: 'hidden', outline: "none" }, children: !readOnly && (_jsxs(Toolbar, { multiline: false, children: [_jsx(Item, { name: "undo" }), _jsx(Item, { name: "redo" }), _jsx(Item, { name: "separator" }), _jsx(Item, { name: "separator" }), _jsx(Item, { name: "bold" }), _jsx(Item, { name: "italic" }), _jsx(Item, { name: "underline" }), _jsx(Item, { name: "separator" }), _jsx(Item, { name: "alignLeft" }), _jsx(Item, { name: "alignCenter" }), _jsx(Item, { name: "alignRight" }), _jsx(Item, { name: "alignJustify" }), _jsx(Item, { name: "separator" }), _jsx(Item, { name: "orderedList" }), _jsx(Item, { name: "bulletList" }), _jsx(Item, { name: "separator" }), _jsx(Item, { name: "color" }), _jsx(Item, { name: "background" }), _jsx(Item, { name: "separator" }), _jsx(Item, { name: "link" })] })) })) }), _jsx(TMVilViewer, { vil: validationItems })] }));
+};
+export default TMHtmlEditor;

package/lib/components/editors/TMMetadataEditor.d.ts

@@ -7,7 +7,7 @@ interface ITMMetadataEditorProps {
     value: string | undefined;
     queryParamsDynDataList?: string[];
     autoFocus?: boolean;
-    containerElement: Element | undefined;
+    containerElement?: Element;
     disabled?: boolean;
     validationItems?: ValidationItem[];
     isLexProt?: number;

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, stringIsNullOrEmpty } from "../../helper";
+import { IconUndo, IconPencil, IconFunction, IconMenuVertical, IconDataList, SDKUI_Localizator, IconNull, stringIsNullOrEmpty, deepCompare } from "../../helper";
 import { TMColors } from "../../utils/theme";
 import TMButton from "../base/TMButton";
 import TMDropDownMenu from "../base/TMDropDownMenu";
@@ -27,10 +27,10 @@ export var AdvancedMenuButtons;
 })(AdvancedMenuButtons || (AdvancedMenuButtons = {}));
 const TMMetadataValues = ({ showCheckBoxes = ShowCheckBoxesMode.Never, checkPerms = true, showAdvancedMenu = false, customMenuItems = [], showNullValueCheckBoxes, isOpenDistinctValues = false, openChooserBySingleClick, selectedMID, onFocusedItemChanged, layoutMode = LayoutModes.Update, metadataValues = [], metadataValuesOrig = [], TID, onValueChanged, onAdvancedMenuClick, validationItems }) => {
     const [dynDataListsToBeRefreshed, setDynDataListsToBeRefreshed] = useState([]);
-    const [calcDynDataListsToBeRefreshed, setCalcDynDataListsToBeRefreshed] = useState();
     const [currentDTD, setCurrentDTD] = useState();
     const [isEditableList, addOrRemoveEditableList] = useMetadataEditableList();
     const [selectedItem, setSelectedItem] = useState(undefined);
+    const [prevMetadataValues, setPrevMetadataValues] = useState([]);
     const onChangeHandler = (newValue, mid) => {
         let newValues = structuredClone(metadataValues);
         const item = newValues.find(value => value.mid === mid);
@@ -48,8 +48,6 @@ const TMMetadataValues = ({ showCheckBoxes = ShowCheckBoxesMode.Never, checkPerm
                 dynDLToBeRefreshed = dynDataListsToBeRefreshed.find(o => o.midStarter === item?.mid);
             }
         }
-        let md = currentDTD?.metadata?.find(o => o.id == mid);
-        setCalcDynDataListsToBeRefreshed(md?.dataDomain === MetadataDataDomains.DynamicDataList);
         onValueChanged?.(newValues);
     };
     const editorValidationHandler = (mid) => {
@@ -73,29 +71,31 @@ const TMMetadataValues = ({ showCheckBoxes = ShowCheckBoxesMode.Never, checkPerm
     useEffect(() => {
         DcmtTypeListCacheService.GetAsync(TID, true).then((resultDTD) => {
             setCurrentDTD(resultDTD);
-            setCalcDynDataListsToBeRefreshed(true);
         });
     }, [TID]);
     useEffect(() => {
         if (metadataValues.length <= 0)
             return;
-        if (calcDynDataListsToBeRefreshed && currentDTD?.id == TID) {
-            loadDynDataListToBeRefreshedCascadeAsync(TID, metadataValues).then((result) => {
-                setDynDataListsToBeRefreshed(result);
-                setCalcDynDataListsToBeRefreshed(false);
-            });
-        }
-    }, [JSON.stringify(metadataValues)]);
-    const loadDynDataListToBeRefreshedCascadeAsync = async (tid, mds) => {
+        if (!currentDTD)
+            return;
+        //if no dynamic data list has changed we do not call APIs
+        if (deepCompare(metadataValues.filter(o => o.md?.dataDomain === MetadataDataDomains.DynamicDataList), prevMetadataValues.filter(o => o.md?.dataDomain === MetadataDataDomains.DynamicDataList)))
+            return;
+        setPrevMetadataValues(metadataValues);
+        loadDynDataListToBeRefreshedCascadeAsync(TID, metadataValues).then((result) => {
+            setDynDataListsToBeRefreshed(result);
+        });
+    }, [metadataValues, currentDTD]);
+    const loadDynDataListToBeRefreshedCascadeAsync = async (tid, mvdList) => {
         if (!tid)
             return [];
-        if (mds.length <= 0)
+        if (mvdList.length <= 0)
             return [];
         let dynDLToBeRefreshed = [];
-        for (const m of mds) {
+        for (const m of mvdList) {
             if (!m.value)
                 continue;
-            let data = await getDataDynDataListsToBeRefreshedAsync(tid, m.mid, [m.value ?? ""], dynDLToBeRefreshed.find(o => o.mid == m.mid)?.queryParams ?? []);
+            let data = await getDataDynDataListsToBeRefreshedAsync(tid, m.mid, m.value, dynDLToBeRefreshed.find(o => o.mid == m.mid)?.queryParams ?? []);
             if (!data)
                 continue;
             for (const item of data)
@@ -103,11 +103,13 @@ const TMMetadataValues = ({ showCheckBoxes = ShowCheckBoxesMode.Never, checkPerm
         }
         return dynDLToBeRefreshed;
     };
-    const getDataDynDataListsToBeRefreshedAsync = async (tid, mid, values, qParams) => {
+    const getDataDynDataListsToBeRefreshedAsync = async (tid, mid, value, qParams) => {
         if (!tid)
             return;
         if (!mid)
             return;
+        if (stringIsNullOrEmpty(value))
+            return;
         let md = currentDTD?.metadata?.find(o => o.id == mid);
         if (md?.dataDomain !== MetadataDataDomains.DynamicDataList)
             return;
@@ -127,25 +129,23 @@ const TMMetadataValues = ({ showCheckBoxes = ShowCheckBoxesMode.Never, checkPerm
             return;
         let toBeRefreshed = [];
         let dynDlDataSource = await SDK_Globals.tmSession?.NewSearchEngine().GetDynDataListValuesAsync(tid, mid, layoutMode, qParams);
-        if (values && values.length > 0) {
-            if (!d.onValueChanged_DynDataListsToBeRefreshed)
-                return;
-            let row = dynDlDataSource?.dtdResult?.rows?.filter(o => o[d.selectItemForValue ?? 0] == values?.[0]);
-            if (!row || row.length <= 0)
-                return;
-            for (const t of d.onValueChanged_DynDataListsToBeRefreshed) {
-                let mid = t.item1;
-                let queryParams = [];
-                if ((t.item2 ?? 0) >= 0)
-                    queryParams.push(row[0][t.item2 ?? 0]);
-                if ((t.item3 ?? 0) >= 0)
-                    queryParams.push(row[0][t.item3 ?? 0]);
-                if ((t.item4 ?? 0) >= 0)
-                    queryParams.push(row[0][t.item4 ?? 0]);
-                if ((t.item5 ?? 0) >= 0)
-                    queryParams.push(row[0][t.item5 ?? 0]);
-                toBeRefreshed.push({ mid: mid, queryParams: queryParams, midStarter: md?.id });
-            }
+        if (!d.onValueChanged_DynDataListsToBeRefreshed)
+            return;
+        let row = dynDlDataSource?.dtdResult?.rows?.filter(o => o[d.selectItemForValue ?? 0] == value);
+        if (!row || row.length <= 0)
+            return;
+        for (const t of d.onValueChanged_DynDataListsToBeRefreshed) {
+            let mid = t.item1;
+            let queryParams = [];
+            if ((t.item2 ?? 0) >= 0)
+                queryParams.push(row[0][t.item2 ?? 0]);
+            if ((t.item3 ?? 0) >= 0)
+                queryParams.push(row[0][t.item3 ?? 0]);
+            if ((t.item4 ?? 0) >= 0)
+                queryParams.push(row[0][t.item4 ?? 0]);
+            if ((t.item5 ?? 0) >= 0)
+                queryParams.push(row[0][t.item5 ?? 0]);
+            toBeRefreshed.push({ mid: mid, queryParams: queryParams, midStarter: md?.id });
         }
         return toBeRefreshed;
     };
@@ -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: (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) => {
+                        } }), _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: item.value, openChooserBySingleClick: openChooserBySingleClick, onValueChanged: (newValue) => { onChangeHandler(newValue, item.mid ?? 0); }, onValueChange: (newValue) => { onChangeHandler(newValue, item.mid ?? 0); }, 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));
@@ -234,7 +234,7 @@ const StyledMetadataValuesContainer = styled.div `
     display: flex; 
     flex-direction: column; 
     width: 100%; 
-    height: calc(100%); 
+    height: 100%; 
     overflow: auto;
     padding: 0 10px 10px 10px;
 `;

package/lib/stories/TMHtmlEditor.stories.d.ts

@@ -0,0 +1,4 @@
+import { Meta } from '@storybook/react';
+declare const _default: Meta;
+export default _default;
+export declare const HtmlEditor: any;

package/lib/stories/TMHtmlEditor.stories.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { sortArgTypes } from './TMStoriesUtils';
+import TMHtmlEditor from '../components/editors/TMHtmlEditor';
+export default {
+    // The title will determine how the component appears in the sidebar of Storybook
+    title: 'Components/TMHtmlEditor',
+    // Specifies the component that is being documented in this story
+    component: TMHtmlEditor,
+    tags: ['autodocs'],
+    // Tags for categorizing the component within Storybook
+    argTypes: sortArgTypes({}),
+};
+/******* 1. Default Template and Default TMHtmlEditor *******/
+const Template = (args) => _jsx(TMHtmlEditor, { ...args });
+export const HtmlEditor = Template.bind({});
+HtmlEditor.args = {};

package/package.json

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