@topconsultnpm/sdkui-react 6.21.0-dev3.16 → 6.21.0-dev3.18

package/lib/components/NewComponents/FloatingMenuBar/styles.d.ts

@@ -73,20 +73,20 @@ export declare const MenuButton: import("styled-components/dist/types").IStyledC
 export declare const ConfigButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>>> & string;
 export declare const ApplyButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>>> & string;
 export declare const CloseButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>>> & string;
-export declare const ContextMenuButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "$isActive"> & {
+export declare const ContextMenuButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "$isActive"> & {
     $isActive?: boolean;
 }, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "$isActive"> & {
     $isActive?: boolean;
-}, never>>, "as" | "forwardedAs"> & {
+}, never>> & {
     as?: import("styled-components").WebTarget | undefined;
     forwardedAs?: import("styled-components").WebTarget | undefined;
 }, "ref"> & {
     ref?: ((instance: HTMLButtonElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLButtonElement> | null | undefined;
-}, never> & Partial<Pick<Omit<import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "$isActive"> & {
+}, never> & Partial<Pick<Omit<import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "$isActive"> & {
     $isActive?: boolean;
 }, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "$isActive"> & {
     $isActive?: boolean;
-}, never>>, "as" | "forwardedAs"> & {
+}, never>> & {
     as?: import("styled-components").WebTarget | undefined;
     forwardedAs?: import("styled-components").WebTarget | undefined;
 }, "ref"> & {

package/lib/components/base/TMDataGrid.js

@@ -36,6 +36,8 @@ const TMDataGrid = React.forwardRef((props, ref) => {
     const [customContextMenuPosition, setCustomContextMenuPosition] = useState({ x: 0, y: 0 });
     const [customContextMenuRowKey, setCustomContextMenuRowKey] = useState(undefined);
     const gridContainerRef = useRef(null);
+    // Ref per evitare focus ripetuti sulla search panel
+    const searchPanelFocusedRef = useRef(false);
     useEffect(() => {
         const count = getRecordCount(dataSource);
         setTotalRecordCount(count);
@@ -44,10 +46,15 @@ const TMDataGrid = React.forwardRef((props, ref) => {
     useEffect(() => {
         if (!searchPanelFocusTrigger || searchPanelFocusTrigger <= 0 || !showSearchPanel || !internalRef.current)
             return;
+        // Reset del flag quando cambia il trigger (per permettere un nuovo focus se richiesto)
+        searchPanelFocusedRef.current = false;
         setTimeout(() => {
+            if (searchPanelFocusedRef.current)
+                return;
             const searchInput = internalRef.current?.instance().element().querySelector('.dx-datagrid-search-panel input');
             if (searchInput) {
                 searchInput.focus();
+                searchPanelFocusedRef.current = true;
             }
         }, 100);
     }, [searchPanelFocusTrigger, showSearchPanel]);
@@ -305,13 +312,16 @@ const TMDataGrid = React.forwardRef((props, ref) => {
             return;
         // Update state with the current number of visible rows in the DataGrid
         setVisibleItemsCount(internalRef.current.instance()?.getVisibleRows()?.length ?? 0);
-        // Focusing SearchPanel on content ready
-        if (showSearchPanel && searchPanelFocusTrigger && searchPanelFocusTrigger > 0) {
+        // Focusing SearchPanel on content ready - solo se non è già stato fatto
+        if (showSearchPanel && searchPanelFocusTrigger && searchPanelFocusTrigger > 0 && !searchPanelFocusedRef.current) {
             // Use a small delay to ensure the DOM is fully rendered before trying to focus
             setTimeout(() => {
+                if (searchPanelFocusedRef.current)
+                    return;
                 const searchInput = internalRef.current?.instance().element().querySelector('.dx-datagrid-search-panel input');
                 if (searchInput) {
                     searchInput.focus();
+                    searchPanelFocusedRef.current = true;
                 }
             }, 100);
         }

package/lib/components/base/TMModal.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useState, useEffect, useRef } from 'react';
 import { Popup } from 'devextreme-react';
 import styled from 'styled-components';
-import TMLayoutContainer, { TMCard, TMLayoutItem } from './TMLayout';
+import { TMCard } from './TMLayout';
 import { FontSize, TMColors } from '../../utils/theme';
 import { IconWindowMaximize, IconWindowMinimize, svgToString } from '../../helper';
 const StyledModal = styled.div `
@@ -110,6 +110,6 @@ const TMModal = ({ resizable = true, expandable = false, isModal = true, title =
                         onClick: () => setIsFullScreen(!isFullScreen)
                     }
                 }
-            ] : undefined, children: _jsxs(TMLayoutContainer, { children: [toolbar && (_jsx(TMLayoutItem, { height: "40px", children: _jsx(StyledModalToolbar, { children: toolbar }) })), _jsx(TMLayoutItem, { height: toolbar ? 'calc(100% - 40px)' : '100%', children: _jsx(TMCard, { showBorder: false, padding: false, scrollY: true, children: children }) })] }) })) : (_jsxs(StyledModal, { "$isModal": isModal, className: "temp-modal", "$fontSize": fontSize, "$width": initialWidth, "$height": initialHeight, children: [toolbar ? _jsx(StyledModalToolbar, { children: toolbar }) : _jsx(_Fragment, {}), _jsx(StyledModalContext, { children: children })] })) }));
+            ] : undefined, children: _jsxs("div", { style: { display: 'flex', flexDirection: 'column', height: '100%', width: '100%' }, children: [toolbar && (_jsx(StyledModalToolbar, { children: toolbar })), _jsx("div", { style: { flex: 1, overflow: 'hidden', minHeight: 0 }, children: _jsx(TMCard, { showBorder: false, padding: false, scrollY: true, children: children }) })] }) })) : (_jsxs(StyledModal, { "$isModal": isModal, className: "temp-modal", "$fontSize": fontSize, "$width": initialWidth, "$height": initialHeight, children: [toolbar ? _jsx(StyledModalToolbar, { children: toolbar }) : _jsx(_Fragment, {}), _jsx(StyledModalContext, { children: children })] })) }));
 };
 export default TMModal;

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

@@ -0,0 +1,17 @@
+import { MetadataDescriptor, QueryDescriptor, SelectItem } from "@topconsultnpm/sdk-ts";
+interface TMMetadataOutputFormProps {
+    /** QueryDescriptor da cui estrarre i metadati disponibili */
+    qd?: QueryDescriptor;
+    /** Lista di SelectItem attualmente selezionati */
+    selectedSelectItems?: SelectItem[];
+    /** Consente di visualizzare i metadati di sistema (es. MID < 150) */
+    allowSysMetadata?: boolean;
+    /** Funzione predicato per filtrare i metadati (es. solo quelli con permesso canView) */
+    filterMetadata?: (value: MetadataDescriptor, index: number, array: MetadataDescriptor[]) => unknown;
+    /** Callback chiamata alla chiusura del form */
+    onClose: () => void;
+    /** Callback chiamata quando l'utente conferma la selezione dei SelectItem */
+    onChoose?: (selectItems: SelectItem[] | undefined) => void;
+}
+declare const TMMetadataOutputForm: (props: TMMetadataOutputFormProps) => import("react/jsx-runtime").JSX.Element;
+export default TMMetadataOutputForm;

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

@@ -0,0 +1,225 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { SDK_Localizator, SelectItem, SelectItemVisibilities } from "@topconsultnpm/sdk-ts";
+import { IconAddCircleOutline, IconApply, IconClear, IconDelete, IconDraggabledots, IconUndo, SDKUI_Localizator } from "../../../helper";
+import TMToppyMessage from "../../../helper/TMToppyMessage";
+import { ButtonNames, TMMessageBoxManager } from "../../base/TMPopUp";
+import { TMColors } from "../../../utils/theme";
+import { StyledToolbarForm } from "../../base/Styled";
+import TMButton from "../../base/TMButton";
+import TMModal from "../../base/TMModal";
+import { TMMetadataChooserForm } from "../../choosers/TMMetadataChooser";
+import { TMMetadataIcon } from "../../viewers/TMMidViewer";
+import { loadMetadataFromQd, removeDuplicatesByTidMid, areArraysEqual } from "./metadataFormHelper";
+const TMMetadataOutputForm = (props) => {
+    const { qd, selectedSelectItems, allowSysMetadata = true, filterMetadata, onClose, onChoose } = props;
+    // =============================================================================
+    // STATE
+    // =============================================================================
+    // Stato iniziale dei SelectItem (per confronto isModified)
+    const initialSelectItemsRef = useRef((selectedSelectItems ?? []).map(item => {
+        const newItem = new SelectItem();
+        newItem.tid = item.tid;
+        newItem.mid = item.mid;
+        newItem.visibility = item.visibility ?? SelectItemVisibilities.Visible;
+        return newItem;
+    }));
+    // Lista dei SelectItem correnti (inizializzata da selectedSelectItems)
+    const [selectItems, setSelectItems] = useState(() => {
+        // Clona i SelectItem iniziali per evitare mutazioni
+        return (selectedSelectItems ?? []).map(item => {
+            const newItem = new SelectItem();
+            newItem.tid = item.tid;
+            newItem.mid = item.mid;
+            newItem.visibility = item.visibility ?? SelectItemVisibilities.Visible;
+            return newItem;
+        });
+    });
+    // Calcola se ci sono modifiche rispetto allo stato iniziale
+    const isModified = useMemo(() => {
+        return !areArraysEqual(selectItems, initialSelectItemsRef.current);
+    }, [selectItems]);
+    // Lista "piatta" di tutti i metadati estratti dai DTD, con chiave univoca
+    const [metadataList, setMetadataList] = useState([]);
+    // Flag di caricamento
+    const [isLoading, setIsLoading] = useState(true);
+    // Flag per mostrare il TMMetadataChooserForm
+    const [showMetadataChooser, setShowMetadataChooser] = useState(false);
+    // Item in fase di drag
+    const [draggingItem, setDraggingItem] = useState(undefined);
+    // =============================================================================
+    // MEMOIZZAZIONI per evitare re-render del TMMetadataChooserForm
+    // =============================================================================
+    // Lista di TID_MID già selezionati (per escluderli dal chooser)
+    const selectedIDs = useMemo(() => selectItems.map(si => ({ tid: si.tid, mid: si.mid })), [selectItems]);
+    // Callback per chiudere il chooser
+    const handleCloseChooser = useCallback(() => {
+        setShowMetadataChooser(false);
+    }, []);
+    // =============================================================================
+    // EFFECT: Carica i metadati al mount
+    // =============================================================================
+    useEffect(() => {
+        const load = async () => {
+            setIsLoading(true);
+            try {
+                const { metadata } = await loadMetadataFromQd(qd, filterMetadata);
+                setMetadataList(metadata);
+            }
+            catch (error) {
+                console.error("Errore nel caricamento dei metadati:", error);
+                setMetadataList([]);
+            }
+            finally {
+                setIsLoading(false);
+            }
+        };
+        load();
+    }, [qd, filterMetadata]);
+    // =============================================================================
+    // HELPER: Trova il MetadataDescriptor per un SelectItem
+    // =============================================================================
+    const getMetadataForSelectItem = useCallback((item) => {
+        return metadataList.find(md => md.customData1 === item.tid && md.id === item.mid);
+    }, [metadataList]);
+    // =============================================================================
+    // HANDLER: Conferma la scelta dal chooser (sincronizza la lista completa)
+    // =============================================================================
+    const handleChooseFromChooser = useCallback((tid_mids) => {
+        // Se la lista è vuota o undefined, rimuovi tutti
+        if (!tid_mids || tid_mids.length === 0) {
+            setSelectItems([]);
+            setShowMetadataChooser(false);
+            return;
+        }
+        setSelectItems(prev => {
+            // Filtra quelli esistenti che sono ancora selezionati (mantenendo ordine)
+            const kept = prev.filter(si => tid_mids.some(tm => tm.tid === si.tid && tm.mid === si.mid));
+            // Trova i nuovi da aggiungere
+            const newItems = [];
+            for (const tm of tid_mids) {
+                const exists = prev.some(si => si.tid === tm.tid && si.mid === tm.mid);
+                if (!exists) {
+                    const newItem = new SelectItem();
+                    newItem.tid = tm.tid;
+                    newItem.mid = tm.mid;
+                    newItem.visibility = SelectItemVisibilities.Visible;
+                    newItems.push(newItem);
+                }
+            }
+            return removeDuplicatesByTidMid([...kept, ...newItems]);
+        });
+        setShowMetadataChooser(false);
+    }, []);
+    // =============================================================================
+    // HANDLER: Rimuove un metadato dall'output
+    // =============================================================================
+    const handleRemoveSelectItem = useCallback((index) => {
+        setSelectItems(prev => prev.filter((_, i) => i !== index));
+    }, []);
+    // =============================================================================
+    // DRAG & DROP HANDLERS
+    // =============================================================================
+    const handleDragStart = useCallback((e, item) => {
+        // Previeni il drag se il target è l'icona elimina
+        const target = e.target;
+        if (target.closest('[data-no-drag="true"]')) {
+            e.preventDefault();
+            return;
+        }
+        setDraggingItem(item);
+        e.dataTransfer.setData('text/plain', '');
+        e.dataTransfer.effectAllowed = 'move';
+    }, []);
+    const handleDragEnd = useCallback(() => {
+        setDraggingItem(undefined);
+    }, []);
+    const handleDragOver = useCallback((e) => {
+        e.preventDefault();
+        e.dataTransfer.dropEffect = 'move';
+    }, []);
+    const handleDrop = useCallback((e, targetItem) => {
+        e.preventDefault();
+        if (!draggingItem)
+            return;
+        const currentIndex = selectItems.indexOf(draggingItem);
+        const targetIndex = selectItems.indexOf(targetItem);
+        if (currentIndex === -1 || targetIndex === -1 || currentIndex === targetIndex) {
+            setDraggingItem(undefined);
+            return;
+        }
+        const listCopy = [...selectItems];
+        listCopy.splice(currentIndex, 1);
+        listCopy.splice(targetIndex, 0, draggingItem);
+        setSelectItems(listCopy);
+        setDraggingItem(undefined);
+    }, [draggingItem, selectItems]);
+    // =============================================================================
+    // HANDLER: Rollback allo stato iniziale
+    // =============================================================================
+    const handleRollback = useCallback(() => {
+        setSelectItems(initialSelectItemsRef.current.map(item => {
+            const newItem = new SelectItem();
+            newItem.tid = item.tid;
+            newItem.mid = item.mid;
+            newItem.visibility = item.visibility;
+            return newItem;
+        }));
+    }, []);
+    // =============================================================================
+    // HANDLER: Chiusura con conferma se modificato
+    // =============================================================================
+    const confirmCloseContainerId = "TMMetadataOutputFormConfirmClose";
+    const handleClose = useCallback(() => {
+        if (!isModified) {
+            onClose();
+            return;
+        }
+        TMMessageBoxManager.show({
+            parentId: confirmCloseContainerId,
+            message: SDKUI_Localizator.ConfirmOnCancel,
+            buttons: [ButtonNames.YES, ButtonNames.NO],
+            onButtonClick: (buttonClicked) => {
+                if (buttonClicked === ButtonNames.YES) {
+                    onClose();
+                }
+            }
+        });
+    }, [isModified, onClose]);
+    // =============================================================================
+    // HANDLER: Conferma la selezione
+    // =============================================================================
+    const handleConfirm = useCallback(() => {
+        onChoose?.(selectItems.length > 0 ? selectItems : undefined);
+        onClose();
+    }, [selectItems, onChoose, onClose]);
+    // =============================================================================
+    // RENDER
+    // =============================================================================
+    return (_jsxs(_Fragment, { children: [_jsxs(TMModal, { title: `${SDKUI_Localizator.Configure} - ${SDK_Localizator.QuerySelect}${selectItems.length > 0 ? ` (${selectItems.length})` : ''}`, width: "600px", height: "500px", onClose: handleClose, hidePopup: false, askClosingConfirm: isModified, children: [_jsx("div", { id: confirmCloseContainerId }), _jsxs("div", { style: { display: 'flex', flexDirection: 'column', height: '100%', gap: '10px' }, children: [_jsxs(StyledToolbarForm, { children: [_jsx(TMButton, { caption: SDKUI_Localizator.Confirm, icon: _jsx(IconApply, {}), btnStyle: "toolbar", color: "success", disabled: !isModified, onClick: handleConfirm }), _jsx(TMButton, { caption: SDKUI_Localizator.Undo, icon: _jsx(IconUndo, {}), btnStyle: "toolbar", color: "tertiary", disabled: !isModified, onClick: handleRollback }), _jsx(TMButton, { caption: SDKUI_Localizator.Add, icon: _jsx(IconAddCircleOutline, {}), btnStyle: "toolbar", onClick: () => setShowMetadataChooser(true) }), _jsx(TMButton, { caption: SDKUI_Localizator.Clear, icon: _jsx(IconClear, {}), btnStyle: "toolbar", disabled: selectItems.length === 0, onClick: () => setSelectItems([]) })] }), _jsxs("div", { style: {
+                                    flex: 1,
+                                    overflow: 'auto',
+                                    border: `1px solid ${TMColors.border_normal}`,
+                                    borderRadius: '4px',
+                                    padding: '5px'
+                                }, children: [isLoading && _jsxs("p", { style: { textAlign: 'center', padding: '20px' }, children: [SDKUI_Localizator.Loading, "..."] }), !isLoading && selectItems.length === 0 && (_jsx(TMToppyMessage, { message: SDKUI_Localizator.NoOutputMetadata, titleTooltip: SDKUI_Localizator.NoOutputMetadata })), !isLoading && selectItems.length > 0 && (_jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: '2px' }, children: selectItems.map((item, index) => {
+                                            const md = getMetadataForSelectItem(item);
+                                            const isDragging = draggingItem === item;
+                                            return (_jsxs("div", { draggable: true, onDragStart: (e) => handleDragStart(e, item), onDragEnd: handleDragEnd, onDragOver: handleDragOver, onDrop: (e) => handleDrop(e, item), style: {
+                                                    display: 'flex',
+                                                    alignItems: 'center',
+                                                    gap: '6px',
+                                                    padding: '4px 8px',
+                                                    backgroundColor: isDragging ? TMColors.primary_container : TMColors.default_background,
+                                                    borderRadius: '3px',
+                                                    border: `1px solid ${isDragging ? TMColors.primaryColor : TMColors.border_normal}`,
+                                                    minHeight: '32px',
+                                                    cursor: 'grab',
+                                                    transition: 'all 0.2s ease',
+                                                    transform: isDragging ? 'scale(1.02)' : 'scale(1)',
+                                                    boxShadow: isDragging ? '0 4px 12px rgba(0,0,0,0.15)' : 'none',
+                                                    opacity: isDragging ? 0.9 : 1,
+                                                }, children: [_jsx("div", { style: { display: 'flex', cursor: 'grab' }, children: _jsx(IconDraggabledots, { fontSize: 15, color: TMColors.button_icon }) }), _jsx(TMMetadataIcon, { tid: item.tid ?? 0, md: md }), _jsx("span", { style: { flex: 1, fontSize: '13px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }, children: md?.name ?? `MID: ${item.mid}` }), _jsx("div", { "data-no-drag": "true", onMouseDown: (e) => e.stopPropagation(), children: _jsx(TMButton, { icon: _jsx(IconDelete, { color: TMColors.error }), btnStyle: "icon", onClick: () => handleRemoveSelectItem(index) }) })] }, `${item.tid}_${item.mid}_${index}`));
+                                        }) }))] })] })] }), showMetadataChooser && (_jsx(TMMetadataChooserForm, { allowMultipleSelection: true, height: "600px", width: "700px", allowSysMetadata: allowSysMetadata, filterMetadata: filterMetadata, qd: qd, selectedIDs: selectedIDs, onClose: handleCloseChooser, onChoose: handleChooseFromChooser }))] }));
+};
+export default TMMetadataOutputForm;

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

@@ -0,0 +1,17 @@
+import { MetadataDescriptor, OrderByItem, QueryDescriptor } from "@topconsultnpm/sdk-ts";
+interface TMMetadataSorterFormProps {
+    /** QueryDescriptor da cui estrarre i metadati disponibili */
+    qd?: QueryDescriptor;
+    /** Lista di OrderByItem attualmente selezionati */
+    selectedOrderByItems?: OrderByItem[];
+    /** Consente di visualizzare i metadati di sistema (es. MID < 150) */
+    allowSysMetadata?: boolean;
+    /** Funzione predicato per filtrare i metadati (es. solo quelli con permesso canView) */
+    filterMetadata?: (value: MetadataDescriptor, index: number, array: MetadataDescriptor[]) => unknown;
+    /** Callback chiamata alla chiusura del form */
+    onClose: () => void;
+    /** Callback chiamata quando l'utente conferma la selezione degli OrderByItem */
+    onChoose?: (orderByItems: OrderByItem[] | undefined) => void;
+}
+declare const TMMetadataSorterForm: (props: TMMetadataSorterFormProps) => import("react/jsx-runtime").JSX.Element;
+export default TMMetadataSorterForm;

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

@@ -0,0 +1,243 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { OrderByItem, SDK_Localizator } from "@topconsultnpm/sdk-ts";
+import { IconAddCircleOutline, IconApply, IconClear, IconDelete, IconDraggabledots, IconUndo, SDKUI_Localizator } from "../../../helper";
+import TMToppyMessage from "../../../helper/TMToppyMessage";
+import { ButtonNames, TMMessageBoxManager } from "../../base/TMPopUp";
+import { TMColors } from "../../../utils/theme";
+import { StyledToolbarForm } from "../../base/Styled";
+import TMButton from "../../base/TMButton";
+import TMModal from "../../base/TMModal";
+import { TMMetadataChooserForm } from "../../choosers/TMMetadataChooser";
+import TMDropDown from "../../editors/TMDropDown";
+import { TMMetadataIcon } from "../../viewers/TMMidViewer";
+import { loadMetadataFromQd, removeDuplicatesByTidMid, areArraysEqual } from "./metadataFormHelper";
+const TMMetadataSorterForm = (props) => {
+    const { qd, selectedOrderByItems, allowSysMetadata = true, filterMetadata, onClose, onChoose } = props;
+    // =============================================================================
+    // STATE
+    // =============================================================================
+    // Stato iniziale degli OrderByItem (per confronto isModified)
+    const initialOrderByItemsRef = useRef((selectedOrderByItems ?? []).map(item => {
+        const newItem = new OrderByItem();
+        newItem.tid = item.tid;
+        newItem.mid = item.mid;
+        newItem.asc = item.asc ?? true;
+        return newItem;
+    }));
+    // Lista degli OrderByItem correnti (inizializzata da selectedOrderByItems)
+    const [orderByItems, setOrderByItems] = useState(() => {
+        // Clona gli OrderByItem iniziali per evitare mutazioni
+        return (selectedOrderByItems ?? []).map(item => {
+            const newItem = new OrderByItem();
+            newItem.tid = item.tid;
+            newItem.mid = item.mid;
+            newItem.asc = item.asc ?? true;
+            return newItem;
+        });
+    });
+    // Calcola se ci sono modifiche rispetto allo stato iniziale
+    const isModified = useMemo(() => {
+        return !areArraysEqual(orderByItems, initialOrderByItemsRef.current, (a, b) => a.asc === b.asc);
+    }, [orderByItems]);
+    // Lista "piatta" di tutti i metadati estratti dai DTD, con chiave univoca
+    const [metadataList, setMetadataList] = useState([]);
+    // Flag di caricamento
+    const [isLoading, setIsLoading] = useState(true);
+    // Flag per mostrare il TMMetadataChooserForm
+    const [showMetadataChooser, setShowMetadataChooser] = useState(false);
+    // Item in fase di drag
+    const [draggingItem, setDraggingItem] = useState(undefined);
+    // =============================================================================
+    // MEMOIZZAZIONI per evitare re-render del TMMetadataChooserForm
+    // =============================================================================
+    // Lista di TID_MID già selezionati (per escluderli dal chooser)
+    const selectedIDs = useMemo(() => orderByItems.map(oi => ({ tid: oi.tid, mid: oi.mid })), [orderByItems]);
+    // Callback per chiudere il chooser
+    const handleCloseChooser = useCallback(() => {
+        setShowMetadataChooser(false);
+    }, []);
+    // =============================================================================
+    // EFFECT: Carica i metadati al mount
+    // =============================================================================
+    useEffect(() => {
+        const load = async () => {
+            setIsLoading(true);
+            try {
+                const { metadata } = await loadMetadataFromQd(qd, filterMetadata);
+                setMetadataList(metadata);
+            }
+            catch (error) {
+                console.error("Errore nel caricamento dei metadati:", error);
+                setMetadataList([]);
+            }
+            finally {
+                setIsLoading(false);
+            }
+        };
+        load();
+    }, [qd, filterMetadata]);
+    // =============================================================================
+    // HELPER: Trova il MetadataDescriptor per un OrderByItem
+    // =============================================================================
+    const getMetadataForOrderByItem = useCallback((item) => {
+        return metadataList.find(md => md.customData1 === item.tid && md.id === item.mid);
+    }, [metadataList]);
+    // =============================================================================
+    // HANDLER: Conferma la scelta dal chooser (sincronizza la lista completa)
+    // =============================================================================
+    const handleChooseFromChooser = useCallback((tid_mids) => {
+        // Se la lista è vuota o undefined, rimuovi tutti
+        if (!tid_mids || tid_mids.length === 0) {
+            setOrderByItems([]);
+            setShowMetadataChooser(false);
+            return;
+        }
+        setOrderByItems(prev => {
+            // Filtra quelli esistenti che sono ancora selezionati (mantenendo ordine e impostazioni asc/desc)
+            const kept = prev.filter(oi => tid_mids.some(tm => tm.tid === oi.tid && tm.mid === oi.mid));
+            // Trova i nuovi da aggiungere
+            const newItems = [];
+            for (const tm of tid_mids) {
+                const exists = prev.some(oi => oi.tid === tm.tid && oi.mid === tm.mid);
+                if (!exists) {
+                    const newItem = new OrderByItem();
+                    newItem.tid = tm.tid;
+                    newItem.mid = tm.mid;
+                    newItem.asc = true;
+                    newItems.push(newItem);
+                }
+            }
+            return removeDuplicatesByTidMid([...kept, ...newItems]);
+        });
+        setShowMetadataChooser(false);
+    }, []);
+    // =============================================================================
+    // HANDLER: Rimuove un ordinamento
+    // =============================================================================
+    const handleRemoveOrderBy = useCallback((index) => {
+        setOrderByItems(prev => prev.filter((_, i) => i !== index));
+    }, []);
+    // =============================================================================
+    // HANDLER: Toggle ascendente/discendente
+    // =============================================================================
+    const handleChangeAsc = useCallback((index, asc) => {
+        setOrderByItems(prev => prev.map((item, i) => {
+            if (i !== index)
+                return item;
+            const newItem = new OrderByItem();
+            newItem.tid = item.tid;
+            newItem.mid = item.mid;
+            newItem.asc = asc;
+            return newItem;
+        }));
+    }, []);
+    // =============================================================================
+    // DRAG & DROP HANDLERS
+    // =============================================================================
+    const handleDragStart = useCallback((e, item) => {
+        // Previeni il drag se il target è l'icona elimina o il dropdown
+        const target = e.target;
+        if (target.closest('[data-no-drag="true"]')) {
+            e.preventDefault();
+            return;
+        }
+        setDraggingItem(item);
+        e.dataTransfer.setData('text/plain', '');
+        e.dataTransfer.effectAllowed = 'move';
+    }, []);
+    const handleDragEnd = useCallback(() => {
+        setDraggingItem(undefined);
+    }, []);
+    const handleDragOver = useCallback((e) => {
+        e.preventDefault();
+        e.dataTransfer.dropEffect = 'move';
+    }, []);
+    const handleDrop = useCallback((e, targetItem) => {
+        e.preventDefault();
+        if (!draggingItem)
+            return;
+        const currentIndex = orderByItems.indexOf(draggingItem);
+        const targetIndex = orderByItems.indexOf(targetItem);
+        if (currentIndex === -1 || targetIndex === -1 || currentIndex === targetIndex) {
+            setDraggingItem(undefined);
+            return;
+        }
+        const listCopy = [...orderByItems];
+        listCopy.splice(currentIndex, 1);
+        listCopy.splice(targetIndex, 0, draggingItem);
+        setOrderByItems(listCopy);
+        setDraggingItem(undefined);
+    }, [draggingItem, orderByItems]);
+    // =============================================================================
+    // HANDLER: Rollback allo stato iniziale
+    // =============================================================================
+    const handleRollback = useCallback(() => {
+        setOrderByItems(initialOrderByItemsRef.current.map(item => {
+            const newItem = new OrderByItem();
+            newItem.tid = item.tid;
+            newItem.mid = item.mid;
+            newItem.asc = item.asc;
+            return newItem;
+        }));
+    }, []);
+    // =============================================================================
+    // HANDLER: Chiusura con conferma se modificato
+    // =============================================================================
+    const confirmCloseContainerId = "TMMetadataSorterFormConfirmClose";
+    const handleClose = useCallback(() => {
+        if (!isModified) {
+            onClose();
+            return;
+        }
+        TMMessageBoxManager.show({
+            parentId: confirmCloseContainerId,
+            message: SDKUI_Localizator.ConfirmOnCancel,
+            buttons: [ButtonNames.YES, ButtonNames.NO],
+            onButtonClick: (buttonClicked) => {
+                if (buttonClicked === ButtonNames.YES) {
+                    onClose();
+                }
+            }
+        });
+    }, [isModified, onClose]);
+    // =============================================================================
+    // HANDLER: Conferma la selezione
+    // =============================================================================
+    const handleConfirm = useCallback(() => {
+        onChoose?.(orderByItems.length > 0 ? orderByItems : undefined);
+        onClose();
+    }, [orderByItems, onChoose, onClose]);
+    // =============================================================================
+    // RENDER
+    // =============================================================================
+    return (_jsxs(_Fragment, { children: [_jsxs(TMModal, { title: `${SDKUI_Localizator.Configure} - ${SDK_Localizator.QueryOrderBy}${orderByItems.length > 0 ? ` (${orderByItems.length})` : ''}`, width: "600px", height: "500px", onClose: handleClose, hidePopup: false, askClosingConfirm: isModified, children: [_jsx("div", { id: confirmCloseContainerId }), _jsxs("div", { style: { display: 'flex', flexDirection: 'column', height: '100%', gap: '10px' }, children: [_jsxs(StyledToolbarForm, { children: [_jsx(TMButton, { caption: SDKUI_Localizator.Confirm, icon: _jsx(IconApply, {}), btnStyle: "toolbar", color: "success", disabled: !isModified, onClick: handleConfirm }), _jsx(TMButton, { caption: SDKUI_Localizator.Undo, icon: _jsx(IconUndo, {}), btnStyle: "toolbar", color: "tertiary", disabled: !isModified, onClick: handleRollback }), _jsx(TMButton, { caption: SDKUI_Localizator.Add, icon: _jsx(IconAddCircleOutline, {}), btnStyle: "toolbar", onClick: () => setShowMetadataChooser(true) }), _jsx(TMButton, { caption: SDKUI_Localizator.Clear, icon: _jsx(IconClear, {}), btnStyle: "toolbar", disabled: orderByItems.length === 0, onClick: () => setOrderByItems([]) })] }), _jsxs("div", { style: {
+                                    flex: 1,
+                                    overflow: 'auto',
+                                    border: `1px solid ${TMColors.border_normal}`,
+                                    borderRadius: '4px',
+                                    padding: '5px'
+                                }, children: [isLoading && _jsxs("p", { style: { textAlign: 'center', padding: '20px' }, children: [SDKUI_Localizator.Loading, "..."] }), !isLoading && orderByItems.length === 0 && (_jsx(TMToppyMessage, { message: SDKUI_Localizator.NoSortingApplied, titleTooltip: SDKUI_Localizator.NoSortingApplied })), !isLoading && orderByItems.length > 0 && (_jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: '2px' }, children: orderByItems.map((item, index) => {
+                                            const md = getMetadataForOrderByItem(item);
+                                            const isDragging = draggingItem === item;
+                                            return (_jsxs("div", { draggable: true, onDragStart: (e) => handleDragStart(e, item), onDragEnd: handleDragEnd, onDragOver: handleDragOver, onDrop: (e) => handleDrop(e, item), style: {
+                                                    display: 'flex',
+                                                    alignItems: 'center',
+                                                    gap: '6px',
+                                                    padding: '4px 8px',
+                                                    backgroundColor: isDragging ? TMColors.primary_container : TMColors.default_background,
+                                                    borderRadius: '3px',
+                                                    border: `1px solid ${isDragging ? TMColors.primaryColor : TMColors.border_normal}`,
+                                                    minHeight: '32px',
+                                                    cursor: 'grab',
+                                                    transition: 'all 0.2s ease',
+                                                    transform: isDragging ? 'scale(1.02)' : 'scale(1)',
+                                                    boxShadow: isDragging ? '0 4px 12px rgba(0,0,0,0.15)' : 'none',
+                                                    opacity: isDragging ? 0.9 : 1,
+                                                }, children: [_jsx("div", { style: { display: 'flex', cursor: 'grab' }, children: _jsx(IconDraggabledots, { fontSize: 15, color: TMColors.button_icon }) }), _jsx(TMMetadataIcon, { tid: item.tid ?? 0, md: md }), _jsx("span", { style: { flex: 1, fontSize: '13px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }, children: md?.name ?? `MID: ${item.mid}` }), _jsx("div", { "data-no-drag": "true", onMouseDown: (e) => e.stopPropagation(), children: _jsx(TMDropDown, { width: "175px", height: "28px", value: item.asc ? 'asc' : 'desc', dataSource: [
+                                                                { value: 'asc', display: SDKUI_Localizator.ValueAscending },
+                                                                { value: 'desc', display: SDKUI_Localizator.ValueDescending }
+                                                            ], onValueChanged: (e) => handleChangeAsc(index, e.target.value === 'asc') }) }), _jsx("div", { "data-no-drag": "true", onMouseDown: (e) => e.stopPropagation(), children: _jsx(TMButton, { icon: _jsx(IconDelete, { color: TMColors.error }), btnStyle: "icon", onClick: () => handleRemoveOrderBy(index) }) })] }, `${item.tid}_${item.mid}_${index}`));
+                                        }) }))] })] })] }), showMetadataChooser && (_jsx(TMMetadataChooserForm, { allowMultipleSelection: true, height: "600px", width: "700px", allowSysMetadata: allowSysMetadata, filterMetadata: filterMetadata, qd: qd, selectedIDs: selectedIDs, onClose: handleCloseChooser, onChoose: handleChooseFromChooser }))] }));
+};
+export default TMMetadataSorterForm;

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,61 +269,16 @@ 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;
@@ -329,7 +287,25 @@ const TMSearchQueryPanel = ({ fromDTD, showBackToResultButton, isExpertMode = SD
                         : _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 }), qd?.select && qd.select.length > 0 && (_jsxs(StyledSelectBadgesContainer, { children: [_jsxs(StyledSelectLabel, { children: [SDK_Localizator.QuerySelect, ":"] }), _jsx(StyledSelectBadgesWrapper, { children: (() => {
+                                                const maxVisible = isMobile ? 1 : 4;
+                                                const visibleItems = qd.select.slice(0, maxVisible);
+                                                const hiddenCount = qd.select.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 }) })] })), 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 maxVisible = isMobile ? 1 : 4;
+                                                const visibleItems = qd.orderBy.slice(0, maxVisible);
+                                                const hiddenCount = qd.orderBy.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 +314,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 +395,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 +581,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/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;

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

@@ -0,0 +1,77 @@
+import { DcmtTypeDescriptor, DcmtTypeListCacheService, SDK_Localizator } from "@topconsultnpm/sdk-ts";
+import { getTIDsByQd } from "../../../helper/queryHelper";
+import { SDKUI_Localizator } from "../../../helper";
+import TMSpinner from "../../base/TMSpinner";
+// =============================================================================
+// HELPER: Rimuove duplicati dalla lista (basato su tid + mid)
+// =============================================================================
+export function removeDuplicatesByTidMid(items) {
+    const seen = new Set();
+    return items.filter(item => {
+        const key = `${item.tid}_${item.mid}`;
+        if (seen.has(key))
+            return false;
+        seen.add(key);
+        return true;
+    });
+}
+// =============================================================================
+// FUNZIONE PRINCIPALE: Estrae i metadati dal QueryDescriptor
+// =============================================================================
+export async function loadMetadataFromQd(qd, filterMetadata) {
+    if (!qd)
+        return { metadata: [], dcmtTypes: [] };
+    const dtdList = [];
+    const metadata = [];
+    try {
+        const tidsFromQd = getTIDsByQd(qd);
+        const inputTIDs = tidsFromQd.map((item) => item.tid);
+        if (inputTIDs.length === 0)
+            return { metadata: [], dcmtTypes: [] };
+        TMSpinner.show({ description: `${SDKUI_Localizator.Loading} - ${SDK_Localizator.DcmtType} ...` });
+        const dtds = await DcmtTypeListCacheService.GetFromTIDsAsync(inputTIDs, true, undefined, false, false);
+        for (let i = 0; i < dtds.length; i++) {
+            const dtd = new DcmtTypeDescriptor();
+            dtd.init({ ...dtds[i] });
+            const alias = tidsFromQd?.[i]?.alias ?? '';
+            dtd.customData2 = alias;
+            dtd.metadata?.forEach((md) => {
+                const mdWithKey = md;
+                mdWithKey.customData1 = dtd.id;
+                mdWithKey.customData2 = alias;
+                mdWithKey.uniqueKey = `${dtd.id}_${md.id}_${alias}`;
+            });
+            const filteredMetadata = filterMetadata
+                ? dtd.metadata?.filter(filterMetadata)
+                : dtd.metadata;
+            dtdList.push({ ...dtd, metadata: filteredMetadata });
+        }
+        for (const dtd of dtdList) {
+            if (!dtd.metadata)
+                continue;
+            for (const md of dtd.metadata) {
+                metadata.push(md);
+            }
+        }
+        return { metadata, dcmtTypes: dtdList };
+    }
+    finally {
+        TMSpinner.hide();
+    }
+}
+// =============================================================================
+// HELPER: Confronta due array per determinare se sono stati modificati
+// =============================================================================
+export function areArraysEqual(arr1, arr2, additionalCompare) {
+    if (arr1.length !== arr2.length)
+        return false;
+    for (let i = 0; i < arr1.length; i++) {
+        const a = arr1[i];
+        const b = arr2[i];
+        if (a.tid !== b.tid || a.mid !== b.mid)
+            return false;
+        if (additionalCompare && !additionalCompare(a, b))
+            return false;
+    }
+    return true;
+}

package/lib/helper/SDKUI_Localizator.d.ts

@@ -487,6 +487,8 @@ export declare class SDKUI_Localizator {
     static get NoDataToDisplay(): "Keine Daten zum Anzeigen" | "No data to display" | "No hay datos para mostrar" | "Aucune donnée à afficher" | "Sem dados para exibir" | "Nessun dato da visualizzare";
     static get NoDcmtFound(): "Kein Dokument gefunden" | "No documents found" | "Ningún documento encontrado" | "Pas de documents trouvés" | "Nenhum documento encontrado" | "Nessun documento trovato";
     static get NoDcmtSelected(): string;
+    static get NoSortingApplied(): string;
+    static get NoOutputMetadata(): string;
     static get NoDetailDocumentFoundForArchiving(): "Kein Detaildokument zur Archivierung gefunden." | "No detail document found for archiving." | "No se encontró ningún documento de detalle para archivar." | "Aucun document détail trouvé pour l'archivage." | "Nenhum documento de detalhe encontrado para arquivamento." | "Nessun documento di dettaglio trovato per l'archiviazione.";
     static get NoDocumentMatchFound(): "Kein zugeordnetes Dokument gefunden." | "No document match found." | "No se encontró ningún documento emparejado." | "Aucun document associé trouvé." | "Nenhum documento correspondente encontrado." | "Nessun documento abbinato trovato.";
     static get NoDocumentSelectedForManyToManyMatching(): "Kein Dokument für die Mehrfach-Zuordnung ausgewählt." | "No document selected for many-to-many matching." | "Ningún documento seleccionado para el emparejamiento de muchos a muchos." | "Aucun document sélectionné pour l'association plusieurs à plusieurs." | "Nenhum documento selecionado para correspondência de muitos para muitos." | "Nessun documento selezionato per l'abbinamento molti a molti.";
@@ -738,6 +740,7 @@ export declare class SDKUI_Localizator {
     static get SignatureType(): string;
     static get Size(): "Größe" | "Size" | "Dimensión" | "Dimension" | "Tamanho" | "Dimensione";
     static get SortBy(): "Sortieren nach" | "Sort by" | "Ordenar por" | "Trier par" | "Ordinamento";
+    static get SortByPlural(): "Sortierungen" | "Sortings" | "Ordenaciones" | "Tris" | "Ordenações" | "Ordinamenti";
     static get Source(): "Ursprung" | "Source" | "Origen" | "Origem" | "Origine";
     static get SpecialOperators(): "Spezielle Operatoren" | "Special operators" | "Operadores especiales" | "Opérateurs spéciaux" | "Os operadores especiais" | "Operatori speciali";
     static get StandardMode(): "Standardmodus" | "Standard mode" | "Modo estándar" | "Mode standard" | "Modo padrão" | "Modalità standard";

package/lib/helper/SDKUI_Localizator.js

@@ -4830,6 +4830,26 @@ export class SDKUI_Localizator {
             default: return "Nessun documento selezionato";
         }
     }
+    static get NoSortingApplied() {
+        switch (this._cultureID) {
+            case CultureIDs.De_DE: return "Keine Sortierung angewendet";
+            case CultureIDs.En_US: return "No sorting applied";
+            case CultureIDs.Es_ES: return "Ningún ordenamiento aplicado";
+            case CultureIDs.Fr_FR: return "Aucun tri appliqué";
+            case CultureIDs.Pt_PT: return "Nenhuma ordenação aplicada";
+            default: return "Nessun ordinamento applicato";
+        }
+    }
+    static get NoOutputMetadata() {
+        switch (this._cultureID) {
+            case CultureIDs.De_DE: return "Keine Ausgabemetadaten ausgewählt";
+            case CultureIDs.En_US: return "No output metadata selected";
+            case CultureIDs.Es_ES: return "Ningún metadato de salida seleccionado";
+            case CultureIDs.Fr_FR: return "Aucune métadonnée de sortie sélectionnée";
+            case CultureIDs.Pt_PT: return "Nenhum metadado de saída selecionado";
+            default: return "Nessun metadato di output selezionato";
+        }
+    }
     static get NoDetailDocumentFoundForArchiving() {
         switch (this._cultureID) {
             case CultureIDs.De_DE: return "Kein Detaildokument zur Archivierung gefunden.";
@@ -7360,6 +7380,16 @@ export class SDKUI_Localizator {
             default: return "Ordinamento";
         }
     }
+    static get SortByPlural() {
+        switch (this._cultureID) {
+            case CultureIDs.De_DE: return "Sortierungen";
+            case CultureIDs.En_US: return "Sortings";
+            case CultureIDs.Es_ES: return "Ordenaciones";
+            case CultureIDs.Fr_FR: return "Tris";
+            case CultureIDs.Pt_PT: return "Ordenações";
+            default: return "Ordinamenti";
+        }
+    }
     static get Source() {
         switch (this._cultureID) {
             case CultureIDs.De_DE: return "Ursprung";

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@topconsultnpm/sdkui-react",
-    "version": "6.21.0-dev3.16",
+    "version": "6.21.0-dev3.18",
     "description": "",
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",