@topconsultnpm/sdkui-react-beta 6.12.24 → 6.12.26

package/lib/components/base/TMFileManager.js

@@ -159,7 +159,7 @@ const TMFileManager = (props) => {
     // Render each TreeView item (directories) with custom styling/icons
     const renderTreeViewItem = (itemData) => {
         const isSelected = selectedFolder && selectedFolder.id === itemData.id;
-        return (_jsxs("div", { style: { whiteSpace: "nowrap" }, className: isSelected ? 'treeview-selected-item-manager' : '', children: [_jsx(IconFolder, { style: { marginRight: 5, color: '#e6c200' } }), itemData.text, " (", itemData.subFileFolderCount, ")"] }));
+        return (_jsxs("div", { style: { whiteSpace: "nowrap", display: "flex", alignItems: "center" }, className: isSelected ? 'treeview-selected-item-manager' : '', children: [_jsx(IconFolder, { style: { marginRight: 5, color: '#e6c200' } }), itemData.text, " (", itemData.subFileFolderCount, ")"] }));
     };
     // Function to handle item click event in the TreeView
     const handleTreeViewItemClick = (e) => {

package/lib/components/choosers/TMDcmtTypeChooser.js

@@ -42,5 +42,5 @@ export const TMDcmtTypeChooserForm = (props) => {
             return dtdList?.filter(d => d.templateTID && props.filterTemplateTID?.includes(d.templateTID));
         return dtdList;
     };
-    return (_jsx(TMChooserForm, { title: SDK_Localizator.ListDcmtTypeOrView, allowMultipleSelection: props.allowMultipleSelection, hasShowOnlySelectedItems: props.allowMultipleSelection, width: props.width, height: props.height, selectedIDs: props.selectedIDs, cellRenderIcon: cellRenderIcon, cellRenderNameAndDesc: cellRenderNameAndDesc, dataSource: props.dataSource, getItems: getItems, onClose: props.onClose, onChoose: (IDs) => props.onChoose?.(IDs) }));
+    return (_jsx(TMChooserForm, { title: SDK_Localizator.ListDcmtTypeOrView, allowMultipleSelection: props.allowMultipleSelection, hasShowOnlySelectedItems: true, width: props.width, height: props.height, selectedIDs: props.selectedIDs, cellRenderIcon: cellRenderIcon, cellRenderNameAndDesc: cellRenderNameAndDesc, dataSource: props.dataSource, getItems: getItems, onClose: props.onClose, onChoose: (IDs) => props.onChoose?.(IDs) }));
 };

package/lib/components/choosers/TMUserChooser.js

@@ -15,7 +15,7 @@ const TMUserChooser = ({ labelColor, titleForm, filter, readOnly = false, icon,
         return (_jsxs(StyledDivHorizontal, { style: { minWidth: '125px' }, children: [values && values.length > 0 && _jsx(TMUserIdViewer, { userId: values?.[0], showIcon: true, noneSelectionText: '' }), values && values.length > 1 && _jsx("p", { style: { marginLeft: '10px' }, children: `(+${values.length - 1} ${values.length == 2 ? 'altro' : 'altri'})` })] }));
     };
     return (_jsxs(_Fragment, { children: [_jsx(TMSummary, { disabled: disabled, placeHolder: placeHolder, readOnly: readOnly, labelColor: labelColor, icon: icon, backgroundColor: backgroundColor, buttons: buttons, showBorder: showBorder, 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(TMUserChooserForm, { title: titleForm, allowMultipleSelection: allowMultipleSelection, hasShowOnlySelectedItems: allowMultipleSelection, dataSource: dataSource, filter: filter, selectedIDs: values, hideRefresh: hideRefresh, hideShowId: hideShowId, onClose: () => setShowChooser(false), onChoose: (IDs) => { onValueChanged?.(IDs); } })] }));
+                _jsx(TMUserChooserForm, { title: titleForm, allowMultipleSelection: allowMultipleSelection, hasShowOnlySelectedItems: true, dataSource: dataSource, filter: filter, selectedIDs: values, hideRefresh: hideRefresh, hideShowId: hideShowId, onClose: () => setShowChooser(false), onChoose: (IDs) => { onValueChanged?.(IDs); } })] }));
 };
 export default TMUserChooser;
 export const TMUserChooserForm = ({ allowMultipleSelection, hideRefresh = false, hideShowId = false, startWithShowOnlySelectedItems = true, filter, title, hasShowOnlySelectedItems, width, height, selectedIDs, dataSource, onClose, onChoose }) => {

package/lib/components/forms/TMChooserForm.js

@@ -8,13 +8,14 @@ import TMModal from '../base/TMModal';
 import TMLayoutContainer, { TMLayoutItem } from '../base/TMLayout';
 import { TMColors } from '../../utils/theme';
 import TMDataGrid from '../base/TMDataGrid';
-const TMChooserForm = ({ children, title, allowMultipleSelection, startWithShowOnlySelectedItems = true, hasShowOnlySelectedItems = false, allowGrouping, allowSorting = true, width, height, dataSource, selectedIDs, manageUseLocalizedName = true, hasShowId = true, hideRefresh = false, keyName = "id", customButtons, showDefaultColumns = true, columns = [], summaryItems, convertID, customFilter, getItems, cellRenderIcon, cellRenderNameAndDesc, onChoose, onClose, onShowIdChanged }) => {
+const TMChooserForm = ({ children, title, allowMultipleSelection = false, startWithShowOnlySelectedItems = true, hasShowOnlySelectedItems = false, allowGrouping, allowSorting = true, width, height, dataSource, selectedIDs, manageUseLocalizedName = true, hasShowId = true, hideRefresh = false, keyName = "id", customButtons, showDefaultColumns = true, columns = [], summaryItems, convertID, customFilter, getItems, cellRenderIcon, cellRenderNameAndDesc, onChoose, onClose, onShowIdChanged }) => {
     const [showId, setShowId] = useState(false);
-    const [showOnlySelectedItems, setShowOnlySelectedItems] = useState(hasShowOnlySelectedItems && startWithShowOnlySelectedItems && selectedIDs != undefined && selectedIDs.length > 0);
+    const [showOnlySelectedItems, setShowOnlySelectedItems] = useState(allowMultipleSelection && hasShowOnlySelectedItems && startWithShowOnlySelectedItems && selectedIDs != undefined && selectedIDs.length > 0);
     const [allItems, setAllItems] = useState([]);
     const [filteredItems, setFilteredItems] = useState([]);
     const [selectedRowKeys, setSelectedRowKeys] = useState(selectedIDs ?? []);
     const [focusedRowKey, setFocusedRowKey] = useState(selectedIDs?.[0]);
+    const [selectedRowCounter, setSelectedRowCounter] = useState([]);
     useEffect(() => { doGetItems(false); }, [getItems]);
     useEffect(() => {
         if (showOnlySelectedItems)
@@ -22,9 +23,12 @@ const TMChooserForm = ({ children, title, allowMultipleSelection, startWithShowO
         else
             setFilteredItems(allItems);
     }, [showOnlySelectedItems, allItems, selectedRowKeys, keyName]);
+    useEffect(() => {
+        setSelectedRowCounter(selectedRowKeys);
+    }, [selectedRowKeys]);
     const getSelectedIDs = () => { return filteredItems.filter((o) => selectedRowKeys?.includes(o[keyName])).map((item) => { return convertID ? convertID(item) : item[keyName]; }); };
     const getFocusedIDs = () => { return filteredItems.filter((o) => o[keyName] == focusedRowKey).map((item) => { return convertID ? convertID(item) : item[keyName]; }); };
-    const renderTitle = () => { return title ? `${title}  (${selectedRowKeys.length}/${filteredItems.length})` : SDKUI_Localizator.Select; };
+    const renderTitle = () => { return title ? `${title}  (${selectedRowCounter.length}/${filteredItems.length})` : SDKUI_Localizator.Select; };
     const doGetItems = (refreshCache) => {
         if (dataSource) {
             setAllItems(dataSource);
@@ -35,10 +39,11 @@ const TMChooserForm = ({ children, title, allowMultipleSelection, startWithShowO
         });
     };
     const ToolbarButtons = () => {
-        return (_jsxs("div", { style: { display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-start', gap: '2px' }, children: [_jsx(TMButton, { btnStyle: 'toolbar', caption: SDKUI_Localizator.Apply, disabled: selectedRowKeys.length <= 0, icon: _jsx(IconApply, {}), color: 'success', fontSize: '1.3rem', onClick: () => { onChoose?.(getSelectedIDs()); onClose?.(); } }), hasShowId ? _jsx(TMButton, { btnStyle: 'toolbar', caption: showId ? SDKUI_Localizator.ID_Hide : SDKUI_Localizator.ID_Show, icon: showId ? _jsx(IconHide, {}) : _jsx(IconShow, {}), fontSize: '1.3rem', onClick: () => { setShowId(!showId); onShowIdChanged?.(); } }) : _jsx(_Fragment, {}), !hideRefresh && _jsx(TMButton, { btnStyle: 'toolbar', caption: SDKUI_Localizator.Refresh, icon: _jsx(IconRefresh, {}), fontSize: '1.3rem', onClick: () => { doGetItems(true); } }), customButtons, hasShowOnlySelectedItems && allowMultipleSelection && _jsx(TMToggleButton, { value: showOnlySelectedItems, elementStyle: { marginLeft: '10px' }, label: 'Mostra solo selezionati', onValueChanged: () => setShowOnlySelectedItems(!showOnlySelectedItems) })] }));
+        return (_jsxs("div", { style: { display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-start', gap: '2px' }, children: [_jsx(TMButton, { btnStyle: 'toolbar', caption: SDKUI_Localizator.Apply, disabled: selectedRowCounter.length <= 0, icon: _jsx(IconApply, {}), color: 'success', fontSize: '1.3rem', onClick: () => { onChoose?.(getSelectedIDs()); onClose?.(); } }), hasShowId ? _jsx(TMButton, { btnStyle: 'toolbar', caption: showId ? SDKUI_Localizator.ID_Hide : SDKUI_Localizator.ID_Show, icon: showId ? _jsx(IconHide, {}) : _jsx(IconShow, {}), fontSize: '1.3rem', onClick: () => { setShowId(!showId); onShowIdChanged?.(); } }) : _jsx(_Fragment, {}), !hideRefresh && _jsx(TMButton, { btnStyle: 'toolbar', caption: SDKUI_Localizator.Refresh, icon: _jsx(IconRefresh, {}), fontSize: '1.3rem', onClick: () => { doGetItems(true); } }), customButtons, hasShowOnlySelectedItems && allowMultipleSelection && _jsx(TMToggleButton, { value: showOnlySelectedItems, elementStyle: { marginLeft: '10px' }, label: 'Mostra solo selezionati', onValueChanged: () => setShowOnlySelectedItems(!showOnlySelectedItems) })] }));
     };
     const handleSelectionChanged = useCallback((e) => {
         const selectedKeys = e.component.getSelectedRowKeys() ?? [];
+        setSelectedRowCounter(selectedKeys);
         if (JSON.stringify(selectedKeys) === JSON.stringify(selectedRowKeys))
             return;
         setSelectedRowKeys(selectedKeys);

package/lib/components/query/TMQuerySummary.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { QueryDescriptor, ValidationItem } from '@topconsultnpm/sdk-ts-beta';
+interface ITMQuerySummary {
+    children?: React.ReactNode;
+    qd?: QueryDescriptor;
+    validationItems?: ValidationItem[];
+    raiseWarningForOnlyMetadataDcmtTypes?: boolean;
+    validateSelect?: boolean;
+    validateOrderBy?: boolean;
+    onValueChanged?: (value: QueryDescriptor | undefined) => void;
+    onEditClick?: () => void;
+    onClose?: () => void;
+}
+declare const TMQuerySummary: React.FunctionComponent<ITMQuerySummary>;
+export default TMQuerySummary;

package/lib/components/query/TMQuerySummary.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import styled from 'styled-components';
+import { QueryDescriptor, ResultTypes, TMScopeNames } from '@topconsultnpm/sdk-ts-beta';
+import { FontSize } from '../../utils/theme';
+import TMQueryEditor from './TMQueryEditor';
+import TMButton from '../base/TMButton';
+import { getQueryCountAsync, IconCount, IconEraser, IconPencil, SDKUI_Localizator } from '../../helper';
+import TMVilViewer from '../base/TMVilViewer';
+import { FormModes } from '../../ts';
+// #region Style
+const StyledWrapper = styled.div `
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    justify-content: flex-start;
+    width: 100%;
+    font-size: ${FontSize.defaultFontSize};
+`;
+const StyledQueryToolbar = styled.div `
+    display: flex;
+    flex-direction: column;
+    width: max-content;
+    gap: 8px;
+`;
+const TMQuerySummary = ({ children, qd, validateSelect = true, validateOrderBy = true, raiseWarningForOnlyMetadataDcmtTypes = false, validationItems = [], onValueChanged, onEditClick, onClose }) => {
+    const [showEditor, setShowEditor] = useState(false);
+    const validationItemsQd = validationItems.filter(o => o.PropertyScopes.includes(TMScopeNames.qd) || o.PropertyName == TMScopeNames.qd);
+    return (_jsxs(StyledWrapper, { children: [_jsxs(StyledQueryToolbar, { children: [_jsx(TMButton, { caption: SDKUI_Localizator.QueryDefine, icon: _jsx(IconPencil, { fontSize: 16 }), btnStyle: 'toolbar', onClick: () => onEditClick ? onEditClick() : setShowEditor(!showEditor) }), _jsx(TMButton, { caption: SDKUI_Localizator.QueryCount, icon: _jsx(IconCount, { fontSize: 16 }), disabled: validationItemsQd.filter(o => o.ResultType == ResultTypes.ERROR).length > 0, btnStyle: 'toolbar', onClick: () => getQueryCountAsync(qd, true) }), _jsx(TMButton, { caption: SDKUI_Localizator.QueryClear, icon: _jsx(IconEraser, { fontSize: 16 }), btnStyle: 'toolbar', onClick: () => onValueChanged?.(new QueryDescriptor()) }), children] }), _jsxs("div", { style: { display: 'flex', flexDirection: 'column', width: '100%', overflowX: 'auto' }, children: [qd && qd.from &&
+                        _jsx(TMQueryEditor, { formMode: FormModes.ReadOnly, inputData: qd, isModal: false, showToolbar: false, validateSelect: validateSelect, validateOrderBy: validateOrderBy, raiseWarningForOnlyMetadataDcmtTypes: raiseWarningForOnlyMetadataDcmtTypes }), _jsx("div", { style: { padding: '0px 5px' }, children: _jsx(TMVilViewer, { vil: validationItemsQd }) })] })] }));
+};
+export default TMQuerySummary;

package/lib/stories/TMHtmlContentDisplay.stories.js

@@ -1,25 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
 import TMHtmlContentDisplay from '../components/editors/TMHtmlContentDisplay';
 const sampleMarkup = `
   <p>This is a <strong>sample</strong> paragraph with <a target="_blank" href="https://www.google.com/">a link</a>.</p>
-  <p>Another paragraph with the word</p>
+  <p>Another paragraph with the word <u>sample</u> and some <em>emphasized</em> content.</p>
   <ul>
     <li>First item</li>
-    <li>Second item</li>
+    <li>Second item with <u>underline</u> and <em>emphasis</em></li>
   </ul>
+  <ol>
+    <li>Ordered item one</li>
+    <li>Ordered item <em>two</em> with a sample word</li>
+  </ol>
+  <p>Check out this URL: https://www.example.com</p>
 `;
 const meta = {
     title: 'Components/TMHtmlContentDisplay',
     component: TMHtmlContentDisplay,
-    args: {
-        markup: sampleMarkup,
-        isSelected: false,
-        searchText: '',
+    argTypes: {
+        searchText: { control: false }, // Disable default control
     },
 };
 export default meta;
 export const Default = {
+    render: (args) => {
+        const [searchText, setSearchText] = useState(args.searchText || '');
+        return (_jsxs("div", { style: { padding: 20 }, children: [_jsx("input", { type: "text", placeholder: "Search text...", value: searchText, onChange: (e) => setSearchText(e.target.value), style: {
+                        marginBottom: '1rem',
+                        padding: '0.5rem',
+                        width: '100%',
+                        maxWidth: '300px',
+                        fontSize: '1rem',
+                    } }), _jsx(TMHtmlContentDisplay, { ...args, searchText: searchText })] }));
+    },
     args: {
+        markup: sampleMarkup,
         isSelected: false,
-        searchText: 'sample',
+        searchText: '',
     },
 };

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

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from '@storybook/react';
+import TMHtmlEditor from '../components/editors/TMHtmlEditor';
+declare const meta: Meta<typeof TMHtmlEditor>;
+export default meta;
+type Story = StoryObj<typeof TMHtmlEditor>;
+export declare const Default: Story;

package/lib/stories/TMHtmlEditor.stories.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import TMHtmlEditor from '../components/editors/TMHtmlEditor';
+const meta = {
+    title: 'Components/TMHtmlEditor',
+    component: TMHtmlEditor,
+    argTypes: {
+        onValueChanged: { control: false },
+    },
+};
+export default meta;
+export const Default = {
+    render: (args) => {
+        const [content, setContent] = useState('');
+        const [mentionsConfig, setMentionsConfig] = useState([]);
+        useEffect(() => {
+            const mentions = [{
+                    dataSource: [{ text: 'John Doe', icon: '👤' }, { text: 'Jane Smith', icon: '👩' },],
+                    searchExpr: 'text',
+                    displayExpr: 'text',
+                    valueExpr: 'text',
+                    itemTemplate: function (itemData) {
+                        return `<div style="display: flex; align-items: center; justify-content: center; gap: 8px; height: 100%;">
+                            ${itemData.icon}
+                            <span>${itemData.text}</span>
+                        </div>`;
+                    },
+                }];
+            setMentionsConfig(mentions);
+        }, []);
+        const handleValueChange = (e) => {
+            setContent(e.value);
+        };
+        return (_jsxs("div", { style: { padding: 20 }, children: [_jsx(TMHtmlEditor, { ...args, onValueChanged: handleValueChange, isEditorEnabled: true, mentionsConfig: mentionsConfig }), _jsxs("div", { style: { marginTop: '1rem', padding: '0.5rem', backgroundColor: '#f5f5f5' }, children: [_jsx("h4", { children: "Editor Output:" }), _jsx("div", { dangerouslySetInnerHTML: { __html: content } })] })] }));
+    },
+};

package/package.json

@@ -1,54 +1,54 @@
 {
-    "name": "@topconsultnpm/sdkui-react-beta",
-    "version": "6.12.24",
-    "description": "",
-    "scripts": {
-        "test": "echo \"Error: no test specified\" && exit 1",
-        "clean": "powershell Remove-Item lib/ -recurse",
-        "copy-files": "copyfiles -u 1 src/assets/*.* src/assets/ImageLibrary/*.* src/assets/thumbnails/*.* src/assets/Metadata/*.* src/css/tm-sdkui.css lib/",
-        "tm-build": "npm run clean && tsc && npm run copy-files",
-        "tm-publish": "npm publish",
-        "storybook": "storybook dev -p 6006",
-        "build-storybook": "storybook build"
-    },
-    "author": "TopConsult",
-    "license": "ISC",
-    "devDependencies": {
-        "@chromatic-com/storybook": "^3.2.4",
-        "@storybook/addon-essentials": "^8.6.10",
-        "@storybook/addon-interactions": "^8.6.10",
-        "@storybook/addon-onboarding": "^8.6.10",
-        "@storybook/blocks": "^8.6.10",
-        "@storybook/react": "^8.6.10",
-        "@storybook/react-vite": "^8.6.10",
-        "@storybook/test": "^8.6.10",
-        "@types/node": "^20.2.5",
-        "@types/react": "^18.2.7",
-        "@types/react-dom": "^18.2.4",
-        "copyfiles": "^2.4.1",
-        "esbuild": "^0.25.0",
-        "react": "^18.2.0",
-        "react-dom": "^18.2.0",
-        "storybook": "^8.6.10",
-        "typescript": "^5.3.2",
-        "vite": "^6.1.1"
-    },
-    "main": "dist/cjs/index.js",
-    "types": "./index.d.ts",
-    "module": "lib/esm/index.js",
-    "files": [
-        "dist",
-        "lib"
-    ],
-    "dependencies": {
-        "@topconsultnpm/sdk-ts-beta": "^6.12.0",
-        "buffer": "^6.0.3",
-        "devextreme": "24.2.6",
-        "devextreme-react": "24.2.6",
-        "react-router-dom": "^6.15.0",
-        "styled-components": "^6.1.1"
-    },
-    "overrides": {
-        "esbuild": "^0.25.0"
-    }
+  "name": "@topconsultnpm/sdkui-react-beta",
+  "version": "6.12.26",
+  "description": "",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "clean": "powershell Remove-Item lib/ -recurse",
+    "copy-files": "copyfiles -u 1 src/assets/*.* src/assets/ImageLibrary/*.* src/assets/thumbnails/*.* src/assets/Metadata/*.* src/css/tm-sdkui.css lib/",
+    "tm-build": "npm run clean && tsc && npm run copy-files",
+    "tm-publish": "npm publish",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "author": "TopConsult",
+  "license": "ISC",
+  "devDependencies": {
+    "@chromatic-com/storybook": "^3.2.6",
+    "@storybook/addon-essentials": "^8.6.12",
+    "@storybook/addon-interactions": "^8.6.12",
+    "@storybook/addon-onboarding": "^8.6.12",
+    "@storybook/blocks": "^8.6.12",
+    "@storybook/react": "^8.6.12",
+    "@storybook/react-vite": "^8.6.12",
+    "@storybook/test": "^8.6.12",
+    "@types/node": "^20.2.5",
+    "@types/react": "^18.2.7",
+    "@types/react-dom": "^18.2.4",
+    "copyfiles": "^2.4.1",
+    "esbuild": "^0.25.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "storybook": "^8.6.12",
+    "typescript": "^5.3.2",
+    "vite": "^6.1.1"
+  },
+  "main": "dist/cjs/index.js",
+  "types": "./index.d.ts",
+  "module": "lib/esm/index.js",
+  "files": [
+    "dist",
+    "lib"
+  ],
+  "dependencies": {
+    "@topconsultnpm/sdk-ts-beta": "^6.12.0",
+    "buffer": "^6.0.3",
+    "devextreme": "24.2.6",
+    "devextreme-react": "24.2.6",
+    "react-router-dom": "^6.15.0",
+    "styled-components": "^6.1.1"
+  },
+  "overrides": {
+    "esbuild": "^0.25.0"
+  }
 }