@topconsultnpm/sdkui-react 6.19.0-dev1.10

package/lib/components/grids/TMBlogs.js

@@ -0,0 +1,721 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { DcmtTypeListCacheService, LayoutModes, ResultTypes, SDK_Globals, WorkingGroupEngine } from "@topconsultnpm/sdk-ts";
+import { ContextMenu, ScrollView } from 'devextreme-react';
+import { SDKUI_Localizator, IconAttachment, getExceptionMessage, Globalization, IconBoard, genUniqueId } from '../../helper';
+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';
+import { DownloadTypes } from '../../ts';
+import TMDcmtForm from '../features/documents/TMDcmtForm';
+import { TMColors } from '../../utils/theme';
+import ShowAlert from '../base/TMAlert';
+let localAbortController = new AbortController();
+const TMBlogs = (props) => {
+    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,
+        isDownloadAttachmentEnabled: false,
+        isViewEditMetadata: false,
+        isDeleteEnabled: false,
+        isCopyToClipboardEnabled: false,
+        isRestoreEnabled: false,
+        isRefreshEnabled: false,
+        isCreateContextualTask: false,
+    }, refreshCallback, showCommentFormCallback, showTaskFormCallback, handleAttachmentFocus, showFloatingCommentButton = false, context, layoutMode = 'stacked', markBlogAsRead, shouldSelectLastBlog = false, updateShouldSelectLastBlog, refreshHomePageNews } = props;
+    const [uiId, setUiId] = useState('');
+    // Get the current device type (e.g., mobile, tablet, desktop) using a custom hook.
+    const deviceType = useDeviceType();
+    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 store an array of blog posts, which can be either BlogPost or HomeBlogPost type
+    const [blogPosts, setBlogPosts] = useState([]);
+    // State to store the first newly fetched blog post, used for highlighting or special display
+    const [firstNewPost, setFirstNewPost] = useState(undefined);
+    // 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 [focusedAttachment, setFocusedAttachment] = useState(undefined);
+    // State to manage the focused file
+    const [dcmtTypeDescriptors, setDcmtTypeDescriptors] = useState(new Map());
+    // State to manage the anchor element for context menu positioning
+    const [anchorEl, setAnchorEl] = useState(null);
+    const contextMenuRef = useRef(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);
+    // Ref to the container
+    const containerRef = useRef(null);
+    // State variable to control the visibility of the wait panel.
+    const [localShowWaitPanel, setLocalShowWaitPanel] = useState(false);
+    // State variable to store the title of the wait panel.
+    const [localWaitPanelTitle, setLocalWaitPanelTitle] = useState('');
+    // State variable to control the visibility of the primary section of the wait panel.
+    const [localShowPrimary, setLocalShowPrimary] = useState(false);
+    // State variable to store the primary text of the wait panel.
+    const [localWaitPanelTextPrimary, setLocalWaitPanelTextPrimary] = useState('');
+    // State variable to track the current value of the primary progress indicator in the wait panel.
+    const [localWaitPanelValuePrimary, setLocalWaitPanelValuePrimary] = useState(0);
+    // State variable to define the maximum value for the primary progress indicator in the wait panel.
+    const [localWaitPanelMaxValuePrimary, setLocalWaitPanelMaxValuePrimary] = useState(0);
+    // Tracks whether the user has right-clicked on the background area.
+    const [rightClickedOnBackground, setRightClickedOnBackground] = React.useState(false);
+    // State to manage show selected file
+    const [showDcmtForm, setShowDcmtForm] = useState(false);
+    // 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 || context === undefined || context.object === undefined
+                    || (context.engine === 'WorkingGroupEngine' && !context.object.id)
+                    || (context.engine === 'SearchEngine' && (!context.object.tid || !context.object.did))
+                    || (context.engine === 'DossierEngine' && !context.object.id)) {
+                    return Promise.resolve();
+                }
+                setLocalWaitPanelTitle(del ? SDKUI_Localizator.Delete : SDKUI_Localizator.Restore);
+                setLocalShowWaitPanel(true);
+                setLocalShowPrimary(true);
+                localAbortController = new AbortController();
+                let result = [];
+                let i = 0;
+                setLocalWaitPanelMaxValuePrimary(1);
+                if (abortController.signal.aborted) {
+                    result.push({ rowIndex: i, id1: focusedBlog.id, id2: focusedBlog.id, resultType: ResultTypes.WARNING, description: `Operazione interrotta. Elaborate ${i}` });
+                }
+                else {
+                    setLocalWaitPanelTextPrimary(del ? SDKUI_Localizator.Delete : SDKUI_Localizator.Restore);
+                    if (context.engine === 'WorkingGroupEngine' && context.object.id) {
+                        const workingGroupEngine = new WorkingGroupEngine(SDK_Globals.tmSession);
+                        await workingGroupEngine.BlogPostDeleteOrUndeleteAsync(context.object.id, focusedBlog.id, del)
+                            .then(() => {
+                            handleFocusedBlog(undefined);
+                            refresh();
+                        })
+                            .catch((err) => {
+                            result.push({ rowIndex: 1, id1: context.object?.id, id2: context.object?.id, resultType: ResultTypes.ERROR, description: getExceptionMessage(err) });
+                            TMResultManager.show(result, del ? SDKUI_Localizator.Delete : SDKUI_Localizator.Restore, "ID", undefined);
+                        });
+                    }
+                    else if (context.engine === 'SearchEngine' && context.object.tid && context.object.did) {
+                        const searchEngine = SDK_Globals.tmSession?.NewSearchEngine();
+                        await searchEngine.BlogPostDeleteOrUndeleteAsync(context.object.tid, context.object.did, focusedBlog.id, del)
+                            .then(() => {
+                            handleFocusedBlog(undefined);
+                            refresh();
+                        })
+                            .catch((err) => {
+                            result.push({ rowIndex: 1, id1: context.object?.tid, id2: context.object?.did, resultType: ResultTypes.ERROR, description: getExceptionMessage(err) });
+                            TMResultManager.show(result, del ? SDKUI_Localizator.Delete : SDKUI_Localizator.Restore, "ID", undefined);
+                        });
+                    }
+                    else if (context.engine === 'DossierEngine' && context.object.id) {
+                        const dossierEngine = SDK_Globals.tmSession?.NewDossierEngine();
+                        await dossierEngine.BlogPostDeleteOrUndeleteAsync(context.object.id, focusedBlog.id, del)
+                            .then(() => {
+                            handleFocusedBlog(undefined);
+                            refresh();
+                        })
+                            .catch((err) => {
+                            result.push({ rowIndex: 1, id1: context.object?.id, id2: context.object?.id, resultType: ResultTypes.ERROR, description: getExceptionMessage(err) });
+                            TMResultManager.show(result, del ? SDKUI_Localizator.Delete : SDKUI_Localizator.Restore, "ID", undefined);
+                        });
+                    }
+                }
+                setLocalWaitPanelTextPrimary('');
+                setLocalWaitPanelMaxValuePrimary(0);
+                setLocalWaitPanelValuePrimary(0);
+                setLocalShowWaitPanel(false);
+            }
+        });
+    };
+    const handleFocusedAttachment = (attachment) => {
+        setFocusedAttachment(attachment);
+        if (handleAttachmentFocus)
+            handleAttachmentFocus(attachment);
+    };
+    const handleFocusedBlog = (blog) => {
+        setFocusedBlog(blog);
+        setFocusedAttachment(undefined);
+        if (handleAttachmentFocus)
+            handleAttachmentFocus(undefined);
+        if (markBlogAsRead)
+            markBlogAsRead(blog);
+    };
+    const refresh = async () => {
+        if (refreshCallback)
+            await refreshCallback();
+    };
+    const downloadAttachment = () => {
+        if (focusedAttachment === undefined)
+            return;
+        if (downloadDcmtsAsync)
+            downloadDcmtsAsync([{ TID: focusedAttachment.TID, DID: focusedAttachment.DID, fileName: focusedAttachment.fileName }], DownloadTypes.Dcmt, "download");
+    };
+    const copyInClipboard = (blog) => {
+        if (blog === undefined)
+            return;
+        const { id, ownerName, creationTime, description } = blog;
+        const formattedText = `${ownerName} (${Globalization.getDateTimeDisplayValue(creationTime)}):\n${description}`;
+        let result = [];
+        window.navigator.clipboard.writeText(formattedText)
+            .then(() => {
+            result = [{ rowIndex: id ?? 1, id1: id ?? 1, id2: id ?? 1, description: SDKUI_Localizator.UpdateCompletedSuccessfully, resultType: ResultTypes.SUCCESS }];
+        })
+            .catch(err => {
+            result = [{ rowIndex: id ?? 1, id1: id ?? 1, id2: id ?? 1, resultType: ResultTypes.ERROR, description: getExceptionMessage(err) }];
+        })
+            .finally(() => {
+            TMResultManager.show(result, SDKUI_Localizator.CopyToClipboard, "ID", undefined);
+        });
+    };
+    const unFollowCallback = async (blog, classId) => {
+        const title = SDKUI_Localizator.Unfollow;
+        const header = blog.header ?? undefined;
+        const message = header ? SDKUI_Localizator.UnfollowSelectedItem.replaceParams(header) : SDKUI_Localizator.Unfollow + "?";
+        TMMessageBoxManager.show({
+            title, message, buttons: [ButtonNames.YES, ButtonNames.NO],
+            confirmOnEnter: true,
+            onButtonClick: async (e) => {
+                if (e !== ButtonNames.YES)
+                    return;
+                let result = [];
+                switch (classId) {
+                    case 'WG':
+                        const workingGroupEngine = new WorkingGroupEngine(SDK_Globals.tmSession);
+                        await workingGroupEngine.FollowAddOrRemoveAsync(blog.id, true).then(async () => {
+                            result.push({ rowIndex: blog.id, id1: blog.id, id2: blog.id, description: SDKUI_Localizator.OperationSuccess, resultType: ResultTypes.SUCCESS });
+                            refreshHomePageNews?.();
+                        })
+                            .catch((err) => {
+                            result.push({ rowIndex: blog.id, id1: blog.id, id2: blog.id, resultType: ResultTypes.ERROR, description: getExceptionMessage(err) });
+                        });
+                        break;
+                    default:
+                        ShowAlert({ message: 'TODO', mode: 'warning', title: SDKUI_Localizator.Unfollow, duration: 3000 });
+                        break;
+                }
+                TMResultManager.show(result, SDKUI_Localizator.Unfollow, "ID", undefined);
+            }
+        });
+    };
+    // ContexMenuItems array contains a list of context menu items for a blog
+    const contextMenuItems = useMemo(() => {
+        // customData1 === 1 means the group is archived (historical)
+        const isGroupArchived = Boolean(context && context.engine === 'WorkingGroupEngine' && context.object && context.object.customData1 === 1);
+        const userId = SDK_Globals.tmSession?.SessionDescr?.userID;
+        const isNotOwner = focusedBlog && focusedBlog.ownerID !== userId;
+        const isDeleted = focusedBlog && (focusedBlog.isDel !== undefined && focusedBlog.isDel !== 0);
+        const isInvalid = focusedBlog === undefined;
+        const classId = focusedBlog ? focusedBlog.classID : undefined;
+        let menuItemsElements = [
+            {
+                icon: "download",
+                text: 'Download',
+                visible: contextMenuParams.isDownloadAttachmentEnabled && focusedAttachment !== undefined,
+                disabled: focusedAttachment === undefined,
+                onClick: downloadAttachment,
+            },
+            {
+                icon: 'eyeopen',
+                text: SDKUI_Localizator.OpenForm,
+                visible: contextMenuParams.isViewEditMetadata && focusedAttachment !== undefined,
+                disabled: focusedAttachment === undefined,
+                onClick: () => setShowDcmtForm(true),
+            },
+            {
+                icon: "chat",
+                text: SDKUI_Localizator.Comment,
+                visible: contextMenuParams.isCommentEnabled,
+                disabled: isGroupArchived ? true : false,
+                onClick: () => { if (showCommentFormCallback)
+                    showCommentFormCallback(); },
+                beginGroup: true
+            },
+            {
+                icon: "trash",
+                text: SDKUI_Localizator.Delete,
+                visible: contextMenuParams.isDeleteEnabled,
+                onClick: () => deleteOrUndeleteCommentCallback(true),
+                disabled: isNotOwner || isInvalid || isDeleted || isGroupArchived,
+            },
+            {
+                icon: "undo",
+                text: SDKUI_Localizator.Restore,
+                visible: contextMenuParams.isRestoreEnabled,
+                onClick: () => deleteOrUndeleteCommentCallback(false),
+                disabled: isNotOwner || isInvalid || (focusedBlog && (focusedBlog.isDel === undefined || focusedBlog.isDel === 0)),
+            },
+            {
+                text: SDKUI_Localizator.CopyToClipboard,
+                visible: contextMenuParams.isCopyToClipboardEnabled,
+                icon: 'copy',
+                disabled: isInvalid,
+                onClick: () => { copyInClipboard(focusedBlog); }
+            },
+            {
+                text: SDKUI_Localizator.CreateContextualTask,
+                icon: 'plus',
+                onClick: () => { if (showTaskFormCallback)
+                    showTaskFormCallback(); },
+                visible: contextMenuParams.isCreateContextualTask,
+                disabled: isGroupArchived ? true : false,
+                beginGroup: true
+            },
+            {
+                icon: "eyeclose",
+                text: SDKUI_Localizator.Unfollow,
+                visible: Boolean(classId && classId === 'WG'),
+                onClick: () => focusedBlog && classId && unFollowCallback(focusedBlog, classId),
+            },
+            {
+                icon: isHeaderHidden ? 'eyeopen' : 'eyeclose',
+                text: isHeaderHidden ? SDKUI_Localizator.ShowFilters : SDKUI_Localizator.HideFilters,
+                visible: contextMenuParams.isShowHideFilterEnabled,
+                onClick: toggleHeaderClick,
+                disabled: false,
+                beginGroup: true
+            },
+            {
+                icon: localShowId ? 'eyeclose' : 'eyeopen',
+                onClick: () => setLocalShowId(prevShowId => !prevShowId),
+                text: localShowId ? SDKUI_Localizator.ID_Hide : SDKUI_Localizator.ID_Show,
+                visible: contextMenuParams.isShowHideIDEnaled,
+                disabled: false,
+            },
+            {
+                icon: "refresh",
+                text: SDKUI_Localizator.Refresh,
+                visible: contextMenuParams.isRefreshEnabled,
+                onClick: refresh,
+                disabled: false,
+            },
+        ];
+        return menuItemsElements.filter(item => item.visible);
+    }, [isHeaderHidden, localShowId, setLocalShowId, focusedBlog, focusedAttachment, showDcmtForm]);
+    useEffect(() => {
+        setUiId(genUniqueId());
+    }, []);
+    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) {
+                    const dcmtTypeDescriptor = await DcmtTypeListCacheService.GetAsync(attachment.tid, true);
+                    if (dcmtTypeDescriptor && attachment.tid) {
+                        dcmtTypeMap.set(attachment.tid, dcmtTypeDescriptor);
+                    }
+                }
+            }
+        }
+        return dcmtTypeMap;
+    };
+    useEffect(() => {
+        const fetchDcmtTypeDescriptor = async () => {
+            const descriptors = await getDcmtTypeDescriptor(blogPosts);
+            setDcmtTypeDescriptors(descriptors);
+        };
+        showExtendedAttachments && 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);
+        setFirstNewPost(filteredBlogs.find(blog => blog.customData1 === 1));
+        if (focusedBlog && focusedBlog.id && filteredBlogs.find(filteredBlog => focusedBlog.id === filteredBlog.id) === undefined)
+            handleFocusedBlog(undefined);
+    }, [allData, appliedGlobalFilters, searchText, postsToShow, currentHeader]);
+    useEffect(() => {
+        // Check if we should auto-select the last blog post
+        if (shouldSelectLastBlog && updateShouldSelectLastBlog && blogPosts.length > 0) {
+            // Reset the flag to prevent re-selecting in future renders
+            updateShouldSelectLastBlog(false);
+            // Set the focus to the last blog post in the array
+            handleFocusedBlog(blogPosts[blogPosts.length - 1]);
+        }
+    }, [shouldSelectLastBlog, blogPosts]);
+    const ThumbnailView = () => {
+        const scrollRef = useRef(null);
+        useEffect(() => {
+            // Check if there's a focused blog post, its ID is valid, and the scroll container exists
+            if (focusedBlog && focusedBlog.id && scrollRef.current) {
+                const container = scrollRef.current;
+                // Find the DOM element for the focused blog using its composed ID
+                const focusedElement = document.getElementById(id + "-" + uiId + "-" + focusedBlog.id.toString());
+                if (focusedElement) {
+                    // Get the position of the container and the focused element
+                    const containerRect = container.getBoundingClientRect();
+                    const elRect = focusedElement.getBoundingClientRect();
+                    // Calculate the offset needed to center the focused element in the container
+                    const offset = elRect.top - containerRect.top - container.clientHeight / 2 + focusedElement.clientHeight / 2;
+                    // Scroll the container to center the focused element smoothly
+                    container.scrollTo({ top: container.scrollTop + offset, behavior: 'smooth', });
+                }
+            }
+            else {
+                // If there's no focused blog and the user didn't right-click on the background, and the scroll flag is set, scroll to the bottom of the container
+                if (!rightClickedOnBackground && scrollToBottom && scrollRef.current) {
+                    scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+                }
+            }
+        }, [blogPosts, focusedBlog, rightClickedOnBackground]);
+        const attachmentDetails = (attachments, isSelected) => {
+            return _jsx("div", { style: { marginTop: "5px", overflow: "hidden" }, children: attachments.map(attachment => {
+                    return AttachmentElement(attachment, treeFs, draftLatestInfoMap, archivedDocumentMap, dcmtTypeDescriptors, isSelected, searchText, color, setShowDcmtForm, handleFocusedAttachment, setAnchorEl, contextMenuRef);
+                }) });
+        };
+        const renderBlogPostContent = (blogPost, index, isOwnComment) => {
+            const isSelected = focusedBlog?.id === blogPost.id;
+            const isNew = Boolean((blogPost.newPosts ?? 0) || blogPost.customData1);
+            const backgroundColors = {
+                default: layoutMode === 'stacked' ? colors.LIGHT_GRAY : isOwnComment ? '#D9EFE0' : '#F3E6E6',
+                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 = () => {
+                handleFocusedBlog(blogPost);
+            };
+            const handleKeyDown = (event) => {
+                event.preventDefault();
+                if (!focusedBlog)
+                    return;
+                const currentIndex = blogPosts.findIndex(post => post.id === focusedBlog.id);
+                if (currentIndex === -1)
+                    return;
+                switch (event.key) {
+                    case 'ArrowDown':
+                        const nextItem = blogPosts[currentIndex + 1];
+                        if (nextItem)
+                            handleFocusedBlog(nextItem);
+                        break;
+                    case 'Enter':
+                        const item = blogPosts[currentIndex];
+                        const classItemID = item.classID;
+                        if (handleNavigateToWGs && item.id && classItemID === 'WG')
+                            handleNavigateToWGs(item.id);
+                        break;
+                    default:
+                        break;
+                }
+            };
+            const handleKeyUp = (event) => {
+                event.preventDefault();
+                if (event.key === 'ArrowUp' && focusedBlog) {
+                    const currentIndex = blogPosts.findIndex(post => post.id === focusedBlog.id);
+                    if (blogPosts[currentIndex - 1]) {
+                        handleFocusedBlog(blogPosts[currentIndex - 1]);
+                    }
+                    ;
+                }
+            };
+            const onContextMenu = (e) => {
+                e.preventDefault();
+                setAnchorEl(e.currentTarget);
+                handleFocusedBlog(blogPost);
+                handleFocusedAttachment(undefined);
+            };
+            return (_jsxs(BlogPostContainer, { className: "blog-post-container", id: id + "-" + uiId + "-" + blogPost.id.toString(), ref: containerRef, "$color": textColor, "$textDecoration": blogPost.isDel ? 'line-through' : 'none', "$backgroundColor": bgColor, "$paddingRight": layoutMode === 'chat' ? isOwnComment ? '50px' : '10px' : '10px', "$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: {
+                                                        fontWeight: "bold",
+                                                        fontSize: '1rem',
+                                                        display: "flex",
+                                                        alignItems: "center",
+                                                        justifyContent: "space-between",
+                                                        gap: "8px",
+                                                        flexWrap: "wrap"
+                                                    }, children: [_jsxs("div", { style: { display: "flex", alignItems: "center", flex: "1 1 auto", minWidth: 0 }, children: [showIconHeader && blogPost.header && blogPost.classID
+                                                                    ? IconAndHeaderElement(blogPost, iconColor, isSelected, () => {
+                                                                        if (handleNavigateToWGs && blogPost.id && blogPost.classID === 'WG') {
+                                                                            handleNavigateToWGs(blogPost.id);
+                                                                        }
+                                                                    }, searchText)
+                                                                    : !isOwnComment && (_jsx("span", { style: {
+                                                                            marginLeft: showIconHeader ? "5px" : "0",
+                                                                            color: isSelected ? "#fff" : !blogPost.isSys ? TMColors.primary : colors.RED
+                                                                        }, children: highlightText(blogPost.ownerName ?? '', searchText, isSelected) })), (blogPost?.newPosts ?? 0) > 0 && (_jsx("div", { style: {
+                                                                        marginLeft: "5px",
+                                                                        minWidth: "20px",
+                                                                        height: "20px",
+                                                                        padding: "0 6px",
+                                                                        display: "flex",
+                                                                        alignItems: "center",
+                                                                        justifyContent: "center",
+                                                                        backgroundColor: isSelected ? '#fff' : color,
+                                                                        color: isSelected ? color : "#fff",
+                                                                        boxShadow: "1px 1px 2px #00000020",
+                                                                        borderRadius: "30px",
+                                                                        fontWeight: "bold",
+                                                                        fontSize: "12px",
+                                                                        whiteSpace: "nowrap",
+                                                                    }, children: blogPost.newPosts }))] }), isNew && (_jsx("span", { style: {
+                                                                backgroundColor: '#f09c0a',
+                                                                color: '#fff',
+                                                                borderRadius: '12px',
+                                                                padding: '2px 8px',
+                                                                boxShadow: '0 2px 5px rgba(0,0,0,0.15)',
+                                                                userSelect: 'none',
+                                                                whiteSpace: 'nowrap',
+                                                                display: 'inline-flex',
+                                                                alignItems: 'center',
+                                                                justifyContent: 'center',
+                                                                fontSize: '0.9rem',
+                                                                minWidth: "50px",
+                                                                maxWidth: "65px",
+                                                                overflow: 'hidden',
+                                                                textOverflow: 'ellipsis',
+                                                                // transform: layoutMode === 'chat' ? 'translate(45px, 0px)' : undefined
+                                                                transform: layoutMode === 'chat' ? 'translate(5px, -5px)' : undefined
+                                                            }, children: SDKUI_Localizator.New }))] }), _jsxs("div", { style: {
+                                                        fontSize: 'calc(1rem - 1px)',
+                                                        color: isSelected ? "#fff" : !blogPost.isSys ? TMColors.primary : colors.RED
+                                                    }, children: [(showIconHeader) && blogPost.header && blogPost.classID &&
+                                                            _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()
+                                                            ? `(${SDKUI_Localizator.Today})`
+                                                            : ''}`, 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 + "-" + uiId + "-" + blogPost.id));
+        };
+        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 ?
+                    _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 isOwnComment = blogPost.ownerID === SDK_Globals.tmSession?.SessionDescr?.userID;
+                        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) :
+                                    _jsx("div", { style: {
+                                            display: "flex",
+                                            flexDirection: "row",
+                                            alignItems: "flex-start",
+                                            padding: "2px",
+                                            borderRadius: "12px",
+                                            cursor: "default",
+                                            justifyContent: isOwnComment ? "flex-end" : "flex-start",
+                                        }, children: _jsx("div", { style: {
+                                                display: "flex",
+                                                flexDirection: "column",
+                                                alignItems: isOwnComment ? "flex-end" : "flex-start",
+                                                textAlign: "left",
+                                                maxWidth: '90%',
+                                                borderRadius: '8px',
+                                            }, children: renderBlogPostContent(blogPost, index, isOwnComment) }) })] }, "blog-post-wrapper-" + id + "-" + blogPost.id));
+                    }) }) });
+    };
+    // Function to handle changes in the search text
+    const handleSearchChange = (value) => {
+        handleFocusedBlog(undefined);
+        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));
+        }
+    };
+    // Handle closing the context menu
+    const closeContextMenu = useCallback(() => {
+        setAnchorEl(null);
+    }, []);
+    const onBackgroundContextMenu = (event) => {
+        if (event === undefined)
+            return;
+        if (event.target.closest('.blog-post-container'))
+            return;
+        event.preventDefault();
+        setAnchorEl(event.currentTarget);
+        handleFocusedBlog(undefined);
+        handleFocusedAttachment(undefined);
+        setRightClickedOnBackground(true);
+    };
+    const onCloseDcmtForm = useCallback(() => {
+        setShowDcmtForm(false);
+        handleFocusedAttachment(undefined);
+    }, []);
+    return _jsxs("div", { style: { height: height ?? '100%', width: width ?? '100%' }, children: [_jsxs(TMLayoutWaitingContainer, { direction: 'vertical', showWaitPanel: localShowWaitPanel, showWaitPanelPrimary: localShowPrimary, waitPanelTitle: localWaitPanelTitle, waitPanelTextPrimary: localWaitPanelTextPrimary, waitPanelValuePrimary: localWaitPanelValuePrimary, waitPanelMaxValuePrimary: localWaitPanelMaxValuePrimary, isCancelable: true, abortController: localAbortController, children: [(currentHeader && !isHeaderHidden) && (_jsx("div", { style: { display: 'block', width: '100%', overflowX: 'auto', overflowY: 'hidden', whiteSpace: 'nowrap' }, onContextMenu: e => e.preventDefault(), 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' }, onContextMenu: onBackgroundContextMenu, 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 && !(context?.engine === 'WorkingGroupEngine' && context?.object?.customData1 === 1)) && _jsx("button", { style: {
+                    position: 'absolute',
+                    bottom: '18px',
+                    right: '20px',
+                    width: '40px',
+                    height: '40px',
+                    borderRadius: "50%",
+                    backgroundColor: "#C2388B",
+                    color: '#fff',
+                    border: 'none',
+                    cursor: 'pointer',
+                    boxShadow: '0 2px 6px rgba(0,0,0,0.2)',
+                    zIndex: 1000,
+                    transition: 'background-color 0.3s ease, transform 0.2s ease',
+                    display: 'flex',
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                }, 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)';
+                }, 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)';
+                }, onClick: () => { showCommentFormCallback(); }, children: _jsx(TMTooltip, { content: SDKUI_Localizator.AddNewComment, children: _jsx("i", { className: "dx-icon-chat", style: { fontSize: '25px' } }) }) })] });
+};
+export default TMBlogs;