@topconsultnpm/sdkui-react 6.22.0-dev2.16 → 6.22.0-dev2.18

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

@@ -1,3 +1,4 @@
+import React from "react";
 import { ValidationItem } from "@topconsultnpm/sdk-ts";
 export type Colors = 'error' | 'warning' | 'success' | 'info' | 'primary' | 'secondary' | 'tertiary' | 'standard';
 type IconModes = 'outside' | 'inside' | 'none';
@@ -6,6 +7,7 @@ export type Sizes = 'small' | 'medium' | 'large';
 export type TMEditorButtonData = {
     icon: any;
     text?: string;
+    tooltipContent?: React.ReactNode;
     onClick?: () => void;
 };
 export interface ITMEditorBase {

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

@@ -9,6 +9,7 @@ interface ITMTooltipProps extends ITooltipOptions {
     hideAfterDelay?: boolean;
     parentStyle?: React.CSSProperties;
     childStyle?: React.CSSProperties;
+    allowContentInteraction?: boolean;
 }
-declare const TMTooltip: ({ children, position, content, hideAfterDelay, parentStyle, childStyle }: ITMTooltipProps) => import("react/jsx-runtime").JSX.Element;
+declare const TMTooltip: ({ children, position, content, hideAfterDelay, parentStyle, childStyle, allowContentInteraction }: ITMTooltipProps) => import("react/jsx-runtime").JSX.Element;
 export default TMTooltip;

package/lib/components/base/TMTooltip.js

@@ -1,20 +1,37 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { Tooltip } from 'devextreme-react/tooltip';
 import { genUniqueId } from '../../helper';
 import { DeviceType, useDeviceType } from './TMDeviceProvider';
-const TMTooltip = ({ children, position, content, hideAfterDelay, parentStyle, childStyle }) => {
+/** Tempo per spostare il mouse dall'elemento al contenuto del tooltip, quando è interattivo */
+const HIDE_DELAY_MS = 400;
+const TMTooltip = ({ children, position, content, hideAfterDelay, parentStyle, childStyle, allowContentInteraction = false }) => {
     const [showTooltip, setShowTooltip] = useState(false);
     const [id, setID] = useState('');
+    const hideTimerRef = useRef();
     useEffect(() => { setID(genUniqueId()); }, [children]);
     useEffect(() => {
-        window.addEventListener('click', () => setShowTooltip(false));
-        return () => window.removeEventListener('click', () => setShowTooltip(false));
+        const hide = () => setShowTooltip(false);
+        window.addEventListener('click', hide);
+        return () => window.removeEventListener('click', hide);
     }, []);
+    useEffect(() => { return () => clearTimeout(hideTimerRef.current); }, []);
     const deviceType = useDeviceType();
-    return (_jsxs("div", { style: parentStyle, children: [_jsx("div", { id: `idContainerTooltip${id}`, style: { display: 'flex', alignItems: 'center', height: 'max-content', width: 'max-content', ...childStyle }, onMouseEnter: () => { setShowTooltip(true); }, onMouseLeave: () => { setShowTooltip(false); }, onTouchStart: () => { setShowTooltip(true); }, onClick: () => { if (deviceType === DeviceType.DESKTOP || !hideAfterDelay)
+    const cancelHide = () => clearTimeout(hideTimerRef.current);
+    const show = () => { cancelHide(); setShowTooltip(true); };
+    const hide = () => {
+        cancelHide();
+        if (!allowContentInteraction) {
+            setShowTooltip(false);
+            return;
+        }
+        hideTimerRef.current = setTimeout(() => setShowTooltip(false), HIDE_DELAY_MS);
+    };
+    return (_jsxs("div", { style: parentStyle, children: [_jsx("div", { id: `idContainerTooltip${id}`, style: { display: 'flex', alignItems: 'center', height: 'max-content', width: 'max-content', ...childStyle }, onMouseEnter: show, onMouseLeave: hide, onTouchStart: show, onClick: () => { if (deviceType === DeviceType.DESKTOP || !hideAfterDelay)
                     return; setTimeout(() => { setShowTooltip(false); }, 1500); }, onTouchEnd: () => { if (deviceType === DeviceType.DESKTOP || !hideAfterDelay)
                     return; setTimeout(() => { setShowTooltip(false); }, 1500); }, children: children }), content &&
-                _jsx(Tooltip, { target: `#idContainerTooltip${id}`, hideOnOutsideClick: true, visible: showTooltip, position: position ?? 'bottom', onHidden: () => setShowTooltip(false), children: content })] }));
+                _jsx(Tooltip, { target: `#idContainerTooltip${id}`, hideOnOutsideClick: true, visible: showTooltip, position: position ?? 'bottom', onHidden: () => setShowTooltip(false), children: allowContentInteraction
+                        ? _jsx("div", { style: { pointerEvents: 'all' }, onMouseEnter: cancelHide, onMouseLeave: hide, children: content })
+                        : content })] }));
 };
 export default TMTooltip;

package/lib/components/choosers/TMDcmtTypeChooser.js

@@ -3,11 +3,12 @@ import { useEffect, useState } from 'react';
 import { AccessLevelsEx, DcmtTypeListCacheService, SDK_Globals, SDK_Localizator } from '@topconsultnpm/sdk-ts';
 import TMSpinner from '../base/TMSpinner';
 import { IconSearch, SDKUI_Localizator } from '../../helper';
+import { FontSize } from '../../utils/theme';
 import { StyledDivHorizontal } from '../base/Styled';
 import TMTidViewer, { TMDcmtTypeIcon } from '../viewers/TMTidViewer';
 import TMSummary from '../editors/TMSummary';
 import TMChooserForm from '../forms/TMChooserForm';
-const TMDcmtTypeChooser = ({ tmSession, dataSource, disabled, backgroundColor, filter, accessFilter = 'all', showEditButton = true, borderRadius = '4px', buttons = [], placeHolder = `<${SDKUI_Localizator.NoneSelection}>`, openEditorOnSummaryClick, showBorder = true, showId = false, elementStyle, allowMultipleSelection, ShowOnlyDcmtTypes, ShowOnlySAP, filterTemplateTID, values, isModifiedWhen, label, width, height, showClearButton = false, validationItems = [], onValueChanged, updateIsModalOpen }) => {
+const TMDcmtTypeChooser = ({ tmSession, dataSource, disabled, backgroundColor, icon, filter, accessFilter = 'all', showEditButton = true, borderRadius = '4px', fontSize = FontSize.defaultFontSize, buttons = [], placeHolder = `<${SDKUI_Localizator.NoneSelection}>`, openEditorOnSummaryClick, showBorder = true, showId = false, elementStyle, allowMultipleSelection, ShowOnlyDcmtTypes, ShowOnlySAP, filterTemplateTID, values, isModifiedWhen, label, width, height, showClearButton = false, validationItems = [], onValueChanged, updateIsModalOpen }) => {
     const [showChooser, setShowChooser] = useState(false);
     useEffect(() => {
         TMSpinner.show({ description: `${SDKUI_Localizator.Loading} - ${SDK_Localizator.ListDcmtTypeOrView} ...` });
@@ -15,9 +16,9 @@ const TMDcmtTypeChooser = ({ tmSession, dataSource, disabled, backgroundColor, f
         DcmtTypeListCacheService.GetFromTIDsAsync(values, false, tms).then(() => { TMSpinner.hide(); });
     }, [values]);
     const renderTemplate = () => {
-        return (_jsxs(StyledDivHorizontal, { style: { width: 'max-content', height: '100%' }, children: [values && _jsx(TMTidViewer, { tmSession: tmSession, tid: values[0], showIcon: true, showId: showId, noneSelectionText: placeHolder }), values && values.length > 1 && _jsx("p", { style: { marginLeft: '10px' }, children: `(+${values.length - 1} ${values.length == 2 ? 'altro' : 'altri'})` })] }));
+        return (_jsxs(StyledDivHorizontal, { style: { width: 'max-content', height: '100%' }, children: [values && _jsx(TMTidViewer, { tmSession: tmSession, tid: values[0], color: 'inherit', showIcon: true, showId: showId, noneSelectionText: placeHolder }), values && values.length > 1 && _jsx("p", { style: { margin: 0, marginLeft: '10px' }, children: `(+${values.length - 1} ${values.length == 2 ? 'altro' : 'altri'})` })] }));
     };
-    return (_jsxs(_Fragment, { children: [_jsx(TMSummary, { backgroundColor: backgroundColor, buttons: buttons, showBorder: showBorder, borderRadius: borderRadius, hasValue: values && values.length > 0, showClearButton: showClearButton, showEditButton: showEditButton, iconEditButton: _jsx(IconSearch, { fontSize: 16 }), onEditorClick: () => {
+    return (_jsxs(_Fragment, { children: [_jsx(TMSummary, { backgroundColor: backgroundColor, icon: icon, disabled: disabled, fontSize: fontSize, buttons: buttons, showBorder: showBorder, borderRadius: borderRadius, hasValue: values && values.length > 0, showClearButton: showClearButton, showEditButton: showEditButton, iconEditButton: _jsx(IconSearch, { fontSize: 16 }), onEditorClick: () => {
                     if (!disabled) {
                         setShowChooser(true);
                         updateIsModalOpen?.(true);

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import { LayoutModes } from '@topconsultnpm/sdk-ts';
+import { TMDistinctValuesEventArgs } from '../../hooks/useTMDistinctValuesSelection';
 interface ITMDistinctValues {
     tid: number | undefined;
     mid: number | undefined;
@@ -8,14 +9,15 @@ interface ITMDistinctValues {
     allowAppendMode?: boolean;
     showHeader?: boolean;
     isModal?: boolean;
-    onSelectionChanged?: (e: DistinctValuesEventArgs) => void;
+    onSelectionChanged?: (e: TMDistinctValuesEventArgs) => void;
     onClosePanelCallback?: () => void;
 }
-type DistinctValuesEventArgs = {
-    tid: number | undefined;
-    mid: number | undefined;
-    newValue: string | undefined;
-    isAppendMode: boolean;
-};
+/**
+ * Pannello da cui si preleva il valore di un campo del form scegliendolo fra quelli già archiviati.
+ *
+ * Le due sorgenti (valori distinti del metadato e ricerca rapida su una ricerca salvata) stanno in due hook
+ * dedicati che espongono la stessa interfaccia (righe, colonne, conteggi): qui restano la composizione,
+ * la scelta della sorgente da mostrare e il render.
+ */
 declare const TMDistinctValues: React.FC<ITMDistinctValues>;
 export default TMDistinctValues;

package/lib/components/choosers/TMDistinctValues.js

@@ -1,209 +1,161 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { LayoutModes, MetadataDataDomains, AccessLevels, MetadataDataTypes, SDK_Globals, DcmtTypeListCacheService, DataColumnTypes, DataListViewModes } from '@topconsultnpm/sdk-ts';
+import { useCallback, useEffect, useMemo, useRef } from 'react';
+import { LayoutModes, SDK_Localizator } from '@topconsultnpm/sdk-ts';
 import styled from 'styled-components';
-import { SDKUI_Localizator, stringIsNullOrEmpty } from '../../helper';
-import TMDataGrid, { TMDataGridPageSize } from '../base/TMDataGrid';
-import { TMExceptionBoxManager } from '../base/TMPopUp';
-import TMSpinner from '../base/TMSpinner';
+import { calcResponsiveSizes, IconAll, IconDelete, IconPencil, IconRefresh, SDKUI_Localizator } from '../../helper';
+import TMButton from '../base/TMButton';
+import TMDataGrid from '../base/TMDataGrid';
+import { CounterItemKey } from '../base/TMCounterContainer';
+import { useDeviceType } from '../base/TMDeviceProvider';
 import TMCheckBox from '../editors/TMCheckBox';
+import TMDropDown from '../editors/TMDropDown';
 import TMTextBox from '../editors/TMTextBox';
 import TMPanel from '../base/TMPanel';
 import TMModal from '../base/TMModal';
-import { useDataListItem } from '../../hooks/useDataListItem';
-import { useDataUserIdItem } from '../../hooks/useDataUserIdItem';
-const StyledDistinctValues = styled.div `display: flex; flex-direction: column; height: 100%; overflow: hidden; gap: 10px; position: relative;`;
-const StyledAppendBar = styled.div `display: flex; flex-direction: row; align-items: center; gap: 5px; position: absolute; right: 15px; top: 15px; z-index: 10000;`;
+import TMQuickSearchSettingsForm from './TMQuickSearchSettingsForm';
+import TMSelectedValuesSummary from './TMSelectedValuesSummary';
+import { useTMDistinctValuesMetadataDisplay } from '../../hooks/useTMDistinctValuesMetadataDisplay';
+import { DistinctValuesModes, QUICK_SEARCH_VALUE_COLUMN_CLASS, useTMDistinctValuesQuickSearch } from '../../hooks/useTMDistinctValuesQuickSearch';
+import { useTMDistinctValuesSelection } from '../../hooks/useTMDistinctValuesSelection';
+import { useTMDistinctValuesSource } from '../../hooks/useTMDistinctValuesSource';
+import { TMColors } from '../../utils/theme';
+/* Il padding orizzontale stacca il contenuto dai bordi del pannello/modale che lo ospita */
+const StyledDistinctValues = styled.div `display: flex; flex-direction: column; height: 100%; overflow: hidden; gap: 6px; padding: 4px 8px 6px; position: relative;`;
+const StyledTopBar = styled.div `
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    gap: 15px;
+    flex-wrap: wrap;
+    padding: 6px 10px;
+    background-color: ${TMColors.toolbar_background};
+    border: 1px solid ${TMColors.border_normal};
+    border-radius: 6px;
+`;
+/* Accodamento e separatore stanno con il resto della configurazione: il divisore li distingue dai comandi senza staccarli dal gruppo */
+const StyledAppendBar = styled.div `
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 8px;
+    min-height: 30px;
+    padding-left: 10px;
+    border-left: 1px solid ${TMColors.border_normal};
+`;
+/* Modalità, comandi e opzioni di accodamento: tutta la configurazione del pannello su un'unica riga */
+const StyledConfigBar = styled.div `display: flex; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 4px;`;
+const StyledGridContainer = styled.div `
+    flex: 1;
+    min-height: 0;
+    overflow: hidden;
+
+    /* Evidenzia intestazione e celle della colonna da cui viene prelevato il valore */
+    .${QUICK_SEARCH_VALUE_COLUMN_CLASS} {
+        background-color: ${TMColors.primary_container};
+        font-weight: 600;
+    }
+`;
+/* Quota di larghezza attribuita a ciascuna colonna della griglia, oltre a una base fissa per la barra dei comandi.
+   I limiti evitano i due estremi: sotto il 40% la barra dei comandi diventa illeggibile, oltre il 95% il modale esce dallo schermo */
+const QUICK_SEARCH_BASE_WIDTH_PERC = 16;
+const QUICK_SEARCH_COLUMN_WIDTH_PERC = 12;
+const QUICK_SEARCH_MIN_WIDTH_PERC = 40;
+const QUICK_SEARCH_MAX_WIDTH_PERC = 95;
+/**
+ * Larghezza del modale della ricerca rapida, proporzionale al numero di colonne mostrate: con poche colonne
+ * un modale a tutta pagina le lascerebbe stirate e meno leggibili, con molte serve tutto lo spazio disponibile.
+ */
+const calcQuickSearchModalWidth = (visibleColumnsCount) => {
+    const widthPerc = QUICK_SEARCH_BASE_WIDTH_PERC + visibleColumnsCount * QUICK_SEARCH_COLUMN_WIDTH_PERC;
+    return `${Math.min(QUICK_SEARCH_MAX_WIDTH_PERC, Math.max(QUICK_SEARCH_MIN_WIDTH_PERC, widthPerc))}%`;
+};
+/**
+ * Pannello da cui si preleva il valore di un campo del form scegliendolo fra quelli già archiviati.
+ *
+ * Le due sorgenti (valori distinti del metadato e ricerca rapida su una ricerca salvata) stanno in due hook
+ * dedicati che espongono la stessa interfaccia (righe, colonne, conteggi): qui restano la composizione,
+ * la scelta della sorgente da mostrare e il render.
+ */
 const TMDistinctValues = ({ tid, mid, layoutMode = LayoutModes.None, allowAppendMode = true, showHeader = true, isModal, separator = ",", onSelectionChanged, onClosePanelCallback }) => {
-    const [focusedItem, setFocusedItem] = useState();
-    const [dataSource, setDataSource] = useState([]);
-    const [isAppendMode, setIsAppendMode] = useState(false);
-    const [md, setMd] = useState();
-    const [appendedValues, setAppendedValues] = useState(new Set());
-    const { loadDataListsAsync, renderDataListCell, getDataListItem } = useDataListItem();
-    const { loadUsersAsync, renderUserIdViewer, getUserItem, getCompleteUserName } = useDataUserIdItem();
-    // Identifica la richiesta corrente: le risposte delle richieste obsolete vengono scartate
-    const requestIdRef = useRef(0);
-    useEffect(() => {
-        getDistictValuesAsync();
-    }, [tid, mid]);
-    useEffect(() => {
-        setIsAppendMode(false);
-        setFocusedItem(undefined);
-        setAppendedValues(new Set());
-    }, [md]);
-    useEffect(() => {
-        if (!focusedItem)
-            return;
-        if (!md)
-            return;
-        if ((layoutMode === LayoutModes.Ark || layoutMode === LayoutModes.Update) && md.dataDomain === MetadataDataDomains.Computed)
-            return;
-        const permissionCheck = {
-            [LayoutModes.Ark]: md.perm?.canArchive,
-            [LayoutModes.Update]: md.perm?.canUpdate,
-            [LayoutModes.None]: md.perm?.canSearch,
-        };
-        if (layoutMode in permissionCheck && permissionCheck[layoutMode] !== AccessLevels.Yes)
-            return;
-        if (stringIsNullOrEmpty(focusedItem.value)) {
-            setAppendedValues(new Set());
-            onSelectionChanged?.({ tid: tid, mid: mid, newValue: undefined, isAppendMode: isAppendMode });
-            return;
-        }
-        let value = md.dataType === MetadataDataTypes.Number ? parseFloat(focusedItem.value.replace(',', '.')).toString() : focusedItem.value;
-        // Fuori dalla modalità Accoda la selezione sostituisce sempre il valore precedente
-        const newAppendedValues = isAppendMode ? new Set(appendedValues) : new Set();
-        newAppendedValues.add(value);
-        setAppendedValues(newAppendedValues);
-        onSelectionChanged?.({ tid: tid, mid: mid, newValue: joinAppendedValues(newAppendedValues), isAppendMode: isAppendMode });
-    }, [focusedItem]);
-    const joinAppendedValues = (values) => Array.from(values).join(separator);
-    const onAppendModeChanged = () => {
-        const newIsAppendMode = !isAppendMode;
-        // Disattivando l'accodamento si riparte da zero: il prossimo click sostituirà il valore
-        if (!newIsAppendMode)
-            setAppendedValues(new Set());
-        setIsAppendMode(newIsAppendMode);
-    };
-    const getDistictValuesAsync = async () => {
-        if (!tid)
+    const deviceType = useDeviceType();
+    const display = useTMDistinctValuesMetadataDisplay();
+    const distinctValues = useTMDistinctValuesSource({ tid, mid, display });
+    const quickSearch = useTMDistinctValuesQuickSearch({ tid, mid, md: distinctValues.md, display });
+    const { isQuickSearchMode, isQuickSearchGridVisible } = quickSearch;
+    // Il valore della riga sta in campi diversi nelle due sorgenti: nei valori distinti è sempre `value`,
+    // nella ricerca rapida è la colonna del metadato configurato
+    const getRowValue = useCallback((row) => {
+        if (!isQuickSearchGridVisible)
+            return row?.value;
+        return quickSearch.valueField ? row?.[quickSearch.valueField] : undefined;
+    }, [isQuickSearchGridVisible, quickSearch.valueField]);
+    const selection = useTMDistinctValuesSelection({
+        tid, mid, md: distinctValues.md, layoutMode, allowAppendMode, separator,
+        selectedValueMd: quickSearch.selectedValueMd,
+        getRowValue,
+        getMetadataDisplayValue: display.getMetadataDisplayValue,
+        onSelectionChanged
+    });
+    // Cambiando sorgente la riga focalizzata non esiste più: la griglia viene ricreata da zero
+    useEffect(() => { selection.setFocusedItem(undefined); }, [quickSearch.mode, quickSearch.settings]);
+    const refreshAsync = async () => {
+        if (!isQuickSearchMode) {
+            await distinctValues.loadAsync();
             return;
-        const requestId = ++requestIdRef.current;
-        // Svuota subito la griglia: evita di mostrare i valori del tid/mid precedente durante il caricamento
-        setDataSource([]);
-        try {
-            TMSpinner.show({ description: 'Caricamento dei valori distinti...' });
-            let dtd = await DcmtTypeListCacheService.GetAsync(tid, true);
-            const currentMd = dtd?.metadata?.find(o => o.id === mid);
-            let result = await SDK_Globals.tmSession?.NewSearchEngine().GetDistinctValuesAsync(tid, mid, 10000);
-            if (requestId !== requestIdRef.current)
-                return;
-            // Load DataList or UserID cache based on metadata domain
-            if (currentMd?.dataDomain === MetadataDataDomains.DataList && currentMd.dataListID) {
-                await loadDataListsAsync(new Set([currentMd.dataListID]));
-            }
-            if (currentMd?.dataDomain === MetadataDataDomains.UserID && result?.dtdResult?.rows) {
-                const userIDs = new Set();
-                result.dtdResult.rows.forEach((row) => {
-                    const userId = Number(row[0]);
-                    if (userId && userId > 0) {
-                        userIDs.add(userId);
-                    }
-                });
-                await loadUsersAsync(userIDs);
-            }
-            // Nel frattempo tid/mid sono cambiati: questa risposta (e le cache appena caricate) non è più valida
-            if (requestId !== requestIdRef.current)
-                return;
-            // md e dataSource vengono impostati insieme, dopo il popolamento delle cache,
-            // così il render delle celle usa sempre metadato e cache coerenti con i dati
-            setMd(currentMd);
-            setDataSource(convertDataTableToObject(result?.dtdResult));
-        }
-        catch (e) {
-            if (requestId !== requestIdRef.current)
-                return;
-            let err = e;
-            TMExceptionBoxManager.show({ exception: err });
-        }
-        finally {
-            TMSpinner.hide();
         }
+        await quickSearch.refreshAsync();
     };
-    const onFocusedRowChanged = useCallback((e) => {
-        setFocusedItem(e.row?.data);
-    }, []);
-    const valueCellRender = useCallback((cellData) => {
-        if (!cellData || cellData.value === undefined)
-            return null;
-        if (md?.dataDomain === MetadataDataDomains.DataList && md.dataListID) {
-            return renderDataListCell(cellData.value, md.dataListID, md.dataListViewMode ?? DataListViewModes.None);
-        }
-        if (md?.dataDomain === MetadataDataDomains.UserID) {
-            return renderUserIdViewer(Number(cellData.value), true);
-        }
-        return _jsx("div", { children: cellData.text });
-    }, [md, renderDataListCell, renderUserIdViewer]);
-    // Per DataList e UserID il testo mostrato in cella (descrizione, nome utente) è diverso dal valore
-    // grezzo del dataSource (codice, id): senza questa funzione la ricerca di DevExtreme filtrerebbe
-    // sul valore grezzo e non troverebbe quello che l'utente vede scritto nella griglia
-    const calculateValueDisplayValue = useCallback((rowData) => {
-        const value = rowData?.value;
-        if (stringIsNullOrEmpty(value))
-            return value;
-        if (md?.dataDomain === MetadataDataDomains.DataList && md.dataListID) {
-            return getDataListItem(md.dataListID, value)?.name ?? value;
-        }
-        if (md?.dataDomain === MetadataDataDomains.UserID) {
-            const userId = Number(value);
-            if (userId === 0)
-                return SDKUI_Localizator.SystemUser;
-            const ud = getUserItem(userId);
-            return ud ? getCompleteUserName(ud.domain, ud.name) ?? value : value;
-        }
-        return value;
-    }, [md, getDataListItem, getUserItem, getCompleteUserName]);
-    const customColumns = useMemo(() => {
-        const needsCellRender = md?.dataDomain === MetadataDataDomains.DataList || md?.dataDomain === MetadataDataDomains.UserID;
-        return ([
-            { dataField: 'value', dataType: md?.dataType === MetadataDataTypes.DateTime ? 'date' : 'string', caption: md?.nameLoc, width: 'min-content', ...(needsCellRender && { cellRender: valueCellRender, calculateDisplayValue: calculateValueDisplayValue }) },
-            { dataField: 'Count', dataType: 'number', caption: 'N°' }
-        ]);
-    }, [md, valueCellRender, calculateValueDisplayValue]);
-    const customSummary = useMemo(() => {
-        return ({
-            totalItems: [
-                { column: 'value', summaryType: 'count' },
-                { column: 'Count', summaryType: 'sum' }
-            ]
-        });
-    }, []);
-    const convertDataTableToObject = (dtdResult) => {
-        if (!dtdResult?.columns?.length || !dtdResult?.rows?.length)
-            return [];
-        // Descrittori di colonna calcolati una sola volta invece che per ogni riga
-        const columns = [];
-        dtdResult.columns.forEach((col, colIndex) => {
-            if (col?.caption) {
-                columns.push({ index: colIndex, key: colIndex === 0 ? "value" : col.caption, isNumber: col.dataType === DataColumnTypes.Number });
-            }
-        });
-        // Il conteggio delle occorrenze è la seconda colonna del risultato:
-        // la chiave di ordinamento viene calcolata una volta per riga, non a ogni confronto
-        const COUNT_COL_INDEX = 1;
-        const rows = dtdResult.rows.map((row) => {
-            let rowObject = { rowIndex: 0, sortValue: 0 };
-            for (let i = 0; i < columns.length; i++) {
-                const col = columns[i];
-                rowObject[col.key] = col.isNumber ? row?.[col.index]?.replace('.', ',') : row?.[col.index] ?? null;
-            }
-            rowObject.sortValue = Number(row?.[COUNT_COL_INDEX]) || 0;
-            return rowObject;
-        });
-        rows.sort((a, b) => b.sortValue - a.sortValue);
-        for (let i = 0; i < rows.length; i++)
-            rows[i].rowIndex = i;
-        return rows;
-    };
-    const isVisibleAppend = () => {
-        if (!allowAppendMode)
-            return false;
-        if (layoutMode !== LayoutModes.Ark && layoutMode !== LayoutModes.Update)
-            return true;
-        if (!md)
-            return true;
-        if (md.dataType === MetadataDataTypes.DateTime)
-            return false;
-        if (md.dataType === MetadataDataTypes.Number)
-            return false;
-        return md.dataDomain === undefined || md.dataDomain === MetadataDataDomains.None;
-    };
+    // Finché le colonne della ricerca rapida non sono pronte la griglia non va montata: nascerebbe senza campi
+    const isGridReady = !isQuickSearchGridVisible || quickSearch.columns.length > 0;
+    const counterConfig = useMemo(() => {
+        const counts = isQuickSearchGridVisible ? quickSearch.counts : distinctValues.counts;
+        // Senza il totale resta il conteggio predefinito della griglia: un rapporto con totale a zero sarebbe fuorviante
+        if (!counts?.found)
+            return { show: true };
+        return {
+            show: true,
+            items: new Map([
+                [CounterItemKey.allItems, {
+                        key: CounterItemKey.allItems,
+                        show: true,
+                        caption: `${counts.returned} restituiti su ${counts.found} trovati`,
+                        value: `${counts.returned}/${counts.found}`,
+                        icon: _jsx(IconAll, {}),
+                        order: -1
+                    }]
+            ])
+        };
+    }, [isQuickSearchGridVisible, quickSearch.counts, distinctValues.counts]);
+    const modeDataSource = useMemo(() => ([
+        { value: DistinctValuesModes.DistinctValues, display: SDKUI_Localizator.DistinctValues },
+        { value: DistinctValuesModes.QuickSearch, display: SDK_Localizator.SavedQuery },
+    ]), []);
+    const panelTitle = (isQuickSearchGridVisible ? SDK_Localizator.SavedQuery : SDKUI_Localizator.DistinctValues) + (distinctValues.md?.nameLoc ? ` (${distinctValues.md?.nameLoc})` : '');
+    /* Le colonne nascoste (metadati di sistema della query) non occupano spazio: non vanno contate nella larghezza.
+       Durante un ricaricamento le colonne tornano momentaneamente vuote: si conserva l'ultima larghezza calcolata,
+       altrimenti il modale si restringerebbe per poi riallargarsi */
+    const lastQuickSearchModalWidthRef = useRef();
+    const quickSearchModalWidth = useMemo(() => {
+        const visibleColumnsCount = quickSearch.columns.filter(col => col.visible !== false).length;
+        if (visibleColumnsCount > 0)
+            lastQuickSearchModalWidthRef.current = calcQuickSearchModalWidth(visibleColumnsCount);
+        return lastQuickSearchModalWidthRef.current;
+    }, [quickSearch.columns]);
+    /* La larghezza è nota solo a ricerca conclusa: mostrare subito il modale lo farebbe nascere alla larghezza minima
+       per poi allargarlo sotto gli occhi dell'utente, quindi si attende (l'attesa è coperta dallo spinner della ricerca) */
+    const isModalReady = !isQuickSearchGridVisible || !!quickSearchModalWidth || !quickSearch.isFirstSearchPending;
     const renderContent = () => {
-        return (_jsxs(StyledDistinctValues, { children: [isVisibleAppend() && _jsxs(StyledAppendBar, { children: [_jsx(TMCheckBox, { label: 'Accoda e separa con', value: isAppendMode, onValueChanged: onAppendModeChanged }), _jsx(TMTextBox, { width: '30px', readOnly: true, disabled: !isAppendMode, value: separator })] }), _jsx(TMDataGrid, { focusedRowKey: focusedItem ? focusedItem.rowIndex : undefined, selection: { showCheckBoxesMode: 'none' }, searchPanel: { highlightCaseSensitive: true, visible: true }, dataColumns: customColumns, dataSource: dataSource, keyExpr: 'rowIndex', height: 'calc(100%)', onFocusedRowChanged: onFocusedRowChanged, paging: { pageSize: 30 }, summary: customSummary, onRowDblClick: () => onClosePanelCallback?.(), pageSize: TMDataGridPageSize.Medium })] }));
+        return (_jsxs(StyledDistinctValues, { children: [_jsx(StyledTopBar, { children: _jsxs(StyledConfigBar, { children: [_jsx(TMDropDown, { width: '180px', value: quickSearch.mode, dataSource: modeDataSource, elementStyle: { display: 'flex', alignItems: 'center' }, onValueChanged: (e) => quickSearch.onModeChanged(Number(e.target.value)) }), isQuickSearchMode &&
+                                _jsx(TMButton, { btnStyle: 'toolbar', caption: SDKUI_Localizator.Settings, icon: _jsx(IconPencil, {}), onClick: () => quickSearch.setShowSettingsForm(true) }), isQuickSearchMode && Boolean(quickSearch.settings) &&
+                                _jsx(TMButton, { btnStyle: 'toolbar', color: 'error', caption: SDKUI_Localizator.Delete, icon: _jsx(IconDelete, {}), onClick: quickSearch.onDeleteSettingsClick }), _jsx(TMButton, { btnStyle: 'toolbar', caption: SDKUI_Localizator.Refresh, icon: _jsx(IconRefresh, {}), onClick: () => refreshAsync() }), selection.isAppendVisible && _jsxs(StyledAppendBar, { children: [_jsx(TMCheckBox, { label: 'Accoda e separa con', value: selection.isAppendMode, onValueChanged: selection.onAppendModeChanged }), _jsx(TMTextBox, { width: '30px', readOnly: true, disabled: !selection.isAppendMode, value: separator })] })] }) }), _jsx(TMSelectedValuesSummary, { items: selection.selectedValues, onRemove: selection.onRemoveSelectedValue, onClear: selection.onClearSelectedValues }), _jsx(StyledGridContainer, { children: isGridReady && _jsx(TMDataGrid
+                    /* Le due modalità hanno colonne del tutto diverse: ognuna ha la propria istanza di griglia.
+                       Nei valori distinti l'intestazione è il nome del metadato, che arriva insieme al primo caricamento */
+                    , { focusedRowKey: selection.focusedItem ? selection.focusedItem.rowIndex : undefined, selection: { showCheckBoxesMode: 'none' }, searchPanel: { highlightCaseSensitive: true, visible: true }, dataColumns: isQuickSearchGridVisible ? quickSearch.columns : distinctValues.columns, dataSource: isQuickSearchGridVisible ? quickSearch.dataSource : distinctValues.dataSource, customizeColumns: isQuickSearchGridVisible ? quickSearch.customizeColumns : distinctValues.customizeColumns, keyExpr: 'rowIndex', height: 'calc(100%)', showHeaderColumnChooser: true, onFocusedRowChanged: selection.onFocusedRowChanged, onRowDblClick: () => onClosePanelCallback?.(), counterConfig: counterConfig }, isQuickSearchGridVisible ? 'quickSearch' : `distinctValues_${distinctValues.md?.id ?? 0}`) })] }));
     };
-    return (_jsx(_Fragment, { children: isModal
-            ? _jsx(TMModal, { title: SDKUI_Localizator.DistinctValues + (md?.nameLoc ? ` (${md?.nameLoc})` : ''), height: '600px', width: '500px', resizable: true, onClose: onClosePanelCallback, children: renderContent() })
-            : _jsx(TMPanel, { title: SDKUI_Localizator.DistinctValues + (md?.nameLoc ? ` (${md?.nameLoc})` : ''), showHeader: showHeader, onClose: onClosePanelCallback, children: renderContent() }) }));
+    return (_jsxs(_Fragment, { children: [isModal
+                ? isModalReady && _jsx(TMModal, { title: panelTitle, width: isQuickSearchGridVisible ? calcResponsiveSizes(deviceType, quickSearchModalWidth ?? calcQuickSearchModalWidth(0), '95%', '95%') : calcResponsiveSizes(deviceType, '700px', '95%', '95%'), height: isQuickSearchGridVisible ? '95%' : calcResponsiveSizes(deviceType, '600px', '95%', '95%'), resizable: true, expandable: true, onClose: onClosePanelCallback, children: renderContent() }, isQuickSearchGridVisible ? 'quickSearch' : 'distinctValues')
+                : _jsx(TMPanel, { title: panelTitle, showHeader: showHeader, onClose: onClosePanelCallback, children: renderContent() }), quickSearch.showSettingsForm &&
+                _jsx(TMQuickSearchSettingsForm, { settings: quickSearch.settings, onSave: quickSearch.onSaveSettings, onDelete: quickSearch.onDeleteSettingsClick, onClose: quickSearch.onSettingsFormClose }), _jsx(quickSearch.ConfirmQueryParamsDialog, {})] }));
 };
 export default TMDistinctValues;

package/lib/components/choosers/TMMetadataChooser.js

@@ -21,7 +21,7 @@ const TMMetadataChooser = ({ tmSession, dataSource, showEditButton = true, butto
         return undefined;
     };
     const renderTemplate = useMemo(() => {
-        return (_jsxs(StyledDivHorizontal, { style: { width: 'max-content', height: '100%' }, children: [values && values.length > 0 && values[0].mid && values[0].mid > 0 && _jsx(TMMidViewer, { tmSession: tmSession, tid_mid: values[0], showIcon: true, showId: showId, showCompleteName: showCompleteMetadataName }), values && values.length > 0 && values[0].mid && values[0].mid < 0 && _jsx(TMMidViewer, { tmSession: tmSession, tid_mid: values[0], inputMd: getinputMd(), showIcon: true, showId: showId, showCompleteName: showCompleteMetadataName }), values && values.length > 1 && _jsx("p", { style: { marginLeft: '10px' }, children: `(+${values.length - 1} ${values.length == 2 ? 'altro' : 'altri'})` }), (values == undefined || values.length == 0) && _jsx("p", { children: placeHolder ?? SDKUI_Localizator.SelectMetadata })] }));
+        return (_jsxs(StyledDivHorizontal, { style: { width: 'max-content', height: '100%' }, children: [values && values.length > 0 && values[0].mid && values[0].mid > 0 && _jsx(TMMidViewer, { tmSession: tmSession, tid_mid: values[0], color: 'inherit', showIcon: true, showId: showId, showCompleteName: showCompleteMetadataName }), values && values.length > 0 && values[0].mid && values[0].mid < 0 && _jsx(TMMidViewer, { tmSession: tmSession, tid_mid: values[0], inputMd: getinputMd(), color: 'inherit', showIcon: true, showId: showId, showCompleteName: showCompleteMetadataName }), values && values.length > 1 && _jsx("p", { style: { margin: 0, marginLeft: '10px' }, children: `(+${values.length - 1} ${values.length == 2 ? 'altro' : 'altri'})` }), (values == undefined || values.length == 0) && _jsx("p", { style: { margin: 0 }, children: placeHolder ?? SDKUI_Localizator.SelectMetadata })] }));
     }, [values, tmSession, showId, showCompleteMetadataName, placeHolder]);
     return (_jsxs(_Fragment, { children: [_jsx(TMSummary, { label: label, width: width, height: height, disabled: disabled, validationItems: validationItems, backgroundColor: backgroundColor, buttons: buttons, placeHolder: placeHolder, fontSize: fontSize, showBorder: showBorder, borderRadius: borderRadius, hasValue: values && values.length > 0, showClearButton: showClearButton, showEditButton: showEditButton, iconEditButton: _jsx(IconSearch, { fontSize: 16 }), openEditorOnSummaryClick: openEditorOnSummaryClick, onEditorClick: () => {
                     if (!disabled) {

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

@@ -0,0 +1,12 @@
+import { TMEditorButtonData } from '../base/TMEditorBase';
+interface ITMQuickSearchInfo {
+    /** Tipo documento della ricerca rapida: serve a ricostruire la ricerca di sistema con tutti i documenti */
+    tid: number | undefined;
+    /** Senza ricerca salvata non c'è nulla da spiegare e l'icona non viene mostrata */
+    sqdId: number | undefined;
+}
+export declare const useTMQuickSearchInfo: ({ tid, sqdId }: ITMQuickSearchInfo) => {
+    infoButton: TMEditorButtonData | undefined;
+    detailForm: import("react/jsx-runtime").JSX.Element | null;
+};
+export {};