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

package/lib/components/features/workflow/diagram/RecipientList.js

@@ -65,9 +65,10 @@ const FloatingMenu = styled.div `
   transform: translateY(5px);
   align-items: center; /* Centra i pulsanti orizzontalmente */
 `;
-const FloatingMenuButton = styled(TMButton) `
-  width: 100%; /* Rende i pulsanti interni larghi quanto il menu */
-`;
+// FloatingMenuButton wrapper component to avoid circular dependency
+const FloatingMenuButton = (props) => {
+    return _jsx(TMButton, { width: "100%", ...props });
+};
 const RecipientList = ({ recipients, title, tid, qd, onAdd, onRemove, onQDChange }) => {
     const [uiState, setUiState] = useState({
         isMenuOpen: false,

package/lib/components/forms/Login/Chooser.js

@@ -30,7 +30,7 @@ const DropdownContainer = styled.div `
   border: 1px solid #ccc;
   border-radius: 4px;
   box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
-  max-height: max-content;
+  max-height: 35vh;
   overflow-y: auto;
   z-index: 9999;
   width: fit-content;

package/lib/components/forms/TMChooserForm.d.ts

@@ -1,3 +1,3 @@
 import { ITMChooserFormProps } from '../../ts';
-declare const TMChooserForm: <T>({ children, title, allowMultipleSelection, allowApplyWithZeroSelection, startWithShowOnlySelectedItems, hasShowOnlySelectedItems, allowGrouping, allowSorting, width, height, dataSource, selectedIDs, manageUseLocalizedName, hasShowId, hideRefresh, keyName, customButtons, showDefaultColumns, columns, summaryItems, convertID, customFilter, getItems, cellRenderIcon, cellRenderNameAndDesc, onChoose, onClose, onShowIdChanged }: ITMChooserFormProps<T>) => import("react/jsx-runtime").JSX.Element;
+declare const TMChooserForm: <T>({ children, title, allowMultipleSelection, allowApplyWithZeroSelection, startWithShowOnlySelectedItems, hasShowOnlySelectedItems, allowGrouping, allowSorting, width, height, dataSource, selectedIDs, manageUseLocalizedName, hasShowId, hideRefresh, keyName, customButtons, showFilterPanel, showDefaultColumns, columns, summaryItems, convertID, customFilter, getItems, cellRenderIcon, cellRenderNameAndDesc, onChoose, onClose, onShowIdChanged }: ITMChooserFormProps<T>) => import("react/jsx-runtime").JSX.Element;
 export default TMChooserForm;

package/lib/components/forms/TMChooserForm.js

@@ -8,7 +8,7 @@ import TMModal from '../base/TMModal';
 import TMLayoutContainer, { TMLayoutItem } from '../base/TMLayout';
 import { TMColors } from '../../utils/theme';
 import TMDataGrid from '../base/TMDataGrid';
-const TMChooserForm = ({ children, title, allowMultipleSelection = false, allowApplyWithZeroSelection = false, startWithShowOnlySelectedItems = true, hasShowOnlySelectedItems = false, allowGrouping, allowSorting = true, width, height, dataSource, selectedIDs, manageUseLocalizedName = true, hasShowId = true, hideRefresh = false, keyName = "id", customButtons, showDefaultColumns = true, columns = [], summaryItems, convertID, customFilter, getItems, cellRenderIcon, cellRenderNameAndDesc, onChoose, onClose, onShowIdChanged }) => {
+const TMChooserForm = ({ children, title, allowMultipleSelection = false, allowApplyWithZeroSelection = false, startWithShowOnlySelectedItems = true, hasShowOnlySelectedItems = false, allowGrouping, allowSorting = true, width, height, dataSource, selectedIDs, manageUseLocalizedName = true, hasShowId = true, hideRefresh = false, keyName = "id", customButtons, showFilterPanel = false, showDefaultColumns = true, columns = [], summaryItems, convertID, customFilter, getItems, cellRenderIcon, cellRenderNameAndDesc, onChoose, onClose, onShowIdChanged }) => {
     const [showId, setShowId] = useState(false);
     const [showOnlySelectedItems, setShowOnlySelectedItems] = useState(allowMultipleSelection && hasShowOnlySelectedItems && startWithShowOnlySelectedItems && selectedIDs != undefined && selectedIDs.length > 0);
     const [allItems, setAllItems] = useState([]);
@@ -88,7 +88,7 @@ const TMChooserForm = ({ children, title, allowMultipleSelection = false, allowA
     }, [manageUseLocalizedName, summaryItems]);
     return (_jsx(TMModal, { title: renderTitle(), width: width ?? '550px', height: height ?? '600px', toolbar: _jsx(ToolbarButtons, {}), onClose: onClose, children: children ??
             filteredItems.length > 0
-            ? _jsx(TMDataGrid, { dataSource: filteredItems, keyExpr: keyName, dataColumns: dataColumns, focusedRowKey: focusedRowKey, selectedRowKeys: selectedRowKeys, searchPanelFocusStarting: true, headerFilter: { visible: true }, selection: { mode: allowMultipleSelection ? 'multiple' : 'single', showCheckBoxesMode: 'always', selectAllMode: 'allPages' }, grouping: allowGrouping ? { autoExpandAll: false, expandMode: 'rowClick' } : undefined, summary: customSummary, onFocusedRowChanged: handleFocusedRowChange, onSelectionChanged: handleSelectionChanged, onRowDblClick: handleRowDoubleClick })
+            ? _jsx(TMDataGrid, { dataSource: filteredItems, keyExpr: keyName, dataColumns: dataColumns, focusedRowKey: focusedRowKey, selectedRowKeys: selectedRowKeys, searchPanelFocusStarting: true, headerFilter: { visible: true }, selection: { mode: allowMultipleSelection ? 'multiple' : 'single', showCheckBoxesMode: 'always', selectAllMode: 'allPages' }, grouping: allowGrouping ? { autoExpandAll: false, expandMode: 'rowClick' } : undefined, summary: customSummary, showFilterPanel: showFilterPanel, onFocusedRowChanged: handleFocusedRowChange, onSelectionChanged: handleSelectionChanged, onRowDblClick: handleRowDoubleClick })
             : _jsx(TMLayoutContainer, { gap: 30, alignItems: 'center', justifyContent: 'center', children: _jsx(TMLayoutItem, { children: _jsx("p", { style: { height: "100%", color: TMColors.primaryColor, fontSize: "1.5rem", display: 'flex', alignItems: 'center', justifyContent: 'center' }, children: SDKUI_Localizator.NoDataToDisplay }) }) }) }));
 };
 export default TMChooserForm;

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/{TMBlogs.d.ts → TMBlogsPost.d.ts}

@@ -1,36 +1,27 @@
-import React from 'react';
-import { BlogPost, HomeBlogPost, IDCount, UserDescriptor } from "@topconsultnpm/sdk-ts";
-import { TMBlogContextDescriptor } from './TMBlogsUtils';
-import { DcmtInfo } from '../../ts';
-import { FileItem } from '../base/TMFileManagerUtils';
-interface TMBlogsProps {
+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 */
-    allData: Array<BlogPost | HomeBlogPost>;
-    /** Optional flag to show extended attachments */
-    showExtendedAttachments?: boolean;
-    /** Optional flag to automatically scroll to the bottom of the list */
-    scrollToBottom?: boolean;
+    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?: {
-        /** Flag to display the view mode toggle */
-        showViewMode: boolean;
-        /** Flag to display filter options */
-        showFilters: boolean;
-        /** Flag to display the search bar */
-        showSearchBar: boolean;
-        /** Flag to display a dropdown menu for selecting posts */
-        showPostsDropDown: boolean;
-    };
-    /** Optional flag to show an icon in the component */
-    showIconHeader?: boolean;
-    /** Optional color for customizing the appearance */
-    color?: string;
+    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 */
@@ -48,14 +39,8 @@ interface TMBlogsProps {
         fileExt: string;
         fileSize: string;
     }>;
-    /** Optional callback function to update the list of visualized blog posts */
-    updateVisualizedBlogCallback?: (blogPosts: Array<BlogPost | HomeBlogPost>) => void;
-    /** Optional callback to handle navigation to working groups */
-    handleNavigateToWGs?: (selectedWorkingGroupId: number) => 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>>;
+    /** Context descriptor for the blog component */
+    context?: TMBlogContextDescriptor;
     /** Optional context menu params */
     contextMenuParams?: {
         isShowHideFilterEnabled: boolean;
@@ -69,34 +54,33 @@ interface TMBlogsProps {
         isRefreshEnabled: boolean;
         isCreateContextualTask: boolean;
     };
-    /** Optional refresh callback */
-    refreshCallback?: () => Promise<void>;
-    /** An array of partecipants */
-    participants?: Array<UserDescriptor>;
-    /** An array of new blog posts ID */
-    newPosts?: Array<IDCount>;
+    /** Optional flag to show the floating comment button (default: false) */
+    showFloatingCommentButton?: boolean;
     /** Show Comment Form Callback */
-    showCommentFormCallback?: () => void;
+    showCommentFormCallback?: (dcmt: DcmtInfo | undefined) => void;
     /** Show Task Form Callback */
     showTaskFormCallback?: () => void;
-    /** Optional Whether to enable the context menu */
-    showContextMenu?: boolean;
-    /** Optional handle attachment focus functon */
-    handleAttachmentFocus?: (attachment: DcmtInfo | undefined) => void;
-    /** Optional flag to show the floating comment button (default: false) */
-    showFloatingCommentButton?: boolean;
-    /** Context descriptor for the blog component */
-    context?: TMBlogContextDescriptor;
-    /** Optional layout mode */
-    layoutMode?: 'stacked' | 'chat';
-    /** Optional callback to mark blog as read */
-    markBlogAsRead?: (blog: BlogPost | undefined) => Promise<void>;
-    /** Flag to indicate whether the blog component should automatically select */
-    shouldSelectLastBlog?: boolean;
-    /** Updates the flag that determines if the blog component should automatically select the last blog. */
-    updateShouldSelectLastBlog?: (value: boolean) => 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;
+    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 TMBlogs: (props: TMBlogsProps) => import("react/jsx-runtime").JSX.Element;
-export default TMBlogs;
+declare const TMBlogsPost: (props: TMBlogsPostProps) => import("react/jsx-runtime").JSX.Element;
+export default TMBlogsPost;