@topconsultnpm/sdkui-react 6.21.0-dev3.8 → 6.21.0-dev4.2

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

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { PlatformObjectValidator, QueryDescriptor, WhereItem, SDK_Localizator, OrderByItem, SelectItem, SelectItemVisibilities, SDK_Globals, SavedQueryCacheService, SearchEngine, QueryOperators, AccessLevelsEx, AccessLevels } from '@topconsultnpm/sdk-ts';
+import { PlatformObjectValidator, QueryDescriptor, WhereItem, SDK_Localizator, SelectItemVisibilities, SDK_Globals, SavedQueryCacheService, SearchEngine, QueryOperators, AccessLevelsEx, AccessLevels } from '@topconsultnpm/sdk-ts';
 import styled from 'styled-components';
 import TMSearchQueryEditor from './TMSearchQueryEditor';
-import { getDcmtTypesByQdAsync, SDKUI_Localizator, getQD, IconMenuVertical, IconAddCircleOutline, IconEdit, IconEasy, IconAdvanced, deepCompare, IconSearch, IconClear, getDefaultOperator, prepareQdForSearchAsync, IsParametricQuery, SDKUI_Globals, IconArrowRight, IconMenuCAArchive, getListMaxItems, DEFAULT_MAX_DCMTS_TO_BE_RETURNED } from '../../../helper';
+import { getDcmtTypesByQdAsync, SDKUI_Localizator, getQD, IconMenuVertical, IconAddCircleOutline, IconEdit, IconEasy, IconAdvanced, deepCompare, IconSearch, IconClear, getDefaultOperator, prepareQdForSearchAsync, IsParametricQuery, SDKUI_Globals, IconArrowRight, IconMenuCAArchive, getListMaxItems, DEFAULT_MAX_DCMTS_TO_BE_RETURNED, IconSortAsc, IconSortDesc, IconFilter, IconColumns, IconSort } from '../../../helper';
 import { useQueryParametersDialog } from '../../../hooks/useQueryParametersDialog';
 import { FormModes } from '../../../ts';
 import { TMColors } from '../../../utils/theme';
@@ -21,6 +21,9 @@ import TMSavedQueryForm from './TMSavedQueryForm';
 import { ContextMenu } from '../../NewComponents/ContextMenu';
 import { AdvancedMenuButtons } from '../../editors/TMMetadataValues';
 import TMToppyMessage from '../../../helper/TMToppyMessage';
+import TMMetadataSorterForm from './TMMetadataSorterForm';
+import TMMetadataOutputForm from './TMMetadataOutputForm';
+import TMTooltip from '../../base/TMTooltip';
 const TMSearchQueryPanel = ({ fromDTD, showBackToResultButton, isExpertMode = SDKUI_Globals.userSettings.advancedSettings.expertMode === 1, SQD, inputMids, onSearchCompleted, onSqdSaved, onBack, onClosePanel, allowMaximize = true, onMaximizePanel, onBackToResult, passToArchiveCallback, maxDcmtsToBeReturned }) => {
     const [confirmQueryParams, ConfirmQueryParamsDialog] = useQueryParametersDialog();
     const [qd, setQd] = useState();
@@ -34,7 +37,7 @@ const TMSearchQueryPanel = ({ fromDTD, showBackToResultButton, isExpertMode = SD
     const [showAdvancedSearch, setShowAdvancedSearch] = useState(false);
     const [showFiltersConfig, setShowFiltersConfig] = useState(false);
     const [showOutputConfig, setShowOutputConfig] = useState(false);
-    const [showOrderByConfig, setShowOrderByConfig] = useState(false);
+    const [showMetadataSorterForm, setShowMetadataSorterForm] = useState(false);
     const [showDistinctValuesPanel, setShowDistinctValuesPanel] = useState(false);
     const [focusedTidMid, setFocusedTidMid] = useState();
     const [modalIsOpen, setModalIsOpen] = useState(false);
@@ -162,7 +165,7 @@ const TMSearchQueryPanel = ({ fromDTD, showBackToResultButton, isExpertMode = SD
             newWi.init({ ...curItem, value1: undefined, value2: undefined });
             return newWi;
         });
-        setQd({ ...qd, where: newWhere });
+        setQd({ ...qd, where: newWhere, orderBy: [] });
     };
     const searchAsync = async (qdInput, isAdvancedSearch) => {
         onSearchCompleted?.([], undefined); // reset results
@@ -266,70 +269,84 @@ const TMSearchQueryPanel = ({ fromDTD, showBackToResultButton, isExpertMode = SD
         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 contextMenuItems = useMemo(() => [
         ...(showBackToResultButton ? [{ icon: _jsx(IconArrowRight, {}), name: "Vai a risultato", onClick: () => { onBackToResult?.(); } }] : []),
         { icon: _jsx(IconAddCircleOutline, {}), name: SDKUI_Localizator.SavedQueryNew, beginGroup: showBackToResultButton, onClick: () => { openSqdForm(FormModes.Create); } },
         { icon: _jsx(IconEdit, {}), name: SDKUI_Localizator.SavedQueryUpdate, disabled: (SQD && SQD.id == 1), onClick: () => { openSqdForm(FormModes.Update); } },
         { icon: showAdvancedSearch ? _jsx(IconEasy, {}) : _jsx(IconAdvanced, {}), beginGroup: true, name: showAdvancedSearch ? SDKUI_Localizator.Search_Easy : SDKUI_Localizator.Search_Advanced, onClick: () => { changeAdvancedSearchAsync(!showAdvancedSearch); } },
-        { icon: _jsx(IconEdit, {}), name: `${SDKUI_Localizator.Configure} - ${SDK_Localizator.QueryWhere}`, beginGroup: true, onClick: () => { setShowFiltersConfig(true); } },
-        { icon: _jsx(IconEdit, {}), name: `${SDKUI_Localizator.Configure} - ${SDK_Localizator.QuerySelect}`, onClick: () => { setShowOutputConfig(true); } },
-        { icon: _jsx(IconEdit, {}), name: `${SDKUI_Localizator.Configure} - ${SDK_Localizator.QueryOrderBy}`, onClick: () => { setShowOrderByConfig(true); } },
+        { icon: _jsx(IconFilter, {}), name: `${SDKUI_Localizator.Configure} - ${SDK_Localizator.QueryWhere}`, beginGroup: true, onClick: () => { setShowFiltersConfig(true); } },
+        { icon: _jsx(IconColumns, {}), name: `${SDKUI_Localizator.Configure} - ${SDK_Localizator.QuerySelect}`, onClick: () => { setShowOutputConfig(true); } },
+        { icon: _jsx(IconSort, {}), name: `${SDKUI_Localizator.Configure} - ${SDK_Localizator.QueryOrderBy}`, onClick: () => { setShowMetadataSorterForm(true); } },
         { icon: _jsx(IconMenuCAArchive, { viewBox: '11 11.5 26 27', fontSize: 16, strokeWidth: 2, color: 'black' }), beginGroup: true, name: SDKUI_Localizator.PassToArchive, disabled: fromDTD?.perm?.canArchive !== AccessLevelsEx.Yes && fromDTD?.perm?.canArchive !== AccessLevelsEx.Mixed, onClick: handlePassToArchive }
-    ], [showBackToResultButton, showAdvancedSearch, SQD, onBackToResult, openSqdForm, changeAdvancedSearchAsync, setShowFiltersConfig, setShowOutputConfig, setShowOrderByConfig, handlePassToArchive, fromDTD?.perm?.canArchive]);
+    ], [showBackToResultButton, showAdvancedSearch, SQD, onBackToResult, openSqdForm, changeAdvancedSearchAsync, setShowFiltersConfig, setShowOutputConfig, handlePassToArchive, fromDTD?.perm?.canArchive]);
     const captionText = showAllMdWhere ? SDKUI_Localizator.ShowLess : SDKUI_Localizator.ShowAll;
     let maxItems = getListMaxItems(deviceType ?? DeviceType.DESKTOP);
     const diff = (qd?.where?.length ?? 0) - maxItems;
+    // Calcola se mostrare i badges di output
+    // Non mostrare se: modalità avanzata, tutti i metadati selezionati, o tutti tranne quelli di sistema
+    const shouldShowOutputBadges = useMemo(() => {
+        // In modalità avanzata non mostrare mai i badges di output
+        if (showAdvancedSearch)
+            return false;
+        if (!qd?.select || qd.select.length === 0)
+            return false;
+        if (!fromDTD?.metadata)
+            return true;
+        // Filtra i metadati disponibili per output (stessa logica usata in TMMetadataOutputForm)
+        const availableOutputMetadata = fromDTD.metadata.filter(o => o.perm?.canView === AccessLevels.Yes || o.perm?.canUpdate === AccessLevels.Yes);
+        // Metadati non di sistema disponibili per output
+        const availableNonSystemMetadata = availableOutputMetadata.filter(o => o.isSystem !== 1);
+        const selectedCount = qd.select.length;
+        const totalAvailable = availableOutputMetadata.length;
+        const totalNonSystem = availableNonSystemMetadata.length;
+        // Non mostrare se sono selezionati tutti i metadati disponibili
+        if (selectedCount === totalAvailable)
+            return false;
+        // Non mostrare se sono selezionati tutti i metadati non di sistema
+        // (verifica che tutti quelli selezionati siano non di sistema e che siano tutti)
+        const selectedMids = new Set(qd.select.map(s => s.mid));
+        const allSelectedAreNonSystem = qd.select.every(s => {
+            const md = fromDTD.metadata?.find(m => m.id === s.mid);
+            return md && md.isSystem !== 1;
+        });
+        const allNonSystemAreSelected = availableNonSystemMetadata.every(m => selectedMids.has(m.id));
+        if (allSelectedAreNonSystem && allNonSystemAreSelected && selectedCount === totalNonSystem) {
+            return false;
+        }
+        return true;
+    }, [showAdvancedSearch, qd?.select, fromDTD?.metadata]);
+    // In modalità avanzata non mostrare i badges di ordinamento
+    const shouldShowOrderByBadges = useMemo(() => {
+        if (showAdvancedSearch)
+            return false;
+        return qd?.orderBy && qd.orderBy.length > 0;
+    }, [showAdvancedSearch, qd?.orderBy]);
     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(ContextMenu, { items: contextMenuItems, trigger: "left", children: _jsx(TMButton, { btnStyle: 'icon', caption: 'Altro', icon: _jsx(IconMenuVertical, { color: 'white' }), showTooltip: false, onClick: () => setIsQueryPanelActive(true) }) })
                         : _jsx(_Fragment, {}) }), children: [_jsx(ConfirmQueryParamsDialog, {}), SQD
                         ? _jsxs("div", { onContextMenu: (e) => e.preventDefault(), style: { height: '100%', width: '100%', position: 'relative', display: showSqdForm ? 'none' : 'flex', flexDirection: 'column', gap: 5 }, children: [showAdvancedSearch
                                     ? _jsx(TMQueryEditor, { formMode: FormModes.Update, showToolbar: false, inputData: qd, validateSelect: true, showApply: false, onQDChanged: handleQdChanged, updateIsModalOpen: updateIsModalOpen })
-                                    : _jsx(TMSearchQueryEditor, { qd: qd, dcmtTypesList: dcmtTypesList, isExpertMode: isExpertMode, showAllMdWhere: showAllMdWhere, onQdChanged: handleQdChanged, onFocusedMetadataChanged: setFocusedTidMid, onAdvancedMenuClick: handleAdvancedMenuClick, updateIsModalOpen: updateIsModalOpen }), _jsxs("div", { style: {
+                                    : _jsx(TMSearchQueryEditor, { qd: qd, dcmtTypesList: dcmtTypesList, isExpertMode: isExpertMode, showAllMdWhere: showAllMdWhere, onQdChanged: handleQdChanged, onFocusedMetadataChanged: setFocusedTidMid, onAdvancedMenuClick: handleAdvancedMenuClick, updateIsModalOpen: updateIsModalOpen }), shouldShowOutputBadges && qd?.select && qd.select.length > 0 && (_jsxs(StyledSelectBadgesContainer, { children: [_jsxs(StyledSelectLabel, { children: [SDK_Localizator.QuerySelect, ":"] }), _jsx(StyledSelectBadgesWrapper, { children: (() => {
+                                                const selectItems = qd.select ?? [];
+                                                const maxVisible = isMobile ? 1 : 2;
+                                                const visibleItems = selectItems.slice(0, maxVisible);
+                                                const hiddenCount = selectItems.length - maxVisible;
+                                                return (_jsxs(_Fragment, { children: [visibleItems.map((si, index) => {
+                                                            const md = fromDTD?.metadata?.find(m => m.id === si.mid);
+                                                            const mdName = md?.nameLoc ?? md?.name ?? `MID ${si.mid}`;
+                                                            return (_jsxs(StyledSelectBadge, { children: [_jsx(IconColumns, { fontSize: 12 }), _jsx("span", { className: "badge-name", children: mdName })] }, `${si.tid}-${si.mid}-${index}`));
+                                                        }), hiddenCount > 0 && (_jsxs(StyledSelectBadgeMore, { onClick: () => setShowOutputConfig(true), children: ["+", hiddenCount] }))] }));
+                                            })() }), _jsx(StyledSelectEditButton, { title: SDKUI_Localizator.Configure, onClick: () => setShowOutputConfig(true), children: _jsx(IconEdit, { fontSize: 16 }) })] })), shouldShowOrderByBadges && qd?.orderBy && qd.orderBy.length > 0 && (_jsxs(StyledOrderByBadgesContainer, { children: [_jsxs(StyledOrderByLabel, { children: [qd.orderBy.length === 1 ? SDKUI_Localizator.SortBy : SDKUI_Localizator.SortByPlural, ":"] }), _jsx(StyledOrderByBadgesWrapper, { children: (() => {
+                                                const orderByItems = qd.orderBy ?? [];
+                                                const maxVisible = isMobile ? 1 : 2;
+                                                const visibleItems = orderByItems.slice(0, maxVisible);
+                                                const hiddenCount = orderByItems.length - maxVisible;
+                                                return (_jsxs(_Fragment, { children: [visibleItems.map((obi, index) => {
+                                                            const md = fromDTD?.metadata?.find(m => m.id === obi.mid);
+                                                            const mdName = md?.nameLoc ?? md?.name ?? `MID ${obi.mid}`;
+                                                            return (_jsxs(StyledOrderByBadge, { children: [_jsx(TMTooltip, { content: obi.asc !== false ? SDKUI_Localizator.ValueAscending : SDKUI_Localizator.ValueDescending, children: obi.asc !== false ? (_jsx(IconSortAsc, { fontSize: 12 })) : (_jsx(IconSortDesc, { fontSize: 12 })) }), _jsx("span", { className: "badge-name", children: mdName })] }, `${obi.tid}-${obi.mid}-${index}`));
+                                                        }), hiddenCount > 0 && (_jsxs(StyledOrderByBadgeMore, { onClick: () => setShowMetadataSorterForm(true), children: ["+", hiddenCount] }))] }));
+                                            })() }), _jsx(StyledOrderByEditButton, { title: SDKUI_Localizator.Configure, onClick: () => setShowMetadataSorterForm(true), children: _jsx(IconEdit, { fontSize: 16 }) })] })), _jsxs("div", { style: {
                                         display: 'flex',
                                         flexWrap: 'wrap',
                                         justifyContent: 'center',
@@ -338,8 +355,12 @@ const TMSearchQueryPanel = ({ fromDTD, showBackToResultButton, isExpertMode = SD
                                         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, filterMetadata: (o => o.perm?.canSearch === AccessLevels.Yes), 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, filterMetadata: (o => o.perm?.canView === AccessLevels.Yes || o.perm?.canUpdate === AccessLevels.Yes), 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, filterMetadata: (o => o.perm?.canView === AccessLevels.Yes || o.perm?.canUpdate === AccessLevels.Yes), qd: qd, selectedIDs: qd?.orderBy?.map((item) => ({ tid: item.tid, mid: item.mid })), onClose: handleCloseOrderByConfig, onChoose: handleChooseOrderBy })] })
+                                    _jsx(TMMetadataOutputForm, { qd: qd, selectedSelectItems: qd?.select, allowSysMetadata: true, filterMetadata: (o => o.perm?.canView === AccessLevels.Yes || o.perm?.canUpdate === AccessLevels.Yes), onClose: handleCloseOutputConfig, onChoose: (selectItems) => {
+                                            setQd({ ...qd, select: selectItems });
+                                        } }), showMetadataSorterForm &&
+                                    _jsx(TMMetadataSorterForm, { qd: qd, selectedOrderByItems: qd?.orderBy, allowSysMetadata: true, filterMetadata: (o => o.perm?.canView === AccessLevels.Yes || o.perm?.canUpdate === AccessLevels.Yes), onClose: () => setShowMetadataSorterForm(false), onChoose: (orderByItems) => {
+                                            setQd({ ...qd, orderBy: orderByItems });
+                                        } })] })
                         :
                             _jsx(TMToppyMessage, { message: SDKUI_Localizator.DcmtTypeSelectOrQuickSearch, titleTooltip: SDKUI_Localizator.DcmtTypeSelectOrQuickSearch }), 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 &&
@@ -415,6 +436,174 @@ export const refreshLastSearch = async (qd) => {
     }
     return searchResults;
 };
+// =============================================================================
+// STYLED COMPONENTS per i badge degli ordinamenti
+// =============================================================================
+const StyledOrderByBadgesContainer = styled.div `
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 8px;
+    padding: 6px 10px;
+    margin: 1px 0;
+    background: linear-gradient(135deg, rgba(74, 150, 210, 0.08) 0%, rgba(37, 89, 165, 0.08) 100%);
+    border-radius: 8px;
+    border: 1px solid rgba(74, 150, 210, 0.2);
+`;
+const StyledOrderByLabel = styled.span `
+    font-size: 0.82rem;
+    font-weight: 600;
+    color: #4A96D2;
+    white-space: nowrap;
+`;
+const StyledOrderByBadgesWrapper = styled.div `
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+    align-items: center;
+    flex: 1;
+`;
+const StyledOrderByBadge = styled.div `
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    padding: 3px 8px;
+    background: white;
+    border: 1px solid #d1d9e6;
+    border-radius: 16px;
+    font-size: 0.82rem;
+    color: #333;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+    
+    .badge-name {
+        max-width: 120px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        
+        @media (max-width: 600px) {
+            max-width: 80px;
+        }
+    }
+`;
+const StyledOrderByBadgeMore = styled.div `
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 3px 10px;
+    background: linear-gradient(135deg, #4A96D2 0%, #2559A5 100%);
+    border: none;
+    border-radius: 16px;
+    font-size: 0.82rem;
+    font-weight: 600;
+    color: white;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    
+    &:hover {
+        transform: scale(1.05);
+        box-shadow: 0 2px 6px rgba(74, 150, 210, 0.4);
+    }
+`;
+const StyledOrderByEditButton = styled.div `
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    border-radius: 4px;
+    color: #4A96D2;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    
+    &:hover {
+        background-color: rgba(74, 150, 210, 0.15);
+    }
+`;
+// =============================================================================
+// STYLED COMPONENTS per i badge degli output (select) - colore verde/teal
+// =============================================================================
+const StyledSelectBadgesContainer = styled.div `
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 8px;
+    padding: 6px 10px;
+    margin: 1px 0;
+    background: linear-gradient(135deg, rgba(46, 125, 50, 0.08) 0%, rgba(27, 94, 32, 0.08) 100%);
+    border-radius: 8px;
+    border: 1px solid rgba(46, 125, 50, 0.2);
+`;
+const StyledSelectLabel = styled.span `
+    font-size: 0.82rem;
+    font-weight: 600;
+    color: #2E7D32;
+    white-space: nowrap;
+`;
+const StyledSelectBadgesWrapper = styled.div `
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+    align-items: center;
+    flex: 1;
+`;
+const StyledSelectBadge = styled.div `
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    padding: 3px 8px;
+    background: white;
+    border: 1px solid #c8e6c9;
+    border-radius: 16px;
+    font-size: 0.82rem;
+    color: #333;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+    
+    .badge-name {
+        max-width: 120px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        
+        @media (max-width: 600px) {
+            max-width: 80px;
+        }
+    }
+`;
+const StyledSelectBadgeMore = styled.div `
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 3px 10px;
+    background: linear-gradient(135deg, #43A047 0%, #2E7D32 100%);
+    border: none;
+    border-radius: 16px;
+    font-size: 0.82rem;
+    font-weight: 600;
+    color: white;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    
+    &:hover {
+        transform: scale(1.05);
+        box-shadow: 0 2px 6px rgba(46, 125, 50, 0.4);
+    }
+`;
+const StyledSelectEditButton = styled.div `
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    border-radius: 4px;
+    color: #2E7D32;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    
+    &:hover {
+        background-color: rgba(46, 125, 50, 0.15);
+    }
+`;
 export const StyledToppyTextContainer = styled.div `
     padding: 22px 8px;
     width: 100%;
@@ -433,11 +622,13 @@ export const StyledToppyText = styled.p `
     font-size: 1rem;
     user-select: none;
     -webkit-touch-callout: none;
-  -webkit-user-select: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-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" */
+    -webkit-line-clamp: 3;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: normal;

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

@@ -12,6 +12,7 @@ interface ITMSearchResultProps {
     floatingActionConfig?: TMSearchResultFloatingActionConfig;
     workingGroupContext?: WorkingGroupDescriptor;
     inputDID?: number;
+    autoFocusFirstRow?: boolean;
     formAutoOpen?: boolean;
     allowFloatingBar?: boolean;
     allowRelations?: boolean;

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

@@ -54,7 +54,7 @@ const TMSearchResult = ({
 // Data
 groupId, searchResults = [], context = SearchResultContext.METADATA_SEARCH, title, selectedSearchResultTID, floatingActionConfig, workingGroupContext = undefined, inputDID, 
 // Boolean flags to enable/disable features
-formAutoOpen, isVisible = true, allowRelations = true, openDcmtFormAsModal = false, showSearchResultSidebar = true, showDcmtFormSidebar = true, showSelector = false, isClosable = false, allowFloatingBar = true, showToolbarHeader = true, showBackButton = true, disableAccordionIfSingleCategory = false, editPdfForm = false, openS4TViewer = false, showTodoDcmtForm = false, showToppyDraggableHelpCenter = true, toppyHelpCenterUsePortal = false, showNoDcmtFoundMessage = true, enablePinIcons = true, 
+autoFocusFirstRow = true, formAutoOpen, isVisible = true, allowRelations = true, openDcmtFormAsModal = false, showSearchResultSidebar = true, showDcmtFormSidebar = true, showSelector = false, isClosable = false, allowFloatingBar = true, showToolbarHeader = true, showBackButton = true, disableAccordionIfSingleCategory = false, editPdfForm = false, openS4TViewer = false, showTodoDcmtForm = false, showToppyDraggableHelpCenter = true, toppyHelpCenterUsePortal = false, showNoDcmtFoundMessage = true, enablePinIcons = true, 
 // Callbacks (optional)
 openInOffice, onRefreshAfterAddDcmtToFavs, onRefreshSearchAsyncDatagrid, onSelectedTIDChanged, onWFOperationCompleted, onClose, onFileOpened, onTaskCreateRequest, openWGsCopyMoveForm, openCommentFormCallback, openAddDocumentForm, onOpenS4TViewerRequest, onOpenPdfEditorRequest, openFileUploaderPdfEditor, passToArchiveCallback, onReferenceClick, 
 // Tasks
@@ -63,6 +63,11 @@ allTasks = [], getAllTasks, deleteTaskByIdsCallback, addTaskCallback, editTaskCa
 handleNavigateToWGs, handleNavigateToDossiers, }) => {
     // Ref for the floating bar container (used to position the floating action buttons)
     const floatingBarContainerRef = useRef(null);
+    // Ref per tracciare se autoFocusFirstRow=false deve bloccare l'auto-focus.
+    // Resta true finché l'utente non clicca manualmente sulla griglia per selezionare una riga.
+    // Quando l'utente seleziona manualmente, il ref viene settato a false e il focus automatico
+    // torna al comportamento normale.
+    const isFirstAutoFocusRef = useRef(true);
     // ID state to force remount of components
     const [id, setID] = useState('');
     // Document type descriptor of the currently document
@@ -139,6 +144,12 @@ handleNavigateToWGs, handleNavigateToDossiers, }) => {
             }
         }
     };
+    // Handler unico per tutte le azioni utente che cambiano il focus (click, navigazione, etc.).
+    // Resetta isFirstAutoFocusRef perché da questo momento autoFocusFirstRow non deve più essere considerato.
+    const handleFocusedItemChangedFromGrid = useCallback((item) => {
+        isFirstAutoFocusRef.current = false;
+        setFocusedItem(item);
+    }, []);
     const onNavigateHandler = (dir) => {
         let index = -1;
         if (visibleItems && focusedItem) {
@@ -146,10 +157,10 @@ handleNavigateToWGs, handleNavigateToDossiers, }) => {
         }
         switch (dir) {
             case 'next':
-                setFocusedItem(visibleItems[index + 1]);
+                handleFocusedItemChangedFromGrid(visibleItems[index + 1]);
                 break;
             default:
-                setFocusedItem(visibleItems[index - 1]);
+                handleFocusedItemChangedFromGrid(visibleItems[index - 1]);
                 break;
         }
     };
@@ -378,6 +389,9 @@ handleNavigateToWGs, handleNavigateToDossiers, }) => {
         updateBatchUpdateForm(false);
         closeDcmtFormHandler();
         setCurrentSearchResults(searchResults);
+        // Resetta il ref quando arrivano nuovi risultati di ricerca,
+        // così la logica autoFocusFirstRow=false si riapplica per ogni nuova ricerca
+        isFirstAutoFocusRef.current = true;
         if (searchResults.length <= 0) {
             setSelectedSearchResult(undefined);
             return;
@@ -413,6 +427,12 @@ handleNavigateToWGs, handleNavigateToDossiers, }) => {
         });
         checkRelatedDcmtsArchiveCapability();
         checkManyToManyCapability();
+        // se autoFocusFirstRow è false, non selezionare automaticamente la prima riga del nuovo risultato della ricerca
+        // Il ref resta true finché l'utente non clicca manualmente sulla griglia
+        if (autoFocusFirstRow === false && isFirstAutoFocusRef.current) {
+            setFocusedItem(undefined);
+            return;
+        }
         // Ricava il nuovo dataSource
         const newDataSource = searchResultDescriptorToSimpleArray(selectedSearchResult);
         // Se esiste almeno una riga, seleziona la prima
@@ -420,6 +440,12 @@ handleNavigateToWGs, handleNavigateToDossiers, }) => {
     }, [selectedSearchResult, checkRelatedDcmtsArchiveCapability, checkManyToManyCapability]);
     // Quando inputDID è fornito e i dati della griglia sono pronti, seleziona il documento corrispondente
     useEffect(() => {
+        // Se autoFocusFirstRow è false, non selezionare automaticamente la riga corrispondente a inputDID
+        // Il ref resta true finché l'utente non clicca manualmente sulla griglia
+        if (autoFocusFirstRow === false && isFirstAutoFocusRef.current) {
+            setFocusedItem(undefined);
+            return;
+        }
         if (!inputDID || visibleItems.length === 0)
             return;
         const targetItem = visibleItems.find((item) => item.DID == inputDID);
@@ -467,8 +493,10 @@ handleNavigateToWGs, handleNavigateToDossiers, }) => {
         onOpenS4TViewerRequest?.([{ TID: focusedItem.TID, DID: focusedItem.DID }]);
     }, [openS4TViewer, inputDID, focusedItem, fromDTD]);
     useEffect(() => {
-        if (!focusedItem)
+        if (!focusedItem) {
+            setCurrentDcmt(undefined);
             return;
+        }
         if (!fromDTD)
             return;
         let dtd = searchResults.length > 1 ? searchResults.find(res => res.fromTID == focusedItem?.TID)?.dtdResult : searchResults[0]?.dtdResult;
@@ -635,7 +663,7 @@ handleNavigateToWGs, handleNavigateToDossiers, }) => {
             _jsxs(_Fragment, { children: [_jsxs(TMLayoutItem, { height: '100%', children: [_jsxs("div", { ref: floatingBarContainerRef, style: { position: 'relative', height: '100%', width: '100%' }, children: [_jsxs(TMSplitterLayout, { direction: 'horizontal', overflow: 'visible', separatorSize: Gutters.getGutters(), separatorActiveColor: 'transparent', separatorColor: 'transparent', min: ['0', '0'], showSeparator: showSelector && deviceType !== DeviceType.MOBILE, start: showSelector ? deviceType !== DeviceType.MOBILE ? ['30%', '70%'] : splitterSize : ['0%', '100%'], children: [showSelector ?
                                                 _jsx(TMLayoutItem, { children: _jsx(TMSearchResultSelector, { searchResults: currentSearchResults, disableAccordionIfSingleCategory: disableAccordionIfSingleCategory, selectedTID: selectedSearchResultTID, selectedSearchResult: selectedSearchResult, autoSelectFirst: !isMobile || currentSearchResults.length === 1, onSelectionChanged: onSearchResultSelectionChanged }) })
                                                 :
-                                                    _jsx(_Fragment, {}), _jsx(TMLayoutItem, { children: _jsx(TMSearchResultGrid, { openInOffice: openInOffice, fromDTD: fromDTD, operationItems: operationItems, allUsers: allUsers, inputFocusedItem: focusedItem, inputSelectedItems: selectedItems, showExportForm: showExportForm, onFocusedItemChanged: setFocusedItem, onDownloadDcmtsAsync: async (inputDcmts, downloadType, downloadMode, _y, confirmAttachments) => await downloadDcmtsAsync({ inputDcmts, downloadType, downloadMode, onFileDownloaded: onFileOpened, confirmAttachments }), lastUpdateSearchTime: lastUpdateSearchTime, searchResult: searchResults.length > 1 ? selectedSearchResult : searchResults[0], onSelectionChanged: (items) => { setSelectedItems(items); }, onDblClick: () => openFormHandler(LayoutModes.Update), showSearchTMDatagrid: showSearchTMDatagrid, onVisibleItemChanged: setVisibleItems, updateDataColumnsFromDataGrid: updateDataColumnsFromDataGrid, updateDataSourceFromDataGrid: updateDataSourceFromDataGrid, updateSelectedRowKeysFromDataGrid: updateSelectedRowKeysFromDataGrid }) })] }), renderFloatingBar] }), _jsx(TMToppyDraggableHelpCenter, { usePortal: toppyHelpCenterUsePortal, isVisible: isToppyHelpCenterVisible, content: _jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: '10px' }, children: _jsx(WorkFlowOperationButtons, { dtd: fromDTD, deviceType: deviceType, onApprove: () => {
+                                                    _jsx(_Fragment, {}), _jsx(TMLayoutItem, { children: _jsx(TMSearchResultGrid, { openInOffice: openInOffice, fromDTD: fromDTD, operationItems: operationItems, allUsers: allUsers, inputFocusedItem: focusedItem, inputSelectedItems: selectedItems, showExportForm: showExportForm, onFocusedItemChanged: handleFocusedItemChangedFromGrid, onDownloadDcmtsAsync: async (inputDcmts, downloadType, downloadMode, _y, confirmAttachments) => await downloadDcmtsAsync({ inputDcmts, downloadType, downloadMode, onFileDownloaded: onFileOpened, confirmAttachments }), lastUpdateSearchTime: lastUpdateSearchTime, searchResult: searchResults.length > 1 ? selectedSearchResult : searchResults[0], onSelectionChanged: (items) => { setSelectedItems(items); }, onDblClick: () => openFormHandler(LayoutModes.Update), showSearchTMDatagrid: showSearchTMDatagrid, onVisibleItemChanged: setVisibleItems, updateDataColumnsFromDataGrid: updateDataColumnsFromDataGrid, updateDataSourceFromDataGrid: updateDataSourceFromDataGrid, updateSelectedRowKeysFromDataGrid: updateSelectedRowKeysFromDataGrid, disableAutoFocus: autoFocusFirstRow === false && isFirstAutoFocusRef.current }) })] }), renderFloatingBar] }), _jsx(TMToppyDraggableHelpCenter, { usePortal: toppyHelpCenterUsePortal, isVisible: isToppyHelpCenterVisible, content: _jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: '10px' }, children: _jsx(WorkFlowOperationButtons, { dtd: fromDTD, deviceType: deviceType, onApprove: () => {
                                             updateShowApprovePopup(true);
                                         }, onSignApprove: () => {
                                             handleSignApprove();
@@ -826,7 +854,7 @@ handleNavigateToWGs, handleNavigateToDossiers, }) => {
                                 _jsxs(TMPanelManagerProvider, { panels: initialPanels, initialVisibility: allInitialPanelVisibility, defaultDimensions: initialPanelDimensions, initialDimensions: initialPanelDimensions, initialMobilePanelId: 'tmSearchResult', children: [_jsx(PanelDisabledStateHandler, { isBoardDisabled: isBoardDisabled }), _jsx(TMPanelManagerContainer, { panels: initialPanels, direction: "horizontal", parentId: groupId, showToolbar: showSearchResultSidebar })] }) }) }) }), renderDcmtOperations] }));
 };
 export default TMSearchResult;
-const TMSearchResultGrid = ({ openInOffice, fromDTD, operationItems, allUsers, inputFocusedItem, allowMultipleSelection = true, showExportForm = false, onFocusedItemChanged, onDownloadDcmtsAsync, onVisibleItemChanged, inputSelectedItems = [], lastUpdateSearchTime, searchResult, onSelectionChanged, onDblClick, showSearchTMDatagrid, updateDataColumnsFromDataGrid, updateDataSourceFromDataGrid, updateSelectedRowKeysFromDataGrid }) => {
+const TMSearchResultGrid = ({ openInOffice, fromDTD, operationItems, allUsers, inputFocusedItem, allowMultipleSelection = true, showExportForm = false, onFocusedItemChanged, onDownloadDcmtsAsync, onVisibleItemChanged, inputSelectedItems = [], lastUpdateSearchTime, searchResult, onSelectionChanged, onDblClick, showSearchTMDatagrid, updateDataColumnsFromDataGrid, updateDataSourceFromDataGrid, updateSelectedRowKeysFromDataGrid, disableAutoFocus = false }) => {
     const [dataSource, setDataSource] = useState();
     const [columns, setColumns] = useState([]);
     const [selectedRowKeys, setSelectedRowKeys] = useState([]);
@@ -850,6 +878,7 @@ const TMSearchResultGrid = ({ openInOffice, fromDTD, operationItems, allUsers, i
     const { loadDataListsAsync, renderDataListCell, dataListsCache } = useDataListItem();
     const { loadUsersAsync, renderUserIdViewer, usersCache } = useDataUserIdItem();
     useEffect(() => {
+        // Sincronizza focusedItem con inputFocusedItem dal padre
         if (deepCompare(inputFocusedItem, focusedItem))
             return;
         setFocusedItem(inputFocusedItem);
@@ -1124,8 +1153,7 @@ const TMSearchResultGrid = ({ openInOffice, fromDTD, operationItems, allUsers, i
             // Previene l'errore E1047 quando il filtro riferisce campi non più presenti nelle nuove colonne.
             const oldFields = columns.map(c => c.dataField);
             const newFields = cols.map(c => c.dataField);
-            const columnsChanged = oldFields.length !== newFields.length ||
-                oldFields.some((f, i) => f !== newFields[i]);
+            const columnsChanged = oldFields.length !== newFields.length || oldFields.some((f, i) => f !== newFields[i]);
             if (columnsChanged) {
                 const gridInstance = dataGridRef.current?.instance();
                 if (gridInstance) {
@@ -1143,7 +1171,6 @@ const TMSearchResultGrid = ({ openInOffice, fromDTD, operationItems, allUsers, i
     useEffect(() => {
         let newDataSource = searchResultDescriptorToSimpleArray(searchResult);
         setDataSource(newDataSource);
-        // setFocusedItem(newDataSource?.find(o => o?.rowIndex === focusedItem?.rowIndex));
     }, [lastUpdateSearchTime]);
     // Handles selection change in the data grid
     const handleSelectionChange = useCallback((e) => {
@@ -1154,14 +1181,9 @@ const TMSearchResultGrid = ({ openInOffice, fromDTD, operationItems, allUsers, i
     }, [onSelectionChanged]);
     // Handles focus change in the data grid
     const handleFocusedRowChange = useCallback((e) => {
-        // if (setFocusedItem === undefined) return;
-        // if (e.row === undefined) { setFocusedItem(undefined); return; }
-        // setFocusedItem(e.row.data);
+        // Non bloccare mai questo handler: è chiamato quando l'utente clicca su una riga
         onFocusedItemChanged?.(e.row?.data);
-    }, [setFocusedItem]);
-    // useEffect(() => {
-    //     onFocusedItemChanged?.(focusedItem)
-    // }, [focusedItem])
+    }, [onFocusedItemChanged]);
     // Handler for double-click row event
     const onRowDblClick = useCallback((e) => {
         if (onDblClick === undefined)
@@ -1182,7 +1204,6 @@ const TMSearchResultGrid = ({ openInOffice, fromDTD, operationItems, allUsers, i
             });
             return;
         }
-        // setFocusedItem(e.data);
         onFocusedItemChanged?.(e.data);
         onDblClick();
     }, [onDblClick]);
@@ -1212,7 +1233,7 @@ const TMSearchResultGrid = ({ openInOffice, fromDTD, operationItems, allUsers, i
         setVisibleItems(visibleData);
     }, []);
     useEffect(() => { onVisibleItemChanged?.(visibleItems); }, [visibleItems]);
-    return _jsxs("div", { style: { width: "100%", height: "100%" }, children: [!isDataGridReady && (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '100%', width: '100%', gap: '10px' }, children: [_jsx(LoadIndicator, { height: 60, width: 60 }), _jsx("div", { children: SDKUI_Localizator.Loading })] })), isDataGridReady && _jsx(TMDataGrid, { ref: dataGridRef, id: "tm-search-result", keyExpr: "rowIndex", dataColumns: dataColumns, dataSource: dataSource, repaintChangesOnly: true, selectedRowKeys: selectedRowKeys, focusedRowKey: Number(focusedItem?.rowIndex ?? 0), showSearchPanel: showSearchTMDatagrid, showFilterPanel: true, sorting: { mode: "multiple" }, selection: { mode: allowMultipleSelection ? 'multiple' : 'single' }, pageSize: pageSize, onSelectionChanged: handleSelectionChange, onFocusedRowChanged: handleFocusedRowChange, onRowDblClick: onRowDblClick, onContentReady: onContentReady, showHeaderColumnChooser: true, onKeyDown: onKeyDown, customContextMenuItems: operationItems, counterConfig: { show: true } })] });
+    return _jsxs("div", { style: { width: "100%", height: "100%" }, children: [!isDataGridReady && (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '100%', width: '100%', gap: '10px' }, children: [_jsx(LoadIndicator, { height: 60, width: 60 }), _jsx("div", { children: SDKUI_Localizator.Loading })] })), isDataGridReady && _jsx(TMDataGrid, { ref: dataGridRef, id: "tm-search-result", keyExpr: "rowIndex", dataColumns: dataColumns, dataSource: dataSource, repaintChangesOnly: true, selectedRowKeys: selectedRowKeys, focusedRowKey: disableAutoFocus ? undefined : Number(focusedItem?.rowIndex ?? 0), showSearchPanel: showSearchTMDatagrid, showFilterPanel: true, sorting: { mode: "multiple" }, selection: { mode: allowMultipleSelection ? 'multiple' : 'single' }, pageSize: pageSize, onSelectionChanged: handleSelectionChange, onFocusedRowChanged: handleFocusedRowChange, onRowDblClick: onRowDblClick, onContentReady: onContentReady, showHeaderColumnChooser: true, onKeyDown: onKeyDown, customContextMenuItems: operationItems, counterConfig: { show: true } })] });
 };
 //#region TMSearchResultSelector
 const StyledItemTemplate = styled.div ` 

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

@@ -0,0 +1,16 @@
+import { DcmtTypeDescriptor, MetadataDescriptor, QueryDescriptor } from "@topconsultnpm/sdk-ts";
+export type MetadataDescriptorWithKey = MetadataDescriptor & {
+    uniqueKey: string;
+};
+export declare function removeDuplicatesByTidMid<T extends {
+    tid?: number;
+    mid?: number;
+}>(items: T[]): T[];
+export declare function loadMetadataFromQd(qd: QueryDescriptor | undefined, filterMetadata?: (value: MetadataDescriptor, index: number, array: MetadataDescriptor[]) => unknown): Promise<{
+    metadata: MetadataDescriptorWithKey[];
+    dcmtTypes: DcmtTypeDescriptor[];
+}>;
+export declare function areArraysEqual<T extends {
+    tid?: number;
+    mid?: number;
+}>(arr1: T[], arr2: T[], additionalCompare?: (a: T, b: T) => boolean): boolean;