@topconsultnpm/sdkui-react 6.17.0-test10

package/lib/components/query/TMQueryEditor.js

@@ -0,0 +1,1001 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useEffect, useState } from 'react';
+import { SDK_Localizator, AccessLevels, OnJoinItem, JoinTypes, PlatformObjectValidator, MetadataDataDomains, DcmtTypeListCacheService, JoinItem, MetadataDataTypes, OrderByItem, QueryFunctions, QueryOperators, ResultTypes, SelectItem, SDK_Globals, UserListCacheService, WhereItem, SearchEngine, SelectItemVisibilities, DataListCacheService, QueryValidatorOptions, TMPropertyNames, AppModules, LayoutModes } from '@topconsultnpm/sdk-ts';
+import styled from 'styled-components';
+import Accordion, { Item } from 'devextreme-react/accordion';
+import { SDKUI_Localizator, IconSearch, IconCount, getQueryCountAsync, calcIsModified, IconClear, IconAddCircleOutline, IconDotsVerticalCircleOutline, IconHide, IconShow, IconDraggabledots, genUniqueId, LocalizeQueryOperators, LocalizeQueryFunctions, LocalizeQueryJoinTypes, IconArchiveDoc, IconArrowRight, svgToString, SDKUI_Globals } from '../../helper';
+import { displayMetadataValue, getDcmtTypesByQdAsync, getTIDsByQd, IsParametricQuery, prepareQdForSearchAsync } from '../../helper/queryHelper';
+import { useOutsideClick } from '../../hooks/useOutsideClick';
+import { FormModes, SearchResultContext } from '../../ts';
+import { TMColors } from '../../utils/theme';
+import { StyledDivHorizontal, StyledDraggableDiv, StyledModalContainer } from '../base/Styled';
+import TMButton from '../base/TMButton';
+import { TMExceptionBoxManager } from '../base/TMPopUp';
+import TMSpinner from '../base/TMSpinner';
+import { TMTabItemBadge } from '../base/TMTab';
+import TMTooltip from '../base/TMTooltip';
+import TMVilViewer from '../base/TMVilViewer';
+import { TMDataListItemChooserForm } from '../choosers/TMDataListItemChooser';
+import TMDcmtTypeChooser from '../choosers/TMDcmtTypeChooser';
+import TMMetadataChooser from '../choosers/TMMetadataChooser';
+import { TMUserChooserForm } from '../choosers/TMUserChooser';
+import TMCheckBox from '../editors/TMCheckBox';
+import TMTextBox from '../editors/TMTextBox';
+import TMApplyForm from '../forms/TMApplyForm';
+import { getDisplayAlias } from '../viewers/TMMidViewer';
+import { useApplyForm } from '../../hooks/useForm';
+import ShowAlert from '../base/TMAlert';
+import { TMDynDataListItemChooserForm } from '../choosers/TMDynDataListItemChooser';
+import TMMetadataEditor from '../editors/TMMetadataEditor';
+import { ContextMenu } from 'devextreme-react';
+import { useQueryParametersDialog } from '../../hooks/useQueryParametersDialog';
+import TMSearchResult from '../features/search/TMSearchResult';
+export const StyledRowItem = styled.div ` display: flex; flex-direction: row; align-items: center; justify-content: flex-start; margin-bottom: 5px; gap: 3px; `;
+export const StyledItemWrapper = styled.div ` border-radius: ${props => props.$borderRadius ?? '4px'}; padding: 4px; font-size: 1rem; user-select: none; width: max-content; `;
+export const StyledAccordionItemContainer = styled.div ` width: 100%; padding: 2px; display: flex; flex-direction: column; overflow-x: auto; align-items: flex-start; margin-left: 5px; gap: 3px; max-height: 300px; `;
+export const StyledAccordionItemContent = styled.div ` width: 100%; pointer-events: ${props => props.$disabled ? 'none' : ''}; `;
+export const colorValue = 'rgba(224,224,224,.5)';
+export const colorBrackets = 'rgba(209,52,56,.3)';
+export const colorOperator = 'rgba(16,124,16,.3)'; //'#b8dbf0'
+export const color1 = '#F5DD9C';
+export const color2 = 'rgba(15,108,189,.3)';
+export const color3 = 'rgb(199, 236, 172)';
+export const color4 = 'rgb(223, 204, 251)';
+export const color5 = 'rgb(249, 181, 114)';
+export const color6 = 'rgb(170, 215, 217)';
+export const color7 = 'rgb(243, 208, 215)';
+export const color8 = 'rgb(236, 202, 156)';
+export const color9 = 'rgb(137, 185, 173)';
+export const colorX = 'rgb(246, 245, 242)';
+export var Descriptors;
+(function (Descriptors) {
+    Descriptors[Descriptors["Query"] = 3] = "Query";
+})(Descriptors || (Descriptors = {}));
+export function useQueryApplyForm(d, formMode, inputData, onApplied, parameters) {
+    const newData = () => {
+        switch (d) {
+            case Descriptors.Query: return SearchEngine.NewQueryDescriptor();
+            default: return {};
+        }
+    };
+    const { formData, setFormData, formDataOrig, exception, applyData } = useApplyForm(formMode, inputData, newData, onApplied);
+    const [validationItems, setValidationItems] = useState([]);
+    return { formData, setFormData, formDataOrig, validationItems, setValidationItems, exception, applyData };
+}
+const TMQueryEditor = ({ formMode, inputData, onQDChanged, isExpertMode, showDistinct = false, showToolbar = true, validateSelect = true, validateOrderBy = true, raiseWarningForOnlyMetadataDcmtTypes = false, onApplied, onClose, height = 'auto', borderRadius = '4px', searchText, showApply, showUndo, showBack, onFromTIDChanged, ShowOnlySAP }) => {
+    const [confirmQueryParams, ConfirmQueryParamsDialog] = useQueryParametersDialog();
+    const { formData, setFormData, formDataOrig, validationItems, setValidationItems, exception, applyData } = useQueryApplyForm(Descriptors.Query, formMode, inputData, onApplied);
+    const [dcmtTypesList, setDcmtTypesList] = useState([]);
+    const [lastQdParams, setLastQdParams] = useState([]);
+    const [resultSearch, setResultSearch] = useState([]);
+    const [draggingItem, setDraggingItem] = useState();
+    const [showId, setShowId] = useState(false);
+    const [showCompleteMetadataName, setShowCompleteMetadataName] = useState(false);
+    const [showResultSearch, setShowResultSearch] = useState(false);
+    const [fromCount, setFromCount] = useState(0);
+    const [isExpertModeInternal, setIsExpertModeInternal] = useState(isExpertMode ?? SDKUI_Globals.userSettings.advancedSettings.expertMode === 1);
+    useEffect(() => { setShowResultSearch(false); }, [JSON.stringify(inputData)]);
+    useEffect(() => {
+        if (!formData)
+            return;
+        getDcmtTypesByQdAsync(formData).then((dtdl) => setDcmtTypesList(dtdl)).catch((err) => { TMExceptionBoxManager.show({ exception: err }); });
+        validateQd();
+        setFromCount((formData.from?.tid && formData.from?.tid > 0 ? 1 : 0) + (formData.join?.length ?? 0));
+    }, [formData.from, formData.join]);
+    useEffect(() => { validateQd(); }, [formData.select, formData.where, formData.orderBy, formData.maxDcmtsToBeReturned]);
+    //Se non c'è la toolbar significa che il qd deve essere gestito dall'esterno
+    useEffect(() => { if (!showToolbar)
+        onQDChanged?.(formData); }, [JSON.stringify(formData)]);
+    // Sync with global state when SDKUI_Globals.userSettings.advancedSettings.expertMode changes
+    useEffect(() => {
+        const handleExpertModeChange = (event) => {
+            if (isExpertMode === undefined) {
+                setIsExpertModeInternal(event.detail === 1); // Update internal state only if prop is not provided
+            }
+        };
+        // Listen for changes in expertMode
+        window.addEventListener('expertModeChanged', handleExpertModeChange);
+        return () => {
+            window.removeEventListener('expertModeChanged', handleExpertModeChange);
+        };
+    }, [isExpertMode]);
+    // Sync with prop changes
+    useEffect(() => {
+        if (isExpertMode !== undefined) {
+            setIsExpertModeInternal(isExpertMode);
+        }
+    }, [isExpertMode]);
+    const validateQd = () => {
+        let vil = [];
+        let qvo = new QueryValidatorOptions();
+        qvo.DoSelectValidation = validateSelect;
+        qvo.DoOrderByValidation = validateOrderBy;
+        qvo.RaiseWarningForOnlyMetadataDcmtTypes = raiseWarningForOnlyMetadataDcmtTypes;
+        PlatformObjectValidator.QueryValidatorAsync(formData, vil, qvo).then(() => { setValidationItems(vil); });
+    };
+    const errorsCount = validationItems.filter((o) => o.ResultType == ResultTypes.ERROR).length;
+    const isReadOnly = formMode == FormModes.ReadOnly;
+    const selectCount = formData?.select?.length ?? 0;
+    const whereCount = formData?.where?.length ?? 0;
+    const orderByCount = formData?.orderBy?.length ?? 0;
+    const qdTIDs = getTIDsByQd(formData);
+    const canShowSelect = (() => {
+        if (fromCount <= 0)
+            return false;
+        if (isReadOnly)
+            return (validateSelect && selectCount > 0);
+        return validateSelect || isExpertModeInternal;
+    })();
+    // #region Join
+    const onAdd_JoinItem = (index = -1) => {
+        const joinCopy = formData?.join?.map((ji) => { return { ...ji }; }) ?? [];
+        let ji = new JoinItem();
+        ji.joinType = JoinTypes.InnerJoin;
+        ji.on = [];
+        if (index == -1)
+            joinCopy.push(ji);
+        else
+            joinCopy.splice(index, 0, ji);
+        setFormData({ ...formData, join: joinCopy });
+    };
+    const onRemove_JoinItem = (index) => {
+        if (!formData.join)
+            return;
+        let curTid = formData.join[index].tid;
+        let curAlias = formData.join[index].alias;
+        setFormData({
+            ...formData,
+            join: formData?.join?.filter((o, i) => i !== index),
+            select: formData.select?.filter((o) => o.tid != curTid || (o.tid == curTid && (o.alias ?? '') !== (curAlias ?? ''))),
+            where: formData.where?.filter((o) => o.tid != curTid || (o.tid == curTid && (o.alias ?? '') !== (curAlias ?? ''))),
+            orderBy: formData.orderBy?.filter((o) => o.tid != curTid || (o.tid == curTid && (o.alias ?? '') !== (curAlias ?? '')))
+        });
+    };
+    const onChange_JoinItem_TID = (tid, index) => {
+        if (!formData.join)
+            return;
+        let curTid = formData.join[index].tid;
+        let curAlias = formData.join[index].alias;
+        let count = dcmtTypesList.map((item) => item.id).filter(o => o == tid).length;
+        const joinCopy = formData?.join?.map((item, indexItem) => {
+            if (index != indexItem)
+                return item;
+            let newItem = new JoinItem();
+            newItem.init({ ...item, tid: tid, on: [] });
+            if (count > 0)
+                newItem.alias = `tbl${tid.toString().padStart(7, '0')}_A${count + 1}`;
+            return newItem;
+        });
+        setFormData({
+            ...formData,
+            join: joinCopy,
+            select: formData.select?.filter((o) => o.tid != curTid || (o.tid == curTid && (o.alias ?? '') !== (curAlias ?? ''))),
+            where: formData.where?.filter((o) => o.tid != curTid || (o.tid == curTid && (o.alias ?? '') !== (curAlias ?? ''))),
+            orderBy: formData.orderBy?.filter((o) => o.tid != curTid || (o.tid == curTid && (o.alias ?? '') !== (curAlias ?? '')))
+        });
+    };
+    const onChange_JoinItem_JoinType = (value, index) => {
+        const joinCopy = formData?.join?.map((curItem, curIndex) => {
+            if (index != curIndex)
+                return curItem;
+            let newItem = new JoinItem();
+            newItem.init({ ...curItem, joinType: value });
+            return newItem;
+        });
+        setFormData({ ...formData, join: joinCopy });
+    };
+    const onRemove_OnJoinItem = (index, indexOn) => {
+        if (!formData?.join)
+            return;
+        const joinCopy = formData?.join?.map((ji) => { return { ...ji }; }) ?? [];
+        joinCopy[index].on = joinCopy[index].on?.filter((o, i) => i !== indexOn);
+        setFormData({ ...formData, join: joinCopy });
+    };
+    const onAdd_OnJoinItem = (index, indexOn = -1) => {
+        const joinCopy = formData?.join?.map((ji) => { return { ...ji }; }) ?? [];
+        if (!joinCopy)
+            return;
+        let newOn = new OnJoinItem();
+        newOn.leftBrackets = "(";
+        newOn.operator = QueryOperators.Equal;
+        newOn.rightBrackets = ")";
+        let curJoinItem = joinCopy[index];
+        const onJoinCopy = curJoinItem.on?.map((oji) => { return { ...oji }; }) ?? [];
+        if (indexOn == -1)
+            onJoinCopy?.push(newOn);
+        else
+            onJoinCopy?.splice(indexOn, 0, newOn);
+        curJoinItem.on = onJoinCopy;
+        setFormData({ ...formData, join: joinCopy });
+    };
+    const onChange_OnJoinMetadatoLeft = (tid_mid, index, indexOn = -1) => {
+        if (!tid_mid)
+            return;
+        const joinCopy = formData?.join?.map((ji) => { return { ...ji }; }) ?? [];
+        if (!joinCopy)
+            return;
+        let curJoinItem = joinCopy[index];
+        const onJoinCopy = curJoinItem.on?.map((curItem, curIndex) => {
+            if (indexOn != curIndex)
+                return curItem;
+            let newOn = new OnJoinItem();
+            newOn.init({ ...curItem, leftTID: tid_mid.tid, leftMID: tid_mid.mid, leftAlias: tid_mid.aliasTID });
+            return newOn;
+        });
+        curJoinItem.on = onJoinCopy;
+        setFormData({ ...formData, join: joinCopy });
+    };
+    const onChange_OnJoinMetadatoRight = (tid_mid, index, indexOn = -1) => {
+        if (!tid_mid)
+            return;
+        const joinCopy = formData?.join?.map((ji) => { return { ...ji }; }) ?? [];
+        if (!joinCopy)
+            return;
+        let curJoinItem = joinCopy[index];
+        const onJoinCopy = curJoinItem.on?.map((curItem, curIndex) => {
+            if (indexOn != curIndex)
+                return curItem;
+            let newOn = new OnJoinItem();
+            newOn.init({ ...curItem, rightTID: tid_mid.tid, rightMID: tid_mid.mid, rightAlias: tid_mid.aliasTID });
+            return newOn;
+        });
+        curJoinItem.on = onJoinCopy;
+        setFormData({ ...formData, join: joinCopy });
+    };
+    const getJoinTypesMenuItems = (index) => {
+        let items = [
+            { text: LocalizeQueryJoinTypes(JoinTypes.InnerJoin), onClick: () => onChange_JoinItem_JoinType(JoinTypes.InnerJoin, index) },
+            { text: LocalizeQueryJoinTypes(JoinTypes.LeftOuterJoin), onClick: () => onChange_JoinItem_JoinType(JoinTypes.LeftOuterJoin, index) },
+            { text: LocalizeQueryJoinTypes(JoinTypes.RightOuterJoin), onClick: () => onChange_JoinItem_JoinType(JoinTypes.RightOuterJoin, index) },
+            { text: LocalizeQueryJoinTypes(JoinTypes.FullOuterJoin), onClick: () => onChange_JoinItem_JoinType(JoinTypes.FullOuterJoin, index) },
+            { text: LocalizeQueryJoinTypes(JoinTypes.CrossJoin), onClick: () => onChange_JoinItem_JoinType(JoinTypes.CrossJoin, index) }
+        ];
+        return items;
+    };
+    // #endregion
+    // #region Select
+    const onRemove_SelectItem = (index) => { setFormData({ ...formData, select: formData?.select?.filter((o, i) => i !== index) }); };
+    const onAdd_SelectItem = (index = -1) => {
+        const selectCopy = formData?.select?.map((si) => { return si; }) ?? [];
+        for (const dtd of dcmtTypesList) {
+            if (!dtd.metadata || dtd.metadata.length <= 0)
+                continue;
+            for (const md of dtd.metadata.slice().sort((a, b) => ((a.isSystem ?? 0) - (b.isSystem ?? 0) || (a.ordinalPosition ?? 0) - (b.ordinalPosition ?? 0)))) {
+                if (md.perm?.canView === AccessLevels.No && md.perm?.canUpdate === AccessLevels.No)
+                    continue;
+                if (selectCopy.findIndex((o) => o.tid === dtd.id && o.mid === md.id) >= 0)
+                    continue;
+                let si = new SelectItem();
+                si.tid = dtd.id;
+                si.mid = md.id;
+                si.visibility = SelectItemVisibilities.Visible;
+                si.function = QueryFunctions.None;
+                if (index == -1)
+                    selectCopy.push(si);
+                else
+                    selectCopy.splice(index, 0, si);
+                setFormData({ ...formData, select: selectCopy });
+                return;
+            }
+        }
+    };
+    const onAddAll_SelectItem = (tid_alias) => {
+        if (!tid_alias)
+            return;
+        const selectCopy = formData?.select?.slice() ?? [];
+        const dtd = dcmtTypesList.find(o => o.id == tid_alias.tid);
+        if (!dtd?.metadata || dtd.metadata.length <= 0)
+            return;
+        for (const md of dtd.metadata.filter(o => o.isSystem == 0 || o.isSystem == undefined).sort((a, b) => (a.ordinalPosition ?? 0) - (b.ordinalPosition ?? 0))) {
+            if (md.perm?.canView === AccessLevels.No && md.perm?.canUpdate === AccessLevels.No)
+                continue;
+            if (selectCopy.findIndex((o) => o.tid === tid_alias.tid && o.mid === md.id && o.alias == tid_alias.alias) >= 0)
+                continue;
+            let si = new SelectItem();
+            si.tid = dtd.id;
+            si.mid = md.id;
+            si.alias = tid_alias.alias;
+            si.function = QueryFunctions.None;
+            si.visibility = SelectItemVisibilities.Visible;
+            selectCopy.push(si);
+        }
+        setFormData({ ...formData, select: selectCopy });
+    };
+    const onChange_SelectItem_MID = (tid_mid, index) => {
+        if (!tid_mid)
+            return;
+        const selectCopy = formData?.select?.map((curItem, indexOi) => {
+            if (index != indexOi)
+                return curItem;
+            let newItem = new SelectItem();
+            newItem.init({ ...curItem, tid: tid_mid.tid, mid: tid_mid.mid, alias: tid_mid.aliasTID });
+            return newItem;
+        });
+        setFormData({ ...formData, select: selectCopy });
+    };
+    const onChange_SelectItem_As = (value, index) => {
+        const selectCopy = formData.select?.map((curItem, curIndex) => {
+            if (index != curIndex)
+                return curItem;
+            let newItem = new SelectItem();
+            newItem.init({ ...curItem, as: value });
+            return newItem;
+        });
+        setFormData({ ...formData, select: selectCopy });
+    };
+    const onChange_SelectItem_QueryFunction = (value, index) => {
+        const selectCopy = formData.select?.map((curItem, curIndex) => {
+            if (index != curIndex)
+                return curItem;
+            let newItem = new SelectItem();
+            newItem.init({ ...curItem, function: value });
+            return newItem;
+        });
+        setFormData({ ...formData, select: selectCopy });
+    };
+    const getQueryFunctionsMenuItems = (si, index) => {
+        let items = [];
+        items.push({ text: LocalizeQueryFunctions(QueryFunctions.None), onClick: () => onChange_SelectItem_QueryFunction(QueryFunctions.None, index) });
+        items.push({ text: LocalizeQueryFunctions(QueryFunctions.Count), onClick: () => onChange_SelectItem_QueryFunction(QueryFunctions.Count, index) });
+        items.push({ text: LocalizeQueryFunctions(QueryFunctions.Min), onClick: () => onChange_SelectItem_QueryFunction(QueryFunctions.Min, index) });
+        items.push({ text: LocalizeQueryFunctions(QueryFunctions.Max), onClick: () => onChange_SelectItem_QueryFunction(QueryFunctions.Max, index) });
+        let dataType = getMetadataDataType(si.tid, si.mid);
+        if (dataType == MetadataDataTypes.Number)
+            items.push({ text: LocalizeQueryFunctions(QueryFunctions.Sum), onClick: () => onChange_SelectItem_QueryFunction(QueryFunctions.Sum, index) });
+        return items;
+    };
+    const getSelectMenuItems = (index) => {
+        let items = [];
+        items.push({ text: SDKUI_Localizator.AddAbove, onClick: () => onAdd_SelectItem(index) });
+        items.push({ text: SDKUI_Localizator.AddBelow, onClick: () => onAdd_SelectItem(index + 1) });
+        for (const tid_alias of qdTIDs) {
+            items.push({ text: `${SDKUI_Localizator.AddAlls} ${dcmtTypesList.length > 1 ? `(${getDisplayAlias(getDcmtTypeName(tid_alias.tid), tid_alias.alias)})` : ""}`, onClick: () => onAddAll_SelectItem(tid_alias) });
+        }
+        items.push({ text: SDKUI_Localizator.Remove, onClick: () => onRemove_SelectItem(index) });
+        items.push({ text: SDKUI_Localizator.RemoveAll, onClick: () => setFormData({ ...formData, select: undefined }) });
+        return items;
+    };
+    // #endregion
+    // #region Where
+    const onChange_WhereItem_Metadato = (tid_mid, index) => {
+        if (!tid_mid)
+            return;
+        const whereCopy = formData.where?.map((curItem, curIndex) => {
+            if (index != curIndex)
+                return curItem;
+            let newWi = new WhereItem();
+            let dataType = getMetadataDataType(tid_mid.tid, tid_mid.mid);
+            newWi.init({ ...curItem, tid: tid_mid.tid, mid: tid_mid.mid, alias: tid_mid.aliasTID, operator: dataType == MetadataDataTypes.Varchar ? QueryOperators.Contain : QueryOperators.Equal, value1: undefined, value2: undefined });
+            return newWi;
+        });
+        setFormData({ ...formData, where: whereCopy });
+    };
+    const onChange_WhereItem_QueryOperator = (qo, index) => {
+        const whereCopy = formData.where?.map((curItem, curIndex) => {
+            if (index != curIndex)
+                return curItem;
+            let newWi = new WhereItem();
+            newWi.init({ ...curItem, operator: qo, value1: undefined, value2: undefined });
+            return newWi;
+        });
+        setFormData({ ...formData, where: whereCopy });
+    };
+    const onChange_WhereItem_Or = (or, index) => {
+        const whereCopy = formData.where?.map((curItem, curIndex) => {
+            if (index != curIndex)
+                return curItem;
+            let newWi = new WhereItem();
+            newWi.init({ ...curItem, or: or });
+            return newWi;
+        });
+        setFormData({ ...formData, where: whereCopy });
+    };
+    const onChange_WhereItem_Values = (value1, value2, index) => {
+        const whereCopy = formData.where?.map((curItem, curIndex) => {
+            if (index != curIndex)
+                return curItem;
+            let newWi = new WhereItem();
+            newWi.init({ ...curItem, value1: value1, value2: value2 });
+            return newWi;
+        });
+        setFormData({ ...formData, where: whereCopy });
+    };
+    const onChange_WhereItem_Brackets = (value, isLeft, index) => {
+        const whereCopy = formData.where?.map((curItem, curIndex) => {
+            if (index != curIndex)
+                return curItem;
+            let newWi = new WhereItem();
+            if (isLeft)
+                newWi.init({ ...curItem, leftBrackets: value });
+            else
+                newWi.init({ ...curItem, rightBrackets: value });
+            return newWi;
+        });
+        setFormData({ ...formData, where: whereCopy });
+    };
+    const onAdd_WhereItem = (index = -1) => {
+        const whereCopy = formData.where?.map((whereItem) => { return whereItem; }) ?? [];
+        for (const dtd of dcmtTypesList) {
+            if (!dtd.metadata || dtd.metadata.length <= 0)
+                continue;
+            for (const md of dtd.metadata.slice().sort((a, b) => ((a.isSystem ?? 0) - (b.isSystem ?? 0) || (a.ordinalPosition ?? 0) - (b.ordinalPosition ?? 0)))) {
+                if (md.perm?.canSearch !== AccessLevels.Yes)
+                    continue;
+                if (whereCopy.findIndex((o) => o.tid === dtd.id && o.mid === md.id) >= 0)
+                    continue;
+                let newWi = new WhereItem();
+                newWi.leftBrackets = "(";
+                newWi.rightBrackets = ")";
+                newWi.operator = md.dataType == MetadataDataTypes.Varchar ? QueryOperators.Contain : QueryOperators.Equal;
+                newWi.tid = dtd.id;
+                newWi.mid = md.id;
+                if (index == -1)
+                    whereCopy.push(newWi);
+                else
+                    whereCopy.splice(index, 0, newWi);
+                setFormData({ ...formData, where: whereCopy });
+                return;
+            }
+        }
+    };
+    const onRemove_WhereItem = (index) => { setFormData({ ...formData, where: formData?.where?.filter((o, i) => i !== index) }); };
+    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 = getMetadataDataType(wi.tid, wi.mid);
+        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: "Operatori speciali", 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;
+    };
+    const calcQueryParamN = () => {
+        const queryParams = formData?.where?.filter((o) => o.value1?.startsWith("{@QueryParam")).sort((a, b) => a.value1.localeCompare(b.value1)) ?? [];
+        if (queryParams.length <= 0)
+            return "{@QueryParam1}";
+        let newParam = 0;
+        for (const element of queryParams) {
+            newParam++;
+            if (element.value1?.replace("{@QueryParam", "").slice(0, -1) == (newParam).toString())
+                continue;
+            return `{@QueryParam${newParam}}`;
+        }
+        return `{@QueryParam${newParam + 1}}`;
+    };
+    // #endregion
+    // #region OrderBy
+    const onAdd_OrderByItem = (index = -1) => {
+        const orderByCopy = formData?.orderBy?.map((oi) => { return oi; }) ?? [];
+        for (const dtd of dcmtTypesList) {
+            if (!dtd.metadata || dtd.metadata.length <= 0)
+                continue;
+            for (const md of dtd.metadata.slice().sort((a, b) => ((a.isSystem ?? 0) - (b.isSystem ?? 0) || (a.ordinalPosition ?? 0) - (b.ordinalPosition ?? 0)))) {
+                if (md.perm?.canView === AccessLevels.No && md.perm?.canUpdate === AccessLevels.No)
+                    continue;
+                if (orderByCopy.findIndex((o) => o.tid === dtd.id && o.mid === md.id) >= 0)
+                    continue;
+                let oi = new OrderByItem();
+                oi.tid = dtd.id;
+                oi.mid = md.id;
+                oi.asc = true;
+                if (index == -1)
+                    orderByCopy.push(oi);
+                else
+                    orderByCopy.splice(index, 0, oi);
+                setFormData({ ...formData, orderBy: orderByCopy });
+                return;
+            }
+        }
+    };
+    const onChange_OrderByItem_MID = (tid_mid, index) => {
+        if (!tid_mid)
+            return;
+        const orderByCopy = formData?.orderBy?.map((orderByItem, indexOi) => {
+            if (index != indexOi)
+                return orderByItem;
+            let newOi = new OrderByItem();
+            newOi.init({ ...orderByItem, tid: tid_mid.tid, mid: tid_mid.mid, alias: tid_mid.aliasTID });
+            return newOi;
+        });
+        setFormData({ ...formData, orderBy: orderByCopy });
+    };
+    const onChange_OrderByItem_Asc = (asc, oi, index) => {
+        const orderByCopy = formData?.orderBy?.map((orderByItem, indexOi) => {
+            if (index != indexOi)
+                return orderByItem;
+            let newOi = new OrderByItem();
+            newOi.init({ ...oi, asc: asc });
+            return newOi;
+        });
+        setFormData({ ...formData, orderBy: orderByCopy });
+    };
+    const onRemove_OrderByItem = (itemIndex) => { setFormData({ ...formData, orderBy: formData?.orderBy?.filter((o, i) => i !== itemIndex) }); };
+    // #endregion
+    // #region Utilities 
+    const getDcmtTypeName = (tid) => {
+        let dtd = dcmtTypesList?.find(dtd => dtd.id === tid);
+        return SDK_Globals.useLocalizedName ? dtd?.nameLoc : dtd?.name;
+    };
+    const getMetadataDataType = (tid, mid) => {
+        if (!tid)
+            return MetadataDataTypes.None;
+        let dtd = dcmtTypesList.find(dtd => dtd.id === tid);
+        let md = dtd?.metadata?.find(md => md.id === mid);
+        return md?.dataType;
+    };
+    const renderAccordionTitle = (tabItemProps, count, vil) => {
+        let title = tabItemProps.title;
+        if (count != undefined)
+            title += ` (${count})`;
+        return (_jsxs(StyledDivHorizontal, { children: [_jsx("p", { children: title }), _jsx(TMTabItemBadge, { vil: vil })] }));
+    };
+    const getColorIndex = (tid) => {
+        let index = qdTIDs.findIndex(o => o.tid == tid.tid && (o.alias ?? '') == (tid.alias ?? ''));
+        switch (index) {
+            case 0: return color1;
+            case 1: return color2;
+            case 2: return color3;
+            case 3: return color4;
+            case 4: return color5;
+            case 5: return color6;
+            case 6: return color7;
+            case 7: return color8;
+            case 8: return color9;
+            default: return colorX;
+        }
+    };
+    // #endregion
+    // #region Ricerca 
+    const renderResultSearchForm = _jsx(TMSearchResult, { context: SearchResultContext.METADATA_SEARCH, allowFloatingBar: false, onClose: () => { setShowResultSearch(false); }, searchResults: resultSearch });
+    const onSearchAsync = async (qdInput) => {
+        try {
+            let qdSearch = await prepareQdForSearchAsync(qdInput);
+            if (IsParametricQuery(qdSearch)) {
+                const qdParams = await confirmQueryParams(qdSearch, lastQdParams);
+                setLastQdParams(qdParams);
+                if (!qdParams || qdParams.length <= 0)
+                    return;
+                for (const qpd of qdParams) {
+                    let wi = qdSearch.where?.find(o => o.value1 == qpd.name);
+                    if (wi)
+                        wi.value1 = wi.value1?.replace(wi.value1, !qpd.value ? '' : qpd.value.toString());
+                    else {
+                        wi = qdSearch.where?.find(o => o.value2 == qpd.name);
+                        if (wi)
+                            wi.value2 = wi.value2?.replace(wi.value2, !qpd.value ? '' : qpd.value.toString());
+                    }
+                }
+            }
+            TMSpinner.show({ description: `${SDKUI_Localizator.Search} ...`, backgroundColor: 'transparent' });
+            let result = await SDK_Globals.tmSession?.NewSearchEngine().SearchByIDAsync(qdSearch);
+            let dcmtsFound = result?.dcmtsFound ?? 0;
+            if (dcmtsFound <= 0)
+                ShowAlert({ message: SDKUI_Localizator.NoDcmtFound, mode: 'info', title: SDKUI_Localizator.SearchResult, duration: 3000 });
+            else {
+                result && setResultSearch([result]);
+                setShowResultSearch(true);
+            }
+        }
+        catch (ex) {
+            TMExceptionBoxManager.show({ title: SDKUI_Localizator.Search, exception: ex });
+        }
+        finally {
+            TMSpinner.hide();
+        }
+    };
+    // #endregion
+    // #region DragAndDrop
+    const dragStart = (e, item) => {
+        setDraggingItem(item);
+        e.dataTransfer.setData('text/plain', '');
+    };
+    const dragEnd = () => { setDraggingItem(undefined); };
+    const dragOver = (e) => {
+        e.preventDefault();
+        e.dataTransfer.dropEffect = 'move';
+    };
+    const dropOrderBy = (e, targetItem) => {
+        if (!draggingItem)
+            return;
+        if (!formData?.orderBy)
+            return;
+        const currentIndex = formData?.orderBy.indexOf(draggingItem);
+        const targetIndex = formData?.orderBy.indexOf(targetItem);
+        const listCopy = [...formData?.orderBy ?? []];
+        if (currentIndex !== -1 && targetIndex !== -1) {
+            listCopy.splice(currentIndex, 1);
+            listCopy.splice(targetIndex, 0, draggingItem);
+            setFormData({ ...formData, orderBy: listCopy });
+        }
+    };
+    const dropWhere = (e, targetItem) => {
+        if (!draggingItem)
+            return;
+        if (!formData?.where)
+            return;
+        const currentIndex = formData?.where.indexOf(draggingItem);
+        const targetIndex = formData?.where.indexOf(targetItem);
+        const listCopy = [...formData?.where ?? []];
+        if (currentIndex !== -1 && targetIndex !== -1) {
+            listCopy.splice(currentIndex, 1);
+            listCopy.splice(targetIndex, 0, draggingItem);
+            setFormData({ ...formData, where: listCopy });
+        }
+    };
+    const dropSelect = (e, targetItem) => {
+        if (!draggingItem)
+            return;
+        if (!formData?.select)
+            return;
+        const currentIndex = formData?.select.indexOf(draggingItem);
+        const targetIndex = formData?.select.indexOf(targetItem);
+        const listCopy = [...formData?.select ?? []];
+        if (currentIndex !== -1 && targetIndex !== -1) {
+            listCopy.splice(currentIndex, 1);
+            listCopy.splice(targetIndex, 0, draggingItem);
+            setFormData({ ...formData, select: listCopy });
+        }
+    };
+    const dropJoin = (e, targetItem) => {
+        if (!draggingItem)
+            return;
+        if (!formData?.join)
+            return;
+        const currentIndex = formData?.join.indexOf(draggingItem);
+        const targetIndex = formData?.join.indexOf(targetItem);
+        const listCopy = [...formData?.join ?? []];
+        if (currentIndex !== -1 && targetIndex !== -1) {
+            listCopy.splice(currentIndex, 1);
+            listCopy.splice(targetIndex, 0, draggingItem);
+            setFormData({ ...formData, join: listCopy });
+        }
+    };
+    // #endregion
+    return (_jsxs(_Fragment, { children: [_jsxs(TMApplyForm, { isModal: false, formMode: formMode, isModified: calcIsModified(formData, formDataOrig), exception: exception, validationItems: validationItems, hasNavigation: false, customToolbarElements: _jsxs(_Fragment, { children: [_jsx(TMButton, { btnStyle: 'toolbar', caption: SDKUI_Localizator.Search, color: 'tertiary', icon: _jsx(IconSearch, {}), disabled: errorsCount > 0, onClick: async () => await onSearchAsync(formData) }), _jsx(TMButton, { btnStyle: 'toolbar', caption: SDKUI_Localizator.Count, icon: _jsx(IconCount, {}), disabled: errorsCount > 0, onClick: () => getQueryCountAsync(formData, true) }), SDK_Globals.tmSession?.SessionDescr?.appModuleID == AppModules.SURFER && _jsx(TMButton, { caption: "Passa ad archiviazione", icon: _jsx(IconArchiveDoc, {}), btnStyle: 'toolbar', fontSize: '1.3rem', onClick: () => { ShowAlert({ message: "TODO Passa ad archiviazione", mode: 'info', title: `${"TODO"}`, duration: 3000 }); } }), SDK_Globals.tmSession?.SessionDescr?.appModuleID == AppModules.SURFER && _jsx(TMButton, { caption: "Vai a risultato", icon: _jsx(IconArrowRight, {}), btnStyle: 'toolbar', fontSize: '1.3rem', onClick: () => { ShowAlert({ message: "TODO Vai a risultato", mode: 'info', title: `${"TODO"}`, duration: 3000 }); } })] }), showToolbar: showToolbar, showApply: showApply, showUndo: showUndo, showBack: showBack, onApply: () => applyData(), onClose: () => onClose?.(), onUndo: () => setFormData(formDataOrig), children: [_jsxs(Accordion, { elementAttr: { class: 'tm-query-dx-accordion' }, height: height, multiple: true, collapsible: true, repaintChangesOnly: true, deferRendering: false, animationDuration: 0, onContentReady: (e) => {
+                            let items = e.component.option("items");
+                            if (items && items.length > 0) {
+                                for (let i = 0; i < items.length; i++) {
+                                    e.component.collapseItem(i);
+                                    let title = items[i].title;
+                                    if (title == SDKUI_Localizator.Source || title == SDK_Localizator.QueryWhere) {
+                                        e.component?.expandItem(i);
+                                    }
+                                }
+                            }
+                        }, children: [(!isReadOnly || fromCount > 0) && _jsx(Item, { title: SDKUI_Localizator.Source, titleRender: (tabItemProps) => renderAccordionTitle(tabItemProps, fromCount, validationItems.filter((o) => [TMPropertyNames.fromTid, TMPropertyNames.join].includes(o.PropertyName))), children: _jsx(StyledAccordionItemContainer, { style: { maxHeight: fromCount > 0 ? '330px' : '100%' }, children: _jsxs(StyledAccordionItemContent, { "$disabled": isReadOnly, style: { height: '100%' }, children: [_jsxs(StyledRowItem, { children: [!isReadOnly && _jsx(TMButton, { btnStyle: 'icon', padding: '3px 0px', icon: _jsx(IconClear, { color: TMColors.button_icon }), caption: SDKUI_Localizator.Remove, onClick: () => { let qd = SearchEngine.NewQueryDescriptor(); setFormData({ ...qd }); } }), !isReadOnly && _jsx(TMButton, { btnStyle: 'icon', padding: '3px 0px', elementStyle: { opacity: !formData?.from?.tid ? 0.4 : 1 }, disabled: !formData?.from?.tid, icon: _jsx(IconAddCircleOutline, { color: TMColors.button_icon }), caption: SDKUI_Localizator.AddBelow, onClick: onAdd_JoinItem }), _jsx("div", { style: { pointerEvents: 'all' }, children: _jsx(TMQdDropDownMenu, { content: _jsx(IconDotsVerticalCircleOutline, { color: TMColors.button_icon }), items: [
+                                                                { icon: svgToString(showId ? _jsx(IconHide, { color: TMColors.button_icon }) : _jsx(IconShow, { color: TMColors.button_icon })), text: showId ? SDKUI_Localizator.ID_Hide : SDKUI_Localizator.ID_Show, onClick: () => setShowId(!showId) },
+                                                                { icon: svgToString(showCompleteMetadataName ? _jsx(IconHide, { color: TMColors.primary }) : _jsx(IconShow, { color: TMColors.primary })), text: showCompleteMetadataName ? SDKUI_Localizator.Hide_CompleteName : SDKUI_Localizator.Show_CompleteName, onClick: () => setShowCompleteMetadataName(!showCompleteMetadataName) }
+                                                            ] }) }), _jsx(TMDcmtTypeChooser, { disabled: isReadOnly, showEditButton: false, placeHolder: `<${SDKUI_Localizator.DcmtTypeSelect} ...>`, borderRadius: borderRadius, ShowOnlySAP: ShowOnlySAP, openEditorOnSummaryClick: true, showBorder: false, showId: showId, backgroundColor: getColorIndex({ tid: formData.from?.tid, alias: undefined }), values: [formData.from?.tid], validationItems: validationItems.filter((o) => o.PropertyName === TMPropertyNames.fromTid), onValueChanged: (tids) => { let qd = SearchEngine.NewQueryDescriptor(); qd.from.tid = tids[0]; setFormData({ ...qd }); onFromTIDChanged?.(tids[0]); } })] }), formData?.join?.map((ji, index) => {
+                                                return (_jsxs("div", { style: { width: 'max-content', padding: isReadOnly ? '0px 20px' : 0 }, children: [_jsxs(StyledRowItem, { onDragEnd: dragEnd, onDragOver: dragOver, onDrop: (e) => dropJoin(e, ji), children: [!isReadOnly && _jsx(StyledDraggableDiv, { draggable: true, onDragStart: (e) => dragStart(e, ji), children: _jsx(IconDraggabledots, { fontSize: 15, color: TMColors.button_icon }) }), !isReadOnly && _jsx(TMButton, { btnStyle: 'icon', padding: '3px 0px', icon: _jsx(IconClear, { color: TMColors.button_icon }), caption: SDKUI_Localizator.Remove, onClick: () => onRemove_JoinItem(index) }), !isReadOnly && _jsx(TMButton, { btnStyle: 'icon', padding: '3px 0px', icon: _jsx(IconAddCircleOutline, { color: TMColors.button_icon }), caption: SDKUI_Localizator.AddBelow, onClick: () => onAdd_JoinItem(index + 1) }), !isReadOnly && _jsx(TMQdDropDownMenu, { content: _jsx(TMTooltip, { content: SDK_Localizator.toCaseWord(SDKUI_Localizator.OneMore), children: _jsx(IconDotsVerticalCircleOutline, { color: TMColors.button_icon }) }), items: [
+                                                                        { text: SDKUI_Localizator.AddAbove, onClick: () => onAdd_JoinItem(index) },
+                                                                        { text: SDKUI_Localizator.AddBelow, onClick: () => onAdd_JoinItem(index + 1) },
+                                                                        { text: SDKUI_Localizator.AddDefinition, onClick: () => onAdd_OnJoinItem(index, 0) },
+                                                                        { text: SDKUI_Localizator.Remove, onClick: () => onRemove_JoinItem(index) },
+                                                                        { text: SDKUI_Localizator.RemoveAll, onClick: () => setFormData({ ...formData, join: undefined }) }
+                                                                    ] }), _jsx(TMQdDropDownMenu, { backgroundColor: colorOperator, color: 'green', borderRadius: borderRadius, content: _jsx(StyledItemWrapper, { children: LocalizeQueryJoinTypes(ji.joinType) }), items: getJoinTypesMenuItems(index) }), _jsx(TMDcmtTypeChooser, { disabled: isReadOnly, showEditButton: false, placeHolder: `<${SDKUI_Localizator.DcmtTypeSelect} ...>`, borderRadius: borderRadius, ShowOnlySAP: ShowOnlySAP, openEditorOnSummaryClick: true, showBorder: false, showId: showId, backgroundColor: getColorIndex({ tid: ji.tid, alias: ji.alias }), values: ji.tid ? [ji.tid] : [], onValueChanged: (newValues) => onChange_JoinItem_TID(newValues[0], index) }), ji.alias &&
+                                                                    _jsx(StyledItemWrapper, { style: { fontStyle: 'italic', color: TMColors.primary }, children: `AS ${getDisplayAlias(getDcmtTypeName(ji.tid), ji.alias)}` })] }), ji.on?.map((onItem, indexOn) => {
+                                                            return (_jsxs(StyledRowItem, { style: { marginLeft: '40px' }, children: [!isReadOnly && _jsx(TMButton, { btnStyle: 'icon', padding: '3px 0px', icon: _jsx(IconClear, { color: TMColors.button_icon }), caption: SDKUI_Localizator.Remove, onClick: () => onRemove_OnJoinItem(index, indexOn) }), !isReadOnly && _jsx(TMButton, { btnStyle: 'icon', padding: '3px 0px', icon: _jsx(IconAddCircleOutline, { color: TMColors.button_icon }), caption: SDKUI_Localizator.AddBelow, onClick: () => onAdd_OnJoinItem(index, indexOn + 1) }), !isReadOnly && _jsx(TMQdDropDownMenu, { content: _jsx(TMTooltip, { content: SDK_Localizator.toCaseWord(SDKUI_Localizator.OneMore), children: _jsx(IconDotsVerticalCircleOutline, { color: TMColors.button_icon }) }), items: [
+                                                                            { text: SDKUI_Localizator.AddAbove, onClick: () => onAdd_OnJoinItem(index, indexOn) },
+                                                                            { text: SDKUI_Localizator.AddBelow, onClick: () => onAdd_OnJoinItem(index, indexOn + 1) },
+                                                                            { text: SDKUI_Localizator.Remove, onClick: () => onRemove_OnJoinItem(index, indexOn) },
+                                                                            {
+                                                                                text: SDKUI_Localizator.RemoveAll, onClick: () => {
+                                                                                    if (!formData.join)
+                                                                                        return;
+                                                                                    const joinCopy = formData?.join?.map((ji) => { return { ...ji }; }) ?? [];
+                                                                                    joinCopy[index].on = undefined;
+                                                                                    setFormData({ ...formData, join: joinCopy });
+                                                                                }
+                                                                            }
+                                                                        ] }), _jsx(TMMetadataChooser, { disabled: isReadOnly, showEditButton: false, getColorIndex: getColorIndex, showCompleteMetadataName: showCompleteMetadataName, openEditorOnSummaryClick: true, showBorder: false, borderRadius: borderRadius, showId: showId, backgroundColor: getColorIndex({ tid: onItem.leftTID, alias: onItem.leftAlias }), qd: formData, values: onItem.leftTID ? [{ tid: onItem.leftTID, mid: onItem.leftMID, aliasTID: onItem.leftAlias }] : [], onValueChanged: (values) => { values.length > 0 && onChange_OnJoinMetadatoLeft(values[0], index, indexOn); } }), _jsx(TMQdDropDownMenu, { backgroundColor: colorOperator, color: 'green', borderRadius: borderRadius, content: _jsx(StyledItemWrapper, { children: LocalizeQueryOperators(onItem.operator) }), items: [] }), _jsx(TMMetadataChooser, { disabled: isReadOnly, showEditButton: false, getColorIndex: getColorIndex, showCompleteMetadataName: showCompleteMetadataName, openEditorOnSummaryClick: true, showBorder: false, borderRadius: borderRadius, showId: showId, backgroundColor: getColorIndex({ tid: onItem.rightTID, alias: onItem.rightAlias }), qd: formData, values: onItem.rightTID ? [{ tid: onItem.rightTID, mid: onItem.rightMID, aliasTID: onItem.rightAlias }] : [], onValueChanged: (values) => { values.length > 0 && onChange_OnJoinMetadatoRight(values[0], index, indexOn); } })] }, indexOn));
+                                                        })] }, `${ji.tid}_${index}`));
+                                            }), _jsx(TMVilViewer, { vil: validationItems.filter((o) => o.PropertyName === TMPropertyNames.join) })] }) }) }), canShowSelect && _jsx(Item, { title: SDK_Localizator.QuerySelect, titleRender: (tabItemProps) => renderAccordionTitle(tabItemProps, selectCount, validationItems.filter((o) => o.PropertyName == TMPropertyNames.select)), children: _jsx(StyledAccordionItemContainer, { children: _jsxs(StyledAccordionItemContent, { "$disabled": isReadOnly, children: [_jsx(TMVilViewer, { vil: validationItems.filter((o) => o.PropertyName === TMPropertyNames.select) }), (!formData?.select || formData?.select.length <= 0) && !isReadOnly &&
+                                                _jsxs(StyledRowItem, { children: [_jsx(TMButton, { btnStyle: 'normal', disabled: !formData?.from?.tid, caption: SDKUI_Localizator.Add, onClick: onAdd_SelectItem }), dcmtTypesList.length == 1
+                                                            ? _jsx(TMButton, { btnStyle: 'normal', disabled: !formData?.from?.tid, caption: SDKUI_Localizator.AddAlls, onClick: () => { onAddAll_SelectItem(qdTIDs[0]); } })
+                                                            : _jsx(TMQdDropDownMenu, { backgroundColor: 'white', borderRadius: '3px', content: _jsx(TMButton, { btnStyle: 'normal', disabled: !formData?.from?.tid, caption: SDKUI_Localizator.AddAlls }), items: qdTIDs.map((tid_alias) => ({ text: `${getDisplayAlias(getDcmtTypeName(tid_alias.tid), tid_alias.alias)}`, onClick: () => { onAddAll_SelectItem(tid_alias); } })) })] }), formData?.select?.map((si, index) => {
+                                                return (_jsxs(StyledRowItem, { onDragEnd: dragEnd, onDragOver: dragOver, onDrop: (e) => dropSelect(e, si), children: [!isReadOnly && _jsx(StyledDraggableDiv, { draggable: true, onDragStart: (e) => dragStart(e, si), children: _jsx(IconDraggabledots, { fontSize: 15, color: TMColors.button_icon }) }), !isReadOnly && _jsx(TMButton, { btnStyle: 'icon', padding: '3px 0px', icon: _jsx(IconClear, { color: TMColors.button_icon }), caption: SDKUI_Localizator.Remove, onClick: () => onRemove_SelectItem(index) }), !isReadOnly && _jsx(TMButton, { btnStyle: 'icon', padding: '3px 0px', icon: _jsx(IconAddCircleOutline, { color: TMColors.button_icon }), caption: SDKUI_Localizator.AddBelow, onClick: () => onAdd_SelectItem(index + 1) }), !isReadOnly && _jsx(TMQdDropDownMenu, { content: _jsx(TMTooltip, { content: SDK_Localizator.toCaseWord(SDKUI_Localizator.OneMore), children: _jsx(IconDotsVerticalCircleOutline, { color: TMColors.button_icon }) }), items: getSelectMenuItems(index) }), (!isReadOnly || (si.function && si.function != QueryFunctions.None)) && _jsx(TMQdDropDownMenu, { backgroundColor: colorOperator, color: 'green', borderRadius: borderRadius, content: _jsx(StyledItemWrapper, { children: si.function === QueryFunctions.None ? "..." : LocalizeQueryFunctions(si.function) }), items: getQueryFunctionsMenuItems(si, index) }), _jsx(TMMetadataChooser, { disabled: isReadOnly, filterMetadata: (o => o.perm?.canView === AccessLevels.Yes || o.perm?.canUpdate === AccessLevels.Yes), showEditButton: false, getColorIndex: getColorIndex, showCompleteMetadataName: showCompleteMetadataName, openEditorOnSummaryClick: true, showBorder: false, borderRadius: borderRadius, showId: showId, backgroundColor: getColorIndex({ tid: si.tid, alias: si.alias }), qd: formData, values: [{ tid: si.tid, mid: si.mid, aliasTID: si.alias }], onValueChanged: (values) => { values.length > 0 && onChange_SelectItem_MID(values[0], index); } }), (!isReadOnly || si.as) && _jsx(TMQdEditableItem, { value: si.as, backgroundColor: colorValue, placeHolder: `<${SDKUI_Localizator.Query_EnterAlias}...>`, width: '100%', onValueChanged: (value) => { onChange_SelectItem_As(value, index); } })] }, `${si.tid}_${si.mid}_${index}`));
+                                            })] }) }) }), fromCount > 0 && (!isReadOnly || whereCount > 0) && _jsx(Item, { title: SDK_Localizator.QueryWhere, titleRender: (tabItemProps) => renderAccordionTitle(tabItemProps, whereCount, validationItems.filter((o) => o.PropertyName == TMPropertyNames.where)), children: _jsx(StyledAccordionItemContainer, { children: _jsxs(StyledAccordionItemContent, { "$disabled": isReadOnly, children: [_jsx(TMVilViewer, { vil: validationItems.filter((o) => o.PropertyName === TMPropertyNames.where) }), (!formData?.where || formData?.where.length <= 0) && !isReadOnly &&
+                                                _jsx(StyledRowItem, { children: _jsx(TMButton, { btnStyle: 'normal', disabled: !formData?.from?.tid, caption: SDKUI_Localizator.Add, onClick: onAdd_WhereItem }) }), formData?.where?.map((wi, index) => {
+                                                return (_jsxs(StyledRowItem, { onDragEnd: dragEnd, onDragOver: dragOver, onDrop: (e) => dropWhere(e, wi), children: [!isReadOnly && _jsx(StyledDraggableDiv, { draggable: true, onDragStart: (e) => dragStart(e, wi), children: _jsx(IconDraggabledots, { fontSize: 15, color: TMColors.button_icon }) }), !isReadOnly && _jsx(TMButton, { btnStyle: 'icon', padding: '3px 0px', icon: _jsx(IconClear, { color: TMColors.button_icon }), caption: SDKUI_Localizator.Remove, onClick: () => onRemove_WhereItem(index) }), !isReadOnly && _jsx(TMButton, { btnStyle: 'icon', padding: '3px 0px', icon: _jsx(IconAddCircleOutline, { color: TMColors.button_icon }), caption: SDKUI_Localizator.AddBelow, onClick: () => onAdd_WhereItem(index + 1) }), !isReadOnly && _jsx(TMQdDropDownMenu, { content: _jsx(TMTooltip, { content: SDK_Localizator.toCaseWord(SDKUI_Localizator.OneMore), children: _jsx(IconDotsVerticalCircleOutline, { color: TMColors.button_icon }) }), items: [
+                                                                { text: SDKUI_Localizator.AddAbove, onClick: () => onAdd_WhereItem(index) },
+                                                                { text: SDKUI_Localizator.AddBelow, onClick: () => onAdd_WhereItem(index + 1) },
+                                                                { text: SDKUI_Localizator.Remove, onClick: () => onRemove_WhereItem(index) },
+                                                                { text: SDKUI_Localizator.RemoveAll, onClick: () => setFormData({ ...formData, where: undefined }) },
+                                                                {
+                                                                    text: "Imposta parametro", items: [
+                                                                        { text: "{@UserName}", onClick: () => onChange_WhereItem_Values("{@UserName}", undefined, index) },
+                                                                        { text: "{@UserID}", onClick: () => onChange_WhereItem_Values("{@UserID}", undefined, index) },
+                                                                        { text: "{@QueryParam...N}", onClick: () => onChange_WhereItem_Values(calcQueryParamN(), undefined, index) }
+                                                                    ]
+                                                                },
+                                                            ] }), _jsx(TMQdDropDownMenu, { disabled: index == 0, color: 'green', content: _jsx("div", { style: { fontSize: '1rem' }, children: wi.or ? 'OR' : 'AND' }), items: [
+                                                                { text: 'AND', onClick: () => onChange_WhereItem_Or(false, index) },
+                                                                { text: 'OR', onClick: () => onChange_WhereItem_Or(true, index) }
+                                                            ] }), _jsx(TMQdEditableItem, { value: wi.leftBrackets, allowedPattern: /\(/g, backgroundColor: colorBrackets, onValueChanged: (value) => { onChange_WhereItem_Brackets(value, true, index); } }), _jsx(TMMetadataChooser, { disabled: isReadOnly, filterMetadata: (o => o.perm?.canSearch === AccessLevels.Yes), showEditButton: false, getColorIndex: getColorIndex, showCompleteMetadataName: showCompleteMetadataName, openEditorOnSummaryClick: true, showBorder: false, borderRadius: borderRadius, showId: showId, backgroundColor: getColorIndex({ tid: wi.tid, alias: wi.alias }), qd: formData, values: [{ tid: wi.tid, mid: wi.mid, aliasTID: wi.alias }], onValueChanged: (values) => { values.length > 0 && onChange_WhereItem_Metadato(values[0], index); } }), _jsx(TMQdDropDownMenu, { backgroundColor: colorOperator, color: 'green', borderRadius: borderRadius, content: _jsx(StyledDivHorizontal, { children: _jsx(StyledItemWrapper, { children: LocalizeQueryOperators(wi.operator) }) }), items: getQueryOperatorsMenuItems(wi, index) }), _jsx(TMQdWhereItemValue, { whereItem: wi, index: index, onValueChanged: (values) => { onChange_WhereItem_Values(values[0], values[1], index); } }), _jsx(TMQdEditableItem, { value: wi.rightBrackets, allowedPattern: /\)/g, backgroundColor: colorBrackets, onValueChanged: (value) => { onChange_WhereItem_Brackets(value, false, index); } })] }, `${wi.tid}_${wi.mid}_${index}`));
+                                            })] }) }) }), fromCount > 0 && (!isReadOnly || orderByCount > 0) && _jsx(Item, { title: SDK_Localizator.QueryOrderBy, titleRender: (tabItemProps) => renderAccordionTitle(tabItemProps, orderByCount, validationItems.filter((o) => o.PropertyName == TMPropertyNames.orderBy)), children: _jsx(StyledAccordionItemContainer, { children: _jsxs(StyledAccordionItemContent, { "$disabled": isReadOnly, children: [(!formData?.orderBy || formData?.orderBy.length <= 0) && !isReadOnly &&
+                                                _jsx(StyledRowItem, { children: _jsx(TMButton, { btnStyle: 'normal', disabled: !formData?.from?.tid, caption: SDKUI_Localizator.Add, onClick: onAdd_OrderByItem }) }), formData?.orderBy?.map((oi, index) => {
+                                                return (_jsxs(StyledRowItem, { onDragEnd: dragEnd, onDragOver: dragOver, onDrop: (e) => dropOrderBy(e, oi), children: [!isReadOnly && _jsx(StyledDraggableDiv, { draggable: true, onDragStart: (e) => dragStart(e, oi), children: _jsx(IconDraggabledots, { fontSize: 15, color: TMColors.button_icon }) }), !isReadOnly && _jsx(TMButton, { btnStyle: 'icon', padding: '3px 0px', icon: _jsx(IconClear, { color: TMColors.button_icon }), caption: SDKUI_Localizator.Remove, onClick: () => onRemove_OrderByItem(index) }), !isReadOnly && _jsx(TMButton, { btnStyle: 'icon', padding: '3px 0px', icon: _jsx(IconAddCircleOutline, { color: TMColors.button_icon }), caption: SDKUI_Localizator.AddBelow, onClick: () => onAdd_OrderByItem(index + 1) }), !isReadOnly && _jsx(TMQdDropDownMenu, { content: _jsx(TMTooltip, { content: SDK_Localizator.toCaseWord(SDKUI_Localizator.OneMore), children: _jsx(IconDotsVerticalCircleOutline, { color: TMColors.button_icon }) }), items: [
+                                                                { text: SDKUI_Localizator.AddAbove, onClick: () => onAdd_OrderByItem(index) },
+                                                                { text: SDKUI_Localizator.AddBelow, onClick: () => onAdd_OrderByItem(index + 1) },
+                                                                { text: SDKUI_Localizator.Remove, onClick: () => onRemove_OrderByItem(index) },
+                                                                { text: SDKUI_Localizator.RemoveAll, onClick: () => setFormData({ ...formData, orderBy: undefined }) },
+                                                            ] }), _jsx(TMMetadataChooser, { disabled: isReadOnly, filterMetadata: (o => o.perm?.canView === AccessLevels.Yes || o.perm?.canUpdate === AccessLevels.Yes), showEditButton: false, getColorIndex: getColorIndex, showCompleteMetadataName: showCompleteMetadataName, openEditorOnSummaryClick: true, showBorder: false, showId: showId, borderRadius: borderRadius, backgroundColor: getColorIndex({ tid: oi.tid, alias: oi.alias }), qd: formData, values: [{ tid: oi.tid, mid: oi.mid, aliasTID: oi.alias }], onValueChanged: (values) => onChange_OrderByItem_MID(values[0], index) }), _jsx(TMQdDropDownMenu, { backgroundColor: colorOperator, borderRadius: borderRadius, content: _jsx(StyledItemWrapper, { children: oi.asc ? 'ASC' : 'DESC' }), items: [
+                                                                { text: 'ASC', onClick: () => onChange_OrderByItem_Asc(true, oi, index) },
+                                                                { text: 'DESC', onClick: () => onChange_OrderByItem_Asc(false, oi, index) }
+                                                            ] })] }, `${oi.tid}_${oi.mid}_${index}`));
+                                            })] }) }) }), fromCount > 0 && _jsx(Item, { title: SDKUI_Localizator.Options, titleRender: (tabItemProps) => renderAccordionTitle(tabItemProps, undefined, []), children: _jsx(StyledAccordionItemContainer, { children: _jsxs(StyledAccordionItemContent, { "$disabled": isReadOnly, children: [showDistinct && _jsx(TMCheckBox, { label: SDK_Localizator.QueryDistinct, value: formData.isDistinct, onValueChanged: () => { setFormData({ ...formData, isDistinct: !formData.isDistinct }); } }), _jsx(TMTextBox, { type: 'number', width: '200px', label: SDKUI_Localizator.MaxDcmtsToBeReturned, validationItems: validationItems.filter((o) => o.PropertyName == TMPropertyNames.maxDcmtsToBeReturned), value: formData.maxDcmtsToBeReturned, onBlur: (newValue) => setFormData({ ...formData, maxDcmtsToBeReturned: Number(newValue) }) })] }) }) })] }), _jsx(ConfirmQueryParamsDialog, {})] }), showResultSearch && _jsxs(StyledModalContainer, { children: [" ", renderResultSearchForm, " "] })] }));
+};
+export default TMQueryEditor;
+const TMQdEditableItem = ({ value, placeHolder, width, backgroundColor, allowedPattern, onValueChanged }) => {
+    const [isComponentVisible, setIsComponentVisible] = useState(false);
+    const [currentValue1, setCurrentValue1] = useState();
+    useEffect(() => { setCurrentValue1(value); }, [value]);
+    const ref = useOutsideClick((escPressed) => {
+        setIsComponentVisible(false);
+        if (escPressed)
+            return;
+        if (currentValue1 != value)
+            onValueChanged?.(currentValue1);
+    });
+    const handleTextBoxValueChanged = useCallback((e) => {
+        setCurrentValue1(e.target.value);
+    }, []);
+    return (_jsx("div", { ref: ref, children: isComponentVisible ?
+            _jsx(TMTextBox, { elementStyle: { marginLeft: '5px', marginRight: '5px' }, width: width ?? '50px', autoFocus: true, value: value ?? '', onValueChanged: handleTextBoxValueChanged, allowedPattern: allowedPattern })
+            :
+                _jsx(StyledItemWrapper, { onClick: () => setIsComponentVisible(true), style: { backgroundColor: backgroundColor, cursor: 'pointer' }, children: value ?? placeHolder }) }));
+};
+const TMQdWhereItemValue = ({ whereItem, index, queryParamsDynDataList, onlyEditing = false, onValueChanged, onCascadeRefreshDynDataLists }) => {
+    let EditingModes;
+    (function (EditingModes) {
+        EditingModes[EditingModes["None"] = 0] = "None";
+        EditingModes[EditingModes["Editing"] = 1] = "Editing";
+        EditingModes[EditingModes["Chooser"] = 2] = "Chooser";
+    })(EditingModes || (EditingModes = {}));
+    const [showValue1, setShowValue1] = useState(false);
+    const [showValue2, setShowValue2] = useState(false);
+    const [numberOfOperands, setNumberOfOperands] = useState(0);
+    const [md, setMd] = useState();
+    const [editingMode, setEditingMode] = useState(EditingModes.Editing);
+    const [isEditableList, setIsEditableList] = useState(false);
+    const [showDataListChooseForm, setShowDataListChooseForm] = useState(false);
+    const [dataList, setDataList] = useState();
+    const [showDynDataListChooseForm, setShowDynDataListChooseForm] = useState(false);
+    const [dynDl, setDynDl] = useState();
+    const [dataSource, setDataSource] = useState();
+    const [showUserChooseForm, setShowUserChooseForm] = useState(false);
+    const [users, setUsers] = useState();
+    const [containerElement, setContainerElement] = useState();
+    const [isEditing, setIsEditing] = useState(false);
+    const [currentValue1, setCurrentValue1] = useState();
+    const [currentValue2, setCurrentValue2] = useState();
+    const ref = useOutsideClick((escPressed) => {
+        setIsEditing(false);
+        if (onlyEditing)
+            return;
+        if (escPressed)
+            return;
+        if (currentValue1 != whereItem.value1 || currentValue2 != whereItem.value2)
+            onValueChanged?.([currentValue1, currentValue2]);
+    });
+    const containerId = `editorContainer_${index}_${genUniqueId()}`;
+    useEffect(() => {
+        setContainerElement(document.getElementById(containerId));
+    }, []);
+    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;
+        }
+        setNumberOfOperands(operands);
+        getMetadata().then((mdOut) => {
+            setMd(mdOut);
+            switch (mdOut?.dataDomain) {
+                case MetadataDataDomains.DataList:
+                    setEditingMode(whereItem.operator == QueryOperators.Custom ? EditingModes.Editing : EditingModes.Chooser);
+                    setIsEditableList(false);
+                    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.DynamicDataList: {
+                    if (dynDl != undefined)
+                        return;
+                    TMSpinner.show({ description: `${SDKUI_Localizator.Loading} - ${"Lista dati dinamica"} ...` });
+                    let d = mdOut?.dynDL_Cfgs?.[0];
+                    if (mdOut?.dynDL_IsMultiCfg == 1)
+                        d = mdOut?.dynDL_Cfgs?.[1];
+                    setDynDl(d);
+                    let isEditable = IsParametricQuery(d?.qd);
+                    setIsEditableList(isEditable);
+                    setEditingMode(whereItem.operator == QueryOperators.Custom || isEditable ? EditingModes.Editing : EditingModes.Chooser);
+                    mdOut?.id && SDK_Globals.tmSession?.NewSearchEngine().GetDynDataListValuesAsync(whereItem.tid, mdOut?.id, LayoutModes.None, queryParamsDynDataList ?? []).then((result) => {
+                        TMSpinner.hide();
+                        setDataSource(result);
+                    }).catch((err) => { TMSpinner.hide(); TMExceptionBoxManager.show({ exception: err }); });
+                    break;
+                }
+                case MetadataDataDomains.UserID:
+                    setEditingMode(whereItem.operator == QueryOperators.Custom ? EditingModes.Editing : EditingModes.Chooser);
+                    if (users !== undefined)
+                        return;
+                    TMSpinner.show({ description: `${SDKUI_Localizator.Loading} - ${SDK_Localizator.Users} ...` });
+                    UserListCacheService.GetAllAsync().then((resultUsers) => {
+                        TMSpinner.hide();
+                        setUsers(resultUsers ?? []);
+                    });
+                    break;
+                default:
+                    setEditingMode(EditingModes.Editing);
+                    break;
+            }
+        });
+        setCurrentValue1(whereItem.value1);
+        setCurrentValue2(whereItem.value2);
+    }, [whereItem]);
+    useEffect(() => {
+        if (!IsParametricQuery(dynDl?.qd))
+            return;
+        if ((queryParamsDynDataList?.length ?? 0) <= 0) {
+            setDataSource(undefined);
+            return;
+        }
+        SDK_Globals.tmSession?.NewSearchEngine().GetDynDataListValuesAsync(whereItem.tid, whereItem.mid, LayoutModes.None, queryParamsDynDataList ?? []).then((result) => {
+            setDataSource(result);
+        }).catch((err) => { TMExceptionBoxManager.show({ exception: err }); });
+    }, [queryParamsDynDataList]);
+    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);
+            setCurrentValue1(newValue);
+        }
+        else {
+            newValues.push(whereItem.value1);
+            newValues.push(newValue);
+            setCurrentValue2(newValue);
+        }
+        onValueChanged?.(newValues);
+    };
+    const chooseValue = () => {
+        switch (md?.dataDomain) {
+            case MetadataDataDomains.DataList:
+                setShowDataListChooseForm(true);
+                break;
+            case MetadataDataDomains.DynamicDataList:
+                setShowDynDataListChooseForm(true);
+                break;
+            case MetadataDataDomains.UserID:
+                setShowUserChooseForm(true);
+                break;
+        }
+    };
+    const mdValueEmptyDescr = `<${SDKUI_Localizator.Search_EnterValue}...>`;
+    return (_jsxs("div", { ref: ref, id: containerId, style: { width: isEditing && whereItem.operator == QueryOperators.Custom && !onlyEditing ? "100%" : undefined }, children: [(isEditing || onlyEditing) &&
+                _jsxs(StyledRowItem, { children: [showValue1 && _jsx(TMMetadataEditor, { tid: whereItem.tid, mid: whereItem.mid, layoutMode: LayoutModes.None, isEditable: isEditableList, value: whereItem.value1, queryOperator: whereItem.operator, autoFocus: !onlyEditing, containerElement: containerElement, onValueChange: (value) => setCurrentValue1(value), onValueChanged: (value) => { normalizeValue(value, true); } }), showValue2 && _jsx(TMMetadataEditor, { tid: whereItem.tid, mid: whereItem.mid, layoutMode: LayoutModes.None, isEditable: isEditableList, value: whereItem.value1, queryOperator: whereItem.operator, autoFocus: !onlyEditing, containerElement: containerElement, onValueChange: (value) => setCurrentValue2(value), onValueChanged: (value) => { normalizeValue(value, false); } })] }), !isEditing && !onlyEditing && (showValue1 || showValue2) &&
+                _jsxs(StyledDivHorizontal, { children: [(editingMode == EditingModes.Chooser) &&
+                            _jsxs(_Fragment, { children: [showDataListChooseForm && !isEditableList &&
+                                        _jsx(TMDataListItemChooserForm, { height: '500px', width: '450px', allowMultipleSelection: whereItem.operator == QueryOperators.In || whereItem.operator == QueryOperators.NotIn, dataListId: md?.dataListID, selectedIDs: whereItem.value1?.split(',').map((item) => !item.startsWith("'") ? item : item.slice(1, -1)) ?? [], onClose: () => setShowDataListChooseForm(false), onChoose: (IDs) => { IDs && normalizeValue(IDs.length == 1 ? IDs[0] : IDs.map((item) => `${item}`).join(","), true); } }), showDynDataListChooseForm && !isEditableList &&
+                                        _jsx(TMDynDataListItemChooserForm, { TID: whereItem.tid, MID: md?.id, height: '500px', width: '450px', dynDL: dynDl, allowMultipleSelection: false, searchResult: dataSource, selectedIDs: [whereItem.value1], onClose: () => setShowDynDataListChooseForm(false), onChoose: (IDs) => {
+                                                IDs && normalizeValue(IDs.length == 1 ? IDs[0] : IDs.map((item) => `${item}`).join(","), true);
+                                                if (!dynDl)
+                                                    return;
+                                                if (!dynDl.onValueChanged_DynDataListsToBeRefreshed)
+                                                    return;
+                                                let row = dataSource?.dtdResult?.rows?.filter(o => o[dynDl.selectItemForValue ?? 0] == IDs?.[0]);
+                                                if (!row)
+                                                    return;
+                                                let toBeRefreshed = [];
+                                                for (const t of dynDl.onValueChanged_DynDataListsToBeRefreshed) {
+                                                    let mid = t.item1;
+                                                    let queryParams = [];
+                                                    if ((t.item2 ?? 0) >= 0)
+                                                        queryParams.push(row[0][t.item2 ?? 0]);
+                                                    if ((t.item3 ?? 0) >= 0)
+                                                        queryParams.push(row[0][t.item3 ?? 0]);
+                                                    if ((t.item4 ?? 0) >= 0)
+                                                        queryParams.push(row[0][t.item4 ?? 0]);
+                                                    if ((t.item5 ?? 0) >= 0)
+                                                        queryParams.push(row[0][t.item5 ?? 0]);
+                                                    toBeRefreshed.push({ mid: mid, queryParams: queryParams, midStarter: md?.id });
+                                                }
+                                                onCascadeRefreshDynDataLists?.(toBeRefreshed);
+                                            } }), showUserChooseForm &&
+                                        _jsx(TMUserChooserForm, { height: '550px', width: '600px', allowMultipleSelection: whereItem.operator == QueryOperators.In || whereItem.operator == QueryOperators.NotIn, dataSource: users, selectedIDs: whereItem.value1?.split(',').map((item) => !item.startsWith("'") ? Number(item) : Number(item.slice(1, -1))) ?? [], onClose: () => setShowUserChooseForm(false), onChoose: (IDs) => { IDs && normalizeValue(IDs.length == 1 ? IDs[0].toString() : IDs.map((item) => item).join(","), true); } })] }), _jsx(StyledItemWrapper, { onClick: () => { (editingMode == EditingModes.Editing || isEditableList) ? setIsEditing(true) : chooseValue(); }, style: { backgroundColor: colorValue, cursor: 'pointer', width: '100%' }, children: numberOfOperands == 11 || numberOfOperands == 12 || numberOfOperands == 99
+                                ? _jsx(_Fragment, { children: whereItem.value1 ?? mdValueEmptyDescr })
+                                : _jsxs(_Fragment, { children: [displayMetadataValue(md, whereItem.value1, mdValueEmptyDescr), numberOfOperands == 2 && (whereItem.value2 && whereItem.value2 != '' ? ` - ${displayMetadataValue(md, whereItem.value2, mdValueEmptyDescr)}` : ' - ?')] }) })] })] }));
+};
+const StyledContent = styled.div `
+    cursor: pointer;
+    border-radius: ${props => props.$borderRadius};
+    color: ${props => props.$color};
+    /* background-color: ${props => props.$backgroundColor}; */
+    background-color: transparent;
+    opacity: ${props => props.$disabled ? 0.4 : 1};
+    pointer-events: ${props => props.$disabled ? 'none' : ''};
+    user-select: none;
+    display: flex;
+    align-items: center;
+
+    &:focus {
+        outline: none;
+        border-bottom: ${props => props.$disabled ? '' : '2px solid'};
+        border-bottom-color: ${TMColors.primary};
+    }
+`;
+const TMQdDropDownMenu = ({ content, items, disabled = false, color = TMColors.text_normal, backgroundColor = TMColors.default_background, borderRadius }) => {
+    const [id, setID] = useState('');
+    useEffect(() => { setID(genUniqueId()); }, [content]);
+    return (_jsxs(_Fragment, { children: [_jsx(StyledContent, { id: `idContainer${id}`, tabIndex: disabled ? -1 : 0, "$disabled": disabled, "$color": color, "$backgroundColor": backgroundColor, "$borderRadius": borderRadius, children: content }), _jsx(ContextMenu, { target: `#idContainer${id}`, dataSource: items, showEvent: 'click' })] }));
+};