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

package/lib/components/features/archive/TMArchive.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { HomeBlogPost, TaskDescriptor } from '@topconsultnpm/sdk-ts';
 interface ITMArchiveProps {
     inputFile?: File | null;
     inputMids?: Array<{
@@ -6,6 +7,7 @@ interface ITMArchiveProps {
         value: string;
     }>;
     inputTID?: number;
+    inputDID?: number;
     onDcmtTypeSelect?: (tid: number | undefined) => void;
     connectorFileSave?: () => Promise<File>;
     onSavedAsyncCallback?: (tid: number | undefined, did: number | undefined) => Promise<void>;
@@ -14,6 +16,14 @@ interface ITMArchiveProps {
         mid: number;
         value: string;
     }>) => void;
+    isSharedArchive?: 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 TMArchive: React.FunctionComponent<ITMArchiveProps>;
 export default TMArchive;

package/lib/components/features/archive/TMArchive.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import Logo from '../../../assets/Toppy-generico.png';
 import { DcmtTypeListCacheService, LayoutModes, SDK_Localizator } from '@topconsultnpm/sdk-ts';
 import { IconTree, SDKUI_Globals, SDKUI_Localizator, IconRecentlyViewed, IconPreview, IconShow, IconBoard, IconDcmtTypeSys, removeMruTid } from '../../../helper';
@@ -12,11 +12,14 @@ import TMTreeSelector from '../search/TMTreeSelector';
 import TMPanel from '../../base/TMPanel';
 import { TMPanelManagerProvider, useTMPanelManagerContext } from '../../layout/panelManager/TMPanelManagerContext';
 import TMPanelManagerContainer from '../../layout/panelManager/TMPanelManagerContainer';
-const TMArchive = ({ onDcmtTypeSelect = undefined, inputTID, inputFile = null, connectorFileSave = undefined, onSavedAsyncCallback, inputMids = [], enableDragDropOverlay = false, passToSearch }) => {
+const TMArchive = ({ onDcmtTypeSelect = undefined, inputTID, inputFile = null, connectorFileSave = undefined, onSavedAsyncCallback, inputMids = [], enableDragDropOverlay = false, passToSearch, isSharedArchive = false, inputDID = undefined, allTasks = [], getAllTasks, deleteTaskByIdsCallback, addTaskCallback, editTaskCallback, handleNavigateToWGs, handleNavigateToDossiers }) => {
     const [currentTID, setCurrentTID] = useState(inputTID ?? 0);
     const [mruTIDs, setMruTIDs] = useState([]);
     const [currentMruTID, setCurrentMruTID] = useState(0);
     const [fromDTD, setFromDTD] = useState();
+    const [currentInputMids, setCurrentInputMids] = useState(inputMids);
+    const previousTIDRef = React.useRef(undefined);
+    const pendingMidsRef = React.useRef(null);
     const deviceType = useDeviceType();
     useEffect(() => { setMruTIDs(SDKUI_Globals.userSettings.archivingSettings.mruTIDs); }, []);
     useEffect(() => {
@@ -24,9 +27,16 @@ const TMArchive = ({ onDcmtTypeSelect = undefined, inputTID, inputFile = null, c
             return;
         setCurrentTID(inputTID);
         setCurrentMruTID(mruTIDs.includes(inputTID) ? inputTID : 0);
-    }, [inputTID]);
+    }, [inputTID, mruTIDs]);
+    useEffect(() => {
+        pendingMidsRef.current = inputMids;
+        if (currentTID && currentTID > 0 && inputMids && inputMids.length > 0) {
+            setCurrentInputMids(inputMids);
+        }
+    }, [inputMids, currentTID]);
     useEffect(() => {
         if (!currentTID || currentTID <= 0) {
+            previousTIDRef.current = currentTID;
             return;
         }
         if (onDcmtTypeSelect)
@@ -34,31 +44,42 @@ const TMArchive = ({ onDcmtTypeSelect = undefined, inputTID, inputFile = null, c
         DcmtTypeListCacheService.GetAsync(currentTID).then(async (dtd) => {
             setFromDTD(dtd);
         });
-    }, [currentTID, onDcmtTypeSelect]);
+        if (previousTIDRef.current !== undefined && previousTIDRef.current > 0 && previousTIDRef.current !== currentTID) {
+            if (!isSharedArchive) {
+                setCurrentInputMids([]);
+            }
+            if (pendingMidsRef.current && pendingMidsRef.current.length > 0) {
+                setCurrentInputMids(pendingMidsRef.current);
+                pendingMidsRef.current = null;
+            }
+        }
+        previousTIDRef.current = currentTID;
+    }, [currentTID, onDcmtTypeSelect, isSharedArchive]);
     const isMobile = deviceType === DeviceType.MOBILE;
-    const tmTreeSelectorElement = useMemo(() => _jsx(TMTreeSelectorWrapper, { isMobile: isMobile, onSelectedTIDChanged: (tid) => {
+    const tmTreeSelectorElement = useMemo(() => _jsx(TMTreeSelectorWrapper, { isMobile: isMobile, isSharedArchive: isSharedArchive, onSelectedTIDChanged: (tid) => {
             setCurrentTID(tid);
             if (tid && mruTIDs.includes(tid))
                 setCurrentMruTID(tid);
             else
                 setCurrentMruTID(0);
-        } }), [isMobile, currentTID]);
-    const tmRecentsManagerElement = useMemo(() => _jsx(TMRecentsManagerWrapper, { mruTIDs: mruTIDs, currentTID: currentTID, currentMruTID: currentMruTID, deviceType: deviceType, onSelectedTID: (tid) => {
+        } }), [isMobile, currentTID, isSharedArchive]);
+    const tmRecentsManagerElement = useMemo(() => _jsx(TMRecentsManagerWrapper, { mruTIDs: mruTIDs, currentTID: currentTID, currentMruTID: currentMruTID, deviceType: deviceType, isSharedArchive: isSharedArchive, onSelectedTID: (tid) => {
             setCurrentMruTID(tid);
             setCurrentTID(tid);
         }, onDeletedTID: (tid) => {
             let newMruTIDS = removeMruTid(SDKUI_Globals.userSettings.archivingSettings.mruTIDs, tid);
             SDKUI_Globals.userSettings.archivingSettings.mruTIDs = newMruTIDS;
             setMruTIDs(newMruTIDS);
-        } }), [mruTIDs, currentMruTID, deviceType]);
+        } }), [mruTIDs, currentMruTID, deviceType, isSharedArchive]);
     const tmFormElement = useMemo(() => currentTID ?
-        _jsx(TMDcmtForm, { TID: currentTID, DID: undefined, groupId: 'tmForm', layoutMode: LayoutModes.Ark, onClose: deviceType === DeviceType.MOBILE ? () => setCurrentTID(undefined) : undefined, onSaveRecents: (TIDs) => setMruTIDs(TIDs), showDcmtFormSidebar: false, inputFile: inputFile, connectorFileSave: connectorFileSave, onSavedAsyncCallback: onSavedAsyncCallback, inputMids: inputMids, enableDragDropOverlay: enableDragDropOverlay, passToSearch: passToSearch ? (outputMids) => {
+        _jsx(TMDcmtForm, { TID: currentTID, DID: currentTID === inputTID ? inputDID : undefined, sharedSourceTID: isSharedArchive ? inputTID : undefined, sharedSourceDID: isSharedArchive ? inputDID : undefined, groupId: 'tmForm', layoutMode: LayoutModes.Ark, onClose: deviceType === DeviceType.MOBILE ? () => setCurrentTID(undefined) : undefined, onSaveRecents: (TIDs) => setMruTIDs(TIDs), showDcmtFormSidebar: false, inputFile: inputFile, connectorFileSave: connectorFileSave, onSavedAsyncCallback: onSavedAsyncCallback, inputMids: currentInputMids, enableDragDropOverlay: enableDragDropOverlay, passToSearch: passToSearch ? (outputMids, tid) => {
+                const tidToUse = tid ?? currentTID;
                 if (onDcmtTypeSelect)
-                    onDcmtTypeSelect(currentTID);
-                passToSearch(currentTID, outputMids);
-            } : undefined })
+                    onDcmtTypeSelect(tidToUse);
+                passToSearch(tidToUse, outputMids);
+            } : undefined, isSharedDcmt: isSharedArchive, allTasks: allTasks, getAllTasks: getAllTasks, deleteTaskByIdsCallback: deleteTaskByIdsCallback, addTaskCallback: addTaskCallback, editTaskCallback: editTaskCallback, handleNavigateToWGs: handleNavigateToWGs, handleNavigateToDossiers: handleNavigateToDossiers }, currentTID)
         :
-            _jsx(TMPanel, { title: 'Archiviazione', allowMaximize: false, children: _jsxs(TMLayoutContainer, { gap: 30, alignItems: 'center', justifyContent: 'center', children: [_jsx(StyledToppyTextContainer, { children: _jsx(StyledToppyText, { children: SDKUI_Localizator.DcmtTypeSelect }) }), _jsx(StyledToppyImage, { src: Logo, alt: 'Toppy' })] }) }), [currentTID, deviceType, mruTIDs, inputFile, inputMids]);
+            _jsx(TMPanel, { title: 'Archiviazione', allowMaximize: false, children: _jsxs(TMLayoutContainer, { gap: 30, alignItems: 'center', justifyContent: 'center', children: [_jsx(StyledToppyTextContainer, { children: _jsx(StyledToppyText, { children: SDKUI_Localizator.DcmtTypeSelect }) }), _jsx(StyledToppyImage, { src: Logo, alt: 'Toppy' })] }) }), [currentTID, deviceType, mruTIDs, inputFile, currentInputMids, enableDragDropOverlay, isSharedArchive, allTasks]);
     const allInitialPanelVisibility = {
         'tmTreeSelector': true,
         'tmRecentsManager': true,
@@ -66,13 +87,13 @@ const TMArchive = ({ onDcmtTypeSelect = undefined, inputTID, inputFile = null, c
         'tmDcmtForm': true,
         'tmBlog': false,
         'tmSysMetadata': false,
-        'tmDcmtPreview': true,
+        'tmDcmtPreview': !isSharedArchive,
     };
     const initialPanelDimensions = {
         'tmTreeSelector': { width: '20%', height: '100%' },
         'tmRecentsManager': { width: '20%', height: '100%' },
         'tmForm': { width: '60%', height: '100%' },
-        'tmDcmtForm': { width: '25%', height: '100%' },
+        'tmDcmtForm': { width: isSharedArchive ? '50%' : '25%', height: '100%' },
         'tmBlog': { width: '25%', height: '100%' },
         'tmSysMetadata': { width: '25%', height: '100%' },
         'tmDcmtPreview': { width: '25%', height: '100%' },
@@ -114,15 +135,15 @@ const TMArchive = ({ onDcmtTypeSelect = undefined, inputTID, inputFile = null, c
                 {
                     id: 'tmDcmtPreview',
                     name: SDKUI_Localizator.PreviewDocument,
-                    toolbarOptions: { icon: _jsx(IconShow, { fontSize: 24 }), visible: false, orderNumber: 7, isActive: allInitialPanelVisibility['tmDcmtPreview'] }
+                    toolbarOptions: { icon: _jsx(IconShow, { fontSize: 24 }), visible: false, disabled: isSharedArchive, orderNumber: 7, isActive: allInitialPanelVisibility['tmDcmtPreview'] }
                 }
             ]
         },
-    ], [tmTreeSelectorElement, tmRecentsManagerElement, tmFormElement, currentTID, mruTIDs]);
+    ], [tmTreeSelectorElement, tmRecentsManagerElement, tmFormElement, currentTID, mruTIDs, isSharedArchive]);
     return (_jsx(TMPanelManagerProvider, { panels: initialPanels, initialVisibility: allInitialPanelVisibility, defaultDimensions: initialPanelDimensions, initialDimensions: initialPanelDimensions, initialMobilePanelId: 'tmRecentsManager', children: _jsx(TMPanelManagerContainer, { panels: initialPanels, direction: "horizontal", showToolbar: true }) }));
 };
 export default TMArchive;
-const TMTreeSelectorWrapper = ({ isMobile, onSelectedTIDChanged }) => {
+const TMTreeSelectorWrapper = ({ isMobile, isSharedArchive, onSelectedTIDChanged }) => {
     const { setPanelVisibilityById, toggleMaximize, setToolbarButtonVisibility, countVisibleLeafPanels } = useTMPanelManagerContext();
     return (_jsx(TMTreeSelector, { layoutMode: LayoutModes.Ark, onClosePanel: !isMobile && countVisibleLeafPanels() > 1 ? () => setPanelVisibilityById('tmTreeSelector', false) : undefined, allowMaximize: !isMobile && countVisibleLeafPanels() > 1, onMaximizePanel: !isMobile && countVisibleLeafPanels() > 1 ? () => toggleMaximize("tmTreeSelector") : undefined, onSelectedTIDChanged: (tid) => {
             onSelectedTIDChanged?.(tid);
@@ -130,21 +151,27 @@ const TMTreeSelectorWrapper = ({ isMobile, onSelectedTIDChanged }) => {
                 setPanelVisibilityById('tmDcmtForm', true);
             else {
                 setPanelVisibilityById('tmDcmtForm', true);
-                setPanelVisibilityById('tmDcmtPreview', true);
+                if (!isSharedArchive) {
+                    setPanelVisibilityById('tmDcmtPreview', true);
+                }
+            }
+            if (!isSharedArchive) {
+                setToolbarButtonVisibility('tmDcmtPreview', true);
             }
-            setToolbarButtonVisibility('tmDcmtPreview', true);
             setToolbarButtonVisibility('tmDcmtForm', true);
         } }));
 };
-const TMRecentsManagerWrapper = ({ mruTIDs, currentTID, currentMruTID, deviceType, onSelectedTID, onDeletedTID }) => {
+const TMRecentsManagerWrapper = ({ mruTIDs, currentTID, currentMruTID, deviceType, isSharedArchive, onSelectedTID, onDeletedTID }) => {
     const { setPanelVisibilityById, setToolbarButtonVisibility } = useTMPanelManagerContext();
     useEffect(() => {
         if (currentTID) {
             setPanelVisibilityById('tmDcmtForm', true);
-            setToolbarButtonVisibility('tmDcmtPreview', true);
+            if (!isSharedArchive) {
+                setToolbarButtonVisibility('tmDcmtPreview', true);
+            }
             setToolbarButtonVisibility('tmDcmtForm', true);
         }
-    }, [currentTID]);
+    }, [currentTID, isSharedArchive]);
     return (_jsx(TMRecentsManager, { accessFilter: 'canArchive', mruTIDs: mruTIDs, currentMruTID: currentMruTID, deviceType: deviceType, onSelectedTID: (tid) => {
             onSelectedTID?.(tid);
             if (deviceType === DeviceType.MOBILE) {
@@ -152,9 +179,13 @@ const TMRecentsManagerWrapper = ({ mruTIDs, currentTID, currentMruTID, deviceTyp
             }
             else {
                 setPanelVisibilityById('tmDcmtForm', true);
-                setPanelVisibilityById('tmDcmtPreview', true);
+                if (!isSharedArchive) {
+                    setPanelVisibilityById('tmDcmtPreview', true);
+                }
+            }
+            if (!isSharedArchive) {
+                setToolbarButtonVisibility('tmDcmtPreview', true);
             }
-            setToolbarButtonVisibility('tmDcmtPreview', true);
             setToolbarButtonVisibility('tmDcmtForm', true);
         }, onDeletedTID: (tid) => {
             onDeletedTID?.(tid);

package/lib/components/features/blog/TMBlogCommentForm.d.ts

@@ -1,17 +1,17 @@
-import { UserDescriptor } from "@topconsultnpm/sdk-ts";
-import { TMBlogContextDescriptor } from '../../grids/TMBlogsUtils';
+import { BlogPost, UserDescriptor } from "@topconsultnpm/sdk-ts";
 import { FileItem } from '../../base/TMFileManagerUtils';
+import { TMBlogContextDescriptor } from '../../grids/TMBlogsPostUtils';
 interface TMBlogCommentFormProps {
     context: TMBlogContextDescriptor;
     participants: Array<UserDescriptor>;
     onClose: () => void;
-    refreshCallback: () => Promise<void>;
     showAttachmentsSection?: boolean;
     selectedAttachments?: Array<FileItem>;
     selectedAttachmentDid?: Array<number>;
     allFileItems?: FileItem;
     allArchivedDocumentsFileItems?: Array<FileItem>;
-    updateShouldSelectLastBlog?: (value: boolean) => void;
+    onFilterCreated?: (predicate: (post: BlogPost) => boolean) => void;
+    refreshCallback?: () => Promise<void>;
 }
 declare const TMBlogCommentForm: (props: TMBlogCommentFormProps) => import("react/jsx-runtime").JSX.Element;
 export default TMBlogCommentForm;

package/lib/components/features/blog/TMBlogCommentForm.js

@@ -10,7 +10,7 @@ import { TMExceptionBoxManager, TMMessageBoxManager, ButtonNames } from '../../b
 import TMSpinner from '../../base/TMSpinner';
 import TMTooltip from '../../base/TMTooltip';
 import TMUserAvatar from '../../base/TMUserAvatar';
-import TMHtmlEditor from '../../editors/TMHtmlEditor';
+import TMHtmlEditor, { sanitizeAndFormatComment } from '../../editors/TMHtmlEditor';
 import TMChooserForm from '../../forms/TMChooserForm';
 import TMSaveForm from '../../forms/TMSaveForm';
 const getNonDirectoryFiles = (items, exclude) => {
@@ -28,7 +28,8 @@ const getNonDirectoryFiles = (items, exclude) => {
     });
 };
 const TMBlogCommentForm = (props) => {
-    const { participants, selectedAttachments, selectedAttachmentDid, allFileItems, allArchivedDocumentsFileItems = [], onClose, refreshCallback, context, showAttachmentsSection = true, updateShouldSelectLastBlog } = props;
+    const maxLength = 1000;
+    const { participants, selectedAttachments, selectedAttachmentDid, allFileItems, allArchivedDocumentsFileItems = [], onClose, context, showAttachmentsSection = true, onFilterCreated, refreshCallback } = props;
     // Initialize state with combined array
     const [dataSource, setDataSource] = useState(() => [...getNonDirectoryFiles(allFileItems?.items || [], []), ...allArchivedDocumentsFileItems]);
     const [isEditorEnabled, setIsEditorEnabled] = useState(true);
@@ -39,14 +40,18 @@ const TMBlogCommentForm = (props) => {
     const validator = async (params) => {
         let vil = [];
         const { comment } = params;
+        const cleanedMarkup = sanitizeAndFormatComment(comment);
         // Check for empty comment
-        if (!comment || comment.trim() === "") {
+        if (!cleanedMarkup || cleanedMarkup.trim() === "") {
             vil.push(new ValidationItem(ResultTypes.ERROR, SDKUI_Localizator.Comment, `${SDK_Localizator.RequiredField}`));
         }
         else {
-            // Validate description length (max 500)
-            if (comment.length > 500) {
-                vil.push(new ValidationItem(ResultTypes.ERROR, SDKUI_Localizator.Comment, `${SDKUI_Localizator.DescriptionTooLongMessage.replaceParams(500)}`));
+            // Calcola la lunghezza effettiva del commento inserito
+            const commentLength = cleanedMarkup.length;
+            const exceededChars = commentLength - maxLength;
+            // Validate description length (max 1000)
+            if (commentLength > maxLength) {
+                vil.push(new ValidationItem(ResultTypes.ERROR, SDKUI_Localizator.Comment, `${SDKUI_Localizator.DescriptionLengthExceededMessage.replaceParams(exceededChars)}`));
             }
             // Detect dangerous HTML tags
             const tagRegex = /<\/?(script|iframe|embed|object|link|style|img|video|audio|svg|form|input|button|textarea|select|pre|function)[^>]*>/gi;
@@ -108,20 +113,8 @@ const TMBlogCommentForm = (props) => {
             const blogPost = new BlogPost();
             // Retrieve the comment from formData, or use an empty string if undefined 
             const comment = formData?.comment ?? "";
-            // Clean the comment by removing <p> tags and replacing </p> with line breaks
-            let cleanComment = comment
-                // Replace </p> with '' only if followed by <ol> or <ul>
-                .replace(/<\/p>(?=\s*<(ol|ul)>)/gi, '')
-                // Replace all other </p> with '\r\n'
-                .replace(/<\/p>/gi, '\r\n')
-                // Remove all <p> tags
-                .replace(/<p>/gi, '')
-                // Remove all <br> tags
-                .replace(/<br>/gi, '')
-                // Trim whitespace
-                .trim();
-            // Validate and remove any potentially dangerous HTML tags (like <script>, <iframe>, etc.)
-            cleanComment = cleanComment.replace(/<(script|iframe|embed|object|link|style|img|video|audio|svg|form|input|button|textarea|select|pre|function)[^>]*>/gi, '');
+            // Clean the comment using the sanitizeAndFormatComment function
+            const cleanComment = sanitizeAndFormatComment(comment);
             // Assign the cleaned comment as the description for the blog post
             blogPost.description = cleanComment ?? "";
             // If there are file items (attachments), process them
@@ -143,23 +136,32 @@ const TMBlogCommentForm = (props) => {
                 // Create an instance of WorkingGroupEngine to interact with the working group
                 const workingGroupEngine = new WorkingGroupEngine(SDK_Globals.tmSession);
                 // Call the BlogPostAddAsync method to add the blog post to the working group
-                await workingGroupEngine.BlogPostAddAsync(context.object.id, blogPost);
-                await refreshCallback();
-                updateShouldSelectLastBlog?.(true);
+                const newBlogPostId = await workingGroupEngine.BlogPostAddAsync(context.object.id, blogPost);
+                await refreshCallback?.();
+                if (newBlogPostId && onFilterCreated) {
+                    onFilterCreated(post => post.id === newBlogPostId);
+                }
+                ;
             }
             else if (context.engine === 'SearchEngine') {
                 // Create an instance of SearchEngine
                 const searchEngine = SDK_Globals.tmSession?.NewSearchEngine();
-                await searchEngine.BlogPostAddAsync(context.object.tid, context.object.did, cleanComment);
-                await refreshCallback();
-                setTimeout(() => updateShouldSelectLastBlog?.(true), 300);
+                const newBlogPostId = await searchEngine.BlogPostAddAsync(context.object.tid, context.object.did, cleanComment);
+                await refreshCallback?.();
+                if (newBlogPostId && onFilterCreated) {
+                    onFilterCreated(post => post.id === newBlogPostId);
+                }
+                ;
             }
             else if (context.engine === 'DossierEngine' && context.object && context.object.id) {
                 // Create an instance of DossierEngine
                 const dossierEngine = SDK_Globals.tmSession?.NewDossierEngine();
-                await dossierEngine.BlogPostAddAsync(context.object.id, blogPost);
-                await refreshCallback();
-                setTimeout(() => updateShouldSelectLastBlog?.(true), 300);
+                const newBlogPostId = await dossierEngine.BlogPostAddAsync(context.object.id, blogPost);
+                await refreshCallback?.();
+                if (newBlogPostId && onFilterCreated) {
+                    onFilterCreated(post => post.id === newBlogPostId);
+                }
+                ;
             }
         }
         catch (e) {
@@ -214,7 +216,7 @@ const TMBlogCommentForm = (props) => {
         // Update the state with selected draft items
         setCurrentDraftAttachments(selectedDraftItems);
     };
-    return _jsx(TMSaveForm, { id: 1, title: SDKUI_Localizator.AddNewComment, showTitleFormMode: false, showErrorCount: false, customSaveButton: _jsx("i", { className: 'dx-icon-send' }), customTooltipSaveButton: SDKUI_Localizator.Send, showUndoButton: false, hasNavigation: false, skipIsModifiedCheck: true, isModal: true, width: calcResponsiveSizes(deviceType, '800px', '800px', '95%'), height: '550px', formMode: FormModes.Create, validationItems: validationItems, exception: exception, isModified: calcIsModified(formData, formDataOrig), onSaveAsync: onSaveAsync, onClose: onCloseCallback, customToolbarElements: _jsx("div", { style: { display: 'flex', gap: '2px' }, children: _jsx(TMButton, { btnStyle: "toolbar", icon: isEditorEnabled ? _jsx("i", { className: 'dx-icon-font' }) : _jsx("i", { className: 'dx-icon-background' }), caption: isEditorEnabled ? SDKUI_Localizator.HideFormattingOptions : SDKUI_Localizator.ShowFormattingOptions, onClick: toggleEditorMode }) }), children: _jsxs("div", { style: { width: "100%", height: "100%" }, children: [_jsxs("div", { style: { width: "100%", height: "100%" }, children: [_jsx("div", { style: { width: "100%", height: showAttachmentsSection ? "calc(100% - 60px)" : "100%" }, children: _jsx(TMHtmlEditor, { width: '100%', height: '100%', isEditorEnabled: isEditorEnabled, validationItems: validationItems, onValueChanged: onValueChanged, mentionsConfig: mentionsConfig, autoFocus: true }) }), showAttachmentsSection && _jsxs("div", { style: { display: 'flex', alignItems: 'center', height: '60px', marginTop: '10px' }, children: [_jsx("div", { style: {
+    return _jsx(TMSaveForm, { id: 1, title: SDKUI_Localizator.AddNewComment, showTitleFormMode: false, showErrorCount: false, customSaveButton: _jsx("i", { className: 'dx-icon-send' }), customTooltipSaveButton: SDKUI_Localizator.Send, showUndoButton: false, hasNavigation: false, skipIsModifiedCheck: true, isModal: true, width: calcResponsiveSizes(deviceType, '800px', '800px', '95%'), height: '550px', formMode: FormModes.Create, validationItems: validationItems, exception: exception, isModified: calcIsModified(formData, formDataOrig), onSaveAsync: onSaveAsync, onClose: onCloseCallback, customToolbarElements: _jsx("div", { style: { display: 'flex', gap: '2px' }, children: _jsx(TMButton, { btnStyle: "toolbar", icon: isEditorEnabled ? _jsx("i", { className: 'dx-icon-font' }) : _jsx("i", { className: 'dx-icon-background' }), caption: isEditorEnabled ? SDKUI_Localizator.HideFormattingOptions : SDKUI_Localizator.ShowFormattingOptions, onClick: toggleEditorMode }) }), children: _jsxs("div", { style: { width: "100%", height: "100%" }, children: [_jsxs("div", { style: { width: "100%", height: "100%" }, children: [_jsx("div", { style: { width: "100%", height: showAttachmentsSection ? "calc(100% - 60px)" : "100%" }, children: _jsx(TMHtmlEditor, { width: '100%', height: '100%', isEditorEnabled: isEditorEnabled, validationItems: validationItems, onValueChanged: onValueChanged, mentionsConfig: mentionsConfig, autoFocus: true, maxLength: maxLength }) }), showAttachmentsSection && _jsxs("div", { style: { display: 'flex', alignItems: 'center', height: '60px', marginTop: '10px' }, children: [_jsx("div", { style: {
                                         width: 'calc(100% - 60px)',
                                         overflowX: 'auto',
                                         whiteSpace: 'nowrap',
@@ -229,14 +231,22 @@ const TMBlogCommentForm = (props) => {
                                         const tooltipContent = (_jsxs("div", { style: { textAlign: 'left' }, children: [_jsxs("div", { children: [_jsxs("span", { style: { fontWeight: 'bold' }, children: [SDKUI_Localizator.Name, ":"] }), " ", draft.name ?? '-'] }), _jsxs("div", { children: [_jsxs("span", { style: { fontWeight: 'bold' }, children: [SDKUI_Localizator.Author, ":"] }), " ", draft.updaterName ?? '-'] }), _jsx("hr", {}), _jsxs("div", { children: [_jsxs("span", { style: { fontWeight: 'bold' }, children: [SDKUI_Localizator.Version, ":"] }), " ", draft.version] }), _jsxs("div", { children: [_jsxs("span", { style: { fontWeight: 'bold' }, children: [SDKUI_Localizator.Size, ":"] }), " ", formatBytes(draft.size ?? 0)] }), _jsx("hr", {}), _jsxs("div", { children: [_jsxs("span", { style: { fontWeight: 'bold' }, children: [SDKUI_Localizator.CreationTime, ":"] }), " ", Globalization.getDateTimeDisplayValue(draft.creationTime)] }), _jsxs("div", { children: [_jsxs("span", { style: { fontWeight: 'bold' }, children: [SDKUI_Localizator.LastUpdateTime, ":"] }), " ", Globalization.getDateTimeDisplayValue(draft.lastUpdateTime)] })] }));
                                         return _jsxs("div", { style: {
                                                 display: 'inline-flex',
-                                                alignItems: 'center',
-                                                padding: '8px 12px',
-                                                marginRight: '8px',
+                                                alignItems: 'center', // <-- this centers content vertically
+                                                padding: '4px 8px',
+                                                margin: '4px',
                                                 border: '1px solid #ddd',
                                                 borderRadius: '8px',
+                                                boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)',
+                                                cursor: 'pointer',
+                                                fontSize: '0.9rem',
                                                 backgroundColor: '#fff',
-                                                boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
-                                            }, children: [draft.ext ? (_jsx("span", { style: { marginRight: '10px' }, children: getFileIcon(draft.ext, undefined, tooltipContent) })) : (_jsx(IconAttachment, { style: { marginRight: '5px' } })), _jsx("span", { style: { marginRight: '8px' }, children: draft.name }), draft.version && _jsx("span", { style: {
+                                            }, onMouseEnter: (e) => {
+                                                e.currentTarget.style.boxShadow = '0 4px 8px rgba(0, 0, 0, 0.15)';
+                                                e.currentTarget.style.backgroundColor = '#cfcfcf';
+                                            }, onMouseLeave: (e) => {
+                                                e.currentTarget.style.boxShadow = '0 2px 4px rgba(0, 0, 0, 0.1)';
+                                                e.currentTarget.style.backgroundColor = '#fff';
+                                            }, children: [draft.ext ? (_jsx("span", { style: { marginRight: '10px', display: 'flex', alignItems: 'center' }, children: getFileIcon(draft.ext, undefined, tooltipContent) })) : (_jsx(IconAttachment, { style: { marginRight: '5px' } })), _jsx("span", { style: { marginRight: '8px', display: 'flex', alignItems: 'center' }, children: draft.name }), draft.version && (_jsx("span", { style: {
                                                         display: 'inline-flex',
                                                         width: '20px',
                                                         height: '20px',
@@ -248,7 +258,7 @@ const TMBlogCommentForm = (props) => {
                                                         fontWeight: 'bold',
                                                         marginRight: '8px',
                                                         boxShadow: '1px 1px 2px #00000020',
-                                                    }, children: _jsx(TMTooltip, { content: SDKUI_Localizator.Version, children: draft.version }) }), _jsx(TMTooltip, { content: SDKUI_Localizator.RemoveAttachment, children: _jsx("span", { onClick: () => removeAttachment(draft), style: {
+                                                    }, children: _jsx(TMTooltip, { content: SDKUI_Localizator.Version, children: draft.version }) })), _jsx(TMTooltip, { content: SDKUI_Localizator.RemoveAttachment, children: _jsx("span", { onClick: () => removeAttachment(draft), style: {
                                                             display: 'inline-flex',
                                                             width: '20px',
                                                             height: '20px',
@@ -259,21 +269,36 @@ const TMBlogCommentForm = (props) => {
                                                             borderRadius: '30px',
                                                             cursor: 'pointer',
                                                             boxShadow: '1px 1px 2px #00000020',
-                                                        }, children: _jsx("span", { style: { fontSize: "15px" }, children: "\u00D7" }) }) })] }, draft.did);
-                                    })) : (_jsx("div", { style: { color: '#999', width: '100%', textAlign: 'center' }, children: SDKUI_Localizator.NoAttachments })) }), _jsx(TMTooltip, { content: SDKUI_Localizator.Attachments, children: _jsx("i", { className: "dx-icon-attach", style: {
-                                            width: '50px',
-                                            height: '50px',
-                                            marginLeft: '10px',
-                                            fontSize: '20px',
-                                            cursor: 'pointer',
-                                            border: '1px solid #ccc',
-                                            borderRadius: '8px',
-                                            backgroundColor: '#f9f9f9',
-                                            display: 'flex',
-                                            alignItems: 'center',
-                                            justifyContent: 'center',
-                                            transition: 'all 0.2s ease-in-out',
-                                        }, onMouseOver: (e) => (e.currentTarget.style.backgroundColor = '#e6f7ff'), onMouseOut: (e) => (e.currentTarget.style.backgroundColor = '#f9f9f9'), onClick: () => setShowAttachmentsForm(true) }) })] })] }), showAttachmentsForm && _jsx(TMAttachmentsView, { dataSource: dataSource, selectedIDs: currentDraftAttachments.map(draft => draft.id), onChoose: onChoose, onClose: () => setShowAttachmentsForm(false) })] }) });
+                                                        }, children: _jsx("span", { style: { fontSize: '15px' }, children: "\u00D7" }) }) })] }, draft.did);
+                                    })) : (_jsx("div", { style: { color: '#999', width: '100%', textAlign: 'center' }, children: SDKUI_Localizator.NoAttachments })) }), _jsx(TMTooltip, { content: SDKUI_Localizator.Attachments + ": " + currentDraftAttachments.length, children: _jsxs("div", { style: { position: 'relative', display: 'inline-block' }, children: [_jsx("i", { className: "dx-icon-attach", style: {
+                                                    width: '50px',
+                                                    height: '50px',
+                                                    marginLeft: '10px',
+                                                    fontSize: '20px',
+                                                    cursor: 'pointer',
+                                                    border: '1px solid #ccc',
+                                                    borderRadius: '8px',
+                                                    backgroundColor: '#f9f9f9',
+                                                    display: 'flex',
+                                                    alignItems: 'center',
+                                                    justifyContent: 'center',
+                                                    transition: 'all 0.2s ease-in-out',
+                                                }, onMouseOver: (e) => (e.currentTarget.style.backgroundColor = '#e6f7ff'), onMouseOut: (e) => (e.currentTarget.style.backgroundColor = '#f9f9f9'), onClick: () => setShowAttachmentsForm(true) }), currentDraftAttachments.length > 0 && (_jsx("span", { style: {
+                                                    position: 'absolute',
+                                                    top: '-5px',
+                                                    right: '-5px',
+                                                    backgroundColor: '#203E5A',
+                                                    color: 'white',
+                                                    borderRadius: '50%',
+                                                    minWidth: '20px',
+                                                    height: '20px',
+                                                    display: 'flex',
+                                                    alignItems: 'center',
+                                                    justifyContent: 'center',
+                                                    padding: '0 6px',
+                                                    fontSize: '12px',
+                                                    fontWeight: 'bold',
+                                                }, children: currentDraftAttachments.length > 99 ? '99+' : currentDraftAttachments.length }))] }) })] })] }), showAttachmentsForm && _jsx(TMAttachmentsView, { dataSource: dataSource, selectedIDs: currentDraftAttachments.map(draft => draft.id), onChoose: onChoose, onClose: () => setShowAttachmentsForm(false) })] }) });
 };
 export default TMBlogCommentForm;
 const TMAttachmentsView = (props) => {

package/lib/components/features/documents/TMDcmtBlog.d.ts

@@ -1,8 +1,23 @@
 import React from 'react';
+import { HomeBlogPost, TaskDescriptor } from '@topconsultnpm/sdk-ts';
 interface ITMDcmtBlogProps {
+    blogsDatasource: HomeBlogPost[];
+    setBlogsDatasource: (posts: HomeBlogPost[]) => void;
+    hasLoadedDataOnce: boolean;
+    setHasLoadedDataOnce: (loaded: boolean) => void;
+    lastLoadedDid: number | undefined;
+    setLastLoadedDid: (did: number | undefined) => void;
     tid: number | undefined;
     did: number | undefined;
+    fetchBlogDataAsync: (tid: number | undefined, did: number | undefined) => Promise<void>;
     isVisible?: 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 TMDcmtBlog: React.FC<ITMDcmtBlogProps>;
 export default TMDcmtBlog;

package/lib/components/features/documents/TMDcmtBlog.js

@@ -2,39 +2,17 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useState } from 'react';
 import styled from 'styled-components';
 import { SDK_Globals } from '@topconsultnpm/sdk-ts';
-import { TMExceptionBoxManager } from '../../base/TMPopUp';
-import TMSpinner from '../../base/TMSpinner';
-import TMBlogs from '../../grids/TMBlogs';
 import { TMNothingToShow } from './TMDcmtPreview';
 import { IconBoard, SDKUI_Localizator } from '../../../helper';
 import TMBlogCommentForm from '../blog/TMBlogCommentForm';
-const TMDcmtBlog = ({ tid, did, isVisible }) => {
-    const [blogsDatasource, setBlogsDatasource] = useState([]);
-    const [hasLoadedDataOnce, setHasLoadedDataOnce] = useState(false); //traccia se *qualsiasi* dato è stato caricato per la prima volta
-    const [lastLoadedDid, setLastLoadedDid] = useState(undefined); // `lastLoadedDid` tiene traccia dell'ultimo `did` per cui abbiamo caricato i dati
+import TMBlogsPost from '../../grids/TMBlogsPost';
+const TMDcmtBlog = ({ blogsDatasource, setBlogsDatasource, hasLoadedDataOnce, setHasLoadedDataOnce, lastLoadedDid, setLastLoadedDid, tid, did, fetchBlogDataAsync, isVisible, allTasks = [], getAllTasks, deleteTaskByIdsCallback, addTaskCallback, editTaskCallback, handleNavigateToWGs, handleNavigateToDossiers }) => {
     // State to manage show comment form selected file
     const [showCommentForm, setShowCommentForm] = useState(false);
-    // Flag to determine if the last blog should be automatically selected (after a new blog is added)
-    const [shouldSelectLastBlog, setShouldSelectLastBlog] = useState(false);
+    const [externalBlogPost, setExternalBlogPost] = useState(undefined);
     const showCommentFormCallback = useCallback(() => {
         setShowCommentForm(true);
     }, []);
-    const fetchDataAsync = async (tid, did) => {
-        try {
-            TMSpinner.show({ description: 'Caricamento - Bacheca...' });
-            const res = await SDK_Globals.tmSession?.NewSearchEngine().BlogRetrieveAsync(tid, did);
-            setBlogsDatasource(res ?? []);
-            setHasLoadedDataOnce(true);
-            setLastLoadedDid(did);
-        }
-        catch (e) {
-            let err = e;
-            TMExceptionBoxManager.show({ exception: err });
-        }
-        finally {
-            TMSpinner.hide();
-        }
-    };
     useEffect(() => {
         if (!tid || !did) {
             setBlogsDatasource([]);
@@ -48,17 +26,27 @@ const TMDcmtBlog = ({ tid, did, isVisible }) => {
         // Esegui la chiamata API solo se il pannello è visibile E i dati non sono già stati caricati
         // O, se vuoi ricaricare ogni volta che diventa visibile (ma è meno efficiente per "pesante")
         if (shouldFetch) {
-            fetchDataAsync(tid, did);
+            fetchBlogDataAsync(tid, did);
         }
     }, [tid, did, isVisible, hasLoadedDataOnce, lastLoadedDid]);
-    const updateShouldSelectLastBlog = (value) => {
-        setShouldSelectLastBlog(value);
-    };
     const refreshCallback = async () => {
-        await fetchDataAsync(tid, did);
+        await fetchBlogDataAsync(tid, did);
+    };
+    const resetExternalBlogPost = useCallback(() => {
+        setExternalBlogPost(undefined);
+    }, []);
+    const handleFilterCreated = async (predicate) => {
+        await refreshCallback();
+        const res = await SDK_Globals.tmSession?.NewSearchEngine().BlogRetrieveAsync(tid, did);
+        if (res && res.length > 0) {
+            setBlogsDatasource(res ?? []);
+            const firstMatchingPost = res.find(predicate);
+            if (firstMatchingPost)
+                setExternalBlogPost(firstMatchingPost);
+        }
     };
     return (_jsxs("div", { style: { width: '100%', height: '100%' }, children: [_jsx(StyledContainer, { children: _jsx(StyledSectionContainer, { style: { position: 'relative' }, children: _jsx(StyledBoardContainer, { children: !did ? _jsx(TMNothingToShow, { text: `${SDKUI_Localizator.NoDcmtSelected}.`, secondText: `${SDKUI_Localizator.BlogCase} - ${SDKUI_Localizator.NotAvailable}`, icon: _jsx(IconBoard, { fontSize: 96 }) }) :
-                            _jsx(TMBlogs, { context: { engine: 'SearchEngine', object: { tid, did } }, id: "dcmt-blog", allData: blogsDatasource, showExtendedAttachments: false, showFloatingCommentButton: true, showCommentFormCallback: showCommentFormCallback, refreshCallback: refreshCallback, contextMenuParams: {
+                            _jsx(TMBlogsPost, { context: { engine: 'SearchEngine', object: { tid, did } }, id: "dcmt-blog", displayMode: 'chat', scrollToSelected: true, posts: blogsDatasource, showExtendedAttachments: false, showFloatingCommentButton: true, showCommentFormCallback: showCommentFormCallback, refreshCallback: refreshCallback, contextMenuParams: {
                                     isShowHideFilterEnabled: true,
                                     isShowHideIDEnaled: true,
                                     isCommentEnabled: true,
@@ -69,9 +57,9 @@ const TMDcmtBlog = ({ tid, did, isVisible }) => {
                                     isRefreshEnabled: true,
                                     isRestoreEnabled: true,
                                     isCreateContextualTask: false
-                                }, layoutMode: 'chat', shouldSelectLastBlog: shouldSelectLastBlog, updateShouldSelectLastBlog: updateShouldSelectLastBlog }) }) }) }), (showCommentForm && tid && did) && _jsx(TMBlogCommentForm, { context: { engine: 'SearchEngine', object: { tid, did } }, onClose: () => setShowCommentForm(false), refreshCallback: refreshCallback, participants: [], showAttachmentsSection: false, updateShouldSelectLastBlog: updateShouldSelectLastBlog, allArchivedDocumentsFileItems: [] })] }));
+                                }, externalBlogPost: externalBlogPost, resetExternalBlogPost: resetExternalBlogPost, allTasks: allTasks, getAllTasks: getAllTasks, deleteTaskByIdsCallback: deleteTaskByIdsCallback, addTaskCallback: addTaskCallback, editTaskCallback: editTaskCallback, handleNavigateToWGs: handleNavigateToWGs, handleNavigateToDossiers: handleNavigateToDossiers }) }) }) }), (showCommentForm && tid && did) && _jsx(TMBlogCommentForm, { context: { engine: 'SearchEngine', object: { tid, did } }, onClose: () => setShowCommentForm(false), refreshCallback: refreshCallback, participants: [], showAttachmentsSection: false, allArchivedDocumentsFileItems: [], onFilterCreated: handleFilterCreated })] }));
 };
 export default TMDcmtBlog;
 const StyledContainer = styled.div ` user-select: none; overflow: hidden; background-color: #ffffff; width: calc(100%); height: calc(100%); display: flex; gap: 10px; `;
 const StyledSectionContainer = styled.div ` width:  100%; height: 100%; display:flex; flex-direction: column; `;
-const StyledBoardContainer = styled.div `width: 100%; height: 100%; padding: 10px;`;
+const StyledBoardContainer = styled.div `width: 100%; height: 100%;`;

package/lib/components/features/documents/TMDcmtForm.d.ts

@@ -1,7 +1,14 @@
 import React from 'react';
-import { LayoutModes, SearchResultDescriptor, TaskDescriptor } from '@topconsultnpm/sdk-ts';
-import { DcmtInfo, FormModes, TaskContext } from '../../../ts';
+import { HomeBlogPost, LayoutModes, ObjectRef, SearchResultDescriptor, TaskDescriptor, ValidationItem } from '@topconsultnpm/sdk-ts';
+import { DcmtInfo, FormModes, MetadataValueDescriptorEx, TaskContext } from '../../../ts';
 interface ITMDcmtFormProps {
+    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>;
     TID?: number;
     DID?: number;
     layoutMode?: LayoutModes;
@@ -20,6 +27,7 @@ interface ITMDcmtFormProps {
     invokedByTodo?: boolean;
     taskFormDialogComponent?: React.ReactNode;
     taskMoreInfo?: TaskDescriptor;
+    showBackButton?: boolean;
     onNext?: () => void;
     onPrev?: () => void;
     onClose?: () => void;
@@ -44,7 +52,13 @@ interface ITMDcmtFormProps {
     passToSearch?: (outputMids: Array<{
         mid: number;
         value: string;
-    }>) => void;
+    }>, tid?: number) => void;
+    isSharedDcmt?: boolean;
+    sharedSourceTID?: number;
+    sharedSourceDID?: number;
+    allowButtonsRefs?: boolean;
+    onReferenceClick?: (ref: ObjectRef) => void;
 }
 declare const TMDcmtForm: React.FC<ITMDcmtFormProps>;
 export default TMDcmtForm;
+export declare const validateMetadataList: (mvdList?: MetadataValueDescriptorEx[]) => ValidationItem[];