@topconsultnpm/sdkui-react-beta 6.6.35 → 6.6.36

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

@@ -0,0 +1,17 @@
+import { DynDataListsToBeRefreshed } from '../choosers/TMDynDataListItemChooser';
+interface ITMMetadataEditorProps {
+    tid: number | undefined;
+    mid?: number;
+    value: string | undefined;
+    queryParamsDynDataList?: string[];
+    allowMultipleSelection: boolean;
+    autoFocus: boolean;
+    showAsText?: boolean;
+    showAsNumber?: boolean;
+    containerElement: Element | undefined;
+    onValueChanged?: (value: any) => void;
+    onValueChange?: (value: any) => void;
+    onCascadeRefreshDynDataLists?: (dynDataListsToBeRefreshed: DynDataListsToBeRefreshed[]) => void;
+}
+declare const TMMetadataEditor: ({ tid, mid, value, queryParamsDynDataList, containerElement, allowMultipleSelection, autoFocus, showAsText, showAsNumber, onValueChanged, onValueChange, onCascadeRefreshDynDataLists }: ITMMetadataEditorProps) => import("react/jsx-runtime").JSX.Element;
+export default TMMetadataEditor;

package/lib/components/editors/TMMetadataEditor.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { MetadataDataDomains, MetadataDataTypes, DcmtTypeListCacheService } from '@topconsultnpm/sdk-ts-beta';
+import { IconLayerGroup } from '../../helper';
+import { TMColors } from '../../utils/theme';
+import ShowAlert from '../base/TMAlert';
+import TMDataListItemChooser from '../choosers/TMDataListItemChooser';
+import TMDynDataListItemChooser from '../choosers/TMDynDataListItemChooser';
+import TMUserChooser from '../choosers/TMUserChooser';
+import TMDateBox from './TMDateBox';
+import TMTextBox from './TMTextBox';
+const TMMetadataEditor = ({ tid, mid, value, queryParamsDynDataList, containerElement, allowMultipleSelection, autoFocus, showAsText, showAsNumber, onValueChanged, onValueChange, onCascadeRefreshDynDataLists }) => {
+    const [md, setMd] = useState();
+    useEffect(() => {
+        DcmtTypeListCacheService.GetAsync(tid).then((dtd) => {
+            setMd(dtd?.metadata?.find(o => o.id == mid));
+        });
+    }, [mid]);
+    let btnDistincValues = { text: 'Valori distinti', icon: _jsx(IconLayerGroup, { fontSize: 16 }), onClick: () => { ShowAlert({ message: "TODO Valori distinti", mode: 'info', title: `${"TODO"}`, duration: 3000 }); } };
+    if (value?.startsWith("{@QueryParam") || value == "{@UserName}" || value == "{@UserID}")
+        return _jsx(TMTextBox, { elementStyle: { width: '100%' }, type: 'text', maxLength: md?.length, autoFocus: autoFocus, value: value || '', onValueChanged: (e) => onValueChange?.(e.target.value), onBlur: (newValue) => onValueChanged?.(newValue) });
+    if (md?.dataDomain == MetadataDataDomains.DynamicDataList)
+        return _jsx(TMDynDataListItemChooser, { md: md, tid: tid, buttons: [btnDistincValues], queryParamsDynDataList: queryParamsDynDataList, onCascadeRefreshDynDataLists: onCascadeRefreshDynDataLists, elementStyle: { width: '100%' }, backgroundColor: TMColors.default_background, allowMultipleSelection: allowMultipleSelection, values: value ? [value] : [], showClearButton: true, onValueChanged: (IDs) => {
+                if (!IDs || IDs.length <= 0)
+                    onValueChanged?.(undefined);
+                else
+                    onValueChanged?.(IDs[0]);
+            } });
+    if (md?.dataDomain == MetadataDataDomains.DataList)
+        return _jsx(TMDataListItemChooser, { elementStyle: { width: '100%' }, backgroundColor: TMColors.default_background, dataListId: md.dataListID, allowMultipleSelection: allowMultipleSelection, values: value?.split(',').map((item) => !item.startsWith("'") ? item : item.slice(1, -1)) ?? [], showClearButton: true, buttons: [btnDistincValues], onValueChanged: (IDs) => {
+                if (!IDs || IDs.length <= 0)
+                    onValueChanged?.(undefined);
+                else
+                    onValueChanged?.(IDs.join(","));
+            } });
+    if (md?.dataDomain == MetadataDataDomains.UserID)
+        return _jsx(TMUserChooser, { elementStyle: { width: '100%' }, backgroundColor: TMColors.default_background, placeHolder: " ", showClearButton: true, allowMultipleSelection: allowMultipleSelection, values: value?.split(',').map((item) => !item.startsWith("'") ? Number(item) : Number(item.slice(1, -1))) ?? [], buttons: [btnDistincValues], onValueChanged: (IDs) => {
+                if (!IDs || IDs.length <= 0)
+                    onValueChanged?.(undefined);
+                else
+                    onValueChanged?.(IDs.join(","));
+            } });
+    if (showAsText)
+        return _jsx(TMTextBox, { elementStyle: { width: '100%' }, type: 'text', buttons: [btnDistincValues], showClearButton: true, maxLength: md?.length, autoFocus: autoFocus, value: value ?? '', onValueChanged: (e) => onValueChange?.(e.target.value), onBlur: (newValue) => onValueChanged?.(newValue) });
+    if (showAsNumber)
+        return _jsx(TMTextBox, { elementStyle: { width: '100%' }, type: 'number', showClearButton: true, precision: md?.length, scale: md?.scale, autoFocus: autoFocus, value: value ?? '', onValueChanged: (e) => onValueChange?.(e.target.value), onBlur: (newValue) => onValueChanged?.(newValue) });
+    switch (md?.dataType) {
+        case MetadataDataTypes.DateTime: return _jsx(TMDateBox, { width: '100%', value: value, buttons: [btnDistincValues], showClearButton: true, useDateSerializationFormat: true, containerElement: containerElement, onValueChange: (newValue) => { onValueChange?.(newValue ? newValue.toString() : undefined); onValueChanged?.(newValue ? newValue.toString() : undefined); } });
+        case MetadataDataTypes.Number: return _jsx(TMTextBox, { elementStyle: { width: '100%' }, type: 'number', buttons: [btnDistincValues], showClearButton: true, precision: md?.length, scale: md?.scale, autoFocus: autoFocus, value: value ?? '', onValueChanged: (e) => onValueChange?.(e.target.value), onBlur: (newValue) => onValueChanged?.(newValue) });
+        default: return _jsx(TMTextBox, { type: 'text', elementStyle: { width: '100%' }, showClearButton: true, buttons: [btnDistincValues], autoFocus: autoFocus, maxLength: md?.length, value: value ?? '', onValueChanged: (e) => onValueChange?.(e.target.value), onBlur: (newValue) => { onValueChanged?.(newValue); } });
+    }
+};
+export default TMMetadataEditor;

package/lib/components/index.d.ts

@@ -22,6 +22,7 @@ export { default as TMTextArea } from './editors/TMTextArea';
 export { default as TMCheckBox } from './editors/TMCheckBox';
 export { default as TMRadioButton } from './editors/TMRadioButton';
 export { default as TMDateBox } from './editors/TMDateBox';
+export { default as TMMetadataEditor } from './editors/TMMetadataEditor';
 export { editorColorManager } from './editors/TMEditorStyled';
 export * from './choosers/TMDataListItemChooser';
 export * from './choosers/TMDynDataListItemChooser';

package/lib/components/index.js

@@ -25,6 +25,7 @@ export { default as TMTextArea } from './editors/TMTextArea';
 export { default as TMCheckBox } from './editors/TMCheckBox';
 export { default as TMRadioButton } from './editors/TMRadioButton';
 export { default as TMDateBox } from './editors/TMDateBox';
+export { default as TMMetadataEditor } from './editors/TMMetadataEditor';
 export { editorColorManager } from './editors/TMEditorStyled';
 // choosers
 export * from './choosers/TMDataListItemChooser';

package/lib/components/query/TMQueryEditor.d.ts

@@ -1,7 +1,6 @@
 import React from 'react';
-import { MetadataDescriptor, QueryDescriptor, ValidationItem } from '@topconsultnpm/sdk-ts-beta';
+import { QueryDescriptor, ValidationItem } from '@topconsultnpm/sdk-ts-beta';
 import { ITMApplyFormProps, FormModes } from '../../ts';
-import { DynDataListsToBeRefreshed } from '../choosers/TMDynDataListItemChooser';
 export declare const StyledRowItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const StyledItemWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     $borderRadius?: string;
@@ -48,16 +47,3 @@ interface ITMQueryEditor extends ITMApplyFormProps<QueryDescriptor> {
 }
 declare const TMQueryEditor: React.FunctionComponent<ITMQueryEditor>;
 export default TMQueryEditor;
-export declare const TMQdWhereItemValueEditor: ({ tid, value, queryParamsDynDataList, containerElement, allowMultipleSelection, autoFocus, numberOfOperands, md, onValueChanged, onValueChange, onCascadeRefreshDynDataLists }: {
-    tid: number | undefined;
-    value: string | undefined;
-    queryParamsDynDataList?: string[];
-    allowMultipleSelection: boolean;
-    numberOfOperands: number;
-    autoFocus: boolean;
-    containerElement: Element | undefined;
-    md: MetadataDescriptor | undefined;
-    onValueChanged?: (value: any) => void;
-    onValueChange?: (value: any) => void;
-    onCascadeRefreshDynDataLists?: (dynDataListsToBeRefreshed: DynDataListsToBeRefreshed[]) => void;
-}) => import("react/jsx-runtime").JSX.Element;

package/lib/components/query/TMQueryEditor.js

@@ -3,7 +3,7 @@ import { 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, LayoutModes } from '@topconsultnpm/sdk-ts-beta';
 import styled from 'styled-components';
 import Accordion, { Item } from 'devextreme-react/accordion';
-import { SDKUI_Localizator, IconSearch, IconCount, getQueryCountAsync, calcIsModified, IconClear, IconAddCircleOutline, IconDotsVerticalCircleOutline, IconHide, IconShow, IconDraggabledots, genUniqueId, LocalizeQueryOperators, LocalizeQueryFunctions, LocalizeQueryJoinTypes, IconArchiveDoc, IconArrowRight, IconLayerGroup } from '../../helper';
+import { SDKUI_Localizator, IconSearch, IconCount, getQueryCountAsync, calcIsModified, IconClear, IconAddCircleOutline, IconDotsVerticalCircleOutline, IconHide, IconShow, IconDraggabledots, genUniqueId, LocalizeQueryOperators, LocalizeQueryFunctions, LocalizeQueryJoinTypes, IconArchiveDoc, IconArrowRight } from '../../helper';
 import { displayMetadataValue, getDcmtTypesByQdAsync, getTIDsByQd } from '../../helper/queryHelper';
 import { useOutsideClick } from '../../hooks/useOutsideClick';
 import { FormModes } from '../../ts';
@@ -16,19 +16,19 @@ import TMSpinner from '../base/TMSpinner';
 import { TMTabItemBadge } from '../base/TMTab';
 import TMTooltip from '../base/TMTooltip';
 import TMVilViewer from '../base/TMVilViewer';
-import TMDataListItemChooser, { TMDataListItemChooserForm } from '../choosers/TMDataListItemChooser';
+import { TMDataListItemChooserForm } from '../choosers/TMDataListItemChooser';
 import TMDcmtTypeChooser from '../choosers/TMDcmtTypeChooser';
 import TMMetadataChooser from '../choosers/TMMetadataChooser';
-import TMUserChooser, { TMUserChooserForm } from '../choosers/TMUserChooser';
+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';
-import TMDynDataListItemChooser, { IsParametricQuery, TMDynDataListItemChooserForm } from '../choosers/TMDynDataListItemChooser';
+import { IsParametricQuery, TMDynDataListItemChooserForm } from '../choosers/TMDynDataListItemChooser';
 import TMQueryResultForm, { SearchResultContext } from './TMQueryResultForm';
+import TMMetadataEditor from '../editors/TMMetadataEditor';
 export const StyledRowItem = styled.div ` display: flex; flex-direction: row; align-items: center; justify-content: flex-start; margin-bottom: 5px; gap: 3px; `;
 export const StyledItemWrapper = styled.div ` border-radius: ${props => props.$borderRadius ? props.$borderRadius : '4px'}; padding: 4px; font-size: 1rem; user-select: none; width: max-content; `;
 export const StyledAccordionItemContainer = styled.div ` width: 100%; padding: 2px; display: flex; flex-direction: column; overflow-x: auto; align-items: flex-start; margin-left: 5px; gap: 3px; max-height: 300px; `;
@@ -970,7 +970,7 @@ const TMQdWhereItemValue = ({ whereItem, index, queryParamsDynDataList, onlyEdit
     };
     const mdValueEmptyDescr = `<${SDKUI_Localizator.Search_EnterValue}...>`;
     return (_jsxs("div", { ref: ref, id: containerId, style: { width: isEditing && whereItem.operator == QueryOperators.Custom && !onlyEditing ? "100%" : undefined }, children: [(isEditing || onlyEditing) &&
-                _jsxs(StyledRowItem, { children: [showValue1 && _jsx(TMQdWhereItemValueEditor, { tid: whereItem.tid, value: whereItem.value1, allowMultipleSelection: whereItem.operator == QueryOperators.In || whereItem.operator == QueryOperators.NotIn, autoFocus: !onlyEditing, md: md, containerElement: containerElement, numberOfOperands: numberOfOperands, onValueChange: (value) => setCurrentValue1(value), onValueChanged: (value) => { normalizeValue(value, true); } }), showValue2 && _jsx(TMQdWhereItemValueEditor, { tid: whereItem.tid, value: whereItem.value2, allowMultipleSelection: whereItem.operator == QueryOperators.In || whereItem.operator == QueryOperators.NotIn, autoFocus: !onlyEditing, md: md, containerElement: containerElement, numberOfOperands: numberOfOperands, onValueChange: (value) => setCurrentValue2(value), onValueChanged: (value) => { normalizeValue(value, false); } })] }), !isEditing && !onlyEditing && (showValue1 || showValue2) &&
+                _jsxs(StyledRowItem, { children: [showValue1 && _jsx(TMMetadataEditor, { tid: whereItem.tid, mid: whereItem.mid, value: whereItem.value1, allowMultipleSelection: whereItem.operator == QueryOperators.In || whereItem.operator == QueryOperators.NotIn, autoFocus: !onlyEditing, containerElement: containerElement, showAsText: numberOfOperands == 11 || numberOfOperands == 99, showAsNumber: numberOfOperands == 12, onValueChange: (value) => setCurrentValue1(value), onValueChanged: (value) => { normalizeValue(value, true); } }), showValue2 && _jsx(TMMetadataEditor, { tid: whereItem.tid, mid: whereItem.mid, value: whereItem.value2, allowMultipleSelection: whereItem.operator == QueryOperators.In || whereItem.operator == QueryOperators.NotIn, autoFocus: !onlyEditing, containerElement: containerElement, showAsText: numberOfOperands == 11 || numberOfOperands == 99, showAsNumber: numberOfOperands == 12, 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); } }), showDynDataListChooseForm &&
@@ -1017,40 +1017,3 @@ const TMQdWhereItemValue = ({ whereItem, index, queryParamsDynDataList, onlyEdit
                                 ? _jsx(_Fragment, { children: whereItem.value1 ?? mdValueEmptyDescr })
                                 : _jsxs(_Fragment, { children: [displayMetadataValue(md, whereItem.value1, mdValueEmptyDescr), numberOfOperands == 2 && (whereItem.value2 && whereItem.value2 != '' ? ` - ${displayMetadataValue(md, whereItem.value2, mdValueEmptyDescr)}` : ' - ?')] }) })] })] }));
 };
-export const TMQdWhereItemValueEditor = ({ tid, value, queryParamsDynDataList, containerElement, allowMultipleSelection, autoFocus, numberOfOperands, md, onValueChanged, onValueChange, onCascadeRefreshDynDataLists }) => {
-    let btnDistincValues = { text: 'Valori distinti', icon: _jsx(IconLayerGroup, { fontSize: 16 }), onClick: () => { ShowAlert({ message: "TODO Valori distinti", mode: 'info', title: `${"TODO"}`, duration: 3000 }); } };
-    if (value?.startsWith("{@QueryParam") || value == "{@UserName}" || value == "{@UserID}")
-        return _jsx(TMTextBox, { elementStyle: { width: '100%' }, type: 'text', maxLength: md?.length, autoFocus: autoFocus, value: value || '', onValueChanged: (e) => onValueChange?.(e.target.value), onBlur: (newValue) => onValueChanged?.(newValue) });
-    if (md?.dataDomain == MetadataDataDomains.DynamicDataList)
-        return _jsx(TMDynDataListItemChooser, { md: md, tid: tid, buttons: [btnDistincValues], queryParamsDynDataList: queryParamsDynDataList, onCascadeRefreshDynDataLists: onCascadeRefreshDynDataLists, elementStyle: { width: '100%' }, backgroundColor: TMColors.default_background, allowMultipleSelection: allowMultipleSelection, values: value ? [value] : [], showClearButton: true, onValueChanged: (IDs) => {
-                if (!IDs || IDs.length <= 0)
-                    onValueChanged?.(undefined);
-                else
-                    onValueChanged?.(IDs[0]);
-            } });
-    if (md?.dataDomain == MetadataDataDomains.DataList)
-        return _jsx(TMDataListItemChooser, { elementStyle: { width: '100%' }, backgroundColor: TMColors.default_background, dataListId: md.dataListID, allowMultipleSelection: allowMultipleSelection, values: value?.split(',').map((item) => !item.startsWith("'") ? item : item.slice(1, -1)) ?? [], showClearButton: true, buttons: [btnDistincValues], onValueChanged: (IDs) => {
-                if (!IDs || IDs.length <= 0)
-                    onValueChanged?.(undefined);
-                else
-                    onValueChanged?.(IDs.join(","));
-            } });
-    if (md?.dataDomain == MetadataDataDomains.UserID)
-        return _jsx(TMUserChooser, { elementStyle: { width: '100%' }, backgroundColor: TMColors.default_background, placeHolder: " ", showClearButton: true, allowMultipleSelection: allowMultipleSelection, values: value?.split(',').map((item) => !item.startsWith("'") ? Number(item) : Number(item.slice(1, -1))) ?? [], buttons: [btnDistincValues], onValueChanged: (IDs) => {
-                if (!IDs || IDs.length <= 0)
-                    onValueChanged?.(undefined);
-                else
-                    onValueChanged?.(IDs.join(","));
-            } });
-    switch (numberOfOperands) {
-        case 11:
-        case 99: return _jsx(TMTextBox, { elementStyle: { width: '100%' }, type: 'text', buttons: [btnDistincValues], showClearButton: true, maxLength: md?.length, autoFocus: autoFocus, value: value ?? '', onValueChanged: (e) => onValueChange?.(e.target.value), onBlur: (newValue) => onValueChanged?.(newValue) });
-        case 12: return _jsx(TMTextBox, { elementStyle: { width: '100%' }, type: 'number', showClearButton: true, precision: md?.length, scale: md?.scale, autoFocus: autoFocus, value: value ?? '', onValueChanged: (e) => onValueChange?.(e.target.value), onBlur: (newValue) => onValueChanged?.(newValue) });
-        default:
-            switch (md?.dataType) {
-                case MetadataDataTypes.DateTime: return _jsx(TMDateBox, { width: '100%', value: value, buttons: [btnDistincValues], showClearButton: true, useDateSerializationFormat: true, containerElement: containerElement, onValueChange: (newValue) => { onValueChange?.(newValue ? newValue.toString() : undefined); onValueChanged?.(newValue ? newValue.toString() : undefined); } });
-                case MetadataDataTypes.Number: return _jsx(TMTextBox, { elementStyle: { width: '100%' }, type: 'number', buttons: [btnDistincValues], showClearButton: true, precision: md?.length, scale: md?.scale, autoFocus: autoFocus, value: value ?? '', onValueChanged: (e) => onValueChange?.(e.target.value), onBlur: (newValue) => onValueChanged?.(newValue) });
-                default: return _jsx(TMTextBox, { type: 'text', elementStyle: { width: '100%' }, showClearButton: true, buttons: [btnDistincValues], autoFocus: autoFocus, maxLength: md?.length, value: value ?? '', onValueChanged: (e) => onValueChange?.(e.target.value), onBlur: (newValue) => { onValueChanged?.(newValue); } });
-            }
-    }
-};

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@topconsultnpm/sdkui-react-beta",
-    "version": "6.6.35",
+    "version": "6.6.36",
     "description": "",
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",