@topconsultnpm/sdkui-react 6.17.0-test10

package/lib/components/grids/TMBlogsPost.js

@@ -0,0 +1,644 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { DossierEngine, LayoutModes, ResultTypes, SDK_Globals, WorkingGroupEngine } from "@topconsultnpm/sdk-ts";
+import { ContextMenu } from "devextreme-react";
+import { SDKUI_Localizator, Globalization, getExceptionMessage, TMConditionalWrapper } from "../../helper";
+import TMToppyMessage from "../../helper/TMToppyMessage";
+import { useDcmtOperations } from "../../hooks/useDcmtOperations";
+import { DownloadTypes } from "../../ts";
+import { TMColors } from "../../utils/theme";
+import ShowAlert from "../base/TMAlert";
+import { TMMessageBoxManager, ButtonNames } from "../base/TMPopUp";
+import TMTooltip from "../base/TMTooltip";
+import { TMLayoutWaitingContainer } from "../base/TMWaitPanel";
+import TMHtmlContentDisplay from "../editors/TMHtmlContentDisplay";
+import TMDcmtForm from "../features/documents/TMDcmtForm";
+import { TMResultManager } from "../forms/TMResultDialog";
+import { isHeaderFullyHidden, TMBlogsFilterCategoryId, getDcmtTypeDescriptor, findFileItemByDraftID, BlogPostTitle, NewBadge } from "./TMBlogsPostUtils";
+import TMBlogAttachments from "./TMBlogAttachments";
+import TMBlogHeader from "./TMBlogHeader";
+let localAbortController = new AbortController();
+const TMBlogsPost = (props) => {
+    const { scrollToSelected, id, posts, displayMode = "stacked", height = "100%", width = "100%", scrollToBottom = true, header, showExtendedAttachments = true, treeFs, draftLatestInfoMap, archivedDocumentMap, context, contextMenuParams = {
+        isShowHideFilterEnabled: true,
+        isShowHideIDEnaled: true,
+        isCommentEnabled: false,
+        isDownloadAttachmentEnabled: false,
+        isViewEditMetadata: false,
+        isDeleteEnabled: false,
+        isCopyToClipboardEnabled: false,
+        isRestoreEnabled: false,
+        isRefreshEnabled: false,
+        isCreateContextualTask: false,
+    }, showFloatingCommentButton = false, showCommentFormCallback, showTaskFormCallback, refreshCallback, showId, setShowId, refreshHomePageNews, markBlogAsRead, externalBlogPost, resetExternalBlogPost, updateSelectedBlogPosts, visible = true, allTasks = [], getAllTasks, deleteTaskByIdsCallback, addTaskCallback, editTaskCallback, handleNavigateToWGs, handleNavigateToDossiers, } = props;
+    const { abortController, showWaitPanel, waitPanelTitle, showPrimary, waitPanelTextPrimary, waitPanelValuePrimary, waitPanelMaxValuePrimary, showSecondary, waitPanelTextSecondary, waitPanelValueSecondary, waitPanelMaxValueSecondary, downloadDcmtsAsync } = useDcmtOperations();
+    const bottomRef = useRef(null);
+    const containerRef = useRef(null);
+    // State to manage the layout mode of the document form
+    const [layoutMode, setLayoutMode] = useState("extended");
+    const COMPACT_WIDTH_THRESHOLD = 465;
+    const COMPACT_HEIGHT_THRESHOLD = 500;
+    // 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 unread post
+    const [firstUnreadPost, setFirstUnreadPost] = useState(undefined);
+    // State to manage the focused file
+    const [dcmtTypeDescriptors, setDcmtTypeDescriptors] = useState(new Map());
+    const [currentHeader, setCurrentHeader] = useState(header);
+    const [isHeaderHidden, setIsHeaderHidden] = useState(isHeaderFullyHidden(currentHeader));
+    const [localShowId, setLocalShowId] = useState(false);
+    // Filter states
+    const [searchText, setSearchText] = useState('');
+    const [postsToShow, setPostsToShow] = useState(30);
+    const [categoryIdDataSource, setCategoryIdDataSource] = useState([]);
+    const [appliedCategoryIdFilters, setAppliedCategoryIdFilters] = useState([TMBlogsFilterCategoryId.PublishedBlogs]);
+    // State to manage the selected item
+    const [selectedItem, setSelectedItem] = useState([]);
+    // State to manage the focused item
+    const [focusedItem, setFocusedItem] = useState(undefined);
+    // State to manage the focused file
+    const [focusedAttachment, setFocusedAttachment] = useState(undefined);
+    // State to manage show selected file
+    const [dcmtForm, setDcmtForm] = useState({ show: false, dcmt: undefined });
+    const [anchorEl, setAnchorEl] = useState(null);
+    const [menuItems, setMenuItems] = useState([]);
+    const [localShowWaitPanel, setLocalShowWaitPanel] = useState(false);
+    const [localWaitPanelTitle, setLocalWaitPanelTitle] = useState('');
+    const [localShowPrimary, setLocalShowPrimary] = useState(false);
+    const [localWaitPanelTextPrimary, setLocalWaitPanelTextPrimary] = useState('');
+    const [localWaitPanelValuePrimary, setLocalWaitPanelValuePrimary] = useState(0);
+    const [localWaitPanelMaxValuePrimary, setLocalWaitPanelMaxValuePrimary] = useState(0);
+    const handleFocusedItem = (item) => {
+        setFocusedAttachment(undefined);
+        setFocusedItem(item);
+    };
+    const handleSelectedItem = (item) => {
+        setFocusedAttachment(undefined);
+        if (markBlogAsRead && item.length > 0) {
+            if (item[0].customData1 === 1)
+                markBlogAsRead(item[0]);
+        }
+        setSelectedItem(item ? item : []);
+        updateSelectedBlogPosts?.(item ? item : []);
+    };
+    const handleFocusedAttachment = (attachment) => {
+        setFocusedAttachment(attachment);
+    };
+    useEffect(() => {
+        if (externalBlogPost && externalBlogPost.id) {
+            const foundPost = blogPosts.find(post => post.id === externalBlogPost.id);
+            if (foundPost) {
+                resetExternalBlogPost?.();
+                handleSelectedItem([foundPost]);
+                // Retrieve the DOM element using the ID built with the pattern: {id}-blogpost-{id of the first selected item}
+                const element = document.getElementById(`${id}-blogpost-${foundPost.id}`);
+                // Check if the element was found in the DOM
+                if (element) {
+                    // Scroll the view to bring the element to the center of the screen
+                    element.scrollIntoView({ block: "nearest", inline: "nearest" });
+                }
+            }
+        }
+    }, [externalBlogPost, blogPosts]);
+    useEffect(() => {
+        if (!containerRef.current)
+            return;
+        const ro = new ResizeObserver(entries => {
+            for (let entry of entries) {
+                const { width, height } = entry.contentRect;
+                // Compact mode triggers if width OR height is below threshold
+                if ((width < COMPACT_WIDTH_THRESHOLD || height < COMPACT_HEIGHT_THRESHOLD) && layoutMode !== "compact") {
+                    setLayoutMode("compact");
+                }
+                else if (width >= COMPACT_WIDTH_THRESHOLD && height >= COMPACT_HEIGHT_THRESHOLD && layoutMode !== "extended") {
+                    setLayoutMode("extended");
+                }
+            }
+        });
+        ro.observe(containerRef.current);
+        return () => ro.disconnect();
+    }, [layoutMode]);
+    useEffect(() => {
+        const fetchDcmtTypeDescriptor = async () => {
+            const descriptors = await getDcmtTypeDescriptor(posts);
+            setDcmtTypeDescriptors(descriptors);
+        };
+        if (showExtendedAttachments) {
+            fetchDcmtTypeDescriptor();
+        }
+        const publishedBlogssLength = posts.filter(newsFeed => newsFeed.isSys !== 1 && newsFeed.isDel !== 1).length;
+        const systemBlogsLength = posts.filter(newsFeed => newsFeed.isSys === 1).length;
+        const deletedBlogsLength = posts.filter(newsFeed => newsFeed.isDel === 1).length;
+        setCategoryIdDataSource([
+            {
+                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,
+            },
+        ]);
+    }, [posts]);
+    useEffect(() => {
+        setIsHeaderHidden(isHeaderFullyHidden(currentHeader));
+    }, [currentHeader]);
+    // Effect hook to update blogPosts state whenever the posts prop changes
+    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 && searchText.trim().length > 0 && !(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 (appliedCategoryIdFilters.length === 0) {
+                return !isActiveBlog(newsFeed) && !isSystemBlog(newsFeed) && !isDeletedBlog(newsFeed);
+            }
+            // Check if the blog post matches any of the applied global filters
+            const matchesFilter = appliedCategoryIdFilters.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 = posts.filter(applyFilters);
+        // 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);
+        // Update the first unread post state
+        setFirstUnreadPost(filteredBlogs.find(blog => blog.customData1 === 1));
+    }, [posts, appliedCategoryIdFilters, searchText, postsToShow]);
+    useEffect(() => {
+        if (!scrollToSelected)
+            return;
+        if (blogPosts.length === 0)
+            return;
+        // Check if there is at least one selected item in the selectedItem array
+        if (selectedItem.length > 0) {
+            // Retrieve the DOM element using the ID built with the pattern: {id}-blogpost-{id of the first selected item}
+            const element = document.getElementById(`${id}-blogpost-${selectedItem[0].id}`);
+            // Check if the element was found in the DOM
+            if (element) {
+                // Scroll the view to bring the element to the center of the screen
+                element.scrollIntoView({ block: "nearest", inline: "nearest" });
+            }
+        }
+        else {
+            // If no items are selected, check if auto-scroll is enabled and if the bottom reference exists
+            if (scrollToBottom && bottomRef.current)
+                bottomRef.current.scrollIntoView({ block: "nearest", inline: "nearest" });
+        }
+    }, [scrollToBottom, blogPosts, scrollToSelected, selectedItem]);
+    useEffect(() => {
+        if (showId !== undefined)
+            setLocalShowId(showId);
+    }, [showId]);
+    useEffect(() => {
+        if (setShowId)
+            setShowId(localShowId);
+    }, [localShowId]);
+    useEffect(() => {
+        if (!visible) {
+            closeContextMenu();
+        }
+    }, [visible]);
+    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 refresh = async () => {
+        if (refreshCallback)
+            await refreshCallback();
+    };
+    // Handlers for mouse events
+    const handleMouseEnter = (item) => handleFocusedItem(item);
+    const handleMouseLeave = () => handleFocusedItem(undefined);
+    const handleClick = (item) => handleSelectedItem([item]);
+    const handleDoubleClick = async (blogPost) => {
+        if (handleNavigateToWGs && id && blogPost.classID === 'WG')
+            handleNavigateToWGs(blogPost);
+        if (handleNavigateToDossiers && id && blogPost.classID === 'DS')
+            handleNavigateToDossiers(blogPost);
+    };
+    const handleKeyDown = (event) => {
+        if (!selectedItem.length)
+            return;
+        const currentIndex = blogPosts.findIndex(i => i.id === selectedItem[0].id);
+        if (currentIndex === -1)
+            return;
+        let newIndex = currentIndex;
+        switch (event.key) {
+            case "ArrowDown":
+                if (currentIndex < blogPosts.length - 1) {
+                    newIndex = currentIndex + 1;
+                    handleSelectedItem([blogPosts[newIndex]]);
+                }
+                event.preventDefault();
+                break;
+            case "ArrowUp":
+                if (currentIndex > 0) {
+                    newIndex = currentIndex - 1;
+                    handleSelectedItem([blogPosts[newIndex]]);
+                }
+                event.preventDefault();
+                break;
+            case "Enter":
+                const item = blogPosts[currentIndex];
+                const classItemID = item.classID;
+                if (handleNavigateToWGs && item.id && classItemID === 'WG') {
+                    handleNavigateToWGs(item);
+                }
+                if (handleNavigateToDossiers && item.id && classItemID === 'DS') {
+                    handleNavigateToDossiers(item);
+                }
+                break;
+            default:
+                break;
+        }
+        // Scrolla automaticamente all'elemento selezionato
+        const element = document.getElementById(`${id}-blogpost-${blogPosts[newIndex].id}`);
+        if (element) {
+            element.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "nearest" });
+        }
+    };
+    // Unfollow callback
+    const unFollowCallback = async (currentBlog, classId) => {
+        const title = SDKUI_Localizator.Unfollow;
+        const header = currentBlog.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(currentBlog.id, true).then(async () => {
+                            result.push({ rowIndex: currentBlog.id, id1: currentBlog.id, id2: currentBlog.id, description: SDKUI_Localizator.OperationSuccess, resultType: ResultTypes.SUCCESS });
+                            refreshHomePageNews?.();
+                        })
+                            .catch((err) => {
+                            result.push({ rowIndex: currentBlog.id, id1: currentBlog.id, id2: currentBlog.id, resultType: ResultTypes.ERROR, description: getExceptionMessage(err) });
+                        });
+                        break;
+                    case 'DS':
+                        const dossierEngine = new DossierEngine(SDK_Globals.tmSession);
+                        await dossierEngine.FollowAddOrRemoveAsync(currentBlog.id, true).then(async () => {
+                            result.push({ rowIndex: currentBlog.id, id1: currentBlog.id, id2: currentBlog.id, description: SDKUI_Localizator.OperationSuccess, resultType: ResultTypes.SUCCESS });
+                            refreshHomePageNews?.();
+                        })
+                            .catch((err) => {
+                            result.push({ rowIndex: currentBlog.id, id1: currentBlog.id, id2: currentBlog.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);
+            }
+        });
+    };
+    // Copy to clipboard callback
+    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);
+        });
+    };
+    // Delete or undelete comment callback
+    const deleteOrUndeleteCommentCallback = async (currentBlog, del) => {
+        if (currentBlog === undefined || currentBlog.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 (currentBlog === undefined || currentBlog.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 (localAbortController.signal.aborted) {
+                    result.push({ rowIndex: i, id1: currentBlog.id, id2: currentBlog.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, currentBlog.id, del)
+                            .then(() => {
+                            handleSelectedItem([]);
+                            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, currentBlog.id, del)
+                            .then(() => {
+                            handleSelectedItem([]);
+                            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, currentBlog.id, del)
+                            .then(() => {
+                            handleSelectedItem([]);
+                            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);
+            }
+        });
+    };
+    // Open document form
+    const openDcmtForm = (dcmtInfo) => {
+        setDcmtForm({ show: true, dcmt: dcmtInfo });
+    };
+    const closeDcmtForm = () => {
+        setDcmtForm({ show: false, dcmt: undefined });
+    };
+    // Context menu handler
+    const onContextMenu = (event) => {
+        if (!event)
+            return;
+        event.preventDefault();
+        const userId = SDK_Globals.tmSession?.SessionDescr?.userID;
+        const menuItems = [];
+        const targetItem = focusedItem ?? (selectedItem.length === 1 ? selectedItem[0] : undefined);
+        const isGroupArchived = Boolean(context && context.engine === 'WorkingGroupEngine' && context.object && context.object.customData1 === 1);
+        const isNotOwner = targetItem && targetItem.ownerID !== userId;
+        const isDeleted = targetItem && (targetItem.isDel !== undefined && targetItem.isDel !== 0);
+        const classId = targetItem ? targetItem.classID : undefined;
+        if (contextMenuParams.isDownloadAttachmentEnabled && focusedAttachment !== undefined) {
+            menuItems.push({
+                icon: "download",
+                text: 'Download',
+                onClick: async () => {
+                    await downloadDcmtsAsync([
+                        { TID: focusedAttachment.TID, DID: focusedAttachment.DID, fileName: focusedAttachment.fileName }
+                    ], DownloadTypes.Dcmt, "download");
+                },
+            });
+        }
+        if (contextMenuParams.isViewEditMetadata && focusedAttachment !== undefined) {
+            menuItems.push({
+                icon: 'eyeopen',
+                text: SDKUI_Localizator.OpenForm,
+                onClick: () => openDcmtForm(focusedAttachment),
+            });
+        }
+        if (contextMenuParams.isCommentEnabled && showCommentFormCallback !== undefined) {
+            menuItems.push({
+                icon: 'chat',
+                text: SDKUI_Localizator.Comment,
+                disabled: isGroupArchived ? true : false,
+                onClick: () => {
+                    showCommentFormCallback(focusedAttachment);
+                },
+                beginGroup: true
+            });
+        }
+        if (targetItem && contextMenuParams.isDeleteEnabled) {
+            menuItems.push({
+                icon: "trash",
+                text: SDKUI_Localizator.Delete,
+                visible: contextMenuParams.isDeleteEnabled,
+                onClick: () => deleteOrUndeleteCommentCallback(targetItem, true),
+                disabled: isNotOwner || isDeleted || isGroupArchived,
+            });
+        }
+        if (targetItem && contextMenuParams.isRestoreEnabled) {
+            menuItems.push({
+                icon: "undo",
+                text: SDKUI_Localizator.Restore,
+                onClick: () => deleteOrUndeleteCommentCallback(targetItem, false),
+                disabled: isNotOwner || (targetItem && (targetItem.isDel === undefined || targetItem.isDel === 0)),
+            });
+        }
+        if (targetItem && contextMenuParams.isCopyToClipboardEnabled) {
+            menuItems.push({
+                text: SDKUI_Localizator.CopyToClipboard,
+                icon: 'copy',
+                disabled: false,
+                onClick: () => { copyInClipboard(targetItem); }
+            });
+        }
+        if (contextMenuParams.isCreateContextualTask && showTaskFormCallback) {
+            menuItems.push({
+                text: SDKUI_Localizator.CreateContextualTask,
+                icon: 'plus',
+                onClick: () => showTaskFormCallback(),
+                disabled: isGroupArchived ? true : false,
+                beginGroup: true
+            });
+        }
+        if (targetItem && Boolean(classId && (classId === 'WG' || classId === 'DS'))) {
+            menuItems.push({
+                icon: "eyeclose",
+                text: SDKUI_Localizator.Unfollow,
+                onClick: () => (targetItem && classId) && unFollowCallback(targetItem, classId),
+            });
+        }
+        if (contextMenuParams.isShowHideFilterEnabled) {
+            menuItems.push({
+                icon: isHeaderHidden ? 'eyeopen' : 'eyeclose',
+                text: isHeaderHidden ? SDKUI_Localizator.ShowFilters : SDKUI_Localizator.HideFilters,
+                onClick: toggleHeaderClick,
+                disabled: false,
+                beginGroup: true
+            });
+        }
+        if (contextMenuParams.isShowHideIDEnaled) {
+            menuItems.push({
+                icon: localShowId ? 'eyeclose' : 'eyeopen',
+                onClick: () => setLocalShowId(prevShowId => !prevShowId),
+                text: localShowId ? SDKUI_Localizator.ID_Hide : SDKUI_Localizator.ID_Show,
+                disabled: false,
+            });
+        }
+        if (contextMenuParams.isRefreshEnabled && refreshCallback !== undefined) {
+            menuItems.push({
+                icon: "refresh",
+                text: SDKUI_Localizator.Refresh,
+                onClick: refresh,
+                disabled: false,
+            });
+        }
+        if (menuItems.length > 0) {
+            setAnchorEl(event.currentTarget);
+            setMenuItems(menuItems);
+        }
+    };
+    const handlePostsToShowChange = (value) => {
+        setPostsToShow(value);
+    };
+    const handleSearchChange = (value) => {
+        handleSelectedItem([]);
+        setSearchText(value);
+    };
+    const closeContextMenu = useCallback(() => {
+        setAnchorEl(null);
+    }, []);
+    return _jsx("div", { ref: containerRef, style: { height: height, width: width }, children: _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: _jsxs(TMLayoutWaitingContainer, { direction: 'vertical', showWaitPanel: localShowWaitPanel, showWaitPanelPrimary: localShowPrimary, waitPanelTitle: localWaitPanelTitle, waitPanelTextPrimary: localWaitPanelTextPrimary, waitPanelValuePrimary: localWaitPanelValuePrimary, waitPanelMaxValuePrimary: localWaitPanelMaxValuePrimary, isCancelable: true, abortController: localAbortController, children: [_jsx(TMBlogHeader, { isVisible: currentHeader !== undefined && !isHeaderHidden, layoutMode: layoutMode, height: layoutMode === 'extended' ? "40px" : "70px", width: "100%", allPosts: posts, postsToShow: postsToShow, onPostsToShowChange: handlePostsToShowChange, categoryIdDataSource: categoryIdDataSource, appliedCategoryIdFilters: appliedCategoryIdFilters, setAppliedCategoryIdFilters: setAppliedCategoryIdFilters, searchText: searchText, onSearchChange: handleSearchChange }), _jsxs("div", { style: {
+                            width: "100%",
+                            height: currentHeader !== undefined && !isHeaderHidden ? `calc(100% - ${layoutMode === 'extended' ? "40px" : "70px"})` : "100%",
+                        }, children: [blogPosts.length === 0 && _jsx(TMToppyMessage, { message: searchText.length > 0 ? SDKUI_Localizator.NoMessagesFound : SDKUI_Localizator.NoMessages }), blogPosts.length > 0 && _jsxs("div", { tabIndex: 0, onKeyDown: handleKeyDown, onContextMenu: onContextMenu, style: {
+                                    height: '100%',
+                                    width: '100%',
+                                    outline: "none",
+                                    display: "flex",
+                                    flexDirection: "column",
+                                    rowGap: "10px",
+                                    overflowY: "auto",
+                                    padding: "5px",
+                                    backgroundColor: displayMode === 'stacked' ? "#e0e0e0" : "#fff"
+                                }, children: [blogPosts.map((blogPost) => {
+                                        const isSelected = selectedItem.some(item => item.id === blogPost.id);
+                                        const isFocused = focusedItem?.id === blogPost.id;
+                                        const isHomeBlogPost = Boolean(blogPost.header?.trim());
+                                        const isNew = Boolean(blogPost.newPosts ?? blogPost.customData1);
+                                        const isOwnComment = blogPost.ownerID === SDK_Globals.tmSession?.SessionDescr?.userID;
+                                        const isSys = blogPost.isSys === 1;
+                                        return _jsxs(React.Fragment, { children: [(firstUnreadPost && blogPost.id === firstUnreadPost.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' } })] })), _jsx(TMConditionalWrapper, { condition: displayMode === "chat", wrapper: children => _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: children }) }), children: _jsxs("div", { id: `${id}-blogpost-${blogPost.id}`, onMouseEnter: () => handleMouseEnter(blogPost), onMouseLeave: handleMouseLeave, onClick: () => handleClick(blogPost), onDoubleClick: () => handleDoubleClick(blogPost), style: {
+                                                            display: "flex",
+                                                            flexDirection: "column",
+                                                            width: "100%",
+                                                            position: "relative",
+                                                            backgroundColor: isSelected ? "#135596"
+                                                                : displayMode === 'stacked' ? "#f9f9f9" : isOwnComment ? '#D9EFE0' : '#F3E6E6',
+                                                            transition: "all 0.2s ease",
+                                                            color: isSys ? "#ff0000" : isSelected ? "#ffffff" : TMColors.primary,
+                                                            borderRadius: "5px",
+                                                            padding: isHomeBlogPost ? '10px' : `10px ${isOwnComment ? '50px' : '10px'} 10px 10px`,
+                                                            borderLeft: "5px solid transparent",
+                                                            textDecoration: blogPost.isDel ? 'line-through' : 'none',
+                                                            boxShadow: isFocused ? "0 4px 12px rgba(19, 85, 150, 0.6)" : "none",
+                                                            cursor: 'pointer',
+                                                        }, children: [_jsx(BlogPostTitle, { displayMode: displayMode, layoutMode: layoutMode, blogPost: blogPost, isSelected: isSelected, isOwnComment: isOwnComment, searchText: searchText, isSys: isSys, isHomeBlogPost: isHomeBlogPost, showId: localShowId, handleNavigateToWGs: handleNavigateToWGs, handleNavigateToDossiers: handleNavigateToDossiers }), isNew && _jsx(NewBadge, { layoutMode: layoutMode }), _jsx("div", { style: { fontSize: '1rem', color: "#000", marginTop: "10px", overflow: "hidden" }, children: _jsx(TMHtmlContentDisplay, { markup: blogPost.description ?? '-', searchText: searchText, isSelected: isSelected }) }), showExtendedAttachments && blogPost.attachments && blogPost.attachments.length > 0 && (_jsx(TMBlogAttachments, { contextMenuParams: contextMenuParams, attachments: blogPost.attachments, layoutMode: layoutMode, isSelected: isSelected, searchText: searchText, dcmtTypeDescriptors: dcmtTypeDescriptors, treeFs: treeFs, draftLatestInfoMap: draftLatestInfoMap, archivedDocumentMap: archivedDocumentMap, context: context, handleAttachmentFocus: handleFocusedAttachment, openDcmtForm: openDcmtForm }))] }, `${id}-blogpost-${blogPost.id}`) })] }, "blog-post-wrapper-" + id + "-" + blogPost.id);
+                                    }), _jsx("div", { ref: bottomRef }), anchorEl && _jsx("div", { style: { position: 'fixed', zIndex: 9999 }, children: _jsx(ContextMenu, { dataSource: menuItems, target: anchorEl, onHiding: closeContextMenu }) })] }), (dcmtForm.dcmt && dcmtForm.dcmt.TID && dcmtForm.dcmt.DID) && _jsx(TMDcmtForm, { TID: Number(dcmtForm.dcmt.TID), DID: Number(dcmtForm.dcmt.DID), layoutMode: LayoutModes.Update, onClose: closeDcmtForm, isClosable: true, titleModal: SDKUI_Localizator.Attachment + ": " + dcmtForm.dcmt.fileName, isModal: true, widthModal: "95%", heightModal: "95%", allTasks: allTasks, getAllTasks: getAllTasks, deleteTaskByIdsCallback: deleteTaskByIdsCallback, addTaskCallback: addTaskCallback, editTaskCallback: editTaskCallback, handleNavigateToWGs: handleNavigateToWGs, handleNavigateToDossiers: handleNavigateToDossiers }), (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(undefined); }, children: _jsx(TMTooltip, { content: SDKUI_Localizator.AddNewComment, children: _jsx("i", { className: "dx-icon-chat", style: { fontSize: '25px' } }) }) })] })] }) }) });
+};
+export default TMBlogsPost;