@topconsultnpm/sdkui-react 6.17.0-test10

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

@@ -0,0 +1,367 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { LayoutModes, DcmtTypeListCacheService, PlatformObjectValidator, MetadataDataTypes, QueryOperators, DataListCacheService, MetadataDataDomains, SDK_Localizator, UserListCacheService } from '@topconsultnpm/sdk-ts';
+import styled from 'styled-components';
+import { LocalizeQueryOperators, getDefaultOperator, SDKUI_Localizator, IconUndo, IconPencil, IconDataList, IconFunction, IconMenuVertical, IconClearButton, displayMetadataValue, SDKUI_Globals } from '../../../helper';
+import { TMColors } from '../../../utils/theme';
+import { StyledDivHorizontal } from '../../base/Styled';
+import TMButton from '../../base/TMButton';
+import { useDeviceType, DeviceType } from '../../base/TMDeviceProvider';
+import TMDropDownMenu from '../../base/TMDropDownMenu';
+import TMSpinner from '../../base/TMSpinner';
+import { FormulaHelper } from '../../editors/TMFormulaEditor';
+import TMMetadataEditor, { useMetadataEditableList } from '../../editors/TMMetadataEditor';
+import { colorOperator, StyledItemWrapper, StyledRowItem } from '../../query/TMQueryEditor';
+import { TMMidViewer } from '../../viewers/TMMidViewer';
+import { AdvancedMenuButtons } from '../../editors/TMMetadataValues';
+import { useResizeObserver } from '../../../hooks/useResizeObserver';
+const StyledMetadataListItem = styled.div `
+    padding: 5px;
+    border-radius: 8px;
+    height: max-content;
+    width: 100%;
+    /* box-shadow: 1px 1px 7px rgba(0,0,0,0.15); */
+    /* font-size: ${(props) => props.$isSelected ? '1.2rem' : '1rem'}; */
+    background: ${(props) => props.$isSelected ? props.$selectedColor : props.$backgroundColor};
+
+    &:hover {
+        background: ${(props) => props.$isSelected ? props.$selectedColor : props.$hoverColor};
+        cursor: pointer;
+    }
+`;
+const TMSearchQueryEditor = ({ qd, dcmtTypesList = [], isExpertMode = SDKUI_Globals.userSettings.advancedSettings.expertMode === 1, showAllMdWhere, onQdChanged, onFocusedMetadataChanged, onAdvancedMenuClick }) => {
+    const [dynDataListsToBeRefreshed, setDynDataListsToBeRefreshed] = useState([]);
+    const [currentEditingMID, setCurrentEditingMID] = useState(0);
+    const [isEditableList, addOrRemoveEditableList] = useMetadataEditableList();
+    const [focusedTidMid, setFocusedTidMid] = useState();
+    const deviceType = useDeviceType();
+    let initialMaxItems = deviceType === DeviceType.MOBILE ? 8 : 12;
+    const [isCompactView, setIsCompactView] = useState(deviceType === DeviceType.MOBILE);
+    const { ref, width } = useResizeObserver();
+    useEffect(() => {
+        if (deviceType === DeviceType.MOBILE)
+            return;
+        if (width === 0)
+            return;
+        setIsCompactView(width < 340);
+    }, [width]);
+    useEffect(() => {
+        onFocusedMetadataChanged?.(focusedTidMid);
+    }, [focusedTidMid]);
+    // --- Callbacks Memoizzate ---
+    const handleWhereItemChanged = useCallback((wi) => {
+        if (!wi || !qd?.where)
+            return;
+        const whereCopy = qd.where.map((curItem) => (curItem.mid !== wi.mid ? curItem : wi));
+        onQdChanged?.({ ...qd, where: whereCopy });
+    }, [qd, onQdChanged]);
+    const handleItemSelect = useCallback((tid, mid) => {
+        if (currentEditingMID !== mid)
+            setCurrentEditingMID(mid);
+        if (!focusedTidMid || mid !== focusedTidMid.mid) {
+            setFocusedTidMid({ tid: tid, mid: mid });
+        }
+    }, [currentEditingMID, focusedTidMid]);
+    const handleAdvancedMenuClick = useCallback((e) => {
+        if (e.button === AdvancedMenuButtons.MakeEditable && e.mid) {
+            addOrRemoveEditableList(e.mid);
+        }
+        // Propaga l'evento al genitore
+        onAdvancedMenuClick?.(e);
+    }, [addOrRemoveEditableList, onAdvancedMenuClick]);
+    const handleCascadeRefresh = useCallback((ddlToBeRefreshed) => {
+        setDynDataListsToBeRefreshed(prevList => {
+            const newList = prevList.filter(item => !ddlToBeRefreshed.some(o => o.mid === item.mid || (o.mid === -1 && o.midStarter === item.midStarter)));
+            const itemsToAdd = ddlToBeRefreshed.filter(item => item.queryParams.length > 0 && item.mid && item.mid > 0);
+            return [...newList, ...itemsToAdd];
+        });
+    }, []);
+    const handleCascadeUpdate = useCallback((midsToBeUpdated) => {
+        if (!qd?.where)
+            return;
+        let changed = false;
+        const whereCopy = qd.where.map(wi => {
+            const updateInfo = midsToBeUpdated.find(item => item.mid === wi.mid);
+            if (updateInfo) {
+                changed = true;
+                return { ...wi, value1: updateInfo.value };
+            }
+            return wi;
+        });
+        if (changed) {
+            onQdChanged?.({ ...qd, where: whereCopy });
+        }
+    }, [qd, onQdChanged]);
+    const itemsToRender = qd?.where?.slice(0, showAllMdWhere ? qd.where.length : initialMaxItems) ?? [];
+    return (_jsx("div", { ref: ref, style: { width: '100%', minWidth: '100%', height: '100%', overflow: 'auto', display: 'flex', flexDirection: 'column' }, children: isCompactView ?
+            _jsx("div", { style: { overflow: 'auto', display: 'flex', flexDirection: 'column', height: '100%', padding: '5px', gap: '5px' }, children: itemsToRender.map((wi, index) => (_jsx(WhereItemRow, { whereItem: wi, index: index, dcmtTypesList: dcmtTypesList, isExpertMode: isExpertMode, isSelected: false, isEditable: isEditableList(wi.mid), currentEditingMID: currentEditingMID, queryParamsDynDataList: dynDataListsToBeRefreshed.find(o => o.mid === wi.mid)?.queryParams ?? [], onItemChange: handleWhereItemChanged, onItemSelect: handleItemSelect, onAdvancedMenuClick: handleAdvancedMenuClick, onCascadeRefreshDynDataLists: handleCascadeRefresh, onCascadeUpdateMIDs: handleCascadeUpdate, onHideMobileEditor: () => setCurrentEditingMID(0), isCompactView: true }, `${wi.tid}_${wi.mid}_${index}`))) })
+            :
+                _jsx("div", { style: { display: 'grid', borderRadius: '8px', alignItems: 'center', overflow: 'auto', padding: '5px', gap: '8px', gridTemplateColumns: 'minmax(0, max-content) minmax(0, max-content) minmax(50%, 1fr) minmax(0, max-content)' }, children: itemsToRender.map((wi, index) => (_jsx(WhereItemRow, { whereItem: wi, index: index, dcmtTypesList: dcmtTypesList, isExpertMode: isExpertMode, isSelected: false, isEditable: isEditableList(wi.mid), currentEditingMID: currentEditingMID, queryParamsDynDataList: dynDataListsToBeRefreshed.find(o => o.mid === wi.mid)?.queryParams ?? [], onItemChange: handleWhereItemChanged, onItemSelect: handleItemSelect, onAdvancedMenuClick: handleAdvancedMenuClick, onCascadeRefreshDynDataLists: handleCascadeRefresh, onCascadeUpdateMIDs: handleCascadeUpdate, onHideMobileEditor: () => setCurrentEditingMID(0), isCompactView: false }, `${wi.tid}_${wi.mid}_${index}`))) }) }));
+};
+export default React.memo(TMSearchQueryEditor);
+const TMSearchWhereItemEditor = React.memo(({ whereItem, queryParamsDynDataList, index, isSelected, isEditableList, autoFocus, openChooserBySingleClick, onValueChanged, onCascadeRefreshDynDataLists, onCascadeUpdateMIDs }) => {
+    const [showValue1, setShowValue1] = useState(true);
+    const [showValue2, setShowValue2] = useState(false);
+    const [dataList, setDataList] = useState();
+    const [users, setUsers] = useState();
+    useEffect(() => {
+        let operands = PlatformObjectValidator.GetNumberOfOperands(whereItem.operator);
+        switch (operands) {
+            case 0:
+                setShowValue1(false);
+                setShowValue2(false);
+                break;
+            case 2:
+                setShowValue1(true);
+                setShowValue2(true);
+                break;
+            default:
+                setShowValue1(true);
+                setShowValue2(false);
+                break;
+        }
+        getMetadata().then((mdOut) => {
+            switch (mdOut?.dataDomain) {
+                case MetadataDataDomains.DataList:
+                    if (dataList != undefined)
+                        return;
+                    TMSpinner.show({ description: `${SDKUI_Localizator.Loading} - ${SDK_Localizator.DataList} ...` });
+                    mdOut.dataListID && DataListCacheService.GetAsync(mdOut.dataListID).then((dataList) => {
+                        TMSpinner.hide();
+                        setDataList(dataList);
+                    });
+                    break;
+                case MetadataDataDomains.UserID:
+                    if (users !== undefined)
+                        return;
+                    TMSpinner.show({ description: `${SDKUI_Localizator.Loading} - ${SDK_Localizator.Users} ...` });
+                    UserListCacheService.GetAllAsync().then((resultUsers) => {
+                        TMSpinner.hide();
+                        setUsers(resultUsers ?? []);
+                    });
+                    break;
+                default: break;
+            }
+        });
+    }, [whereItem]);
+    const getMetadata = async () => {
+        let dtd = await DcmtTypeListCacheService.GetAsync(whereItem.tid, true);
+        return dtd?.metadata?.find(o => o.id === whereItem.mid);
+    };
+    const normalizeValue = (value, isForValue1 = true) => {
+        let newValues = [];
+        let newValue = value;
+        if (isForValue1) {
+            newValues.push(newValue);
+            newValues.push(whereItem.value2);
+        }
+        else {
+            newValues.push(whereItem.value1);
+            newValues.push(newValue);
+        }
+        onValueChanged?.(newValues);
+    };
+    return (_jsxs(StyledRowItem, { style: { marginBottom: 0, width: '100%' }, children: [showValue1 && _jsx(TMMetadataEditor, { openChooserBySingleClick: openChooserBySingleClick, isSelected: isSelected, tid: whereItem.tid, mid: whereItem.mid, layoutMode: LayoutModes.None, isEditable: isEditableList, value: whereItem.value1, queryOperator: whereItem.operator, queryParamsDynDataList: queryParamsDynDataList, autoFocus: autoFocus ?? false, containerElement: undefined, onValueChanged: (value) => { normalizeValue(value, true); }, onCascadeRefreshDynDataLists: onCascadeRefreshDynDataLists, onCascadeUpdateMIDs: onCascadeUpdateMIDs }), showValue2 && _jsx(TMMetadataEditor, { openChooserBySingleClick: openChooserBySingleClick, isSelected: isSelected, tid: whereItem.tid, mid: whereItem.mid, layoutMode: LayoutModes.None, isEditable: isEditableList, value: whereItem.value2, queryOperator: whereItem.operator, autoFocus: autoFocus ?? false, containerElement: undefined, onValueChanged: (value) => { normalizeValue(value, false); } })] }));
+});
+const TMSearchWhereItemCard = React.memo(({ index, whereItem, isSelected, queryParamsDynDataList, showEditor, showCompleteMetadataName, showId, isEditableList, onWhereItemChange, onHideEditor, onCascadeRefreshDynDataLists, onCascadeUpdateMIDs }) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [md, setMd] = useState();
+    useEffect(() => { getMetadata().then((mdOut) => { setMd(mdOut); }); }, [whereItem]);
+    useEffect(() => { setIsOpen(showEditor); }, [showEditor]);
+    const onChange_WhereItem_QueryOperator = (qo, index) => {
+        onWhereItemChange?.({ ...whereItem, operator: qo, value1: undefined, value2: undefined });
+    };
+    const getMetadata = async () => {
+        let dtd = await DcmtTypeListCacheService.GetAsync(whereItem.tid, true);
+        return dtd?.metadata?.find(o => o.id === whereItem.mid);
+    };
+    const getQueryOperatorsMenuItems = (wi, index) => {
+        let items = [];
+        items.push({ text: LocalizeQueryOperators(QueryOperators.Equal), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.Equal, index) });
+        items.push({ text: LocalizeQueryOperators(QueryOperators.NotEqual), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.NotEqual, index) });
+        items.push({ text: LocalizeQueryOperators(QueryOperators.IsNull), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.IsNull, index) });
+        items.push({ text: LocalizeQueryOperators(QueryOperators.IsNotNull), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.IsNotNull, index) });
+        items.push({ text: LocalizeQueryOperators(QueryOperators.In), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.In, index) });
+        items.push({ text: LocalizeQueryOperators(QueryOperators.NotIn), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.NotIn, index) });
+        let mdDataType = md?.dataType;
+        if (mdDataType != MetadataDataTypes.Varchar) {
+            items.push({ text: LocalizeQueryOperators(QueryOperators.Greater), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.Greater, index) });
+            items.push({ text: LocalizeQueryOperators(QueryOperators.GreaterOrEqual), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.GreaterOrEqual, index) });
+            items.push({ text: LocalizeQueryOperators(QueryOperators.Less), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.Less, index) });
+            items.push({ text: LocalizeQueryOperators(QueryOperators.LessOrEqual), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.LessOrEqual, index) });
+            items.push({ text: LocalizeQueryOperators(QueryOperators.BetweenExclusive), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.BetweenExclusive, index) });
+            items.push({ text: LocalizeQueryOperators(QueryOperators.BetweenInclusive), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.BetweenInclusive, index) });
+            items.push({ text: LocalizeQueryOperators(QueryOperators.OutsideExclusive), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.OutsideExclusive, index) });
+            items.push({ text: LocalizeQueryOperators(QueryOperators.OutsideInclusive), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.OutsideInclusive, index) });
+        }
+        else {
+            items.push({ text: LocalizeQueryOperators(QueryOperators.Contain), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.Contain, index) });
+            items.push({ text: LocalizeQueryOperators(QueryOperators.NotContain), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.NotContain, index) });
+            items.push({ text: LocalizeQueryOperators(QueryOperators.BeginWith), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.BeginWith, index) });
+            items.push({ text: LocalizeQueryOperators(QueryOperators.NotBeginWith), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.NotBeginWith, index) });
+            items.push({ text: LocalizeQueryOperators(QueryOperators.EndWith), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.EndWith, index) });
+            items.push({ text: LocalizeQueryOperators(QueryOperators.NotEndWith), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.NotEndWith, index) });
+            items.push({ text: LocalizeQueryOperators(QueryOperators.Like), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.Like, index) });
+            items.push({ text: LocalizeQueryOperators(QueryOperators.NotLike), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.NotLike, index) });
+        }
+        items.push({ text: LocalizeQueryOperators(QueryOperators.Custom), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.Custom, index) });
+        if (mdDataType == MetadataDataTypes.DateTime) {
+            items.push({
+                text: SDKUI_Localizator.SpecialOperators, items: [
+                    { text: LocalizeQueryOperators(QueryOperators.Yesterday), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.Yesterday, index) },
+                    { text: LocalizeQueryOperators(QueryOperators.Today), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.Today, index) },
+                    { text: LocalizeQueryOperators(QueryOperators.Tomorrow), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.Tomorrow, index) },
+                    { text: LocalizeQueryOperators(QueryOperators.PreviousWeek), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.PreviousWeek, index) },
+                    { text: LocalizeQueryOperators(QueryOperators.ThisWeek), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.ThisWeek, index) },
+                    { text: LocalizeQueryOperators(QueryOperators.NextWeek), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.NextWeek, index) },
+                    { text: LocalizeQueryOperators(QueryOperators.PreviousMonth), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.PreviousMonth, index) },
+                    { text: LocalizeQueryOperators(QueryOperators.ThisMonth), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.ThisMonth, index) },
+                    { text: LocalizeQueryOperators(QueryOperators.NextMonth), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.NextMonth, index) },
+                    { text: LocalizeQueryOperators(QueryOperators.PreviousYear), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.PreviousYear, index) },
+                    { text: LocalizeQueryOperators(QueryOperators.ThisYear), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.ThisYear, index) },
+                    { text: LocalizeQueryOperators(QueryOperators.NextYear), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.NextYear, index) },
+                    { text: LocalizeQueryOperators(QueryOperators.LastXHours), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.LastXHours, index) },
+                    { text: LocalizeQueryOperators(QueryOperators.NextXHours), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.NextXHours, index) },
+                    { text: LocalizeQueryOperators(QueryOperators.LastXDays), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.LastXDays, index) },
+                    { text: LocalizeQueryOperators(QueryOperators.NextXDays), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.NextXDays, index) },
+                    { text: LocalizeQueryOperators(QueryOperators.LastXWeeks), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.LastXWeeks, index) },
+                    { text: LocalizeQueryOperators(QueryOperators.NextXWeeks), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.NextXWeeks, index) },
+                    { text: LocalizeQueryOperators(QueryOperators.LastXMonths), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.LastXMonths, index) },
+                    { text: LocalizeQueryOperators(QueryOperators.NextXMonths), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.NextXMonths, index) },
+                    { text: LocalizeQueryOperators(QueryOperators.LastXYears), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.LastXYears, index) },
+                    { text: LocalizeQueryOperators(QueryOperators.NextXYears), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.NextXYears, index) }
+                ]
+            });
+        }
+        return items;
+    };
+    return (_jsxs("div", { style: { width: "100%", fontSize: '1rem', userSelect: 'none' }, children: [_jsxs("div", { style: { display: 'flex', flexDirection: 'row', justifyContent: 'space-between' }, children: [_jsx(TMSearchWhereItemViewer, { isSelected: isSelected, whereItem: whereItem, showCompleteMetadataName: showCompleteMetadataName, showId: showId, showValue: !isOpen }), isOpen &&
+                        _jsx("div", { onClick: (e) => e.stopPropagation(), children: _jsx(TMButton, { btnStyle: 'icon', icon: _jsx(IconClearButton, { color: 'red' }), caption: SDKUI_Localizator.Close, showTooltip: false, onClick: () => { onHideEditor?.(); } }) })] }), _jsx("div", { style: { display: isOpen ? 'flex' : 'none', flexDirection: 'column', paddingTop: 5, gap: '5px' }, children: _jsxs(StyledDivHorizontal, { style: { gap: '5px' }, children: [_jsx(TMDropDownMenu, { backgroundColor: colorOperator, color: 'green', content: _jsx(StyledItemWrapper, { children: LocalizeQueryOperators(whereItem.operator) }), items: getQueryOperatorsMenuItems(whereItem, index) }), _jsx(TMSearchWhereItemEditor, { isSelected: isSelected, whereItem: whereItem, index: index, isEditableList: isEditableList, autoFocus: !!isOpen, onValueChanged: (values) => { onWhereItemChange?.({ ...whereItem, value1: values[0], value2: values[1] }); }, queryParamsDynDataList: queryParamsDynDataList, onCascadeRefreshDynDataLists: onCascadeRefreshDynDataLists, onCascadeUpdateMIDs: onCascadeUpdateMIDs })] }) })] }));
+});
+const TMSearchWhereItemViewer = React.memo(({ isSelected = false, whereItem, showCompleteMetadataName, showId, showValue }) => {
+    const [numberOfOperands, setNumberOfOperands] = useState(0);
+    const [md, setMd] = useState();
+    useEffect(() => {
+        let operands = PlatformObjectValidator.GetNumberOfOperands(whereItem?.operator);
+        setNumberOfOperands(operands);
+        getMetadata().then((mdOut) => { setMd(mdOut); });
+    }, [whereItem]);
+    const getMetadata = async () => {
+        let dtd = await DcmtTypeListCacheService.GetAsync(whereItem?.tid, true);
+        return dtd?.metadata?.find(o => o.id === whereItem?.mid);
+    };
+    return (_jsxs("div", { style: { width: "100%", gap: 5, fontSize: '1rem', userSelect: 'none', display: 'flex', flexDirection: 'row' }, children: [_jsx(TMMidViewer, { isMetadataSelected: isSelected, showIcon: true, showCompleteName: showCompleteMetadataName, showId: showId, tid_mid: { tid: whereItem?.tid, mid: whereItem?.mid, aliasTID: whereItem?.alias } }), whereItem && showValue && PlatformObjectValidator.WhereItemHasValues(whereItem) && _jsx(StyledItemWrapper, { style: { padding: 0, color: 'green' }, children: LocalizeQueryOperators(whereItem.operator) }), whereItem && showValue && PlatformObjectValidator.WhereItemHasValues(whereItem) &&
+                _jsx(StyledItemWrapper, { style: { padding: 0, fontWeight: 900 }, children: numberOfOperands == 11 || numberOfOperands == 12 || numberOfOperands == 99
+                        ? _jsx(_Fragment, { children: whereItem.value1 })
+                        // ? <>{numberOfOperands == 11 ? whereItem.value1?.split(',').map((item: string) => !item.startsWith("'") ? item : item.slice(1, -1)).join(",") : whereItem.value1}</>
+                        : _jsxs(_Fragment, { children: [displayMetadataValue(md, whereItem.value1, ""), numberOfOperands == 2 && (whereItem.value2 && whereItem.value2 != '' ? ` - ${displayMetadataValue(md, whereItem.value2, "")}` : ' - ?')] }) })] }));
+});
+const WhereItemRow = React.memo(({ whereItem, index, dcmtTypesList, isExpertMode, isSelected, isEditable, currentEditingMID, queryParamsDynDataList, isCompactView, onItemChange, onItemSelect, onAdvancedMenuClick, onCascadeRefreshDynDataLists, onCascadeUpdateMIDs, onHideMobileEditor }) => {
+    const dropDownMenuRef = useRef(null);
+    // Trova il metadata descriptor per l'item corrente
+    const md = useMemo(() => {
+        const dtd = dcmtTypesList.find(o => o.id === whereItem.tid);
+        return dtd?.metadata?.find(o => o.id === whereItem.mid);
+    }, [dcmtTypesList, whereItem.tid, whereItem.mid]);
+    // --- Memoized Menu Items ---
+    const queryOperatorsItems = useMemo(() => {
+        const onChange_WhereItem_QueryOperator = (qo) => {
+            onItemChange({ ...whereItem, operator: qo, value1: undefined, value2: undefined });
+        };
+        let items = [];
+        items.push({ text: LocalizeQueryOperators(QueryOperators.Equal), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.Equal) });
+        items.push({ text: LocalizeQueryOperators(QueryOperators.NotEqual), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.NotEqual) });
+        items.push({ text: LocalizeQueryOperators(QueryOperators.IsNull), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.IsNull) });
+        items.push({ text: LocalizeQueryOperators(QueryOperators.IsNotNull), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.IsNotNull) });
+        items.push({ text: LocalizeQueryOperators(QueryOperators.In), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.In) });
+        items.push({ text: LocalizeQueryOperators(QueryOperators.NotIn), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.NotIn) });
+        if (md?.dataType !== MetadataDataTypes.Varchar) {
+            items.push({ text: LocalizeQueryOperators(QueryOperators.Greater), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.Greater) });
+            items.push({ text: LocalizeQueryOperators(QueryOperators.GreaterOrEqual), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.GreaterOrEqual) });
+            items.push({ text: LocalizeQueryOperators(QueryOperators.Less), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.Less) });
+            items.push({ text: LocalizeQueryOperators(QueryOperators.LessOrEqual), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.LessOrEqual) });
+            items.push({ text: LocalizeQueryOperators(QueryOperators.BetweenExclusive), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.BetweenExclusive) });
+            items.push({ text: LocalizeQueryOperators(QueryOperators.BetweenInclusive), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.BetweenInclusive) });
+            items.push({ text: LocalizeQueryOperators(QueryOperators.OutsideExclusive), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.OutsideExclusive) });
+            items.push({ text: LocalizeQueryOperators(QueryOperators.OutsideInclusive), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.OutsideInclusive) });
+        }
+        else {
+            items.push({ text: LocalizeQueryOperators(QueryOperators.Contain), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.Contain) });
+            items.push({ text: LocalizeQueryOperators(QueryOperators.NotContain), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.NotContain) });
+            items.push({ text: LocalizeQueryOperators(QueryOperators.BeginWith), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.BeginWith) });
+            items.push({ text: LocalizeQueryOperators(QueryOperators.NotBeginWith), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.NotBeginWith) });
+            items.push({ text: LocalizeQueryOperators(QueryOperators.EndWith), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.EndWith) });
+            items.push({ text: LocalizeQueryOperators(QueryOperators.NotEndWith), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.NotEndWith) });
+            items.push({ text: LocalizeQueryOperators(QueryOperators.Like), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.Like) });
+            items.push({ text: LocalizeQueryOperators(QueryOperators.NotLike), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.NotLike) });
+        }
+        items.push({ text: LocalizeQueryOperators(QueryOperators.Custom), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.Custom) });
+        if (md?.dataType == MetadataDataTypes.DateTime) {
+            items.push({
+                text: "Operatori speciali", items: [
+                    { text: LocalizeQueryOperators(QueryOperators.Yesterday), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.Yesterday) },
+                    { text: LocalizeQueryOperators(QueryOperators.Today), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.Today) },
+                    { text: LocalizeQueryOperators(QueryOperators.Tomorrow), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.Tomorrow) },
+                    { text: LocalizeQueryOperators(QueryOperators.PreviousWeek), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.PreviousWeek) },
+                    { text: LocalizeQueryOperators(QueryOperators.ThisWeek), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.ThisWeek) },
+                    { text: LocalizeQueryOperators(QueryOperators.NextWeek), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.NextWeek) },
+                    { text: LocalizeQueryOperators(QueryOperators.PreviousMonth), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.PreviousMonth) },
+                    { text: LocalizeQueryOperators(QueryOperators.ThisMonth), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.ThisMonth) },
+                    { text: LocalizeQueryOperators(QueryOperators.NextMonth), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.NextMonth) },
+                    { text: LocalizeQueryOperators(QueryOperators.PreviousYear), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.PreviousYear) },
+                    { text: LocalizeQueryOperators(QueryOperators.ThisYear), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.ThisYear) },
+                    { text: LocalizeQueryOperators(QueryOperators.NextYear), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.NextYear) },
+                    { text: LocalizeQueryOperators(QueryOperators.LastXHours), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.LastXHours) },
+                    { text: LocalizeQueryOperators(QueryOperators.NextXHours), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.NextXHours) },
+                    { text: LocalizeQueryOperators(QueryOperators.LastXDays), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.LastXDays) },
+                    { text: LocalizeQueryOperators(QueryOperators.NextXDays), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.NextXDays) },
+                    { text: LocalizeQueryOperators(QueryOperators.LastXWeeks), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.LastXWeeks) },
+                    { text: LocalizeQueryOperators(QueryOperators.NextXWeeks), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.NextXWeeks) },
+                    { text: LocalizeQueryOperators(QueryOperators.LastXMonths), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.LastXMonths) },
+                    { text: LocalizeQueryOperators(QueryOperators.NextXMonths), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.NextXMonths) },
+                    { text: LocalizeQueryOperators(QueryOperators.LastXYears), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.LastXYears) },
+                    { text: LocalizeQueryOperators(QueryOperators.NextXYears), onClick: () => onChange_WhereItem_QueryOperator(QueryOperators.NextXYears) }
+                ]
+            });
+        }
+        return items;
+    }, [whereItem, md, onItemChange]);
+    const advancedMenuItems = useMemo(() => {
+        const menu = [
+            ...(isExpertMode ? [{
+                    text: isEditable ? SDKUI_Localizator.Restore : SDKUI_Localizator.MakeEditable,
+                    icon: isEditable ? _jsx(IconUndo, {}) : _jsx(IconPencil, {}),
+                    onClick: () => {
+                        onAdvancedMenuClick({ tid: whereItem.tid, mid: whereItem.mid, button: AdvancedMenuButtons.MakeEditable });
+                        dropDownMenuRef.current?.focus();
+                    }
+                }] : []),
+            {
+                text: SDKUI_Localizator.DistinctValues,
+                icon: _jsx(IconDataList, {}),
+                onClick: () => {
+                    onItemSelect(whereItem.tid, whereItem.mid); // Seleziona prima di chiamare l'azione
+                    onAdvancedMenuClick({ tid: whereItem.tid, mid: whereItem.mid, button: AdvancedMenuButtons.DistinctValues });
+                    dropDownMenuRef.current?.focus();
+                }
+            }
+        ];
+        return menu;
+    }, [whereItem, isEditable, isExpertMode, onAdvancedMenuClick, onItemSelect]);
+    const getOperatorColor = () => {
+        if (!md)
+            return 'green';
+        return whereItem.operator === getDefaultOperator(md.dataDomain, md.dataType) ? 'green' : TMColors.tertiary;
+    };
+    // --- Rendering ---
+    if (isCompactView) {
+        return (_jsx(StyledMetadataListItem, { id: `wi-item-${whereItem.mid}`, onClick: () => onItemSelect(whereItem.tid, whereItem.mid), onFocus: () => onItemSelect(whereItem.tid, whereItem.mid), "$backgroundColor": !PlatformObjectValidator.WhereItemHasValues(whereItem) ? `${TMColors.primary}66` : 'rgba(236, 202, 156, 1)', "$hoverColor": !PlatformObjectValidator.WhereItemHasValues(whereItem) ? `${TMColors.primary}33` : 'rgba(236, 202, 156, .5)', children: _jsx(TMSearchWhereItemCard, { isSelected: isSelected, index: index, whereItem: whereItem, showEditor: currentEditingMID === whereItem.mid, isEditableList: isEditable, queryParamsDynDataList: queryParamsDynDataList, onWhereItemChange: onItemChange, onHideEditor: onHideMobileEditor, onCascadeRefreshDynDataLists: onCascadeRefreshDynDataLists, onCascadeUpdateMIDs: onCascadeUpdateMIDs }) }));
+    }
+    return (_jsxs(React.Fragment, { children: [_jsx("div", { id: `wi-item-${whereItem.mid}`, style: { gridColumn: 1 }, children: _jsx(TMMidViewer, { color: TMColors.primaryColor, isMetadataSelected: isSelected, showIcon: true, tid_mid: { tid: whereItem?.tid, mid: whereItem?.mid, aliasTID: whereItem?.alias } }) }), _jsx("div", { style: { gridColumn: 2, paddingLeft: '5px', paddingRight: '5px' }, children: _jsx(TMDropDownMenu, { backgroundColor: colorOperator, color: getOperatorColor(), items: queryOperatorsItems, content: _jsx(StyledItemWrapper, { children: LocalizeQueryOperators(whereItem.operator) }) }) }), _jsxs("div", { style: { gridColumn: 3, position: 'relative' }, onClick: () => onItemSelect(whereItem.tid, whereItem.mid), onFocus: () => onItemSelect(whereItem.tid, whereItem.mid), children: [_jsx(TMSearchWhereItemEditor, { isSelected: isSelected, openChooserBySingleClick: !isSelected, whereItem: whereItem, index: index, isEditableList: isEditable, queryParamsDynDataList: queryParamsDynDataList, onValueChanged: (values) => {
+                            onItemChange({ ...whereItem, value1: values[0], value2: values[1] });
+                        }, onCascadeRefreshDynDataLists: onCascadeRefreshDynDataLists, onCascadeUpdateMIDs: onCascadeUpdateMIDs }), FormulaHelper.isFormula(whereItem.value1)
+                        ? _jsx(IconFunction, { color: "#1a89d3", fontSize: 14, style: { position: "absolute", top: '-5px', left: '-10px' } })
+                        : isEditable
+                            ? _jsx(IconPencil, { color: "#138603", fontSize: 14, style: { position: "absolute", top: '-5px', left: '-10px' } })
+                            : null] }), _jsx("div", { style: { gridColumn: 4 }, children: _jsx(TMDropDownMenu, { ref: dropDownMenuRef, backgroundColor: 'white', color: TMColors.button_icon, borderRadius: '3px', content: _jsx(TMButton, { btnStyle: 'icon', icon: _jsx(IconMenuVertical, {}), showTooltip: false }), items: advancedMenuItems }) })] }));
+});

package/lib/components/features/search/TMSearchQueryPanel.d.ts

@@ -0,0 +1,29 @@
+import React from 'react';
+import { DcmtTypeDescriptor, QueryDescriptor, SavedQueryDescriptor, SearchResultDescriptor } from '@topconsultnpm/sdk-ts';
+interface ITMSearchQueryPanelProps {
+    fromDTD?: DcmtTypeDescriptor;
+    SQD?: SavedQueryDescriptor;
+    isExpertMode?: boolean;
+    showBackToResultButton?: boolean;
+    inputMids?: Array<{
+        mid: number;
+        value: string;
+    }>;
+    onBack?: () => void;
+    onBackToResult?: () => void;
+    onSqdSaved?: (newSqd: SavedQueryDescriptor) => void;
+    onSearchCompleted?: (searchResult: SearchResultDescriptor[], qd: QueryDescriptor | undefined) => void;
+    onClosePanel?: () => void;
+    allowMaximize?: boolean;
+    onMaximizePanel?: () => void;
+    passToArchiveCallback?: (outputMids: Array<{
+        mid: number;
+        value: string;
+    }>, tid?: number) => void;
+}
+declare const TMSearchQueryPanel: React.FunctionComponent<ITMSearchQueryPanelProps>;
+export default TMSearchQueryPanel;
+export declare const refreshLastSearch: (qd: QueryDescriptor | undefined) => Promise<SearchResultDescriptor[] | undefined>;
+export declare const StyledToppyTextContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledToppyText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, never>> & string;
+export declare const StyledToppyImage: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, never>> & string;