@topconsultnpm/sdkui-react-beta 6.13.15 → 6.13.16

package/lib/components/base/TMPanel.d.ts

@@ -15,6 +15,7 @@ export interface ITMPanelProps extends ITMRightSidebarProps {
     onBack?: () => void;
     onClose?: () => void;
     onHeaderDoubleClick?: () => void;
+    onMaximize?: (isMaximized: boolean) => void;
 }
 declare const TMPanel: React.FC<ITMPanelProps>;
 export default TMPanel;

package/lib/components/base/TMPanel.js

@@ -69,7 +69,7 @@ const StyledInnerPanelDiv = styled.div `
         outline: none;
     }
 `;
-const TMPanel = ({ allowMaximize = true, items = [], onItemClick, selectedItem, showPanel, color, backgroundColor, backgroundColorContainer, children, showHeader = true, title, totalItems, displayedItemsCount, toolbar, padding = '5px', onBack, onClose, onHeaderDoubleClick }) => {
+const TMPanel = ({ allowMaximize = true, items = [], onItemClick, selectedItem, showPanel, color, backgroundColor, backgroundColorContainer, children, showHeader = true, title, totalItems, displayedItemsCount, toolbar, padding = '5px', onBack, onClose, onHeaderDoubleClick, onMaximize }) => {
     const [isActive, setIsActive] = useState(false);
     const [isMaximized, setIsMaximized] = useState(false);
     const [minWidth, setMinWidth] = useState(undefined);
@@ -79,7 +79,17 @@ const TMPanel = ({ allowMaximize = true, items = [], onItemClick, selectedItem,
             setMinWidth(titleRowRef.current.offsetWidth);
         }
     }, [title, displayedItemsCount, totalItems, onBack]);
-    return (_jsxs(StyledPanelContainer, { "$isMaximized": isMaximized, style: minWidth ? { minWidth } : undefined, children: [showHeader &&
+    // handler for external maximize management
+    const handleMaximize = () => {
+        setIsMaximized(prevState => {
+            const newValue = !prevState;
+            if (onMaximize) {
+                onMaximize(newValue);
+            }
+            return newValue;
+        });
+    };
+    return (_jsxs(StyledPanelContainer, { "$isMaximized": onMaximize ? false : isMaximized, style: minWidth ? { minWidth } : undefined, children: [showHeader &&
                 _jsx(StyledPanelHeader, { "$backgroundColor": backgroundColor, "$color": color, "$isActive": isActive, onDoubleClick: () => { if (onHeaderDoubleClick)
                         onHeaderDoubleClick(); }, tabIndex: -1, onFocus: () => setIsActive(true), onBlur: () => setIsActive(false), onClick: () => setIsActive(true), children: _jsxs("div", { style: { display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', width: '100%' }, children: [_jsxs("div", { ref: titleRowRef, style: { display: 'flex', flexDirection: 'row', alignItems: 'center', gap: '8px' }, children: [onBack &&
                                         _jsx(TMButton, { btnStyle: 'icon', icon: _jsx(IconArrowLeft, {}), caption: SDKUI_Localizator.Back, onClick: onBack }), _jsx("div", { style: { display: 'flex', flexDirection: 'row', alignItems: 'center' }, children: _jsxs("p", { style: {
@@ -93,7 +103,7 @@ const TMPanel = ({ allowMaximize = true, items = [], onItemClick, selectedItem,
                                                         ? ` (${totalItems})`
                                                         : ''] }) })] }), _jsxs("div", { style: { display: 'flex', flexDirection: 'row', alignItems: 'center', gap: '5px' }, children: [toolbar, allowMaximize && _jsx(TMButton, { color: 'primaryOutline', caption: isMaximized ? SDKUI_Localizator.Minimize : SDKUI_Localizator.Maximize, icon: isMaximized
                                             ? _jsx(IconWindowMinimize, { fontSize: 16 })
-                                            : _jsx(IconWindowMaximize, { fontSize: 16 }), btnStyle: 'icon', onClick: () => setIsMaximized(m => !m) }), onClose && _jsx(TMButton, { color: 'primaryOutline', caption: SDKUI_Localizator.Close, icon: _jsx(IconClearButton, {}), btnStyle: 'icon', onClick: () => { setIsMaximized(false); onClose?.(); } })] })] }) }), _jsxs(StyledPanelContent, { "$height": showHeader ? "calc(100% - 40px)" : "100%", "$padding": padding, "$backgroundColor": backgroundColorContainer ?? `#FFFFFF`, tabIndex: -1, onFocus: () => setIsActive(true), onBlur: () => setIsActive(false), onClick: () => setIsActive(true), children: [_jsx(StyledInnerPanelDiv, { style: { width: items.length > 0 ? 'calc(100% - 30px)' : '100%' }, tabIndex: -1, onFocus: () => setIsActive(true), onBlur: () => setIsActive(false), onClick: () => setIsActive(true), children: children }), items.length > 0 &&
+                                            : _jsx(IconWindowMaximize, { fontSize: 16 }), btnStyle: 'icon', onClick: handleMaximize }), onClose && _jsx(TMButton, { color: 'primaryOutline', caption: SDKUI_Localizator.Close, icon: _jsx(IconClearButton, {}), btnStyle: 'icon', onClick: () => { setIsMaximized(false); onClose?.(); } })] })] }) }), _jsxs(StyledPanelContent, { "$height": showHeader ? "calc(100% - 40px)" : "100%", "$padding": padding, "$backgroundColor": backgroundColorContainer ?? `#FFFFFF`, tabIndex: -1, onFocus: () => setIsActive(true), onBlur: () => setIsActive(false), onClick: () => setIsActive(true), children: [_jsx(StyledInnerPanelDiv, { style: { width: items.length > 0 ? 'calc(100% - 30px)' : '100%' }, tabIndex: -1, onFocus: () => setIsActive(true), onBlur: () => setIsActive(false), onClick: () => setIsActive(true), children: children }), items.length > 0 &&
                         _jsx(TMRightSidebar, { items: items, onItemClick: onItemClick, selectedItem: selectedItem, showPanel: showPanel })] })] }));
 };
 export default TMPanel;

package/lib/components/choosers/TMDistinctValues.d.ts

@@ -7,6 +7,7 @@ interface ITMDistinctValues {
     separator?: string;
     allowAppendMode?: boolean;
     showHeader?: boolean;
+    isModal?: boolean;
     onSelectionChanged?: (e: DistinctValuesEventArgs) => void;
     onClosePanelCallback?: () => void;
 }

package/lib/components/choosers/TMDistinctValues.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { LayoutModes, MetadataDataDomains, AccessLevels, MetadataDataTypes, SDK_Globals, DcmtTypeListCacheService, DataColumnTypes } from '@topconsultnpm/sdk-ts-beta';
 import styled from 'styled-components';
@@ -9,9 +9,10 @@ import { TMExceptionBoxManager } from '../base/TMPopUp';
 import TMSpinner from '../base/TMSpinner';
 import TMCheckBox from '../editors/TMCheckBox';
 import TMPanel from '../base/TMPanel';
+import TMModal from '../base/TMModal';
 const StyledDistinctValues = styled.div `display: flex; flex-direction: column; height: 100%; overflow: hidden; gap: 10px;`;
 const StyledPanelContainer = styled.div ` width: 100%; height: 100%; padding: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; `;
-const TMDistinctValues = ({ tid, mid, layoutMode = LayoutModes.None, allowAppendMode = true, showHeader = true, separator = " ", onSelectionChanged, onClosePanelCallback }) => {
+const TMDistinctValues = ({ tid, mid, layoutMode = LayoutModes.None, allowAppendMode = true, showHeader = true, isModal, separator = " ", onSelectionChanged, onClosePanelCallback }) => {
     const [focusedItem, setFocusedItem] = useState();
     const [dataSource, setDataSource] = useState([]);
     const [isAppendMode, setIsAppendMode] = useState(false);
@@ -141,8 +142,13 @@ const TMDistinctValues = ({ tid, mid, layoutMode = LayoutModes.None, allowAppend
             return false;
         return md.dataDomain === undefined || md.dataDomain === MetadataDataDomains.None;
     };
-    return (_jsx(TMPanel, { title: SDKUI_Localizator.DistinctValues + (md?.nameLoc ? ` (${md?.nameLoc})` : ''), showHeader: showHeader, onClose: onClosePanelCallback, children: showPrompt
-            ? _jsxs(StyledPanelContainer, { children: [_jsx(IconDataList, { fontSize: 96 }), _jsxs("p", { children: ["Caricare i valori distinti di ", _jsx("strong", { children: `"${md?.nameLoc}" ` }), "? "] }), _jsx(TMButton, { caption: SDKUI_Localizator.Yes, onClick: handleLoadData, showTooltip: false })] })
-            : _jsxs(StyledDistinctValues, { children: [isVisibleAppend() && _jsx(TMCheckBox, { elementStyle: { position: 'absolute', right: '15px', top: '15px', zIndex: 10000 }, label: 'Accoda', value: isAppendMode, onValueChanged: () => { setIsAppendMode(!isAppendMode); } }), _jsx(TMDataGrid, { focusedRowKey: focusedItem ? focusedItem.rowIndex : undefined, selection: { showCheckBoxesMode: 'none' }, searchPanel: { highlightCaseSensitive: true, visible: true }, dataColumns: customColumns, dataSource: dataSource, keyExpr: 'rowIndex', height: 'calc(100%)', onFocusedRowChanged: onFocusedRowChanged, paging: { pageSize: 30 }, summary: customSummary })] }) }));
+    const renderContent = () => {
+        return (_jsx(_Fragment, { children: showPrompt
+                ? _jsxs(StyledPanelContainer, { children: [_jsx(IconDataList, { fontSize: 96 }), _jsxs("p", { children: ["Caricare i valori distinti di ", _jsx("strong", { children: `"${md?.nameLoc}" ` }), "? "] }), _jsx(TMButton, { caption: SDKUI_Localizator.Yes, onClick: handleLoadData, showTooltip: false })] })
+                : _jsxs(StyledDistinctValues, { children: [isVisibleAppend() && _jsx(TMCheckBox, { elementStyle: { position: 'absolute', right: '15px', top: '15px', zIndex: 10000 }, label: 'Accoda', value: isAppendMode, onValueChanged: () => { setIsAppendMode(!isAppendMode); } }), _jsx(TMDataGrid, { focusedRowKey: focusedItem ? focusedItem.rowIndex : undefined, selection: { showCheckBoxesMode: 'none' }, searchPanel: { highlightCaseSensitive: true, visible: true }, dataColumns: customColumns, dataSource: dataSource, keyExpr: 'rowIndex', height: 'calc(100%)', onFocusedRowChanged: onFocusedRowChanged, paging: { pageSize: 30 }, summary: customSummary })] }) }));
+    };
+    return (_jsx(_Fragment, { children: isModal
+            ? _jsx(TMModal, { title: SDKUI_Localizator.DistinctValues + (md?.nameLoc ? ` (${md?.nameLoc})` : ''), height: '600px', width: '500px', resizable: true, onClose: onClosePanelCallback, children: renderContent() })
+            : _jsx(TMPanel, { title: SDKUI_Localizator.DistinctValues + (md?.nameLoc ? ` (${md?.nameLoc})` : ''), showHeader: showHeader, onClose: onClosePanelCallback, children: renderContent() }) }));
 };
 export default TMDistinctValues;

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

@@ -13,7 +13,7 @@ export declare enum AdvancedMenuButtons {
     FormulaEditor = 2,
     DistinctValues = 3
 }
-type AdvancedMenuClickEventArgs = {
+export type AdvancedMenuClickEventArgs = {
     tid: number | undefined;
     mid: number | undefined;
     button: AdvancedMenuButtons;

package/lib/components/features/search/TMSearch.js

@@ -1,18 +1,17 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useCallback, useEffect, useState } from 'react';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { SavedQueryCacheService, DcmtTypeListCacheService, SDK_Localizator } from '@topconsultnpm/sdk-ts-beta';
 import TMSavedQuerySelector from './TMSavedQuerySelector';
 import TMTreeSelector from './TMTreeSelector';
 import { TabPanel, Item } from 'devextreme-react/tab-panel';
 import TMSearchQueryPanel, { refreshLastSearch } from './TMSearchQueryPanel';
-import { getSysAllDcmtsSQD, IconDataList, IconProgressReady, IconSavedQuery, IconTree, SDKUI_Globals, SDKUI_Localizator } from '../../../helper';
-import { TMLayoutItem, TMSplitterLayout } from '../../base/TMLayout';
-import TMPanel from '../../base/TMPanel';
+import { getSysAllDcmtsSQD, IconProgressReady, IconSavedQuery, IconTree, SDKUI_Globals, SDKUI_Localizator } from '../../../helper';
 import TMSearchResult from './TMSearchResult';
 import TMRecentsManager from '../../grids/TMRecentsManager';
 import { SearchResultContext } from '../../../ts';
 import { useDeviceType, DeviceType } from '../../base/TMDeviceProvider';
 import { StyledMultiViewPanel } from '../../base/Styled';
+import TMPanelManagerMatrix from '../../base/TMPanelManagerMatrix';
 var TMSearchViews;
 (function (TMSearchViews) {
     TMSearchViews[TMSearchViews["None"] = 0] = "None";
@@ -28,14 +27,151 @@ const TMSearch = ({ inputTID, inputSqdID, isExpertMode = SDKUI_Globals.userSetti
     const [searchResult, setSearchResult] = useState([]);
     const [mruTIDs, setMruTIDs] = useState([]);
     const [currentSearchView, setCurrentSearchView] = useState(TMSearchViews.None);
-    const [showDistinctValuesPanel, setShowDistinctValuesPanel] = useState(false);
-    const [showTreesPanel, setShowTreesPanel] = useState(true);
-    const [showRecentsPanel, setShowRecentsPanel] = useState(true);
-    const [showSavedQueryPanel, setShowSavedQueryPanel] = useState(true);
     const [currentSQDMode, setCurrentSQDMode] = useState(1);
-    const [focusedTidMid, setFocusedTidMid] = useState();
     const [lastQdSearched, setLastQdSearched] = useState();
     const deviceType = useDeviceType();
+    const panelMatrixMap = new Map([
+        [
+            "column-0",
+            {
+                width: "20%",
+                rows: [
+                    {
+                        id: 'treeSelector',
+                        height: '100%',
+                        width: '100%',
+                        content: (togglePanelVisibility) => _jsx(TMTreeSelector, { onClose: () => togglePanelVisibility({
+                                id: 'toolbar-item-treeSelector',
+                                icon: 'optionsgear',
+                                tooltipName: 'treeSelector',
+                                panelManagerMatrixRowId: 'treeSelector',
+                            }), onSelectedTIDChanged: (tid) => {
+                                setCurrentTID(tid);
+                                if (tid && mruTIDs.includes(tid))
+                                    setCurrentMruTID(tid);
+                                else
+                                    setCurrentMruTID(0);
+                            } }),
+                        hidden: false
+                    }
+                ],
+            }
+        ],
+        [
+            "column-1",
+            {
+                width: "20%",
+                rows: [
+                    {
+                        id: 'recentsManager',
+                        height: '100%',
+                        width: '100%',
+                        content: _jsx(TMRecentsManager, { mruTIDs: mruTIDs, currentMruTID: currentMruTID, deviceType: deviceType, onSelectedTID: (tid) => { setCurrentMruTID(tid); setCurrentTID(tid); }, onDeletedTID: (tid) => {
+                                let newMruTIDS = mruTIDs.slice();
+                                let index = newMruTIDS.findIndex(o => o == tid);
+                                if (index >= 0)
+                                    newMruTIDS.splice(index, 1);
+                                SDKUI_Globals.userSettings.searchSettings.mruTIDs = newMruTIDS.filter(tid => tid != undefined && tid != null);
+                                setMruTIDs(newMruTIDS);
+                            } }),
+                        hidden: false,
+                        panel: {
+                            title: "Scorciatoie",
+                            totalItems: mruTIDs.length
+                        }
+                    }
+                ],
+            }
+        ],
+        [
+            "column-2",
+            {
+                width: "40%",
+                rows: [
+                    {
+                        id: 'searchQueryPanel',
+                        height: '100%',
+                        width: '100%',
+                        content: _jsx(TMSearchQueryPanel, { isExpertMode: isExpertMode, fromDTD: fromDTD, SQD: currentSQD, onBack: deviceType !== DeviceType.DESKTOP ? () => { setCurrentTID(0); } : undefined, onSearchCompleted: (searchResult, qd) => {
+                                setSearchResult(searchResult);
+                                if (searchResult.length <= 0)
+                                    return;
+                                setLastQdSearched(qd);
+                                setCurrentSearchView(TMSearchViews.Result);
+                                // Salvataggio ultimi 10 TIDs 
+                                let fromTID = searchResult?.[0].fromTID;
+                                let newMruTIDS = mruTIDs.slice();
+                                let index = newMruTIDS.findIndex(o => o == fromTID);
+                                if (index >= 0)
+                                    newMruTIDS.splice(index, 1);
+                                if (newMruTIDS.length >= 10)
+                                    newMruTIDS.splice(0, 1);
+                                newMruTIDS.push(fromTID);
+                                setMruTIDs(newMruTIDS);
+                                setCurrentMruTID(fromTID);
+                                SDKUI_Globals.userSettings.searchSettings.mruTIDs = newMruTIDS.filter(tid => tid != undefined && tid != null);
+                            }, onSqdSaved: async (newSqd) => {
+                                await loadDataSQDsAsync(true, newSqd.masterTID);
+                                await setSQDAsync(newSqd);
+                            } }),
+                        hidden: false
+                    }
+                ],
+            }
+        ],
+        [
+            "column-4",
+            {
+                width: "20%",
+                rows: [
+                    {
+                        id: 'savedQuery',
+                        height: '100%',
+                        width: '100%',
+                        content: _jsxs(TabPanel, { width: "100%", height: "100%", showNavButtons: true, repaintChangesOnly: true, selectedIndex: currentSQDMode, onSelectedIndexChange: (index) => setCurrentSQDMode(index), children: [(currentTID || currentSQD) ? _jsx(Item, { title: fromDTD?.nameLoc, children: _jsx(TMSavedQuerySelector, { allowShowSearch: false, items: filteredByTIDSQDs, selectedId: currentSQD?.id, onRefreshData: () => { loadDataSQDsAsync(true); }, onItemClick: (sqd) => onSQDItemClick(sqd, setSQDAsync), onDeleted: (sqd) => onSQDDeleted(sqd, sqd.id == currentSQD?.id ? filteredByTIDSQDs.find(o => o.id == 1) : currentSQD, setSQDAsync) }) }) : _jsx(_Fragment, {}), _jsx(Item, { title: SDKUI_Localizator.Alls2, children: _jsx(TMSavedQuerySelector, { allowShowSearch: true, items: allSQDs, manageDefault: false, 
+                                        // selectedId={currentSQD?.id}
+                                        onItemClick: (sqd) => onSQDItemClick(sqd, setSQDAsync), onDeleted: (sqd) => onSQDDeleted(sqd, sqd.id == currentSQD?.id ? undefined : currentSQD, setSQDAsync) }) })] }),
+                        hidden: false,
+                        panel: {
+                            title: SDK_Localizator.SavedQueries
+                        }
+                    }
+                ],
+            }
+        ]
+    ]);
+    const toolbar = useMemo(() => {
+        return {
+            items: [
+                {
+                    id: 'toolbar-item-treeSelector',
+                    icon: _jsx(IconTree, {}),
+                    tooltipName: 'treeSelector',
+                    panelManagerMatrixRowId: 'treeSelector',
+                },
+                {
+                    id: 'toolbar-item-recentsManager',
+                    icon: _jsx(IconProgressReady, {}),
+                    tooltipName: 'recentsManager',
+                    panelManagerMatrixRowId: 'recentsManager',
+                },
+                {
+                    id: 'toolbar-item-searchQueryPanel',
+                    icon: _jsx(IconProgressReady, {}),
+                    tooltipName: 'searchQueryPanel',
+                    panelManagerMatrixRowId: 'searchQueryPanel',
+                    visible: deviceType === DeviceType.MOBILE
+                },
+                {
+                    id: 'toolbar-item-savedQuery',
+                    icon: _jsx(IconSavedQuery, {}),
+                    tooltipName: 'savedQuery',
+                    panelManagerMatrixRowId: 'savedQuery',
+                    // alternativePanelManagerMatrixRowId: ['distinctValues']
+                }
+            ]
+        };
+    }, [deviceType]);
     useEffect(() => {
         setMruTIDs(SDKUI_Globals.userSettings.searchSettings.mruTIDs);
         loadDataSQDsAsync(false);
@@ -123,67 +259,7 @@ const TMSearch = ({ inputTID, inputSqdID, isExpertMode = SDKUI_Globals.userSetti
         if (sqdToBeSet)
             await setSqdAsync?.(sqdToBeSet);
     }, []);
-    const rightSidebarItems = [
-        { icon: _jsx(IconTree, {}), id: 'trees', visibleName: 'Alberi', isActive: showTreesPanel, visible: true },
-        { icon: _jsx(IconProgressReady, {}), id: 'recents', visibleName: 'Recenti', isActive: showRecentsPanel, visible: true, },
-        { icon: _jsx(IconSavedQuery, {}), id: 'savedquery', visibleName: 'Ricerche rapide', isActive: showSavedQueryPanel, visible: true },
-        { icon: _jsx(IconDataList, {}), id: 'DistinctValues', visibleName: 'Valori distiniti', isActive: showDistinctValuesPanel, disabled: !focusedTidMid, visible: true }
-    ];
-    const rightSidebarItemClickHandler = (item) => {
-        switch (item.toLowerCase()) {
-            case 'trees':
-                setShowTreesPanel(!showTreesPanel);
-                break;
-            case 'recents':
-                setShowRecentsPanel(!showRecentsPanel);
-                break;
-            case 'savedquery':
-                setShowSavedQueryPanel(!showSavedQueryPanel);
-                break;
-            case 'distinctvalues':
-                setShowDistinctValuesPanel(!showDistinctValuesPanel);
-                break;
-            default: break;
-        }
-    };
-    return (_jsxs(_Fragment, { children: [_jsx(StyledMultiViewPanel, { "$isVisible": currentSearchView === TMSearchViews.None, children: _jsxs(TMSplitterLayout, { direction: 'horizontal', overflow: 'visible', showSeparator: deviceType !== DeviceType.MOBILE && showTreesPanel, separatorSize: SDKUI_Globals.userSettings.themeSettings.gutters, separatorColor: 'transparent', separatorActiveColor: 'transparent', min: ['0', '0'], start: (deviceType === DeviceType.MOBILE) ? ['100%', '0%'] : showTreesPanel ? ['20%', '80%'] : ['0%', '100%'], children: [deviceType !== DeviceType.MOBILE &&
-                            _jsx(TMTreeSelector, { onClose: () => setShowTreesPanel(false), onSelectedTIDChanged: (tid) => {
-                                    setCurrentTID(tid);
-                                    if (tid && mruTIDs.includes(tid))
-                                        setCurrentMruTID(tid);
-                                    else
-                                        setCurrentMruTID(0);
-                                } }), _jsxs(TMSplitterLayout, { direction: 'horizontal', overflow: 'visible', showSeparator: deviceType !== DeviceType.MOBILE && showSavedQueryPanel && !showDistinctValuesPanel, separatorSize: SDKUI_Globals.userSettings.themeSettings.gutters, separatorColor: 'transparent', separatorActiveColor: 'transparent', min: ['0', '0'], start: (deviceType === DeviceType.MOBILE || showDistinctValuesPanel) ? ['100%', '0%'] : ((showSavedQueryPanel) ? ['70%', '30%'] : ['100%', '0%']), children: [_jsx(TMLayoutItem, { children: _jsxs(TMSplitterLayout, { direction: 'horizontal', overflow: 'visible', showSeparator: deviceType !== DeviceType.MOBILE && showRecentsPanel, separatorSize: SDKUI_Globals.userSettings.themeSettings.gutters, separatorColor: 'transparent', separatorActiveColor: 'transparent', min: ['0', '0'], start: deviceType === DeviceType.DESKTOP ? (showRecentsPanel ? ['30%', '70%'] : ['0%', '100%']) : (currentTID ? ['0%', '100%'] : ['100%', '0%']), children: [_jsx(TMPanel, { title: "Scorciatoie", totalItems: mruTIDs.length, onClose: () => setShowRecentsPanel(false), children: _jsx(TMRecentsManager, { mruTIDs: mruTIDs, currentMruTID: currentMruTID, deviceType: deviceType, onSelectedTID: (tid) => { setCurrentMruTID(tid); setCurrentTID(tid); }, onDeletedTID: (tid) => {
-                                                        let newMruTIDS = mruTIDs.slice();
-                                                        let index = newMruTIDS.findIndex(o => o == tid);
-                                                        if (index >= 0)
-                                                            newMruTIDS.splice(index, 1);
-                                                        SDKUI_Globals.userSettings.searchSettings.mruTIDs = newMruTIDS.filter(tid => tid != undefined && tid != null);
-                                                        setMruTIDs(newMruTIDS);
-                                                    } }) }), _jsx(TMSearchQueryPanel, { isExpertMode: isExpertMode, fromDTD: fromDTD, SQD: currentSQD, isOpenDistinctValuesPanel: showDistinctValuesPanel, rightSidebarItems: rightSidebarItems, onBack: deviceType !== DeviceType.DESKTOP ? () => { setCurrentTID(0); } : undefined, onFocusedMetadataChanged: setFocusedTidMid, onRightSidebarItemClick: rightSidebarItemClickHandler, onCloseDistinctValuesPanel: () => setShowDistinctValuesPanel(false), onSearchCompleted: (searchResult, qd) => {
-                                                    setSearchResult(searchResult);
-                                                    if (searchResult.length <= 0)
-                                                        return;
-                                                    setLastQdSearched(qd);
-                                                    setCurrentSearchView(TMSearchViews.Result);
-                                                    // Salvataggio ultimi 10 TIDs 
-                                                    let fromTID = searchResult?.[0].fromTID;
-                                                    let newMruTIDS = mruTIDs.slice();
-                                                    let index = newMruTIDS.findIndex(o => o == fromTID);
-                                                    if (index >= 0)
-                                                        newMruTIDS.splice(index, 1);
-                                                    if (newMruTIDS.length >= 10)
-                                                        newMruTIDS.splice(0, 1);
-                                                    newMruTIDS.push(fromTID);
-                                                    setMruTIDs(newMruTIDS);
-                                                    setCurrentMruTID(fromTID);
-                                                    SDKUI_Globals.userSettings.searchSettings.mruTIDs = newMruTIDS.filter(tid => tid != undefined && tid != null);
-                                                }, onSqdSaved: async (newSqd) => {
-                                                    await loadDataSQDsAsync(true, newSqd.masterTID);
-                                                    await setSQDAsync(newSqd);
-                                                } })] }) }), _jsx(StyledMultiViewPanel, { "$isVisible": !showDistinctValuesPanel, children: _jsx(TMLayoutItem, { children: _jsx(TMPanel, { title: SDK_Localizator.SavedQueries, onClose: () => setShowSavedQueryPanel(false), children: _jsxs(TabPanel, { width: "100%", height: "100%", showNavButtons: true, repaintChangesOnly: true, selectedIndex: currentSQDMode, onSelectedIndexChange: (index) => setCurrentSQDMode(index), children: [(currentTID || currentSQD) ? _jsx(Item, { title: fromDTD?.nameLoc, children: _jsx(TMSavedQuerySelector, { allowShowSearch: false, items: filteredByTIDSQDs, selectedId: currentSQD?.id, onRefreshData: () => { loadDataSQDsAsync(true); }, onItemClick: (sqd) => onSQDItemClick(sqd, setSQDAsync), onDeleted: (sqd) => onSQDDeleted(sqd, sqd.id == currentSQD?.id ? filteredByTIDSQDs.find(o => o.id == 1) : currentSQD, setSQDAsync) }) }) : _jsx(_Fragment, {}), _jsx(Item, { title: SDKUI_Localizator.Alls2, children: _jsx(TMSavedQuerySelector, { allowShowSearch: true, items: allSQDs, manageDefault: false, 
-                                                            // selectedId={currentSQD?.id}
-                                                            onItemClick: (sqd) => onSQDItemClick(sqd, setSQDAsync), onDeleted: (sqd) => onSQDDeleted(sqd, sqd.id == currentSQD?.id ? undefined : currentSQD, setSQDAsync) }) })] }) }) }) })] })] }) }), _jsx(StyledMultiViewPanel, { "$isVisible": currentSearchView === TMSearchViews.Result, children: searchResult.length > 0 &&
+    return (_jsxs(_Fragment, { children: [_jsx(StyledMultiViewPanel, { "$isVisible": currentSearchView === TMSearchViews.None, children: _jsx(TMPanelManagerMatrix, { panelMatrixMap: panelMatrixMap, toolbar: toolbar, initialMobilePanelID: "recentsManager" }) }), _jsx(StyledMultiViewPanel, { "$isVisible": currentSearchView === TMSearchViews.Result, children: searchResult.length > 0 &&
                     _jsx(TMSearchResult, { context: SearchResultContext.METADATA_SEARCH, searchResults: searchResult, onRefreshAfterAddDcmtToFavs: onRefreshAfterAddDcmtToFavs, onRefreshSearchAsync: async () => {
                             // setSearchResult([]);
                             setSearchResult(await refreshLastSearch(lastQdSearched) ?? []);

package/lib/components/features/search/TMSearchQueryEditor.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import { DcmtTypeDescriptor, QueryDescriptor } from '@topconsultnpm/sdk-ts-beta';
 import { TID_MID } from '../../../ts';
+import { AdvancedMenuClickEventArgs } from '../../editors/TMMetadataValues';
 interface ITMSearchQueryEditorProps {
     qd: QueryDescriptor | undefined;
     fromDTD?: DcmtTypeDescriptor;
@@ -9,6 +10,7 @@ interface ITMSearchQueryEditorProps {
     showAllMdWhere?: boolean;
     isOpenDistinctValuesPanel: boolean;
     onQdChanged?: (qd: QueryDescriptor) => void;
+    onAdvancedMenuClick?: (e: AdvancedMenuClickEventArgs) => void;
     onFocusedMetadataChanged?: (tid_mid: TID_MID | undefined) => void;
 }
 declare const TMSearchQueryEditor: React.FunctionComponent<ITMSearchQueryEditorProps>;

package/lib/components/features/search/TMSearchQueryEditor.js

@@ -13,6 +13,7 @@ import { FormulaHelper } from '../../editors/TMFormulaEditor';
 import TMMetadataEditor, { useMetadataEditableList } from '../../editors/TMMetadataEditor';
 import { colorOperator, StyledItemWrapper, StyledRowItem } from '../../query/TMQueryEditor';
 import { TMMidViewer } from '../../viewers/TMMidViewer';
+import { AdvancedMenuButtons } from '../../editors/TMMetadataValues';
 const StyledMetadataListItem = styled.div `
     padding: 5px;
     border-radius: 8px;
@@ -27,7 +28,7 @@ const StyledMetadataListItem = styled.div `
         cursor: pointer;
     }
 `;
-const TMSearchQueryEditor = ({ qd, fromDTD, dcmtTypesList = [], isOpenDistinctValuesPanel, isExpertMode = SDKUI_Globals.userSettings.advancedSettings.expertMode === 1, showAllMdWhere, onQdChanged, onFocusedMetadataChanged }) => {
+const TMSearchQueryEditor = ({ qd, fromDTD, dcmtTypesList = [], isOpenDistinctValuesPanel, isExpertMode = SDKUI_Globals.userSettings.advancedSettings.expertMode === 1, showAllMdWhere, onQdChanged, onFocusedMetadataChanged, onAdvancedMenuClick }) => {
     const [dynDataListsToBeRefreshed, setDynDataListsToBeRefreshed] = useState([]);
     const [showDistinctValuesPanel, setShowDistinctValuesPanel] = useState(false);
     const [currentEditingMID, setCurrentEditingMID] = useState(0);
@@ -134,10 +135,27 @@ const TMSearchQueryEditor = ({ qd, fromDTD, dcmtTypesList = [], isOpenDistinctVa
         let md = dtd.metadata?.find(o => o.id == mid);
         if (!md)
             return [];
-        let menu = [
-            { text: isEditable ? SDKUI_Localizator.Restore : SDKUI_Localizator.MakeEditable, icon: isEditable ? _jsx(IconUndo, {}) : _jsx(IconPencil, {}), onClick: () => { addOrRemoveEditableList(mid); } },
-            { text: SDKUI_Localizator.DistinctValues, icon: _jsx(IconDataList, {}), onClick: () => { handleMetadataSelection(tid, mid); setShowDistinctValuesPanel(!showDistinctValuesPanel); } }
-        ];
+        let menu = [];
+        // Show MakeEditable/Restore only if isExpertMode is true
+        if (isExpertMode) {
+            menu.push({
+                text: isEditable ? SDKUI_Localizator.Restore : SDKUI_Localizator.MakeEditable,
+                icon: isEditable ? _jsx(IconUndo, {}) : _jsx(IconPencil, {}),
+                onClick: () => {
+                    addOrRemoveEditableList(mid);
+                    onAdvancedMenuClick?.({ tid: tid, mid: mid, button: AdvancedMenuButtons.MakeEditable });
+                }
+            });
+        }
+        menu.push({
+            text: SDKUI_Localizator.DistinctValues,
+            icon: _jsx(IconDataList, {}),
+            onClick: () => {
+                handleMetadataSelection(tid, mid);
+                setShowDistinctValuesPanel(!showDistinctValuesPanel);
+                onAdvancedMenuClick?.({ tid: tid, mid: mid, button: AdvancedMenuButtons.DistinctValues });
+            }
+        });
         return menu;
     };
     return (_jsx(_Fragment, { children: deviceType === DeviceType.MOBILE ?
@@ -202,7 +220,7 @@ const TMSearchQueryEditor = ({ qd, fromDTD, dcmtTypesList = [], isOpenDistinctVa
                                             ? _jsx(IconFunction, { color: "#1a89d3", fontSize: 14, style: { position: "absolute", top: '-5px', left: '-10px' } })
                                             : (isEditableList(whereItem.mid))
                                                 ? _jsx(IconPencil, { color: "#138603", fontSize: 14, style: { position: "absolute", top: '-5px', left: '-10px' } })
-                                                : _jsx(_Fragment, {})] }), isExpertMode && _jsx("div", { style: { gridColumn: 4 }, children: _jsx(TMDropDownMenu, { backgroundColor: 'white', color: TMColors.button_icon, borderRadius: '3px', content: _jsx(TMButton, { btnStyle: 'icon', icon: _jsx(IconMenuVertical, {}), showTooltip: false }), items: getAdvancedMenuItems(whereItem.tid, whereItem.mid) }) })] }, `${whereItem.tid}_${whereItem.mid}_${index}`));
+                                                : _jsx(_Fragment, {})] }), _jsx("div", { style: { gridColumn: 4 }, children: _jsx(TMDropDownMenu, { backgroundColor: 'white', color: TMColors.button_icon, borderRadius: '3px', content: _jsx(TMButton, { btnStyle: 'icon', icon: _jsx(IconMenuVertical, {}), showTooltip: false }), items: getAdvancedMenuItems(whereItem.tid, whereItem.mid) }) })] }, `${whereItem.tid}_${whereItem.mid}_${index}`));
                     }) }) }));
 };
 export default TMSearchQueryEditor;

package/lib/components/features/search/TMSearchQueryPanel.d.ts

@@ -5,14 +5,12 @@ import { ITMRightSidebarItem } from '../../base/TMRightSidebar';
 interface ITMSearchQueryPanelProps {
     fromDTD?: DcmtTypeDescriptor;
     SQD?: SavedQueryDescriptor;
-    isOpenDistinctValuesPanel?: boolean;
     rightSidebarItems?: ITMRightSidebarItem[];
     isExpertMode?: boolean;
     onBack?: () => void;
     onRightSidebarItemClick?: (item: string) => void;
     onSqdSaved?: (newSqd: SavedQueryDescriptor) => void;
     onFocusedMetadataChanged?: (tid_mid: TID_MID | undefined) => void;
-    onCloseDistinctValuesPanel?: () => void;
     onSearchCompleted?: (searchResult: SearchResultDescriptor[], qd: QueryDescriptor | undefined) => void;
 }
 declare const TMSearchQueryPanel: React.FunctionComponent<ITMSearchQueryPanelProps>;

package/lib/components/features/search/TMSearchQueryPanel.js

@@ -8,12 +8,12 @@ import { getDcmtTypesByQdAsync, SDKUI_Localizator, getQD, IconMenuVertical, Icon
 import { useQueryParametersDialog } from '../../../hooks/useQueryParametersDialog';
 import { FormModes } from '../../../ts';
 import { TMColors } from '../../../utils/theme';
-import { StyledModalContainer, StyledMultiViewPanel } from '../../base/Styled';
+import { StyledModalContainer } from '../../base/Styled';
 import ShowAlert from '../../base/TMAlert';
 import TMButton from '../../base/TMButton';
 import { useDeviceType, DeviceType } from '../../base/TMDeviceProvider';
 import TMDropDownMenu from '../../base/TMDropDownMenu';
-import TMLayoutContainer, { TMSplitterLayout, TMLayoutItem } from '../../base/TMLayout';
+import TMLayoutContainer, { TMLayoutItem } from '../../base/TMLayout';
 import { TMExceptionBoxManager } from '../../base/TMPopUp';
 import TMSpinner from '../../base/TMSpinner';
 import TMPanel from '../../base/TMPanel';
@@ -21,7 +21,8 @@ import TMDistinctValues from '../../choosers/TMDistinctValues';
 import { TMMetadataChooserForm } from '../../choosers/TMMetadataChooser';
 import TMQueryEditor from '../../query/TMQueryEditor';
 import TMSavedQueryForm from './TMSavedQueryForm';
-const TMSearchQueryPanel = ({ fromDTD, rightSidebarItems, isExpertMode = SDKUI_Globals.userSettings.advancedSettings.expertMode === 1, isOpenDistinctValuesPanel = false, SQD, onRightSidebarItemClick, onSearchCompleted, onFocusedMetadataChanged, onCloseDistinctValuesPanel, onSqdSaved, onBack }) => {
+import { AdvancedMenuButtons } from '../../editors/TMMetadataValues';
+const TMSearchQueryPanel = ({ fromDTD, rightSidebarItems, isExpertMode = SDKUI_Globals.userSettings.advancedSettings.expertMode === 1, SQD, onRightSidebarItemClick, onSearchCompleted, onFocusedMetadataChanged, onSqdSaved, onBack }) => {
     const [confirmQueryParams, ConfirmQueryParamsDialog] = useQueryParametersDialog();
     const [qd, setQd] = useState();
     const [lastQdParams, setLastQdParams] = useState([]);
@@ -33,6 +34,7 @@ const TMSearchQueryPanel = ({ fromDTD, rightSidebarItems, isExpertMode = SDKUI_G
     const [showFiltersConfig, setShowFiltersConfig] = useState(false);
     const [showOutputConfig, setShowOutputConfig] = useState(false);
     const [showOrderByConfig, setShowOrderByConfig] = useState(false);
+    const [showDistinctValuesPanel, setShowDistinctValuesPanel] = useState(false);
     const [focusedTidMid, setFocusedTidMid] = useState();
     const deviceType = useDeviceType();
     let initialMaxItems = deviceType === DeviceType.MOBILE ? 8 : 12;
@@ -98,7 +100,7 @@ const TMSearchQueryPanel = ({ fromDTD, rightSidebarItems, isExpertMode = SDKUI_G
             }
         }
     };
-    return (_jsxs(TMSplitterLayout, { direction: 'horizontal', overflow: 'visible', showSeparator: deviceType !== DeviceType.MOBILE && isOpenDistinctValuesPanel, separatorSize: 20, separatorColor: 'transparent', separatorActiveColor: 'transparent', min: ['0', '0'], start: deviceType === DeviceType.MOBILE ? ['100%', '0%'] : (isOpenDistinctValuesPanel ? ['55%', '45%'] : ['100%', '0%']), children: [_jsxs(TMPanel, { title: fromDTD?.nameLoc ?? SDKUI_Localizator.Search_Metadata, items: rightSidebarItems, onItemClick: onRightSidebarItemClick, onBack: onBack, toolbar: _jsx(_Fragment, { children: (SQD && !showSqdForm) ?
+    return (_jsxs(_Fragment, { children: [_jsxs(TMPanel, { title: fromDTD?.nameLoc ?? SDKUI_Localizator.Search_Metadata, items: rightSidebarItems, onItemClick: onRightSidebarItemClick, onBack: onBack, toolbar: _jsx(_Fragment, { children: (SQD && !showSqdForm) ?
                         _jsx(TMDropDownMenu, { backgroundColor: 'white', borderRadius: '3px', content: _jsx(TMButton, { btnStyle: 'icon', caption: 'Altro', icon: _jsx(IconMenuVertical, { color: 'white' }), showTooltip: false }), items: [
                                 { icon: _jsx(IconAddCircleOutline, {}), text: SDKUI_Localizator.SavedQueryNew, onClick: () => { openSqdForm(FormModes.Create); } },
                                 { icon: _jsx(IconEdit, {}), text: SDKUI_Localizator.SavedQueryUpdate, disabled: (SQD && SQD.id == 1), onClick: () => { openSqdForm(FormModes.Update); } },
@@ -112,7 +114,11 @@ const TMSearchQueryPanel = ({ fromDTD, rightSidebarItems, isExpertMode = SDKUI_G
                         ? _jsxs("div", { style: { height: '100%', width: '100%', position: 'relative', display: 'flex', flexDirection: 'column', gap: 5 }, children: [showAdvancedSearch
                                     ? _jsx(TMQueryEditor, { formMode: FormModes.Update, showToolbar: false, inputData: qd, validateSelect: true, showApply: false, onQDChanged: (newQd) => { if (!deepCompare(qd, newQd))
                                             setQd(newQd); } })
-                                    : _jsx(TMSearchQueryEditor, { qd: qd, fromDTD: fromDTD, dcmtTypesList: dcmtTypesList, isOpenDistinctValuesPanel: isOpenDistinctValuesPanel, isExpertMode: isExpertMode, showAllMdWhere: showAllMdWhere, onFocusedMetadataChanged: setFocusedTidMid, onQdChanged: (newQd) => { if (!deepCompare(qd, newQd))
+                                    : _jsx(TMSearchQueryEditor, { qd: qd, fromDTD: fromDTD, dcmtTypesList: dcmtTypesList, isOpenDistinctValuesPanel: showDistinctValuesPanel, isExpertMode: isExpertMode, showAllMdWhere: showAllMdWhere, onFocusedMetadataChanged: setFocusedTidMid, onAdvancedMenuClick: (e) => {
+                                            if (e.button === AdvancedMenuButtons.DistinctValues) {
+                                                setShowDistinctValuesPanel(true);
+                                            }
+                                        }, onQdChanged: (newQd) => { if (!deepCompare(qd, newQd))
                                             setQd(newQd); } }), _jsxs("div", { style: { display: 'flex', justifyContent: 'center', alignItems: 'center', gap: '80px', padding: '15px', position: 'relative' }, children: [_jsxs("div", { style: { display: 'flex', justifyContent: 'center', alignItems: 'center', gap: '8px' }, children: [_jsx(TMButton, { btnStyle: 'advanced', icon: _jsx(IconSearch, {}), showTooltip: false, caption: SDKUI_Localizator.Search, onClick: async () => await searchAsync(qd, showAdvancedSearch), advancedColor: '#f09c0a' }), _jsx(TMButton, { btnStyle: 'advanced', showTooltip: false, caption: SDKUI_Localizator.Clear, icon: _jsx(IconClear, {}), advancedColor: TMColors.primaryColor, onClick: clearFilters })] }), (!showAdvancedSearch && qd?.where && qd?.where?.length > initialMaxItems) && _jsx(TMButton, { elementStyle: { position: 'absolute', right: '10px' }, btnStyle: 'icon', caption: showAllMdWhere ? "Mostra meno" : `Mostra tutti i metadati (+${qd?.where?.length - initialMaxItems})`, icon: showAllMdWhere ?
                                                 _jsx("div", { style: { backgroundColor: TMColors.primaryColor, minWidth: '30px', minHeight: '30px', borderRadius: '10px', display: 'flex', alignItems: 'center', justifyContent: 'center' }, children: _jsx("p", { style: { color: 'white' }, children: `-${qd?.where?.length - initialMaxItems}` }) }) :
                                                 _jsx("div", { style: { backgroundColor: TMColors.primaryColor, minWidth: '30px', minHeight: '30px', borderRadius: '10px', display: 'flex', alignItems: 'center', justifyContent: 'center' }, children: _jsx("p", { style: { color: 'white' }, children: `+${qd?.where?.length - initialMaxItems}` }) }), onClick: () => setShowAllMdWhere(!showAllMdWhere) })] }), showFiltersConfig &&
@@ -191,7 +197,8 @@ const TMSearchQueryPanel = ({ fromDTD, rightSidebarItems, isExpertMode = SDKUI_G
                                         } })] })
                         :
                             _jsxs(TMLayoutContainer, { gap: 30, alignItems: 'center', justifyContent: 'center', children: [_jsxs(TMLayoutItem, { width: 'max-content', height: 'max-content', children: [" ", _jsxs(StyledToppyTextContainer, { children: [" ", _jsxs(StyledToppyText, { children: [" ", 'Selezionare un tipo documento o ricerca rapida', " "] }), " "] }), " "] }), _jsxs(TMLayoutItem, { width: 'max-content', height: 'max-content', children: [" ", _jsx("img", { src: Logo, width: 120, alt: '' }), " "] })] }), showSqdForm &&
-                        _jsx(StyledModalContainer, { style: { backgroundColor: `${TMColors.backgroundColorHeader}12` }, children: _jsx(TMSavedQueryForm, { height: '50%', width: '50%', id: formModeSqdForm === FormModes.Create ? -1 : SQD?.id, title: 'Ricerca rapida', formMode: formModeSqdForm, showBackButton: true, qd: qd, isAdvancedSearch: showAdvancedSearch, isModal: false, onClose: () => { setShowSqdForm(false); }, onSaved: onSqdSaved }) })] }), _jsx(StyledMultiViewPanel, { "$isVisible": isOpenDistinctValuesPanel, children: _jsx(TMDistinctValues, { tid: focusedTidMid?.tid, mid: focusedTidMid?.mid, separator: ',', onClosePanelCallback: onCloseDistinctValuesPanel, onSelectionChanged: (e) => {
+                        _jsx(StyledModalContainer, { style: { backgroundColor: `${TMColors.backgroundColorHeader}12` }, children: _jsx(TMSavedQueryForm, { height: '50%', width: '50%', id: formModeSqdForm === FormModes.Create ? -1 : SQD?.id, title: 'Ricerca rapida', formMode: formModeSqdForm, showBackButton: true, qd: qd, isAdvancedSearch: showAdvancedSearch, isModal: false, onClose: () => { setShowSqdForm(false); }, onSaved: onSqdSaved }) })] }), showDistinctValuesPanel &&
+                _jsx(TMDistinctValues, { isModal: true, tid: focusedTidMid?.tid, mid: focusedTidMid?.mid, separator: ',', onClosePanelCallback: () => setShowDistinctValuesPanel(false), onSelectionChanged: (e) => {
                         if (!e)
                             return;
                         let wi = qd?.where?.find(o => o.tid === focusedTidMid?.tid && o.mid === focusedTidMid?.mid);
@@ -206,7 +213,7 @@ const TMSearchQueryPanel = ({ fromDTD, rightSidebarItems, isExpertMode = SDKUI_G
                             return wi;
                         });
                         setQd({ ...qd, where: whereCopy });
-                    } }) })] }));
+                    } })] }));
 };
 export default TMSearchQueryPanel;
 const searchByQdAsync = async (qdInput, searchParams) => {

package/package.json

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