@topconsultnpm/sdkui-react-beta 6.13.11 → 6.13.13
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,38 +1,36 @@
|
|
|
1
|
-
import { jsxs as _jsxs, jsx as _jsx
|
|
1
|
+
import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import React, { useEffect, useState } from 'react';
|
|
3
3
|
import styled from 'styled-components';
|
|
4
4
|
import { SharingModes, SDK_Globals, SDK_Localizator } from '@topconsultnpm/sdk-ts-beta';
|
|
5
5
|
import { LocalizeSharingModes } from '../../../helper/Enum_Localizator';
|
|
6
6
|
import ContextMenu from 'devextreme-react/cjs/context-menu';
|
|
7
|
-
import { SDKUI_Localizator, Globalization, svgToString, IconStar, IconDelete, IconDashboard,
|
|
7
|
+
import { SDKUI_Localizator, Globalization, svgToString, IconStar, IconDelete, IconDashboard, IconApply } from '../../../helper';
|
|
8
8
|
import { TMColors } from '../../../utils/theme';
|
|
9
9
|
import ShowAlert from '../../base/TMAlert';
|
|
10
10
|
import TMButton from '../../base/TMButton';
|
|
11
11
|
import { TMMessageBoxManager, ButtonNames, TMExceptionBoxManager } from '../../base/TMPopUp';
|
|
12
12
|
import TMSpinner from '../../base/TMSpinner';
|
|
13
|
-
import TMTooltip from '../../base/TMTooltip';
|
|
14
13
|
import { TMSearchBar } from '../../sidebar/TMHeader';
|
|
15
|
-
const
|
|
14
|
+
const StyledSqdItem = styled.div `
|
|
16
15
|
display: flex;
|
|
17
|
-
flex-direction:
|
|
18
|
-
align-items:
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
border-color: lightgray;
|
|
23
|
-
box-shadow: 1px 1px 7px rgba(0,0,0,0.15);
|
|
24
|
-
width: 100%;
|
|
25
|
-
height: max-content;
|
|
26
|
-
min-height: 45px;
|
|
27
|
-
padding: 5px;
|
|
16
|
+
flex-direction: column;
|
|
17
|
+
align-items: stretch;
|
|
18
|
+
min-width: 0;
|
|
19
|
+
padding: 10px;
|
|
20
|
+
position: relative;
|
|
28
21
|
white-space: nowrap;
|
|
29
22
|
text-overflow: ellipsis;
|
|
30
23
|
|
|
31
24
|
&:hover {
|
|
32
|
-
background: ${(props) => props.$hoverColor ?? undefined};
|
|
33
25
|
cursor: pointer;
|
|
34
26
|
}
|
|
35
27
|
`;
|
|
28
|
+
const StyledPipe = styled.div `
|
|
29
|
+
width: 90%;
|
|
30
|
+
height: 1px;
|
|
31
|
+
background: #00A99D;
|
|
32
|
+
margin: 4px auto;
|
|
33
|
+
`;
|
|
36
34
|
const getSharingModeColor = (sharingMode) => {
|
|
37
35
|
switch (sharingMode) {
|
|
38
36
|
case SharingModes.Private: return 'rgb(185, 72, 57)';
|
|
@@ -119,23 +117,49 @@ const TMSavedQuerySelector = React.memo(({ items, selectedId, allowShowSearch =
|
|
|
119
117
|
}
|
|
120
118
|
};
|
|
121
119
|
return (_jsxs("div", { style: { height: height ?? '100%', width: '100%', display: 'flex', flexDirection: 'column', gap: '5px', paddingTop: allowShowSearch ? '5px' : undefined }, children: [allowShowSearch &&
|
|
122
|
-
_jsx("div", { style: { width: '100%', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '10px', paddingBottom: '10px', paddingTop: '10px' }, children: _jsx(TMSearchBar, { marginLeft: '0px', maxWidth: '300px', searchValue: searchText, onSearchValueChanged: (e) => setSearchText(e) }) }), _jsx("div", { style: {
|
|
120
|
+
_jsx("div", { style: { width: '100%', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '10px', paddingBottom: '10px', paddingTop: '10px' }, children: _jsx(TMSearchBar, { marginLeft: '0px', maxWidth: '300px', searchValue: searchText, onSearchValueChanged: (e) => setSearchText(e) }) }), _jsx("div", { style: {
|
|
121
|
+
display: 'flex',
|
|
122
|
+
flexDirection: 'column',
|
|
123
|
+
width: '100%',
|
|
124
|
+
padding: '5px',
|
|
125
|
+
gap: '3px',
|
|
126
|
+
whiteSpace: 'nowrap',
|
|
127
|
+
overflow: 'hidden',
|
|
128
|
+
textOverflow: 'ellipsis'
|
|
129
|
+
}, children: dataSource.slice(0, showAllRoot || searchText.length > 0 ? dataSource.length : initialSQDsMaxItems).filter(o => searchText.length <= 0 || (searchText.length > 0 && o.name?.toLocaleLowerCase().includes(searchText.toLocaleLowerCase())) || o.description?.toLocaleLowerCase().includes(searchText.toLocaleLowerCase())).map((sqd, index) => (_jsxs(StyledSqdItem, { id: `sqd-item-${sqd.id}`, onClick: () => {
|
|
123
130
|
setSelectedItem(sqd);
|
|
124
131
|
onItemClick?.(sqd);
|
|
125
|
-
}, children: [
|
|
132
|
+
}, children: [_jsxs("div", { style: {
|
|
133
|
+
display: 'flex',
|
|
134
|
+
flexDirection: 'row',
|
|
135
|
+
justifyContent: 'center',
|
|
136
|
+
width: '100%',
|
|
137
|
+
whiteSpace: 'nowrap',
|
|
126
138
|
overflow: 'hidden',
|
|
127
|
-
textOverflow: 'ellipsis'
|
|
128
|
-
|
|
139
|
+
textOverflow: 'ellipsis',
|
|
140
|
+
gap: '5px'
|
|
141
|
+
}, children: [_jsx("p", { style: {
|
|
142
|
+
fontSize: '1rem',
|
|
143
|
+
fontWeight: sqd.id === 1 ? 600 : 'normal',
|
|
144
|
+
whiteSpace: 'nowrap',
|
|
129
145
|
overflow: 'hidden',
|
|
130
|
-
textOverflow: 'ellipsis'
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
146
|
+
textOverflow: 'ellipsis',
|
|
147
|
+
color: TMColors.primaryColor,
|
|
148
|
+
paddingRight: '18px'
|
|
149
|
+
}, children: sqd.name }), manageDefault && sqd.isDefault == 1 && _jsx(IconStar, { fontSize: 16, color: 'rgb(248, 215, 117)' })] }), selectedItem?.id == sqd.id &&
|
|
150
|
+
_jsx("div", { style: {
|
|
151
|
+
width: '24px',
|
|
152
|
+
height: '24px',
|
|
153
|
+
borderRadius: '24px',
|
|
154
|
+
position: 'absolute',
|
|
155
|
+
top: '-1px',
|
|
156
|
+
right: '0px',
|
|
157
|
+
display: 'flex',
|
|
158
|
+
alignItems: 'center',
|
|
159
|
+
justifyContent: 'center',
|
|
160
|
+
fontSize: '1rem',
|
|
161
|
+
fontWeight: 'bold'
|
|
162
|
+
}, children: _jsx(IconApply, { fontSize: 24, color: 'green' }) }), _jsx(StyledPipe, {}), _jsx(SavedQueryContexMenu, { sqd: sqd, manageDefault: manageDefault, setDefaultAsync: () => setDefaultSQDAsync(sqd), deleteAsync: () => deleteSQDAsync(sqd), favManageAsync: () => favManageSQDAsync(sqd) })] }, sqd.id))) }), dataSource.length > initialSQDsMaxItems && searchText.length <= 0 &&
|
|
139
163
|
_jsx(TMButton, { elementStyle: { display: 'flex', justifyContent: 'flex-end', padding: '10px' }, btnStyle: 'icon', caption: showAllRoot ? "Mostra meno" : `Mostra tutte le ricerche (+${dataSource.length - initialSQDsMaxItems})`, icon: showAllRoot ?
|
|
140
164
|
_jsx("div", { style: { backgroundColor: TMColors.primaryColor, minWidth: '30px', minHeight: '30px', borderRadius: '10px', display: 'flex', alignItems: 'center', justifyContent: 'center' }, children: _jsx("p", { style: { color: 'white' }, children: `-${dataSource.length - initialSQDsMaxItems}` }) }) :
|
|
141
165
|
_jsx("div", { style: { backgroundColor: TMColors.primaryColor, minWidth: '30px', minHeight: '30px', borderRadius: '10px', display: 'flex', alignItems: 'center', justifyContent: 'center' }, children: _jsx("p", { style: { color: 'white' }, children: `+${dataSource.length - initialSQDsMaxItems}` }) }), onClick: () => setShowAllRoot(!showAllRoot) })] }));
|
|
@@ -10,6 +10,7 @@ import TMDataGrid from '../../base/TMDataGrid';
|
|
|
10
10
|
import TMLayoutContainer, { TMLayoutItem } from '../../base/TMLayout';
|
|
11
11
|
import TMPanel from '../../base/TMPanel';
|
|
12
12
|
import TMTidViewer from '../../viewers/TMTidViewer';
|
|
13
|
+
import { TMColors } from '../../../utils/theme';
|
|
13
14
|
const TMTreeSelector = ({ layoutMode = LayoutModes.Update, onSelectedTIDChanged, onClose }) => {
|
|
14
15
|
const [trees, setTrees] = useState([]);
|
|
15
16
|
const [treeItems, setTreeItems] = useState([]);
|
|
@@ -60,7 +61,7 @@ const TMTreeSelector = ({ layoutMode = LayoutModes.Update, onSelectedTIDChanged,
|
|
|
60
61
|
const renderCell = (data) => {
|
|
61
62
|
let treeItem = data.data;
|
|
62
63
|
if (treeItem.type == TreeItemTypes.DcmtType)
|
|
63
|
-
return (_jsx(TMTidViewer, { tid: treeItem.tid, showIcon:
|
|
64
|
+
return (_jsx(TMTidViewer, { tid: treeItem.tid, color: TMColors.primaryColor, showIcon: false }));
|
|
64
65
|
else
|
|
65
66
|
return (_jsxs(StyledDivHorizontal, { style: { gap: 5 }, children: [_jsx(IconFolder, { fontSize: 18 }), _jsx("p", { children: treeItem.nameLoc })] }));
|
|
66
67
|
};
|
|
@@ -16,6 +16,7 @@ const StyledRecentTidItem = styled.div `
|
|
|
16
16
|
min-width: 0;
|
|
17
17
|
padding: 10px;
|
|
18
18
|
position: relative;
|
|
19
|
+
|
|
19
20
|
&:hover {
|
|
20
21
|
cursor: pointer;
|
|
21
22
|
}
|
|
@@ -29,8 +30,15 @@ const StyledPipe = styled.div `
|
|
|
29
30
|
const iconDelete = () => ReactDOMServer.renderToString(_jsx(IconDelete, {}));
|
|
30
31
|
const TMRecentsManager = ({ deviceType, mruTIDs, currentMruTID, onSelectedTID, onDeletedTID }) => {
|
|
31
32
|
const [showDcmtTypeChooser, setShowDcmtTypeChooser] = useState(false);
|
|
32
|
-
return (_jsxs(_Fragment, { children: [_jsxs("div", { style: { overflowY: deviceType === DeviceType.MOBILE ? 'auto' : undefined, display: 'flex', flexDirection: 'column', padding: '5px' }, children: [_jsxs(StyledRecentTidItem, { id: `tid-${0}`, onClick: () => { setShowDcmtTypeChooser(true); }, children: [_jsx("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'center', width: '100%' }, children: _jsx("p", { style: {
|
|
33
|
-
|
|
33
|
+
return (_jsxs(_Fragment, { children: [_jsxs("div", { style: { overflowY: deviceType === DeviceType.MOBILE ? 'auto' : undefined, display: 'flex', flexDirection: 'column', padding: '5px' }, children: [_jsxs(StyledRecentTidItem, { id: `tid-${0}`, onClick: () => { setShowDcmtTypeChooser(true); }, children: [_jsx("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'center', width: '100%' }, children: _jsx("p", { style: {
|
|
34
|
+
color: TMColors.primaryColor,
|
|
35
|
+
fontSize: '1rem',
|
|
36
|
+
fontWeight: 600,
|
|
37
|
+
whiteSpace: 'nowrap',
|
|
38
|
+
overflow: 'hidden',
|
|
39
|
+
textOverflow: 'ellipsis'
|
|
40
|
+
}, children: `${SDKUI_Localizator.AllDcmtTypes} (${DcmtTypeListCacheService.CacheCount(true)})` }) }), _jsx(StyledPipe, {})] }, 0), mruTIDs.map((tid) => {
|
|
41
|
+
return (_jsxs(StyledRecentTidItem, { id: `tid-${tid}`, onClick: () => { onSelectedTID?.(tid); }, children: [_jsx("div", { style: { display: 'flex', justifyContent: 'center', width: '100%' }, children: _jsx(TMTidViewer, { tid: tid, color: TMColors.primaryColor, showIcon: false }) }), _jsx(StyledPipe, {}), _jsx(ContextMenu, { dataSource: [{ text: SDKUI_Localizator.Remove, icon: iconDelete(), }], target: `#tid-${tid}`, onItemClick: () => { onDeletedTID?.(tid); } }), currentMruTID == tid &&
|
|
34
42
|
_jsx("div", { style: {
|
|
35
43
|
width: '24px',
|
|
36
44
|
height: '24px',
|
|
@@ -297,7 +297,8 @@ const TMTidViewer = ({ tmSession, tid, showIcon = false, color, showId = false,
|
|
|
297
297
|
color: color ?? (dtd?.isView ? 'red' : ''),
|
|
298
298
|
whiteSpace: 'nowrap',
|
|
299
299
|
overflow: 'hidden',
|
|
300
|
-
textOverflow: 'ellipsis'
|
|
300
|
+
textOverflow: 'ellipsis',
|
|
301
|
+
paddingRight: '10px'
|
|
301
302
|
}, children: displayName() }), showId && _jsx("p", { style: { padding: '0px 3px' }, children: `(TID: ${tid})` })] }));
|
|
302
303
|
};
|
|
303
304
|
export default TMTidViewer;
|