@topconsultnpm/sdkui-react-beta 6.9.77 → 6.9.78
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/components/choosers/TMDataListItemChooser.js +11 -5
- package/lib/components/choosers/TMDynDataListItemChooser.js +39 -6
- package/lib/components/choosers/TMUserChooser.js +25 -10
- package/lib/components/editors/TMMetadataEditor.d.ts +2 -1
- package/lib/components/editors/TMMetadataEditor.js +6 -4
- package/lib/components/editors/TMSummary.js +6 -6
- package/lib/components/forms/TMChooserForm.js +2 -2
- package/lib/components/query/TMQueryEditor.js +2 -4
- package/lib/components/query/TMQueryResult.js +0 -1
- package/lib/components/viewers/TMDataListItemViewer.js +13 -2
- package/lib/helper/SDKUI_Localizator.d.ts +1 -0
- package/lib/helper/SDKUI_Localizator.js +10 -0
- package/lib/ts/types.d.ts +2 -0
- package/package.json +1 -1
|
@@ -8,13 +8,13 @@ import TMSpinner from '../base/TMSpinner';
|
|
|
8
8
|
import TMSummary from '../editors/TMSummary';
|
|
9
9
|
import TMChooserForm from '../forms/TMChooserForm';
|
|
10
10
|
import TMDataListItemViewer from '../viewers/TMDataListItemViewer';
|
|
11
|
-
const TMDataListItemChooser = ({ labelColor, dataListId, icon, backgroundColor, showBorder = true, buttons = [], elementStyle, allowMultipleSelection, values, isModifiedWhen, label, placeHolder, showClearButton = false, validationItems = [], onValueChanged }) => {
|
|
11
|
+
const TMDataListItemChooser = ({ labelColor, dataListId, icon, backgroundColor, showBorder = true, openChooserBySingleClick, buttons = [], elementStyle, allowMultipleSelection, values, isModifiedWhen, label, placeHolder, titleForm, showClearButton = false, validationItems = [], onValueChanged }) => {
|
|
12
12
|
const [showChooser, setShowChooser] = useState(false);
|
|
13
13
|
const renderTemplate = () => {
|
|
14
|
-
return (_jsxs(StyledDivHorizontal, { style: { minWidth: '125px' }, children: [
|
|
14
|
+
return (_jsxs(StyledDivHorizontal, { style: { minWidth: '125px' }, children: [values && values.length > 0 && _jsx(TMDataListItemViewer, { dataListId: dataListId, value: values?.[0] }), values && values.length > 1 && _jsx("p", { style: { marginLeft: '10px' }, children: `(+${values.length - 1} ${values.length == 2 ? 'altro' : 'altri'})` })] }));
|
|
15
15
|
};
|
|
16
|
-
return (_jsxs(_Fragment, { children: [_jsx(TMSummary, { placeHolder: placeHolder, labelColor: labelColor, icon: icon, buttons: buttons, backgroundColor: backgroundColor, showBorder: showBorder, hasValue: values && values.length > 0, showClearButton: showClearButton, iconEditButton: _jsx(IconSearch, { fontSize: 16 }), onEditorClick: () => setShowChooser(true), elementStyle: elementStyle, isModifiedWhen: isModifiedWhen, label: label, template: renderTemplate(), onClearClick: showClearButton ? () => { onValueChanged?.([]); } : undefined, validationItems: validationItems }), showChooser &&
|
|
17
|
-
_jsx(TMDataListItemChooserForm, { allowMultipleSelection: allowMultipleSelection, dataListId: dataListId, selectedIDs: values, onClose: () => setShowChooser(false), onChoose: (IDs) => { onValueChanged?.(IDs); } })] }));
|
|
16
|
+
return (_jsxs(_Fragment, { children: [_jsx(TMSummary, { placeHolder: placeHolder, labelColor: labelColor, icon: icon, buttons: buttons, backgroundColor: backgroundColor, showBorder: showBorder, hasValue: values && values.length > 0, showClearButton: showClearButton, iconEditButton: _jsx(IconSearch, { fontSize: 16 }), onEditorClick: () => setShowChooser(true), elementStyle: elementStyle, isModifiedWhen: isModifiedWhen, label: label, openEditorOnSummaryClick: openChooserBySingleClick, template: renderTemplate(), onClearClick: showClearButton ? () => { onValueChanged?.([]); } : undefined, validationItems: validationItems }), showChooser &&
|
|
17
|
+
_jsx(TMDataListItemChooserForm, { allowMultipleSelection: allowMultipleSelection, title: titleForm, dataListId: dataListId, selectedIDs: values, onClose: () => setShowChooser(false), onChoose: (IDs) => { onValueChanged?.(IDs); } })] }));
|
|
18
18
|
};
|
|
19
19
|
export default TMDataListItemChooser;
|
|
20
20
|
const cellRenderIcon = (data) => _jsx(TMImageLibrary, { imageID: data.data?.imageID });
|
|
@@ -33,5 +33,11 @@ export const TMDataListItemChooserForm = (props) => {
|
|
|
33
33
|
TMSpinner.hide();
|
|
34
34
|
return dataList ? dataList.items ?? [] : [];
|
|
35
35
|
};
|
|
36
|
-
|
|
36
|
+
const getTitle = () => {
|
|
37
|
+
let title = SDK_Localizator.DataList;
|
|
38
|
+
if (props.title)
|
|
39
|
+
title += `: ${props.title}`;
|
|
40
|
+
return title;
|
|
41
|
+
};
|
|
42
|
+
return (_jsx(TMChooserForm, { title: getTitle(), allowMultipleSelection: props.allowMultipleSelection, width: props.width, height: props.height, keyName: 'value', showDefaultColumns: false, hasShowId: false, columns: renderDataGridColumns, selectedIDs: props.selectedIDs, cellRenderIcon: cellRenderIcon, dataSource: props.dataSource, getItems: getItems, onClose: props.onClose, onChoose: (IDs) => props.onChoose?.(IDs) }));
|
|
37
43
|
};
|
|
@@ -2,12 +2,14 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
|
|
|
2
2
|
import { useEffect, useState } from 'react';
|
|
3
3
|
import { DataColumnTypes, SDK_Localizator, DataListCacheService, SDK_Globals, LayoutModes } from '@topconsultnpm/sdk-ts-beta';
|
|
4
4
|
import { Column } from 'devextreme-react/cjs/data-grid';
|
|
5
|
-
import { IconDetails, IconSearch, getDataColumnName, Globalization, SDKUI_Localizator, searchResultDescriptorToSimpleArray, IsParametricQuery } from '../../helper';
|
|
5
|
+
import { IconDetails, IconSearch, getDataColumnName, Globalization, SDKUI_Localizator, searchResultDescriptorToSimpleArray, IsParametricQuery, IconWarning } from '../../helper';
|
|
6
6
|
import { StyledDivHorizontal } from '../base/Styled';
|
|
7
7
|
import TMSpinner from '../base/TMSpinner';
|
|
8
8
|
import TMSummary from '../editors/TMSummary';
|
|
9
9
|
import TMChooserForm from '../forms/TMChooserForm';
|
|
10
|
-
|
|
10
|
+
import { TMColors } from '../../utils/theme';
|
|
11
|
+
import TMTooltip from '../base/TMTooltip';
|
|
12
|
+
const TMDynDataListItemChooser = ({ tid, md, titleForm, openChooserBySingleClick, layoutMode = LayoutModes.None, queryParamsDynDataList, buttons = [], backgroundColor, showBorder = true, elementStyle, allowMultipleSelection, values, isModifiedWhen, label, placeHolder, validationItems = [], icon, labelColor, showClearButton, onValueChanged, onCascadeRefreshDynDataLists, onCascadeUpdateMIDs }) => {
|
|
11
13
|
const [showChooser, setShowChooser] = useState(false);
|
|
12
14
|
const [dynDl, setDynDl] = useState();
|
|
13
15
|
const [dataSource, setDataSource] = useState();
|
|
@@ -49,11 +51,36 @@ const TMDynDataListItemChooser = ({ tid, md, layoutMode = LayoutModes.None, quer
|
|
|
49
51
|
const loadData = async () => {
|
|
50
52
|
return await SDK_Globals.tmSession?.NewSearchEngine().GetDynDataListValuesAsync(tid, md?.id, layoutMode, queryParamsDynDataList ?? []);
|
|
51
53
|
};
|
|
54
|
+
const getDescription = () => {
|
|
55
|
+
if (!Array.isArray(values))
|
|
56
|
+
return "";
|
|
57
|
+
if (!values || values.length <= 0)
|
|
58
|
+
return "";
|
|
59
|
+
if (!values[0])
|
|
60
|
+
return "";
|
|
61
|
+
if (!dynDl)
|
|
62
|
+
return values?.[0];
|
|
63
|
+
let description = dataSource?.dtdResult?.rows?.filter(o => o[dynDl.selectItemForValue ?? 0] == values?.[0])?.[0]?.[dynDl.selectItemForDescription ?? 0];
|
|
64
|
+
return description ?? values?.[0];
|
|
65
|
+
};
|
|
66
|
+
const getIcon = () => {
|
|
67
|
+
if (!Array.isArray(values))
|
|
68
|
+
return null;
|
|
69
|
+
if (!values || values.length <= 0)
|
|
70
|
+
return null;
|
|
71
|
+
if (!values?.[0])
|
|
72
|
+
return null;
|
|
73
|
+
if (!dynDl)
|
|
74
|
+
return _jsx(IconDetails, {});
|
|
75
|
+
let description = dataSource?.dtdResult?.rows?.filter(o => o[dynDl.selectItemForValue ?? 0] == values?.[0])?.[0]?.[dynDl.selectItemForDescription ?? 0];
|
|
76
|
+
return description ? _jsx(IconDetails, {}) :
|
|
77
|
+
_jsx(TMTooltip, { content: SDKUI_Localizator.ValueNotPresent, children: _jsx(IconWarning, { color: TMColors.warning }) });
|
|
78
|
+
};
|
|
52
79
|
const renderTemplate = () => {
|
|
53
|
-
return (_jsxs(StyledDivHorizontal, { style: { minWidth: '125px' }, children: [
|
|
80
|
+
return (_jsxs(StyledDivHorizontal, { style: { minWidth: '125px' }, children: [_jsxs(StyledDivHorizontal, { children: [getIcon(), _jsx("p", { style: { marginLeft: '5px' }, children: getDescription() })] }), values && values.length > 1 && _jsx("p", { style: { marginLeft: '10px' }, children: `(+${values.length - 1} ${values.length == 2 ? 'altro' : 'altri'})` })] }));
|
|
54
81
|
};
|
|
55
|
-
return (_jsxs(_Fragment, { children: [_jsx(TMSummary, { placeHolder: placeHolder, icon: icon, labelColor: labelColor, backgroundColor: backgroundColor, buttons: buttons, showBorder: showBorder, hasValue: values && values.length > 0, showClearButton: showClearButton, iconEditButton: _jsx(IconSearch, { fontSize: 16 }), onEditorClick: () => setShowChooser(true), elementStyle: elementStyle, isModifiedWhen: isModifiedWhen, label: label, template: renderTemplate(), onClearClick: showClearButton ? () => { onValueChanged?.([]); } : undefined, validationItems: validationItems }), showChooser &&
|
|
56
|
-
_jsx(TMDynDataListItemChooserForm, { TID: tid, MID: md?.id, dynDL: dynDl, allowMultipleSelection: allowMultipleSelection, searchResult: dataSource, selectedIDs: values, onClose: () => setShowChooser(false), onChoose: (IDs) => {
|
|
82
|
+
return (_jsxs(_Fragment, { children: [_jsx(TMSummary, { placeHolder: placeHolder, icon: icon, labelColor: labelColor, backgroundColor: backgroundColor, buttons: buttons, showBorder: showBorder, hasValue: values && values.length > 0, showClearButton: showClearButton, iconEditButton: _jsx(IconSearch, { fontSize: 16 }), onEditorClick: () => setShowChooser(true), elementStyle: elementStyle, isModifiedWhen: isModifiedWhen, openEditorOnSummaryClick: openChooserBySingleClick, label: label, template: renderTemplate(), onClearClick: showClearButton ? () => { onValueChanged?.([]); } : undefined, validationItems: validationItems }), showChooser &&
|
|
83
|
+
_jsx(TMDynDataListItemChooserForm, { TID: tid, MID: md?.id, dynDL: dynDl, title: titleForm, allowMultipleSelection: allowMultipleSelection, searchResult: dataSource, selectedIDs: values, onClose: () => setShowChooser(false), onChoose: (IDs) => {
|
|
57
84
|
onValueChanged?.(IDs);
|
|
58
85
|
if (!dynDl)
|
|
59
86
|
return;
|
|
@@ -117,5 +144,11 @@ export const TMDynDataListItemChooserForm = (props) => {
|
|
|
117
144
|
TMSpinner.hide();
|
|
118
145
|
return result ? searchResultDescriptorToSimpleArray(result) ?? [] : [];
|
|
119
146
|
};
|
|
120
|
-
|
|
147
|
+
const getTitle = () => {
|
|
148
|
+
let title = SDK_Localizator.DataList;
|
|
149
|
+
if (props.title)
|
|
150
|
+
title += `: ${props.title}`;
|
|
151
|
+
return title;
|
|
152
|
+
};
|
|
153
|
+
return (_jsx(TMChooserForm, { title: getTitle(), allowMultipleSelection: props.allowMultipleSelection, width: props.width, height: props.height, keyName: keyValue ?? '', showDefaultColumns: false, hasShowId: false, columns: renderDataGridColumns, selectedIDs: props.selectedIDs, cellRenderIcon: () => { return (_jsx(IconDetails, {})); }, dataSource: searchResultDescriptorToSimpleArray(props.searchResult) ?? [], getItems: getItems, onClose: props.onClose, onChoose: (IDs) => props.onChoose?.(IDs) }));
|
|
121
154
|
};
|
|
@@ -1,14 +1,15 @@
|
|
|
1
|
-
import { jsx as _jsx,
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
2
|
import { useEffect, useState } from 'react';
|
|
3
3
|
import { SDK_Localizator, UserLevels, UserListCacheService } from '@topconsultnpm/sdk-ts-beta';
|
|
4
4
|
import { Column } from 'devextreme-react/cjs/data-grid';
|
|
5
|
-
import { SDKUI_Localizator, IconSearch, IconUserLevelMember, IconUserLevelAdministrator, IconUserLevelSystemAdministrator, IconUserLevelAutonomousAdministrator } from '../../helper';
|
|
5
|
+
import { SDKUI_Localizator, IconSearch, IconUserLevelMember, IconUserLevelAdministrator, IconUserLevelSystemAdministrator, IconUserLevelAutonomousAdministrator, IconWarning } from '../../helper';
|
|
6
6
|
import { StyledDivHorizontal, StyledTooltipContainer, StyledTooltipItem, StyledTooltipSeparatorItem } from '../base/Styled';
|
|
7
7
|
import TMSpinner from '../base/TMSpinner';
|
|
8
8
|
import TMTooltip from '../base/TMTooltip';
|
|
9
9
|
import TMSummary from '../editors/TMSummary';
|
|
10
10
|
import TMChooserForm from '../forms/TMChooserForm';
|
|
11
|
-
|
|
11
|
+
import { TMColors } from '../../utils/theme';
|
|
12
|
+
const TMUserChooser = ({ labelColor, titleForm, readOnly = false, icon, dataSource, backgroundColor, openChooserBySingleClick, buttons = [], disabled = false, showBorder = true, elementStyle, allowMultipleSelection, values, isModifiedWhen, label, placeHolder, validationItems = [], onValueChanged, showClearButton }) => {
|
|
12
13
|
const [showChooser, setShowChooser] = useState(false);
|
|
13
14
|
useEffect(() => {
|
|
14
15
|
if (!values || values.length <= 0)
|
|
@@ -17,12 +18,10 @@ const TMUserChooser = ({ labelColor, readOnly = false, icon, dataSource, backgro
|
|
|
17
18
|
UserListCacheService.GetAsync(values[0]).then(() => { TMSpinner.hide(); });
|
|
18
19
|
}, [values]);
|
|
19
20
|
const renderTemplate = () => {
|
|
20
|
-
return (
|
|
21
|
-
? _jsx("p", { children: placeHolder })
|
|
22
|
-
: _jsxs(_Fragment, { children: [_jsx(TMUserIdViewer, { userId: values?.[0], showIcon: true }), values && values.length > 1 && _jsx("p", { style: { marginLeft: '10px' }, children: `(+${values.length - 1} ${values.length == 2 ? 'altro' : 'altri'})` })] }) }));
|
|
21
|
+
return (_jsxs(StyledDivHorizontal, { style: { minWidth: '125px' }, children: [values && values.length > 0 && _jsx(TMUserIdViewer, { userId: values?.[0], showIcon: true, noneSelectionText: '' }), values && values.length > 1 && _jsx("p", { style: { marginLeft: '10px' }, children: `(+${values.length - 1} ${values.length == 2 ? 'altro' : 'altri'})` })] }));
|
|
23
22
|
};
|
|
24
|
-
return (_jsxs(_Fragment, { children: [_jsx(TMSummary, { disabled: disabled, placeHolder: placeHolder, readOnly: readOnly, labelColor: labelColor, icon: icon, backgroundColor: backgroundColor, buttons: buttons, showBorder: showBorder, hasValue: values && values.length > 0, showClearButton: showClearButton, iconEditButton: _jsx(IconSearch, { fontSize: 16 }), onEditorClick: () => !readOnly && setShowChooser(true), elementStyle: elementStyle, isModifiedWhen: isModifiedWhen, label: label, template: renderTemplate(), onClearClick: showClearButton ? () => { onValueChanged?.([]); } : undefined, validationItems: validationItems }), showChooser &&
|
|
25
|
-
_jsx(TMUserChooserForm, { allowMultipleSelection: allowMultipleSelection, dataSource: dataSource, selectedIDs: values, onClose: () => setShowChooser(false), onChoose: (IDs) => { onValueChanged?.(IDs); } })] }));
|
|
23
|
+
return (_jsxs(_Fragment, { children: [_jsx(TMSummary, { disabled: disabled, placeHolder: placeHolder, readOnly: readOnly, labelColor: labelColor, icon: icon, backgroundColor: backgroundColor, buttons: buttons, showBorder: showBorder, hasValue: values && values.length > 0, showClearButton: showClearButton, iconEditButton: _jsx(IconSearch, { fontSize: 16 }), onEditorClick: () => !readOnly && setShowChooser(true), elementStyle: elementStyle, isModifiedWhen: isModifiedWhen, openEditorOnSummaryClick: openChooserBySingleClick, label: label, template: renderTemplate(), onClearClick: showClearButton ? () => { onValueChanged?.([]); } : undefined, validationItems: validationItems }), showChooser &&
|
|
24
|
+
_jsx(TMUserChooserForm, { allowMultipleSelection: allowMultipleSelection, title: titleForm, dataSource: dataSource, selectedIDs: values, onClose: () => setShowChooser(false), onChoose: (IDs) => { onValueChanged?.(IDs); } })] }));
|
|
26
25
|
};
|
|
27
26
|
export default TMUserChooser;
|
|
28
27
|
export const TMUserChooserForm = (props) => {
|
|
@@ -37,7 +36,13 @@ export const TMUserChooserForm = (props) => {
|
|
|
37
36
|
TMSpinner.hide();
|
|
38
37
|
return users;
|
|
39
38
|
};
|
|
40
|
-
|
|
39
|
+
const getTitle = () => {
|
|
40
|
+
let title = SDK_Localizator.Users;
|
|
41
|
+
if (props.title)
|
|
42
|
+
title += `: ${props.title}`;
|
|
43
|
+
return title;
|
|
44
|
+
};
|
|
45
|
+
return (_jsx(TMChooserForm, { title: getTitle(), allowMultipleSelection: props.allowMultipleSelection, hasShowOnlySelectedItems: true, width: props.width, height: props.height, manageUseLocalizedName: false, columns: renderDataGridColumns, selectedIDs: props.selectedIDs, cellRenderIcon: (data) => { return _jsx(TMUserIcon, { ud: data.data }); }, dataSource: props.dataSource, getItems: getItems, onClose: props.onClose, onChoose: (IDs) => props.onChoose?.(IDs) }));
|
|
41
46
|
};
|
|
42
47
|
export const TMUserIdViewer = ({ userId, showIcon = false, noneSelectionText = `<${SDKUI_Localizator.NoneSelection}>` }) => {
|
|
43
48
|
const [ud, setUd] = useState();
|
|
@@ -49,7 +54,17 @@ export const TMUserIdViewer = ({ userId, showIcon = false, noneSelectionText = `
|
|
|
49
54
|
TMSpinner.show({ description: `${SDKUI_Localizator.Loading} - ${SDK_Localizator.Users} ...` });
|
|
50
55
|
UserListCacheService.GetAsync(userId).then((ud) => { setUd(ud); TMSpinner.hide(); });
|
|
51
56
|
}, [userId]);
|
|
52
|
-
|
|
57
|
+
const getIcon = () => {
|
|
58
|
+
if (!showIcon)
|
|
59
|
+
return null;
|
|
60
|
+
if (!userId)
|
|
61
|
+
return null;
|
|
62
|
+
return ud ?
|
|
63
|
+
_jsx(TMUserIcon, { ud: ud })
|
|
64
|
+
:
|
|
65
|
+
_jsx(TMTooltip, { content: SDKUI_Localizator.ValueNotPresent, children: _jsx(IconWarning, { color: TMColors.warning }) });
|
|
66
|
+
};
|
|
67
|
+
return (_jsxs(StyledDivHorizontal, { children: [getIcon(), _jsx("p", { style: { textAlign: 'left', marginLeft: showIcon ? '5px' : '' }, children: ud ? getCompleteUserName(ud.domain, ud.name) : userId ?? noneSelectionText })] }));
|
|
53
68
|
};
|
|
54
69
|
export const TMUserIcon = ({ ud }) => {
|
|
55
70
|
if (!ud)
|
|
@@ -15,6 +15,7 @@ interface ITMMetadataEditorProps {
|
|
|
15
15
|
queryOperator?: QueryOperators;
|
|
16
16
|
isModifiedWhen?: boolean;
|
|
17
17
|
isEditableList?: boolean;
|
|
18
|
+
openChooserBySingleClick?: boolean;
|
|
18
19
|
iconContextMenu?: React.ReactNode;
|
|
19
20
|
customLabel?: string;
|
|
20
21
|
onEditorClick?: () => void;
|
|
@@ -23,5 +24,5 @@ interface ITMMetadataEditorProps {
|
|
|
23
24
|
onCascadeRefreshDynDataLists?: (dynDataListsToBeRefreshed: DynDataListsToBeRefreshed[]) => void;
|
|
24
25
|
onCascadeUpdateMIDs?: (midsToBeUpdated: MIDsToBeUpdated[]) => void;
|
|
25
26
|
}
|
|
26
|
-
declare const TMMetadataEditor: ({ onEditorClick, customLabel, isLexProt, layoutMode, queryOperator, isEditableList, isModifiedWhen, tid, mid, value, queryParamsDynDataList, containerElement, autoFocus, validationItems, disabled, iconContextMenu, onValueChanged, onValueChange, onCascadeRefreshDynDataLists, onCascadeUpdateMIDs }: ITMMetadataEditorProps) => import("react/jsx-runtime").JSX.Element;
|
|
27
|
+
declare const TMMetadataEditor: ({ onEditorClick, customLabel, isLexProt, layoutMode, queryOperator, isEditableList, isModifiedWhen, tid, mid, value, queryParamsDynDataList, containerElement, autoFocus, validationItems, disabled, openChooserBySingleClick, iconContextMenu, onValueChanged, onValueChange, onCascadeRefreshDynDataLists, onCascadeUpdateMIDs }: ITMMetadataEditorProps) => import("react/jsx-runtime").JSX.Element;
|
|
27
28
|
export default TMMetadataEditor;
|
|
@@ -12,7 +12,7 @@ import TMTextArea from './TMTextArea';
|
|
|
12
12
|
const renderMetadataIcon = (tid, md, layoutMode, iconContextMenu) => {
|
|
13
13
|
return (_jsxs("div", { id: `md-${md?.id}`, style: { height: '100%', width: '100%' }, children: [_jsx(TMMetadataIcon, { layoutMode: layoutMode, md: md, tid: tid }), iconContextMenu] }));
|
|
14
14
|
};
|
|
15
|
-
const TMMetadataEditor = ({ onEditorClick, customLabel, isLexProt, layoutMode, queryOperator, isEditableList, isModifiedWhen = false, tid, mid, value, queryParamsDynDataList, containerElement, autoFocus, validationItems = [], disabled = false, iconContextMenu, onValueChanged, onValueChange, onCascadeRefreshDynDataLists, onCascadeUpdateMIDs }) => {
|
|
15
|
+
const TMMetadataEditor = ({ onEditorClick, customLabel, isLexProt, layoutMode, queryOperator, isEditableList, isModifiedWhen = false, tid, mid, value, queryParamsDynDataList, containerElement, autoFocus, validationItems = [], disabled = false, openChooserBySingleClick = true, iconContextMenu, onValueChanged, onValueChange, onCascadeRefreshDynDataLists, onCascadeUpdateMIDs }) => {
|
|
16
16
|
const [md, setMd] = useState();
|
|
17
17
|
useEffect(() => {
|
|
18
18
|
DcmtTypeListCacheService.GetAsync(tid).then((dtd) => {
|
|
@@ -20,6 +20,8 @@ const TMMetadataEditor = ({ onEditorClick, customLabel, isLexProt, layoutMode, q
|
|
|
20
20
|
});
|
|
21
21
|
}, [mid]);
|
|
22
22
|
const isReadOnlyInternal = () => {
|
|
23
|
+
if (!md)
|
|
24
|
+
return false;
|
|
23
25
|
if (md?.isSystem === 1 && layoutMode !== LayoutModes.None)
|
|
24
26
|
return true;
|
|
25
27
|
switch (layoutMode) {
|
|
@@ -41,21 +43,21 @@ const TMMetadataEditor = ({ onEditorClick, customLabel, isLexProt, layoutMode, q
|
|
|
41
43
|
if (value?.startsWith("{@QueryParam") || value == "{@UserName}" || value == "{@UserID}" || queryOperator == QueryOperators.Custom)
|
|
42
44
|
return _jsxs("div", { onFocus: onEditorClick, style: { width: '100%', height: 'fit-content' }, children: [" ", _jsx(TMTextBox, { placeHolder: layoutMode === LayoutModes.Ark ? md?.defaultValue ?? '' : '', isModifiedWhen: isModifiedWhenInternal(), readOnly: isReadOnlyResult, label: (SDK_Globals.appModule !== AppModules.SURFER || showLabelTop) ? (customLabel ?? md?.nameLoc) : undefined, icon: showLabelTop ? renderMetadataIcon(tid, md, layoutMode, iconContextMenu) : undefined, validationItems: validationItems, disabled: disabled, elementStyle: { width: '100%' }, type: 'text', maxLength: maxLength, autoFocus: autoFocus, value: value ?? '', onValueChanged: (e) => onValueChange?.(e.target.value), onBlur: (newValue) => onValueChanged?.(newValue) }), " "] });
|
|
43
45
|
if (md?.dataDomain == MetadataDataDomains.DynamicDataList && !isEditableList)
|
|
44
|
-
return _jsxs("div", { onFocus: onEditorClick, style: { width: '100%', height: 'fit-content' }, children: [
|
|
46
|
+
return _jsxs("div", { onFocus: onEditorClick, style: { width: '100%', height: 'fit-content' }, children: [_jsx(TMDynDataListItemChooser, { placeHolder: layoutMode === LayoutModes.Ark ? md?.defaultValue ?? '' : '', titleForm: md.nameLoc, readOnly: isReadOnlyResult, layoutMode: layoutMode, isModifiedWhen: isModifiedWhenInternal(), label: (SDK_Globals.appModule !== AppModules.SURFER || showLabelTop) ? (customLabel ?? md?.nameLoc) : undefined, icon: showLabelTop ? renderMetadataIcon(tid, md, layoutMode, iconContextMenu) : undefined, validationItems: validationItems, disabled: disabled, md: md, tid: tid, openChooserBySingleClick: openChooserBySingleClick, queryParamsDynDataList: queryParamsDynDataList, onCascadeRefreshDynDataLists: onCascadeRefreshDynDataLists, onCascadeUpdateMIDs: onCascadeUpdateMIDs, elementStyle: { width: '100%' }, backgroundColor: TMColors.default_background, allowMultipleSelection: multipleSelectionIsenabled, values: value ? [value] : [], showClearButton: !isReadOnlyResult, onValueChanged: (IDs) => {
|
|
45
47
|
if (!IDs || IDs.length <= 0)
|
|
46
48
|
onValueChanged?.(undefined);
|
|
47
49
|
else
|
|
48
50
|
onValueChanged?.(IDs[0]);
|
|
49
51
|
} }), " "] });
|
|
50
52
|
if (md?.dataDomain == MetadataDataDomains.DataList && !isEditableList)
|
|
51
|
-
return _jsxs("div", { onFocus: onEditorClick, style: { width: '100%', height: 'fit-content' }, children: [
|
|
53
|
+
return _jsxs("div", { onFocus: onEditorClick, style: { width: '100%', height: 'fit-content' }, children: [_jsx(TMDataListItemChooser, { placeHolder: layoutMode === LayoutModes.Ark ? md?.defaultValue ?? '' : '', titleForm: md.nameLoc, readOnly: isReadOnlyResult, isModifiedWhen: isModifiedWhenInternal(), label: (SDK_Globals.appModule !== AppModules.SURFER || showLabelTop) ? (customLabel ?? md?.nameLoc) : undefined, icon: showLabelTop ? renderMetadataIcon(tid, md, layoutMode, iconContextMenu) : undefined, validationItems: validationItems, disabled: disabled, elementStyle: { width: '100%' }, backgroundColor: TMColors.default_background, dataListId: md.dataListID, openChooserBySingleClick: openChooserBySingleClick, allowMultipleSelection: multipleSelectionIsenabled, values: value?.split(',').map((item) => !item.startsWith("'") ? item : item.slice(1, -1)) ?? [], showClearButton: !isReadOnlyResult, onValueChanged: (IDs) => {
|
|
52
54
|
if (!IDs || IDs.length <= 0)
|
|
53
55
|
onValueChanged?.(undefined);
|
|
54
56
|
else
|
|
55
57
|
onValueChanged?.(IDs.join(","));
|
|
56
58
|
} }), " "] });
|
|
57
59
|
if (md?.dataDomain == MetadataDataDomains.UserID && !isEditableList)
|
|
58
|
-
return _jsxs("div", { onFocus: onEditorClick, style: { width: '100%', height: 'fit-content' }, children: [
|
|
60
|
+
return _jsxs("div", { onFocus: onEditorClick, style: { width: '100%', height: 'fit-content' }, children: [_jsx(TMUserChooser, { placeHolder: layoutMode === LayoutModes.Ark ? md?.defaultValue ?? '' : '', titleForm: md.nameLoc, readOnly: isReadOnlyResult, isModifiedWhen: isModifiedWhenInternal(), label: (SDK_Globals.appModule !== AppModules.SURFER || showLabelTop) ? (customLabel ?? md?.nameLoc) : undefined, icon: showLabelTop ? renderMetadataIcon(tid, md, layoutMode, iconContextMenu) : undefined, validationItems: validationItems, disabled: disabled, elementStyle: { width: '100%' }, openChooserBySingleClick: openChooserBySingleClick, backgroundColor: TMColors.default_background, showClearButton: !isReadOnlyResult, allowMultipleSelection: multipleSelectionIsenabled, values: value?.split(',').map((item) => !item.startsWith("'") ? Number(item) : Number(item.slice(1, -1))) ?? [], onValueChanged: (IDs) => {
|
|
59
61
|
if (!IDs || IDs.length <= 0)
|
|
60
62
|
onValueChanged?.(undefined);
|
|
61
63
|
else
|
|
@@ -46,13 +46,13 @@ const StyledEditorButtonIcon2 = styled.div `
|
|
|
46
46
|
border-bottom-color: ${TMColors.primary};
|
|
47
47
|
}
|
|
48
48
|
`;
|
|
49
|
-
const TMSummary = ({ placeHolder, readOnly, labelColor, hasValue, borderRadius = '4px', validationItems = [], buttons = [], label = '', onClearClick, openEditorOnSummaryClick, onEditorClick, backgroundColor = 'transparent', showBorder = true, isModifiedWhen, elementStyle, width = '100%', height = '100%', fontSize = FontSize.defaultFontSize, icon, showEditButton = true, showClearButton, iconEditButton, iconeEditTooltip, labelPosition = 'left', template, disabled = false, onValueChanged }) => {
|
|
49
|
+
const TMSummary = ({ placeHolder, readOnly, labelColor, hasValue, borderRadius = '4px', validationItems = [], buttons = [], label = '', onClearClick, openEditorOnSummaryClick = true, onEditorClick, backgroundColor = 'transparent', showBorder = true, isModifiedWhen, elementStyle, width = '100%', height = '100%', fontSize = FontSize.defaultFontSize, icon, showEditButton = true, showClearButton, iconEditButton, iconeEditTooltip, labelPosition = 'left', template, disabled = false, onValueChanged }) => {
|
|
50
50
|
const renderTemplateField = () => {
|
|
51
|
-
return (
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
51
|
+
return (_jsxs(StyledSummaryTemplateInput, { "$readOnly": readOnly, tabIndex: 0, "$backgroundColor": backgroundColor, "$borderRadius": borderRadius, "$isModified": isModifiedWhen, "$vil": validationItems, "$disabled": disabled, "$showBorder": showBorder, "$fontSize": fontSize, "$width": width, "$height": height, onChange: onValueChanged, children: [_jsx("div", { onClick: () => { if (openEditorOnSummaryClick && !disabled)
|
|
52
|
+
onEditorClick?.(); }, onDoubleClick: () => { if (!openEditorOnSummaryClick && !disabled)
|
|
53
|
+
onEditorClick?.(); }, style: { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', userSelect: 'text', alignItems: 'center', width: '100%', minHeight: '16px', cursor: openEditorOnSummaryClick ? 'pointer' : 'default' }, children: template }), _jsxs("div", { style: { display: 'flex', flexDirection: 'row', gap: '3px', justifyContent: 'flex-start', alignItems: 'center', pointerEvents: disabled ? 'none' : 'auto', opacity: disabled ? 0.4 : 1 }, children: [showClearButton && hasValue && _jsx(StyledEditorButtonIcon2, { tabIndex: disabled ? -1 : 0, onKeyDown: (e) => e.code === 'Space' && onClearClick?.(), onClick: onClearClick, children: _jsx(TMTooltip, { content: SDKUI_Localizator.Clear, children: _jsx(IconClearButton, {}) }) }), showEditButton && _jsx(StyledEditorButtonIcon2, { tabIndex: disabled ? -1 : 0, onKeyDown: (e) => e.code === 'Space' && onEditorClick?.(), onClick: onEditorClick, children: _jsx(TMTooltip, { content: iconeEditTooltip ?? SDKUI_Localizator.Update, children: iconEditButton ?? _jsx(IconPencil, {}) }) }), buttons.map((buttonItem) => {
|
|
54
|
+
return (_jsx(StyledEditorButtonIcon2, { onClick: buttonItem.onClick, children: _jsx(TMTooltip, { content: buttonItem.text, children: buttonItem.icon }) }, buttonItem.text));
|
|
55
|
+
})] })] }));
|
|
56
56
|
};
|
|
57
57
|
const renderLabel = () => {
|
|
58
58
|
return (_jsx(StyledEditorLabel, { "$color": labelColor, "$isFocused": false, "$labelPosition": labelPosition, "$disabled": disabled, children: _jsx("div", { style: { flexDirection: "row", display: "flex", alignItems: "start", justifyContent: "start" }, children: label }) }));
|
|
@@ -15,7 +15,7 @@ const TMChooserForm = ({ children, title, allowMultipleSelection, hasShowOnlySel
|
|
|
15
15
|
let gridInstance;
|
|
16
16
|
const getDataSource = () => { return (allowMultipleSelection && hasShowOnlySelectedItems && showOnlySelectedItems && selectedItems.length > 0) ? selectedItems : customFilter ? customFilter(items) : items; };
|
|
17
17
|
const getSelectedIDs = () => { return selectedItems.map((item) => { return convertID ? convertID(item) : item[keyName]; }); };
|
|
18
|
-
const renderTitle = () => { return title ? `${title}
|
|
18
|
+
const renderTitle = () => { return title ? `${title} (${selectedItems.length}/${customFilter ? customFilter(items).length : items.length})` : SDKUI_Localizator.Select; };
|
|
19
19
|
const doGetItems = (refreshCache) => {
|
|
20
20
|
if (dataSource) {
|
|
21
21
|
setItems(dataSource);
|
|
@@ -46,7 +46,7 @@ const TMChooserForm = ({ children, title, allowMultipleSelection, hasShowOnlySel
|
|
|
46
46
|
setIsInitialized(true);
|
|
47
47
|
}
|
|
48
48
|
}
|
|
49
|
-
}, onRowDblClick:
|
|
49
|
+
}, onRowDblClick: () => {
|
|
50
50
|
onChoose?.(getSelectedIDs());
|
|
51
51
|
onClose?.();
|
|
52
52
|
}, onSelectionChanged: (e) => { setSelectedItems(e.selectedRowsData); }, onToolbarPreparing: (e) => { e.toolbarOptions.items.forEach((item) => { if (item.name === "searchPanel")
|
|
@@ -836,7 +836,7 @@ const TMQdWhereItemValue = ({ whereItem, index, queryParamsDynDataList, onlyEdit
|
|
|
836
836
|
setDataList(dataList);
|
|
837
837
|
});
|
|
838
838
|
break;
|
|
839
|
-
case MetadataDataDomains.DynamicDataList:
|
|
839
|
+
case MetadataDataDomains.DynamicDataList: {
|
|
840
840
|
if (dynDl != undefined)
|
|
841
841
|
return;
|
|
842
842
|
TMSpinner.show({ description: `${SDKUI_Localizator.Loading} - ${"Lista dati dinamica"} ...` });
|
|
@@ -844,9 +844,6 @@ const TMQdWhereItemValue = ({ whereItem, index, queryParamsDynDataList, onlyEdit
|
|
|
844
844
|
if (mdOut?.dynDL_IsMultiCfg == 1)
|
|
845
845
|
d = mdOut?.dynDL_Cfgs?.[1];
|
|
846
846
|
setDynDl(d);
|
|
847
|
-
console.log(d);
|
|
848
|
-
console.log(whereItem);
|
|
849
|
-
console.log(d?.qd?.from?.tid === whereItem.tid);
|
|
850
847
|
let isEditable = IsParametricQuery(d?.qd);
|
|
851
848
|
setIsEditableList(isEditable);
|
|
852
849
|
setEditingMode(whereItem.operator == QueryOperators.Custom || isEditable ? EditingModes.Editing : EditingModes.Chooser);
|
|
@@ -855,6 +852,7 @@ const TMQdWhereItemValue = ({ whereItem, index, queryParamsDynDataList, onlyEdit
|
|
|
855
852
|
setDataSource(result);
|
|
856
853
|
}).catch((err) => { TMExceptionBoxManager.show({ exception: err }); });
|
|
857
854
|
break;
|
|
855
|
+
}
|
|
858
856
|
case MetadataDataDomains.UserID:
|
|
859
857
|
setEditingMode(whereItem.operator == QueryOperators.Custom ? EditingModes.Editing : EditingModes.Chooser);
|
|
860
858
|
if (users !== undefined)
|
|
@@ -28,7 +28,6 @@ const TMQueryResult = ({ result, elapsedTime, showHiddenSelectItems, searchText,
|
|
|
28
28
|
}, onRowDblClick: onDblClick, children: [_jsx(Selection, { mode: "multiple", showCheckBoxesMode: "onClick", selectAllMode: 'allPages' }), _jsx(SearchPanel, { visible: false }), _jsx(Scrolling, { mode: 'virtual', useNative: SDKUI_Globals.dataGridUseNativeScrollbar }), _jsx(HeaderFilter, { visible: true }), _jsx(Paging, { pageSize: 25 }), _jsx(Pager, { visible: true, showInfo: true, showNavigationButtons: true }), _jsx(LoadPanel, { enabled: true }), _jsx(Column, { dataType: "object", width: 40, visible: true, cellRender: () => cellRenderObjectIcon(_jsx(IconFileDots, { color: '#767676' })) }), result?.dtdResult?.columns?.map((col, index) => {
|
|
29
29
|
let keyField = getDataColumnName(result?.fromTID, col);
|
|
30
30
|
const isVisible = col.extendedProperties?.["Visibility"] != "Hidden";
|
|
31
|
-
// console.log(isVisible || showHiddenSelectItems)
|
|
32
31
|
const dataType = () => {
|
|
33
32
|
switch (col.dataType) {
|
|
34
33
|
case DataColumnTypes.DateTime: return "datetime";
|
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { useEffect, useState } from 'react';
|
|
3
3
|
import { DataListCacheService, DataListViewModes } from '@topconsultnpm/sdk-ts-beta';
|
|
4
|
-
import { TMImageLibrary } from '../../helper';
|
|
4
|
+
import { IconWarning, SDKUI_Localizator, TMImageLibrary } from '../../helper';
|
|
5
5
|
import { StyledDivHorizontal } from '../base/Styled';
|
|
6
6
|
import TMTooltip from '../base/TMTooltip';
|
|
7
|
+
import { TMColors } from '../../utils/theme';
|
|
7
8
|
const TMDataListItemViewer = ({ dataListId, value, viewMode = DataListViewModes.ImageAndDescription }) => {
|
|
8
9
|
const [dataListItem, setDataListItem] = useState();
|
|
9
10
|
useEffect(() => {
|
|
@@ -14,7 +15,17 @@ const TMDataListItemViewer = ({ dataListId, value, viewMode = DataListViewModes.
|
|
|
14
15
|
DataListCacheService.GetAsync(dataListId).then((dl) => { setDataListItem(dl?.items?.find(o => o.value == value)); });
|
|
15
16
|
}, [dataListId, value]);
|
|
16
17
|
let showIcon = viewMode != DataListViewModes.Description;
|
|
17
|
-
|
|
18
|
+
const getIcon = () => {
|
|
19
|
+
if (!showIcon)
|
|
20
|
+
return null;
|
|
21
|
+
if (!value)
|
|
22
|
+
return null;
|
|
23
|
+
return dataListItem ?
|
|
24
|
+
_jsx(TMTooltip, { content: dataListItem.value, children: _jsx(TMImageLibrary, { imageID: dataListItem.imageID }) })
|
|
25
|
+
:
|
|
26
|
+
_jsx(TMTooltip, { content: SDKUI_Localizator.ValueNotPresent, children: _jsx(IconWarning, { color: TMColors.warning }) });
|
|
27
|
+
};
|
|
28
|
+
return (_jsxs(StyledDivHorizontal, { children: [getIcon(), _jsx("p", { style: { textAlign: 'left', marginLeft: showIcon ? '5px' : '' }, children: dataListItem ? dataListItem.name : value })] }));
|
|
18
29
|
};
|
|
19
30
|
export default TMDataListItemViewer;
|
|
20
31
|
export const cellRenderDataListItem = (data, dataListId, viewMode) => {
|
|
@@ -278,6 +278,7 @@ export declare class SDKUI_Localizator {
|
|
|
278
278
|
static get Value(): "Wert" | "Value" | "Valor" | "Valeur" | "Valore";
|
|
279
279
|
static get ValueAscending(): "Aufsteigend Wert" | "Value ascending" | "Value ascendente" | "Valeur croissant" | "Valor crescente" | "Valore crescente";
|
|
280
280
|
static get ValueDescending(): "Absteigend Wert" | "Value descending" | "Value descendente" | "Valeur décroissant" | "Valor decrescente" | "Valore decrescente";
|
|
281
|
+
static get ValueNotPresent(): "Wert NICHT vorhanden" | "Value NOT present" | "Valor NO presente" | "Valeur NON présente" | "Valor NÃO presente" | "Valore NON presente";
|
|
281
282
|
static get View_Metadato(): "Anzeige (Methadaten)" | "Visualization (metadata)" | "Visualización (metadato)" | "Visualisation (métadonnée)" | "Display (metadados)" | "Visualizzazione (metadato)";
|
|
282
283
|
static get ViewWithCheckOption(): "Kontrolle über Archivierung und Bearbeitung" | "Check on archive and update" | "Control en almacenamiento y modificación" | "Contrôle de l'archivage et la modifie" | "Controle de arquivamento e edição" | "Controllo su archiviazione e modifica";
|
|
283
284
|
static get Visible(): "Sichtbar" | "Visible" | "Visibles" | "Visibiles" | "Visíveis" | "Visibili";
|
|
@@ -2738,6 +2738,16 @@ export class SDKUI_Localizator {
|
|
|
2738
2738
|
default: return "Valore decrescente";
|
|
2739
2739
|
}
|
|
2740
2740
|
}
|
|
2741
|
+
static get ValueNotPresent() {
|
|
2742
|
+
switch (this._cultureID) {
|
|
2743
|
+
case CultureIDs.De_DE: return "Wert NICHT vorhanden";
|
|
2744
|
+
case CultureIDs.En_US: return "Value NOT present";
|
|
2745
|
+
case CultureIDs.Es_ES: return "Valor NO presente";
|
|
2746
|
+
case CultureIDs.Fr_FR: return "Valeur NON présente";
|
|
2747
|
+
case CultureIDs.Pt_PT: return "Valor NÃO presente";
|
|
2748
|
+
default: return "Valore NON presente";
|
|
2749
|
+
}
|
|
2750
|
+
}
|
|
2741
2751
|
static get View_Metadato() {
|
|
2742
2752
|
switch (this._cultureID) {
|
|
2743
2753
|
case CultureIDs.De_DE: return "Anzeige (Methadaten)";
|
package/lib/ts/types.d.ts
CHANGED
|
@@ -150,6 +150,8 @@ export interface ITMChooserProps extends ITMEditorBase {
|
|
|
150
150
|
labelWidth?: string;
|
|
151
151
|
tmSession?: ITopMediaSession;
|
|
152
152
|
valueName?: any;
|
|
153
|
+
titleForm?: string;
|
|
154
|
+
openChooserBySingleClick?: boolean;
|
|
153
155
|
onValueChanged?: (value: any) => void;
|
|
154
156
|
onRefreshCache?: () => void;
|
|
155
157
|
}
|