@topconsultnpm/sdkui-react 6.21.0-dev1.38 → 6.21.0-dev1.39
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.
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
|
-
import { useMemo, useRef, useState } from 'react';
|
|
2
|
+
import React, { useMemo, useRef, useState } from 'react';
|
|
3
3
|
import { SDK_Localizator, DataListCacheService } from '@topconsultnpm/sdk-ts';
|
|
4
4
|
import { StyledDivHorizontal } from '../base/Styled';
|
|
5
5
|
import { IconSearch, SDKUI_Localizator, TMImageLibrary } from '../../helper';
|
|
6
|
+
import { TMColors } from '../../utils/theme';
|
|
6
7
|
import TMSpinner from '../base/TMSpinner';
|
|
7
8
|
import TMTooltip from '../base/TMTooltip';
|
|
8
9
|
import TMSummary from '../editors/TMSummary';
|
|
@@ -11,9 +12,20 @@ import TMDataListItemViewer from '../viewers/TMDataListItemViewer';
|
|
|
11
12
|
const TMDataListItemChooser = ({ labelColor, width = '100%', dataListId, icon, backgroundColor, showBorder = true, readOnly, openChooserBySingleClick, buttons = [], elementStyle, allowMultipleSelection, values, isModifiedWhen, label, placeHolder, titleForm, showClearButton = false, validationItems = [], onValueChanged, updateIsModalOpen }) => {
|
|
12
13
|
const [showChooser, setShowChooser] = useState(false);
|
|
13
14
|
const renderTemplate = () => {
|
|
15
|
+
const MAX_VISIBLE_ITEMS = 3;
|
|
14
16
|
const isPlaceholder = values?.[0] === placeHolder;
|
|
15
|
-
|
|
16
|
-
|
|
17
|
+
const remainingCount = (values?.length ?? 0) - MAX_VISIBLE_ITEMS;
|
|
18
|
+
const totalCount = values?.length ?? 0;
|
|
19
|
+
return (_jsxs(StyledDivHorizontal, { style: { width: '100%', justifyContent: 'flex-start', color: isPlaceholder ? '#a9a9a9' : 'inherit', alignItems: 'center' }, children: [values && values.length > 0 && _jsxs(StyledDivHorizontal, { style: { alignItems: 'center', gap: '8px' }, children: [totalCount > MAX_VISIBLE_ITEMS && _jsx(TMTooltip, { content: values.join(', '), children: _jsx(StyledDivHorizontal, { style: { alignItems: 'center', gap: '4px' }, children: _jsx("span", { style: {
|
|
20
|
+
backgroundColor: TMColors.primary + '15',
|
|
21
|
+
color: TMColors.primary,
|
|
22
|
+
borderRadius: '4px',
|
|
23
|
+
padding: '2px 6px',
|
|
24
|
+
fontSize: '11px',
|
|
25
|
+
fontWeight: 600,
|
|
26
|
+
letterSpacing: '0.3px'
|
|
27
|
+
}, children: totalCount }) }) }), values.slice(0, MAX_VISIBLE_ITEMS).map((v, index) => (_jsx(React.Fragment, { children: _jsxs("span", { style: { display: 'inline-flex', alignItems: 'center' }, children: [_jsx(TMDataListItemViewer, { dataListId: dataListId, value: v, width: 'auto', showTooltip: false }), index < Math.min(values.length, MAX_VISIBLE_ITEMS) - 1 && _jsx("span", { style: { marginLeft: 0 }, children: "," })] }) }, index)))] }), values && values.length > MAX_VISIBLE_ITEMS &&
|
|
28
|
+
_jsx(TMTooltip, { content: values.slice(MAX_VISIBLE_ITEMS).join(', '), children: _jsx("p", { style: { marginLeft: '10px' }, children: `(+${remainingCount} ${remainingCount === 1 ? 'altro' : 'altri'})` }) })] }));
|
|
17
29
|
};
|
|
18
30
|
const summaryInputRef = useRef(null);
|
|
19
31
|
return (_jsxs(_Fragment, { children: [_jsx(TMSummary, { ref: summaryInputRef, placeHolder: placeHolder, labelColor: labelColor, width: width, icon: icon, buttons: buttons, readOnly: readOnly, backgroundColor: backgroundColor, showBorder: showBorder, hasValue: values && values.length > 0, showClearButton: showClearButton, iconEditButton: _jsx(IconSearch, { fontSize: 16 }), onEditorClick: () => {
|
|
@@ -53,17 +53,20 @@ const TMDynDataListItemChooser = ({ tid, md, width = '100%', titleForm, openChoo
|
|
|
53
53
|
return await SDK_Globals.tmSession?.NewSearchEngine().GetDynDataListValuesAsync(tid, md?.id, layoutMode, queryParamsDynDataList ?? [])
|
|
54
54
|
.catch((err) => { throw err; });
|
|
55
55
|
};
|
|
56
|
-
const
|
|
57
|
-
if (!
|
|
58
|
-
return "";
|
|
59
|
-
if (!values || values.length <= 0)
|
|
60
|
-
return "";
|
|
61
|
-
if (!values[0])
|
|
56
|
+
const getValueDescription = (value) => {
|
|
57
|
+
if (!value)
|
|
62
58
|
return "";
|
|
63
59
|
if (!dynDl)
|
|
64
|
-
return
|
|
65
|
-
let description = dataSource?.dtdResult?.rows?.filter(o => o[dynDl.selectItemForValue ?? 0] ==
|
|
66
|
-
return description ??
|
|
60
|
+
return value;
|
|
61
|
+
let description = dataSource?.dtdResult?.rows?.filter(o => o[dynDl.selectItemForValue ?? 0] == value)?.[0]?.[dynDl.selectItemForDescription ?? 0];
|
|
62
|
+
return description ?? value;
|
|
63
|
+
};
|
|
64
|
+
const getDescriptions = (maxItems = 3) => {
|
|
65
|
+
if (!Array.isArray(values))
|
|
66
|
+
return [];
|
|
67
|
+
if (!values || values.length <= 0)
|
|
68
|
+
return [];
|
|
69
|
+
return values.slice(0, maxItems).map(v => getValueDescription(v)).filter(d => d !== "");
|
|
67
70
|
};
|
|
68
71
|
const getIcon = () => {
|
|
69
72
|
if (!Array.isArray(values))
|
|
@@ -75,15 +78,28 @@ const TMDynDataListItemChooser = ({ tid, md, width = '100%', titleForm, openChoo
|
|
|
75
78
|
if (FormulaHelper.isFormula(values?.[0]))
|
|
76
79
|
return null;
|
|
77
80
|
if (!dynDl)
|
|
78
|
-
return
|
|
79
|
-
let description = dataSource?.dtdResult?.rows?.filter(o => o[dynDl.selectItemForValue ?? 0]
|
|
80
|
-
return description ?
|
|
81
|
+
return null;
|
|
82
|
+
let description = dataSource?.dtdResult?.rows?.filter(o => o[dynDl.selectItemForValue ?? 0]?.toString().toLowerCase() === values?.[0]?.toString().toLowerCase())?.[0]?.[dynDl.selectItemForDescription ?? 0];
|
|
83
|
+
return description ? null :
|
|
81
84
|
_jsx(TMTooltip, { content: SDKUI_Localizator.ValueNotPresent, children: _jsx(IconWarning, { color: TMColors.warning }) });
|
|
82
85
|
};
|
|
83
86
|
const renderTemplate = () => {
|
|
87
|
+
const MAX_VISIBLE_ITEMS = 3;
|
|
84
88
|
const isPlaceholder = values?.[0] === placeHolder;
|
|
85
|
-
|
|
86
|
-
|
|
89
|
+
const descriptions = getDescriptions(MAX_VISIBLE_ITEMS);
|
|
90
|
+
const remainingCount = (values?.length ?? 0) - MAX_VISIBLE_ITEMS;
|
|
91
|
+
const totalCount = values?.length ?? 0;
|
|
92
|
+
const allDescriptions = values?.map(v => getValueDescription(v)).filter(d => d !== "").join(', ') ?? '';
|
|
93
|
+
return (_jsxs(StyledDivHorizontal, { style: { width: '100%', color: isPlaceholder ? '#a9a9a9' : 'inherit', alignItems: 'center' }, children: [dataSource && descriptions.length > 0 && _jsxs(StyledDivHorizontal, { style: { alignItems: 'center', gap: '8px' }, children: [totalCount > MAX_VISIBLE_ITEMS && _jsx(TMTooltip, { content: allDescriptions, children: _jsx(StyledDivHorizontal, { style: { alignItems: 'center', gap: '4px' }, children: _jsx("span", { style: {
|
|
94
|
+
backgroundColor: TMColors.primary + '15',
|
|
95
|
+
color: TMColors.primary,
|
|
96
|
+
borderRadius: '4px',
|
|
97
|
+
padding: '2px 6px',
|
|
98
|
+
fontSize: '11px',
|
|
99
|
+
fontWeight: 600,
|
|
100
|
+
letterSpacing: '0.3px'
|
|
101
|
+
}, children: totalCount }) }) }), getIcon(), _jsx("p", { children: descriptions.join(', ') })] }), values && values.length > MAX_VISIBLE_ITEMS &&
|
|
102
|
+
_jsx(TMTooltip, { content: values.slice(MAX_VISIBLE_ITEMS).join(', '), children: _jsx("p", { style: { marginLeft: '10px' }, children: `(+${remainingCount} ${remainingCount === 1 ? 'altro' : 'altri'})` }) })] }));
|
|
87
103
|
};
|
|
88
104
|
return (_jsxs(_Fragment, { children: [_jsx(TMSummary, { placeHolder: placeHolder, width: width, icon: icon, labelColor: labelColor, backgroundColor: backgroundColor, buttons: buttons, showBorder: showBorder, readOnly: readOnly, hasValue: values && values.length > 0, showClearButton: showClearButton, iconEditButton: _jsx(IconSearch, { fontSize: 16 }), onEditorClick: () => {
|
|
89
105
|
if (!readOnly) {
|