@topconsultnpm/sdkui-react-beta 6.12.36 → 6.12.38

package/lib/components/grids/TMBlogs.js

@@ -0,0 +1,566 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { DcmtTypeListCacheService, ResultTypes, SDK_Globals, WorkingGroupEngine } from "@topconsultnpm/sdk-ts-beta";
+import { ContextMenu, ScrollView } from 'devextreme-react';
+import { SDKUI_Localizator, IconAttachment, getExceptionMessage, Globalization, IconBoard, SDKUI_Globals } from '../../helper';
+import TMDataGrid from '../base/TMDataGrid';
+import { useDeviceType, DeviceType } from '../base/TMDeviceProvider';
+import { TMMessageBoxManager, ButtonNames } from '../base/TMPopUp';
+import TMTooltip from '../base/TMTooltip';
+import { TMLayoutWaitingContainer } from '../base/TMWaitPanel';
+import TMDropDown from '../editors/TMDropDown';
+import TMHtmlContentDisplay from '../editors/TMHtmlContentDisplay';
+import TMTreeDropDown from '../editors/TMTreeDropDown';
+import { TMResultManager } from '../forms/TMResultDialog';
+import { TMSearchBar } from '../sidebar/TMHeader';
+import { AttachmentElement, BlogPostContainer, colors, findFileItemByDraftID, highlightText, IconAndHeaderElement, isHeaderFullyHidden, OwnerInitialsBadge, TMBlogsFilterCategoryId } from './TMBlogsUtils';
+import { useDcmtOperations } from '../../hooks/useDcmtOperations';
+let abortController = new AbortController();
+const TMBlogs = (props) => {
+    const { id, allData, showExtendedAttachments = true, treeFs, draftLatestInfoMap, archivedDocumentMap, updateVisualizedBlogCallback, handleClickAttachmentFolderFileCallback, height, width, scrollToBottom = true, viewMode = 'thumbnails', header, showIconHeader = true, color = colors.PRIMARY_BLUE, handleNavigateToWGs, showId, setShowId, currentWorkingGroup, contextMenuParams = {
+        isShowHideFilterEnabled: true,
+        isShowHideIDEnaled: true,
+        isCommentEnabled: false,
+        isDeleteEnabled: false,
+        isRestoreEnabled: false,
+        isRefreshEnabled: false,
+        isCreateContextualTask: false,
+    }, refreshCallback, newPosts = [], showCommentFormCallback, showTaskFormCallback } = props;
+    // Get the current device type (e.g., mobile, tablet, desktop) using a custom hook.
+    const deviceType = useDeviceType();
+    // 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
+    const [treeDataSource, setTreeDataSource] = useState([]);
+    // State to store the user's search input for filtering or searching posts/messages
+    const [searchText, setSearchText] = useState('');
+    // State to manage the number of posts to display, with a default value of 30
+    const [postsToShow, setPostsToShow] = useState(30);
+    // State that holds an array of filter category IDs
+    const [appliedGlobalFilters, setAppliedGlobalFilters] = useState([TMBlogsFilterCategoryId.PublishedBlogs]);
+    // State to manage the focused file
+    const [focusedBlog, setFocusedBlog] = useState(undefined);
+    // State to manage the focused file
+    const [dcmtTypeDescriptors, setDcmtTypeDescriptors] = useState(new Map());
+    // State to store context menu items for file manager actions
+    const [menuItems, setMenuItems] = useState([]);
+    // State to manage the anchor element for context menu positioning
+    const [anchorEl, setAnchorEl] = useState(null);
+    // State to store the current header value. Initialized with the provided 'header' prop.
+    const [currentHeader, setCurrentHeader] = useState(header);
+    // State to track whether the header is fully hidden based on the current header value
+    const [isHeaderHidden, setIsHeaderHidden] = useState(isHeaderFullyHidden(currentHeader));
+    // showId is a state variable that determines whether an ID-related component or feature should be displayed
+    const [localShowId, setLocalShowId] = useState(false);
+    // State variable to track the number of new posts
+    const [newPostCount, setNewPostCount] = useState(0);
+    // Ref to the container
+    const containerRef = useRef(null);
+    // State variable to control the visibility of the wait panel.
+    const [showWaitPanel, setShowWaitPanel] = useState(false);
+    // State variable to store the title of the wait panel.
+    const [waitPanelTitle, setWaitPanelTitle] = useState('');
+    // State variable to control the visibility of the primary section of the wait panel.
+    const [showPrimary, setShowPrimary] = useState(false);
+    // State variable to store the primary text of the wait panel.
+    const [waitPanelTextPrimary, setWaitPanelTextPrimary] = useState('');
+    // State variable to track the current value of the primary progress indicator in the wait panel.
+    const [waitPanelValuePrimary, setWaitPanelValuePrimary] = useState(0);
+    // State variable to define the maximum value for the primary progress indicator in the wait panel.
+    const [waitPanelMaxValuePrimary, setWaitPanelMaxValuePrimary] = useState(0);
+    // Data source for the number of posts to display in the UI
+    const postsToShowDataSource = [
+        { value: 30, display: SDKUI_Localizator.Latest + ' 30' },
+        { value: 50, display: SDKUI_Localizator.Latest + ' 50' },
+        { value: 100, display: SDKUI_Localizator.Latest + ' 100' },
+        { value: allData.length, display: SDKUI_Localizator.All },
+    ];
+    const toggleHeaderClick = () => {
+        setCurrentHeader(prevState => {
+            if (prevState === undefined) {
+                return {
+                    showViewMode: true,
+                    showFilters: true,
+                    showSearchBar: true,
+                    showPostsDropDown: true,
+                };
+            }
+            else {
+                return {
+                    showViewMode: !prevState.showViewMode,
+                    showFilters: !prevState.showFilters,
+                    showSearchBar: !prevState.showSearchBar,
+                    showPostsDropDown: !prevState.showPostsDropDown,
+                };
+            }
+        });
+    };
+    const deleteOrUndeleteCommentCallback = async (del) => {
+        if (focusedBlog === undefined || focusedBlog.id === undefined)
+            return Promise.resolve();
+        const msg = del ? SDKUI_Localizator.DeleteComment : SDKUI_Localizator.RestoreComment;
+        TMMessageBoxManager.show({
+            title: del ? SDKUI_Localizator.Delete : SDKUI_Localizator.Restore, message: msg, buttons: [ButtonNames.YES, ButtonNames.NO],
+            onButtonClick: async (e) => {
+                if (e !== ButtonNames.YES)
+                    return;
+                if (focusedBlog === undefined || focusedBlog.id === undefined || currentWorkingGroup === undefined || currentWorkingGroup.id === undefined)
+                    return Promise.resolve();
+                setWaitPanelTitle(del ? SDKUI_Localizator.Delete : SDKUI_Localizator.Restore);
+                setShowWaitPanel(true);
+                setShowPrimary(true);
+                abortController = new AbortController();
+                let result = [];
+                let i = 0;
+                setWaitPanelMaxValuePrimary(1);
+                if (abortController.signal.aborted) {
+                    result.push({ rowIndex: i, id1: focusedBlog.id, id2: focusedBlog.id, resultType: ResultTypes.WARNING, description: `Operazione interrotta. Elaborate ${i}` });
+                }
+                else {
+                    setWaitPanelTextPrimary(del ? SDKUI_Localizator.Delete : SDKUI_Localizator.Restore);
+                    const workingGroupEngine = new WorkingGroupEngine(SDK_Globals.tmSession);
+                    await workingGroupEngine.BlogPostDeleteOrUndeleteAsync(currentWorkingGroup.id, focusedBlog.id, del)
+                        .then(() => {
+                        result.push({ rowIndex: 1, id1: currentWorkingGroup.id, id2: 0, description: SDKUI_Localizator.UpdateCompletedSuccessfully, resultType: ResultTypes.SUCCESS });
+                        TMResultManager.show(result, del ? SDKUI_Localizator.Delete : SDKUI_Localizator.Restore, "ID", undefined);
+                        setFocusedBlog(undefined);
+                        refresh();
+                    })
+                        .catch((err) => {
+                        result.push({ rowIndex: 1, id1: currentWorkingGroup.id, id2: currentWorkingGroup.id, resultType: ResultTypes.ERROR, description: getExceptionMessage(err) });
+                    });
+                }
+                setWaitPanelTextPrimary('');
+                setWaitPanelMaxValuePrimary(0);
+                setWaitPanelValuePrimary(0);
+                setShowWaitPanel(false);
+                TMResultManager.show(result, del ? SDKUI_Localizator.Delete : SDKUI_Localizator.Restore, "ID", undefined);
+            }
+        });
+    };
+    const refresh = () => {
+        if (refreshCallback)
+            refreshCallback();
+    };
+    // ContexMenuItems array contains a list of context menu items for a blog
+    const contextMenuItems = useMemo(() => {
+        let menuItemsElements = [
+            {
+                icon: isHeaderHidden ? 'eyeopen' : 'eyeclose',
+                text: isHeaderHidden ? SDKUI_Localizator.ShowFilters : SDKUI_Localizator.HideFilters,
+                visible: contextMenuParams.isShowHideFilterEnabled,
+                onClick: toggleHeaderClick,
+                disabled: false,
+            },
+            {
+                icon: localShowId ? 'eyeclose' : 'eyeopen',
+                onClick: () => setLocalShowId(prevShowId => !prevShowId),
+                text: localShowId ? SDKUI_Localizator.ID_Hide : SDKUI_Localizator.ID_Show,
+                visible: contextMenuParams.isShowHideIDEnaled,
+                disabled: false,
+            },
+            {
+                icon: "chat",
+                text: SDKUI_Localizator.Comment,
+                visible: contextMenuParams.isCommentEnabled,
+                disabled: false,
+                onClick: () => { if (showCommentFormCallback)
+                    showCommentFormCallback(); },
+                beginGroup: true
+            },
+            {
+                icon: "trash",
+                text: SDKUI_Localizator.Delete,
+                visible: contextMenuParams.isDeleteEnabled,
+                onClick: () => deleteOrUndeleteCommentCallback(true),
+                disabled: focusedBlog?.ownerID !== SDK_Globals.tmSession?.SessionDescr?.userID || focusedBlog === undefined || (focusedBlog && (focusedBlog.isDel !== undefined && focusedBlog.isDel !== 0)),
+            },
+            {
+                icon: "undo",
+                text: SDKUI_Localizator.Restore,
+                visible: contextMenuParams.isRestoreEnabled,
+                onClick: () => deleteOrUndeleteCommentCallback(false),
+                disabled: focusedBlog?.ownerID !== SDK_Globals.tmSession?.SessionDescr?.userID || focusedBlog === undefined || (focusedBlog && (focusedBlog.isDel === undefined || focusedBlog.isDel === 0)),
+            },
+            {
+                text: SDKUI_Localizator.CreateContextualTask,
+                icon: 'plus',
+                onClick: () => { if (showTaskFormCallback)
+                    showTaskFormCallback(); },
+                visible: contextMenuParams.isCreateContextualTask,
+                disabled: false,
+                beginGroup: true
+            },
+            {
+                icon: "refresh",
+                text: SDKUI_Localizator.Refresh,
+                visible: contextMenuParams.isRefreshEnabled,
+                onClick: refresh,
+                disabled: false,
+                beginGroup: true
+            },
+        ];
+        return menuItemsElements;
+    }, [isHeaderHidden, localShowId, setLocalShowId, focusedBlog]);
+    useEffect(() => {
+        if (currentWorkingGroup === undefined)
+            setNewPostCount(0);
+        else {
+            const postCount = newPosts?.find(d => d.id === currentWorkingGroup.id)?.count ?? 0;
+            setNewPostCount(postCount);
+        }
+    }, [currentWorkingGroup, newPosts]);
+    useEffect(() => {
+        if (showId !== undefined)
+            setLocalShowId(showId);
+    }, [showId]);
+    useEffect(() => {
+        if (setShowId)
+            setShowId(localShowId);
+    }, [localShowId]);
+    useEffect(() => {
+        setIsHeaderHidden(isHeaderFullyHidden(currentHeader));
+    }, [currentHeader]);
+    const getDcmtTypeDescriptor = async (blogPosts) => {
+        // Create a Map to store tid as key and DcmtTypeDescriptor as value
+        const dcmtTypeMap = new Map();
+        for (const blogPost of blogPosts) {
+            if (blogPost.attachments) {
+                for (const attachment of blogPost.attachments) {
+                    try {
+                        const dcmtTypeDescriptor = await DcmtTypeListCacheService.GetAsync(attachment.tid, true);
+                        if (dcmtTypeDescriptor && attachment.tid) {
+                            dcmtTypeMap.set(attachment.tid, dcmtTypeDescriptor);
+                        }
+                    }
+                    catch (e) { }
+                }
+            }
+        }
+        return dcmtTypeMap;
+    };
+    useEffect(() => {
+        const fetchDcmtTypeDescriptor = async () => {
+            const descriptors = await getDcmtTypeDescriptor(blogPosts);
+            setDcmtTypeDescriptors(descriptors);
+        };
+        fetchDcmtTypeDescriptor();
+        if (updateVisualizedBlogCallback)
+            updateVisualizedBlogCallback(blogPosts);
+    }, [blogPosts]);
+    useEffect(() => {
+        const publishedBlogssLength = allData.filter(newsFeed => newsFeed.isSys !== 1 && newsFeed.isDel !== 1).length;
+        const systemBlogsLength = allData.filter(newsFeed => newsFeed.isSys === 1).length;
+        const deletedBlogsLength = allData.filter(newsFeed => newsFeed.isDel === 1).length;
+        setTreeDataSource([
+            {
+                id: TMBlogsFilterCategoryId.PublishedBlogs,
+                label: SDKUI_Localizator.Active + " (" + publishedBlogssLength + ")",
+                value: SDKUI_Localizator.Active,
+            },
+            {
+                id: TMBlogsFilterCategoryId.SystemBlogs,
+                label: SDKUI_Localizator.OfSystem + " (" + systemBlogsLength + ")",
+                value: SDKUI_Localizator.OfSystem,
+            },
+            {
+                id: TMBlogsFilterCategoryId.DeletedBlogs,
+                label: SDKUI_Localizator.Deleted + " (" + deletedBlogsLength + ")",
+                value: SDKUI_Localizator.Deleted,
+            },
+        ]);
+    }, [allData]);
+    useEffect(() => {
+        // Helper function to check if a blog post is a system blog
+        const isActiveBlog = (blog) => blog.isSys !== 1 && blog.isDel !== 1;
+        // Helper function to check if a blog post is a system blog
+        const isSystemBlog = (blog) => blog.isSys === 1;
+        // Helper function to check if a blog post is marked as deleted
+        const isDeletedBlog = (blog) => blog.isDel === 1;
+        // Create a mapping of filter category IDs to their corresponding filter functions
+        const filters = {
+            [TMBlogsFilterCategoryId.PublishedBlogs]: isActiveBlog, // Map PublishedBlogs filter to the isActiveBlog function
+            [TMBlogsFilterCategoryId.SystemBlogs]: isSystemBlog, // Map SystemBlogs filter to the isSystemBlog function
+            [TMBlogsFilterCategoryId.DeletedBlogs]: isDeletedBlog, // Map DeletedBlogs filter to the isDeletedBlog function
+        };
+        // Function to apply filters to a single blog post
+        const applyFilters = (newsFeed) => {
+            // Check if the blog post matches the search text (case insensitive)
+            if (searchText && !(newsFeed.ownerName?.toLowerCase().includes(searchText.toLowerCase().trim())
+                || newsFeed.description?.toLowerCase().includes(searchText.toLowerCase().trim())
+                || newsFeed.id?.toString()?.toLowerCase().includes(searchText.toLowerCase().trim())
+                || Globalization.getDateTimeDisplayValue(newsFeed.creationTime)?.toString()?.toLowerCase().includes(searchText.toLowerCase().trim())
+                || newsFeed.header?.toString()?.toLowerCase().includes(searchText.toLowerCase().trim())
+                || (newsFeed.attachments && newsFeed.attachments?.length > 0 && newsFeed.attachments.some((attachment) => findFileItemByDraftID(treeFs, attachment.draftID)?.name?.toLowerCase().includes(searchText.toLowerCase().trim())))
+                || (newsFeed.attachments && newsFeed.attachments?.length > 0 && newsFeed.attachments.some((attachment) => attachment.tid && dcmtTypeDescriptors.get(attachment.tid)?.name?.toLowerCase().includes(searchText.toLowerCase().trim()))))) {
+                return false; // If the blog post doesn't match the search text, filter it out
+            }
+            // If no global filters are applied, exclude system and deleted blogs by default
+            if (appliedGlobalFilters.length === 0) {
+                return !isActiveBlog(newsFeed) && !isSystemBlog(newsFeed) && !isDeletedBlog(newsFeed);
+            }
+            // Check if the blog post matches any of the applied global filters
+            const matchesFilter = appliedGlobalFilters.some((filter) => filters[filter](newsFeed));
+            // Return true if it matches any applied filter or if it's neither a system nor a deleted blog
+            return matchesFilter || (!isActiveBlog(newsFeed) && !isSystemBlog(newsFeed) && !isDeletedBlog(newsFeed));
+        };
+        // Apply the filter logic to the complete list of blogs
+        let filteredBlogs = allData.filter(applyFilters);
+        if (currentHeader && currentHeader.showPostsDropDown) {
+            // Limit the results to the most recent postsToShow number of posts if the condition is true
+            filteredBlogs = filteredBlogs.slice(-postsToShow);
+        }
+        // Update the state with the filtered and limited list of blogs
+        setBlogPosts(filteredBlogs);
+        if (focusedBlog && focusedBlog.id && filteredBlogs.find(filteredBlog => focusedBlog.id === filteredBlog.id) === undefined)
+            setFocusedBlog(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) {
+            const focusedElement = document.getElementById(id + "-" + focusedBlog.id.toString());
+            if (focusedElement) {
+                focusedElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        }
+    }, [focusedBlog]);
+    const ThumbnailView = () => {
+        const scrollRef = useRef(null);
+        const { abortController, showWaitPanel, waitPanelTitle, showPrimary, waitPanelTextPrimary, waitPanelValuePrimary, waitPanelMaxValuePrimary, showSecondary, waitPanelTextSecondary, waitPanelValueSecondary, waitPanelMaxValueSecondary, downloadDcmtsAsync } = useDcmtOperations();
+        useEffect(() => {
+            if (focusedBlog && focusedBlog.id) { // containerRef.current
+                const focusedElement = document.getElementById(focusedBlog.id.toString());
+                if (focusedElement) {
+                    focusedElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
+                }
+            }
+            else {
+                if (scrollToBottom && scrollRef.current) {
+                    scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+                }
+            }
+        }, [blogPosts, viewMode, 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, handleClickAttachmentFolderFileCallback, downloadDcmtsAsync);
+                }) });
+        };
+        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: "rgba(191, 191, 191, 0.15)", height: "100%", padding: "5px", overflowY: "auto", width: "100%" }, children: blogPosts.length === 0 ?
+                    _jsxs("div", { style: { display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '100%' }, children: [_jsx(IconBoard, { fontSize: 96 }), searchText.length > 0 ?
+                                _jsx("div", { style: { fontSize: "15px", marginTop: "10px" }, children: SDKUI_Localizator.NoMessagesFound }) :
+                                _jsx("div", { style: { fontSize: "15px", marginTop: "10px" }, children: SDKUI_Localizator.NoMessages })] })
+                    : blogPosts.map((blogPost, index) => {
+                        const isSelected = focusedBlog?.id === blogPost.id;
+                        const isNew = index >= blogPosts.length - newPostCount;
+                        const backgroundColors = {
+                            default: colors.LIGHT_GRAY,
+                            selectedItems: isSelected ? color ?? colors.PRIMARY_BLUE : colors.PRIMARY_BLUE,
+                        };
+                        let bgColor = isSelected ? backgroundColors.selectedItems : backgroundColors.default;
+                        let textColor = blogPost.isSys ? colors.RED : isSelected ? colors.WHITE : colors.BLACK;
+                        let iconColor = textColor;
+                        const classID = blogPost.classID;
+                        if (classID) {
+                            if (classID === 'DS')
+                                iconColor = isSelected ? colors.WHITE : colors.PRIMARY_ORANGE;
+                            if (classID === 'WG')
+                                iconColor = isSelected ? colors.WHITE : colors.PRIMARY_GREEN;
+                        }
+                        const canNavigate = () => {
+                            return Boolean(handleNavigateToWGs && id && classID === 'WG');
+                        };
+                        const headerClickCallback = () => {
+                            const id = blogPost.id;
+                            if (handleNavigateToWGs && id && classID === 'WG')
+                                handleNavigateToWGs(id);
+                        };
+                        const onClickCallback = () => {
+                            setFocusedBlog(blogPost);
+                        };
+                        const handleKeyDown = (event) => {
+                            event.preventDefault();
+                            if (event.key === 'ArrowDown' && focusedBlog) {
+                                const currentIndex = blogPosts.findIndex(post => post.id === focusedBlog.id);
+                                if (blogPosts[currentIndex + 1]) {
+                                    setFocusedBlog(blogPosts[currentIndex + 1]);
+                                }
+                                ;
+                            }
+                        };
+                        const handleKeyUp = (event) => {
+                            event.preventDefault();
+                            if (event.key === 'ArrowUp' && focusedBlog) {
+                                const currentIndex = blogPosts.findIndex(post => post.id === focusedBlog.id);
+                                if (blogPosts[currentIndex - 1]) {
+                                    setFocusedBlog(blogPosts[currentIndex - 1]);
+                                }
+                                ;
+                            }
+                        };
+                        return (_jsxs(BlogPostContainer, { id: id + "-" + blogPost.id.toString(), ref: containerRef, "$color": textColor, "$textDecoration": blogPost.isDel ? 'line-through' : 'none', "$backgroundColor": bgColor, "$isNew": Boolean(blogPost.newPosts ?? 0) || isNew, "$canNavigate": canNavigate(), onClick: onClickCallback, onDoubleClick: headerClickCallback, tabIndex: 0, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, children: [_jsxs("div", { style: { display: "flex", alignItems: "center" }, children: [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", { children: [_jsxs("div", { style: { fontWeight: "bold", fontSize: "13px", display: "flex", alignItems: "center" }, children: [(showIconHeader && (blogPost.header && blogPost.classID))
+                                                                        ? (IconAndHeaderElement(blogPost, iconColor, isSelected, headerClickCallback, searchText)) :
+                                                                        _jsx("span", { style: { marginLeft: showIconHeader ? "5px" : "0" }, children: highlightText(blogPost.ownerName ?? '', searchText, isSelected) }), (blogPost?.newPosts ?? 0) > 0 && (_jsx("div", { style: {
+                                                                            marginLeft: "5px",
+                                                                            width: "20px",
+                                                                            height: "20px",
+                                                                            display: "flex",
+                                                                            alignItems: "center",
+                                                                            justifyContent: "center",
+                                                                            backgroundColor: color,
+                                                                            color: "white",
+                                                                            boxShadow: "1px 1px 2px #00000020",
+                                                                            borderRadius: "30px",
+                                                                            fontWeight: "bold",
+                                                                        }, children: blogPost.newPosts }))] }), _jsxs("div", { style: { fontSize: "12px" }, children: [(showIconHeader && (blogPost.header && blogPost.classID)) && _jsxs("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() ? "(" + SDKUI_Localizator.Today + ")" : ''}`, searchText, isSelected)
+                                                                        : '', localShowId && _jsxs("span", { children: [_jsx("span", { style: { margin: "0 5px" }, children: "\u2501" }), _jsxs("span", { children: ["(ID: ", blogPost.id, ")"] })] })] })] }), (blogPost.attachments && showExtendedAttachments === false) &&
+                                                        _jsx("div", { style: { marginTop: "10px", 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: "13px" }, children: _jsx(TMHtmlContentDisplay, { markup: blogPost.description ?? '-', searchText: searchText, isSelected: isSelected }) }), (showExtendedAttachments && blogPost.attachments && blogPost.attachments.length > 0) && attachmentDetails(blogPost.attachments, isSelected)] }, 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, handleClickAttachmentFolderFileCallback, downloadDcmtsAsync);
+                }) : '' });
+        }, [treeFs, draftLatestInfoMap, dcmtTypeDescriptors, color, handleClickAttachmentFolderFileCallback, 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)
+                setFocusedBlog(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, showRowLines: SDKUI_Globals.dataGridShowRowLines, showColumnLines: SDKUI_Globals.dataGridShowColumnLines, onContextMenuPreparing: onContextMenuPreparing }) });
+    };
+    const toggleViewMode = () => {
+        setRenderMode((prevViewMode) => (prevViewMode === 'details' ? 'thumbnails' : 'details'));
+    };
+    // Function to handle changes in the search text
+    const handleSearchChange = (value) => {
+        setSearchText(value); // Update the search text state with the new value
+    };
+    // Function to handle changes in the filter (number of posts to show)
+    const handleFilterChange = (e) => {
+        if (!e?.target?.value)
+            return;
+        const value = e.target.value;
+        if (value !== undefined) {
+            setPostsToShow(Number(value));
+        }
+    };
+    const onContextMenu = (event) => {
+        if (event === undefined)
+            return;
+        event.preventDefault();
+        setAnchorEl(event.currentTarget);
+        setMenuItems(contextMenuItems);
+    };
+    // Handle closing the context menu
+    const closeContextMenu = useCallback(() => {
+        setAnchorEl(null);
+    }, []);
+    return _jsx("div", { style: { height: height ?? '100%', width: width ?? '100%' }, children: _jsxs(TMLayoutWaitingContainer, { direction: 'vertical', showWaitPanel: showWaitPanel, showWaitPanelPrimary: showPrimary, waitPanelTitle: waitPanelTitle, waitPanelTextPrimary: waitPanelTextPrimary, waitPanelValuePrimary: waitPanelValuePrimary, waitPanelMaxValuePrimary: waitPanelMaxValuePrimary, isCancelable: true, abortController: abortController, children: [(currentHeader && !isHeaderHidden) && (_jsx("div", { style: { display: 'block', width: '100%', overflowX: 'auto', overflowY: 'hidden', whiteSpace: 'nowrap' }, children: _jsx(ScrollView, { width: "100%", height: "auto", direction: "horizontal", useNative: true, children: _jsxs("div", { style: {
+                                display: 'flex',
+                                flexDirection: 'row',
+                                gap: '8px',
+                                alignItems: 'center',
+                                minWidth: 'max-content',
+                                padding: '10px 0',
+                            }, children: [currentHeader.showSearchBar && (_jsx("div", { style: {
+                                        minWidth: isMobile ? '120px' : '160px',
+                                        maxWidth: isMobile ? '120px' : '200px',
+                                        marginLeft: "10px"
+                                    }, children: _jsx(TMSearchBar, { marginLeft: "0px", maxWidth: "100%", searchValue: searchText, onSearchValueChanged: (e) => handleSearchChange(e) }) })), currentHeader.showPostsDropDown && (_jsx("div", { style: {
+                                        minWidth: isMobile ? '90px' : '120px',
+                                        maxWidth: isMobile ? '90px' : '200px',
+                                    }, children: _jsx(TMDropDown, { value: postsToShow, dataSource: postsToShowDataSource, onValueChanged: handleFilterChange }) })), currentHeader.showFilters && (_jsx(TMTreeDropDown, { dataSource: treeDataSource, values: appliedGlobalFilters, setValues: setAppliedGlobalFilters, displayExpr: false, isValidKey: () => true, elementStyle: {
+                                        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' }, children: [_jsx("div", { style: { display: renderMode === 'thumbnails' ? 'block' : 'none', width: "100%", height: "100%" }, onContextMenu: onContextMenu, children: ThumbnailView() }), _jsx("div", { style: { display: renderMode === 'details' ? 'block' : 'none', width: "100%", height: "100%" }, children: DataGridView() }), anchorEl && _jsx(ContextMenu, { dataSource: menuItems, target: anchorEl, onHiding: closeContextMenu })] })] }) });
+};
+export default TMBlogs;