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

package/lib/components/editors/TMDropDown.js

@@ -1,11 +1,13 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from "react";
-import styled from "styled-components";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import styled, { css } from "styled-components";
 import { FontSize, TMColors } from '../../utils/theme';
 import { StyledEditorContainer, StyledEditorIcon, StyledEditorLabel, TMEditorsDefaultBorderRadius, editorColorManager } from "./TMEditorStyled";
 import TMLayoutContainer, { TMLayoutItem } from "../base/TMLayout";
 import TMVilViewer from "../base/TMVilViewer";
 import TMTooltip from "../base/TMTooltip";
+import { SDKUI_Localizator } from "../../helper";
 const StyledDropDownWrapper = styled.div `
   position: relative;
   width: ${props => props.$width};
@@ -54,9 +56,199 @@ const StyledDropDownEditorButton = styled.div `
     align-items: center;
     cursor: pointer;
 `;
-const TMDropDown = ({ validationItems = [], disabled = false, elementStyle, isModifiedWhen, labelPosition = 'left', label, icon, width = '100%', fontSize = FontSize.defaultFontSize, dataSource, value, onValueChanged, buttons = [], placeHolder, }) => {
+// Variante filtrabile: un input di testo con la stessa resa grafica della select nativa
+const StyledSearchInput = styled.input `
+    width: 100%;
+    padding: 5px 35px 3px 9px;
+    border: 1px solid;
+    border-color: ${props => props.$isModified ? TMColors.isModified : TMColors.border_normal};
+    border-bottom: ${props => (props.$vil.length > 0) ? '3px' : '1px'} solid;
+    border-bottom-color: ${props => (props.$vil.length === 0) ? !props.$isModified ? TMColors.border_normal : TMColors.isModified : editorColorManager(props.$vil)};
+    color: ${props => !props.$disabled ? (props.$vil.length === 0 ? (!props.$isModified ? TMColors.text_normal : TMColors.isModified) : editorColorManager(props.$vil)) : TMColors.disabled};
+    border-radius: ${props => props.$borderRadius ?? TMEditorsDefaultBorderRadius};
+    font-size: ${props => props.$fontSize};
+    background-color: ${props => props.$disabled ? '#F5F5F5' : 'white'};
+    text-overflow: ellipsis;
+
+    &:focus {
+        outline: none;
+        border: ${props => props.$isModified ? `1px solid ${TMColors.isModified}` : '1px solid rgb(180,180,180)'};
+        border-bottom: 2px solid;
+        border-bottom-color: ${props => (props.$vil.length === 0) ? !props.$isModified ? TMColors.primary : TMColors.isModified : editorColorManager(props.$vil)};
+    }
+`;
+const OPTIONS_PANEL_MAX_HEIGHT = 220;
+const OPTIONS_PANEL_MIN_HEIGHT = 80;
+const OPTIONS_PANEL_MARGIN = 4;
+// L'elenco aperto con usePortal esce dal contenitore dell'editor: deve stare sopra tutto ciò che può trovarsi nella stessa pagina
+const DROPDOWN_OPTIONS_PANEL_Z_INDEX = 100001;
+const optionsPanelCss = css `
+    overflow-y: auto;
+    background-color: white;
+    border: 1px solid ${TMColors.border_normal};
+    border-radius: ${TMEditorsDefaultBorderRadius};
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
+`;
+// Elenco ancorato all'editor: resta nel flusso del DOM e quindi soggetto al clipping dei contenitori con overflow
+const StyledOptionsPanel = styled.div `
+    ${optionsPanelCss}
+    position: absolute;
+    top: calc(100% + 2px);
+    left: 0;
+    right: 0;
+    z-index: 10001;
+    max-height: ${OPTIONS_PANEL_MAX_HEIGHT}px;
+`;
+// Variante usePortal: posizione calcolata rispetto alla finestra, così l'elenco non viene tagliato da nessun contenitore
+const StyledPortalOptionsPanel = styled.div `
+    ${optionsPanelCss}
+    position: fixed;
+    left: ${props => props.$left}px;
+    ${props => props.$top !== undefined ? `top: ${props.$top}px;` : ''}
+    ${props => props.$bottom !== undefined ? `bottom: ${props.$bottom}px;` : ''}
+    width: ${props => props.$width}px;
+    z-index: ${DROPDOWN_OPTIONS_PANEL_Z_INDEX};
+    max-height: ${props => props.$maxHeight}px;
+`;
+const StyledOption = styled.div `
+    padding: 5px 9px;
+    font-size: ${props => props.$fontSize};
+    cursor: pointer;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font-weight: ${props => props.$isSelected ? 600 : 'normal'};
+    background-color: ${props => props.$isHighlighted ? TMColors.primary_container : 'transparent'};
+`;
+const StyledNoOptions = styled.div `
+    padding: 5px 9px;
+    font-size: ${props => props.$fontSize};
+    color: ${TMColors.disabled};
+`;
+// L'elenco si apre sotto l'editor se c'è spazio, altrimenti sopra, e in ogni caso non esce dalla finestra
+const calcOptionsPanelPosition = (rect) => {
+    const spaceBelow = window.innerHeight - rect.bottom - OPTIONS_PANEL_MARGIN;
+    const spaceAbove = rect.top - OPTIONS_PANEL_MARGIN;
+    const openUpwards = spaceBelow < OPTIONS_PANEL_MAX_HEIGHT && spaceAbove > spaceBelow;
+    const availableHeight = openUpwards ? spaceAbove : spaceBelow;
+    return {
+        left: Math.max(OPTIONS_PANEL_MARGIN, Math.min(rect.left, window.innerWidth - rect.width - OPTIONS_PANEL_MARGIN)),
+        top: openUpwards ? undefined : rect.bottom + OPTIONS_PANEL_MARGIN,
+        bottom: openUpwards ? window.innerHeight - rect.top + OPTIONS_PANEL_MARGIN : undefined,
+        width: rect.width,
+        maxHeight: Math.max(OPTIONS_PANEL_MIN_HEIGHT, Math.min(OPTIONS_PANEL_MAX_HEIGHT, availableHeight)),
+    };
+};
+const TMDropDown = ({ validationItems = [], disabled = false, elementStyle, isModifiedWhen, labelPosition = 'left', label, icon, width = '100%', fontSize = FontSize.defaultFontSize, dataSource, value, searchEnabled = false, usePortal = false, itemRender, onValueChanged, buttons = [], placeHolder, }) => {
     const [isFocused, setIsFocused] = useState(false);
-    const renderedLeftLabelTextBox = () => (_jsxs(TMLayoutContainer, { direction: 'horizontal', children: [icon && _jsx(TMLayoutItem, { width: '20px', children: _jsx(StyledEditorIcon, { "$disabled": disabled, "$vil": validationItems, "$isModified": isModifiedWhen, children: icon }) }), _jsx(TMLayoutItem, { children: _jsxs(StyledEditorContainer, { "$width": width, children: [label && _jsx(StyledEditorLabel, { "$isFocused": isFocused, "$labelPosition": labelPosition, "$disabled": disabled, children: label }), _jsxs(StyledDropDownWrapper, { "$width": width, children: [_jsxs(StyledDropDown, { value: value, onFocus: () => setIsFocused(true), onBlur: () => setIsFocused(false), "$disabled": disabled, disabled: disabled, "$fontSize": fontSize, "$isModified": isModifiedWhen, "$vil": validationItems, onChange: onValueChanged, children: [placeHolder && _jsx("option", { value: "", disabled: true, hidden: true, children: placeHolder }), dataSource?.map((data, index) => (_jsx("option", { value: data.value, children: data.display }, index)))] }), buttons.length > 0 && (_jsx(ButtonsContainer, { children: buttons.map((buttonItem) => (_jsx(StyledDropDownEditorButton, { onClick: buttonItem.onClick, children: _jsx(TMTooltip, { content: buttonItem.text, children: buttonItem.icon }) }, buttonItem.text))) })), _jsx(CustomArrow, {})] }), _jsx(TMVilViewer, { vil: validationItems })] }) })] }));
+    const [isOpen, setIsOpen] = useState(false);
+    const [searchText, setSearchText] = useState('');
+    const [highlightedIndex, setHighlightedIndex] = useState(-1);
+    const [optionsPanelPosition, setOptionsPanelPosition] = useState();
+    const optionsPanelRef = useRef(null);
+    const dropDownWrapperRef = useRef(null);
+    const selectedItem = dataSource?.find(o => String(o.value) === String(value));
+    // A elenco chiuso l'input mostra la voce selezionata, ad elenco aperto il testo digitato
+    const filteredDataSource = (!isOpen || !searchText) ? (dataSource ?? []) : (dataSource ?? []).filter(o => String(o.display ?? '').toLocaleLowerCase().includes(searchText.toLocaleLowerCase()));
+    // Mantiene visibile la voce evidenziata durante la navigazione da tastiera
+    useEffect(() => {
+        if (!isOpen || highlightedIndex < 0)
+            return;
+        const option = optionsPanelRef.current?.children[highlightedIndex];
+        option?.scrollIntoView({ block: 'nearest' });
+    }, [isOpen, highlightedIndex]);
+    // Solo nel portal la posizione va ricalcolata: essendo fissa non segue lo scorrimento o il ridimensionamento del contenitore
+    useEffect(() => {
+        if (!isOpen || !usePortal)
+            return;
+        const updatePosition = () => updateOptionsPanelPosition();
+        window.addEventListener('scroll', updatePosition, true);
+        window.addEventListener('resize', updatePosition);
+        return () => {
+            window.removeEventListener('scroll', updatePosition, true);
+            window.removeEventListener('resize', updatePosition);
+        };
+    }, [isOpen, usePortal]);
+    const updateOptionsPanelPosition = () => {
+        const rect = dropDownWrapperRef.current?.getBoundingClientRect();
+        if (rect)
+            setOptionsPanelPosition(calcOptionsPanelPosition(rect));
+    };
+    const openOptions = () => {
+        if (disabled)
+            return;
+        if (usePortal)
+            updateOptionsPanelPosition();
+        setIsOpen(true);
+        setSearchText('');
+        setHighlightedIndex(dataSource?.findIndex(o => String(o.value) === String(value)) ?? -1);
+    };
+    const closeOptions = () => {
+        setIsOpen(false);
+        setSearchText('');
+        setHighlightedIndex(-1);
+    };
+    const selectItem = (item) => {
+        closeOptions();
+        // La select nativa notifica un ChangeEvent: qui viene ricostruito il solo dato letto dai consumatori (target.value)
+        onValueChanged?.({ target: { value: String(item.value) } });
+    };
+    const onSearchKeyDown = (e) => {
+        switch (e.key) {
+            case 'ArrowDown':
+            case 'ArrowUp':
+                e.preventDefault();
+                if (!isOpen) {
+                    openOptions();
+                    return;
+                }
+                if (filteredDataSource.length <= 0)
+                    return;
+                setHighlightedIndex(prev => {
+                    const delta = e.key === 'ArrowDown' ? 1 : -1;
+                    const next = prev + delta;
+                    if (next < 0)
+                        return filteredDataSource.length - 1;
+                    if (next >= filteredDataSource.length)
+                        return 0;
+                    return next;
+                });
+                break;
+            case 'Enter': {
+                if (!isOpen)
+                    return;
+                e.preventDefault();
+                const item = filteredDataSource[highlightedIndex] ?? filteredDataSource[0];
+                if (item)
+                    selectItem(item);
+                break;
+            }
+            case 'Escape':
+                if (isOpen) {
+                    e.preventDefault();
+                    closeOptions();
+                }
+                break;
+        }
+    };
+    const renderOptions = () => (filteredDataSource.length > 0
+        ? filteredDataSource.map((data, index) => (_jsx(StyledOption, { "$fontSize": fontSize, "$isSelected": String(data.value) === String(value), "$isHighlighted": index === highlightedIndex, onMouseEnter: () => setHighlightedIndex(index), onClick: () => selectItem(data), children: itemRender ? itemRender(data) : data.display }, index)))
+        : _jsx(StyledNoOptions, { "$fontSize": fontSize, children: SDKUI_Localizator.NoDataToDisplay }));
+    // onMouseDown va bloccato: senza preventDefault il blur dell'input chiuderebbe l'elenco prima del click
+    const renderOptionsPanel = () => {
+        if (!isOpen)
+            return null;
+        if (!usePortal) {
+            return (_jsx(StyledOptionsPanel, { ref: optionsPanelRef, onMouseDown: (e) => e.preventDefault(), children: renderOptions() }));
+        }
+        if (!optionsPanelPosition)
+            return null;
+        return createPortal(_jsx(StyledPortalOptionsPanel, { ref: optionsPanelRef, "$left": optionsPanelPosition.left, "$top": optionsPanelPosition.top, "$bottom": optionsPanelPosition.bottom, "$width": optionsPanelPosition.width, "$maxHeight": optionsPanelPosition.maxHeight, onMouseDown: (e) => e.preventDefault(), children: renderOptions() }), document.body);
+    };
+    const renderSearchableDropDown = () => (_jsxs(_Fragment, { children: [_jsx(StyledSearchInput, { value: isOpen ? searchText : (selectedItem?.display ?? ''), placeholder: isOpen ? SDKUI_Localizator.Search : placeHolder, readOnly: disabled, disabled: disabled, "$disabled": disabled, "$fontSize": fontSize, "$isModified": isModifiedWhen, "$vil": validationItems, onFocus: () => { setIsFocused(true); openOptions(); }, onBlur: () => { setIsFocused(false); closeOptions(); }, onClick: () => { if (!isOpen)
+                    openOptions(); }, onChange: (e) => { setSearchText(e.target.value); setIsOpen(true); setHighlightedIndex(0); }, onKeyDown: onSearchKeyDown }), renderOptionsPanel()] }));
+    const renderNativeDropDown = () => (_jsxs(StyledDropDown, { value: value, onFocus: () => setIsFocused(true), onBlur: () => setIsFocused(false), "$disabled": disabled, disabled: disabled, "$fontSize": fontSize, "$isModified": isModifiedWhen, "$vil": validationItems, onChange: onValueChanged, children: [placeHolder && _jsx("option", { value: "", disabled: true, hidden: true, children: placeHolder }), dataSource?.map((data, index) => (_jsx("option", { value: data.value, children: data.display }, index)))] }));
+    const renderedLeftLabelTextBox = () => (_jsxs(TMLayoutContainer, { direction: 'horizontal', children: [icon && _jsx(TMLayoutItem, { width: '20px', children: _jsx(StyledEditorIcon, { "$disabled": disabled, "$vil": validationItems, "$isModified": isModifiedWhen, children: icon }) }), _jsx(TMLayoutItem, { children: _jsxs(StyledEditorContainer, { "$width": width, children: [label && _jsx(StyledEditorLabel, { "$isFocused": isFocused, "$labelPosition": labelPosition, "$disabled": disabled, children: label }), _jsxs(StyledDropDownWrapper, { ref: dropDownWrapperRef, "$width": width, children: [searchEnabled ? renderSearchableDropDown() : renderNativeDropDown(), buttons.length > 0 && (_jsx(ButtonsContainer, { children: buttons.map((buttonItem) => (_jsx(StyledDropDownEditorButton, { onClick: buttonItem.onClick, children: _jsx(TMTooltip, { content: buttonItem.tooltipContent ?? buttonItem.text, children: buttonItem.icon }) }, buttonItem.text))) })), _jsx(CustomArrow, {})] }), _jsx(TMVilViewer, { vil: validationItems })] }) })] }));
     return _jsx("div", { style: elementStyle, children: renderedLeftLabelTextBox() });
 };
 export default TMDropDown;

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

@@ -3,7 +3,7 @@ import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import styled from 'styled-components';
 import { LoadIndicator } from 'devextreme-react';
 import { AppModules, DataColumnTypes, DataListViewModes, DcmtTypeListCacheService, LayoutCacheService, LayoutModes, MetadataDataDomains, SDK_Globals, SystemMIDsAsNumber, UserListCacheService, } from '@topconsultnpm/sdk-ts';
-import { deepCompare, formatDateTimeByMetadataFormat, formatNumberByMetadataFormat, generateUniqueColumnKeys, genUniqueId, getColumnFormatInfo, getSearchToolbarVisibility, IconAll, IconBoard, IconDcmtTypeSys, IconDelete, IconMenuVertical, IconPlatform, IconRefresh, IconSearchCheck, IconShow, isApprovalWorkflowView, isSign4TopEnabled, searchResultDescriptorToSimpleArray, searchResultToMetadataValues, SDKUI_Globals, SDKUI_Localizator } from '../../../helper';
+import { customizeSearchByDisplayText, deepCompare, formatDateTimeByMetadataFormat, formatNumberByMetadataFormat, generateUniqueColumnKeys, genUniqueId, getColumnFormatInfo, getDateDisplayText, getNumberDisplayText, getSearchToolbarVisibility, IconAll, IconBoard, IconDcmtTypeSys, IconDelete, IconMenuVertical, IconPlatform, IconRefresh, IconSearchCheck, IconShow, isApprovalWorkflowView, isSign4TopEnabled, searchResultDescriptorToSimpleArray, searchResultToMetadataValues, SDKUI_Globals, SDKUI_Localizator } from '../../../helper';
 import { CounterItemKey } from '../../base/TMCounterContainer';
 import { getDcmtCicoStatus } from '../../../helper/checkinCheckoutManager';
 import { DcmtOperationTypes, SearchResultContext, } from '../../../ts';
@@ -926,8 +926,8 @@ const TMSearchResultGrid = ({ openInOffice, fromDTD, operationItems, allUsers, i
     useEffect(() => {
         updateDataSourceFromDataGrid(dataSource ?? []);
     }, [dataSource]);
-    const { loadDataListsAsync, renderDataListCell, dataListsCache } = useDataListItem();
-    const { loadUsersAsync, renderUserIdViewer, usersCache } = useDataUserIdItem();
+    const { loadDataListsAsync, renderDataListCell, dataListsCache, getDataListItem } = useDataListItem();
+    const { loadUsersAsync, renderUserIdViewer, usersCache, getUserItem, getCompleteUserName } = useDataUserIdItem();
     useEffect(() => {
         // Sincronizza focusedItem con inputFocusedItem dal padre
         if (deepCompare(inputFocusedItem, focusedItem))
@@ -1159,6 +1159,57 @@ const TMSearchResultGrid = ({ openInOffice, fromDTD, operationItems, allUsers, i
         });
         return cols;
     }, [searchResult, dataType, cellRender, getDisplayFormat, dataListsCache, usersCache]);
+    /**
+     * Colonne in cui il testo mostrato è diverso dal valore archiviato: date e numeri formattati, descrizioni
+     * di liste dati e utenti. Su queste la ricerca della griglia va fatta sul testo mostrato, altrimenti non
+     * trova nulla (es. cercando 29/01/2023 su una data, che nei dati è una stringa ISO).
+     * Le cache sono ref lette al momento della ricerca: a quel punto sono già popolate.
+     */
+    const searchTextGetters = useMemo(() => {
+        const getters = new Map();
+        const columnsOfResult = searchResult?.dtdResult?.columns;
+        if (!columnsOfResult)
+            return getters;
+        const uniqueKeys = generateUniqueColumnKeys(columnsOfResult, searchResult?.fromTID);
+        columnsOfResult.forEach((col, index) => {
+            const dataField = uniqueKeys[index];
+            if (!dataField)
+                return;
+            const dataDomain = MetadataDataDomains[(col.extendedProperties?.["DataDomain"] ?? "None")];
+            const dataListID = Number(col.extendedProperties?.["DataListID"]);
+            if (dataDomain === MetadataDataDomains.DataList && dataListID) {
+                getters.set(dataField, (rowData) => getDataListItem(dataListID, rowData?.[dataField])?.name ?? String(rowData?.[dataField] ?? ''));
+                return;
+            }
+            if (dataDomain === MetadataDataDomains.UserID) {
+                getters.set(dataField, (rowData) => {
+                    const rawValue = rowData?.[dataField];
+                    // Un campo utente vuoto non mostra nulla: senza questo controllo Number('') darebbe 0, cioè l'utente di sistema
+                    if (rawValue === undefined || rawValue === null || rawValue === '')
+                        return '';
+                    const userId = Number(rawValue);
+                    if (Number.isNaN(userId))
+                        return String(rawValue);
+                    if (userId === 0)
+                        return SDKUI_Localizator.SystemUser ?? '';
+                    const ud = getUserItem(userId);
+                    return (ud ? getCompleteUserName(ud.domain, ud.name) : undefined) ?? String(rawValue);
+                });
+                return;
+            }
+            // Data e numero vengono mostrati con il formato definito sulle proprietà estese della colonna
+            const { format, formatCulture } = getColumnFormatInfo(col);
+            if (col.dataType === DataColumnTypes.DateTime) {
+                getters.set(dataField, (rowData) => getDateDisplayText(rowData?.[dataField], format, formatCulture));
+                return;
+            }
+            if (col.dataType === DataColumnTypes.Number) {
+                getters.set(dataField, (rowData) => getNumberDisplayText(rowData?.[dataField], format, formatCulture));
+            }
+        });
+        return getters;
+    }, [searchResult, getDataListItem, getUserItem, getCompleteUserName]);
+    const customizeColumns = useMemo(() => customizeSearchByDisplayText(searchTextGetters), [searchTextGetters]);
     /**
      * Effect che carica i dati necessari e genera le colonne della griglia.
      * Esegue il caricamento delle cache (DataList e UserID) in parallelo prima di generare le colonne,
@@ -1289,7 +1340,7 @@ const TMSearchResultGrid = ({ openInOffice, fromDTD, operationItems, allUsers, i
         setVisibleItems(visibleData);
     }, []);
     useEffect(() => { onVisibleItemChanged?.(visibleItems); }, [visibleItems]);
-    return _jsxs("div", { style: { width: "100%", height: "100%" }, children: [!isDataGridReady && (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '100%', width: '100%', gap: '10px' }, children: [_jsx(LoadIndicator, { height: 60, width: 60 }), _jsx("div", { children: SDKUI_Localizator.Loading })] })), isDataGridReady && _jsx(TMDataGrid, { ref: dataGridRef, id: "tm-search-result", keyExpr: "rowIndex", dataColumns: dataColumns, dataSource: dataSource, repaintChangesOnly: true, selectedRowKeys: selectedRowKeys, focusedRowKey: disableAutoFocus ? undefined : Number(focusedItem?.rowIndex ?? 0), showSearchPanel: showSearchTMDatagrid, showFilterPanel: true, sorting: { mode: "multiple" }, selection: { mode: allowMultipleSelection ? 'multiple' : 'single' }, pageSize: pageSize, onSelectionChanged: handleSelectionChange, onFocusedRowChanged: handleFocusedRowChange, onRowDblClick: onRowDblClick, onContentReady: onContentReady, showHeaderColumnChooser: true, onKeyDown: onKeyDown, customContextMenuItems: operationItems, counterConfig: {
+    return _jsxs("div", { style: { width: "100%", height: "100%" }, children: [!isDataGridReady && (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '100%', width: '100%', gap: '10px' }, children: [_jsx(LoadIndicator, { height: 60, width: 60 }), _jsx("div", { children: SDKUI_Localizator.Loading })] })), isDataGridReady && _jsx(TMDataGrid, { ref: dataGridRef, id: "tm-search-result", keyExpr: "rowIndex", dataColumns: dataColumns, dataSource: dataSource, customizeColumns: customizeColumns, repaintChangesOnly: true, selectedRowKeys: selectedRowKeys, focusedRowKey: disableAutoFocus ? undefined : Number(focusedItem?.rowIndex ?? 0), showSearchPanel: showSearchTMDatagrid, showFilterPanel: true, sorting: { mode: "multiple" }, selection: { mode: allowMultipleSelection ? 'multiple' : 'single' }, pageSize: pageSize, onSelectionChanged: handleSelectionChange, onFocusedRowChanged: handleFocusedRowChange, onRowDblClick: onRowDblClick, onContentReady: onContentReady, showHeaderColumnChooser: true, onKeyDown: onKeyDown, customContextMenuItems: operationItems, counterConfig: {
                     show: true,
                     items: dcmtsReturned !== undefined && dcmtsFound !== undefined
                         ? new Map([

package/lib/components/viewers/TMMidViewer.js

@@ -92,8 +92,11 @@ export const TMMetadataIcon = ({ tid, md, color, layoutMode = LayoutModes.Update
                 break;
         }
     }
+    // color='inherit' serve solo all'icona (eredita il colore dell'editor): il tooltip è renderizzato in overlay,
+    // dove 'inherit' non risolverebbe al colore dell'editor, quindi lì manteniamo la palette normale
+    let tooltipColor = color === 'inherit' ? undefined : color;
     return (_jsx(_Fragment, { children: icon
-            ? _jsx(TMMetadataTooltip, { tid: tid, md: md, layoutMode: layoutMode, color: color, children: icon })
+            ? _jsx(TMMetadataTooltip, { tid: tid, md: md, layoutMode: layoutMode, color: tooltipColor, children: icon })
             : null }));
 };
 export const TMMetadataTooltip = ({ tid, md, color, children, layoutMode = LayoutModes.Update }) => {

package/lib/components/viewers/TMTidViewer.js

@@ -259,7 +259,7 @@ export const TMDcmtTypeIcon = ({ dtd }) => {
     return (_jsx(TMDcmtTypeTooltip, { dtd: dtd, children: icon }));
 };
 export const TMDcmtTypeTooltip = ({ dtd, children }) => {
-    return (_jsx("div", { style: { pointerEvents: 'all' }, children: _jsx(TMTooltip, { content: renderDTDTooltipContent(dtd), children: children }) }));
+    return (_jsx("div", { style: { pointerEvents: 'all' }, children: _jsx(TMTooltip, { allowContentInteraction: true, content: renderDTDTooltipContent(dtd), children: children }) }));
 };
 const TMTidViewer = ({ tmSession, tid, did, showIcon = false, color, showId = false, noneSelectionText = `<${SDKUI_Localizator.NoneSelection}>` }) => {
     const [dtd, setDtd] = useState();
@@ -297,29 +297,43 @@ const TMTidViewer = ({ tmSession, tid, did, showIcon = false, color, showId = fa
             textOverflow: 'ellipsis'
         }, children: [showIcon && dtd && _jsx(TMDcmtTypeIcon, { dtd: dtd }), _jsx("p", { title: displayName(), style: {
                     textAlign: 'left',
+                    margin: 0,
                     marginLeft: showIcon ? '5px' : '',
-                    color: color ?? (dtd?.isView ? 'red' : TMColors.primary),
+                    color: dtd?.isView ? 'red' : (color ?? TMColors.primary),
                     whiteSpace: 'nowrap',
                     overflow: 'hidden',
                     textOverflow: 'ellipsis',
                     // paddingRight: '10px'
-                }, children: displayName() }), showId && _jsx("p", { style: { padding: '0px 3px' }, children: `(TID: ${tid})` })] }));
+                }, children: displayName() }), showId && _jsx("p", { style: { padding: '0px 3px', margin: 0 }, children: `(TID: ${tid})` })] }));
 };
 export default TMTidViewer;
 export const cellRenderTID = (data, noneSelectionText) => {
     return (_jsx(TMTidViewer, { tid: data.value, noneSelectionText: noneSelectionText }));
 };
-/** Componente per mostrare il metodo di visualizzazione del nome documento (carica i metadati dalla cache se necessario) */
+/** Metodi di visualizzazione già richiesti, per non ricaricare i metadati ad ogni riapertura del tooltip */
+const displayNameMethodCache = new Map();
 const TMDisplayNameMethodItem = ({ dtd }) => {
-    const [displayNameMethod, setDisplayNameMethod] = useState('...');
-    useEffect(() => {
-        const fetchDisplayNameMethod = async () => {
+    const [displayNameMethod, setDisplayNameMethod] = useState(() => dtd.id ? displayNameMethodCache.get(dtd.id) : undefined);
+    const [isLoading, setIsLoading] = useState(false);
+    const onShowClick = async (e) => {
+        /* Un click qualsiasi chiude il tooltip: senza questo il risultato non sarebbe mai visibile */
+        e.stopPropagation();
+        if (isLoading || displayNameMethod)
+            return;
+        setIsLoading(true);
+        try {
             const method = await getDTDDisplayNameInfo(dtd);
+            if (dtd.id)
+                displayNameMethodCache.set(dtd.id, method);
             setDisplayNameMethod(method);
-        };
-        fetchDisplayNameMethod();
-    }, [dtd]);
-    return _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.DisplayNameMethod}: ${displayNameMethod}` });
+        }
+        finally {
+            setIsLoading(false);
+        }
+    };
+    return (_jsxs(StyledTooltipItem, { children: [`${SDKUI_Localizator.DisplayNameMethod}: `, displayNameMethod ?? (isLoading
+                ? `${SDKUI_Localizator.Loading} ...`
+                : _jsx("span", { style: { color: TMColors.primary, cursor: 'pointer', textDecoration: 'underline' }, onClick: onShowClick, children: SDKUI_Localizator.Details }))] }));
 };
 export const renderDTDTooltipContent = (dtd) => {
     const mapAccessLevelToLocalizedString = (level) => {

package/lib/helper/SDKUI_Globals.d.ts

@@ -67,6 +67,18 @@ export declare class ThemeSettings {
 export declare const DEFAULT_PREVIEW_THRESHOLD = 500;
 export declare const DEFAULT_PAGE_SIZE = 100;
 export declare const DEFAULT_MAX_DCMTS_TO_BE_RETURNED = 200;
+export declare const DEFAULT_QUICK_SEARCH_MAX_DCMTS = 1000;
+/** Ricerca rapida configurata come sorgente alternativa dei valori distinti di un campo */
+export declare class DistinctValuesQuickSearchSettings {
+    /** Tipo documento su cui viene eseguita la ricerca rapida */
+    tid: number | undefined;
+    /** ID della ricerca salvata (SavedQueryDescriptor) da eseguire; SYS_ALL_DCMTS_SQD_ID per la ricerca di sistema con tutti i documenti del tipo documento */
+    sqdId: number | undefined;
+    /** Metadato del risultato da cui viene prelevato il valore */
+    mid: number | undefined;
+    /** Numero massimo di documenti restituiti dalla ricerca rapida */
+    maxDcmtsToBeReturned: number;
+}
 export declare class SearchSettings {
     autoFindReferences: ObjectClasses[];
     invoiceRetrieveFormat: InvoiceRetrieveFormats;
@@ -86,7 +98,15 @@ export declare class SearchSettings {
     };
     relationExpandLevel: number;
     relationShowZeroDcmts: boolean;
+    /** Ricerche rapide configurate per i valori distinti: una per ogni campo, con chiave "tid_mid" */
+    distinctValuesQuickSearches: {
+        [fieldKey: string]: DistinctValuesQuickSearchSettings;
+    };
 }
+/** Ricerca rapida configurata per il campo, se presente */
+export declare const getDistinctValuesQuickSearch: (tid: number | undefined, mid: number | undefined) => DistinctValuesQuickSearchSettings | undefined;
+export declare const saveDistinctValuesQuickSearch: (tid: number | undefined, mid: number | undefined, settings: DistinctValuesQuickSearchSettings) => void;
+export declare const removeDistinctValuesQuickSearch: (tid: number | undefined, mid: number | undefined) => void;
 export declare class FloatingMenuBarSettings {
     orientation?: 'horizontal' | 'vertical';
     itemIds?: string[];

package/lib/helper/SDKUI_Globals.js

@@ -130,6 +130,20 @@ export class ThemeSettings {
 export const DEFAULT_PREVIEW_THRESHOLD = 500; // KB
 export const DEFAULT_PAGE_SIZE = 100;
 export const DEFAULT_MAX_DCMTS_TO_BE_RETURNED = 200;
+export const DEFAULT_QUICK_SEARCH_MAX_DCMTS = 1000;
+/** Ricerca rapida configurata come sorgente alternativa dei valori distinti di un campo */
+export class DistinctValuesQuickSearchSettings {
+    constructor() {
+        /** Tipo documento su cui viene eseguita la ricerca rapida */
+        this.tid = undefined;
+        /** ID della ricerca salvata (SavedQueryDescriptor) da eseguire; SYS_ALL_DCMTS_SQD_ID per la ricerca di sistema con tutti i documenti del tipo documento */
+        this.sqdId = undefined;
+        /** Metadato del risultato da cui viene prelevato il valore */
+        this.mid = undefined;
+        /** Numero massimo di documenti restituiti dalla ricerca rapida */
+        this.maxDcmtsToBeReturned = DEFAULT_QUICK_SEARCH_MAX_DCMTS;
+    }
+}
 export class SearchSettings {
     constructor() {
         this.autoFindReferences = [];
@@ -144,8 +158,38 @@ export class SearchSettings {
         this.panelLayout = {};
         this.relationExpandLevel = 4; // Livello di espansione predefinito per le correlazioni
         this.relationShowZeroDcmts = false;
+        /** Ricerche rapide configurate per i valori distinti: una per ogni campo, con chiave "tid_mid" */
+        this.distinctValuesQuickSearches = {};
     }
 }
+/** Il campo da cui viene aperto il pannello dei valori distinti è identificato dalla coppia (tid, mid) */
+const distinctValuesFieldKey = (tid, mid) => `${tid}_${mid}`;
+/** Ricerca rapida configurata per il campo, se presente */
+export const getDistinctValuesQuickSearch = (tid, mid) => {
+    if (!tid || !mid)
+        return undefined;
+    // Le impostazioni salvate da versioni precedenti non hanno la mappa: va gestita l'assenza
+    return SDKUI_Globals.userSettings.searchSettings.distinctValuesQuickSearches?.[distinctValuesFieldKey(tid, mid)];
+};
+export const saveDistinctValuesQuickSearch = (tid, mid, settings) => {
+    if (!tid || !mid)
+        return;
+    // Il proxy delle impostazioni persiste solo intercettando l'assegnazione di una proprietà: la mappa va riassegnata per intero
+    SDKUI_Globals.userSettings.searchSettings.distinctValuesQuickSearches = {
+        ...SDKUI_Globals.userSettings.searchSettings.distinctValuesQuickSearches,
+        [distinctValuesFieldKey(tid, mid)]: settings,
+    };
+};
+export const removeDistinctValuesQuickSearch = (tid, mid) => {
+    if (!tid || !mid)
+        return;
+    const fieldKey = distinctValuesFieldKey(tid, mid);
+    const quickSearches = SDKUI_Globals.userSettings.searchSettings.distinctValuesQuickSearches;
+    if (!quickSearches?.[fieldKey])
+        return;
+    const { [fieldKey]: removedSettings, ...remainingQuickSearches } = quickSearches;
+    SDKUI_Globals.userSettings.searchSettings.distinctValuesQuickSearches = remainingQuickSearches;
+};
 export class FloatingMenuBarSettings {
 }
 export class ArchivingSettings {

package/lib/helper/SDKUI_Localizator.d.ts

@@ -657,6 +657,7 @@ export declare class SDKUI_Localizator {
     static get QueryDefine(): "Abfrage definieren" | "Query define" | "Definir consulta" | "Défine query" | "Definir query" | "Definisci query";
     static get Query_EnterAlias(): "Geben Sie einen Alias ​​ein" | "Enter an alias" | "Introducir un alias" | "Entrez un alias" | "Digite um nome de alias" | "Inserire un alias";
     static get QueryParamBind(): "Query-Parameter erweitern" | "Fill query parameters" | "Valorizar parámetros consulta" | "Ajoute la valeur à les paramètres de la query" | "Melhora parâmetros de query" | "Valorizza parametri query";
+    static get QuickSearchSettings_DeleteConfirmFor1(): "Schnellsuche-Konfiguration für '{{0}}' löschen?" | "Delete the quick search setup for '{{0}}'?" | "¿Eliminar la configuración de la búsqueda rápida de '{{0}}'?" | "Supprimer la configuration de la recherche rapide de '{{0}}' ?" | "Eliminar a configuração da pesquisa rápida de '{{0}}'?" | "Eliminare la configurazione della ricerca rapida di '{{0}}'?";
     static get ReadOnly(): "Nur Lesen" | "Read only" | "Solo lectura" | "En lecture seule" | "Somente leitura" | "Solo lettura";
     static get Reassign(): "Neu zuweisen" | "Reassign" | "Reasignar" | "Réaffecter" | "Reatribuir" | "Riassegna";
     static get RefersTo(): string;

package/lib/helper/SDKUI_Localizator.js

@@ -6542,6 +6542,16 @@ export class SDKUI_Localizator {
             default: return "Valorizza parametri query";
         }
     }
+    static get QuickSearchSettings_DeleteConfirmFor1() {
+        switch (this._cultureID) {
+            case CultureIDs.De_DE: return "Schnellsuche-Konfiguration für '{{0}}' löschen?";
+            case CultureIDs.En_US: return "Delete the quick search setup for '{{0}}'?";
+            case CultureIDs.Es_ES: return "¿Eliminar la configuración de la búsqueda rápida de '{{0}}'?";
+            case CultureIDs.Fr_FR: return "Supprimer la configuration de la recherche rapide de '{{0}}' ?";
+            case CultureIDs.Pt_PT: return "Eliminar a configuração da pesquisa rápida de '{{0}}'?";
+            default: return "Eliminare la configurazione della ricerca rapida di '{{0}}'?";
+        }
+    }
     static get ReadOnly() {
         switch (this._cultureID) {
             case CultureIDs.De_DE: return "Nur Lesen";

package/lib/helper/dataGridSearchHelper.d.ts

@@ -0,0 +1,28 @@
+import { MetadataFormats } from '@topconsultnpm/sdk-ts';
+/** Testo mostrato in una colonna per una riga: è quello su cui va cercato ciò che l'utente digita */
+export type SearchTextGetter = (rowData: any) => string;
+/** Testo con cui una data viene mostrata nella griglia: è quello che l'utente vede e quindi quello che cerca */
+export declare const getDateDisplayText: (value: any, format: MetadataFormats | undefined, formatCulture: string | undefined | null) => string;
+/** Testo con cui un numero viene mostrato nella griglia (separatore delle migliaia, valuta, decimali) */
+export declare const getNumberDisplayText: (value: any, format: MetadataFormats | undefined, formatCulture: string) => string;
+/**
+ * Dirotta la ricerca della griglia sul testo mostrato, per le colonne indicate (chiave: il `dataField`).
+ *
+ * La ricerca di DevExtreme lavora sul valore archiviato, quindi non trova nulla dove il testo mostrato è
+ * diverso:
+ * - **date**, che nei dati sono stringhe ISO: DevExtreme prova a interpretare il testo digitato con il
+ *   formato della colonna, non riesce (il formato è un formatter personalizzato, non un pattern) e scarta
+ *   la colonna dalla ricerca — cercando `29/01/2023` non trova nulla;
+ * - **numeri formattati**, per lo stesso motivo (separatore delle migliaia, simbolo di valuta);
+ * - **liste dati e utenti**, dove viene confrontata la chiave archiviata invece della descrizione
+ *   visualizzata — cercando `FATTURA` non trova nulla, cercando `TD01` sì.
+ *
+ * Da passare a `customizeColumns` della griglia. Va fatto lì perché solo lì è disponibile la
+ * `calculateFilterExpression` predefinita di DevExtreme, che resta in uso per il filtro di intestazione e
+ * per il generatore di filtri: quelli funzionano già correttamente e vanno lasciati intatti.
+ *
+ * @example
+ * const searchTextGetters = useMemo(() => new Map([['TM_1_2', (row) => getDateDisplayText(row?.TM_1_2, format, culture)]]), [...]);
+ * const customizeColumns = useMemo(() => customizeSearchByDisplayText(searchTextGetters), [searchTextGetters]);
+ */
+export declare const customizeSearchByDisplayText: (searchTextGetters: Map<string, SearchTextGetter>) => (columns: Array<any>) => void;

package/lib/helper/dataGridSearchHelper.js

@@ -0,0 +1,51 @@
+import { formatDateTimeByMetadataFormat, formatNumberByMetadataFormat } from './TMUtils';
+/** Testo con cui una data viene mostrata nella griglia: è quello che l'utente vede e quindi quello che cerca */
+export const getDateDisplayText = (value, format, formatCulture) => {
+    if (value === undefined || value === null || value === '')
+        return '';
+    const date = value instanceof Date ? value : new Date(value);
+    return Number.isNaN(date.getTime()) ? '' : formatDateTimeByMetadataFormat(date, format, formatCulture);
+};
+/** Testo con cui un numero viene mostrato nella griglia (separatore delle migliaia, valuta, decimali) */
+export const getNumberDisplayText = (value, format, formatCulture) => {
+    if (value === undefined || value === null || value === '')
+        return '';
+    return formatNumberByMetadataFormat(value, format, formatCulture);
+};
+/**
+ * Dirotta la ricerca della griglia sul testo mostrato, per le colonne indicate (chiave: il `dataField`).
+ *
+ * La ricerca di DevExtreme lavora sul valore archiviato, quindi non trova nulla dove il testo mostrato è
+ * diverso:
+ * - **date**, che nei dati sono stringhe ISO: DevExtreme prova a interpretare il testo digitato con il
+ *   formato della colonna, non riesce (il formato è un formatter personalizzato, non un pattern) e scarta
+ *   la colonna dalla ricerca — cercando `29/01/2023` non trova nulla;
+ * - **numeri formattati**, per lo stesso motivo (separatore delle migliaia, simbolo di valuta);
+ * - **liste dati e utenti**, dove viene confrontata la chiave archiviata invece della descrizione
+ *   visualizzata — cercando `FATTURA` non trova nulla, cercando `TD01` sì.
+ *
+ * Da passare a `customizeColumns` della griglia. Va fatto lì perché solo lì è disponibile la
+ * `calculateFilterExpression` predefinita di DevExtreme, che resta in uso per il filtro di intestazione e
+ * per il generatore di filtri: quelli funzionano già correttamente e vanno lasciati intatti.
+ *
+ * @example
+ * const searchTextGetters = useMemo(() => new Map([['TM_1_2', (row) => getDateDisplayText(row?.TM_1_2, format, culture)]]), [...]);
+ * const customizeColumns = useMemo(() => customizeSearchByDisplayText(searchTextGetters), [searchTextGetters]);
+ */
+export const customizeSearchByDisplayText = (searchTextGetters) => (columns) => {
+    columns.forEach((column) => {
+        const getSearchText = column?.dataField ? searchTextGetters.get(column.dataField) : undefined;
+        // customizeColumns viene richiamata a ogni aggiornamento delle colonne: senza il marcatore i wrapper si anniderebbero
+        if (!getSearchText || column.tmSearchByDisplayText)
+            return;
+        const defaultCalculateFilterExpression = column.calculateFilterExpression;
+        // Senza questo DevExtreme prova a convertire il testo digitato nel tipo della colonna e, non riuscendo, la scarta
+        column.parseValue = (text) => text;
+        column.calculateFilterExpression = function (filterValue, selectedFilterOperation, target) {
+            if (target === 'search')
+                return [getSearchText, 'contains', filterValue];
+            return defaultCalculateFilterExpression?.apply(this, arguments);
+        };
+        column.tmSearchByDisplayText = true;
+    });
+};

package/lib/helper/index.d.ts

@@ -5,6 +5,7 @@ export * from './Globalization';
 export * from './TMIcons';
 export * from './TMImageLibrary';
 export * from './helpers';
+export * from './dataGridSearchHelper';
 export * from './queryHelper';
 export * from './TMUtils';
 export * from './TMCommandsContextMenu';

package/lib/helper/index.js

@@ -5,6 +5,7 @@ export * from './Globalization';
 export * from './TMIcons';
 export * from './TMImageLibrary';
 export * from './helpers';
+export * from './dataGridSearchHelper';
 export * from './queryHelper';
 export * from './TMUtils';
 export * from './TMCommandsContextMenu';

package/lib/helper/queryHelper.d.ts

@@ -14,6 +14,8 @@ export declare function addWhereClausesForConnect(qd: QueryDescriptor): void;
 export declare function getDefaultOperator(dataDomain: MetadataDataDomains | undefined, dataType: MetadataDataTypes | undefined): QueryOperators.Equal | QueryOperators.Contain | QueryOperators.In;
 export declare const getQD: (tid: number | undefined, easyOr: boolean, newMaxDcmtsToBeReturned: number) => Promise<QueryDescriptor | undefined>;
 export declare const getWorkItemSetIDAsync: (vid: number, did: number) => Promise<string | undefined>;
+/** Id assegnato alla ricerca di sistema con tutti i documenti: non è in cache, va ricostruita a runtime con getSysAllDcmtsSQD */
+export declare const SYS_ALL_DCMTS_SQD_ID = 1;
 export declare const getSysAllDcmtsSQD: (tid: number | undefined, easyOr: boolean) => Promise<SavedQueryDescriptor>;
 export declare const searchResultToMetadataValues: (tid: number | undefined, dtd: DataTableDescriptor | undefined, rows: string[], mids: number[], metadata: MetadataDescriptor[], layoutMode: LayoutModes, isReadOnlyOrigin?: boolean) => MetadataValueDescriptorEx[];
 export declare const handleArchiveVisibility: (md: MetadataDescriptor) => boolean;