@topconsultnpm/sdkui-react 6.21.0-dev2.6 → 6.21.0-dev2.8

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

@@ -5,6 +5,7 @@ interface TMBlogAttachmentsProps {
     layoutMode: "compact" | "extended";
     attachments: Array<BlogPostAttachment>;
     isSelected: boolean;
+    isLoading?: boolean;
     searchText: string;
     dcmtTypeDescriptors: Map<number, DcmtTypeDescriptor>;
     treeFs: FileItem | undefined;

package/lib/components/grids/TMBlogAttachments.js

@@ -1,10 +1,10 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { SDK_Globals } from "@topconsultnpm/sdk-ts";
 import { getAttachmentInfo, lightenColor, removeFileExtension } from "./TMBlogsPostUtils";
 import TMDcmtIcon from "../features/documents/TMDcmtIcon";
 import { IconAttachment } from "../../helper";
 const TMBlogAttachments = (props) => {
-    const { layoutMode, attachments, isSelected, searchText, dcmtTypeDescriptors, treeFs, draftLatestInfoMap, archivedDocumentMap, handleAttachmentFocus, openDcmtForm } = props;
+    const { layoutMode, attachments, isSelected, isLoading = false, searchText, dcmtTypeDescriptors, treeFs, draftLatestInfoMap, archivedDocumentMap, handleAttachmentFocus, openDcmtForm } = props;
     const handleMouseEnter = (e, blogPostAttachment, name, fileExt) => {
         e.currentTarget.style.boxShadow = '0 4px 8px rgba(0, 0, 0, 0.15)';
         e.currentTarget.style.backgroundColor = isSelected ? lightenColor("#135596", 40) : '#cfcfcf';
@@ -24,7 +24,7 @@ const TMBlogAttachments = (props) => {
     };
     return _jsx("div", { style: { width: "100%", marginTop: "5px", overflow: "hidden" }, children: attachments.map((blogPostAttachment, index) => {
             const { name, nameElement, tooltipContent, fileExt, archivedDocumentsExist, draftExist } = getAttachmentInfo(blogPostAttachment, treeFs, draftLatestInfoMap, archivedDocumentMap, dcmtTypeDescriptors, isSelected, searchText);
-            return _jsx("div", { onDoubleClick: (e) => onDoubleClick(e, blogPostAttachment, name, fileExt), onMouseEnter: (e) => handleMouseEnter(e, blogPostAttachment, name, fileExt), onMouseLeave: (e) => handleMouseLeave(e), style: {
+            return _jsx("div", { onDoubleClick: (e) => !isLoading && onDoubleClick(e, blogPostAttachment, name, fileExt), onMouseEnter: (e) => !isLoading && handleMouseEnter(e, blogPostAttachment, name, fileExt), onMouseLeave: (e) => !isLoading && handleMouseLeave(e), style: {
                     display: layoutMode === "extended" ? "inline-flex" : "flex",
                     padding: '4px 8px',
                     margin: '4px',
@@ -32,17 +32,43 @@ const TMBlogAttachments = (props) => {
                     borderRadius: '8px',
                     boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)',
                     backgroundColor: isSelected ? "#135596" : "#ffffff",
-                    cursor: "pointer",
+                    cursor: isLoading ? "default" : "pointer",
                     fontSize: '0.9rem',
                     color: isSelected ? "#ffffff" : "#000000",
-                }, children: _jsxs("div", { style: { alignItems: 'center', display: 'flex', minWidth: 0 }, children: [(!archivedDocumentsExist && !draftExist) ?
-                            _jsx(IconAttachment, { style: { marginRight: "5px", flexShrink: 0 } }) :
-                            _jsx("div", { style: { marginRight: "10px", flexShrink: 0 }, children: _jsx(TMDcmtIcon, { tid: blogPostAttachment.tid, did: blogPostAttachment.did, fileExtension: fileExt, downloadMode: 'openInNewWindow', tooltipContent: tooltipContent }) }), _jsx("span", { title: layoutMode === 'compact' ? name + " (DID: " + blogPostAttachment.did + ")" : undefined, style: {
-                                whiteSpace: 'nowrap',
-                                overflow: 'hidden',
-                                textOverflow: 'ellipsis',
-                                minWidth: 0,
-                            }, children: nameElement })] }) }, blogPostAttachment.did + "_" + index);
+                }, children: _jsx("div", { style: { alignItems: 'center', display: 'flex', minWidth: 0 }, children: isLoading ? (_jsxs(_Fragment, { children: [_jsx("div", { style: {
+                                    width: '16px',
+                                    height: '16px',
+                                    marginRight: '8px',
+                                    border: '2px solid #ddd',
+                                    borderTop: `2px solid ${isSelected ? '#fff' : '#135596'}`,
+                                    borderRadius: '50%',
+                                    animation: 'spin 1s linear infinite',
+                                    flexShrink: 0,
+                                } }), _jsx("span", { style: {
+                                    background: isSelected ? 'rgba(255,255,255,0.3)' : 'linear-gradient(90deg, #e0e0e0 25%, #f0f0f0 50%, #e0e0e0 75%)',
+                                    backgroundSize: '200% 100%',
+                                    animation: 'shimmer 1.5s infinite',
+                                    borderRadius: '4px',
+                                    width: '120px',
+                                    height: '14px',
+                                    display: 'inline-block',
+                                } }), _jsx("style", { children: `
+                                    @keyframes spin {
+                                        0% { transform: rotate(0deg); }
+                                        100% { transform: rotate(360deg); }
+                                    }
+                                    @keyframes shimmer {
+                                        0% { background-position: -200% 0; }
+                                        100% { background-position: 200% 0; }
+                                    }
+                                    ` })] })) : (_jsxs(_Fragment, { children: [(!archivedDocumentsExist && !draftExist) ?
+                                _jsx(IconAttachment, { style: { marginRight: "5px", flexShrink: 0 } }) :
+                                _jsx("div", { style: { marginRight: "10px", flexShrink: 0 }, children: _jsx(TMDcmtIcon, { tid: blogPostAttachment.tid, did: blogPostAttachment.did, fileExtension: fileExt, downloadMode: 'openInNewWindow', tooltipContent: tooltipContent }) }), _jsx("span", { title: layoutMode === 'compact' ? name + " (DID: " + blogPostAttachment.did + ")" : undefined, style: {
+                                    whiteSpace: 'nowrap',
+                                    overflow: 'hidden',
+                                    textOverflow: 'ellipsis',
+                                    minWidth: 0,
+                                }, children: nameElement })] })) }) }, blogPostAttachment.did + "_" + index);
         }) });
 };
 export default TMBlogAttachments;

package/lib/components/grids/TMBlogsPost.js

@@ -48,6 +48,7 @@ const TMBlogsPost = (props) => {
     const [firstUnreadPost, setFirstUnreadPost] = useState(undefined);
     // State to manage the focused file
     const [dcmtTypeDescriptors, setDcmtTypeDescriptors] = useState(new Map());
+    const [descriptorsLoaded, setDescriptorsLoaded] = useState(false);
     const [currentHeader, setCurrentHeader] = useState(header);
     const [isHeaderHidden, setIsHeaderHidden] = useState(isHeaderFullyHidden(currentHeader));
     const [localShowId, setLocalShowId] = useState(false);
@@ -147,8 +148,13 @@ const TMBlogsPost = (props) => {
     useEffect(() => {
         (async () => {
             if (showExtendedAttachments) {
+                setDescriptorsLoaded(false);
                 const descriptors = await getDcmtTypeDescriptor(posts);
                 setDcmtTypeDescriptors(descriptors);
+                setDescriptorsLoaded(true);
+            }
+            else {
+                setDescriptorsLoaded(true);
             }
             const publishedBlogssLength = posts.filter(newsFeed => newsFeed.isSys !== 1 && newsFeed.isDel !== 1).length;
             const systemBlogsLength = posts.filter(newsFeed => newsFeed.isSys === 1).length;
@@ -679,7 +685,7 @@ const TMBlogsPost = (props) => {
                                                             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, { attachments: blogPost.attachments, layoutMode: layoutMode, isSelected: isSelected, searchText: searchText, dcmtTypeDescriptors: dcmtTypeDescriptors, treeFs: treeFs, draftLatestInfoMap: draftLatestInfoMap, archivedDocumentMap: archivedDocumentMap, handleAttachmentFocus: handleFocusedAttachment, openDcmtForm: openDcmtForm }))] }, `${id}-blogpost-${blogPost.id}`) })] }, "blog-post-wrapper-" + id + "-" + blogPost.id);
+                                                        }, 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, { attachments: blogPost.attachments, layoutMode: layoutMode, isSelected: isSelected, isLoading: !descriptorsLoaded, searchText: searchText, dcmtTypeDescriptors: dcmtTypeDescriptors, treeFs: treeFs, draftLatestInfoMap: draftLatestInfoMap, archivedDocumentMap: archivedDocumentMap, handleAttachmentFocus: handleFocusedAttachment, openDcmtForm: openDcmtForm }))] }, `${id}-blogpost-${blogPost.id}`) })] }, "blog-post-wrapper-" + id + "-" + blogPost.id);
                                     }), _jsx("div", { ref: bottomRef })] }), _jsx(TMContextMenu, { items: menuItems, target: `#${id}-blogs-wrapper`, externalControl: {
                                     visible: menuVisible,
                                     position: menuPosition,

package/lib/components/grids/TMBlogsPostUtils.js

@@ -142,27 +142,21 @@ export const getAttachmentInfo = (attachment, treeFs, draftLatestInfoMap, archiv
     return { name, nameElement, tooltipContent, folderId, fileExt, draftExist, archivedDocumentsExist };
 };
 export const getDcmtTypeDescriptor = async (blogPosts) => {
-    // Create a Map to store tid as key and DcmtTypeDescriptor as value
     const dcmtTypeMap = new Map();
-    // Collect unique tids first to avoid duplicate HTTP calls
-    const uniqueTids = new Set();
-    for (const blogPost of blogPosts) {
-        if (blogPost.attachments) {
-            for (const attachment of blogPost.attachments) {
-                if (attachment.tid) {
-                    uniqueTids.add(attachment.tid);
-                }
-            }
+    // Collect unique tid-did pairs to avoid duplicate HTTP calls
+    const tidDidMap = new Map();
+    for (const { tid, did } of blogPosts.flatMap(bp => bp.attachments ?? [])) {
+        if (tid !== undefined && !tidDidMap.has(tid)) {
+            tidDidMap.set(tid, did);
         }
     }
-    // Fetch all descriptors in parallel instead of sequentially
-    const promises = Array.from(uniqueTids).map(async (tid) => {
-        const dcmtTypeDescriptor = await DcmtTypeListCacheService.GetAsync(tid, true);
-        if (dcmtTypeDescriptor) {
-            dcmtTypeMap.set(tid, dcmtTypeDescriptor);
+    // Fetch all descriptors in parallel
+    await Promise.all(Array.from(tidDidMap.entries()).map(async ([tid, did]) => {
+        const descriptor = await DcmtTypeListCacheService.GetWithNotGrantedAsync(tid, did);
+        if (descriptor) {
+            dcmtTypeMap.set(tid, descriptor);
         }
-    });
-    await Promise.all(promises);
+    }));
     return dcmtTypeMap;
 };
 export const BlogPostHomeHeader = (header, classId, isSelected, searchText, headerClickCallback) => {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@topconsultnpm/sdkui-react",
-    "version": "6.21.0-dev2.6",
+    "version": "6.21.0-dev2.8",
     "description": "",
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",