@topconsultnpm/sdkui-react 6.22.0-dev2.2 → 6.22.0-dev2.20

package/lib/components/choosers/TMDistinctValues.js

@@ -1,154 +1,161 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useCallback, useEffect, useMemo, 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 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 [currentValue, setCurrentValue] = useState('');
-    const { loadDataListsAsync, renderDataListCell, dataListsCache } = useDataListItem();
-    const { loadUsersAsync, renderUserIdViewer, usersCache } = useDataUserIdItem();
-    useEffect(() => {
-        getDistictValuesAsync();
-    }, [mid]);
-    useEffect(() => {
-        setIsAppendMode(false);
-        setFocusedItem(undefined);
-        setCurrentValue('');
-    }, [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 (!focusedItem.value) {
-            setCurrentValue('');
-            onSelectionChanged?.({ tid: tid, mid: mid, newValue: undefined, isAppendMode: isAppendMode });
-            return;
-        }
-        let value = md.dataType === MetadataDataTypes.Number ? parseFloat(focusedItem.value.replace(',', '.')).toString() : focusedItem.value;
-        let newValue = stringIsNullOrEmpty(currentValue)
-            ? value
-            : isAppendMode ? currentValue + separator + value : value;
-        setCurrentValue(newValue);
-        onSelectionChanged?.({ tid: tid, mid: mid, newValue: newValue, isAppendMode: isAppendMode });
-    }, [focusedItem]);
-    const getDistictValuesAsync = async () => {
-        if (!tid)
+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 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;
-        try {
-            TMSpinner.show({ description: 'Caricamento dei valori distinti...' });
-            let dtd = await DcmtTypeListCacheService.GetAsync(tid, true);
-            const currentMd = dtd?.metadata?.find(o => o.id === mid);
-            setMd(currentMd);
-            let result = await SDK_Globals.tmSession?.NewSearchEngine().GetDistinctValuesAsync(tid, mid, 10000);
-            // 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);
-            }
-            setDataSource(convertDataTableToObject(result?.dtdResult));
-        }
-        catch (e) {
-            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]);
-    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 }) },
-            { dataField: 'Count', dataType: 'number', caption: 'N°' }
-        ]);
-    }, [md, valueCellRender]);
-    const customSummary = useMemo(() => {
-        return ({
-            totalItems: [
-                { column: 'value', summaryType: 'count' },
-                { column: 'Count', summaryType: 'sum' }
-            ]
-        });
-    }, []);
-    const convertDataTableToObject = (dtdResult) => {
-        if (!dtdResult?.columns?.length || !dtdResult?.rows?.length)
-            return [];
-        return dtdResult.rows.map((row, index) => {
-            let rowObject = { rowIndex: index };
-            dtdResult.columns && dtdResult.columns.forEach((col, colIndex) => {
-                if (col?.caption) {
-                    rowObject[colIndex === 0 ? "value" : col.caption] = col.dataType === DataColumnTypes.Number
-                        ? row?.[colIndex]?.replace('.', ',')
-                        : row?.[colIndex] ?? null;
-                }
-            });
-            return rowObject;
-        });
-    };
-    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() && _jsx(TMCheckBox, { elementStyle: { position: 'absolute', right: '15px', top: '15px', zIndex: 10000 }, label: 'Accoda', value: isAppendMode, onValueChanged: () => { setIsAppendMode(!isAppendMode); } }), _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: () => !isAppendMode && 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 {};

package/lib/components/choosers/TMQuickSearchInfo.js

@@ -0,0 +1,279 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { DcmtTypeListCacheService, PlatformObjectValidator, SavedQueryCacheService, SDK_Globals, SDK_Localizator, SearchEngine } from '@topconsultnpm/sdk-ts';
+import styled from 'styled-components';
+import { displayMetadataValue, getSysAllDcmtsSQD, IconInfo, IconSavedQuery, LocalizeQueryOperators, SDKUI_Localizator, SYS_ALL_DCMTS_SQD_ID } from '../../helper';
+import { needsDisplayValue, useTMDistinctValuesMetadataDisplay } from '../../hooks/useTMDistinctValuesMetadataDisplay';
+import TMModal from '../base/TMModal';
+import { TMColors } from '../../utils/theme';
+const TOOLTIP_MAX_CONDITIONS = 8;
+const QUERY_PARAM_PREFIX = '{@QueryParam';
+/* Il riepilogo è lo stesso nel tooltip e nel dettaglio: cambia solo lo spazio a disposizione.
+   Nel tooltip la larghezza è limitata perché una riga lunghissima è illeggibile, nel dettaglio il contenuto scorre */
+const StyledSummary = styled.div `
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    ${props => props.$isDetail ? 'height: 100%; overflow-y: auto;' : 'min-width: 320px; max-width: 580px;'}
+    padding: ${props => props.$isDetail ? '14px 18px' : '10px 12px'};
+    text-align: left;
+    /* Nel tooltip il testo è un po' più piccolo: è una lettura di passaggio, il dettaglio è quello da leggere con calma */
+    font-size: ${props => props.$isDetail ? '1rem' : '0.9375rem'};
+    line-height: 1.5;
+    color: ${TMColors.text_normal};
+`;
+/* Intestazione del tooltip: nel dettaglio il nome della ricerca è già nel titolo del modale */
+const StyledSummaryTitle = styled.div `
+    display: flex;
+    align-items: center;
+    gap: 7px;
+    padding-bottom: 8px;
+    border-bottom: 1px solid ${TMColors.border_normal};
+    font-size: 1.0625em;
+    font-weight: 600;
+    color: ${TMColors.primary};
+
+    svg { flex-shrink: 0; }
+`;
+const StyledSectionTitle = styled.div `
+    display: flex;
+    align-items: center;
+    gap: 7px;
+    font-size: 0.8125em;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    color: ${TMColors.label_normal};
+`;
+const StyledCounter = styled.span `
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 21px;
+    height: 21px;
+    padding: 0 6px;
+    border-radius: 11px;
+    background-color: ${TMColors.primary};
+    color: white;
+    font-weight: 600;
+    letter-spacing: 0;
+`;
+const StyledConditions = styled.div `display: flex; flex-direction: column; gap: 5px;`;
+/* Ogni condizione è una riga a sé: il fondo e il filetto colorato la staccano dalle altre e rendono
+   leggibile l'elenco anche quando le condizioni sono molte */
+const StyledCondition = styled.div `
+    display: flex;
+    flex-direction: row;
+    align-items: baseline;
+    flex-wrap: wrap;
+    gap: 7px;
+    padding: 7px 10px;
+    border-left: 3px solid ${TMColors.primary};
+    border-radius: 4px;
+    background-color: ${TMColors.toolbar_background};
+`;
+/* La congiunzione con la condizione precedente: a larghezza fissa, così i nomi dei metadati restano incolonnati */
+const StyledConjunction = styled.span `
+    flex-shrink: 0;
+    width: 42px;
+    font-size: 0.8125em;
+    font-weight: 700;
+    letter-spacing: 0.5px;
+    color: ${TMColors.label_normal};
+`;
+/* Nome del metadato, operatore e valore restano sulla stessa riga finché c'è spazio, poi vanno a capo insieme */
+const StyledConditionText = styled.span `
+    display: flex;
+    flex: 1;
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: baseline;
+    gap: 5px;
+    min-width: 0;
+`;
+const StyledMetadataName = styled.span `font-weight: 600; word-break: break-word;`;
+const StyledOperator = styled.span `color: ${TMColors.label_normal}; white-space: nowrap;`;
+const StyledValue = styled.span `
+    padding: 2px 7px;
+    border: 1px solid ${TMColors.border_normal};
+    border-radius: 3px;
+    background-color: ${TMColors.default_background};
+    font-weight: 600;
+    color: ${TMColors.primary};
+    word-break: break-word;
+`;
+/* Il valore chiesto a ogni esecuzione non è un valore di ricerca: il bordo tratteggiato dice che è ancora da riempire */
+const StyledParameter = styled(StyledValue) `
+    border-style: dashed;
+    border-color: ${TMColors.tertiary};
+    background-color: transparent;
+    font-style: italic;
+    font-weight: normal;
+    color: ${TMColors.tertiary};
+`;
+const StyledNote = styled.div `
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 0.875em;
+    color: ${TMColors.label_normal};
+
+    svg { flex-shrink: 0; }
+`;
+/* Invito ad aprire il dettaglio: nel tooltip il testo è più piccolo e l'elenco può essere troncato */
+const StyledHint = styled(StyledNote) `
+    padding-top: 7px;
+    border-top: 1px solid ${TMColors.border_normal};
+    color: ${TMColors.primary};
+    font-weight: 600;
+`;
+const getDcmtTypeName = (dtd) => (SDK_Globals.useLocalizedName ? dtd?.nameLoc : dtd?.name) ?? dtd?.name ?? dtd?.nameLoc ?? undefined;
+const getMetadataName = (md) => (SDK_Globals.useLocalizedName ? md?.nameLoc : md?.name) ?? md?.name ?? md?.nameLoc ?? undefined;
+const isQueryParam = (value) => Boolean(value?.startsWith(QUERY_PARAM_PREFIX));
+/** Valori scritti nella condizione: gli operatori a elenco ne contengono più di uno, separati da virgola e fra apici */
+const splitValues = (value) => (value ?? '').split(',').map(item => {
+    const trimmed = item.trim();
+    return trimmed.startsWith("'") && trimmed.endsWith("'") ? trimmed.slice(1, -1) : trimmed;
+});
+/* Ogni condizione dell'editor di ricerca nasce racchiusa in una coppia di parentesi che non raggruppa nulla:
+   nel riepilogo sono solo rumore, restano quelle che aprono o chiudono un raggruppamento vero */
+const meaningfulBrackets = (brackets) => (brackets && brackets.length > 1) ? brackets : undefined;
+const findMetadata = (dcmtTypes, tid, mid) => dcmtTypes.find(o => o.id === tid)?.metadata?.find(o => o.id === mid);
+const formatValue = (md, value, getDisplayValue) => {
+    // Il segnaposto di un parametro non è un valore del metadato: va mostrato com'è
+    if (isQueryParam(value))
+        return value;
+    /* Liste dati e utenti sono archiviati per chiave: nel riepilogo va la descrizione, come nelle griglie
+       del pannello, altrimenti il filtro resterebbe illeggibile (es. TD01 invece di FATTURA) */
+    return splitValues(value)
+        .map(o => needsDisplayValue(md) ? String(getDisplayValue(md, o) ?? o) : displayMetadataValue(md, o))
+        .join(', ');
+};
+/**
+ * Valore mostrato per la condizione: il numero di operandi dell'operatore dice quali valori sono significativi
+ * e come vanno letti, perché non tutti sono valori del metadato.
+ */
+const buildConditionValue = (wi, md, operands, getDisplayValue) => {
+    switch (operands) {
+        // L'operatore non ha valori (è nullo, oggi, questo mese, ...): la condizione è tutta nell'operatore
+        case 0: return undefined;
+        // Numero di ore/giorni/... e condizione scritta a mano: non sono valori del metadato e vanno lasciati come sono
+        case 12:
+        case 99: return wi.value1;
+        case 2: return `${formatValue(md, wi.value1, getDisplayValue)} … ${formatValue(md, wi.value2, getDisplayValue)}`;
+        // Valore singolo o elenco di valori: in entrambi i casi sono valori del metadato
+        default: return formatValue(md, wi.value1, getDisplayValue);
+    }
+};
+const buildCondition = (wi, md, index, dcmtTypes, fromTid, getDisplayValue) => {
+    const operands = PlatformObjectValidator.GetNumberOfOperands(wi.operator);
+    return {
+        conjunction: index <= 0 ? undefined : (wi.or ? 'OR' : 'AND'),
+        leftBrackets: meaningfulBrackets(wi.leftBrackets),
+        rightBrackets: meaningfulBrackets(wi.rightBrackets),
+        // Con i join il nome del metadato da solo non basta a capire su quale tipo documento si sta filtrando
+        dcmtTypeName: wi.tid && wi.tid !== fromTid ? (wi.alias ?? getDcmtTypeName(dcmtTypes.find(o => o.id === wi.tid))) : undefined,
+        metadataName: getMetadataName(md) ?? `MID ${wi.mid ?? 0}`,
+        operator: LocalizeQueryOperators(wi.operator),
+        value: buildConditionValue(wi, md, operands, getDisplayValue),
+        isParameter: isQueryParam(wi.value1) || isQueryParam(wi.value2),
+    };
+};
+/**
+ * Filtri effettivamente applicati dalla ricerca: in modalità easy quelli senza valore vengono scartati prima
+ * della ricerca (sono i campi lasciati vuoti dall'utente) e mostrarli farebbe credere che la ricerca filtri
+ * su tutti i metadati, che è il caso di "Tutti i documenti".
+ */
+const getEffectiveWhere = (sqd, qd) => sqd?.isEasyWhere === 1
+    ? (qd?.where ?? []).filter(o => PlatformObjectValidator.WhereItemHasValues(o))
+    : (qd?.where ?? []);
+/**
+ * Righe da cui vengono ricavate le chiavi per cui caricare le descrizioni: hanno la stessa forma delle righe
+ * di un risultato di ricerca (un valore per condizione), perché è quella attesa dalle cache del pannello.
+ */
+const buildDisplayRows = (where) => {
+    const rows = [];
+    where.forEach((wi, index) => {
+        [...splitValues(wi.value1), ...splitValues(wi.value2)].forEach((value, valueIndex) => {
+            rows[valueIndex] ??= [];
+            rows[valueIndex][index] = value;
+        });
+    });
+    return rows;
+};
+const TMQuickSearchCondition = ({ condition }) => (_jsxs(StyledCondition, { children: [_jsx(StyledConjunction, { children: condition.conjunction }), _jsxs(StyledConditionText, { children: [condition.leftBrackets && _jsx(StyledOperator, { children: condition.leftBrackets }), _jsxs(StyledMetadataName, { children: [condition.dcmtTypeName && _jsxs(StyledOperator, { children: [condition.dcmtTypeName, "."] }), condition.metadataName] }), _jsx(StyledOperator, { children: condition.operator }), condition.value && (condition.isParameter
+                    ? _jsx(StyledParameter, { children: condition.value })
+                    : _jsx(StyledValue, { children: condition.value })), condition.rightBrackets && _jsx(StyledOperator, { children: condition.rightBrackets })] })] }));
+/** Riepilogo mostrato nel tooltip e nel dettaglio: nel dettaglio il nome della ricerca è già nel titolo del modale */
+const TMQuickSearchSummary = ({ summary, isDetail = false }) => {
+    if (!summary) {
+        return (_jsx(StyledSummary, { "$isDetail": isDetail, children: _jsxs(StyledNote, { children: [SDKUI_Localizator.Loading, " ..."] }) }));
+    }
+    if (summary.isUnavailable) {
+        return (_jsxs(StyledSummary, { "$isDetail": isDetail, children: [!isDetail && _jsxs(StyledSummaryTitle, { children: [_jsx(IconSavedQuery, { fontSize: 19 }), summary.name] }), _jsxs(StyledNote, { children: [_jsx(IconInfo, { fontSize: 17 }), "La ricerca rapida configurata non \u00E8 pi\u00F9 disponibile"] })] }));
+    }
+    // Nel tooltip le condizioni oltre il limite vengono troncate: il tooltip non è scorribile
+    const shownConditions = isDetail ? summary.conditions : summary.conditions.slice(0, TOOLTIP_MAX_CONDITIONS);
+    const hiddenConditionsCount = summary.conditions.length - shownConditions.length;
+    const hasParameters = shownConditions.some(o => o.isParameter);
+    return (_jsxs(StyledSummary, { "$isDetail": isDetail, children: [!isDetail && _jsxs(StyledSummaryTitle, { children: [_jsx(IconSavedQuery, { fontSize: 19 }), summary.name] }), summary.conditions.length <= 0
+                ? _jsxs(StyledNote, { children: [_jsx(IconInfo, { fontSize: 17 }), "Nessun filtro: la ricerca restituisce tutti i documenti"] })
+                : _jsxs(_Fragment, { children: [_jsxs(StyledSectionTitle, { children: [SDK_Localizator.QueryWhere, _jsx(StyledCounter, { children: summary.conditions.length })] }), _jsx(StyledConditions, { children: shownConditions.map((condition, index) => _jsx(TMQuickSearchCondition, { condition: condition }, index)) }), hiddenConditionsCount > 0 &&
+                            _jsxs(StyledNote, { children: [_jsx(IconInfo, { fontSize: 17 }), "Altre ", hiddenConditionsCount, " condizioni non mostrate"] })] }), hasParameters && _jsxs(StyledNote, { children: [_jsx(IconInfo, { fontSize: 17 }), "I valori tratteggiati vengono chiesti a ogni esecuzione della ricerca"] }), !isDetail && _jsxs(StyledHint, { children: [_jsx(IconInfo, { fontSize: 17 }), "Fare clic per aprire il dettaglio e leggerlo meglio"] })] }));
+};
+export const useTMQuickSearchInfo = ({ tid, sqdId }) => {
+    // Le descrizioni di liste dati e utenti vengono dalle stesse cache usate dalle griglie del pannello
+    const { loadDisplayCachesAsync, getMetadataDisplayValue } = useTMDistinctValuesMetadataDisplay();
+    const [summary, setSummary] = useState();
+    const [showDetail, setShowDetail] = useState(false);
+    // Identifica la richiesta corrente: dopo ogni await le risposte delle richieste obsolete vengono scartate
+    const requestIdRef = useRef(0);
+    useEffect(() => { loadAsync(); }, [tid, sqdId]);
+    const loadAsync = async () => {
+        const requestId = ++requestIdRef.current;
+        const isStale = () => requestId !== requestIdRef.current;
+        setSummary(undefined);
+        if (!sqdId)
+            return;
+        try {
+            const sqd = sqdId === SYS_ALL_DCMTS_SQD_ID
+                ? await getSysAllDcmtsSQD(tid, false)
+                : await SavedQueryCacheService.GetAsync(sqdId);
+            const qd = SearchEngine.NormalizeQueryDescriptor(sqd?.qd);
+            const name = sqd?.name ?? (sqd?.id ? `ID ${sqd.id}` : SDK_Localizator.SavedQuery);
+            if (!qd) {
+                if (!isStale())
+                    setSummary({ name, conditions: [], isUnavailable: true });
+                return;
+            }
+            // I nomi dei metadati stanno sui tipi documento della ricerca: con i join le condizioni ne riguardano più di uno
+            const dcmtTypes = await DcmtTypeListCacheService.GetFromQdAsync(qd);
+            const where = getEffectiveWhere(sqd, qd);
+            const whereMd = where.map(wi => findMetadata(dcmtTypes, wi.tid, wi.mid));
+            // Le descrizioni si leggono dalle cache: vanno caricate prima di comporre il riepilogo
+            await loadDisplayCachesAsync(whereMd, buildDisplayRows(where));
+            if (isStale())
+                return;
+            setSummary({
+                name,
+                conditions: where.map((wi, index) => buildCondition(wi, whereMd[index], index, dcmtTypes, qd.from?.tid, getMetadataDisplayValue)),
+                isUnavailable: false,
+            });
+        }
+        catch {
+            /* Il riepilogo è un di più: un errore qui non deve disturbare con una finestra di eccezione,
+               basta dire nel tooltip che la ricerca non è leggibile */
+            if (!isStale())
+                setSummary({ name: SDK_Localizator.SavedQuery, conditions: [], isUnavailable: true });
+        }
+    };
+    const detailTitle = useMemo(() => `${SDK_Localizator.SavedQuery}${summary?.name ? ` - ${summary.name}` : ''}`, [summary?.name]);
+    const infoButton = !sqdId ? undefined : {
+        icon: _jsx(IconInfo, {}),
+        text: SDK_Localizator.SavedQuery,
+        tooltipContent: _jsx(TMQuickSearchSummary, { summary: summary }),
+        onClick: () => setShowDetail(true),
+    };
+    const detailForm = !showDetail ? null : (_jsx(TMModal, { title: detailTitle, width: '620px', height: '520px', onClose: () => setShowDetail(false), children: _jsx(TMQuickSearchSummary, { summary: summary, isDetail: true }) }));
+    return { infoButton, detailForm };
+};

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import { DistinctValuesQuickSearchSettings } from '../../helper';
+/** Impostazione della ricerca rapida usata dal pannello dei valori distinti: è la stessa che viene persistita nelle impostazioni utente */
+export type QuickSearchSettings = DistinctValuesQuickSearchSettings;
+/** Impostazione vuota da cui parte la configurazione: solo il numero massimo di documenti ha un valore predefinito */
+export declare const newQuickSearchSettings: () => QuickSearchSettings;
+interface ITMQuickSearchSettingsForm {
+    /** Impostazione di partenza: se assente il form parte vuoto */
+    settings?: QuickSearchSettings;
+    onSave?: (settings: QuickSearchSettings) => void;
+    /** Chiede l'eliminazione dell'impostazione salvata: la conferma spetta al chiamante. Senza il gestore il pulsante di eliminazione non viene mostrato */
+    onDelete?: () => void;
+    onClose?: () => void;
+}
+declare const TMQuickSearchSettingsForm: React.FC<ITMQuickSearchSettingsForm>;
+export default TMQuickSearchSettingsForm;