@topconsultnpm/sdkui-react-beta 6.12.110 → 6.12.112

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

@@ -23,7 +23,6 @@ const TMDcmtPreview = ({ dcmtData, onClose, canNext, canPrev, onNext, onPrev })
     const [error, setError] = useState('');
     const { abortController, showWaitPanel, waitPanelTitle, showPrimary, waitPanelTextPrimary, waitPanelValuePrimary, waitPanelMaxValuePrimary, showSecondary, waitPanelTextSecondary, waitPanelValueSecondary, waitPanelMaxValueSecondary, getDcmtFileAsync, clearDcmtsFileCache, removeDcmtsFileCache, isDcmtFileInCache } = useDcmtOperations();
     const cacheKey = dcmtData ? `${dcmtData.tid}-${dcmtData.did}` : '00';
-    const FILE_SIZE_LIMIT = 500000;
     useEffect(() => {
         setDcmtBlob(undefined);
         setError('');
@@ -34,7 +33,7 @@ const TMDcmtPreview = ({ dcmtData, onClose, canNext, canPrev, onNext, onPrev })
             setShowPreview(true);
             return;
         }
-        if ((extensionHandler(dcmtData.fileExt) !== FileExtensionHandler.NONE) && ((dcmtData.fileSize ?? 0) <= FILE_SIZE_LIMIT)) {
+        if ((extensionHandler(dcmtData.fileExt) !== FileExtensionHandler.NONE) && ((dcmtData.fileSize ?? 0) <= SDKUI_Globals.userSettings.searchSettings.previewThreshold)) {
             loadDocumentWithCache();
             setShowPreview(true);
         }

package/lib/components/features/search/TMSearch.js

@@ -158,7 +158,7 @@ const TMSearch = ({ inputTID, inputSqdID, onRefreshAfterAddDcmtToFavs, onTaskCre
                                                             newMruTIDS.splice(index, 1);
                                                         SDKUI_Globals.userSettings.searchSettings.mruTIDs = newMruTIDS.filter(tid => tid != undefined && tid != null);
                                                         setMruTIDs(newMruTIDS);
-                                                    } }) }), _jsx(TMSearchQueryPanel, { fromDTD: fromDTD, SQD: currentSQD, isOpenDistinctValuesPanel: showDistinctValuesPanel, rightSidebarItems: rightSidebarItems, onFocusedMetadataChanged: setFocusedTidMid, onRightSidebarItemClick: rightSidebarItemClickHandler, onCloseDistinctValuesPanel: () => setShowDistinctValuesPanel(false), onSearchCompleted: (searchResult, qd) => {
+                                                    } }) }), _jsx(TMSearchQueryPanel, { fromDTD: fromDTD, SQD: currentSQD, isOpenDistinctValuesPanel: showDistinctValuesPanel, rightSidebarItems: rightSidebarItems, onBack: deviceType !== DeviceType.DESKTOP ? () => { setCurrentTID(0); } : undefined, onFocusedMetadataChanged: setFocusedTidMid, onRightSidebarItemClick: rightSidebarItemClickHandler, onCloseDistinctValuesPanel: () => setShowDistinctValuesPanel(false), onSearchCompleted: (searchResult, qd) => {
                                                     setSearchResult(searchResult);
                                                     if (searchResult.length <= 0)
                                                         return;

package/lib/components/features/search/TMSearchQueryPanel.d.ts

@@ -7,6 +7,7 @@ interface ITMSearchQueryPanelProps {
     SQD?: SavedQueryDescriptor;
     isOpenDistinctValuesPanel?: boolean;
     rightSidebarItems?: ITMRightSidebarItem[];
+    onBack?: () => void;
     onRightSidebarItemClick?: (item: string) => void;
     onSqdSaved?: (newSqd: SavedQueryDescriptor) => void;
     onFocusedMetadataChanged?: (tid_mid: TID_MID | undefined) => void;

package/lib/components/features/search/TMSearchQueryPanel.js

@@ -21,7 +21,7 @@ import TMDistinctValues from '../../choosers/TMDistinctValues';
 import { TMMetadataChooserForm } from '../../choosers/TMMetadataChooser';
 import TMQueryEditor from '../../query/TMQueryEditor';
 import TMSavedQueryForm from './TMSavedQueryForm';
-const TMSearchQueryPanel = ({ fromDTD, rightSidebarItems, isOpenDistinctValuesPanel = false, SQD, onRightSidebarItemClick, onSearchCompleted, onFocusedMetadataChanged, onCloseDistinctValuesPanel, onSqdSaved }) => {
+const TMSearchQueryPanel = ({ fromDTD, rightSidebarItems, isOpenDistinctValuesPanel = false, SQD, onRightSidebarItemClick, onSearchCompleted, onFocusedMetadataChanged, onCloseDistinctValuesPanel, onSqdSaved, onBack }) => {
     const [confirmQueryParams, ConfirmQueryParamsDialog] = useQueryParametersDialog();
     const [qd, setQd] = useState();
     const [lastQdParams, setLastQdParams] = useState([]);
@@ -99,9 +99,7 @@ const TMSearchQueryPanel = ({ fromDTD, rightSidebarItems, isOpenDistinctValuesPa
             }
         }
     };
-    return (_jsxs(TMSplitterLayout, { direction: 'horizontal', showSeparator: deviceType !== DeviceType.MOBILE && isOpenDistinctValuesPanel, separatorSize: 8, separatorColor: 'transparent', separatorActiveColor: 'transparent', min: ['0', '0'], start: deviceType === DeviceType.MOBILE ? ['100%', '0%'] : (isOpenDistinctValuesPanel ? ['55%', '45%'] : ['100%', '0%']), children: [_jsxs(TMToolbarCard, { title: fromDTD?.nameLoc ?? SDKUI_Localizator.Search_Metadata, items: rightSidebarItems, onItemClick: onRightSidebarItemClick, 
-                // onBack={deviceType !== DeviceType.DESKTOP ? () => { setCurrentTID(0) } : undefined}
-                toolbar: _jsx(_Fragment, { children: (SQD && !showSqdForm) ?
+    return (_jsxs(TMSplitterLayout, { direction: 'horizontal', showSeparator: deviceType !== DeviceType.MOBILE && isOpenDistinctValuesPanel, separatorSize: 8, separatorColor: 'transparent', separatorActiveColor: 'transparent', min: ['0', '0'], start: deviceType === DeviceType.MOBILE ? ['100%', '0%'] : (isOpenDistinctValuesPanel ? ['55%', '45%'] : ['100%', '0%']), children: [_jsxs(TMToolbarCard, { title: fromDTD?.nameLoc ?? SDKUI_Localizator.Search_Metadata, items: rightSidebarItems, onItemClick: onRightSidebarItemClick, onBack: onBack, toolbar: _jsx(_Fragment, { children: (SQD && !showSqdForm) ?
                         _jsx(TMDropDownMenu, { backgroundColor: 'white', borderRadius: '3px', content: _jsx(TMButton, { btnStyle: 'icon', caption: 'Altro', icon: _jsx(IconMenuVertical, { color: 'white' }), showTooltip: false }), items: [
                                 { icon: _jsx(IconAddCircleOutline, {}), text: SDKUI_Localizator.SavedQueryNew, onClick: () => { openSqdForm(FormModes.Create); } },
                                 { icon: _jsx(IconEdit, {}), text: SDKUI_Localizator.SavedQueryUpdate, disabled: (SQD && SQD.id == 1), onClick: () => { openSqdForm(FormModes.Update); } },

package/lib/components/features/search/TMSearchResult.js

@@ -465,7 +465,7 @@ const TMSearchResult = ({ context = SearchResultContext.METADATA_SEARCH, isVisib
                     _jsxs(StyledModalContainer, { style: { backgroundColor: 'white' }, children: [_jsx(TMMasterDetailDcmts, { deviceType: deviceType, inputDcmts: getSelectionDcmtInfo(), isForMaster: true, allowNavigation: focusedItem && selectedItems.length <= 0, canNext: canNavigateHandler('next'), canPrev: canNavigateHandler('prev'), onNext: () => onNavigateHandler('next'), onPrev: () => onNavigateHandler('prev'), onBack: () => setIsOpenMaster(false), appendMasterDcmts: handleAddItem }), secondaryMasterDcmts.length > 0 && secondaryMasterDcmts.map((dcmt, index) => {
                                 return (_jsx(StyledModalContainer, { style: { backgroundColor: 'white' }, children: _jsx(TMMasterDetailDcmts, { deviceType: deviceType, inputDcmts: [dcmt], isForMaster: true, allowNavigation: false, onBack: () => handleRemoveItem(dcmt.TID, dcmt.DID), appendMasterDcmts: handleAddItem }) }, `${index}-${dcmt.DID}`));
                             })] }), isOpenDcmtForm &&
-                    _jsx(StyledModalContainer, { style: { backgroundColor: 'white' }, children: _jsx(TMDcmtForm, { TID: focusedItem?.TID, DID: focusedItem?.DID, layoutMode: dcmtFormLayoutMode, showPreview: true, count: visibleItems.length, itemIndex: visibleItems.findIndex(o => o.rowIndex === focusedItem?.rowIndex) + 1, canNext: canNavigateHandler('next'), canPrev: canNavigateHandler('prev'), onNext: () => onNavigateHandler('next'), onPrev: () => onNavigateHandler('prev'), onClose: () => { setIsOpenDcmtForm(false); }, onSavedAsyncCallback: async (tid, did) => { await refreshFocusedDataRowAsync(tid, did, true); } }) })] }) }));
+                    _jsx(StyledModalContainer, { style: { backgroundColor: 'white' }, children: _jsx(TMDcmtForm, { TID: focusedItem?.TID, DID: focusedItem?.DID, layoutMode: dcmtFormLayoutMode, showPreview: deviceType !== DeviceType.MOBILE, count: visibleItems.length, itemIndex: visibleItems.findIndex(o => o.rowIndex === focusedItem?.rowIndex) + 1, canNext: canNavigateHandler('next'), canPrev: canNavigateHandler('prev'), onNext: () => onNavigateHandler('next'), onPrev: () => onNavigateHandler('prev'), onClose: () => { setIsOpenDcmtForm(false); }, onSavedAsyncCallback: async (tid, did) => { await refreshFocusedDataRowAsync(tid, did, true); } }) })] }) }));
 };
 export default TMSearchResult;
 const renderDcmtIcon = (cellData) => _jsx(TMDcmtIcon, { fileExtension: cellData.data.FILEEXT, fileCount: cellData.data.FILECOUNT, isLexProt: cellData.data.IsLexProt, isMail: cellData.data.ISMAIL, isShared: cellData.data.ISSHARED, isSigned: cellData.data.ISSIGNED });

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

@@ -50,8 +50,6 @@ interface TMBlogsProps {
     }>;
     /** Optional callback function to update the list of visualized blog posts */
     updateVisualizedBlogCallback?: (blogPosts: Array<BlogPost | HomeBlogPost>) => void;
-    /** Optional callback to handle clicks on attachment folder files */
-    handleClickAttachmentFolderFileCallback?: (folderId: number, draftId: number) => void;
     /** Optional callback to handle navigation to working groups */
     handleNavigateToWGs?: (selectedWorkingGroupId: number) => void;
     /** Optional boolean to control the visibility of an ID */
@@ -65,6 +63,8 @@ interface TMBlogsProps {
         isShowHideFilterEnabled: boolean;
         isShowHideIDEnaled: boolean;
         isCommentEnabled: boolean;
+        isDownloadAttachmentEnabled: boolean;
+        isViewEditMetadata: boolean;
         isDeleteEnabled: boolean;
         isRestoreEnabled: boolean;
         isRefreshEnabled: boolean;

package/lib/components/grids/TMBlogs.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { DcmtTypeListCacheService, ResultTypes, SDK_Globals, WorkingGroupEngine } from "@topconsultnpm/sdk-ts-beta";
+import { DcmtTypeListCacheService, LayoutModes, ResultTypes, SDK_Globals, WorkingGroupEngine } from "@topconsultnpm/sdk-ts-beta";
 import { ContextMenu, ScrollView } from 'devextreme-react';
 import { SDKUI_Localizator, IconAttachment, getExceptionMessage, Globalization, IconBoard } from '../../helper';
 import TMDataGrid from '../base/TMDataGrid';
@@ -15,12 +15,16 @@ import { TMResultManager } from '../forms/TMResultDialog';
 import { TMSearchBar } from '../sidebar/TMHeader';
 import { AttachmentElement, BlogPostContainer, colors, findFileItemByDraftID, highlightText, IconAndHeaderElement, isHeaderFullyHidden, OwnerInitialsBadge, TMBlogsFilterCategoryId } from './TMBlogsUtils';
 import { useDcmtOperations } from '../../hooks/useDcmtOperations';
-let abortController = new AbortController();
+import { DownloadTypes } from '../../ts';
+import TMDcmtForm from '../features/documents/TMDcmtForm';
+let localAbortController = new AbortController();
 const TMBlogs = (props) => {
-    const { id, allData, showExtendedAttachments = true, treeFs, draftLatestInfoMap, archivedDocumentMap, updateVisualizedBlogCallback, handleClickAttachmentFolderFileCallback, height, width, scrollToBottom = true, viewMode = 'thumbnails', header, showIconHeader = true, color = colors.PRIMARY_BLUE, handleNavigateToWGs, showId, setShowId, currentWorkingGroup, contextMenuParams = {
+    const { id, allData, showExtendedAttachments = true, treeFs, draftLatestInfoMap, archivedDocumentMap, updateVisualizedBlogCallback, height, width, scrollToBottom = true, viewMode = 'thumbnails', header, showIconHeader = true, color = colors.PRIMARY_BLUE, handleNavigateToWGs, showId, setShowId, currentWorkingGroup, contextMenuParams = {
         isShowHideFilterEnabled: true,
         isShowHideIDEnaled: true,
         isCommentEnabled: false,
+        isDownloadAttachmentEnabled: false,
+        isViewEditMetadata: false,
         isDeleteEnabled: false,
         isRestoreEnabled: false,
         isRefreshEnabled: false,
@@ -28,6 +32,7 @@ const TMBlogs = (props) => {
     }, refreshCallback, newPosts = [], showCommentFormCallback, showTaskFormCallback, showContextMenu = true } = props;
     // Get the current device type (e.g., mobile, tablet, desktop) using a custom hook.
     const deviceType = useDeviceType();
+    const { abortController, showWaitPanel, waitPanelTitle, showPrimary, waitPanelTextPrimary, waitPanelValuePrimary, waitPanelMaxValuePrimary, showSecondary, waitPanelTextSecondary, waitPanelValueSecondary, waitPanelMaxValueSecondary, downloadDcmtsAsync } = useDcmtOperations();
     // This avoids unnecessary re-renders by only recalculating when deviceType changes.
     let isMobile = useMemo(() => { return deviceType === DeviceType.MOBILE; }, [deviceType]);
     // State to manage the current rendering mode of the component (either 'thumbnails' or 'details')
@@ -45,11 +50,12 @@ const TMBlogs = (props) => {
     // State to manage the focused file
     const [focusedBlog, setFocusedBlog] = useState(undefined);
     // State to manage the focused file
+    const [focusedAttachment, setFocusedAttachment] = useState(undefined);
+    // State to manage the focused file
     const [dcmtTypeDescriptors, setDcmtTypeDescriptors] = useState(new Map());
-    // State to store context menu items for file manager actions
-    const [menuItems, setMenuItems] = useState([]);
     // State to manage the anchor element for context menu positioning
     const [anchorEl, setAnchorEl] = useState(null);
+    const contextMenuRef = useRef(null);
     // State to store the current header value. Initialized with the provided 'header' prop.
     const [currentHeader, setCurrentHeader] = useState(header);
     // State to track whether the header is fully hidden based on the current header value
@@ -61,17 +67,19 @@ const TMBlogs = (props) => {
     // Ref to the container
     const containerRef = useRef(null);
     // State variable to control the visibility of the wait panel.
-    const [showWaitPanel, setShowWaitPanel] = useState(false);
+    const [localShowWaitPanel, setLocalShowWaitPanel] = useState(false);
     // State variable to store the title of the wait panel.
-    const [waitPanelTitle, setWaitPanelTitle] = useState('');
+    const [localWaitPanelTitle, setLocalWaitPanelTitle] = useState('');
     // State variable to control the visibility of the primary section of the wait panel.
-    const [showPrimary, setShowPrimary] = useState(false);
+    const [localShowPrimary, setLocalShowPrimary] = useState(false);
     // State variable to store the primary text of the wait panel.
-    const [waitPanelTextPrimary, setWaitPanelTextPrimary] = useState('');
+    const [localWaitPanelTextPrimary, setLocalWaitPanelTextPrimary] = useState('');
     // State variable to track the current value of the primary progress indicator in the wait panel.
-    const [waitPanelValuePrimary, setWaitPanelValuePrimary] = useState(0);
+    const [localWaitPanelValuePrimary, setLocalWaitPanelValuePrimary] = useState(0);
     // State variable to define the maximum value for the primary progress indicator in the wait panel.
-    const [waitPanelMaxValuePrimary, setWaitPanelMaxValuePrimary] = useState(0);
+    const [localWaitPanelMaxValuePrimary, setLocalWaitPanelMaxValuePrimary] = useState(0);
+    // State to manage show selected file
+    const [showDcmtForm, setShowDcmtForm] = useState(false);
     // Data source for the number of posts to display in the UI
     const postsToShowDataSource = [
         { value: 30, display: SDKUI_Localizator.Latest + ' 30' },
@@ -110,59 +118,58 @@ const TMBlogs = (props) => {
                     return;
                 if (focusedBlog === undefined || focusedBlog.id === undefined || currentWorkingGroup === undefined || currentWorkingGroup.id === undefined)
                     return Promise.resolve();
-                setWaitPanelTitle(del ? SDKUI_Localizator.Delete : SDKUI_Localizator.Restore);
-                setShowWaitPanel(true);
-                setShowPrimary(true);
-                abortController = new AbortController();
+                setLocalWaitPanelTitle(del ? SDKUI_Localizator.Delete : SDKUI_Localizator.Restore);
+                setLocalShowWaitPanel(true);
+                setLocalShowPrimary(true);
+                localAbortController = new AbortController();
                 let result = [];
                 let i = 0;
-                setWaitPanelMaxValuePrimary(1);
+                setLocalWaitPanelMaxValuePrimary(1);
                 if (abortController.signal.aborted) {
                     result.push({ rowIndex: i, id1: focusedBlog.id, id2: focusedBlog.id, resultType: ResultTypes.WARNING, description: `Operazione interrotta. Elaborate ${i}` });
                 }
                 else {
-                    setWaitPanelTextPrimary(del ? SDKUI_Localizator.Delete : SDKUI_Localizator.Restore);
+                    setLocalWaitPanelTextPrimary(del ? SDKUI_Localizator.Delete : SDKUI_Localizator.Restore);
                     const workingGroupEngine = new WorkingGroupEngine(SDK_Globals.tmSession);
                     await workingGroupEngine.BlogPostDeleteOrUndeleteAsync(currentWorkingGroup.id, focusedBlog.id, del)
                         .then(() => {
                         result.push({ rowIndex: 1, id1: currentWorkingGroup.id, id2: 0, description: SDKUI_Localizator.UpdateCompletedSuccessfully, resultType: ResultTypes.SUCCESS });
                         TMResultManager.show(result, del ? SDKUI_Localizator.Delete : SDKUI_Localizator.Restore, "ID", undefined);
-                        setFocusedBlog(undefined);
+                        handleFocusedBlog(undefined);
                         refresh();
                     })
                         .catch((err) => {
                         result.push({ rowIndex: 1, id1: currentWorkingGroup.id, id2: currentWorkingGroup.id, resultType: ResultTypes.ERROR, description: getExceptionMessage(err) });
                     });
                 }
-                setWaitPanelTextPrimary('');
-                setWaitPanelMaxValuePrimary(0);
-                setWaitPanelValuePrimary(0);
-                setShowWaitPanel(false);
+                setLocalWaitPanelTextPrimary('');
+                setLocalWaitPanelMaxValuePrimary(0);
+                setLocalWaitPanelValuePrimary(0);
+                setLocalShowWaitPanel(false);
                 TMResultManager.show(result, del ? SDKUI_Localizator.Delete : SDKUI_Localizator.Restore, "ID", undefined);
             }
         });
     };
+    const handleFocusedAttachment = (attachment) => {
+        setFocusedAttachment(attachment);
+    };
+    const handleFocusedBlog = (blog) => {
+        setFocusedBlog(blog);
+        setFocusedAttachment(undefined);
+    };
     const refresh = () => {
         if (refreshCallback)
             refreshCallback();
     };
+    const downloadAttachment = () => {
+        if (focusedAttachment === undefined)
+            return;
+        if (downloadDcmtsAsync)
+            downloadDcmtsAsync([{ TID: focusedAttachment.TID, DID: focusedAttachment.DID, fileName: focusedAttachment.fileName }], DownloadTypes.Dcmt);
+    };
     // ContexMenuItems array contains a list of context menu items for a blog
     const contextMenuItems = useMemo(() => {
         let menuItemsElements = [
-            {
-                icon: isHeaderHidden ? 'eyeopen' : 'eyeclose',
-                text: isHeaderHidden ? SDKUI_Localizator.ShowFilters : SDKUI_Localizator.HideFilters,
-                visible: contextMenuParams.isShowHideFilterEnabled,
-                onClick: toggleHeaderClick,
-                disabled: false,
-            },
-            {
-                icon: localShowId ? 'eyeclose' : 'eyeopen',
-                onClick: () => setLocalShowId(prevShowId => !prevShowId),
-                text: localShowId ? SDKUI_Localizator.ID_Hide : SDKUI_Localizator.ID_Show,
-                visible: contextMenuParams.isShowHideIDEnaled,
-                disabled: false,
-            },
             {
                 icon: "chat",
                 text: SDKUI_Localizator.Comment,
@@ -170,7 +177,20 @@ const TMBlogs = (props) => {
                 disabled: false,
                 onClick: () => { if (showCommentFormCallback)
                     showCommentFormCallback(); },
-                beginGroup: true
+            },
+            {
+                icon: "download",
+                text: 'Download',
+                visible: contextMenuParams.isDownloadAttachmentEnabled && focusedAttachment !== undefined,
+                disabled: focusedAttachment === undefined,
+                onClick: downloadAttachment,
+            },
+            {
+                icon: showDcmtForm ? 'eyeclose' : 'eyeopen',
+                text: showDcmtForm ? SDKUI_Localizator.HideMetadata : SDKUI_Localizator.ViewEditMetadata,
+                visible: contextMenuParams.isViewEditMetadata && focusedAttachment !== undefined,
+                disabled: focusedAttachment === undefined,
+                onClick: () => setShowDcmtForm(true),
             },
             {
                 icon: "trash",
@@ -178,6 +198,7 @@ const TMBlogs = (props) => {
                 visible: contextMenuParams.isDeleteEnabled,
                 onClick: () => deleteOrUndeleteCommentCallback(true),
                 disabled: focusedBlog?.ownerID !== SDK_Globals.tmSession?.SessionDescr?.userID || focusedBlog === undefined || (focusedBlog && (focusedBlog.isDel !== undefined && focusedBlog.isDel !== 0)),
+                beginGroup: true
             },
             {
                 icon: "undo",
@@ -195,6 +216,21 @@ const TMBlogs = (props) => {
                 disabled: false,
                 beginGroup: true
             },
+            {
+                icon: isHeaderHidden ? 'eyeopen' : 'eyeclose',
+                text: isHeaderHidden ? SDKUI_Localizator.ShowFilters : SDKUI_Localizator.HideFilters,
+                visible: contextMenuParams.isShowHideFilterEnabled,
+                onClick: toggleHeaderClick,
+                disabled: false,
+                beginGroup: true
+            },
+            {
+                icon: localShowId ? 'eyeclose' : 'eyeopen',
+                onClick: () => setLocalShowId(prevShowId => !prevShowId),
+                text: localShowId ? SDKUI_Localizator.ID_Hide : SDKUI_Localizator.ID_Show,
+                visible: contextMenuParams.isShowHideIDEnaled,
+                disabled: false,
+            },
             {
                 icon: "refresh",
                 text: SDKUI_Localizator.Refresh,
@@ -205,7 +241,7 @@ const TMBlogs = (props) => {
             },
         ];
         return menuItemsElements;
-    }, [isHeaderHidden, localShowId, setLocalShowId, focusedBlog]);
+    }, [isHeaderHidden, localShowId, setLocalShowId, focusedBlog, focusedAttachment, showDcmtForm]);
     useEffect(() => {
         if (currentWorkingGroup === undefined)
             setNewPostCount(0);
@@ -317,7 +353,7 @@ const TMBlogs = (props) => {
         // Update the state with the filtered and limited list of blogs
         setBlogPosts(filteredBlogs);
         if (focusedBlog && focusedBlog.id && filteredBlogs.find(filteredBlog => focusedBlog.id === filteredBlog.id) === undefined)
-            setFocusedBlog(undefined);
+            handleFocusedBlog(undefined);
     }, [allData, appliedGlobalFilters, searchText, postsToShow, currentHeader]);
     useEffect(() => {
         if (viewMode)
@@ -334,7 +370,6 @@ const TMBlogs = (props) => {
     }, [focusedBlog]);
     const ThumbnailView = () => {
         const scrollRef = useRef(null);
-        const { abortController, showWaitPanel, waitPanelTitle, showPrimary, waitPanelTextPrimary, waitPanelValuePrimary, waitPanelMaxValuePrimary, showSecondary, waitPanelTextSecondary, waitPanelValueSecondary, waitPanelMaxValueSecondary, downloadDcmtsAsync } = useDcmtOperations();
         useEffect(() => {
             if (focusedBlog && focusedBlog.id) { // containerRef.current
                 const focusedElement = document.getElementById(focusedBlog.id.toString());
@@ -350,7 +385,7 @@ const TMBlogs = (props) => {
         }, [blogPosts, viewMode, focusedBlog]);
         const attachmentDetails = (attachments, isSelected) => {
             return _jsx("div", { style: { marginTop: "10px", overflow: "hidden" }, children: attachments.map(attachment => {
-                    return AttachmentElement(attachment, treeFs, draftLatestInfoMap, archivedDocumentMap, dcmtTypeDescriptors, isSelected, searchText, color, handleClickAttachmentFolderFileCallback, downloadDcmtsAsync);
+                    return AttachmentElement(attachment, treeFs, draftLatestInfoMap, archivedDocumentMap, dcmtTypeDescriptors, isSelected, searchText, color, downloadDcmtsAsync, handleFocusedAttachment, setAnchorEl, contextMenuRef);
                 }) });
         };
         return _jsx(TMLayoutWaitingContainer, { direction: 'vertical', showWaitPanel: showWaitPanel, showWaitPanelPrimary: showPrimary, showWaitPanelSecondary: showSecondary, waitPanelTitle: waitPanelTitle, waitPanelTextPrimary: waitPanelTextPrimary, waitPanelValuePrimary: waitPanelValuePrimary, waitPanelMaxValuePrimary: waitPanelMaxValuePrimary, waitPanelTextSecondary: waitPanelTextSecondary, waitPanelValueSecondary: waitPanelValueSecondary, waitPanelMaxValueSecondary: waitPanelMaxValueSecondary, isCancelable: true, abortController: abortController, children: _jsx("div", { ref: scrollRef, style: { backgroundColor: "rgba(191, 191, 191, 0.15)", height: "100%", padding: "5px", overflowY: "auto", width: "100%" }, children: blogPosts.length === 0 ?
@@ -383,14 +418,14 @@ const TMBlogs = (props) => {
                                 handleNavigateToWGs(id);
                         };
                         const onClickCallback = () => {
-                            setFocusedBlog(blogPost);
+                            handleFocusedBlog(blogPost);
                         };
                         const handleKeyDown = (event) => {
                             event.preventDefault();
                             if (event.key === 'ArrowDown' && focusedBlog) {
                                 const currentIndex = blogPosts.findIndex(post => post.id === focusedBlog.id);
                                 if (blogPosts[currentIndex + 1]) {
-                                    setFocusedBlog(blogPosts[currentIndex + 1]);
+                                    handleFocusedBlog(blogPosts[currentIndex + 1]);
                                 }
                                 ;
                             }
@@ -400,12 +435,17 @@ const TMBlogs = (props) => {
                             if (event.key === 'ArrowUp' && focusedBlog) {
                                 const currentIndex = blogPosts.findIndex(post => post.id === focusedBlog.id);
                                 if (blogPosts[currentIndex - 1]) {
-                                    setFocusedBlog(blogPosts[currentIndex - 1]);
+                                    handleFocusedBlog(blogPosts[currentIndex - 1]);
                                 }
                                 ;
                             }
                         };
-                        return (_jsxs(BlogPostContainer, { id: id + "-" + blogPost.id.toString(), ref: containerRef, "$color": textColor, "$textDecoration": blogPost.isDel ? 'line-through' : 'none', "$backgroundColor": bgColor, "$isNew": Boolean(blogPost.newPosts ?? 0) || isNew, "$canNavigate": canNavigate(), onClick: onClickCallback, onDoubleClick: headerClickCallback, tabIndex: 0, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, children: [_jsxs("div", { style: { display: "flex", alignItems: "center" }, children: [OwnerInitialsBadge(blogPost), _jsx("div", { style: { flex: "1 1 auto", minWidth: "0" }, children: _jsxs("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: "wrap", overflow: "hidden" }, children: [_jsxs("div", { children: [_jsxs("div", { style: { fontWeight: "bold", fontSize: "13px", display: "flex", alignItems: "center" }, children: [(showIconHeader && (blogPost.header && blogPost.classID))
+                        const onContextMenu = (e) => {
+                            e.preventDefault();
+                            setAnchorEl(e.currentTarget);
+                            handleFocusedAttachment(undefined);
+                        };
+                        return (_jsxs(BlogPostContainer, { id: id + "-" + blogPost.id.toString(), ref: containerRef, "$color": textColor, "$textDecoration": blogPost.isDel ? 'line-through' : 'none', "$backgroundColor": bgColor, "$isNew": Boolean(blogPost.newPosts ?? 0) || isNew, "$canNavigate": canNavigate(), onClick: onClickCallback, onDoubleClick: headerClickCallback, tabIndex: 0, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, onContextMenu: onContextMenu, children: [_jsxs("div", { style: { display: "flex", alignItems: "center" }, children: [OwnerInitialsBadge(blogPost), _jsx("div", { style: { flex: "1 1 auto", minWidth: "0" }, children: _jsxs("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: "wrap", overflow: "hidden" }, children: [_jsxs("div", { children: [_jsxs("div", { style: { fontWeight: "bold", fontSize: "13px", display: "flex", alignItems: "center" }, children: [(showIconHeader && (blogPost.header && blogPost.classID))
                                                                         ? (IconAndHeaderElement(blogPost, iconColor, isSelected, headerClickCallback, searchText)) :
                                                                         _jsx("span", { style: { marginLeft: showIconHeader ? "5px" : "0" }, children: highlightText(blogPost.ownerName ?? '', searchText, isSelected) }), (blogPost?.newPosts ?? 0) > 0 && (_jsx("div", { style: {
                                                                             marginLeft: "5px",
@@ -481,9 +521,9 @@ const TMBlogs = (props) => {
             const data = cellData.data;
             const { attachments } = data;
             return _jsx("div", { style: { marginTop: "10px", overflow: "hidden" }, children: (attachments && attachments.length > 0) ? attachments.map(attachment => {
-                    return AttachmentElement(attachment, treeFs, draftLatestInfoMap, archivedDocumentMap, dcmtTypeDescriptors, false, searchText, color, handleClickAttachmentFolderFileCallback, downloadDcmtsAsync);
+                    return AttachmentElement(attachment, treeFs, draftLatestInfoMap, archivedDocumentMap, dcmtTypeDescriptors, false, searchText, color, downloadDcmtsAsync, handleFocusedAttachment, setAnchorEl, contextMenuRef);
                 }) : '' });
-        }, [treeFs, draftLatestInfoMap, dcmtTypeDescriptors, color, handleClickAttachmentFolderFileCallback, searchText]);
+        }, [treeFs, draftLatestInfoMap, dcmtTypeDescriptors, color, searchText]);
         const cellDatetimeRender = useCallback((cellData) => {
             const data = cellData.data;
             const { value } = cellData;
@@ -494,7 +534,7 @@ const TMBlogs = (props) => {
         // Handles focus change in the data grid
         const onFocusedRowChanged = useCallback((e) => {
             if (e.row)
-                setFocusedBlog(e.row.data);
+                handleFocusedBlog(e.row.data);
         }, []);
         const onContextMenuPreparing = (e) => {
             if (e === undefined)
@@ -532,18 +572,23 @@ const TMBlogs = (props) => {
             setPostsToShow(Number(value));
         }
     };
+    // Handle closing the context menu
+    const closeContextMenu = useCallback(() => {
+        setAnchorEl(null);
+    }, []);
     const onContextMenu = (event) => {
         if (event === undefined)
             return;
-        event.preventDefault();
-        setAnchorEl(event.currentTarget);
-        setMenuItems(showContextMenu ? contextMenuItems : []);
+        if (blogPosts.length === 0) {
+            event.preventDefault();
+            setAnchorEl(event.currentTarget);
+        }
     };
-    // Handle closing the context menu
-    const closeContextMenu = useCallback(() => {
-        setAnchorEl(null);
+    const onCloseDcmtForm = useCallback(() => {
+        setShowDcmtForm(false);
+        handleFocusedAttachment(undefined);
     }, []);
-    return _jsx("div", { style: { height: height ?? '100%', width: width ?? '100%' }, children: _jsxs(TMLayoutWaitingContainer, { direction: 'vertical', showWaitPanel: showWaitPanel, showWaitPanelPrimary: showPrimary, waitPanelTitle: waitPanelTitle, waitPanelTextPrimary: waitPanelTextPrimary, waitPanelValuePrimary: waitPanelValuePrimary, waitPanelMaxValuePrimary: waitPanelMaxValuePrimary, isCancelable: true, abortController: abortController, children: [(currentHeader && !isHeaderHidden) && (_jsx("div", { style: { display: 'block', width: '100%', overflowX: 'auto', overflowY: 'hidden', whiteSpace: 'nowrap' }, onContextMenu: e => e.preventDefault(), children: _jsx(ScrollView, { width: "100%", height: "auto", direction: "horizontal", useNative: true, children: _jsxs("div", { style: {
+    return _jsx("div", { style: { height: height ?? '100%', width: width ?? '100%' }, children: _jsxs(TMLayoutWaitingContainer, { direction: 'vertical', showWaitPanel: localShowWaitPanel, showWaitPanelPrimary: localShowPrimary, waitPanelTitle: localWaitPanelTitle, waitPanelTextPrimary: localWaitPanelTextPrimary, waitPanelValuePrimary: localWaitPanelValuePrimary, waitPanelMaxValuePrimary: localWaitPanelMaxValuePrimary, isCancelable: true, abortController: localAbortController, children: [(currentHeader && !isHeaderHidden) && (_jsx("div", { style: { display: 'block', width: '100%', overflowX: 'auto', overflowY: 'hidden', whiteSpace: 'nowrap' }, onContextMenu: e => e.preventDefault(), children: _jsx(ScrollView, { width: "100%", height: "auto", direction: "horizontal", useNative: true, children: _jsxs("div", { style: {
                                 display: 'flex',
                                 flexDirection: 'row',
                                 gap: '8px',
@@ -561,6 +606,6 @@ const TMBlogs = (props) => {
                                         minWidth: isMobile ? '90px' : '120px',
                                         width: isMobile ? '90px' : '150px',
                                         height: '29px',
-                                    } }))] }) }) })), _jsxs("div", { style: { height: `calc(100% - ${currentHeader && !isHeaderHidden ? '50px' : '0px'})`, width: "100%", overflow: 'auto', display: 'block' }, children: [_jsx("div", { style: { display: renderMode === 'thumbnails' ? 'block' : 'none', width: "100%", height: "100%" }, onContextMenu: onContextMenu, children: ThumbnailView() }), _jsx("div", { style: { display: renderMode === 'details' ? 'block' : 'none', width: "100%", height: "100%" }, children: DataGridView() }), anchorEl && _jsx(ContextMenu, { dataSource: menuItems, target: anchorEl, onHiding: closeContextMenu })] })] }) });
+                                    } }))] }) }) })), _jsxs("div", { style: { height: `calc(100% - ${currentHeader && !isHeaderHidden ? '50px' : '0px'})`, width: "100%", overflow: 'auto', display: 'block' }, children: [_jsx("div", { style: { display: renderMode === 'thumbnails' ? 'block' : 'none', width: "100%", height: "100%" }, onContextMenu: onContextMenu, children: ThumbnailView() }), _jsx("div", { style: { display: renderMode === 'details' ? 'block' : 'none', width: "100%", height: "100%" }, children: DataGridView() }), anchorEl && _jsx(ContextMenu, { ref: contextMenuRef, dataSource: contextMenuItems, target: anchorEl, onHiding: closeContextMenu })] }), (showDcmtForm && focusedAttachment && focusedAttachment.TID && focusedAttachment.DID) && _jsx(TMDcmtForm, { TID: Number(focusedAttachment.TID), DID: Number(focusedAttachment.DID), layoutMode: LayoutModes.Update, onClose: onCloseDcmtForm, isClosable: true, titleModal: SDKUI_Localizator.Attachment + ": " + focusedAttachment.fileName, isModal: true, showPreview: !isMobile, showBoard: !isMobile, widthModal: "95%", heightModal: "95%" })] }) });
 };
 export default TMBlogs;

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

@@ -2,6 +2,7 @@ import React from 'react';
 import { BlogPost, BlogPostAttachment, DcmtTypeDescriptor, HomeBlogPost } from "@topconsultnpm/sdk-ts-beta";
 import { FileItem } from '../base/TMFileManager';
 import { DcmtInfo, DownloadTypes } from '../../ts';
+import { ContextMenuRef } from 'devextreme-react/cjs/context-menu';
 export declare const DRAFT_TYPE_TID = 6;
 export declare const colors: {
     DARK_BLUE: string;
@@ -72,7 +73,7 @@ export declare const AttachmentElement: (attachment: BlogPostAttachment, treeFs:
     did: number;
     fileExt: string;
     fileSize: string;
-}> | undefined, dcmtTypeDescriptors: Map<number, DcmtTypeDescriptor>, isSelected: boolean, searchText: string, color: string, handleClickAttachmentFolderFileCallback: ((folderId: number, draftId: number) => void) | undefined, downloadDcmtsAsync: (inputDcmts: Array<DcmtInfo> | undefined, downloadType: DownloadTypes) => Promise<void>) => import("react/jsx-runtime").JSX.Element;
+}> | undefined, dcmtTypeDescriptors: Map<number, DcmtTypeDescriptor>, isSelected: boolean, searchText: string, color: string, downloadDcmtsAsync: (inputDcmts: Array<DcmtInfo> | undefined, downloadType: DownloadTypes) => Promise<void>, handleFocusedAttachment: (attachment: DcmtInfo | undefined) => void, setAnchorEl: (value: React.SetStateAction<HTMLElement | null>) => void, contextMenuRef: React.MutableRefObject<ContextMenuRef<any> | null>) => import("react/jsx-runtime").JSX.Element;
 export declare const OwnerInitialsBadge: (blogPost: BlogPost | HomeBlogPost) => import("react/jsx-runtime").JSX.Element;
 export declare const IconAndHeaderElement: (blogPost: BlogPost | HomeBlogPost, iconColor: string, isSelected: boolean, headerClickCallback: () => void, searchText: string) => import("react/jsx-runtime").JSX.Element;
 export declare const findFileItemByDraftID: (tree: FileItem | undefined, draftID: number | undefined) => FileItem | null;

package/lib/components/grids/TMBlogsUtils.js

@@ -130,17 +130,8 @@ export const getAttachmentInfo = (attachment, treeFs, draftLatestInfoMap, archiv
     }
     return { name, nameElement, folderId, fileExt, draftExist, archivedDocumentsExist };
 };
-export const AttachmentElement = (attachment, treeFs, draftLatestInfoMap, archivedDocumentMap, dcmtTypeDescriptors, isSelected, searchText, color, handleClickAttachmentFolderFileCallback, downloadDcmtsAsync) => {
+export const AttachmentElement = (attachment, treeFs, draftLatestInfoMap, archivedDocumentMap, dcmtTypeDescriptors, isSelected, searchText, color, downloadDcmtsAsync, handleFocusedAttachment, setAnchorEl, contextMenuRef) => {
     const { name, nameElement, folderId, fileExt, draftExist } = getAttachmentInfo(attachment, treeFs, draftLatestInfoMap, archivedDocumentMap, dcmtTypeDescriptors, isSelected, searchText, color);
-    const onClickCallback = (e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        if (attachment.tid === DRAFT_TYPE_TID && treeFs && draftExist) {
-            const folderIdAttachment = folderId === 0 ? -1 : folderId;
-            if (handleClickAttachmentFolderFileCallback && attachment.draftID)
-                handleClickAttachmentFolderFileCallback(folderIdAttachment, attachment.draftID);
-        }
-    };
     const onDoubleClick = (e) => {
         e.preventDefault();
         e.stopPropagation();
@@ -149,7 +140,19 @@ export const AttachmentElement = (attachment, treeFs, draftLatestInfoMap, archiv
         if (downloadDcmtsAsync)
             downloadDcmtsAsync([{ TID: attachment.tid, DID: attachment.did, fileName }], DownloadTypes.Dcmt);
     };
-    return _jsx("div", { onClick: onClickCallback, onDoubleClick: onDoubleClick, style: {
+    const onContextMenu = (e) => {
+        const archiveID = SDK_Globals.tmSession?.SessionDescr?.archiveID;
+        const fileName = `${removeFileExtension(name)}_${archiveID}_${attachment.tid}_${attachment.did}.${fileExt}`;
+        handleFocusedAttachment({ TID: attachment.tid, DID: attachment.did, fileName });
+        setAnchorEl(e.currentTarget);
+        e.preventDefault();
+        e.stopPropagation();
+        // Slight delay to ensure state update before showing context menu
+        setTimeout(() => {
+            contextMenuRef.current?.instance()?.show();
+        }, 0);
+    };
+    return _jsx("div", { onDoubleClick: onDoubleClick, onContextMenu: onContextMenu, style: {
             display: 'inline-flex',
             padding: '8px 12px',
             margin: '4px',

package/lib/helper/SDKUI_Localizator.d.ts

@@ -170,6 +170,7 @@ export declare class SDKUI_Localizator {
     static get Hide_CompleteName(): "Vollständigen Namen ausblenden" | "Hide full name" | "Ocultar nombre completo" | "Masquer le nom complet" | "Ocultar nome completo" | "Nascondi nome completo";
     static get HideFilters(): string;
     static get HideLeftPanel(): "Linkes Panel ausblenden" | "Hide left panel" | "Ocultar panel izquierdo" | "Masquer le panneau de gauche" | "Ocultar painel esquerdo" | "Nascondi il pannello sinistro";
+    static get HideMetadata(): string;
     static get HideSearch(): "Suche ausblenden" | "Hide search" | "Ocultar búsqueda" | "Masquer la recherche" | "Ocultar pesquisa" | "Nascondi ricerca";
     static get ID_Hide(): "Ausblenden ID" | "Hide ID" | "Ocultar ID" | "Masquer ID" | "Nascondi ID";
     static get ID_Show(): "ID anzeigen" | "Show ID" | "Mostrar ID" | "Afficher ID" | "Visualizza ID";
@@ -400,6 +401,7 @@ export declare class SDKUI_Localizator {
     static get VariablesSystem(): "Systemvariablen" | "System variables" | "Variables del sistema" | "Variables de système" | "Variáveis do sistema" | "Variabili di sistema";
     static get Version(): string;
     static get View_Metadato(): "Anzeige (Methadaten)" | "Visualization (metadata)" | "Visualización (metadato)" | "Visualisation (métadonnée)" | "Display (metadados)" | "Visualizzazione (metadato)";
+    static get ViewEditMetadata(): string;
     static get ViewWithCheckOption(): "Kontrolle über Archivierung und Bearbeitung" | "Check on archive and update" | "Control en almacenamiento y modificación" | "Contrôle de l'archivage et la modifie" | "Controle de arquivamento e edição" | "Controllo su archiviazione e modifica";
     static get Visible(): "Sichtbar" | "Visible" | "Visibles" | "Visibiles" | "Visíveis" | "Visibili";
     static get VisibleItems(): "sichtbare Elemente" | "Visible items" | "elementos visibles" | "éléments visibles" | "itens visíveis" | "Elementi visibili";

package/lib/helper/SDKUI_Localizator.js

@@ -1660,6 +1660,16 @@ export class SDKUI_Localizator {
             default: return "Nascondi il pannello sinistro";
         }
     }
+    static get HideMetadata() {
+        switch (this._cultureID) {
+            case CultureIDs.De_DE: return "Metadaten ausblenden";
+            case CultureIDs.En_US: return "Hide Metadata";
+            case CultureIDs.Es_ES: return "Ocultar metadatos";
+            case CultureIDs.Fr_FR: return "Masquer les métadonnées";
+            case CultureIDs.Pt_PT: return "Ocultar metadados";
+            default: return "Nascondi metadati";
+        }
+    }
     static get HideSearch() {
         switch (this._cultureID) {
             case CultureIDs.De_DE: return "Suche ausblenden";
@@ -3958,6 +3968,16 @@ export class SDKUI_Localizator {
             default: return "Visualizzazione (metadato)";
         }
     }
+    static get ViewEditMetadata() {
+        switch (this._cultureID) {
+            case CultureIDs.De_DE: return "Metadaten anzeigen/bearbeiten";
+            case CultureIDs.En_US: return "View/Edit Metadata";
+            case CultureIDs.Es_ES: return "Ver/Editar metadatos";
+            case CultureIDs.Fr_FR: return "Afficher/Modifier les métadonnées";
+            case CultureIDs.Pt_PT: return "Visualizar/Editar metadados";
+            default: return "Visualizza/modifica metadati";
+        }
+    }
     static get ViewWithCheckOption() {
         switch (this._cultureID) {
             case CultureIDs.De_DE: return "Kontrolle über Archivierung und Bearbeitung";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@topconsultnpm/sdkui-react-beta",
-  "version": "6.12.110",
+  "version": "6.12.112",
   "description": "",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",