@topconsultnpm/sdkui-react 6.22.0-t1 → 6.22.0-t3

package/lib/components/choosers/TMDistinctValues.js

@@ -1,154 +1,170 @@
-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 { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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, IconSelected, 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;
+    }
+`;
+const NO_SELECTED_ROW_KEYS = [];
+/* 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°' }
+    // 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;
+        const items = new Map([
+            [CounterItemKey.selectedItems, {
+                    key: CounterItemKey.selectedItems,
+                    show: true,
+                    caption: SDKUI_Localizator.SelectedItems,
+                    value: selection.selectedValues.length,
+                    icon: _jsx(IconSelected, {}),
+                    order: 1
+                }]
         ]);
-    }, [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;
-                }
+        // Senza il totale resta il conteggio predefinito della griglia: un rapporto con totale a zero sarebbe fuorviante
+        if (counts?.found) {
+            items.set(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
             });
-            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;
-    };
+        }
+        return { show: true, items: items };
+    }, [isQuickSearchGridVisible, quickSearch.counts, distinctValues.counts, selection.selectedValues]);
+    // Configurazione fissa: dal pannello si preleva un valore per volta, le caselle di selezione non servono
+    const gridSelection = useMemo(() => ({ showCheckBoxesMode: 'none' }), []);
+    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: gridSelection, selectedRowKeys: NO_SELECTED_ROW_KEYS, searchPanel: { highlightCaseSensitive: true, visible: true }, searchPanelFocusTrigger: 1, 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/TMDynDataListItemChooser.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from 'react';
 import { DataColumnTypes, SDK_Localizator, DataListCacheService, SDK_Globals, LayoutModes } from '@topconsultnpm/sdk-ts';
 import { IconDetails, IconSearch, generateUniqueColumnKeys, Globalization, SDKUI_Localizator, searchResultDescriptorToSimpleArray, IsParametricQuery, IconWarning } from '../../helper';

package/lib/components/choosers/TMImageIDChooser.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo, useState } from 'react';
 import { TMImageLibrary, IconSearch } from '../../helper';
 import { StyledDivHorizontal } from '../base/Styled';

package/lib/components/choosers/TMMetadataChooser.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useMemo, useState } from 'react';
 import { DcmtTypeDescriptor, DcmtTypeListCacheService, SDK_Globals, SDK_Localizator } from '@topconsultnpm/sdk-ts';
 import { TMMetadataIcon, TMMidViewer, getDisplayAlias } from '../viewers/TMMidViewer';
@@ -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) {
@@ -142,7 +142,7 @@ export const TMMetadataChooserForm = ({ tmSession, tids, qd, filterMetadata, qdS
     const groupCellRender = useCallback((data) => {
         let tid_alias = JSON.parse(data.value);
         let dtd = dcmtTypes?.find(o => o.id == tid_alias.tid);
-        return _jsxs(StyledDxGridGroupHeader, { "$backgroundColor": getColorIndex?.(tid_alias), children: [_jsx(TMDcmtTypeIcon, { dtd: dtd }), _jsx("p", { children: getDisplayAlias(SDK_Globals.useLocalizedName ? dtd?.nameLoc : dtd?.name, tid_alias.alias) }), data.summaryItems && data.summaryItems.length > 0 && _jsx(StyledBadge, { "$backgroundColor": TMColors.info, children: data.summaryItems[0].value })] });
+        return _jsxs(StyledDxGridGroupHeader, { $backgroundColor: getColorIndex?.(tid_alias), children: [_jsx(TMDcmtTypeIcon, { dtd: dtd }), _jsx("p", { children: getDisplayAlias(SDK_Globals.useLocalizedName ? dtd?.nameLoc : dtd?.name, tid_alias.alias) }), data.summaryItems && data.summaryItems.length > 0 && _jsx(StyledBadge, { $backgroundColor: TMColors.info, children: data.summaryItems[0].value })] });
     }, [dcmtTypes, getColorIndex]);
     const dataColumns = useMemo(() => {
         return [

package/lib/components/choosers/TMPathChooser.js

@@ -6,12 +6,11 @@ import { TMColors } from '../../utils/theme';
 import ShowAlert from '../base/TMAlert';
 import TMAreaManager from '../base/TMAreaManager';
 import TMButton from '../base/TMButton';
-import { TMLayoutItem } from '../base/TMLayout';
+import TMLayoutContainer, { TMLayoutItem } from '../base/TMLayout';
 import TMModal from '../base/TMModal';
 import { TMExceptionBoxManager } from '../base/TMPopUp';
-import { TMLayoutWaitingContainer } from '../base/TMWaitPanel';
+import TMWaitPanelManager from '../base/waitPanel/TMWaitPanelManager';
 import TMTextBox from '../editors/TMTextBox';
-let abortController = new AbortController();
 const TMPathChooser = (props) => {
     //const [path, setPath] = useState<string>(props.value)
     const [elementStyle, setElementStyle] = useState(props.elementStyle);
@@ -22,12 +21,6 @@ const TMPathChooser = (props) => {
     const [showAreaManager, setShowAreaManager] = useState(false);
     const [downloadLink, setDownloadLink] = useState(null);
     const [file, setFile] = useState(null);
-    const [showWaitPanel, setShowWaitPanel] = useState(false);
-    const [waitPanelTitle, setWaitPanelTitle] = useState('');
-    const [showSecondary, setShowSecondary] = useState(false);
-    const [waitPanelTextSecondary, setWaitPanelTextSecondary] = useState('');
-    const [waitPanelValueSecondary, setWaitPanelValueSecondary] = useState(0);
-    const [waitPanelMaxValueSecondary, setWaitPanelMaxValueSecondary] = useState(0);
     const formulaItems = ['{@JobName}', '{@JobStartDate}', '{@JobStartDate_DDMMYYYY}', '{@JobStartDateTime}', '{@ProcessRunID}', '{@ProcessName}', '{@ProcessStartDate}', '{@ProcessStartDateTime}'];
     //useEffect(() => { setPath(props.value) }, [props.value])
     useEffect(() => {
@@ -98,30 +91,23 @@ const TMPathChooser = (props) => {
         return buttons;
     };
     const onFileDownloadHandler = async () => {
+        // Un solo file: la barra del pannello segue i byte scaricati
+        const waitPanel = TMWaitPanelManager.show({
+            title: "Download",
+            cancelable: true,
+            showCounters: false,
+        });
         try {
             let av = AreaHelper.ExtractAreaInfo_2(props.value, true);
             let doc;
             let tms = props.tmSession ?? SDK_Globals.tmSession;
-            setShowWaitPanel(true);
-            setShowSecondary(true);
-            setWaitPanelTitle("Download");
-            abortController = new AbortController();
-            let firstBlock = true;
-            let maxFileSize = 0;
-            doc = await tms?.NewAreaEngine().RetrieveFileAsync(av.aid, av.subFolder, av.fileName, FileFormats.None, abortController.signal, (pd) => {
-                if (firstBlock) {
-                    maxFileSize = pd.ProgressBarMaximum ?? 0;
-                    setWaitPanelMaxValueSecondary(maxFileSize);
-                    firstBlock = false;
-                }
-                setWaitPanelValueSecondary(pd.ProgressBarValue);
-                setWaitPanelTextSecondary(`Downloading... ${Globalization.getNumberDisplayValue(pd.ProgressBarValue, true)} / ${Globalization.getNumberDisplayValue(maxFileSize, true)}`);
-                if (pd.ProgressBarValue === pd.ProgressBarMaximum) {
-                    setWaitPanelMaxValueSecondary(0);
-                    setWaitPanelValueSecondary(0);
-                    setWaitPanelTextSecondary('');
-                    firstBlock = true;
-                }
+            doc = await tms?.NewAreaEngine().RetrieveFileAsync(av.aid, av.subFolder, av.fileName, FileFormats.None, waitPanel.signal, (pd) => {
+                const total = pd.ProgressBarMaximum ?? 0;
+                waitPanel.update({
+                    value: pd.ProgressBarValue,
+                    max: total,
+                    subtitle: `Downloading... ${Globalization.getNumberDisplayValue(pd.ProgressBarValue, true)} / ${Globalization.getNumberDisplayValue(total, true)}`
+                });
             });
             setFile(doc);
         }
@@ -135,13 +121,10 @@ const TMPathChooser = (props) => {
             setFile(null);
         }
         finally {
-            setWaitPanelTextSecondary('');
-            setWaitPanelMaxValueSecondary(0);
-            setWaitPanelValueSecondary(0);
-            setShowWaitPanel(false);
+            waitPanel.close();
         }
     };
-    return (_jsxs(TMLayoutWaitingContainer, { direction: 'vertical', showWaitPanel: showWaitPanel, showWaitPanelSecondary: showSecondary, waitPanelTitle: waitPanelTitle, waitPanelTextSecondary: waitPanelTextSecondary, waitPanelValueSecondary: waitPanelValueSecondary, waitPanelMaxValueSecondary: waitPanelMaxValueSecondary, isCancelable: true, abortController: abortController, children: [_jsx(TMLayoutItem, { children: _jsx(TMTextBox, { buttons: renderButtons(), elementStyle: elementStyle, formulaItems: props.allowParametricPath ? formulaItems : [], isModifiedWhen: props.isModifiedWhen, label: props.label, value: props.value || '', onValueChanged: (e) => { /*setPath(e.target.value);*/ props.onValueChanged?.(e.target.value); }, validationItems: props.validationItems }) }), showAreaManager &&
+    return (_jsxs(TMLayoutContainer, { direction: 'vertical', children: [_jsx(TMLayoutItem, { children: _jsx(TMTextBox, { buttons: renderButtons(), elementStyle: elementStyle, formulaItems: props.allowParametricPath ? formulaItems : [], isModifiedWhen: props.isModifiedWhen, label: props.label, value: props.value || '', onValueChanged: (e) => { /*setPath(e.target.value);*/ props.onValueChanged?.(e.target.value); }, validationItems: props.validationItems }) }), showAreaManager &&
                 _jsxs(TMModal, { resizable: true, width: '80%', onClose: () => setShowAreaManager(false), children: [_jsx(TMAreaManager, { showOnlyFolders: props.allowBrowseFolder_Area && !props.allowBrowseFile_Area, initialPath: props.value, onFolderChanged: (folder) => setAreaFolderPath(folder), onFileChanged: (file) => setAreaFilePath(file), isPathChooser: true, areaChoose: areaChoose, width: '98%', height: props.allowBrowseFile_Area ? '70vh' : '90%', tmSession: props.tmSession, selectionMode: 'single' }), _jsx("div", { style: { position: 'absolute', right: '22px', bottom: '8px' }, children: _jsx(TMButton, { caption: 'OK', onClick: () => areaChoose() }) })] })] }));
 };
 export default TMPathChooser;

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

@@ -0,0 +1,13 @@
+import React from 'react';
+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: React.JSX.Element | null;
+};
+export {};