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

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;

package/lib/components/choosers/TMQuickSearchSettingsForm.js

@@ -0,0 +1,94 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from 'react';
+import { ResultTypes, SavedQueryCacheService, SDK_Localizator, ValidationItem } from '@topconsultnpm/sdk-ts';
+import styled from 'styled-components';
+import { calcIsModified, calcResponsiveSizes, DEFAULT_QUICK_SEARCH_MAX_DCMTS, IconClear, IconDelete, IconMetadata, SDKUI_Localizator, SYS_ALL_DCMTS_SQD_ID } from '../../helper';
+import { FormModes } from '../../ts';
+import ShowAlert from '../base/TMAlert';
+import TMButton from '../base/TMButton';
+import { useDeviceType } from '../base/TMDeviceProvider';
+import { TMExceptionBoxManager } from '../base/TMPopUp';
+import TMSpinner from '../base/TMSpinner';
+import TMDropDown from '../editors/TMDropDown';
+import TMTextBox from '../editors/TMTextBox';
+import TMSaveForm from '../forms/TMSaveForm';
+import TMDcmtTypeChooser from './TMDcmtTypeChooser';
+import TMMetadataChooser from './TMMetadataChooser';
+import { useTMQuickSearchInfo } from './TMQuickSearchInfo';
+const StyledFormContent = styled.div `display: flex; flex-direction: column; gap: 12px; padding: 10px 15px;`;
+/** Impostazione vuota da cui parte la configurazione: solo il numero massimo di documenti ha un valore predefinito */
+export const newQuickSearchSettings = () => ({
+    tid: undefined,
+    sqdId: undefined,
+    mid: undefined,
+    maxDcmtsToBeReturned: DEFAULT_QUICK_SEARCH_MAX_DCMTS,
+});
+const TMQuickSearchSettingsForm = ({ settings, onSave, onDelete, onClose }) => {
+    const initialSettings = useMemo(() => settings ?? newQuickSearchSettings(), [settings]);
+    const deviceType = useDeviceType();
+    const [formData, setFormData] = useState(initialSettings);
+    // Finché è undefined la cache delle ricerche rapide non è ancora stata caricata
+    const [allSQDs, setAllSQDs] = useState();
+    // Icona informativa della ricerca rapida scelta: sta fra i pulsanti del suo editor, il dettaglio si apre a parte
+    const { infoButton, detailForm } = useTMQuickSearchInfo({ tid: formData.tid, sqdId: formData.sqdId });
+    useEffect(() => { loadSQDsAsync(); }, []);
+    // L'avviso ha senso solo a cache caricata: prima le ricerche rapide risulterebbero assenti per tutti i tipi documento
+    useEffect(() => {
+        if (!formData.tid || !allSQDs)
+            return;
+        if (allSQDs.some(o => o.masterTID === formData.tid))
+            return;
+        ShowAlert({ mode: 'warning', title: SDK_Localizator.SavedQuery, message: 'Non ci sono ricerche rapide per il tipo documento selezionato', duration: 4000 });
+    }, [formData.tid, allSQDs]);
+    const loadSQDsAsync = async () => {
+        try {
+            TMSpinner.show({ description: `${SDKUI_Localizator.Loading} - ${SDK_Localizator.SavedQuery} ...` });
+            setAllSQDs(await SavedQueryCacheService.GetAllAsync() ?? []);
+        }
+        catch (e) {
+            TMExceptionBoxManager.show({ exception: e });
+        }
+        finally {
+            TMSpinner.hide();
+        }
+    };
+    // Stessa logica di TMSearch: in testa all'elenco c'è la ricerca di sistema con tutti i documenti del tipo documento
+    const sqdsDataSource = useMemo(() => {
+        if (!formData.tid)
+            return [];
+        return [
+            { value: SYS_ALL_DCMTS_SQD_ID, display: SDKUI_Localizator.AllDcmts },
+            ...(allSQDs ?? []).filter(o => o.masterTID === formData.tid).map(o => ({ value: o.id, display: o.name ?? `ID ${o.id}` })),
+        ];
+    }, [allSQDs, formData.tid]);
+    const validationItems = useMemo(() => {
+        const vil = [];
+        if (!formData.tid)
+            vil.push(new ValidationItem(ResultTypes.ERROR, SDKUI_Localizator.DcmtType, SDKUI_Localizator.RequiredField));
+        if (!formData.sqdId)
+            vil.push(new ValidationItem(ResultTypes.ERROR, SDK_Localizator.SavedQuery, SDKUI_Localizator.RequiredField));
+        if (!formData.mid)
+            vil.push(new ValidationItem(ResultTypes.ERROR, SDK_Localizator.Metadata, SDKUI_Localizator.RequiredField));
+        if (!formData.maxDcmtsToBeReturned || formData.maxDcmtsToBeReturned <= 0)
+            vil.push(new ValidationItem(ResultTypes.ERROR, SDKUI_Localizator.MaxDcmtsToBeReturned, SDKUI_Localizator.RequiredField));
+        return vil;
+    }, [formData]);
+    // Ogni editor mostra solo gli errori del proprio campo
+    const validationItemsOf = (propertyName) => validationItems.filter(o => o.PropertyName === propertyName);
+    const patchFormData = (changes) => setFormData(prev => ({ ...prev, ...changes }));
+    /** Cambiare tipo documento rende privi di senso la ricerca rapida e il metadato scelti prima */
+    const onTidChanged = (tids) => {
+        const tid = tids?.[0];
+        if (tid === formData.tid)
+            return;
+        patchFormData({ tid, sqdId: undefined, mid: undefined });
+    };
+    const onSaveAsync = async () => { onSave?.(formData); };
+    /* Ricomincia da capo la configurazione: cambiare tipo documento azzera già ricerca rapida e metadato, ma non
+       permette di tornare alla scelta vuota, da cui l'elenco delle ricerche rapide riparte senza filtri */
+    const isFormDataEmpty = !formData.tid && !formData.sqdId && !formData.mid && formData.maxDcmtsToBeReturned === DEFAULT_QUICK_SEARCH_MAX_DCMTS;
+    const onClearClick = () => setFormData(newQuickSearchSettings());
+    return (_jsx(TMSaveForm, { title: `${SDKUI_Localizator.DistinctValues} - ${SDK_Localizator.SavedQuery}`, showTitleFormMode: false, formMode: FormModes.Update, isModal: true, width: calcResponsiveSizes(deviceType, '600px', '90%', '95%'), height: calcResponsiveSizes(deviceType, '500px', '90%', '95%'), showBackButton: false, hasNavigation: false, skipIsModifiedCheck: true, validationItems: validationItems, isModified: calcIsModified(formData, initialSettings), customToolbarElements: _jsxs(_Fragment, { children: [_jsx(TMButton, { btnStyle: 'toolbar', caption: SDKUI_Localizator.Clear, icon: _jsx(IconClear, {}), disabled: isFormDataEmpty, onClick: onClearClick }), onDelete && settings &&
+                    _jsx(TMButton, { btnStyle: 'toolbar', color: 'error', caption: SDKUI_Localizator.Delete, icon: _jsx(IconDelete, {}), onClick: onDelete })] }), onUndo: () => setFormData(initialSettings), onSaveAsync: onSaveAsync, onClose: onClose, children: _jsxs(StyledFormContent, { children: [_jsx(TMDcmtTypeChooser, { label: SDKUI_Localizator.DcmtType, placeHolder: SDKUI_Localizator.DcmtTypeSelect, accessFilter: 'canSearch', values: formData.tid ? [formData.tid] : [], isModifiedWhen: formData.tid !== initialSettings.tid, validationItems: validationItemsOf(SDKUI_Localizator.DcmtType), onValueChanged: onTidChanged }), _jsx(TMDropDown, { searchEnabled: true, usePortal: true, label: SDK_Localizator.SavedQuery, placeHolder: `<${SDKUI_Localizator.NoneSelection}>`, disabled: !formData.tid, value: formData.sqdId ?? '', dataSource: sqdsDataSource, buttons: infoButton ? [infoButton] : [], isModifiedWhen: formData.sqdId !== initialSettings.sqdId, validationItems: validationItemsOf(SDK_Localizator.SavedQuery), onValueChanged: (e) => patchFormData({ sqdId: Number(e.target.value) }) }), _jsx(TMMetadataChooser, { icon: _jsx(IconMetadata, {}), label: SDK_Localizator.Metadata, placeHolder: SDKUI_Localizator.SelectMetadata, disabled: !formData.tid || !formData.sqdId, allowSysMetadata: false, tids: formData.tid ? [formData.tid] : [], values: formData.mid ? [{ tid: formData.tid, mid: formData.mid }] : [], isModifiedWhen: formData.mid !== initialSettings.mid, validationItems: validationItemsOf(SDK_Localizator.Metadata), onValueChanged: (values) => patchFormData({ mid: values?.[0]?.mid }) }), _jsx(TMTextBox, { type: 'number', label: SDKUI_Localizator.MaxDcmtsToBeReturned, minValue: 1, value: formData.maxDcmtsToBeReturned, isModifiedWhen: formData.maxDcmtsToBeReturned !== initialSettings.maxDcmtsToBeReturned, validationItems: validationItemsOf(SDKUI_Localizator.MaxDcmtsToBeReturned), onValueChanged: (e) => patchFormData({ maxDcmtsToBeReturned: Number(e.target.value) || DEFAULT_QUICK_SEARCH_MAX_DCMTS }) }), detailForm] }) }));
+};
+export default TMQuickSearchSettingsForm;

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

@@ -0,0 +1,13 @@
+import React from 'react';
+/** Valore selezionato: value è quello che finisce nel campo del form, display quello mostrato all'utente */
+export type SelectedValueItem = {
+    value: string;
+    display: string;
+};
+interface ITMSelectedValuesSummary {
+    items: Array<SelectedValueItem>;
+    onRemove: (value: string) => void;
+    onClear: () => void;
+}
+declare const TMSelectedValuesSummary: React.FC<ITMSelectedValuesSummary>;
+export default TMSelectedValuesSummary;

package/lib/components/choosers/TMSelectedValuesSummary.js

@@ -0,0 +1,91 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from 'styled-components';
+import { IconCloseOutline, IconEraser, IconSelected, SDKUI_Localizator } from '../../helper';
+import TMButton from '../base/TMButton';
+import TMTooltip from '../base/TMTooltip';
+import { TMColors } from '../../utils/theme';
+/* Riepilogo dei valori selezionati: sta sopra la griglia perché è il contenuto che finirà nel campo del form.
+   Titolo, chip e pulsante di pulizia stanno su un'unica riga per rubare il minor spazio possibile alla griglia */
+const StyledSelectionSummary = styled.div `
+    display: flex;
+    flex-direction: row;
+    /* Titolo, chip e azioni centrati fra loro: con una sola riga di chip la barra non risulta schiacciata in alto */
+    align-items: center;
+    gap: 8px;
+    padding: 8px;
+    background-color: ${TMColors.primary_container};
+    border: 1px solid ${TMColors.primary};
+    border-radius: 6px;
+`;
+const StyledSelectionTitle = styled.div `
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    flex-shrink: 0;
+    gap: 4px;
+    min-height: 28px;
+    font-size: 0.8rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.3px;
+    white-space: nowrap;
+    color: ${TMColors.primary};
+
+    svg { flex-shrink: 0; }
+`;
+const StyledSelectionCounter = styled.span `
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 20px;
+    height: 20px;
+    padding: 0 5px;
+    border-radius: 10px;
+    background-color: ${TMColors.primary};
+    color: white;
+    font-size: 0.75rem;
+    font-weight: 600;
+`;
+/* max-height: due righe di chip (28px) più il gap: oltre si scorre invece di rubare spazio alla griglia */
+const StyledSelectionChips = styled.div `display: flex; flex: 1; flex-direction: row; flex-wrap: wrap; align-content: flex-start; gap: 4px; max-height: 60px; overflow-y: auto;`;
+const StyledChip = styled.div `
+    display: inline-flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 4px;
+    max-width: 320px;
+    height: 28px;
+    padding: 0 4px 0 10px;
+    border: 1px solid ${TMColors.primary};
+    border-radius: 14px;
+    background-color: ${TMColors.default_background};
+    color: ${TMColors.text_normal};
+    font-size: 0.875rem;
+`;
+const StyledChipLabel = styled.span `overflow: hidden; text-overflow: ellipsis; white-space: nowrap;`;
+const StyledChipRemove = styled.button `
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    width: 20px;
+    height: 20px;
+    padding: 0;
+    border: none;
+    border-radius: 50%;
+    background-color: transparent;
+    color: ${TMColors.button_icon};
+    cursor: pointer;
+
+    &:hover { background-color: ${TMColors.primary}; color: white; }
+`;
+/* Il pulsante di pulizia non deve scorrere con i chip né stringersi */
+const StyledSelectionActions = styled.div `display: flex; flex-shrink: 0; align-items: center; min-height: 28px;`;
+const TMSelectedValuesSummary = ({ items, onRemove, onClear }) => {
+    if (items.length <= 0)
+        return null;
+    return (_jsxs(StyledSelectionSummary, { children: [_jsxs(StyledSelectionTitle, { children: [_jsx(IconSelected, { fontSize: 17, color: TMColors.primary }), _jsx("span", { children: SDKUI_Localizator.Selected }), _jsx(StyledSelectionCounter, { children: items.length })] }), _jsx(StyledSelectionChips, { children: items.map((item) => 
+                /* Il valore lungo viene troncato nel chip: il tooltip è l'unico modo per leggerlo per intero */
+                _jsx(TMTooltip, { content: item.display, children: _jsxs(StyledChip, { children: [_jsx(StyledChipLabel, { children: item.display }), _jsx(StyledChipRemove, { type: 'button', title: SDKUI_Localizator.Remove, onClick: () => onRemove(item.value), children: _jsx(IconCloseOutline, { fontSize: 13 }) })] }) }, item.value)) }), _jsx(StyledSelectionActions, { children: _jsx(TMButton, { btnStyle: 'toolbar', caption: SDKUI_Localizator.Clear, icon: _jsx(IconEraser, {}), onClick: onClear }) })] }));
+};
+export default TMSelectedValuesSummary;

package/lib/components/editors/TMDropDown.d.ts

@@ -4,6 +4,9 @@ interface ITMDropDown extends ITMEditorBase {
     dataSource?: any[];
     value?: string | number | undefined;
     disabled?: boolean;
+    searchEnabled?: boolean;
+    usePortal?: boolean;
+    itemRender?: (item: any) => React.ReactNode;
     onValueChanged?: (e: React.ChangeEvent<HTMLSelectElement>) => void;
 }
 declare const TMDropDown: React.FC<ITMDropDown>;