@topconsultnpm/sdkui-react 6.17.0-test9

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

@@ -0,0 +1,438 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { PlatformObjectValidator, WhereItem, SDK_Localizator, OrderByItem, SelectItem, SelectItemVisibilities, SDK_Globals, SavedQueryCacheService, SearchEngine, QueryOperators } from '@topconsultnpm/sdk-ts';
+import styled from 'styled-components';
+import TMSearchQueryEditor from './TMSearchQueryEditor';
+import Toppy from '../../../assets/Toppy-generico.png';
+import { getDcmtTypesByQdAsync, SDKUI_Localizator, getQD, IconMenuVertical, IconAddCircleOutline, IconEdit, IconEasy, IconAdvanced, deepCompare, IconSearch, IconClear, getDefaultOperator, prepareQdForSearchAsync, IsParametricQuery, SDKUI_Globals, IconArrowRight, IconMenuCAArchive, getListMaxItems } from '../../../helper';
+import { useQueryParametersDialog } from '../../../hooks/useQueryParametersDialog';
+import { FormModes } from '../../../ts';
+import { TMColors } from '../../../utils/theme';
+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 from '../../base/TMLayout';
+import { TMExceptionBoxManager } from '../../base/TMPopUp';
+import TMSpinner from '../../base/TMSpinner';
+import TMPanel from '../../base/TMPanel';
+import TMDistinctValues from '../../choosers/TMDistinctValues';
+import { TMMetadataChooserForm } from '../../choosers/TMMetadataChooser';
+import TMQueryEditor from '../../query/TMQueryEditor';
+import TMSavedQueryForm from './TMSavedQueryForm';
+import { AdvancedMenuButtons } from '../../editors/TMMetadataValues';
+const TMSearchQueryPanel = ({ fromDTD, showBackToResultButton, isExpertMode = SDKUI_Globals.userSettings.advancedSettings.expertMode === 1, SQD, inputMids, onSearchCompleted, onSqdSaved, onBack, onClosePanel, allowMaximize = true, onMaximizePanel, onBackToResult, passToArchiveCallback }) => {
+    const [confirmQueryParams, ConfirmQueryParamsDialog] = useQueryParametersDialog();
+    const [qd, setQd] = useState();
+    const [shouldSearch, setShouldSearch] = useState(false);
+    const [isQueryPanelActive, setIsQueryPanelActive] = useState(false);
+    const [lastQdParams, setLastQdParams] = useState([]);
+    const [dcmtTypesList, setDcmtTypesList] = useState([]);
+    const [showSqdForm, setShowSqdForm] = useState(false);
+    const [formModeSqdForm, setFormModeSqdForm] = useState(FormModes.Update);
+    const [showAllMdWhere, setShowAllMdWhere] = useState(false);
+    const [showAdvancedSearch, setShowAdvancedSearch] = useState(false);
+    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();
+    const isMobile = deviceType === DeviceType.MOBILE;
+    let initialMaxItems = deviceType === DeviceType.MOBILE ? 8 : 12;
+    const appliedInputMidsRef = useRef(null);
+    const pendingMidsRef = useRef(null);
+    useEffect(() => {
+        if (!SQD)
+            return;
+        setDataAsync(SQD);
+    }, [SQD]);
+    useEffect(() => {
+        pendingMidsRef.current = inputMids ?? null;
+    }, [inputMids]);
+    useEffect(() => {
+        if (!fromDTD)
+            return;
+        // Reset appliedInputMidsRef when TID changes so pending mids can be applied to new TID
+        appliedInputMidsRef.current = null;
+        const initQd = async () => {
+            // Only initialize if qd doesn't exist or is for a different TID
+            if (!qd || qd.from?.tid !== fromDTD.id) {
+                const newQd = await getQD(fromDTD.id, false);
+                if (newQd) {
+                    setQd(newQd);
+                }
+            }
+        };
+        initQd();
+    }, [fromDTD?.id]);
+    // Apply inputMids when qd is ready and matches fromDTD
+    useEffect(() => {
+        if (!qd || !fromDTD || qd.from?.tid !== fromDTD.id)
+            return;
+        const midsToApply = pendingMidsRef.current;
+        if (!midsToApply || midsToApply.length === 0)
+            return;
+        if (appliedInputMidsRef.current && deepCompare(appliedInputMidsRef.current, midsToApply))
+            return;
+        appliedInputMidsRef.current = midsToApply;
+        const newWhere = qd.where?.map((curItem) => {
+            let newWi = new WhereItem();
+            newWi.init({ ...curItem, value1: undefined, value2: undefined });
+            return newWi;
+        }) || [];
+        midsToApply.forEach(im => {
+            const md = fromDTD.metadata?.find(m => m.id === im.mid);
+            // Skip MIDs that don't belong to this TID
+            if (!md) {
+                console.warn(`MID ${im.mid} does not belong to TID ${fromDTD.id}, skipping`);
+                return;
+            }
+            const defaultOperator = getDefaultOperator(md?.dataDomain, md?.dataType);
+            let existingWi = newWhere.find(wi => wi.mid === im.mid);
+            if (existingWi) {
+                existingWi.value1 = im.value;
+                existingWi.operator = defaultOperator;
+            }
+            else {
+                const wi = new WhereItem();
+                wi.tid = fromDTD.id;
+                wi.mid = im.mid;
+                wi.value1 = im.value;
+                wi.operator = defaultOperator;
+                wi.or = false;
+                newWhere.push(wi);
+            }
+        });
+        setQd({ ...qd, where: newWhere });
+        setShowAllMdWhere(true);
+    }, [qd, fromDTD, inputMids]);
+    // Eseguire la ricerca quando shouldSearch è true e qd è definito
+    useEffect(() => {
+        if (shouldSearch && qd) {
+            const executeSearch = async () => {
+                await searchAsync(qd, showAdvancedSearch);
+                setShouldSearch(false); // Resetta il trigger dopo la ricerca
+            };
+            executeSearch();
+        }
+    }, [shouldSearch, qd, showAdvancedSearch]);
+    useEffect(() => {
+        const handleKeyDown = (e) => {
+            if (isQueryPanelActive) {
+                if (e.key === 'Enter') {
+                    e.preventDefault();
+                    // Disattiva l'elemento attivo per forzare l'onBlur
+                    if (document.activeElement instanceof HTMLElement) {
+                        document.activeElement.blur();
+                    }
+                    // Attiva il flag di ricerca. L'useEffect sopra gestirà l'attesa di qd.
+                    setShouldSearch(true);
+                }
+            }
+        };
+        window.addEventListener('keydown', handleKeyDown);
+        return () => {
+            window.removeEventListener('keydown', handleKeyDown);
+        };
+    }, [isQueryPanelActive]);
+    const setDataAsync = async (sqd) => {
+        let newSqd = (sqd?.id == 1) ? sqd : await SavedQueryCacheService.GetAsync(sqd?.id);
+        let newQd = SearchEngine.NormalizeQueryDescriptor(newSqd?.qd);
+        setQd(newQd);
+        if (newQd)
+            getDcmtTypesByQdAsync(newQd).then((dtdl) => setDcmtTypesList(dtdl)).catch((err) => { TMExceptionBoxManager.show({ exception: err }); });
+        setLastQdParams([]);
+        if (newSqd?.runSearchWhenSelected == 1)
+            await searchAsync?.(newQd, newSqd?.isEasyWhere != 1);
+        setShowAdvancedSearch(newSqd?.isEasyWhere != 1);
+    };
+    const clearFilters = () => {
+        const newWhere = qd?.where?.map((curItem, curIndex) => {
+            let newWi = new WhereItem();
+            newWi.init({ ...curItem, value1: undefined, value2: undefined });
+            return newWi;
+        });
+        setQd({ ...qd, where: newWhere });
+    };
+    const searchAsync = async (qdInput, isAdvancedSearch) => {
+        onSearchCompleted?.([], undefined); // reset results
+        let searchParams = { isAdvancedSearch: isAdvancedSearch, lastQdParams: lastQdParams, confirmQueryParams: confirmQueryParams, setLastQdParamsCallback: setLastQdParams };
+        let searchResult = await searchByQdAsync(qdInput, searchParams);
+        let dcmtsFound = searchResult?.result?.dcmtsFound ?? 0;
+        if (dcmtsFound <= 0)
+            ShowAlert({ message: SDKUI_Localizator.NoDcmtFound, mode: 'info', title: SDKUI_Localizator.SearchResult, duration: 3000 });
+        else {
+            let results = [];
+            if (searchResult?.result)
+                results.push(searchResult?.result);
+            // Before notifying onSearchComplete, let's set the panel to NOT active
+            setIsQueryPanelActive(false);
+            onSearchCompleted?.(results, searchResult?.qd);
+        }
+    };
+    const openSqdForm = (formMode) => { setFormModeSqdForm(formMode); setShowSqdForm(true); };
+    const changeAdvancedSearchAsync = async (show) => {
+        setShowAdvancedSearch(show);
+        if (show)
+            setQd({ ...qd, where: qd?.where?.filter(o => PlatformObjectValidator.WhereItemHasValues(o)) });
+        else {
+            let qdEasy = SQD?.qd ?? await getQD(fromDTD?.id, false);
+            if (qdEasy && qd?.where) {
+                for (const wi of qd.where) {
+                    let wiEasy = qdEasy.where?.find(o => o.mid == wi.mid);
+                    if (wiEasy) {
+                        wiEasy.or = false;
+                        wiEasy.leftBrackets = "(";
+                        wiEasy.operator = wi.operator;
+                        wiEasy.value1 = wi.value1;
+                        wiEasy.value2 = wi.value2;
+                        wiEasy.rightBrackets = ")";
+                    }
+                }
+                setQd({ ...qd, where: qdEasy?.where });
+            }
+        }
+    };
+    const handleSearchButtonClick = useCallback(async () => {
+        // Propagazione blur
+        if (document.activeElement instanceof HTMLElement) {
+            document.activeElement.blur();
+        }
+        // Attiva il flag di ricerca anche per il click del bottone
+        setShouldSearch(true);
+    }, []);
+    const handleQdChanged = useCallback((newQd) => {
+        if (!deepCompare(qd, newQd)) {
+            setQd(newQd);
+        }
+    }, []);
+    const handlePanelActiveChanged = useCallback((isActive) => {
+        setIsQueryPanelActive(isActive);
+    }, []);
+    const handleAdvancedMenuClick = useCallback((e) => {
+        if (e.button === AdvancedMenuButtons.DistinctValues) {
+            setShowDistinctValuesPanel(true);
+        }
+    }, []);
+    const handlePassToArchive = useCallback(() => {
+        if (!passToArchiveCallback || !qd?.where)
+            return;
+        const outputMids = qd.where
+            .filter(wi => wi.mid && wi.value1 && wi.value1.length > 0)
+            .map(wi => ({ mid: wi.mid, value: wi.value1 }));
+        passToArchiveCallback(outputMids, fromDTD?.id);
+    }, [passToArchiveCallback, qd?.where, fromDTD?.id]);
+    const handleCloseFiltersConfig = useCallback(() => setShowFiltersConfig(false), []);
+    const handleChooseFilters = useCallback((tid_mids) => {
+        if (!fromDTD?.metadata)
+            return;
+        if (!tid_mids)
+            return;
+        // copia dei whereItem senza i rimossi
+        let newWhere = qd?.where?.filter(wi => tid_mids?.some(tm => tm.mid == wi.mid)) ?? [];
+        // aggiungiamo i nuovi
+        for (const tm of tid_mids.filter(tm => !qd?.where?.some(wi => wi.mid == tm.mid))) {
+            let md = fromDTD?.metadata.find(o => o.id == tm.mid);
+            let wi = new WhereItem();
+            wi.or = false;
+            wi.leftBrackets = "(";
+            wi.tid = SQD?.masterTID;
+            wi.mid = tm.mid;
+            wi.operator = getDefaultOperator(md?.dataDomain, md?.dataType);
+            wi.rightBrackets = ")";
+            let indexMD = 0;
+            for (const m of fromDTD?.metadata ?? []) {
+                if (m.id == wi.mid)
+                    break;
+                if (newWhere.findIndex(o => o.mid == m.id && o.tid == SQD?.masterTID) < 0)
+                    continue;
+                indexMD++;
+            }
+            newWhere.splice(indexMD, 0, wi);
+        }
+        setQd({ ...qd, where: newWhere });
+    }, [qd, fromDTD?.metadata, SQD?.masterTID]);
+    const handleCloseOutputConfig = useCallback(() => setShowOutputConfig(false), []);
+    const handleChooseOutput = useCallback((tid_mids) => {
+        if (!fromDTD?.metadata)
+            return;
+        if (!tid_mids)
+            return;
+        // copia dei SelectItems senza i rimossi
+        let newSelect = qd?.select?.filter(item => tid_mids?.some(tm => tm.mid == item.mid)) ?? [];
+        // aggiungiamo i nuovi
+        for (const tm of tid_mids.filter(tm => !qd?.select?.some(item => item.mid == tm.mid))) {
+            let md = fromDTD?.metadata.find(o => o.id == tm.mid);
+            let si = new SelectItem();
+            si.visibility = SelectItemVisibilities.Visible;
+            si.tid = SQD?.masterTID;
+            si.mid = md?.id;
+            let indexMD = 0;
+            for (const m of fromDTD?.metadata ?? []) {
+                if (m.id == si.mid)
+                    break;
+                if (newSelect.findIndex(o => o.mid == m.id && o.tid == SQD?.masterTID) < 0)
+                    continue;
+                indexMD++;
+            }
+            newSelect.splice(indexMD, 0, si);
+        }
+        setQd({ ...qd, select: newSelect });
+    }, [qd, fromDTD?.metadata, SQD?.masterTID]);
+    const handleCloseOrderByConfig = useCallback(() => setShowOrderByConfig(false), []);
+    const handleChooseOrderBy = useCallback((tid_mids) => {
+        if (!fromDTD?.metadata)
+            return;
+        if (!tid_mids)
+            return;
+        // copia dei OrderByItems senza i rimossi
+        let newOrderBy = qd?.orderBy?.filter(item => tid_mids?.some(tm => tm.mid == item.mid)) ?? [];
+        // aggiungiamo i nuovi
+        for (const tm of tid_mids.filter(tm => !qd?.orderBy?.some(item => item.mid == tm.mid))) {
+            let md = fromDTD?.metadata.find(o => o.id == tm.mid);
+            let oi = new OrderByItem();
+            oi.tid = SQD?.masterTID;
+            oi.mid = md?.id;
+            oi.asc = true;
+            newOrderBy.push(oi);
+        }
+        setQd({ ...qd, orderBy: newOrderBy });
+    }, [qd, fromDTD?.metadata, SQD?.masterTID]);
+    const captionText = showAllMdWhere ? SDKUI_Localizator.ShowLess : SDKUI_Localizator.ShowAll;
+    let maxItems = getListMaxItems(deviceType ?? DeviceType.DESKTOP);
+    const diff = (qd?.where?.length ?? 0) - maxItems;
+    return (_jsxs(_Fragment, { children: [_jsxs(TMPanel, { title: fromDTD?.nameLoc ?? SDKUI_Localizator.Search_Metadata, allowMaximize: allowMaximize, onMaximize: onMaximizePanel, onHeaderDoubleClick: onMaximizePanel, onBack: onBack, onActiveChanged: handlePanelActiveChanged, 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, onClick: () => setIsQueryPanelActive(true) }), items: [
+                                ...(showBackToResultButton ? [{ icon: _jsx(IconArrowRight, {}), text: "Vai a risultato", onClick: () => { onBackToResult?.(); } }] : []),
+                                { icon: _jsx(IconAddCircleOutline, {}), beginGroup: true, text: SDKUI_Localizator.SavedQueryNew, onClick: () => { openSqdForm(FormModes.Create); } },
+                                { icon: _jsx(IconEdit, {}), text: SDKUI_Localizator.SavedQueryUpdate, disabled: (SQD && SQD.id == 1), onClick: () => { openSqdForm(FormModes.Update); } },
+                                { icon: showAdvancedSearch ? _jsx(IconEasy, {}) : _jsx(IconAdvanced, {}), beginGroup: true, text: showAdvancedSearch ? SDKUI_Localizator.Search_Easy : SDKUI_Localizator.Search_Advanced, onClick: () => { changeAdvancedSearchAsync(!showAdvancedSearch); } },
+                                { icon: _jsx(IconEdit, {}), beginGroup: true, text: `${SDKUI_Localizator.Configure} - ${SDK_Localizator.QueryWhere}`, onClick: () => { setShowFiltersConfig(true); } },
+                                { icon: _jsx(IconEdit, {}), text: `${SDKUI_Localizator.Configure} - ${SDK_Localizator.QuerySelect}`, onClick: () => { setShowOutputConfig(true); } },
+                                { icon: _jsx(IconEdit, {}), text: `${SDKUI_Localizator.Configure} - ${SDK_Localizator.QueryOrderBy}`, onClick: () => { setShowOrderByConfig(true); } },
+                                { icon: _jsx(IconMenuCAArchive, { viewBox: '11 11.5 26 27', fontSize: 16, strokeWidth: 2, color: 'black' }), beginGroup: true, text: SDKUI_Localizator.PassToArchive, onClick: handlePassToArchive }
+                            ], onMenuShown: () => setIsQueryPanelActive(true) })
+                        : _jsx(_Fragment, {}) }), children: [_jsx(ConfirmQueryParamsDialog, {}), SQD
+                        ? _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: handleQdChanged })
+                                    : _jsx(TMSearchQueryEditor, { qd: qd, dcmtTypesList: dcmtTypesList, isExpertMode: isExpertMode, showAllMdWhere: showAllMdWhere, onQdChanged: handleQdChanged, onFocusedMetadataChanged: setFocusedTidMid, onAdvancedMenuClick: handleAdvancedMenuClick }), _jsxs("div", { style: {
+                                        display: 'flex',
+                                        flexWrap: 'wrap',
+                                        justifyContent: 'center',
+                                        alignItems: 'center',
+                                        gap: '10px',
+                                        width: '100%'
+                                    }, children: [_jsx(TMButton, { btnStyle: 'advanced', icon: _jsx(IconSearch, {}), showTooltip: false, width: '90px', caption: SDKUI_Localizator.Search, advancedColor: '#4A96D2', onClick: handleSearchButtonClick }), _jsx(TMButton, { width: '90px', btnStyle: 'advanced', advancedType: 'primary', showTooltip: false, caption: SDKUI_Localizator.Clear, icon: _jsx(IconClear, {}), advancedColor: 'white', color: 'primaryOutline', onClick: clearFilters }), (!showAdvancedSearch && qd?.where && qd.where.length > initialMaxItems) && (_jsx(TMButton, { width: '120px', btnStyle: isMobile ? 'icon' : 'advanced', advancedColor: TMColors.button_primary, caption: captionText, showTooltip: false, icon: isMobile ? (_jsx("div", { children: _jsx("p", { children: showAllMdWhere ? `-${diff}` : `+${diff}` }) })) : (_jsx("p", { children: showAllMdWhere ? `-${diff}` : `+${diff}` })), onClick: () => setShowAllMdWhere(!showAllMdWhere) }))] }), showFiltersConfig &&
+                                    _jsx(TMMetadataChooserForm, { allowMultipleSelection: true, height: '500px', width: '600px', allowSysMetadata: true, qd: qd, selectedIDs: qd?.where?.map((w) => ({ tid: w.tid, mid: w.mid })), onClose: handleCloseFiltersConfig, onChoose: handleChooseFilters }), showOutputConfig &&
+                                    _jsx(TMMetadataChooserForm, { allowMultipleSelection: true, height: '500px', width: '600px', allowSysMetadata: true, qd: qd, selectedIDs: qd?.select?.map((item) => ({ tid: item.tid, mid: item.mid })), onClose: handleCloseOutputConfig, onChoose: handleChooseOutput }), showOrderByConfig &&
+                                    _jsx(TMMetadataChooserForm, { allowMultipleSelection: true, height: '500px', width: '600px', allowSysMetadata: true, qd: qd, selectedIDs: qd?.orderBy?.map((item) => ({ tid: item.tid, mid: item.mid })), onClose: handleCloseOrderByConfig, onChoose: handleChooseOrderBy })] })
+                        :
+                            _jsxs(TMLayoutContainer, { gap: 30, alignItems: 'center', justifyContent: 'center', children: [_jsx(StyledToppyTextContainer, { children: _jsx(StyledToppyText, { title: SDKUI_Localizator.DcmtTypeSelectOrQuickSearch, children: SDKUI_Localizator.DcmtTypeSelectOrQuickSearch }) }), _jsx(StyledToppyImage, { src: Toppy, alt: 'Toppy' })] }), 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 }) })] }), 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);
+                        if (!wi)
+                            return;
+                        wi.value1 = e.newValue;
+                        let md = fromDTD?.metadata?.find(o => o.id === focusedTidMid?.mid);
+                        wi.operator = e.isAppendMode ? QueryOperators.In : getDefaultOperator(md?.dataDomain, md?.dataType);
+                        const whereCopy = qd?.where?.map((curItem) => {
+                            if (curItem.mid != wi.mid)
+                                return curItem;
+                            return wi;
+                        });
+                        setQd({ ...qd, where: whereCopy });
+                    } })] }));
+};
+export default TMSearchQueryPanel;
+const searchByQdAsync = async (qdInput, searchParams) => {
+    let result;
+    let qdSearch;
+    try {
+        qdSearch = await prepareQdForSearchAsync(qdInput, !searchParams.isAdvancedSearch);
+        qdSearch.select?.forEach(o => { o.visibility ??= SelectItemVisibilities.Visible; });
+        if (IsParametricQuery(qdSearch)) {
+            const qdParams = await searchParams.confirmQueryParams?.(qdSearch, searchParams.lastQdParams) ?? [];
+            searchParams.setLastQdParamsCallback?.(qdParams);
+            if (!qdParams || qdParams.length <= 0)
+                return;
+            for (const qpd of qdParams) {
+                let wi = qdSearch.where?.find(o => o.value1 == qpd.name);
+                if (wi)
+                    wi.value1 = wi.value1?.replace(wi.value1, !qpd.value ? '' : qpd.value.toString());
+                else {
+                    wi = qdSearch.where?.find(o => o.value2 == qpd.name);
+                    if (wi)
+                        wi.value2 = wi.value2?.replace(wi.value2, !qpd.value ? '' : qpd.value.toString());
+                }
+            }
+        }
+        TMSpinner.show({ description: `${SDKUI_Localizator.Search} ...`, backgroundColor: 'transparent' });
+        result = await SDK_Globals.tmSession?.NewSearchEngine().SearchByIDAsync(qdSearch);
+    }
+    catch (ex) {
+        TMExceptionBoxManager.show({ title: SDKUI_Localizator.Search, exception: ex });
+    }
+    finally {
+        TMSpinner.hide();
+    }
+    return { result: result, qd: qdSearch };
+};
+export const refreshLastSearch = async (qd) => {
+    if (!qd)
+        return;
+    let searchResults = [];
+    try {
+        TMSpinner.show({ description: `${SDKUI_Localizator.Search} ...`, backgroundColor: 'transparent' });
+        let result = await SDK_Globals.tmSession?.NewSearchEngine().SearchByIDAsync(qd);
+        let dcmtsFound = result?.dcmtsFound ?? 0;
+        if (dcmtsFound <= 0)
+            ShowAlert({ message: SDKUI_Localizator.NoDcmtFound, mode: 'info', title: SDKUI_Localizator.SearchResult, duration: 3000 });
+        else if (result)
+            searchResults.push(result);
+    }
+    catch (ex) {
+        TMExceptionBoxManager.show({ title: SDKUI_Localizator.Search, exception: ex });
+    }
+    finally {
+        TMSpinner.hide();
+    }
+    return searchResults;
+};
+export const StyledToppyTextContainer = styled.div `
+    padding: 22px 8px;
+    width: 100%;
+    max-width: 300px;
+    border: 1px solid #2559A5;
+    border-radius: 30px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    min-height: 100px;
+`;
+export const StyledToppyText = styled.p `
+    text-align: center;
+    color: #2559A5;
+    font-size: 1rem;
+    user-select: none;
+    margin: 0;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 3; /* non è una proprietà standard ma è così diffusa e ben supportata che è considerata una "best practice pragmatica" */
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: normal;
+    word-break: break-word;
+    line-height: 1.2;
+`;
+export const StyledToppyImage = styled.img `
+    width: 100%; 
+    max-width: 120px; 
+    height: auto;
+    display: block; 
+`;

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

@@ -0,0 +1,53 @@
+import React from 'react';
+import { SearchResultDescriptor, DcmtTypeDescriptor, TaskDescriptor, WorkingGroupDescriptor, ObjectRef, HomeBlogPost } from '@topconsultnpm/sdk-ts';
+import { DcmtInfo, SearchResultContext, TaskContext } from '../../../ts';
+import { TMSearchResultFloatingActionConfig } from './TMSearchResultFloatingActionButton';
+export declare const getSearchResultCountersSingleCategory: (searchResults: SearchResultDescriptor[]) => string;
+interface ITMSearchResultProps {
+    allTasks?: Array<TaskDescriptor>;
+    getAllTasks?: () => Promise<void>;
+    deleteTaskByIdsCallback?: (deletedTaskIds: Array<number>) => Promise<void>;
+    addTaskCallback?: (task: TaskDescriptor) => Promise<void>;
+    editTaskCallback?: (task: TaskDescriptor) => Promise<void>;
+    handleNavigateToWGs?: (value: HomeBlogPost | number) => Promise<void>;
+    handleNavigateToDossiers?: (value: HomeBlogPost | number) => Promise<void>;
+    context?: SearchResultContext;
+    title?: string;
+    searchResults: SearchResultDescriptor[] | undefined;
+    allowFloatingBar?: boolean;
+    allowRelations?: boolean;
+    isClosable?: boolean;
+    isVisible?: boolean;
+    openDcmtFormAsModal?: boolean;
+    showSearchResultSidebar?: boolean;
+    showSelector?: boolean;
+    showToolbarHeader?: boolean;
+    showBackButton?: boolean;
+    groupId?: string;
+    selectedSearchResultTID?: number;
+    workingGroupContext?: WorkingGroupDescriptor;
+    disableAccordionIfSingleCategory?: boolean;
+    floatingActionConfig?: TMSearchResultFloatingActionConfig;
+    openInOffice?: (selectedDcmtsOrFocused: Array<DcmtInfo>) => Promise<void>;
+    onClose?: () => void;
+    onWFOperationCompleted?: () => Promise<void>;
+    onSelectedTIDChanged?: (TID: number) => void;
+    onRefreshSearchAsync?: () => Promise<void>;
+    onRefreshAfterAddDcmtToFavs?: () => void;
+    onFileOpened?: (blob: 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;
+    openCommentFormCallback?: (documents: Array<DcmtInfo>) => void;
+    openAddDocumentForm?: () => void;
+    openS4TViewer?: boolean;
+    onOpenS4TViewerRequest?: (dcmtInfo: Array<DcmtInfo>, onRefreshSearchAsync?: (() => Promise<void>)) => void;
+    passToArchiveCallback?: (outputMids: Array<{
+        mid: number;
+        value: string;
+    }>, tid?: number) => void;
+    showTodoDcmtForm?: boolean;
+    onReferenceClick?: (ref: ObjectRef) => void;
+}
+declare const TMSearchResult: React.FC<ITMSearchResultProps>;
+export default TMSearchResult;