@topconsultnpm/sdkui-react 6.17.0-test9

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

@@ -0,0 +1,42 @@
+import { BlogPostAttachment, DcmtTypeDescriptor } from "@topconsultnpm/sdk-ts";
+import { TMBlogContextDescriptor } from "./TMBlogsPostUtils";
+import { DcmtInfo } from "../../ts";
+import { FileItem } from "../base/TMFileManagerUtils";
+interface TMBlogAttachmentsProps {
+    contextMenuParams?: {
+        isShowHideFilterEnabled: boolean;
+        isShowHideIDEnaled: boolean;
+        isCommentEnabled: boolean;
+        isDownloadAttachmentEnabled: boolean;
+        isViewEditMetadata: boolean;
+        isDeleteEnabled: boolean;
+        isCopyToClipboardEnabled: boolean;
+        isRestoreEnabled: boolean;
+        isRefreshEnabled: boolean;
+        isCreateContextualTask: boolean;
+    };
+    layoutMode: "compact" | "extended";
+    attachments: Array<BlogPostAttachment>;
+    isSelected: boolean;
+    searchText: string;
+    dcmtTypeDescriptors: Map<number, DcmtTypeDescriptor>;
+    treeFs: FileItem | undefined;
+    draftLatestInfoMap: Map<number, {
+        latestVersion: number;
+        folderId: number;
+        folderName: string;
+        fileExt: string;
+        fileSize: string;
+    }> | undefined;
+    archivedDocumentMap: Map<number, {
+        tid: number;
+        did: number;
+        fileExt: string;
+        fileSize: string;
+    }> | undefined;
+    context?: TMBlogContextDescriptor;
+    handleAttachmentFocus: (attachment: DcmtInfo | undefined) => void;
+    openDcmtForm: (dcmtInfo: DcmtInfo) => void;
+}
+declare const TMBlogAttachments: (props: TMBlogAttachmentsProps) => import("react/jsx-runtime").JSX.Element;
+export default TMBlogAttachments;

package/lib/components/grids/TMBlogAttachments.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, 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 { attachments, isSelected, 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';
+        const archiveID = SDK_Globals.tmSession?.SessionDescr?.archiveID;
+        const fileName = `${removeFileExtension(name)}_${archiveID}_${blogPostAttachment.tid}_${blogPostAttachment.did}.${fileExt}`;
+        handleAttachmentFocus({ TID: blogPostAttachment.tid, DID: blogPostAttachment.did, fileName });
+    };
+    const handleMouseLeave = (e) => {
+        e.currentTarget.style.boxShadow = '0 2px 4px rgba(0, 0, 0, 0.1)';
+        e.currentTarget.style.backgroundColor = isSelected ? "#135596" : "#ffffff";
+        handleAttachmentFocus(undefined);
+    };
+    const onDoubleClick = (e, blogPostAttachment, name, fileExt) => {
+        const archiveID = SDK_Globals.tmSession?.SessionDescr?.archiveID;
+        const fileName = `${removeFileExtension(name)}_${archiveID}_${blogPostAttachment.tid}_${blogPostAttachment.did}.${fileExt}`;
+        openDcmtForm({ TID: blogPostAttachment.tid, DID: blogPostAttachment.did, fileName });
+    };
+    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: {
+                    display: 'inline-flex',
+                    padding: '4px 8px',
+                    margin: '4px',
+                    border: '1px solid #ddd',
+                    borderRadius: '8px',
+                    boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)',
+                    backgroundColor: isSelected ? "#135596" : "#ffffff",
+                    cursor: "pointer",
+                    fontSize: '0.9rem',
+                    color: isSelected ? "#ffffff" : "#000000",
+                }, children: _jsxs("div", { style: { alignItems: 'center', display: 'flex' }, children: [(!archivedDocumentsExist && !draftExist) ?
+                            _jsx(IconAttachment, { style: { marginRight: "5px" } }) :
+                            _jsx("div", { style: { marginRight: "10px" }, children: _jsx(TMDcmtIcon, { tid: blogPostAttachment.tid, did: blogPostAttachment.did, fileExtension: fileExt, downloadMode: 'openInNewWindow', tooltipContent: tooltipContent }) }), _jsx("span", { style: { whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }, children: nameElement })] }) }, blogPostAttachment.did + "_" + index);
+        }) });
+};
+export default TMBlogAttachments;

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

@@ -0,0 +1,31 @@
+import React from "react";
+import { BlogPost, HomeBlogPost } from "@topconsultnpm/sdk-ts";
+import { TMBlogsFilterCategoryId, TMBlogsFilterCategoryIdDataSource } from "./TMBlogsPostUtils";
+interface TMBlogHeaderProps {
+    /** Visibility of the component */
+    isVisible: boolean;
+    /** Layout mode of the component */
+    layoutMode: "compact" | "extended";
+    /** Optional height of the component (CSS value) */
+    height: string;
+    /** Optional width of the component (CSS value) */
+    width: string;
+    /** An array of blog posts or home blog posts */
+    allPosts: Array<BlogPost | HomeBlogPost>;
+    /** Number of posts to show */
+    postsToShow: number;
+    /** Callback when the number of posts to show changes */
+    onPostsToShowChange: (postsToShow: number) => void;
+    /** Data source for the tree component */
+    categoryIdDataSource: Array<TMBlogsFilterCategoryIdDataSource>;
+    /** Currently applied global filters */
+    appliedCategoryIdFilters: Array<TMBlogsFilterCategoryId>;
+    /** Setter for applied global filters */
+    setAppliedCategoryIdFilters: React.Dispatch<React.SetStateAction<Array<TMBlogsFilterCategoryId>>>;
+    /** Current search text */
+    searchText: string;
+    /** Callback when the search text changes */
+    onSearchChange: (value: string) => void;
+}
+declare const TMBlogHeader: (props: TMBlogHeaderProps) => import("react/jsx-runtime").JSX.Element;
+export default TMBlogHeader;

package/lib/components/grids/TMBlogHeader.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { SDKUI_Localizator } from "../../helper";
+import TMDropDown from "../editors/TMDropDown";
+import TMTreeDropDown from "../editors/TMTreeDropDown";
+import { TMSearchBar } from "../sidebar/TMHeader";
+const TMBlogHeader = (props) => {
+    const { isVisible, layoutMode, height, width, allPosts, postsToShow, onPostsToShowChange, categoryIdDataSource, appliedCategoryIdFilters, setAppliedCategoryIdFilters, searchText, onSearchChange } = props;
+    // 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: allPosts.length, display: SDKUI_Localizator.All + ` (${allPosts.length})` },
+    ];
+    // Function to handle changes in the filter (number of posts to show)
+    const handlePostsToShowChange = (e) => {
+        if (!e?.target?.value)
+            return;
+        const value = e.target.value;
+        if (value !== undefined) {
+            onPostsToShowChange(Number(value));
+        }
+    };
+    const containerStyle = {
+        display: isVisible ? "flex" : "none",
+        height: isVisible ? height : "0px",
+        width: isVisible ? width : "0px",
+        flexDirection: layoutMode === "extended" ? "row" : "column",
+        gap: layoutMode === "extended" ? "8px" : "4px",
+        alignItems: layoutMode === "extended" ? "center" : "normal",
+        justifyContent: layoutMode === "extended" ? "normal" : "center",
+        boxShadow: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
+        borderBottom: "2px solid transparent",
+        backgroundImage: "linear-gradient(white, white), linear-gradient(270deg, #46B5A2 16%, #3BAABC 34%, #3BAABC 34%, #3681AD 54%, #3368A5 72%, #2F549D 88%, #304F99 100%)",
+        backgroundOrigin: "border-box",
+        backgroundClip: "padding-box, border-box",
+        marginLeft: "4px",
+    };
+    return _jsxs("div", { style: containerStyle, children: [_jsx("div", { children: _jsx(TMSearchBar, { marginLeft: "0px", maxWidth: "100%", searchValue: searchText, onSearchValueChanged: (value) => onSearchChange(value) }) }), layoutMode === "extended" && _jsx("div", { children: _jsx(TMDropDown, { value: postsToShow, dataSource: postsToShowDataSource, onValueChanged: handlePostsToShowChange, elementStyle: { width: '120px', height: '29px' } }) }), _jsx("div", { children: _jsx(TMTreeDropDown, { dataSource: categoryIdDataSource, values: appliedCategoryIdFilters, setValues: setAppliedCategoryIdFilters, displayExpr: false, isValidKey: () => true, elementStyle: { minWidth: '100%', height: '29px' } }) })] });
+};
+export default TMBlogHeader;

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

@@ -0,0 +1,87 @@
+import React from "react";
+import { BlogPost, HomeBlogPost, TaskDescriptor } from "@topconsultnpm/sdk-ts";
+import { DcmtInfo } from "../../ts";
+import { FileItem } from "../base/TMFileManagerUtils";
+import { TMBlogsPostHeader, TMBlogContextDescriptor } from "./TMBlogsPostUtils";
+interface TMBlogsPostProps {
+    /** Flag to indicate whether the component is open */
+    scrollToSelected: boolean;
+    /** Component Identifier */
+    id: string;
+    /** An array of blog posts or home blog posts */
+    posts: Array<BlogPost | HomeBlogPost>;
+    /** Optional display mode */
+    displayMode?: "chat" | "stacked";
+    /** Optional height of the component (CSS value) */
+    height?: string;
+    /** Optional width of the component (CSS value) */
+    width?: string;
+    /** Optional flag to indicate whether to scroll to bottom on new posts */
+    scrollToBottom?: boolean;
+    /** Optional header configuration object */
+    header?: TMBlogsPostHeader;
+    /** Optional flag to show extended attachments */
+    showExtendedAttachments?: boolean;
+    /** Optional file system tree structure */
+    treeFs?: FileItem;
+    /** Optional map storing the latest draft information, where the key is the draft ID */
+    draftLatestInfoMap?: Map<number, {
+        latestVersion: number;
+        folderId: number;
+        folderName: string;
+        fileExt: string;
+        fileSize: string;
+    }>;
+    /** Optional map storing the archived document information */
+    archivedDocumentMap?: Map<number, {
+        tid: number;
+        did: number;
+        fileExt: string;
+        fileSize: string;
+    }>;
+    /** Context descriptor for the blog component */
+    context?: TMBlogContextDescriptor;
+    /** Optional context menu params */
+    contextMenuParams?: {
+        isShowHideFilterEnabled: boolean;
+        isShowHideIDEnaled: boolean;
+        isCommentEnabled: boolean;
+        isDownloadAttachmentEnabled: boolean;
+        isViewEditMetadata: boolean;
+        isDeleteEnabled: boolean;
+        isCopyToClipboardEnabled: boolean;
+        isRestoreEnabled: boolean;
+        isRefreshEnabled: boolean;
+        isCreateContextualTask: boolean;
+    };
+    /** Optional flag to show the floating comment button (default: false) */
+    showFloatingCommentButton?: boolean;
+    /** Show Comment Form Callback */
+    showCommentFormCallback?: (dcmt: DcmtInfo | undefined) => void;
+    /** Show Task Form Callback */
+    showTaskFormCallback?: () => void;
+    /** Optional refresh callback */
+    refreshCallback?: () => Promise<void>;
+    /** Optional boolean to control the visibility of an ID */
+    showId?: boolean;
+    /** Optional setter function to update the visibility state of an ID */
+    setShowId?: React.Dispatch<React.SetStateAction<boolean>>;
+    /** Refresh Home Page News Callback */
+    refreshHomePageNews?: () => Promise<void>;
+    /** Optional callback to mark blog as read */
+    markBlogAsRead?: (blog: BlogPost | undefined) => Promise<void>;
+    /** Optional blog post to be externally selected */
+    externalBlogPost?: BlogPost;
+    /** Optional function to reset the external blog post */
+    resetExternalBlogPost?: () => void;
+    visible?: boolean;
+    allTasks?: Array<TaskDescriptor>;
+    getAllTasks?: () => Promise<void>;
+    deleteTaskByIdsCallback?: (deletedTaskIds: Array<number>) => Promise<void>;
+    addTaskCallback?: (task: TaskDescriptor) => Promise<void>;
+    editTaskCallback?: (task: TaskDescriptor) => Promise<void>;
+    handleNavigateToWGs?: (value: HomeBlogPost | number) => Promise<void>;
+    handleNavigateToDossiers?: (value: HomeBlogPost | number) => Promise<void>;
+}
+declare const TMBlogsPost: (props: TMBlogsPostProps) => import("react/jsx-runtime").JSX.Element;
+export default TMBlogsPost;