@topconsultnpm/sdkui-react 6.19.0-dev1.9 → 6.19.0-dev2.2

package/lib/components/grids/TMBlogs.js

@@ -1,721 +0,0 @@
-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;