@topconsultnpm/sdkui-react-beta 6.14.77 → 6.14.79

package/lib/components/features/documents/TMDcmtBlog.js

@@ -61,7 +61,7 @@ const TMDcmtBlog = ({ tid, did, isVisible }) => {
                                     isRefreshEnabled: true,
                                     isRestoreEnabled: true,
                                     isCreateContextualTask: false
-                                } }) }) }) }), (showCommentForm && tid && did) && _jsx(TMBlogCommentForm, { context: { engine: 'SearchEngine', object: { tid, did } }, onClose: () => setShowCommentForm(false), refreshCallback: () => { fetchDataAsync(tid, did); }, participants: [], showAttachmentsSection: false })] }));
+                                }, layoutMode: 'chat' }) }) }) }), (showCommentForm && tid && did) && _jsx(TMBlogCommentForm, { context: { engine: 'SearchEngine', object: { tid, did } }, onClose: () => setShowCommentForm(false), refreshCallback: () => { fetchDataAsync(tid, did); }, participants: [], showAttachmentsSection: false })] }));
 };
 export default TMDcmtBlog;
 const StyledContainer = styled.div ` user-select: none; overflow: hidden; background-color: #ffffff; width: calc(100%); height: calc(100%); display: flex; gap: 10px; `;

package/lib/components/grids/TMBlogs.d.ts

@@ -10,8 +10,6 @@ interface TMBlogsProps {
     allData: Array<BlogPost | HomeBlogPost>;
     /** Optional flag to show extended attachments */
     showExtendedAttachments?: boolean;
-    /** Optional view mode for displaying blog posts ('thumbnails' or 'details') */
-    viewMode?: 'thumbnails' | 'details';
     /** Optional flag to automatically scroll to the bottom of the list */
     scrollToBottom?: boolean;
     /** Optional height of the component (CSS value) */

package/lib/components/grids/TMBlogs.js

@@ -3,7 +3,6 @@ import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { DcmtTypeListCacheService, LayoutModes, ResultTypes, SDK_Globals, WorkingGroupEngine } from "@topconsultnpm/sdk-ts-beta";
 import { ContextMenu, ScrollView } from 'devextreme-react';
 import { SDKUI_Localizator, IconAttachment, getExceptionMessage, Globalization, IconBoard } from '../../helper';
-import TMDataGrid from '../base/TMDataGrid';
 import { useDeviceType, DeviceType } from '../base/TMDeviceProvider';
 import { TMMessageBoxManager, ButtonNames } from '../base/TMPopUp';
 import TMTooltip from '../base/TMTooltip';
@@ -20,7 +19,7 @@ import TMDcmtForm from '../features/documents/TMDcmtForm';
 import { TMColors } from '../../utils/theme';
 let localAbortController = new AbortController();
 const TMBlogs = (props) => {
-    const { id, allData, showExtendedAttachments = true, treeFs, draftLatestInfoMap, archivedDocumentMap, updateVisualizedBlogCallback, height, width, scrollToBottom = true, viewMode = 'thumbnails', header, showIconHeader = true, color = colors.PRIMARY_BLUE, handleNavigateToWGs, showId, setShowId, contextMenuParams = {
+    const { id, allData, showExtendedAttachments = true, treeFs, draftLatestInfoMap, archivedDocumentMap, updateVisualizedBlogCallback, height, width, scrollToBottom = true, header, showIconHeader = true, color = colors.PRIMARY_BLUE, handleNavigateToWGs, showId, setShowId, contextMenuParams = {
         isShowHideFilterEnabled: true,
         isShowHideIDEnaled: true,
         isCommentEnabled: false,
@@ -37,8 +36,6 @@ const TMBlogs = (props) => {
     const { abortController, showWaitPanel, waitPanelTitle, showPrimary, waitPanelTextPrimary, waitPanelValuePrimary, waitPanelMaxValuePrimary, showSecondary, waitPanelTextSecondary, waitPanelValueSecondary, waitPanelMaxValueSecondary, downloadDcmtsAsync } = useDcmtOperations();
     // This avoids unnecessary re-renders by only recalculating when deviceType changes.
     let isMobile = useMemo(() => { return deviceType === DeviceType.MOBILE; }, [deviceType]);
-    // State to manage the current rendering mode of the component (either 'thumbnails' or 'details')
-    const [renderMode, setRenderMode] = useState('thumbnails');
     // State to store an array of blog posts, which can be either BlogPost or HomeBlogPost type
     const [blogPosts, setBlogPosts] = useState([]);
     // State to manage the data source for a tree component
@@ -414,10 +411,6 @@ const TMBlogs = (props) => {
         if (focusedBlog && focusedBlog.id && filteredBlogs.find(filteredBlog => focusedBlog.id === filteredBlog.id) === undefined)
             handleFocusedBlog(undefined);
     }, [allData, appliedGlobalFilters, searchText, postsToShow, currentHeader]);
-    useEffect(() => {
-        if (viewMode)
-            setRenderMode(viewMode);
-    }, [viewMode]);
     // Scroll the focused blog post into view
     useEffect(() => {
         if (focusedBlog && focusedBlog.id && containerRef.current) {
@@ -441,7 +434,7 @@ const TMBlogs = (props) => {
                     scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
                 }
             }
-        }, [blogPosts, viewMode, focusedBlog]);
+        }, [blogPosts, focusedBlog]);
         const attachmentDetails = (attachments, isSelected) => {
             return _jsx("div", { style: { marginTop: "10px", overflow: "hidden" }, children: attachments.map(attachment => {
                     return AttachmentElement(attachment, treeFs, draftLatestInfoMap, archivedDocumentMap, dcmtTypeDescriptors, isSelected, searchText, color, downloadDcmtsAsync, handleFocusedAttachment, setAnchorEl, contextMenuRef);
@@ -567,100 +560,6 @@ const TMBlogs = (props) => {
                                             }, children: renderBlogPostContent(blogPost, index, isOwnComment) }) }, 'blogPostChat-' + id + "-" + blogPost.id)] }, "blog-post-wrapper-" + id + "-" + blogPost.id));
                     }) }) });
     };
-    const DataGridView = () => {
-        const gridRef = useRef(null);
-        const { abortController, showWaitPanel, waitPanelTitle, showPrimary, waitPanelTextPrimary, waitPanelValuePrimary, waitPanelMaxValuePrimary, showSecondary, waitPanelTextSecondary, waitPanelValueSecondary, waitPanelMaxValueSecondary, downloadDcmtsAsync } = useDcmtOperations();
-        useEffect(() => {
-            if (gridRef.current && renderMode === 'details') {
-                const dataGrid = gridRef.current.instance();
-                dataGrid.repaint(); // Repaint the grid first
-            }
-            if (scrollToBottom && gridRef.current) {
-                const dataGrid = gridRef.current.instance();
-                const scrollable = dataGrid.getScrollable();
-                if (scrollable && scrollable.scrollHeight()) {
-                    // Wait for repaint to finish (if repaint causes a reflow/re-rendering of the grid)
-                    setTimeout(() => {
-                        scrollable.scrollTo({ y: scrollable.scrollHeight() });
-                    }, 0); // Use setTimeout with 0 delay to defer scrolling until after repaint
-                }
-            }
-        }, [renderMode, scrollToBottom]); // Ensure to include scrollToBottom in the dependency array
-        const cellDefaultRender = useCallback((cellData) => {
-            const blogPost = cellData.data;
-            const { isDel, isSys } = blogPost;
-            return _jsx("div", { style: { color: isSys ? colors.RED : colors.BLACK, textDecoration: isDel ? 'line-through' : 'none' }, children: highlightText(cellData.value, searchText, false) });
-        }, [searchText]);
-        const cellOwnerRender = useCallback((cellData) => {
-            const blogPost = cellData.data;
-            const { isDel, isSys } = blogPost;
-            return _jsxs("span", { style: { display: 'inline-flex', alignItems: 'center', }, children: [OwnerInitialsBadge(blogPost), _jsx("span", { style: { color: isSys ? colors.RED : colors.BLACK, textDecoration: isDel ? 'line-through' : 'none', display: 'inline-block' }, children: highlightText(cellData.value, searchText, false) })] });
-        }, [searchText]);
-        const cellDescriptionRender = useCallback((cellData) => {
-            const blogPost = cellData.data;
-            const { isDel, isSys } = blogPost;
-            return _jsx("span", { style: { color: isSys ? colors.RED : colors.BLACK, textDecoration: isDel ? 'line-through' : 'none' }, children: _jsx(TMHtmlContentDisplay, { markup: blogPost.description ?? '-', searchText: searchText, isSelected: false }) });
-        }, [searchText]);
-        const cellClassIdRender = useCallback((cellData) => {
-            const blogPost = cellData.data;
-            let textColor = blogPost.isSys ? colors.RED : colors.BLACK;
-            let iconColor = textColor;
-            const classID = blogPost.classID;
-            if (classID) {
-                if (classID === 'DS')
-                    iconColor = colors.PRIMARY_ORANGE;
-                if (classID === 'WG')
-                    iconColor = colors.PRIMARY_GREEN;
-            }
-            const headerClickCallback = () => {
-                const id = blogPost.id;
-                if (handleNavigateToWGs && id && classID === 'WG')
-                    handleNavigateToWGs(id);
-            };
-            return IconAndHeaderElement(blogPost, iconColor, false, headerClickCallback, searchText);
-        }, []);
-        const cellAttachmentsRender = useCallback((cellData) => {
-            const data = cellData.data;
-            const { attachments } = data;
-            return _jsx("div", { style: { marginTop: "10px", overflow: "hidden" }, children: (attachments && attachments.length > 0) ? attachments.map(attachment => {
-                    return AttachmentElement(attachment, treeFs, draftLatestInfoMap, archivedDocumentMap, dcmtTypeDescriptors, false, searchText, color, downloadDcmtsAsync, handleFocusedAttachment, setAnchorEl, contextMenuRef);
-                }) : '' });
-        }, [treeFs, draftLatestInfoMap, dcmtTypeDescriptors, color, searchText]);
-        const cellDatetimeRender = useCallback((cellData) => {
-            const data = cellData.data;
-            const { value } = cellData;
-            const { isDel, isSys } = data;
-            const formattedDate = value ? new Date(value).toLocaleString('en-GB', { day: '2-digit', month: '2-digit', year: 'numeric', hour: '2-digit', minute: '2-digit' }) : '';
-            return _jsx("div", { style: { color: isSys ? colors.RED : colors.BLACK, textDecoration: isDel ? 'line-through' : 'none' }, children: formattedDate });
-        }, []);
-        // Handles focus change in the data grid
-        const onFocusedRowChanged = useCallback((e) => {
-            if (e.row)
-                handleFocusedBlog(e.row.data);
-        }, []);
-        const onContextMenuPreparing = (e) => {
-            if (e === undefined)
-                return;
-            if (e.target === 'content') {
-                e.items = e.items || [];
-                e.items = contextMenuItems;
-            }
-        };
-        const dataColumns = useMemo(() => {
-            return [
-                { dataField: "id", caption: "ID", dataType: 'string', visible: localShowId, cellRender: cellDefaultRender },
-                { dataField: "ownerName", caption: SDKUI_Localizator.Author, dataType: 'string', visible: true, cellRender: cellOwnerRender },
-                { dataField: "classID", caption: SDKUI_Localizator.Type, dataType: 'string', visible: showIconHeader, cellRender: cellClassIdRender },
-                { dataField: "description", caption: SDKUI_Localizator.Description, dataType: 'string', visible: true, cellRender: cellDescriptionRender },
-                { dataField: "creationTime", caption: SDKUI_Localizator.CreationTime, dataType: 'datetime', visible: true, format: 'dd/MM/yyyy HH:mm', cellRender: cellDatetimeRender },
-                { dataField: "attachments", caption: SDKUI_Localizator.RefersTo, dataType: 'string', visible: true, cellRender: cellAttachmentsRender },
-            ];
-        }, [localShowId, showIconHeader, searchText]);
-        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(TMDataGrid, { ref: gridRef, showSearchPanel: false, dataSource: blogPosts ?? [], dataColumns: dataColumns, selection: { mode: 'none' }, focusedRowKey: focusedBlog?.id, onFocusedRowChanged: onFocusedRowChanged, onContextMenuPreparing: onContextMenuPreparing }) });
-    };
-    const toggleViewMode = () => {
-        setRenderMode((prevViewMode) => (prevViewMode === 'details' ? 'thumbnails' : 'details'));
-    };
     // Function to handle changes in the search text
     const handleSearchChange = (value) => {
         handleFocusedBlog(undefined);
@@ -709,7 +608,7 @@ const TMBlogs = (props) => {
                                         minWidth: isMobile ? '90px' : '120px',
                                         width: isMobile ? '90px' : '150px',
                                         height: '29px',
-                                    } }))] }) }) })), _jsxs("div", { style: { height: `calc(100% - ${currentHeader && !isHeaderHidden ? '50px' : '0px'})`, width: "100%", overflow: 'auto', display: 'block' }, onContextMenu: onContextMenu, children: [_jsx("div", { style: { display: renderMode === 'thumbnails' ? 'block' : 'none', width: "100%", height: "100%" }, children: ThumbnailView() }), _jsx("div", { style: { display: renderMode === 'details' ? 'block' : 'none', width: "100%", height: "100%" }, children: DataGridView() }), anchorEl && _jsx(ContextMenu, { ref: contextMenuRef, dataSource: contextMenuItems, target: anchorEl, onHiding: closeContextMenu })] }), (showDcmtForm && focusedAttachment && focusedAttachment.TID && focusedAttachment.DID) && _jsx(TMDcmtForm, { TID: Number(focusedAttachment.TID), DID: Number(focusedAttachment.DID), layoutMode: LayoutModes.Update, onClose: onCloseDcmtForm, isClosable: true, titleModal: SDKUI_Localizator.Attachment + ": " + focusedAttachment.fileName, isModal: true, widthModal: "95%", heightModal: "95%" }), (showFloatingCommentButton && showCommentFormCallback) && _jsx("button", { style: {
+                                    } }))] }) }) })), _jsxs("div", { style: { height: `calc(100% - ${currentHeader && !isHeaderHidden ? '50px' : '0px'})`, width: "100%", overflow: 'auto', display: 'block' }, onContextMenu: onContextMenu, children: [_jsx("div", { style: { width: "100%", height: "100%" }, children: ThumbnailView() }), anchorEl && _jsx(ContextMenu, { ref: contextMenuRef, dataSource: contextMenuItems, target: anchorEl, onHiding: closeContextMenu })] }), (showDcmtForm && focusedAttachment && focusedAttachment.TID && focusedAttachment.DID) && _jsx(TMDcmtForm, { TID: Number(focusedAttachment.TID), DID: Number(focusedAttachment.DID), layoutMode: LayoutModes.Update, onClose: onCloseDcmtForm, isClosable: true, titleModal: SDKUI_Localizator.Attachment + ": " + focusedAttachment.fileName, isModal: true, widthModal: "95%", heightModal: "95%" }), (showFloatingCommentButton && showCommentFormCallback) && _jsx("button", { style: {
                         position: 'absolute',
                         bottom: '20px',
                         right: '20px',
@@ -726,14 +625,17 @@ const TMBlogs = (props) => {
                         display: 'flex',
                         justifyContent: 'center',
                         alignItems: 'center',
+                        opacity: 0.3,
                     }, onMouseEnter: (e) => {
                         e.currentTarget.style.backgroundColor = '#D94A9F';
                         e.currentTarget.style.transform = 'scale(1.1)';
                         e.currentTarget.style.boxShadow = '0 4px 12px rgba(37, 89, 165, 0.6)';
+                        e.currentTarget.style.opacity = '1';
                     }, onMouseLeave: (e) => {
                         e.currentTarget.style.backgroundColor = "#C2388B";
                         e.currentTarget.style.transform = 'scale(1)';
                         e.currentTarget.style.boxShadow = '0 2px 6px rgba(0,0,0,0.2)';
+                        e.currentTarget.style.opacity = '0.3';
                     }, onClick: () => { showCommentFormCallback(); }, children: _jsx(TMTooltip, { content: SDKUI_Localizator.AddNewComment, children: _jsx("i", { className: "dx-icon-chat", style: { fontSize: !isMobile ? '30px' : '25px' } }) }) })] }) });
 };
 export default TMBlogs;

package/package.json

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