@topconsultnpm/sdkui-react 6.19.0-dev1.10

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

@@ -0,0 +1,226 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useEffect, useState } from 'react';
+import styled from 'styled-components';
+import { SharingModes, SDK_Globals, SDK_Localizator } from '@topconsultnpm/sdk-ts';
+import { LocalizeSharingModes } from '../../../helper/Enum_Localizator';
+import ContextMenu from 'devextreme-react/cjs/context-menu';
+import { SDKUI_Localizator, Globalization, svgToString, IconStar, IconDelete, IconDashboard, IconSavedQuery, IconApply, IconInfo, IconCloseOutline } from '../../../helper';
+import { TMColors } from '../../../utils/theme';
+import ShowAlert from '../../base/TMAlert';
+import { TMMessageBoxManager, ButtonNames, TMExceptionBoxManager } from '../../base/TMPopUp';
+import TMSpinner from '../../base/TMSpinner';
+import TMTooltip from '../../base/TMTooltip';
+import { TMSearchBar } from '../../sidebar/TMHeader';
+import { DeviceType, useDeviceType } from '../../base/TMDeviceProvider';
+import { StyledDivHorizontal, StyledOffCanvasPanel } from '../../base/Styled';
+import { useOutsideClick } from '../../../hooks/useOutsideClick';
+import TMShowAllOrMaxItemsButton from '../../base/TMShowAllOrMaxItemsButton';
+const StyledSqdItem = styled.div `
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    min-width: 0;
+    padding: 10px;
+    position: relative;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+
+   &:hover {
+        cursor: pointer;
+        background: linear-gradient(
+            270deg,
+            rgba(70, 181, 162, 0.15) 16%,
+            rgba(59, 170, 188, 0.15) 34%,
+            rgba(59, 170, 188, 0.15) 34%,
+            rgba(54, 129, 173, 0.15) 54%,
+            rgba(51, 104, 165, 0.15) 72%,
+            rgba(47, 84, 157, 0.15) 88%,
+            rgba(48, 79, 153, 0.15) 100%
+        );
+    }
+
+    .info-icon {
+        opacity: 0;
+        pointer-events: none;
+        transition: opacity 0.2s;
+        ${({ $isMobile }) => $isMobile && `
+            display: none !important;
+        `}
+    }
+
+    &:hover .info-icon {
+        opacity: 1;
+        pointer-events: auto;
+    }
+
+    &::after {
+        content: '';
+        display: block;
+        width: 90%;
+        margin: 0 auto;
+        border-bottom: 1px solid #00A99D;
+        margin-top: 8px;
+    }
+
+    &:last-child {
+        border-bottom: none; // remove border for last item
+        margin-bottom: 0;
+    }
+`;
+const getSharingModeColor = (sharingMode) => {
+    switch (sharingMode) {
+        case SharingModes.Private: return 'rgb(185, 72, 57)';
+        case SharingModes.Public: return 'rgb(56, 126, 28)';
+        case SharingModes.Shared: return 'rgb(224, 194, 43)';
+        default: return 'black';
+    }
+};
+export const getTooltipBySqd = (sqd) => {
+    if (!sqd)
+        return null;
+    return (_jsxs("div", { style: { textAlign: "left", fontSize: '1rem', color: TMColors.primaryColor }, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 10 }, children: [_jsx(IconSavedQuery, { color: getSharingModeColor(sqd.sharingMode), fontSize: 20, style: { flexShrink: 0 } }), _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 2 }, children: [_jsxs("div", { children: ["ID: ", sqd.id] }), _jsxs("div", { children: ["Master TID: ", sqd.masterTID] }), sqd.description && _jsx("div", { children: `${SDKUI_Localizator.Description}: ${sqd.description}` })] })] }), _jsx("hr", {}), _jsxs("div", { children: [SDKUI_Localizator.OwnerName, ": ", sqd.ownerName, " (", sqd.ownerID, ")"] }), _jsx("div", { children: LocalizeSharingModes(sqd.sharingMode) }), _jsxs("div", { children: ["Default: ", sqd.isDefault == 1 ? SDKUI_Localizator.Yes : SDKUI_Localizator.No] }), _jsxs("div", { children: ["Filtro semplice", ": ", sqd.isEasyWhere == 1 ? SDKUI_Localizator.Yes : SDKUI_Localizator.No] }), _jsxs("div", { children: ["Esegui ricerca immediatamente", ": ", sqd.runSearchWhenSelected == 1 ? SDKUI_Localizator.Yes : SDKUI_Localizator.No] }), _jsx("hr", {}), _jsxs("div", { children: [SDKUI_Localizator.CreationTime, ": ", Globalization.getDateTimeDisplayValue(sqd.creationTime)] }), _jsxs("div", { children: [SDKUI_Localizator.LastUpdateTime, ": ", Globalization.getDateTimeDisplayValue(sqd.lastUpdateTime)] })] }));
+};
+const initialSQDsMaxItems = 12;
+const SavedQueryContexMenu = ({ sqd, manageDefault, isMobile, deleteAsync, favManageAsync, setDefaultAsync, setInfoSQD }) => _jsx(ContextMenu, { items: [
+        ...(manageDefault ? [{
+                text: SDKUI_Localizator.SetAsDefault2,
+                icon: svgToString(_jsx(IconStar, { color: 'rgb(248, 215, 117)' })),
+                onClick: () => setDefaultAsync(sqd)
+            }] : []),
+        {
+            text: SDKUI_Localizator.Delete,
+            disabled: (sqd.id == 1),
+            icon: svgToString(_jsx(IconDelete, {})),
+            onClick: () => deleteAsync(sqd)
+        },
+        {
+            text: SDKUI_Localizator.AddToHomePage,
+            disabled: (sqd.id == 1),
+            icon: svgToString(_jsx(IconDashboard, {})),
+            onClick: () => favManageAsync?.(sqd)
+        },
+        ...(isMobile ? [
+            {
+                text: SDKUI_Localizator.About,
+                icon: svgToString(_jsx(IconInfo, { color: TMColors.info })),
+                onClick: () => { setInfoSQD?.(sqd); }
+            }
+        ] : [])
+    ], target: `#sqd-item-${sqd.id}`, onItemClick: (e) => {
+        if (e.itemIndex == 0)
+            setDefaultAsync?.(sqd);
+        else if (e.itemIndex == 1)
+            deleteAsync?.(sqd);
+        else if (e.itemIndex == 2)
+            favManageAsync?.(sqd);
+    } });
+const TMSavedQuerySelector = React.memo(({ items, selectedId, allowShowSearch = true, height, manageDefault = true, onItemClick, onDeleted, onFavoritesAdded, onRefreshData }) => {
+    const [dataSource, setDataSource] = useState([]);
+    const [selectedItem, setSelectedItem] = useState();
+    const [searchText, setSearchText] = useState('');
+    const [showAllRoot, setShowAllRoot] = useState(false);
+    const [infoSQD, setInfoSQD] = useState();
+    const deviceType = useDeviceType();
+    const isMobile = deviceType === DeviceType.MOBILE;
+    const panelRef = useOutsideClick(() => {
+        setInfoSQD(undefined);
+    });
+    useEffect(() => { loadDataAsync(false); }, [items]);
+    useEffect(() => { setSelectedItem(dataSource.find(o => o.id == selectedId)); }, [selectedId, dataSource]);
+    const loadDataAsync = async (refreshCache) => {
+        if (items && items.length > 0)
+            setDataSource(items);
+    };
+    const deleteSQDAsync = (sqd) => {
+        TMMessageBoxManager.show({
+            title: SDKUI_Localizator.Delete, message: SDKUI_Localizator.Delete_ConfirmFor1.replaceParams(sqd?.name ?? ""), buttons: [ButtonNames.YES, ButtonNames.NO],
+            onButtonClick: async (e) => {
+                try {
+                    if (e !== ButtonNames.YES)
+                        return;
+                    TMSpinner.show();
+                    await SDK_Globals.tmSession?.NewSavedQueryEngine().DeleteAsync(sqd?.id);
+                    await loadDataAsync(true);
+                    onDeleted?.(sqd);
+                    TMSpinner.hide();
+                }
+                catch (ex) {
+                    TMSpinner.hide();
+                    TMExceptionBoxManager.show({ exception: ex });
+                }
+            }
+        });
+    };
+    const favManageSQDAsync = async (sqd) => {
+        try {
+            TMSpinner.show();
+            await SDK_Globals.tmSession?.NewSavedQueryEngine().FavoritesAddOrRemoveAsync(sqd?.id, false);
+            onFavoritesAdded?.(sqd);
+            TMSpinner.hide();
+            ShowAlert({ mode: 'success', title: SDK_Localizator.SavedQuery, message: SDKUI_Localizator.OperationSuccess, duration: 3000 });
+        }
+        catch (ex) {
+            TMSpinner.hide();
+            TMExceptionBoxManager.show({ exception: ex });
+        }
+    };
+    const setDefaultSQDAsync = async (sqd) => {
+        try {
+            TMSpinner.show();
+            await SDK_Globals.tmSession?.NewSavedQueryEngine().DefaultSetOrRemoveAsync(sqd.masterTID, sqd.id);
+            onRefreshData?.();
+            TMSpinner.hide();
+        }
+        catch (ex) {
+            TMSpinner.hide();
+            TMExceptionBoxManager.show({ exception: ex });
+        }
+    };
+    return (_jsxs("div", { style: { height: height ?? '100%', width: '100%', display: 'flex', flexDirection: 'column', gap: '5px', paddingTop: allowShowSearch ? '5px' : undefined }, children: [allowShowSearch &&
+                _jsx("div", { style: { width: '100%', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '10px', paddingBottom: '10px', paddingTop: '10px' }, children: _jsx(TMSearchBar, { marginLeft: '0px', maxWidth: '300px', searchValue: searchText, onSearchValueChanged: (e) => setSearchText(e) }) }), _jsx("div", { style: {
+                    display: 'flex',
+                    flexDirection: 'column',
+                    width: '100%',
+                    height: 'calc(100% - 150px)',
+                    padding: '5px 10px',
+                    gap: '3px',
+                    overflow: 'auto'
+                }, children: dataSource.slice(0, showAllRoot || searchText.length > 0 ? dataSource.length : initialSQDsMaxItems).filter(o => searchText.length <= 0 || (searchText.length > 0 && o.name?.toLocaleLowerCase().includes(searchText.toLocaleLowerCase())) || o.description?.toLocaleLowerCase().includes(searchText.toLocaleLowerCase())).map((sqd, index) => {
+                    const isCurrent = selectedItem?.id == sqd.id;
+                    return (_jsxs(StyledSqdItem, { id: `sqd-item-${sqd.id}`, "$isMobile": isMobile, onClick: () => {
+                            setSelectedItem(sqd);
+                            onItemClick?.(sqd);
+                        }, children: [_jsxs(StyledDivHorizontal, { style: { alignItems: 'center', gap: 8, width: '100%' }, children: [!isMobile && (_jsx("span", { className: "info-icon", style: {
+                                            marginRight: 4,
+                                            display: 'flex',
+                                            alignItems: 'center'
+                                        }, children: _jsx(TMTooltip, { content: getTooltipBySqd(sqd), children: _jsx(IconInfo, { color: TMColors.primaryColor }) }) })), _jsxs("div", { style: {
+                                            flex: 1,
+                                            display: 'flex',
+                                            alignItems: 'center',
+                                            justifyContent: 'center',
+                                            minWidth: 0
+                                        }, children: [_jsx("p", { style: {
+                                                    fontSize: '1rem',
+                                                    fontWeight: sqd.id === 1 ? 600 : 'normal',
+                                                    whiteSpace: 'nowrap',
+                                                    overflow: 'hidden',
+                                                    textOverflow: 'ellipsis',
+                                                    color: TMColors.primaryColor,
+                                                    paddingRight: '15px'
+                                                }, children: sqd.name }), manageDefault && sqd.isDefault == 1 && _jsx(IconStar, { fontSize: 16, color: 'rgb(248, 215, 117)' })] }), _jsx("span", { style: {
+                                            width: 24,
+                                            height: 24,
+                                            borderRadius: 24,
+                                            display: 'flex',
+                                            alignItems: 'center',
+                                            justifyContent: 'center',
+                                            fontSize: '1rem',
+                                            fontWeight: 'bold',
+                                            marginLeft: 8,
+                                            visibility: isCurrent ? 'visible' : 'hidden'
+                                        }, children: _jsx(IconApply, { fontSize: 24, color: 'green' }) })] }), _jsx(SavedQueryContexMenu, { sqd: sqd, manageDefault: manageDefault, isMobile: isMobile, setInfoSQD: setInfoSQD, setDefaultAsync: () => setDefaultSQDAsync(sqd), deleteAsync: () => deleteSQDAsync(sqd), favManageAsync: () => favManageSQDAsync(sqd) })] }, sqd.id));
+                }) }), dataSource.length > initialSQDsMaxItems && searchText.length <= 0 &&
+                _jsx("div", { style: { display: 'flex', justifyContent: 'flex-end', padding: '10px', position: 'relative' }, children: _jsx(TMShowAllOrMaxItemsButton, { showAll: showAllRoot, dataSourceLength: dataSource.length, onClick: () => { setShowAllRoot(!showAllRoot); } }) }), _jsxs(StyledOffCanvasPanel, { ref: panelRef, "$isOpen": isMobile && infoSQD !== undefined, children: [_jsxs(StyledDivHorizontal, { style: { gap: 10, padding: '10px 8px', width: '100%', alignItems: 'center' }, children: [_jsx("p", { style: { fontSize: '1.1rem', fontWeight: 'bold' }, children: `${SDK_Localizator.SavedQuery} - ${SDKUI_Localizator.About}` }), _jsx(IconCloseOutline, { style: { marginLeft: 'auto', cursor: 'pointer' }, onClick: () => setInfoSQD(undefined) })] }), getTooltipBySqd(infoSQD)] })] }));
+});
+export default TMSavedQuerySelector;

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

@@ -0,0 +1,31 @@
+import React from 'react';
+import { DcmtTypeDescriptor, TaskDescriptor } from '@topconsultnpm/sdk-ts';
+import { DcmtInfo, TaskContext } from '../../../ts';
+import { TMSearchResultFloatingActionConfig } from './TMSearchResultFloatingActionButton';
+interface ITMSearchProps {
+    isVisible?: boolean;
+    inputTID?: number;
+    inputSqdID?: number;
+    inputMids?: Array<{
+        mid: number;
+        value: string;
+    }>;
+    isExpertMode?: boolean;
+    floatingActionConfig?: TMSearchResultFloatingActionConfig;
+    onRefreshAfterAddDcmtToFavs?: () => void;
+    onFileOpened?: (dcmtFile: File | undefined) => void;
+    onTaskCreateRequest?: (taskContext: TaskContext, onTaskCreated?: (task?: TaskDescriptor) => void) => void;
+    openWGsCopyMoveForm?: (mode: "copyToWgDraft" | "copyToWgArchivedDoc", dcmtTypeDescriptor: DcmtTypeDescriptor, documents: Array<DcmtInfo>) => void;
+    openEditPdf?: (documents: Array<DcmtInfo>) => void;
+    openS4TViewer?: boolean;
+    onOpenS4TViewerRequest?: (dcmtInfo: Array<DcmtInfo>, onRefreshSearchAsync?: (() => Promise<void>)) => void;
+    showTodoDcmtForm?: boolean;
+    openInOffice?: (selectedDcmtsOrFocused: Array<DcmtInfo>) => Promise<void>;
+    passToArchiveCallback?: (outputMids: Array<{
+        mid: number;
+        value: string;
+    }>, tid?: number) => void;
+    onCurrentTIDChangedCallback?: (tid: number | undefined) => void;
+}
+declare const TMSearch: React.FunctionComponent<ITMSearchProps>;
+export default TMSearch;

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

@@ -0,0 +1,244 @@
+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, LayoutModes } from '@topconsultnpm/sdk-ts';
+import TMSavedQuerySelector from './TMSavedQuerySelector';
+import TMTreeSelector from './TMTreeSelector';
+import { TabPanel, Item } from 'devextreme-react/tab-panel';
+import TMSearchQueryPanel, { refreshLastSearch } from './TMSearchQueryPanel';
+import { getSysAllDcmtsSQD, IconFilter, IconRecentlyViewed, IconSavedQuery, IconTree, removeMruTid, SDKUI_Globals, SDKUI_Localizator, updateMruTids } 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 { TMPanelManagerProvider, useTMPanelManagerContext } from '../../layout/panelManager/TMPanelManagerContext';
+import TMPanelManagerContainer from '../../layout/panelManager/TMPanelManagerContainer';
+var TMSearchViews;
+(function (TMSearchViews) {
+    TMSearchViews[TMSearchViews["Search"] = 0] = "Search";
+    TMSearchViews[TMSearchViews["Result"] = 1] = "Result";
+})(TMSearchViews || (TMSearchViews = {}));
+const TMSearch = ({ openInOffice, isVisible, inputTID, inputSqdID, inputMids, isExpertMode = SDKUI_Globals.userSettings.advancedSettings.expertMode === 1, floatingActionConfig, onFileOpened, onRefreshAfterAddDcmtToFavs, onTaskCreateRequest, openWGsCopyMoveForm, openEditPdf, openS4TViewer, onOpenS4TViewerRequest, showTodoDcmtForm, passToArchiveCallback, onCurrentTIDChangedCallback }) => {
+    const [allSQDs, setAllSQDs] = useState([]);
+    const [filteredByTIDSQDs, setFilteredByTIDSQDs] = useState([]);
+    const [currentSQD, setCurrentSQD] = useState();
+    const [currentTID, setCurrentTID] = useState(0);
+    const [currentMruTID, setCurrentMruTID] = useState(0);
+    const [fromDTD, setFromDTD] = useState();
+    const [searchResult, setSearchResult] = useState([]);
+    const [mruTIDs, setMruTIDs] = useState([]);
+    const [currentSearchView, setCurrentSearchView] = useState(TMSearchViews.Search);
+    const [currentSQDMode, setCurrentSQDMode] = useState(1);
+    const [lastQdSearched, setLastQdSearched] = useState();
+    const deviceType = useDeviceType();
+    useEffect(() => {
+        if (onCurrentTIDChangedCallback) {
+            onCurrentTIDChangedCallback(currentTID);
+        }
+    }, [currentTID, onCurrentTIDChangedCallback]);
+    useEffect(() => {
+        setMruTIDs(SDKUI_Globals.userSettings.searchSettings.mruTIDs);
+        loadDataSQDsAsync(false);
+    }, []);
+    useEffect(() => {
+        if (!inputTID)
+            return;
+        setCurrentTID(inputTID);
+        setCurrentSearchView(TMSearchViews.Search);
+    }, [inputTID]);
+    useEffect(() => {
+        if (inputSqdID) {
+            SavedQueryCacheService.GetAsync(inputSqdID).then(async (resultSqd) => {
+                await setSQDAsync(resultSqd);
+            });
+        }
+    }, [inputSqdID]);
+    useEffect(() => {
+        setSearchResult([]);
+        if (!currentTID || currentTID <= 0) {
+            return;
+        }
+        DcmtTypeListCacheService.GetAsync(currentTID).then(async (dtd) => {
+            setFromDTD(dtd);
+            let sqds = await getSQDsByTIDAsync(currentTID, allSQDs) ?? [];
+            setFilteredByTIDSQDs(sqds);
+            setCurrentSQDMode(0);
+            await setDefaultSQDAsync(sqds);
+        });
+    }, [currentTID]);
+    useEffect(() => {
+        if (currentSQD && currentSQD.masterTID != currentTID) {
+            DcmtTypeListCacheService.GetAsync(currentSQD.masterTID).then(async (dtd) => {
+                setFromDTD(dtd);
+                let sqds = await getSQDsByTIDAsync(currentSQD.masterTID, allSQDs) ?? [];
+                setFilteredByTIDSQDs(sqds);
+                setCurrentSQDMode(0);
+            });
+        }
+    }, [currentSQD]);
+    const loadDataSQDsAsync = async (refreshCache, curTID) => {
+        if (refreshCache) {
+            SavedQueryCacheService.RemoveAll();
+            SavedQueryCacheService.Remove();
+        }
+        let sqdCache = await SavedQueryCacheService.GetAllAsync() ?? [];
+        setAllSQDs(sqdCache);
+        let sqds = await getSQDsByTIDAsync(curTID ?? currentTID, sqdCache) ?? [];
+        setFilteredByTIDSQDs(sqds);
+        setCurrentSQDMode(0);
+    };
+    const getSQDsByTIDAsync = async (tid, allSQDList) => {
+        if (!tid)
+            return;
+        let sqds = allSQDList ? allSQDList.slice() : allSQDs.slice();
+        sqds = sqds.filter(o => o.masterTID == tid);
+        sqds.unshift(await getSysAllDcmtsSQD(tid, false));
+        return sqds;
+    };
+    const setDefaultSQDAsync = async (sqds) => {
+        let defaultSQD = sqds.find(o => o.isDefault == 1);
+        defaultSQD ??= sqds.find(o => o.id == 1);
+        if (defaultSQD)
+            defaultSQD.isDefault = 1;
+        if (defaultSQD) {
+            await setSQDAsync(defaultSQD);
+        }
+    };
+    const setSQDAsync = async (sqd) => {
+        let newSqd = (sqd?.id == 1) ? sqd : await SavedQueryCacheService.GetAsync(sqd?.id);
+        setCurrentSQD(newSqd);
+        if (!newSqd?.masterTID)
+            return;
+        if (newSqd?.masterTID !== currentTID)
+            setCurrentTID(0);
+        if (mruTIDs.includes(newSqd.masterTID))
+            setCurrentMruTID(newSqd.masterTID);
+        else
+            setCurrentMruTID(0);
+    };
+    const onSQDItemClick = useCallback(async (sqd, setSqdAsync) => {
+        await setSqdAsync(sqd);
+    }, []);
+    const onSQDDeleted = useCallback(async (sqd, sqdToBeSet, setSqdAsync) => {
+        await loadDataSQDsAsync(true, sqd.masterTID);
+        if (sqdToBeSet)
+            await setSqdAsync?.(sqdToBeSet);
+    }, []);
+    const onRefreshSearchAsync = async () => {
+        try {
+            const newResult = (await refreshLastSearch(lastQdSearched)) ?? [];
+            setSearchResult(newResult);
+        }
+        catch (error) {
+            console.error("Error refreshing search:", error);
+        }
+    };
+    const isMobile = deviceType === DeviceType.MOBILE;
+    // --- JSX WRAPPERS ---
+    const tmTreeSelectorElement = useMemo(() => _jsx(TMTreeSelectorWrapper, { isMobile: isMobile, onSelectedTIDChanged: (tid) => {
+            setCurrentTID(tid);
+            if (tid && mruTIDs.includes(tid))
+                setCurrentMruTID(tid);
+            else
+                setCurrentMruTID(0);
+        } }), [isMobile, mruTIDs]);
+    const tmRecentsManagerElement = useMemo(() => _jsx(TMRecentsManagerWrapper, { mruTIDs: mruTIDs, currentMruTID: currentMruTID, deviceType: deviceType, onSelectedTID: (tid) => {
+            setCurrentMruTID(tid);
+            setCurrentTID(tid);
+        }, onDeletedTID: (tid) => {
+            let newMruTIDS = removeMruTid(SDKUI_Globals.userSettings.searchSettings.mruTIDs, tid);
+            SDKUI_Globals.userSettings.searchSettings.mruTIDs = newMruTIDS;
+            setMruTIDs(newMruTIDS);
+        } }), [mruTIDs, currentMruTID, deviceType]);
+    const tmSearchQueryPanelElement = useMemo(() => _jsx(TMSearchQueryPanelWrapper, { passToArchiveCallback: passToArchiveCallback, isExpertMode: isExpertMode, showBackToResultButton: searchResult.length > 0, fromDTD: fromDTD, SQD: currentSQD, inputMids: inputMids, onBackToResult: () => { setCurrentSearchView(TMSearchViews.Result); }, 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 = updateMruTids(SDKUI_Globals.userSettings.searchSettings.mruTIDs, fromTID);
+            SDKUI_Globals.userSettings.searchSettings.mruTIDs = newMruTIDS;
+            setMruTIDs(newMruTIDS);
+            setCurrentMruTID(fromTID);
+        }, onSqdSaved: async (newSqd) => {
+            await loadDataSQDsAsync(true, newSqd.masterTID);
+            await setSQDAsync(newSqd);
+        } }), [fromDTD, currentSQD, isExpertMode, mruTIDs, searchResult, passToArchiveCallback, inputMids]);
+    const tmSavedQuerySelectorElement = useMemo(() => _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(TMSavedQuerySelectorWrapper, { 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(TMSavedQuerySelectorWrapper, { allowShowSearch: true, items: allSQDs, manageDefault: false, onItemClick: (sqd) => {
+                        onSQDItemClick(sqd, setSQDAsync);
+                    }, onDeleted: (sqd) => onSQDDeleted(sqd, sqd.id == currentSQD?.id ? undefined : currentSQD, setSQDAsync) }) })] }), [currentSQDMode, currentTID, currentSQD, fromDTD, filteredByTIDSQDs, allSQDs]);
+    // --- PANEL DEFINITIONS ---
+    const allInitialPanelVisibility = {
+        'TMTreeSelector': true,
+        'TMRecentsManager': true,
+        'TMSearchQueryPanel': true,
+        'TMSavedQuerySelector': true,
+    };
+    const initialPanelDimensions = {
+        'TMTreeSelector': { width: '20%', height: '100%' },
+        'TMRecentsManager': { width: '20%', height: '100%' },
+        'TMSearchQueryPanel': { width: '40%', height: '100%' },
+        'TMSavedQuerySelector': { width: '20%', height: '100%' },
+    };
+    const initialPanels = useMemo(() => [
+        {
+            id: 'TMTreeSelector',
+            name: SDK_Localizator.Trees,
+            contentOptions: { component: tmTreeSelectorElement },
+            toolbarOptions: { icon: _jsx(IconTree, { fontSize: 24 }), visible: true, orderNumber: 1, isActive: allInitialPanelVisibility['TMTreeSelector'] }
+        },
+        {
+            id: 'TMRecentsManager',
+            name: SDKUI_Localizator.Shortcuts,
+            contentOptions: { component: tmRecentsManagerElement, panelContainer: { title: SDKUI_Localizator.Shortcuts, totalItems: mruTIDs.length } },
+            toolbarOptions: { icon: _jsx(IconRecentlyViewed, { fontSize: 24 }), visible: true, orderNumber: 2, isActive: allInitialPanelVisibility['TMRecentsManager'] }
+        },
+        {
+            id: 'TMSearchQueryPanel',
+            name: fromDTD?.nameLoc ?? SDKUI_Localizator.Search_Metadata,
+            contentOptions: { component: tmSearchQueryPanelElement },
+            toolbarOptions: { icon: _jsx(IconFilter, { fontSize: 24 }), visible: true, orderNumber: 3, isActive: allInitialPanelVisibility['TMSearchQueryPanel'] }
+        },
+        {
+            id: 'TMSavedQuerySelector',
+            name: SDK_Localizator.SavedQueries,
+            contentOptions: { component: tmSavedQuerySelectorElement, panelContainer: { title: SDK_Localizator.SavedQueries } },
+            toolbarOptions: { icon: _jsx(IconSavedQuery, { fontSize: 24 }), visible: true, orderNumber: 4, isActive: allInitialPanelVisibility['TMSavedQuerySelector'] }
+        }
+    ], [tmTreeSelectorElement, tmRecentsManagerElement, tmSearchQueryPanelElement, tmSavedQuerySelectorElement, fromDTD, mruTIDs]);
+    return (_jsxs(_Fragment, { children: [_jsx(StyledMultiViewPanel, { "$isVisible": currentSearchView === TMSearchViews.Search, children: _jsx(TMPanelManagerProvider, { panels: initialPanels, initialVisibility: allInitialPanelVisibility, defaultDimensions: initialPanelDimensions, initialDimensions: initialPanelDimensions, initialMobilePanelId: 'TMRecentsManager', children: _jsx(TMPanelManagerContainer, { panels: initialPanels, direction: "horizontal", showToolbar: true }) }) }), _jsx(TMSearchResult, { isVisible: isVisible && currentSearchView === TMSearchViews.Result, context: SearchResultContext.METADATA_SEARCH, searchResults: searchResult, floatingActionConfig: floatingActionConfig, onRefreshAfterAddDcmtToFavs: onRefreshAfterAddDcmtToFavs, openInOffice: openInOffice, onRefreshSearchAsync: onRefreshSearchAsync, onClose: () => { setCurrentSearchView(TMSearchViews.Search); }, onFileOpened: onFileOpened, onTaskCreateRequest: onTaskCreateRequest, openWGsCopyMoveForm: openWGsCopyMoveForm, openEditPdf: openEditPdf, openS4TViewer: openS4TViewer, onOpenS4TViewerRequest: onOpenS4TViewerRequest, passToArchiveCallback: passToArchiveCallback, onSelectedTIDChanged: onCurrentTIDChangedCallback, showTodoDcmtForm: showTodoDcmtForm })] }));
+};
+export default TMSearch;
+const TMTreeSelectorWrapper = ({ isMobile, onSelectedTIDChanged }) => {
+    const { setPanelVisibilityById, toggleMaximize, countVisibleLeafPanels } = useTMPanelManagerContext();
+    return (_jsx(TMTreeSelector, { layoutMode: LayoutModes.Update, onClosePanel: !isMobile && countVisibleLeafPanels() > 1 ? () => setPanelVisibilityById('TMTreeSelector', false) : undefined, allowMaximize: !isMobile && countVisibleLeafPanels() > 1, onMaximizePanel: !isMobile && countVisibleLeafPanels() > 1 ? () => toggleMaximize("TMTreeSelector") : undefined, onSelectedTIDChanged: (tid) => {
+            onSelectedTIDChanged?.(tid);
+            isMobile && setPanelVisibilityById('TMSearchQueryPanel', true);
+        } }));
+};
+const TMRecentsManagerWrapper = ({ mruTIDs, currentMruTID, deviceType, onSelectedTID, onDeletedTID }) => {
+    const { setPanelVisibilityById } = useTMPanelManagerContext();
+    return (_jsx(TMRecentsManager, { accessFilter: 'canSearch', mruTIDs: mruTIDs, currentMruTID: currentMruTID, deviceType: deviceType, onSelectedTID: (tid) => {
+            onSelectedTID?.(tid);
+            deviceType === DeviceType.MOBILE && setPanelVisibilityById('TMSearchQueryPanel', true);
+        }, onDeletedTID: (tid) => {
+            onDeletedTID?.(tid);
+        } }));
+};
+const TMSearchQueryPanelWrapper = ({ fromDTD, SQD, isExpertMode, showBackToResultButton, onSearchCompleted, onSqdSaved, onBackToResult, passToArchiveCallback, inputMids }) => {
+    const { setPanelVisibilityById, toggleMaximize, countVisibleLeafPanels } = useTMPanelManagerContext();
+    const deviceType = useDeviceType();
+    const isMobile = deviceType === DeviceType.MOBILE;
+    return (_jsx(TMSearchQueryPanel, { onClosePanel: (!isMobile && countVisibleLeafPanels() > 1) ? () => setPanelVisibilityById('TMSearchQueryPanel', false) : undefined, allowMaximize: !isMobile && countVisibleLeafPanels() > 1, onMaximizePanel: (!isMobile && countVisibleLeafPanels() > 1) ? () => toggleMaximize("TMSearchQueryPanel") : undefined, isExpertMode: isExpertMode, fromDTD: fromDTD, SQD: SQD, inputMids: inputMids, onSearchCompleted: onSearchCompleted, onSqdSaved: onSqdSaved, showBackToResultButton: showBackToResultButton, onBackToResult: onBackToResult, passToArchiveCallback: passToArchiveCallback }));
+};
+const TMSavedQuerySelectorWrapper = ({ items, selectedId, allowShowSearch, manageDefault, onRefreshData, onItemClick, onDeleted }) => {
+    const { setPanelVisibilityById } = useTMPanelManagerContext();
+    return (_jsx(TMSavedQuerySelector, { allowShowSearch: allowShowSearch, manageDefault: manageDefault, items: items, selectedId: selectedId, onRefreshData: onRefreshData, onItemClick: (sqd) => {
+            onItemClick?.(sqd);
+            setPanelVisibilityById('TMSearchQueryPanel', true);
+        }, onDeleted: onDeleted }));
+};

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import { DcmtTypeDescriptor, QueryDescriptor } from '@topconsultnpm/sdk-ts';
+import { TID_MID } from '../../../ts';
+import { AdvancedMenuClickEventArgs } from '../../editors/TMMetadataValues';
+interface ITMSearchQueryEditorProps {
+    qd: QueryDescriptor | undefined;
+    dcmtTypesList?: DcmtTypeDescriptor[];
+    isExpertMode?: boolean;
+    showAllMdWhere?: boolean;
+    onQdChanged?: (qd: QueryDescriptor) => void;
+    onAdvancedMenuClick?: (e: AdvancedMenuClickEventArgs) => void;
+    onFocusedMetadataChanged?: (tid_mid: TID_MID | undefined) => void;
+}
+declare const _default: React.NamedExoticComponent<ITMSearchQueryEditorProps>;
+export default _default;