@topconsultnpm/sdkui-react 6.19.0-dev1.10

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

@@ -0,0 +1,308 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { BlogPost, BlogPostAttachment, ResultTypes, SDK_Globals, SDK_Localizator, ValidationItem, WorkingGroupEngine } from "@topconsultnpm/sdk-ts";
+import { SDKUI_Localizator, calcResponsiveSizes, calcIsModified, formatBytes, Globalization, getFileIcon, IconAttachment } from '../../../helper';
+import { useSaveForm, SaveFormOptions } from '../../../hooks/useForm';
+import { FormModes } from '../../../ts';
+import TMButton from '../../base/TMButton';
+import { useDeviceType } from '../../base/TMDeviceProvider';
+import { TMExceptionBoxManager, TMMessageBoxManager, ButtonNames } from '../../base/TMPopUp';
+import TMSpinner from '../../base/TMSpinner';
+import TMTooltip from '../../base/TMTooltip';
+import TMUserAvatar from '../../base/TMUserAvatar';
+import TMHtmlEditor from '../../editors/TMHtmlEditor';
+import TMChooserForm from '../../forms/TMChooserForm';
+import TMSaveForm from '../../forms/TMSaveForm';
+const getNonDirectoryFiles = (items, exclude) => {
+    const excludeIds = new Set(exclude.map(item => item.id));
+    return items.flatMap((item) => {
+        if (item.isDirectory && item.items) {
+            return getNonDirectoryFiles(item.items, exclude);
+        }
+        else if (!item.isDirectory && !excludeIds.has(item.id)) {
+            return [item];
+        }
+        else {
+            return [];
+        }
+    });
+};
+const TMBlogCommentForm = (props) => {
+    const { participants, selectedAttachments, selectedAttachmentDid, allFileItems, allArchivedDocumentsFileItems = [], onClose, refreshCallback, context, showAttachmentsSection = true, updateShouldSelectLastBlog } = props;
+    // Initialize state with combined array
+    const [dataSource, setDataSource] = useState(() => [...getNonDirectoryFiles(allFileItems?.items || [], []), ...allArchivedDocumentsFileItems]);
+    const [isEditorEnabled, setIsEditorEnabled] = useState(true);
+    const [showAttachmentsForm, setShowAttachmentsForm] = useState(false);
+    const [mentionsConfig, setMentionsConfig] = useState([]);
+    // Get the current device type (e.g., mobile, tablet, desktop) using a custom hook.
+    const deviceType = useDeviceType();
+    const validator = async (params) => {
+        let vil = [];
+        const { comment } = params;
+        // Check for empty comment
+        if (!comment || comment.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)}`));
+            }
+            // Detect dangerous HTML tags
+            const tagRegex = /<\/?(script|iframe|embed|object|link|style|img|video|audio|svg|form|input|button|textarea|select|pre|function)[^>]*>/gi;
+            const attrRegex = /\son\w+\s*=\s*(['"]).*?\1/gi;
+            const encodedTagRegex = /&lt;\/?(script|iframe|embed|object|link|style|img|video|audio|svg|form|input|button|textarea|select|pre|function)[^&]*&gt;/gi;
+            if (tagRegex.test(comment) || attrRegex.test(comment) || encodedTagRegex.test(comment)) {
+                vil.push(new ValidationItem(ResultTypes.ERROR, SDKUI_Localizator.Comment, `${SDKUI_Localizator.CommentDoesNotMeetRequirements}`));
+            }
+        }
+        return vil;
+    };
+    const { formData, setFormData, formDataOrig, validationItems, exception } = useSaveForm(FormModes.Create, 0, new SaveFormOptions(), validator);
+    const [currentDraftAttachments, setCurrentDraftAttachments] = useState([]);
+    useEffect(() => {
+        setDataSource([...getNonDirectoryFiles(allFileItems?.items || [], []), ...allArchivedDocumentsFileItems,]);
+    }, [allFileItems, allArchivedDocumentsFileItems]);
+    useEffect(() => {
+        if (selectedAttachmentDid && selectedAttachmentDid.length) {
+            const selectedFiles = dataSource.filter(file => file.did !== undefined && selectedAttachmentDid.includes(file.did));
+            if (selectedFiles.length) {
+                setCurrentDraftAttachments(selectedFiles);
+            }
+        }
+    }, [selectedAttachmentDid, dataSource]);
+    useEffect(() => {
+        if (selectedAttachments) {
+            setCurrentDraftAttachments(selectedAttachments);
+        }
+        ;
+    }, [selectedAttachments]);
+    useEffect(() => {
+        const mentions = [{
+                dataSource: participants.map(user => ({ text: user.name || '', icon: TMUserAvatar({ displayName: user.name || '', nameForColorCalculation: user.name || '', returnType: "svg" }) })),
+                searchExpr: 'text',
+                displayExpr: 'text',
+                valueExpr: 'text',
+                itemTemplate: function (itemData) {
+                    return `<div style="display: flex; align-items: center; justify-content: center; gap: 8px; height: 100%;">
+                            ${itemData.icon}
+                            <span>${itemData.text}</span>
+                        </div>`;
+                },
+            }];
+        setMentionsConfig(mentions);
+    }, [participants]);
+    const onSaveAsync = async () => {
+        try {
+            // Show a loading spinner with a localized description
+            TMSpinner.show({ description: SDKUI_Localizator.Comment });
+            // Exit early if the engine or its required identifiers are undefined
+            if (context.object === undefined
+                || (context.engine === 'WorkingGroupEngine' && !context.object.id)
+                || (context.engine === 'SearchEngine' && (!context.object.tid || !context.object.did))
+                || (context.engine === 'DossierEngine' && !context.object.id)) {
+                TMSpinner.hide();
+                return;
+            }
+            // Create a new BlogPost object
+            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, '');
+            // Assign the cleaned comment as the description for the blog post
+            blogPost.description = cleanComment ?? "";
+            // If there are file items (attachments), process them
+            if (currentDraftAttachments && currentDraftAttachments.length > 0) {
+                // Initialize an array to hold the blog post attachments
+                const attachment = [];
+                currentDraftAttachments.forEach((fileItem) => {
+                    // Set the necessary properties for the blog post attachment
+                    const blogPostAttachement = new BlogPostAttachment();
+                    blogPostAttachement.did = fileItem.did;
+                    blogPostAttachement.tid = fileItem.tid;
+                    blogPostAttachement.draftID = fileItem.id;
+                    // Add the attachment to the array
+                    attachment.push(blogPostAttachement);
+                });
+                blogPost.attachments = attachment;
+            }
+            if (context.engine === 'WorkingGroupEngine' && context.object && context.object.id) {
+                // 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);
+            }
+            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);
+            }
+            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);
+            }
+        }
+        catch (e) {
+            // If any error occurs during the try block execution, display the exception in an error box
+            TMExceptionBoxManager.show({ exception: e });
+        }
+        finally {
+            // Hide the loading spinner and close the operation (e.g., close a modal or cleanup)
+            TMSpinner.hide();
+            onClose();
+        }
+    };
+    const onCloseCallback = () => {
+        if (formData && formData?.comment.length > 0) {
+            TMMessageBoxManager.show({
+                parentId: "TMSaveFormShowConfirmForClose-1",
+                buttons: [ButtonNames.YES, ButtonNames.NO],
+                message: SDKUI_Localizator.ConfirmOnCancel,
+                onButtonClick(e) {
+                    if (e !== ButtonNames.YES)
+                        return;
+                    setFormData(undefined);
+                    if (onClose)
+                        onClose();
+                },
+            });
+        }
+        else {
+            setFormData(undefined);
+            if (onClose)
+                onClose();
+        }
+    };
+    const toggleEditorMode = () => {
+        setIsEditorEnabled((prev) => !prev);
+    };
+    const onValueChanged = (e) => {
+        // Clean the value by:
+        // 1. Removing any <span> tags (both opening and closing) using regex
+        // 2. Replacing HTML non-breaking spaces (&nbsp;) with regular spaces
+        const cleaned = e.value.replace(/<span[^>]*>|<\/span>/g, '').replace(/&nbsp;/g, ' ');
+        // Update the formData state by copying the existing data
+        // and setting the `comment` field to the cleaned value
+        setFormData({ ...formData, comment: cleaned });
+    };
+    const removeAttachment = (attachment) => {
+        setCurrentDraftAttachments(prev => prev.filter(item => item.id !== attachment.id));
+    };
+    const onChoose = (selectedDraftItemsIds) => {
+        // Find the file items corresponding to the selected IDs
+        const selectedDraftItems = selectedDraftItemsIds.map(id => dataSource.find(file => file.id === id)).filter((item) => !!item); // Filter out undefined
+        // 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: {
+                                        width: 'calc(100% - 60px)',
+                                        overflowX: 'auto',
+                                        whiteSpace: 'nowrap',
+                                        height: '50px',
+                                        border: '1px solid #ccc',
+                                        borderRadius: '8px',
+                                        backgroundColor: '#fafafa',
+                                        display: 'flex',
+                                        alignItems: 'center',
+                                        padding: '0 8px',
+                                    }, children: currentDraftAttachments.length > 0 ? (currentDraftAttachments.map(draft => {
+                                        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',
+                                                border: '1px solid #ddd',
+                                                borderRadius: '8px',
+                                                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: {
+                                                        display: 'inline-flex',
+                                                        width: '20px',
+                                                        height: '20px',
+                                                        alignItems: 'center',
+                                                        justifyContent: 'center',
+                                                        backgroundColor: '#28a745',
+                                                        color: '#fff',
+                                                        borderRadius: '30px',
+                                                        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: {
+                                                            display: 'inline-flex',
+                                                            width: '20px',
+                                                            height: '20px',
+                                                            alignItems: 'center',
+                                                            justifyContent: 'center',
+                                                            color: '#000',
+                                                            border: '1px solid #000',
+                                                            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) })] }) });
+};
+export default TMBlogCommentForm;
+const TMAttachmentsView = (props) => {
+    const { dataSource, selectedIDs, onChoose, onClose } = props;
+    // Get the current device type (e.g., mobile, tablet, desktop) using a custom hook.
+    const deviceType = useDeviceType();
+    const cellExtRender = useCallback((cellData) => {
+        const data = cellData.data;
+        return _jsx("div", { style: { display: 'flex', justifyContent: 'center', alignItems: 'center' }, children: getFileIcon(data.ext, data.version) });
+    }, []);
+    const cellDatetimeRender = useCallback((cellData) => {
+        const { value } = cellData;
+        const formattedDate = value ? new Date(value).toLocaleString('en-GB', { day: '2-digit', month: '2-digit', year: 'numeric', hour: '2-digit', minute: '2-digit' }) : '';
+        return _jsx("div", { children: formattedDate });
+    }, []);
+    const cellSizeRender = useCallback((cellData) => {
+        const data = cellData.data;
+        return formatBytes(data.size ?? 0);
+    }, []);
+    const dataColumns = useMemo(() => {
+        return ([
+            { dataField: "ext", caption: SDKUI_Localizator.Extension, cellRender: cellExtRender },
+            { dataField: "name", caption: SDKUI_Localizator.Name, sortOrder: 'asc' },
+            { dataField: "version", caption: SDKUI_Localizator.Version },
+            { dataField: "size", caption: SDKUI_Localizator.Size, cellRender: cellSizeRender },
+            { dataField: "updaterName", caption: SDKUI_Localizator.Author },
+            { dataField: "lastUpdateTime", caption: SDKUI_Localizator.LastUpdateTime, dataType: 'datetime', format: 'dd/MM/yyyy HH:mm', cellRender: cellDatetimeRender },
+            { dataField: "creationTime", caption: SDKUI_Localizator.CreationTime, dataType: 'datetime', format: 'dd/MM/yyyy HH:mm', cellRender: cellDatetimeRender },
+        ]);
+    }, []);
+    return _jsx(TMChooserForm, { title: SDKUI_Localizator.Attachments, allowMultipleSelection: true, allowApplyWithZeroSelection: true, startWithShowOnlySelectedItems: true, hasShowOnlySelectedItems: false, width: calcResponsiveSizes(deviceType, '700px', '700px', '95%'), height: "500px", manageUseLocalizedName: false, columns: dataColumns, showDefaultColumns: false, selectedIDs: selectedIDs, dataSource: dataSource, hasShowId: true, hideRefresh: false, onClose: onClose, onChoose: onChoose });
+};

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import { DcmtInfo } from '../../../ts';
+interface ITMBatchUpdateFormProps {
+    inputDcmts: DcmtInfo[];
+    TID: number | undefined;
+    DID: number | undefined;
+    isExpertMode?: boolean;
+    isModal?: boolean;
+    titleModal?: string;
+    widthModal?: string;
+    heightModal?: string;
+    onBack?: () => void;
+    onSavedCallbackAsync?: () => Promise<void>;
+    onStatusChanged?: (isModified: boolean, isValid: boolean) => void;
+}
+declare const TMBatchUpdateForm: React.FC<ITMBatchUpdateFormProps>;
+export default TMBatchUpdateForm;

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

@@ -0,0 +1,159 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { AccessLevels, DcmtTypeListCacheService, LayoutModes, MetadataDataDomains, ResultTypes, SDK_Globals, ValidationItem } from '@topconsultnpm/sdk-ts';
+import { searchResultToMetadataValues, getSystemMetadata, calcIsModified, getListMaxItems, SDKUI_Localizator, SDKUI_Globals } from '../../../helper';
+import { useDcmtOperations } from '../../../hooks/useDcmtOperations';
+import { DcmtOperationTypes, FormModes } from '../../../ts';
+import { StyledToolbarCardContainer, StyledFormButtonsContainer } from '../../base/Styled';
+import { useDeviceType, DeviceType } from '../../base/TMDeviceProvider';
+import { TMSplitterLayout } from '../../base/TMLayout';
+import { TMExceptionBoxManager } from '../../base/TMPopUp';
+import TMShowAllOrMaxItemsButton from '../../base/TMShowAllOrMaxItemsButton';
+import TMSpinner from '../../base/TMSpinner';
+import { TMLayoutWaitingContainer } from '../../base/TMWaitPanel';
+import TMDistinctValues from '../../choosers/TMDistinctValues';
+import TMFormulaEditor, { FormulaDescriptor, FormulaHelper, FormulaTargets } from '../../editors/TMFormulaEditor';
+import { useMetadataEditableList } from '../../editors/TMMetadataEditor';
+import TMMetadataValues, { ShowCheckBoxesMode, AdvancedMenuButtons } from '../../editors/TMMetadataValues';
+import { TMSaveFormButtonSave, TMSaveFormButtonUndo } from '../../forms/TMSaveForm';
+import TMPanel from '../../base/TMPanel';
+import TMModal from '../../base/TMModal';
+import { Gutters, TMColors } from '../../../utils/theme';
+const TMBatchUpdateForm = ({ inputDcmts, TID, DID, isExpertMode = SDKUI_Globals.userSettings.advancedSettings.expertMode === 1, titleModal, isModal = false, widthModal = "100%", heightModal = "100%", onSavedCallbackAsync, onBack, onStatusChanged }) => {
+    const [metadataValues, setMetadataValues] = useState([]);
+    const [metadataValuesOrig, setMetadataValuesOrig] = useState([]);
+    const [validationItems, setValidationItems] = useState([]);
+    const [showAll, setShowAll] = useState(false);
+    const [showDistinctValuesPanel, setShowDistinctValuesPanel] = useState(false);
+    const [showFormulaEditor, setShowFormulaEditor] = useState(false);
+    const [focusedMetadataValue, setFocusedMetadataValue] = useState();
+    const [addOrRemoveEditableList] = useMetadataEditableList();
+    const { abortController, runOperationAsync, showWaitPanel, waitPanelTitle, showPrimary, waitPanelTextPrimary, waitPanelValuePrimary, waitPanelMaxValuePrimary } = useDcmtOperations();
+    const deviceType = useDeviceType();
+    useEffect(() => {
+        if (!TID)
+            return;
+        if (!DID)
+            return;
+        if (isModified)
+            return;
+        retrieveMetadataAsync();
+    }, [TID, DID]);
+    useEffect(() => {
+        validateAsync();
+        onStatusChanged?.(isModified, validationItems.findIndex(o => o.ResultType != ResultTypes.SUCCESS) >= 0);
+    }, [metadataValues]);
+    const validateAsync = async () => {
+        let vil = [];
+        if (metadataValues.filter(o => o.isSelected).length <= 0)
+            vil.push(new ValidationItem(ResultTypes.ERROR, "isSelectd", `${'Selezionare almeno un metadato da aggiornare'}`));
+        else {
+            for (const mvd of metadataValues) {
+                if (!mvd.isSelected)
+                    continue;
+                if (!mvd.value && !mvd.isNull)
+                    vil.push(new ValidationItem(ResultTypes.ERROR, mvd.md?.nameLoc ?? "", `Specificare un valore (${mvd.md?.nameLoc})`));
+            }
+        }
+        setValidationItems(vil);
+    };
+    const retrieveMetadataAsync = async () => {
+        try {
+            await DcmtTypeListCacheService.GetAsync(TID).then(async (dtd) => {
+                let mdList = dtd?.metadata ?? [];
+                await setMetadataListAsync(mdList);
+            });
+        }
+        catch (e) {
+            let err = e;
+            TMExceptionBoxManager.show({ exception: err });
+        }
+    };
+    const setMetadataListAsync = async (mdList) => {
+        try {
+            TMSpinner.show({ description: 'Caricamento metadati...' });
+            let res = await SDK_Globals.tmSession?.NewSearchEngine().GetMetadataAsync(TID, DID, true);
+            let dtd = res?.dtdResult;
+            let rows = dtd.rows ? dtd.rows[0] : [];
+            let mids = res?.selectMIDs;
+            let metadataList = searchResultToMetadataValues(TID, dtd, rows, mids, mdList, LayoutModes.Update)
+                .filter(o => o.md?.dataDomain !== MetadataDataDomains.Computed &&
+                o.md?.perm?.canUpdate === AccessLevels.Yes &&
+                o.md.isSystem !== 1);
+            metadataList.forEach(mvd => { mvd.isSelected = false; mvd.isNull = false; });
+            setMetadataValuesOrig(structuredClone(metadataList));
+            setMetadataValues(structuredClone(metadataList));
+        }
+        catch (e) {
+            TMExceptionBoxManager.show({ exception: e });
+        }
+        finally {
+            TMSpinner.hide();
+        }
+    };
+    const onUndoHandler = () => {
+        setMetadataValues(structuredClone(metadataValuesOrig));
+    };
+    const onSavedAsync = async () => {
+        let dcmts = inputDcmts.slice();
+        dcmts.forEach(o => o.metadataValues = metadataValues);
+        await runOperationAsync(dcmts, DcmtOperationTypes.BatchUpdate, onSavedCallbackAsync);
+    };
+    const getFormula = () => {
+        let fd = new FormulaDescriptor();
+        fd.expression = FormulaHelper.isFormula(focusedMetadataValue?.value) ? FormulaHelper.removeFormulaTag(focusedMetadataValue?.value) : undefined;
+        fd.formulaTarget = FormulaTargets.BatchUpdate;
+        fd.items = FormulaHelper.TreeViewList(TID ?? 0, getSystemMetadata(true), undefined, FormulaTargets.BatchUpdate, SDK_Globals.dbBrand);
+        fd.mid = focusedMetadataValue?.mid ?? 0;
+        fd.tid = TID;
+        return fd;
+    };
+    const isModified = calcIsModified(metadataValues, metadataValuesOrig);
+    const errors = validationItems.filter(o => o.ResultType == ResultTypes.ERROR);
+    const listMaxItems = getListMaxItems(deviceType ?? DeviceType.DESKTOP);
+    const totalItems = metadataValues.filter(o => o.mid && o.mid > 100).length;
+    const metadataValuesSource = metadataValues.filter(o => o.mid && o.mid > 100).slice(0, showAll ? metadataValues.filter(o => o.mid && o.mid > 100).length : listMaxItems);
+    const metadataValuesSourceOrig = metadataValuesOrig.filter(o => o.mid && o.mid > 100).slice(0, showAll ? metadataValuesOrig.filter(o => o.mid && o.mid > 100).length : listMaxItems);
+    const renderContent = () => {
+        return (_jsx(TMLayoutWaitingContainer, { showWaitPanel: showWaitPanel, showWaitPanelPrimary: showPrimary, waitPanelTitle: waitPanelTitle, waitPanelTextPrimary: waitPanelTextPrimary, waitPanelValuePrimary: waitPanelValuePrimary, waitPanelMaxValuePrimary: waitPanelMaxValuePrimary, isCancelable: true, abortController: abortController, children: _jsxs(TMSplitterLayout, { direction: 'horizontal', overflow: 'visible', separatorSize: Gutters.getGutters(), separatorColor: 'transparent', separatorActiveColor: 'transparent', showSeparator: showFormulaEditor, start: showFormulaEditor ? ['50%', '50%'] : ['100%', '0%'], min: ['0', '0'], children: [_jsx(TMPanel, { title: isModal ? 'Modifica i metadati' : `${SDKUI_Localizator.BatchUpdate} (${inputDcmts.length} documenti selezionati)`, onBack: deviceType === DeviceType.MOBILE ? onBack : undefined, 
+                        // onClose={deviceType !== DeviceType.MOBILE ? onBack : undefined}
+                        allowMaximize: !isModal, showHeader: !isModal, children: _jsxs(StyledToolbarCardContainer, { children: [_jsx(TMMetadataValues, { TID: TID, isExpertMode: isExpertMode, showCheckBoxes: ShowCheckBoxesMode.Always, showNullValueCheckBoxes: true, metadataValues: metadataValuesSource, metadataValuesOrig: metadataValuesSourceOrig, validationItems: validationItems, isOpenDistinctValues: showDistinctValuesPanel, selectedMID: focusedMetadataValue?.mid, onFocusedItemChanged: (item) => { setFocusedMetadataValue(item); }, onValueChanged: (newItems) => {
+                                        setMetadataValues((prevItems) => prevItems.map((item) => {
+                                            const newItem = newItems.find((newItem) => newItem.tid === item.tid && newItem.mid === item.mid);
+                                            return newItem ? { ...item, ...newItem } : item;
+                                        }));
+                                    }, onAdvancedMenuClick: (e) => {
+                                        switch (e.button) {
+                                            case AdvancedMenuButtons.DistinctValues:
+                                                setShowDistinctValuesPanel(!showDistinctValuesPanel);
+                                                break;
+                                            case AdvancedMenuButtons.FormulaEditor:
+                                                setShowFormulaEditor(!showFormulaEditor);
+                                                break;
+                                        }
+                                    } }), _jsxs(StyledFormButtonsContainer, { children: [_jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: 10 }, children: _jsxs("div", { style: { display: 'flex', justifyContent: 'center', alignItems: 'center', gap: '8px' }, children: [_jsx(TMSaveFormButtonSave, { showTooltip: false, btnStyle: 'advanced', advancedColor: '#f09c0a', isModified: errors.length <= 0 && isModified, formMode: FormModes.Update, errorsCount: errors.length, onSaveAsync: onSavedAsync }), _jsx(TMSaveFormButtonUndo, { btnStyle: 'toolbar', showTooltip: true, color: 'primary', isModified: isModified, formMode: FormModes.Update, onUndo: onUndoHandler })] }) }), totalItems > listMaxItems && _jsx(TMShowAllOrMaxItemsButton, { showAll: showAll, dataSourceLength: totalItems, onClick: () => { setShowAll(!showAll); } })] }), showDistinctValuesPanel && focusedMetadataValue &&
+                                    _jsx(TMDistinctValues, { isModal: true, tid: TID, mid: focusedMetadataValue?.mid, separator: ', ', allowAppendMode: false, onClosePanelCallback: () => setShowDistinctValuesPanel(false), onSelectionChanged: (e) => {
+                                            if (!e)
+                                                return;
+                                            setMetadataValues((prevItems) => prevItems.map((item) => item.tid == e.tid && item.mid === e.mid ? { ...item, value: e.newValue, isSelected: true } : item));
+                                        } })] }) }), showFormulaEditor && focusedMetadataValue &&
+                        _jsx(TMPanel, { title: SDKUI_Localizator.FormulaEditorTitle + (focusedMetadataValue?.md?.nameLoc ? ` (${focusedMetadataValue?.md?.nameLoc})` : ''), allowMaximize: !isModal, showHeader: !isModal, onClose: () => setShowFormulaEditor(false), children: _jsxs("div", { style: { display: 'flex', flexDirection: 'column', height: '100%', width: '100%' }, children: [isModal && (_jsxs("div", { style: { padding: '8px' }, children: [_jsx("div", { style: { fontSize: '1.2em', fontWeight: 'bold', marginBottom: '10px', color: TMColors.primaryColor, padding: '5px' }, children: SDKUI_Localizator.FormulaEditorTitle + (focusedMetadataValue?.md?.nameLoc ? ` (${focusedMetadataValue?.md?.nameLoc})` : '') }), _jsx("hr", { style: { border: 'none', borderTop: '1px solid #00A99D', margin: '0', width: '100%' } }), " "] })
+                                    // <div style={{ marginBottom: '10px', fontSize: '1.2em', fontWeight: 'bold', padding: '10px', color: TMColors.primaryColor, borderBottom: '1px solid #00A99D ' }}>
+                                    //     {SDKUI_Localizator.FormulaEditorTitle + (focusedMetadataValue?.md?.nameLoc ? ` (${focusedMetadataValue?.md?.nameLoc})` : '')}
+                                    // </div>
+                                    ), _jsx(TMFormulaEditor, { isModal: false, formMode: FormModes.Update, inputData: getFormula(), showBack: false, onClose: () => setShowFormulaEditor(false), onApplied: (newFormula) => {
+                                            setMetadataValues((prevItems) => prevItems.map((item) => item.tid == newFormula.tid && item.mid === newFormula.mid ? { ...item, value: FormulaHelper.addFormulaTag(newFormula.expression), isSelected: true, isEditable: true } : item));
+                                            setFocusedMetadataValue(prevState => ({
+                                                ...prevState,
+                                                isSelected: true,
+                                                isEditable: true,
+                                                value: FormulaHelper.addFormulaTag(newFormula.expression)
+                                            }));
+                                            addOrRemoveEditableList(newFormula.mid);
+                                        } })] }) })] }) }));
+    };
+    return (_jsx(_Fragment, { children: (isModal && onBack)
+            ? _jsx(TMModal, { title: titleModal, onClose: onBack, width: widthModal ?? '100%', height: heightModal ?? '100%', hidePopup: false, askClosingConfirm: true, children: _jsx("div", { style: { width: "100%", height: "100%", display: 'block', padding: "4px" }, children: renderContent() }) })
+            : renderContent() }));
+};
+export default TMBatchUpdateForm;

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

@@ -0,0 +1,8 @@
+import React from 'react';
+interface ITMDcmtBlogProps {
+    tid: number | undefined;
+    did: number | undefined;
+    isVisible?: boolean;
+}
+declare const TMDcmtBlog: React.FC<ITMDcmtBlogProps>;
+export default TMDcmtBlog;

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

@@ -0,0 +1,77 @@
+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
+    // 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 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([]);
+            setLastLoadedDid(undefined); // Reset per consentire un nuovo caricamento quando tid/did diventano validi
+            return;
+        }
+        // Condizione per eseguire il fetch:
+        // 1. Il pannello è visibile
+        // 2. E (non abbiamo ancora caricato dati O il `did` è cambiato rispetto all'ultima volta)
+        const shouldFetch = isVisible && (!hasLoadedDataOnce || did !== lastLoadedDid);
+        // 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);
+        }
+    }, [tid, did, isVisible, hasLoadedDataOnce, lastLoadedDid]);
+    const updateShouldSelectLastBlog = (value) => {
+        setShouldSelectLastBlog(value);
+    };
+    const refreshCallback = async () => {
+        await fetchDataAsync(tid, did);
+    };
+    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: {
+                                    isShowHideFilterEnabled: true,
+                                    isShowHideIDEnaled: true,
+                                    isCommentEnabled: true,
+                                    isDownloadAttachmentEnabled: false,
+                                    isViewEditMetadata: false,
+                                    isDeleteEnabled: true,
+                                    isCopyToClipboardEnabled: true,
+                                    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: [] })] }));
+};
+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;`;

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

@@ -0,0 +1,50 @@
+import React from 'react';
+import { LayoutModes, SearchResultDescriptor, TaskDescriptor } from '@topconsultnpm/sdk-ts';
+import { DcmtInfo, FormModes, TaskContext } from '../../../ts';
+interface ITMDcmtFormProps {
+    TID?: number;
+    DID?: number;
+    layoutMode?: LayoutModes;
+    formMode?: FormModes;
+    allowNavigation?: boolean;
+    allowRelations?: boolean;
+    showHeader?: boolean;
+    showDcmtFormSidebar?: boolean;
+    isExpertMode?: boolean;
+    count?: number;
+    itemIndex?: number;
+    canNext?: boolean;
+    canPrev?: boolean;
+    isClosable?: boolean;
+    groupId?: string;
+    invokedByTodo?: boolean;
+    taskFormDialogComponent?: React.ReactNode;
+    taskMoreInfo?: TaskDescriptor;
+    onNext?: () => void;
+    onPrev?: () => void;
+    onClose?: () => void;
+    onSavedAsyncCallback?: (tid: number | undefined, did: number | undefined, metadataResult?: SearchResultDescriptor | null) => Promise<void>;
+    onSaveRecents?: (TIDs: number[]) => void;
+    onWFOperationCompleted?: () => Promise<void>;
+    onTaskCompleted?: (task: TaskDescriptor) => void;
+    onTaskCreateRequest?: (taskContext: TaskContext, onTaskCreated?: (task?: TaskDescriptor) => void) => void;
+    connectorFileSave?: () => Promise<File>;
+    isModal?: boolean;
+    titleModal?: string;
+    widthModal?: string;
+    heightModal?: string;
+    inputFile?: File | null;
+    inputMids?: Array<{
+        mid: number;
+        value: string;
+    }>;
+    onOpenS4TViewerRequest?: (dcmtInfo: Array<DcmtInfo>, onRefreshSearchAsync?: (() => Promise<void>)) => void;
+    s4TViewerDialogComponent?: React.ReactNode;
+    enableDragDropOverlay?: boolean;
+    passToSearch?: (outputMids: Array<{
+        mid: number;
+        value: string;
+    }>) => void;
+}
+declare const TMDcmtForm: React.FC<ITMDcmtFormProps>;
+export default TMDcmtForm;