@topconsultnpm/sdkui-react-beta 6.5.51

package/lib/components/query/TMQueryEditor.js

@@ -0,0 +1,1044 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Fragment, useEffect, useState } from 'react';
+import { SDK_Localizator, AccessLevels, OnJoinItem, JoinTypes, PlatformObjectValidator, MetadataDataDomains, DcmtTypeListCacheService, JoinItem, SystemMIDsAsNumber, MetadataDataTypes, OrderByItem, QueryDescriptor, QueryFunctions, QueryOperators, ResultTypes, SelectItem, SDK_Globals, UserListCacheService, WhereItem, SearchEngine, SelectItemVisibilities, DataListCacheService, QueryValidatorOptions, TMPropertyNames, AppModules } from '@topconsultnpm/sdk-ts-beta';
+import styled from 'styled-components';
+import TMQueryResult from './TMQueryResult';
+import Accordion, { Item } from 'devextreme-react/accordion';
+import { SDKUI_Localizator, IconSettings, IconSearch, IconCount, getQueryCountAsync, calcIsModified, IconClear, IconAddCircleOutline, IconDotsVerticalCircleOutline, IconHide, IconShow, IconDraggabledots, genUniqueId, LocalizeQueryOperators, LocalizeQueryFunctions, LocalizeQueryJoinTypes, IconArchiveDoc, IconArrowRight, IconCloseCircle, IconCopy, IconDcmtTypeOnlyMetadata, IconDelete, IconDownload, IconDuplicate, IconEdit, IconMail, IconMenuVertical, IconPreview, IconStar, IconSuccessCirlce, IconUndo, IconExportTo, IconAdvanced, IconArrowSortedDown, IconArrowSortedUp, IconArrowUnsorted, IconBatchUpdate, IconCheckFile, IconCheckIn, IconConvertFilePdf, IconEasy, IconRecursiveOps, IconRelation, IconShare, IconSharedDcmt, IconSignature, IconSubstFile, IconSync } from '../../helper';
+import { displayMetadataValue, getDcmtTypesByQdAsync, getTIDsByQd } from '../../helper/queryHelper';
+import { useOutsideClick } from '../../hooks/useOutsideClick';
+import { FormModes } from '../../ts';
+import { TMColors } from '../../utils/theme';
+import { StyledDivHorizontal, StyledDraggableDiv, StyledModalContainer } from '../base/Styled';
+import TMButton from '../base/TMButton';
+import TMDropDownMenu from '../base/TMDropDownMenu';
+import { TMExceptionBoxManager, TMMessageBoxManager, ButtonNames } 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 TMDateBox from '../editors/TMDateBox';
+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';
+const StyledRowItem = styled.div ` display: flex; flex-direction: row; align-items: center; justify-content: flex-start; margin-bottom: 5px; gap: 3px; `;
+const StyledItemWrapper = styled.div ` border-radius: ${props => props.$borderRadius ? props.$borderRadius : '4px'}; padding: 4px; font-size: 1rem; user-select: none; width: max-content; `;
+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; `;
+const StyledAccordionItemContent = styled.div ` width: 100%; pointer-events: ${props => props.$disabled ? 'none' : ''}; `;
+const colorValue = 'rgba(224,224,224,.5)';
+const colorBrackets = 'rgba(209,52,56,.3)';
+const colorOperator = 'rgba(16,124,16,.3)'; //'#b8dbf0'
+const color1 = '#F5DD9C';
+const color2 = 'rgba(15,108,189,.3)';
+const color3 = 'rgb(199, 236, 172)';
+const color4 = 'rgb(223, 204, 251)';
+const color5 = 'rgb(249, 181, 114)';
+const color6 = 'rgb(170, 215, 217)';
+const color7 = 'rgb(243, 208, 215)';
+const color8 = 'rgb(236, 202, 156)';
+const color9 = 'rgb(137, 185, 173)';
+const colorX = 'rgb(246, 245, 242)';
+export var Descriptors;
+(function (Descriptors) {
+    Descriptors[Descriptors["Query"] = 3] = "Query";
+})(Descriptors || (Descriptors = {}));
+export function useOrchApplyForm(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, onlyAdvancedSearchMode = true, isModal, showDistinct = false, showToolbar = true, validateSelect = true, validateOrderBy = true, raiseWarningForOnlyMetadataDcmtTypes = false, onApplied, onClose, height = 'auto', borderRadius = '4px', searchText, showApply, showUndo, showBack, onFromTIDChanged }) => {
+    const { formData, setFormData, formDataOrig, validationItems, setValidationItems, exception, applyData } = useOrchApplyForm(Descriptors.Query, formMode, inputData, onApplied);
+    const [isAdvancedSearch, setIsAdvancedSearch] = useState(onlyAdvancedSearchMode);
+    const [isEasyModeConfigurable, setIsEasyModeConfigurable] = useState(false);
+    const [dcmtTypesList, setDcmtTypesList] = useState([]);
+    const [resultSearch, setResultSearch] = useState();
+    const [elapsedTime, setElapsedTime] = useState(0);
+    const [draggingItem, setDraggingItem] = useState();
+    const [showId, setShowId] = useState(false);
+    const [showCompleteMetadataName, setShowCompleteMetadataName] = useState(false);
+    const [showResultSearch, setShowResultSearch] = useState(false);
+    const [fromCount, setFromCount] = useState(0);
+    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, isAdvancedSearch]);
+    const validateQd = () => {
+        let vil = [];
+        let qvo = new QueryValidatorOptions();
+        qvo.DoSelectValidation = validateSelect;
+        qvo.DoOrderByValidation = validateOrderBy;
+        qvo.RaiseWarningForOnlyMetadataDcmtTypes = raiseWarningForOnlyMetadataDcmtTypes;
+        qvo.DoWhereHasItemsValidation = isAdvancedSearch;
+        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);
+    // #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 = () => {
+        return (_jsx(TMApplyForm, { isModal: isModal, formMode: FormModes.None, showApply: false, showUndo: false, hasNavigation: false, onClose: () => { setShowResultSearch(false); }, customToolbarElements: SDK_Globals.tmSession?.SessionDescr?.appModuleID == AppModules.ORCHESTRATOR ? [] :
+                [
+                    _jsx(TMButton, { caption: "Sincronizza elementi query", icon: _jsx(IconSync, {}), btnStyle: 'toolbar', fontSize: '1.3rem', elementStyle: { marginRight: '10px' }, onClick: () => { ShowAlert({ message: "TODO Sync Query", mode: 'info', title: `${"TODO"}`, duration: 3000 }); } }, "btn1"),
+                    _jsx(TMButton, { caption: "Download documento", icon: _jsx(IconDownload, {}), btnStyle: 'toolbar', fontSize: '1.3rem', onClick: () => { ShowAlert({ message: "TODO Download documento", mode: 'info', title: `${"TODO"}`, duration: 3000 }); } }, "btn2"),
+                    _jsx(TMButton, { caption: "Apri form", icon: _jsx(IconPreview, {}), btnStyle: 'toolbar', fontSize: '1.3rem', onClick: () => { ShowAlert({ message: "TODO Apri form", mode: 'info', title: `${"TODO"}`, duration: 3000 }); } }, "btn3"),
+                    _jsx(TMDropDownMenu, { backgroundColor: 'white', borderRadius: '3px', content: _jsx(TMButton, { icon: _jsx(IconCheckIn, {}), caption: 'Check in', btnStyle: 'toolbar', fontSize: '1.3rem' }), items: [
+                            { icon: _jsx(IconCheckIn, {}), text: "Check out", onClick: () => ShowAlert({ message: "TODO Check out", mode: 'info', title: `${"TODO"}`, duration: 3000 }) },
+                            { icon: _jsx(IconCheckIn, {}), text: "Modifica file", onClick: () => ShowAlert({ message: "TODO Modifica file", mode: 'info', title: `${"TODO"}`, duration: 3000 }) },
+                            { icon: _jsx(IconCheckIn, {}), text: "Annulla check out", onClick: () => ShowAlert({ message: "TODO Annulla check out", mode: 'info', title: `${"TODO"}`, duration: 3000 }) },
+                            { icon: _jsx(IconCheckIn, {}), text: "Check in", onClick: () => ShowAlert({ message: "TODO Check in", mode: 'info', title: `${"TODO"}`, duration: 3000 }) },
+                            { icon: _jsx(IconCheckIn, {}), text: "Cronologia", onClick: () => ShowAlert({ message: "TODO Cronologia", mode: 'info', title: `${"TODO"}`, duration: 3000 }) },
+                        ] }, "btn4"),
+                    _jsx(TMButton, { caption: "Aggiungi a preferiti", icon: _jsx(IconStar, {}), btnStyle: 'toolbar', fontSize: '1.3rem', onClick: () => { ShowAlert({ message: "TODO", mode: 'info', title: `${"TODO"}`, duration: 3000 }); } }, "btn5"),
+                    _jsx(TMDropDownMenu, { backgroundColor: 'white', borderRadius: '3px', content: _jsx(TMButton, { btnStyle: 'toolbar', caption: 'Operazioni ricorsive', icon: _jsx(IconRecursiveOps, {}) }), items: [
+                            {
+                                icon: _jsx(IconMail, {}), text: "Invia per posta", items: [
+                                    { icon: _jsx(IconMail, {}), text: "I documenti selezionati", onClick: () => ShowAlert({ message: "TODO", mode: 'info', title: `${"TODO"}`, duration: 3000 }) },
+                                    { icon: _jsx(IconMail, {}), text: "I documenti di primo livello e tutti i documenti correlati", onClick: () => ShowAlert({ message: "TODO", mode: 'info', title: `${"TODO"}`, duration: 3000 }) },
+                                    { icon: _jsx(IconMail, {}), text: "I documenti di primo livello e i documenti correlati personalizzando l'operazione", onClick: () => ShowAlert({ message: "TODO", mode: 'info', title: `${"TODO"}`, duration: 3000 }) },
+                                ]
+                            },
+                            {
+                                icon: _jsx(IconDcmtTypeOnlyMetadata, {}), text: "Unisci in un file PDF", items: [
+                                    { icon: _jsx(IconDcmtTypeOnlyMetadata, {}), text: "I documenti selezionati", onClick: () => ShowAlert({ message: "TODO", mode: 'info', title: `${"TODO"}`, duration: 3000 }) },
+                                    { icon: _jsx(IconDcmtTypeOnlyMetadata, {}), text: "I documenti di primo livello e tutti i documenti correlati", onClick: () => ShowAlert({ message: "TODO", mode: 'info', title: `${"TODO"}`, duration: 3000 }) },
+                                    { icon: _jsx(IconDcmtTypeOnlyMetadata, {}), text: "I documenti di primo livello e i documenti correlati personalizzando l'operazione", onClick: () => ShowAlert({ message: "TODO", mode: 'info', title: `${"TODO"}`, duration: 3000 }) },
+                                ]
+                            },
+                            {
+                                icon: _jsx(IconCopy, {}), text: "Copia in una cartella", items: [
+                                    { icon: _jsx(IconCopy, {}), text: "I documenti selezionati", onClick: () => ShowAlert({ message: "TODO", mode: 'info', title: `${"TODO"}`, duration: 3000 }) },
+                                    { icon: _jsx(IconCopy, {}), text: "I documenti di primo livello e tutti i documenti correlati", onClick: () => ShowAlert({ message: "TODO", mode: 'info', title: `${"TODO"}`, duration: 3000 }) },
+                                    { icon: _jsx(IconCopy, {}), text: "I documenti di primo livello e i documenti correlati personalizzando l'operazione", onClick: () => ShowAlert({ message: "TODO", mode: 'info', title: `${"TODO"}`, duration: 3000 }) },
+                                ]
+                            },
+                        ] }, "btn6"),
+                    _jsx(TMDropDownMenu, { backgroundColor: 'white', borderRadius: '3px', content: _jsx(TMButton, { icon: _jsx(IconRelation, {}), caption: 'Correlazioni', btnStyle: 'toolbar', fontSize: '1.3rem' }), items: [
+                            { icon: _jsx(IconRelation, {}), text: "Abbina documenti molti a molti", onClick: () => ShowAlert({ message: "TODO Abbina documenti molti a molti", mode: 'info', title: `${"TODO"}`, duration: 3000 }) },
+                            { icon: _jsx(IconRelation, {}), text: "Disabbina documenti molti a molti", onClick: () => ShowAlert({ message: "TODO Disabbina documenti molti a molti", mode: 'info', title: `${"TODO"}`, duration: 3000 }) },
+                            { icon: _jsx(IconRelation, {}), text: "Archivia documento dettaglio", beginGroup: true, onClick: () => ShowAlert({ message: "TODO Archivia documento dettaglio", mode: 'info', title: `${"TODO"}`, duration: 3000 }) },
+                            { icon: _jsx(IconRelation, {}), text: "Archivia documento master", onClick: () => ShowAlert({ message: "TODO Archivia documento master", mode: 'info', title: `${"TODO"}`, duration: 3000 }) },
+                            { icon: _jsx(IconRelation, {}), text: "Documenti master", beginGroup: true, onClick: () => ShowAlert({ message: "TODO Documenti master", mode: 'info', title: `${"TODO"}`, duration: 3000 }) },
+                        ] }, "btn7"),
+                    _jsx(TMDropDownMenu, { backgroundColor: 'white', borderRadius: '3px', content: _jsx(TMButton, { icon: _jsx(IconSignature, {}), btnStyle: 'toolbar', caption: 'Firma', fontSize: '1.3rem' }), items: [
+                            { icon: _jsx(IconSignature, {}), text: "Informazioni di firma", onClick: () => ShowAlert({ message: "TODO Informazioni di firma", mode: 'info', title: `${"TODO"}`, duration: 3000 }) },
+                            { icon: _jsx(IconSignature, {}), text: "Verifica firma", onClick: () => ShowAlert({ message: "TODO Verifica firma", mode: 'info', title: `${"TODO"}`, duration: 3000 }) },
+                            { icon: _jsx(IconSignature, {}), text: "Firma e marca", onClick: () => ShowAlert({ message: "TODO Firma e marca", mode: 'info', title: `${"TODO"}`, duration: 3000 }) },
+                        ] }, "btn7"),
+                    _jsx(TMDropDownMenu, { backgroundColor: 'white', borderRadius: '3px', content: _jsx(TMButton, { btnStyle: 'toolbar', caption: 'Cancellazione', icon: _jsx(IconDelete, {}) }), items: [
+                            { icon: _jsx(IconDelete, {}), text: "Cancellazione logica", onClick: () => ShowAlert({ message: "TODO Cancellazione logica", mode: 'info', title: `${"TODO"}`, duration: 3000 }) },
+                            { icon: _jsx(IconUndo, {}), text: "Ripristina", onClick: () => ShowAlert({ message: "TODO Ripristina", mode: 'info', title: `${"TODO"}`, duration: 3000 }) },
+                            { icon: _jsx(IconCloseCircle, {}), text: "Cancellazione fisica", onClick: () => ShowAlert({ message: "TODO Cancellazione fisica", mode: 'info', title: `${"TODO"}`, duration: 3000 }) },
+                        ] }, "btn8"),
+                    _jsx(TMDropDownMenu, { backgroundColor: 'white', borderRadius: '3px', content: _jsx(TMButton, { btnStyle: 'toolbar', caption: 'Altro', icon: _jsx(IconMenuVertical, {}) }), items: [
+                            { icon: _jsx(IconArchiveDoc, {}), text: "Passa ad archiviazione", onClick: () => ShowAlert({ message: "TODO Passa ad archiviazione", mode: 'info', title: `${"TODO"}`, duration: 3000 }) },
+                            { icon: _jsx(IconDuplicate, {}), text: "Duplica documento", onClick: () => ShowAlert({ message: "TODO Duplica documento", mode: 'info', title: `${"TODO"}`, duration: 3000 }) },
+                            { icon: _jsx(IconSubstFile, { fontSize: 18 }), text: "Aggiungi/sostituisci file", onClick: () => ShowAlert({ message: "TODO Aggiungi/sostituisci file", mode: 'info', title: `${"TODO"}`, duration: 3000 }) },
+                            { icon: _jsx(IconConvertFilePdf, { fontSize: 18 }), text: "Conversione file", onClick: () => ShowAlert({ message: "TODO Conversione file", mode: 'info', title: `${"TODO"}`, duration: 3000 }) },
+                            { icon: _jsx(IconCheckFile, { fontSize: 18 }), text: "Controllo file", onClick: () => ShowAlert({ message: "TODO Controllo file", mode: 'info', title: `${"TODO"}`, duration: 3000 }) },
+                            { icon: _jsx(IconBatchUpdate, { fontSize: 18 }), text: "Modifica multipla", onClick: () => ShowAlert({ message: "TODO Modifica multipla", mode: 'info', title: `${"TODO"}`, duration: 3000 }) },
+                            { icon: _jsx(IconShare, { fontSize: 18 }), text: "Archiviazione condivisa", beginGroup: true, onClick: () => ShowAlert({ message: "TODO Archiviazione condivisa", mode: 'info', title: `${"TODO"}`, duration: 3000 }) },
+                            { icon: _jsx(IconSharedDcmt, { fontSize: 18 }), text: "Documenti condivisi", onClick: () => ShowAlert({ message: "TODO Documenti condivisi", mode: 'info', title: `${"TODO"}`, duration: 3000 }) },
+                            {
+                                icon: _jsx(IconSearch, {}), text: "Trova tutti i riferimenti", beginGroup: true, items: [
+                                    { icon: _jsx(IconSearch, {}), text: "Trova tutti i riferimenti", onClick: () => ShowAlert({ message: "TODO Trova tutti i riferimenti", mode: 'info', title: `${"TODO"}`, duration: 3000 }) },
+                                    { icon: _jsx(IconSearch, {}), text: "Trova tutti i riferimenti (anche nello storico)", onClick: () => ShowAlert({ message: "TODO Trova tutti i riferimenti (anche nello storico)", mode: 'info', title: `${"TODO"}`, duration: 3000 }) },
+                                ]
+                            },
+                            { icon: _jsx(IconExportTo, { fontSize: 18 }), text: "Esporta in...", onClick: () => ShowAlert({ message: "TODO Esporta in", mode: 'info', title: `${"TODO"}`, duration: 3000 }) },
+                            { icon: _jsx(IconShow, {}), text: "Mostra footer", onClick: () => ShowAlert({ message: "TODO Mostra footer", mode: 'info', title: `${"TODO"}`, duration: 3000 }) },
+                            { icon: _jsx(IconSettings, {}), text: SDKUI_Localizator.ShowHideMetadataSystemDesc, onClick: () => ShowAlert({ message: "TODO ShowHideMetadataSystem", mode: 'info', title: `${"TODO"}`, duration: 3000 }) },
+                        ] }, "btn9")
+                ], children: _jsx(TMQueryResult, { result: resultSearch, elapsedTime: elapsedTime, searchText: searchText }) }));
+    };
+    const onSearchAsync = async () => {
+        try {
+            TMSpinner.show({ description: `Esecuzione query ...`, backgroundColor: 'transparent' });
+            const startTime = new Date().getTime();
+            let qd = new QueryDescriptor();
+            qd.init({ ...formData });
+            // V5 SDKUI >> QueryControl >> GetQueryDescriptor
+            if (!qd.select)
+                qd.select = [];
+            let qdWithAggrFunctions = qd.select?.some(o => o.function != QueryFunctions.None);
+            if (!qd.isDistinct && !qdWithAggrFunctions) {
+                let si = new SelectItem();
+                si.tid = qd?.from?.tid;
+                si.mid = SystemMIDsAsNumber.TID;
+                qd.select.push(si);
+                si = new SelectItem();
+                si.tid = qd?.from?.tid;
+                si.mid = SystemMIDsAsNumber.DID;
+                qd.select.push(si);
+                si = new SelectItem();
+                si.tid = qd?.from?.tid;
+                si.mid = SystemMIDsAsNumber.FileCount;
+                qd.select.push(si);
+                si = new SelectItem();
+                si.tid = qd?.from?.tid;
+                si.mid = SystemMIDsAsNumber.FileExt;
+                qd.select.push(si);
+                si = new SelectItem();
+                si.tid = qd?.from?.tid;
+                si.mid = SystemMIDsAsNumber.IsLex;
+                qd.select.push(si);
+                si = new SelectItem();
+                si.tid = qd?.from?.tid;
+                si.mid = SystemMIDsAsNumber.IsLogDel;
+                qd.select.push(si);
+                si = new SelectItem();
+                si.tid = qd?.from?.tid;
+                si.mid = SystemMIDsAsNumber.IsMail;
+                qd.select.push(si);
+                si = new SelectItem();
+                si.tid = qd?.from?.tid;
+                si.mid = SystemMIDsAsNumber.IsShared;
+                qd.select.push(si);
+                si = new SelectItem();
+                si.tid = qd?.from?.tid;
+                si.mid = SystemMIDsAsNumber.IsSigned;
+                qd.select.push(si);
+            }
+            // Alcuni lavori di ORCHESTRATOR non definiscono i SelectItem (per esempio, CheckSequence, DcmtPrinter, ...).
+            // In tal caso il risultato della ricerca risultava senza colonne (metadati).
+            // In questa condizione si è deciso di visualizzare, di default, i primi 10 metadati.
+            if (qd.select.filter(o => o.mid > 100).length <= 0) {
+                let dtd = await DcmtTypeListCacheService.GetAsync(qd?.from?.tid, true);
+                if (dtd?.metadata) {
+                    let counter = 1;
+                    for (const md of dtd.metadata) {
+                        if (md.isSystem == 1)
+                            continue;
+                        if (md.perm && md.perm.canView === AccessLevels.No)
+                            continue;
+                        if (counter > 10)
+                            break;
+                        let si = new SelectItem();
+                        si.tid = dtd.id;
+                        si.mid = md.id;
+                        qd.select.push(si);
+                        counter++;
+                    }
+                }
+            }
+            // In modalità easy rimuovi filtri non valorizzati
+            if (!isAdvancedSearch)
+                qd.where = qd?.where?.filter(o => PlatformObjectValidator.WhereItemHasValues(o));
+            let result = await SDK_Globals.tmSession?.NewSearchEngine().SearchByIDAsync(qd, 6);
+            let dcmtsFound = result?.dcmtsFound ?? 0;
+            if (dcmtsFound <= 0)
+                TMMessageBoxManager.show({ title: SDK_Globals.appModule, message: "Nessun documento trovato", buttons: [ButtonNames.OK] });
+            else {
+                setElapsedTime(new Date().getTime() - startTime);
+                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
+    const renderButtonSort = (tid_mid) => {
+        const oi = formData.orderBy?.find(o => o.tid == tid_mid.tid && o.mid == tid_mid.mid);
+        if (!oi)
+            return _jsx(TMButton, { btnStyle: 'icon', padding: '0px 10px', icon: _jsx(IconArrowUnsorted, { fontSize: 16, color: TMColors.button_icon }), caption: 'Nessun ordinamento', onClick: () => {
+                    const orderByCopy = formData?.orderBy?.map((oi) => { return oi; }) ?? [];
+                    let oi = new OrderByItem();
+                    oi.tid = tid_mid.tid;
+                    oi.mid = tid_mid.mid;
+                    oi.asc = true;
+                    orderByCopy.push(oi);
+                    setFormData({ ...formData, orderBy: orderByCopy });
+                } });
+        if (oi.asc)
+            return _jsx(TMButton, { btnStyle: 'icon', padding: '0px 10px', icon: _jsx(IconArrowSortedUp, { fontSize: 16, color: "green" }), caption: 'Ordinamento crescente', onClick: () => { onChange_OrderByItem_Asc(false, oi, formData.orderBy?.indexOf(oi) ?? 0); } });
+        else
+            return _jsx(TMButton, { btnStyle: 'icon', padding: '0px 10px', icon: _jsx(IconArrowSortedDown, { fontSize: 16, color: "orange" }), caption: 'Ordinamento decrescente', onClick: () => { formData.orderBy && onRemove_OrderByItem(formData.orderBy?.indexOf(oi)); } });
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(TMApplyForm, { isModal: false, formMode: formMode, isModified: calcIsModified(formData, formDataOrig), exception: exception, validationItems: validationItems, hasNavigation: false, customToolbarElements: _jsxs(_Fragment, { children: [_jsx(TMButton, { keyGesture: 'alt+1', btnStyle: 'toolbar', caption: SDKUI_Localizator.Search, color: 'tertiary', icon: _jsx(IconSearch, {}), disabled: errorsCount > 0, onClick: onSearchAsync }), _jsx(TMButton, { keyGesture: 'alt+2', 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, { keyGesture: 'alt+3', 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, { keyGesture: 'alt+4', 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 }); } }), !onlyAdvancedSearchMode && _jsx(TMButton, { elementStyle: { marginLeft: '30px' }, caption: isAdvancedSearch ? "Modalità avanzata" : "Modalità facilitata", icon: isAdvancedSearch ? _jsx(IconAdvanced, { fontSize: 18 }) : _jsx(IconEasy, { fontSize: 18 }), color: isAdvancedSearch ? 'primary' : 'success', btnStyle: 'toolbar', fontSize: '1.3rem', onClick: () => { setIsAdvancedSearch(!isAdvancedSearch); } }), !isAdvancedSearch && _jsx(TMButton, { caption: "Configura", icon: _jsx(IconEdit, {}), btnStyle: 'toolbar', color: isEasyModeConfigurable ? 'success' : 'primary', fontSize: '1.3rem', onClick: () => { setIsEasyModeConfigurable(!isEasyModeConfigurable); } }), SDK_Globals.tmSession?.SessionDescr?.appModuleID == AppModules.SURFER && _jsx("p", { style: { fontWeight: 600, marginLeft: '30px' }, children: dcmtTypesList.find(o => o.id == formData.from?.tid)?.nameLoc })] }), showToolbar: showToolbar, showApply: showApply, showUndo: showUndo, showBack: showBack, onApply: () => applyData(), onClose: () => onClose?.(), onUndo: () => setFormData(formDataOrig), children: _jsxs(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) && isAdvancedSearch && _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(TMDropDownMenu, { content: _jsx(IconDotsVerticalCircleOutline, { color: TMColors.button_icon }), items: [
+                                                            { icon: 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: 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, placeHolder: `<${SDKUI_Localizator.DcmtTypeSelect} ...>`, borderRadius: borderRadius, 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(TMDropDownMenu, { 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(TMDropDownMenu, { backgroundColor: colorOperator, color: 'green', borderRadius: borderRadius, content: _jsx(StyledItemWrapper, { children: LocalizeQueryJoinTypes(ji.joinType) }), items: getJoinTypesMenuItems(index) }), _jsx(TMDcmtTypeChooser, { disabled: isReadOnly, placeHolder: `<${SDKUI_Localizator.DcmtTypeSelect} ...>`, borderRadius: borderRadius, 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(TMDropDownMenu, { 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, 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(TMDropDownMenu, { backgroundColor: colorOperator, color: 'green', borderRadius: borderRadius, content: _jsx(StyledItemWrapper, { children: LocalizeQueryOperators(onItem.operator) }), items: [] }), _jsx(TMMetadataChooser, { disabled: isReadOnly, 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) })] }) }) }), fromCount > 0 && (isAdvancedSearch || isEasyModeConfigurable) && (!isReadOnly || selectCount > 0) && _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(TMDropDownMenu, { 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(TMDropDownMenu, { 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(TMDropDownMenu, { 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, 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: isAdvancedSearch
+                                ?
+                                    _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(TMDropDownMenu, { 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(TMDropDownMenu, { 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, backgroundColor: colorBrackets, onValueChanged: (value) => { onChange_WhereItem_Brackets(value, true, index); } }), _jsx(TMMetadataChooser, { disabled: isReadOnly, 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(TMDropDownMenu, { 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, backgroundColor: colorBrackets, onValueChanged: (value) => { onChange_WhereItem_Brackets(value, false, index); } })] }, `${wi.tid}_${wi.mid}_${index}`));
+                                                })] }) })
+                                :
+                                    _jsx("div", { style: { display: 'grid', alignItems: 'center', overflow: 'auto', height: '100%', paddingRight: '5px', gridTemplateColumns: 'minmax(0, max-content) minmax(0, max-content) minmax(0, max-content) minmax(50%, 1fr) minmax(0, max-content)' }, children: formData?.where?.map((wi, index) => {
+                                            return (_jsxs(Fragment, { children: [_jsxs("div", { style: { gridColumn: 1, display: 'flex', flexDirection: 'row', alignItems: 'center' }, children: [_jsx("div", { children: PlatformObjectValidator.WhereItemHasValues(wi) && _jsx(IconSuccessCirlce, { fontSize: 18, color: 'green' }) }), isEasyModeConfigurable && _jsx(TMButton, { btnStyle: 'icon', icon: _jsx(IconClear, { color: TMColors.button_icon }), caption: SDKUI_Localizator.Remove, onClick: () => onRemove_WhereItem(index) }), isEasyModeConfigurable && _jsx(TMButton, { btnStyle: 'icon', icon: _jsx(IconAddCircleOutline, { color: TMColors.button_icon }), caption: SDKUI_Localizator.AddBelow, onClick: () => onAdd_WhereItem(index + 1) })] }), _jsx("div", { style: { gridColumn: 2, display: 'flex', paddingLeft: '4px', paddingRight: '4px', height: '24px', borderRadius: borderRadius, fontSize: '1rem' }, children: _jsx(TMMetadataChooser, { width: '100%', disabled: !isEasyModeConfigurable, showCompleteMetadataName: showCompleteMetadataName, openEditorOnSummaryClick: true, showBorder: false, showId: showId, qd: formData, values: [{ tid: wi.tid, mid: wi.mid, aliasTID: wi.alias }], onValueChanged: (values) => { values.length > 0 && onChange_WhereItem_Metadato(values[0], index); } }) }), _jsx("div", { style: { gridColumn: 3 }, children: _jsx(TMDropDownMenu, { backgroundColor: colorOperator, color: 'green', borderRadius: borderRadius, content: _jsx(StyledDivHorizontal, { children: _jsx(StyledItemWrapper, { children: LocalizeQueryOperators(wi.operator) }) }), items: getQueryOperatorsMenuItems(wi, index) }) }), _jsx("div", { style: { gridColumn: 4, paddingLeft: '4px' }, children: _jsx(TMQdWhereItemValue, { onlyEditing: true, whereItem: wi, index: index, onValueChanged: (values) => {
+                                                                onChange_WhereItem_Values(values[0], values[1], index);
+                                                            } }) }), !isEasyModeConfigurable && _jsx("div", { style: { gridColumn: 5, display: 'flex', alignItems: 'center' }, children: renderButtonSort({ tid: wi.tid, mid: wi.mid, aliasTID: wi.alias }) })] }, `${wi.tid}_${wi.mid}_${index}`));
+                                        }) }) }), fromCount > 0 && (isAdvancedSearch || isEasyModeConfigurable) && (!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(TMDropDownMenu, { 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, 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(TMDropDownMenu, { 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 && isAdvancedSearch && _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) }) })] }) }) })] }) }), showResultSearch && _jsxs(StyledModalContainer, { children: [" ", renderResultSearchForm(), " "] })] }));
+};
+export default TMQueryEditor;
+const TMQdWhereItemValue = ({ whereItem, index, onlyEditing = false, onValueChanged }) => {
+    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 [showDataListChooseForm, setShowDataListChooseForm] = useState(false);
+    const [dataList, setDataList] = 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(EditingModes.Chooser);
+                    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:
+                    setEditingMode(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]);
+    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.UserID:
+                setShowUserChooseForm(true);
+                break;
+        }
+    };
+    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(TMQdWhereItemValueEditor, { value: whereItem.value1, autoFocus: !onlyEditing, dataType: md?.dataType, containerElement: containerElement, numberOfOperands: numberOfOperands, onValueChange: (value) => setCurrentValue1(value), onValueChanged: (value) => { normalizeValue(value, true); } }), showValue2 && _jsx(TMQdWhereItemValueEditor, { value: whereItem.value2, autoFocus: !onlyEditing, dataType: md?.dataType, containerElement: containerElement, numberOfOperands: numberOfOperands, onValueChange: (value) => setCurrentValue2(value), onValueChanged: (value) => { normalizeValue(value, false); } })] }), !isEditing && !onlyEditing && (showValue1 || showValue2) &&
+                _jsxs(StyledDivHorizontal, { children: [editingMode == EditingModes.Chooser &&
+                            _jsxs(_Fragment, { children: [showDataListChooseForm &&
+                                        _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); } }), 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) ? setIsEditing(true) : chooseValue(); }, style: { backgroundColor: colorValue, cursor: 'pointer', width: '100%' }, children: numberOfOperands == 11 || numberOfOperands == 12 || numberOfOperands == 99
+                                ? _jsx(_Fragment, { children: whereItem.value1 ?? `<${SDKUI_Localizator.Search_EnterValue}...>` })
+                                : _jsxs(_Fragment, { children: [displayMetadataValue(md, whereItem.value1, `<${SDKUI_Localizator.Search_EnterValue}...>`), numberOfOperands == 2 && (whereItem.value2 && whereItem.value2 != '' ? ` - ${displayMetadataValue(md, whereItem.value2, `<${SDKUI_Localizator.Search_EnterValue}...>`)}` : ' - ?')] }) })] })] }));
+};
+const TMQdEditableItem = ({ value, placeHolder, width, backgroundColor, onValueChanged }) => {
+    const [isComponentVisible, setIsComponentVisible] = useState(false);
+    const ref = useOutsideClick(() => { setIsComponentVisible(false); });
+    return (_jsx("div", { ref: ref, children: isComponentVisible ?
+            _jsx(TMTextBox, { elementStyle: { marginLeft: '5px', marginRight: '5px' }, width: width ?? '50px', autoFocus: true, value: value ?? '', onBlur: (newValue) => onValueChanged(newValue) })
+            :
+                _jsx(StyledItemWrapper, { onClick: () => setIsComponentVisible(true), style: { backgroundColor: backgroundColor, cursor: 'pointer' }, children: value ?? placeHolder }) }));
+};
+const TMQdWhereItemValueEditor = ({ value, containerElement, autoFocus, numberOfOperands, dataType, onValueChanged, onValueChange }) => {
+    if (value?.startsWith("{@QueryParam") || value == "{@UserName}" || value == "{@UserID}")
+        return _jsx(TMTextBox, { elementStyle: { width: '100%' }, type: 'text', autoFocus: autoFocus, value: value || '', onValueChanged: (e) => onValueChange?.(e.target.value), onBlur: (newValue) => onValueChanged?.(newValue) });
+    switch (numberOfOperands) {
+        case 11:
+        case 99: return _jsx(TMTextBox, { elementStyle: { width: '100%' }, type: 'text', autoFocus: autoFocus, value: value ?? '', onValueChanged: (e) => onValueChange?.(e.target.value), onBlur: (newValue) => onValueChanged?.(newValue) });
+        case 12: return _jsx(TMTextBox, { elementStyle: { width: '100%' }, type: 'number', autoFocus: autoFocus, value: value ?? '', onValueChanged: (e) => onValueChange?.(e.target.value), onBlur: (newValue) => onValueChanged?.(newValue) });
+        default:
+            switch (dataType) {
+                case MetadataDataTypes.DateTime: return _jsx(TMDateBox, { width: '100%', value: value, useDateSerializationFormat: true, containerElement: containerElement, onValueChange: (newValue) => { onValueChange?.(newValue.toString()); onValueChanged?.(newValue); } });
+                case MetadataDataTypes.Number: return _jsx(TMTextBox, { elementStyle: { width: '100%' }, type: 'number', autoFocus: autoFocus, value: value ?? '', onValueChanged: (e) => onValueChange?.(e.target.value), onBlur: (newValue) => onValueChanged?.(newValue) });
+                default: return _jsx(TMTextBox, { type: 'text', elementStyle: { width: '100%' }, autoFocus: autoFocus, value: value ?? '', onValueChanged: (e) => onValueChange?.(e.target.value), onBlur: (newValue) => { onValueChanged?.(newValue); } });
+            }
+    }
+};