@topconsultnpm/sdkui-react-beta 6.14.103 → 6.14.104
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.
|
@@ -4,7 +4,7 @@ import Toolbar, { Item as ToolbarItem } from 'devextreme-react/cjs/toolbar';
|
|
|
4
4
|
import TreeView from 'devextreme-react/cjs/tree-view';
|
|
5
5
|
import ScrollView from 'devextreme-react/cjs/scroll-view';
|
|
6
6
|
import { ContextMenu, Pagination } from 'devextreme-react';
|
|
7
|
-
import { IconFolder, SDKUI_Localizator, IconHide, IconShow, IconDashboard, IconList, getFileIcon, formatBytes, Globalization, IconMenuVertical, svgToString, IconRefresh } from '../../helper';
|
|
7
|
+
import { IconFolder, SDKUI_Localizator, IconHide, IconShow, IconDashboard, IconList, getFileIcon, formatBytes, Globalization, IconMenuVertical, svgToString, IconRefresh, SDKUI_Globals } from '../../helper';
|
|
8
8
|
import { TMSearchBar } from '../sidebar/TMHeader';
|
|
9
9
|
import TMButton from './TMButton';
|
|
10
10
|
import TMDataGrid from './TMDataGrid';
|
|
@@ -118,7 +118,7 @@ const TMFileManager = (props) => {
|
|
|
118
118
|
const renderTreeViewItem = (itemData) => {
|
|
119
119
|
const isSelected = selectedFolder && selectedFolder.id === itemData.id;
|
|
120
120
|
const tooltipContent = _jsxs("div", { style: { textAlign: "center" }, children: [_jsx("span", { style: { fontWeight: 'bold' }, children: "ID" }), ": ", itemData.id] });
|
|
121
|
-
return (_jsxs("div", { style: { whiteSpace: "nowrap", display: "flex", alignItems: "center" }, className: isSelected ? 'treeview-selected-item-manager' : '', children: [_jsx(TMTooltip, { content: tooltipContent, children: _jsx(IconFolder, { fontSize: 24, style: { marginRight: 5, color: TMColors.iconLight } }) }), itemData.text,
|
|
121
|
+
return (_jsxs("div", { style: { whiteSpace: "nowrap", display: "flex", alignItems: "center", opacity: (isSelected || itemData.subFileFolderCount > 0) ? 1 : 0.5 }, className: isSelected ? 'treeview-selected-item-manager' : '', children: [_jsx(TMTooltip, { content: tooltipContent, children: _jsx(IconFolder, { fontSize: 24, style: { marginRight: 5, color: TMColors.iconLight } }) }), itemData.text, itemData.subFileFolderCount > 0 && ` (${itemData.subFileFolderCount})`] }));
|
|
122
122
|
};
|
|
123
123
|
const handleTreeViewContextMenu = (e) => {
|
|
124
124
|
if (!e)
|
|
@@ -195,7 +195,7 @@ const TMFileManager = (props) => {
|
|
|
195
195
|
onClick: async () => await refreshCallback(),
|
|
196
196
|
text: SDKUI_Localizator.Refresh,
|
|
197
197
|
},
|
|
198
|
-
], target: '#TMPanel-Draft-Commands-Header' })] }), children: _jsx("div", { style: { flexDirection: "column", height: "100%", width: "100%", }, children: _jsx("div", { style: { display: "flex", flexGrow: 1, height: "100%" }, children: _jsxs(TMSplitterLayout, { direction: 'horizontal', showSeparator: true, separatorColor: 'transparent', separatorActiveColor: 'transparent', min: ['0', '0'], start: [isLeftPanelCollapsed ? '0%' : "50%", isLeftPanelCollapsed ? '100%' : "50%"], children: [_jsxs("div", { style: { height: "100%", width: "100%" }, onContextMenu: onTreeViewContextMenu, children: [_jsx(TreeView, {
|
|
198
|
+
], target: '#TMPanel-Draft-Commands-Header' })] }), children: _jsx("div", { style: { flexDirection: "column", height: "100%", width: "100%", }, children: _jsx("div", { style: { display: "flex", flexGrow: 1, height: "100%" }, children: _jsxs(TMSplitterLayout, { direction: 'horizontal', showSeparator: true, separatorColor: 'transparent', separatorActiveColor: 'transparent', min: ['0', '0'], start: [isLeftPanelCollapsed ? '0%' : "50%", isLeftPanelCollapsed ? '100%' : "50%"], children: [_jsxs("div", { style: { height: "100%", width: "100%" }, onContextMenu: onTreeViewContextMenu, children: [_jsx(TreeView, { height: "100%", width: "100%", useNativeScrolling: SDKUI_Globals.userSettings?.themeSettings.gridSettings.useNativeScrollbar === 1, dataSource: treeViewData, displayExpr: "text", itemRender: renderTreeViewItem, onItemClick: handleTreeViewItemClick, onItemContextMenu: handleTreeViewContextMenu }), treeViewAnchor && _jsx(ContextMenu, { id: 'treeViewContextMenuDesktop', dataSource: folderContextMenuItems, target: treeViewAnchor, onHiding: closeTreeViewContextMenu })] }), _jsxs("div", { style: { backgroundColor: "#fff", width: "100%", height: "100%" }, children: [_jsxs(Toolbar, { style: { backgroundColor: '#f4f4f4', height: "40px", paddingLeft: "5px", paddingRight: '5px' }, children: [!showPanel && _jsx(ToolbarItem, { location: "before", children: _jsx(TMButton, { caption: isLeftPanelCollapsed ? SDKUI_Localizator.ShowLeftPanel : SDKUI_Localizator.HideLeftPanel, btnStyle: 'toolbar', color: 'primaryOutline', icon: isLeftPanelCollapsed ? _jsx(IconHide, {}) : _jsx(IconShow, {}), onClick: () => setIsLeftPanelCollapsed(prev => !prev) }) }), _jsx(ToolbarItem, { location: "before", children: _jsx(TMButton, { caption: viewMode === 'details' ? SDKUI_Localizator.PreviewView : SDKUI_Localizator.DetailsView, btnStyle: 'toolbar', color: 'primaryOutline', icon: viewMode === 'details' ? _jsx(IconDashboard, {}) : _jsx(IconList, {}), onClick: toggleViewMode }) }), _jsx(ToolbarItem, { location: "before", children: _jsx(TMSearchBar, { marginLeft: '0px', maxWidth: '160px', searchValue: searchText, onSearchValueChanged: (e) => handleSearchChange(e) }) })] }), _jsxs("div", { onDrop: handleDrop, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onContextMenu: onBackgroundContextMenu, style: { width: "100%", height: "calc(100% - 40px)", border: isDragging ? '2px solid red' : '2px solid transparent' }, children: [viewMode === 'thumbnails' && _jsx(ThumbnailsView, { userID: userID, items: filteredFileItems, focusedFile: focusedFile, selectedFiles: selectedFiles, searchText: searchText, handleSelectedFiles: handleSelectedFiles, handleFocusedFile: handleFocusedFile, onDoubleClickHandler: onDoubleClickHandler, setViewAnchor: setViewAnchor }), viewMode === 'details' && _jsx(DetailsView, { userID: userID, items: filteredFileItems, selectedFiles: selectedFiles, searchText: searchText, focusedFile: focusedFile, handleSelectedFiles: handleSelectedFiles, handleFocusedFile: handleFocusedFile, onDoubleClickHandler: onDoubleClickHandler, fileContextMenuItems: fileContextMenuItems }), viewAnchor && _jsx(ContextMenu, { id: 'fileContextMenuDesktop', dataSource: fileContextMenuItems, target: viewAnchor, onHiding: closeViewContextMenu })] })] })] }, "TMWGs-panels-treeView") }) }) }), isMobile && _jsx("div", { style: { height: "100%", width: "100%" }, children: _jsxs(TMPanel, { onBack: openDraftList ? onBackCallback : undefined, title: SDKUI_Localizator.Drafts, allowMaximize: false, totalItems: dcmtsFound ?? 0, onClose: onClosePanel, children: [_jsxs("div", { style: { display: openDraftList ? 'none' : 'block', transition: 'opacity 0.3s ease-in-out', width: "100%", height: "100%" }, children: [_jsx(TreeView, { style: { marginTop: "10px", }, dataSource: treeViewData, displayExpr: "text", itemRender: renderTreeViewItem, onItemClick: handleTreeViewItemClick }), treeViewAnchor && _jsx(ContextMenu, { id: 'treeViewContextMenuMobile', dataSource: folderContextMenuItems, target: treeViewAnchor, onHiding: closeTreeViewContextMenu })] }), _jsxs("div", { style: { backgroundColor: "#fff", width: "100%", height: "100%", display: openDraftList ? 'block' : 'none', transition: 'opacity 0.3s ease-in-out' }, children: [_jsxs(Toolbar, { style: { backgroundColor: '#f4f4f4', height: "40px", paddingLeft: "5px", paddingRight: '5px' }, children: [_jsx(ToolbarItem, { location: "before", children: _jsx(TMButton, { caption: viewMode === 'details' ? SDKUI_Localizator.PreviewView : SDKUI_Localizator.DetailsView, btnStyle: 'toolbar', color: 'primaryOutline', icon: viewMode === 'details' ? _jsx(IconDashboard, {}) : _jsx(IconList, {}), onClick: toggleViewMode }) }), _jsx(ToolbarItem, { location: "before", children: _jsx(TMSearchBar, { marginLeft: '0px', maxWidth: '160px', searchValue: searchText, onSearchValueChanged: (e) => handleSearchChange(e) }) })] }), _jsxs("div", { onDrop: handleDrop, onDragOver: handleDragOver, onDragLeave: handleDragLeave, style: { width: "100%", height: "calc(100% - 40px)", border: isDragging ? '2px solid red' : '2px solid transparent' }, children: [viewMode === 'thumbnails' && _jsx(ThumbnailsView, { userID: userID, items: filteredFileItems, focusedFile: focusedFile, selectedFiles: selectedFiles, searchText: searchText, handleSelectedFiles: handleSelectedFiles, handleFocusedFile: handleFocusedFile, onDoubleClickHandler: onDoubleClickHandler, setViewAnchor: setViewAnchor }), viewMode === 'details' && _jsx(DetailsView, { items: filteredFileItems, selectedFiles: selectedFiles, searchText: searchText, focusedFile: focusedFile, handleSelectedFiles: handleSelectedFiles, handleFocusedFile: handleFocusedFile, onDoubleClickHandler: onDoubleClickHandler }), viewAnchor && _jsx(ContextMenu, { id: 'fileViewContextMenuMobile', dataSource: fileContextMenuItems, target: viewAnchor, onHiding: closeViewContextMenu })] })] })] }) })] });
|
|
199
199
|
};
|
|
200
200
|
export default TMFileManager;
|
|
201
201
|
const highlightText = (text, searchText, isSelected) => {
|
|
@@ -496,48 +496,61 @@ const TMBlogs = (props) => {
|
|
|
496
496
|
handleFocusedBlog(blogPost);
|
|
497
497
|
handleFocusedAttachment(undefined);
|
|
498
498
|
};
|
|
499
|
-
return (
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
|
|
503
|
-
|
|
504
|
-
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
|
|
509
|
-
|
|
510
|
-
|
|
511
|
-
|
|
512
|
-
|
|
513
|
-
|
|
514
|
-
|
|
515
|
-
|
|
516
|
-
|
|
517
|
-
|
|
518
|
-
|
|
519
|
-
|
|
520
|
-
|
|
521
|
-
:
|
|
522
|
-
|
|
523
|
-
|
|
524
|
-
|
|
525
|
-
|
|
526
|
-
|
|
527
|
-
|
|
528
|
-
|
|
529
|
-
|
|
530
|
-
|
|
531
|
-
|
|
532
|
-
|
|
533
|
-
|
|
534
|
-
|
|
535
|
-
|
|
536
|
-
|
|
537
|
-
|
|
538
|
-
|
|
539
|
-
|
|
540
|
-
|
|
499
|
+
return (_jsxs(BlogPostContainer, { className: "blog-post-container", id: id + "-" + blogPost.id.toString(), ref: containerRef, "$color": textColor, "$textDecoration": blogPost.isDel ? 'line-through' : 'none', "$backgroundColor": bgColor, "$canNavigate": canNavigate(), onClick: onClickCallback, onDoubleClick: headerClickCallback, tabIndex: 0, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, onContextMenu: onContextMenu, children: [_jsxs("div", { style: { display: "flex", alignItems: "center" }, children: [(layoutMode !== 'chat' || !isOwnComment) && OwnerInitialsBadge(blogPost), _jsx("div", { style: { flex: "1 1 auto", minWidth: "0" }, children: _jsxs("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: "wrap", overflow: "hidden" }, children: [_jsxs("div", { style: { flex: "1 1 auto", minWidth: "0" }, children: [_jsxs("div", { style: {
|
|
500
|
+
fontWeight: "bold",
|
|
501
|
+
fontSize: '1rem',
|
|
502
|
+
display: "flex",
|
|
503
|
+
alignItems: "center",
|
|
504
|
+
justifyContent: "space-between",
|
|
505
|
+
gap: "8px",
|
|
506
|
+
flexWrap: "wrap"
|
|
507
|
+
}, children: [_jsxs("div", { style: { display: "flex", alignItems: "center", flex: "1 1 auto", minWidth: 0 }, children: [showIconHeader && blogPost.header && blogPost.classID
|
|
508
|
+
? IconAndHeaderElement(blogPost, iconColor, isSelected, () => {
|
|
509
|
+
if (handleNavigateToWGs && blogPost.id && blogPost.classID === 'WG') {
|
|
510
|
+
handleNavigateToWGs(blogPost.id);
|
|
511
|
+
}
|
|
512
|
+
}, searchText)
|
|
513
|
+
: !isOwnComment && (_jsx("span", { style: {
|
|
514
|
+
marginLeft: showIconHeader ? "5px" : "0",
|
|
515
|
+
color: isSelected ? "#fff" : !blogPost.isSys ? TMColors.primary : colors.RED
|
|
516
|
+
}, children: highlightText(blogPost.ownerName ?? '', searchText, isSelected) })), (blogPost?.newPosts ?? 0) > 0 && (_jsx("div", { style: {
|
|
517
|
+
marginLeft: "5px",
|
|
518
|
+
minWidth: "20px",
|
|
519
|
+
height: "20px",
|
|
520
|
+
padding: "0 6px",
|
|
521
|
+
display: "flex",
|
|
522
|
+
alignItems: "center",
|
|
523
|
+
justifyContent: "center",
|
|
524
|
+
backgroundColor: isSelected ? '#fff' : color,
|
|
525
|
+
color: isSelected ? color : "#fff",
|
|
526
|
+
boxShadow: "1px 1px 2px #00000020",
|
|
527
|
+
borderRadius: "30px",
|
|
528
|
+
fontWeight: "bold",
|
|
529
|
+
fontSize: "12px",
|
|
530
|
+
whiteSpace: "nowrap",
|
|
531
|
+
}, children: blogPost.newPosts }))] }), isNew && (_jsx("span", { style: {
|
|
532
|
+
backgroundColor: '#f09c0a',
|
|
533
|
+
color: '#fff',
|
|
534
|
+
borderRadius: '12px',
|
|
535
|
+
padding: '2px 8px',
|
|
536
|
+
boxShadow: '0 2px 5px rgba(0,0,0,0.15)',
|
|
537
|
+
userSelect: 'none',
|
|
538
|
+
whiteSpace: 'nowrap',
|
|
539
|
+
display: 'inline-flex',
|
|
540
|
+
alignItems: 'center',
|
|
541
|
+
justifyContent: 'center',
|
|
542
|
+
fontSize: '0.9rem',
|
|
543
|
+
minWidth: "50px",
|
|
544
|
+
maxWidth: "65px",
|
|
545
|
+
overflow: 'hidden',
|
|
546
|
+
textOverflow: 'ellipsis',
|
|
547
|
+
}, children: SDKUI_Localizator.New }))] }), _jsxs("div", { style: {
|
|
548
|
+
fontSize: 'calc(1rem - 1px)',
|
|
549
|
+
color: isSelected ? "#fff" : !blogPost.isSys ? TMColors.primary : colors.RED
|
|
550
|
+
}, children: [(showIconHeader) && blogPost.header && blogPost.classID &&
|
|
551
|
+
_jsxs(_Fragment, { children: [_jsx("span", { style: { marginLeft: showIconHeader ? "5px" : "0" }, children: blogPost.ownerName }), _jsx("span", { style: { margin: "0 5px" }, children: "\u2501" })] }), blogPost.creationTime && highlightText(`${Globalization.getDateTimeDisplayValue(blogPost.creationTime)} ${new Date(blogPost.creationTime).toDateString() === new Date().toDateString()
|
|
552
|
+
? `(${SDKUI_Localizator.Today})`
|
|
553
|
+
: ''}`, searchText, isSelected), localShowId && (_jsxs(_Fragment, { children: [_jsx("span", { style: { margin: "0 5px" }, children: "\u2501" }), _jsxs("span", { children: ["(ID: ", blogPost.id, ")"] })] }))] })] }), blogPost.attachments && showExtendedAttachments === false && (_jsx("div", { style: { marginTop: "25px", fontSize: "13px", display: "flex", justifyContent: "flex-end" }, children: _jsx(TMTooltip, { content: `${SDKUI_Localizator.Attachments}: ${blogPost.attachments.length}`, children: _jsx(IconAttachment, { fontSize: 20, color: isSelected ? '#fff' : color }) }) }))] }) })] }), _jsx("div", { style: { marginTop: "10px", fontSize: '1rem' }, children: _jsx(TMHtmlContentDisplay, { markup: blogPost.description ?? '-', searchText: searchText, isSelected: isSelected }) }), showExtendedAttachments && blogPost.attachments && blogPost.attachments.length > 0 && attachmentDetails(blogPost.attachments, isSelected)] }, id + "-" + blogPost.id));
|
|
541
554
|
};
|
|
542
555
|
return _jsx(TMLayoutWaitingContainer, { direction: 'vertical', showWaitPanel: showWaitPanel, showWaitPanelPrimary: showPrimary, showWaitPanelSecondary: showSecondary, waitPanelTitle: waitPanelTitle, waitPanelTextPrimary: waitPanelTextPrimary, waitPanelValuePrimary: waitPanelValuePrimary, waitPanelMaxValuePrimary: waitPanelMaxValuePrimary, waitPanelTextSecondary: waitPanelTextSecondary, waitPanelValueSecondary: waitPanelValueSecondary, waitPanelMaxValueSecondary: waitPanelMaxValueSecondary, isCancelable: true, abortController: abortController, children: _jsx("div", { ref: scrollRef, style: { backgroundColor: layoutMode === "stacked" ? "rgba(191, 191, 191, 0.15)" : '#fff', height: "100%", padding: "5px", overflowY: "auto", width: "100%" }, children: blogPosts.length === 0 ?
|
|
543
556
|
_jsxs("div", { style: { display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '100%' }, children: [_jsx(IconBoard, { fontSize: 96 }), searchText.length > 0 ?
|
|
@@ -545,7 +558,7 @@ const TMBlogs = (props) => {
|
|
|
545
558
|
_jsx("div", { style: { fontSize: "15px", marginTop: "10px" }, children: SDKUI_Localizator.NoMessages })] })
|
|
546
559
|
: blogPosts.map((blogPost, index) => {
|
|
547
560
|
const isOwnComment = blogPost.ownerID === SDK_Globals.tmSession?.SessionDescr?.userID;
|
|
548
|
-
return (_jsxs(React.Fragment, { children: [(firstNewPost && blogPost.id === firstNewPost.id) && (_jsxs("div", { style: { display: 'flex', alignItems: 'center', width: '100%', color: TMColors.primary, fontWeight: '600', fontSize: '0.9rem', userSelect: 'none', }, children: [_jsx("hr", { style: { flex: 1, border: 'none', borderTop: `1px solid ${TMColors.primary}`, marginRight: '
|
|
561
|
+
return (_jsxs(React.Fragment, { children: [(firstNewPost && blogPost.id === firstNewPost.id) && (_jsxs("div", { style: { display: 'flex', alignItems: 'center', width: '100%', color: TMColors.primary, fontWeight: '600', fontSize: '0.9rem', userSelect: 'none', marginTop: "12px", marginBottom: "12px" }, children: [_jsx("hr", { style: { flex: 1, border: 'none', borderTop: `1px solid ${TMColors.primary}`, marginRight: '15px' } }), _jsx("span", { children: SDKUI_Localizator.LastRead }), _jsx("hr", { style: { flex: 1, border: 'none', borderTop: `1px solid ${TMColors.primary}`, marginLeft: '15px' } })] })), layoutMode === 'stacked' ? renderBlogPostContent(blogPost, index, isOwnComment) :
|
|
549
562
|
_jsx("div", { style: {
|
|
550
563
|
display: "flex",
|
|
551
564
|
flexDirection: "row",
|
|
@@ -29,7 +29,7 @@ export const BlogPostContainer = styled.div `
|
|
|
29
29
|
background-color: ${(props) => (props.$backgroundColor ?? colors.WHITE)};
|
|
30
30
|
display: inline-block;
|
|
31
31
|
width: 100%;
|
|
32
|
-
min-width:
|
|
32
|
+
min-width: 230px;
|
|
33
33
|
max-width: 100%;
|
|
34
34
|
cursor: ${(props) => (props.$canNavigate ? "pointer" : "default")};
|
|
35
35
|
border-radius: 5px;
|
|
@@ -38,7 +38,6 @@ export const BlogPostContainer = styled.div `
|
|
|
38
38
|
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
|
|
39
39
|
word-wrap: break-word;
|
|
40
40
|
white-space: pre-wrap;
|
|
41
|
-
font-weight: ${(props) => (props.$isNew ? 'bold' : 'normal')};
|
|
42
41
|
&:hover {
|
|
43
42
|
box-shadow: 0 4px 12px rgba(19, 85, 150, 0.6);
|
|
44
43
|
transition:
|