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

package/lib/components/editors/TMHtmlEditor.js

@@ -4,8 +4,35 @@ import HtmlEditor, { Toolbar, Item } from 'devextreme-react/html-editor';
 import ReactDOM from 'react-dom';
 import { SDKUI_Localizator } from '../../helper';
 import TMVilViewer from '../base/TMVilViewer';
+import { TMMessageBoxManager, ButtonNames } from '../base/TMPopUp';
+import TMTooltip from '../base/TMTooltip';
+import { useDeviceType, DeviceType } from '../base/TMDeviceProvider';
+export const sanitizeAndFormatComment = (raw = "") => {
+    if (!raw)
+        return "";
+    let cleanComment = raw
+        // Simplify dx-mention markup - replace with just @username
+        .replace(/<span class="dx-mention"[^>]*>\uFEFF?<span[^>]*><span>@<\/span>([^<]+)<\/span>\uFEFF?<\/span>/gi, '@$1')
+        // 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();
+    // Remove dangerous HTML elements
+    cleanComment = cleanComment.replace(/<(script|iframe|embed|object|link|style|img|video|audio|svg|form|input|button|textarea|select|pre|function)[^>]*>/gi, '');
+    return cleanComment;
+};
 const TMHtmlEditor = (props) => {
-    const { width = "100%", height = "100%", initialMarkup = "", mentionsConfig, onValueChanged, validationItems = [], isEditorEnabled: isEditorEnabledProp = false, toolbarMode = 'compact', autoFocus = false } = props;
+    const { width = "100%", height = "100%", initialMarkup = "", mentionsConfig, onValueChanged, validationItems = [], isEditorEnabled: isEditorEnabledProp = false, toolbarMode = 'compact', autoFocus = false, maxLength = 1000, showCount = true, } = props;
+    // Get the current device type (e.g., mobile, tablet, desktop) using a custom hook.
+    const deviceType = useDeviceType();
+    // This avoids unnecessary re-renders by only recalculating when deviceType changes.
+    let isMobile = useMemo(() => { return deviceType === DeviceType.MOBILE; }, [deviceType]);
     // Ref for HtmlEditor instance
     const editorRef = useRef(null);
     // State for editor enable/disable
@@ -14,13 +41,15 @@ const TMHtmlEditor = (props) => {
     const [markup, setMarkup] = useState(initialMarkup);
     // State to track the position (x, y coordinates) where the custom context menu should be displayed.
     const [contextMenuPos, setContextMenuPos] = useState(null);
-    // State to indicate whether a paste operation is currently in progress
-    const [isPasting, setIsPasting] = useState(false);
+    // State to track remaining characters
+    const [charactersRemaining, setCharactersRemaining] = useState(maxLength - initialMarkup.length);
+    useEffect(() => {
+        const cleanedMarkup = sanitizeAndFormatComment(markup);
+        setCharactersRemaining(maxLength - cleanedMarkup.length);
+    }, [markup, maxLength]);
     // Function to read text from the clipboard, format it, and paste into the Quill editor
     const pasteFromClipboard = async () => {
         try {
-            // Set flag to indicate paste operation is in progress
-            setIsPasting(true);
             // Read plain text from the clipboard asynchronously
             let text = await navigator.clipboard.readText();
             text = '<p>' + text.replace(/\r\n/g, '</p><p>') + '</p>';
@@ -52,10 +81,6 @@ const TMHtmlEditor = (props) => {
             // Log any errors that might occur during clipboard access or pasting
             console.warn('Clipboard paste failed:', err);
         }
-        finally {
-            // Reset paste state after a short delay to restore UI state
-            setTimeout(() => setIsPasting(false), 500);
-        }
     };
     useEffect(() => {
         const handleKeyDown = (e) => {
@@ -116,7 +141,7 @@ const TMHtmlEditor = (props) => {
     }, [autoFocus]);
     // Memoized check for validation errors
     const hasValidationErrors = useMemo(() => {
-        return !isPasting && validationItems && validationItems.length > 0;
+        return validationItems && validationItems.length > 0;
     }, [validationItems]);
     // Handler function triggered by the context menu's "Paste" action
     const handlePaste = async () => {
@@ -125,9 +150,44 @@ const TMHtmlEditor = (props) => {
         // Close the custom context menu after pasting
         setContextMenuPos(null);
     };
-    return (_jsxs("div", { style: { height: hasValidationErrors ? `calc(${height} - 30px)` : "100%", width: width }, onContextMenu: handleContextMenu, children: [_jsx("div", { className: "custom-mentions-wrapper", style: { borderWidth: '1px', borderStyle: 'solid', borderColor: hasValidationErrors ? "red" : "#e0e0e0 #e0e0e0 #616161", width: "100%", height: "100%" }, children: _jsx(HtmlEditor, { ref: editorRef, placeholder: SDKUI_Localizator.TypeAMessage + "...", width: "100%", height: "100%", value: markup, onValueChange: onValueChangeCallback, mentions: mentionsConfig, style: { overflow: 'hidden', outline: "none", fontSize: '1rem' }, children: isEditorEnabled && (toolbarMode === 'compact' ?
+    return (_jsxs("div", { style: {
+            height: height,
+            width: width
+        }, children: [_jsx("div", { className: "custom-mentions-wrapper", onContextMenu: handleContextMenu, style: {
+                    borderWidth: '1px',
+                    borderStyle: 'solid',
+                    borderColor: hasValidationErrors ? "red" : "#e0e0e0 #e0e0e0 #616161",
+                    width: "100%",
+                    height: `calc(100% - ${showCount ? 15 : 0}px - ${validationItems.length > 0 ? 15 : 0}px)`,
+                }, children: _jsx(HtmlEditor, { ref: editorRef, placeholder: SDKUI_Localizator.TypeAMessage + "...", width: "100%", height: "100%", value: markup, onValueChange: onValueChangeCallback, mentions: mentionsConfig, style: { overflow: 'hidden', outline: "none", fontSize: '1rem' }, children: isEditorEnabled && (toolbarMode === 'compact' ?
                         _jsxs(Toolbar, { multiline: false, children: [_jsx(Item, { name: "undo" }), _jsx(Item, { name: "redo" }), _jsx(Item, { name: "separator" }), _jsx(Item, { name: "bold" }), _jsx(Item, { name: "italic" }), _jsx(Item, { name: "strike" }), _jsx(Item, { name: "underline" }), _jsx(Item, { name: "separator" }), _jsx(Item, { name: "orderedList" }), _jsx(Item, { name: "bulletList" })] }) :
-                        _jsxs(Toolbar, { children: [_jsx(Item, { name: "undo" }), _jsx(Item, { name: "redo" }), _jsx(Item, { name: "separator" }), _jsx(Item, { name: "separator" }), _jsx(Item, { name: "bold" }), _jsx(Item, { name: "italic" }), _jsx(Item, { name: "strike" }), _jsx(Item, { name: "underline" }), _jsx(Item, { name: "separator" }), _jsx(Item, { name: "alignLeft" }), _jsx(Item, { name: "alignCenter" }), _jsx(Item, { name: "alignRight" }), _jsx(Item, { name: "alignJustify" }), _jsx(Item, { name: "separator" }), _jsx(Item, { name: "color" }), _jsx(Item, { name: "background" }), _jsx(Item, { name: "separator" }), _jsx(Item, { name: "link" }), _jsx(Item, { name: "image" }), _jsx(Item, { name: "separator" })] })) }) }), !isPasting && validationItems.length > 0 && (_jsx("div", { style: { width: "100%", height: "30px" }, children: _jsx(TMVilViewer, { vil: validationItems }) })), contextMenuPos &&
+                        _jsxs(Toolbar, { children: [_jsx(Item, { name: "undo" }), _jsx(Item, { name: "redo" }), _jsx(Item, { name: "separator" }), _jsx(Item, { name: "separator" }), _jsx(Item, { name: "bold" }), _jsx(Item, { name: "italic" }), _jsx(Item, { name: "strike" }), _jsx(Item, { name: "underline" }), _jsx(Item, { name: "separator" }), _jsx(Item, { name: "alignLeft" }), _jsx(Item, { name: "alignCenter" }), _jsx(Item, { name: "alignRight" }), _jsx(Item, { name: "alignJustify" }), _jsx(Item, { name: "separator" }), _jsx(Item, { name: "color" }), _jsx(Item, { name: "background" }), _jsx(Item, { name: "separator" }), _jsx(Item, { name: "link" }), _jsx(Item, { name: "image" }), _jsx(Item, { name: "separator" })] })) }) }), showCount ? ((() => {
+                const cleanedMarkup = sanitizeAndFormatComment(markup);
+                const showInfoIcon = charactersRemaining !== maxLength;
+                return (_jsxs("div", { style: {
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'flex-end',
+                        fontSize: 12,
+                        color: '#6c757d',
+                        marginTop: 4,
+                        gap: 4,
+                    }, children: [`${Math.max(charactersRemaining, 0)} ${SDKUI_Localizator.CharactersRemaining}`, showInfoIcon && (_jsx(TMTooltip, { content: 'Markup HTML', children: _jsx("span", { className: "dx-icon-codeblock", style: { fontSize: 22, cursor: 'pointer' }, onClick: () => {
+                                    TMMessageBoxManager.show({
+                                        title: 'Markup HTML',
+                                        initialWidth: !isMobile ? '700px' : undefined,
+                                        message: (_jsx("pre", { style: {
+                                                whiteSpace: 'pre-wrap',
+                                                background: '#f5f5f5',
+                                                padding: '12px',
+                                                borderRadius: '6px',
+                                            }, children: cleanedMarkup })),
+                                        resizable: true,
+                                        showToppy: false,
+                                        buttons: [ButtonNames.OK],
+                                    });
+                                } }) }))] }));
+            })()) : null, validationItems.length > 0 && _jsx(TMVilViewer, { vil: validationItems }), contextMenuPos &&
                 ReactDOM.createPortal(_jsxs("div", { style: {
                         position: 'fixed',
                         top: contextMenuPos.y,

package/lib/components/editors/TMMetadataValues.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useEffect, useState } from "react";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
 import styled from "styled-components";
 import { AccessLevels, DcmtTypeListCacheService, LayoutItemTypes, LayoutModes, MetadataDataDomains, MetadataDataTypes, SDK_Globals, SystemMIDsAsNumber, SystemTIDs, TemplateTIDs, WorkItemMetadataNames } from '@topconsultnpm/sdk-ts';
 import { IconUndo, IconPencil, IconFunction, IconMenuVertical, IconDataList, SDKUI_Localizator, IconNull, stringIsNullOrEmpty, deepCompare, SDKUI_Globals, IconDcmtTypeSys } from "../../helper";
@@ -10,7 +10,7 @@ import TMTooltip from "../base/TMTooltip";
 import TMCheckBox from "./TMCheckBox";
 import TMMetadataEditor, { useMetadataEditableList } from "./TMMetadataEditor";
 import { FormulaHelper } from "./TMFormulaEditor";
-import { DraftsMIDs } from "../../ts";
+import { DraftsMIDs, DSAttachsMIDs } from "../../ts";
 import { TMNothingToShow } from "../features/documents/TMDcmtPreview";
 import TMAccordion from "../base/TMAccordion";
 export var ShowCheckBoxesMode;
@@ -33,7 +33,7 @@ const TMMetadataValues = ({ showCheckBoxes = ShowCheckBoxesMode.Never, checkPerm
     const [selectedItem, setSelectedItem] = useState(undefined);
     const [prevMetadataValues, setPrevMetadataValues] = useState([]);
     const [inputMidsApplied, setInputMidsApplied] = useState(false);
-    const onChangeHandler = (newValue, mid) => {
+    const onChangeHandler = useCallback((newValue, mid) => {
         let newValues = structuredClone(metadataValues);
         const item = newValues.find(value => value.mid === mid);
         if (item) {
@@ -51,25 +51,25 @@ const TMMetadataValues = ({ showCheckBoxes = ShowCheckBoxesMode.Never, checkPerm
             }
         }
         onValueChanged?.(newValues);
-    };
-    const editorValidationHandler = (mid) => {
+    }, [metadataValues, showCheckBoxes, dynDataListsToBeRefreshed, onValueChanged]);
+    const editorValidationHandler = useCallback((mid) => {
         const md = metadataValues?.find(m => m.mid === mid);
         const validationItem = validationItems.find(vil => vil.PropertyName === md?.md?.nameLoc);
         return validationItem ? [validationItem] : [];
-    };
-    const isEditable = (mid) => {
+    }, [metadataValues, validationItems]);
+    const isEditable = useCallback((mid) => {
         let md = currentDTD?.metadata?.find(o => o.id == mid);
         if (!md)
             return false;
         let isList = md.dataDomain == MetadataDataDomains.DataList || md.dataDomain == MetadataDataDomains.DynamicDataList || md.dataDomain == MetadataDataDomains.UserID;
         return isList && isEditableList(mid);
-    };
-    const handleMetadataValueSelection = (item) => {
+    }, [currentDTD, isEditableList]);
+    const handleMetadataValueSelection = useCallback((item) => {
         if (selectedItem?.mid !== item.mid) {
             setSelectedItem(item);
             onFocusedItemChanged?.(item);
         }
-    };
+    }, [selectedItem, onFocusedItemChanged]);
     useEffect(() => {
         if (!TID) {
             setCurrentDTD(undefined);
@@ -184,7 +184,7 @@ const TMMetadataValues = ({ showCheckBoxes = ShowCheckBoxesMode.Never, checkPerm
         }
         return toBeRefreshed;
     };
-    const getAdvancedMenuItems = (mvd) => {
+    const getAdvancedMenuItems = useCallback((mvd) => {
         let md = mvd.md;
         if (!md)
             return [];
@@ -241,9 +241,9 @@ const TMMetadataValues = ({ showCheckBoxes = ShowCheckBoxesMode.Never, checkPerm
             ...customMenuItems
         ];
         return menu;
-    };
+    }, [checkPerms, isExpertMode, customMenuItems, metadataValues, onAdvancedMenuClick, onValueChanged]);
     // Helper function to render a single metadata item
-    const renderMetadataItem = (item, isReadOnlyOverride = false) => (_jsxs(StyledRow, { style: { marginTop: item.md?.dataType === MetadataDataTypes.DateTime ? '6px' : '0', gap: '8px' }, onClick: () => { handleMetadataValueSelection(item); }, onFocus: () => { handleMetadataValueSelection(item); }, children: [showCheckBoxes !== ShowCheckBoxesMode.Never &&
+    const renderMetadataItem = useCallback((item, isReadOnlyOverride = false) => (_jsxs(StyledRow, { style: { marginTop: item.md?.dataType === MetadataDataTypes.DateTime ? '6px' : '0', gap: '8px' }, onClick: () => { handleMetadataValueSelection(item); }, onFocus: () => { handleMetadataValueSelection(item); }, children: [showCheckBoxes !== ShowCheckBoxesMode.Never &&
                 _jsx(TMCheckBox, { elementStyle: { marginTop: item.md?.dataType === MetadataDataTypes.DateTime ? '14px' : '20px' }, value: item.isSelected, disabled: showCheckBoxes === ShowCheckBoxesMode.AlwaysReadOnly, onValueChanged: (newValue) => {
                         let newValues = structuredClone(metadataValues);
                         const mvd = newValues.find(value => value.mid === item.mid);
@@ -296,8 +296,8 @@ const TMMetadataValues = ({ showCheckBoxes = ShowCheckBoxesMode.Never, checkPerm
                                     mvd.isSelected = !stringIsNullOrEmpty(mvd.value);
                             }
                             onValueChanged?.(newValues);
-                        } }) }), !isReadOnly && _jsx("div", { style: { marginTop: item.md?.dataType === MetadataDataTypes.DateTime ? '12px' : '18px' }, onClick: () => { handleMetadataValueSelection(item); }, children: _jsx(TMDropDownMenu, { backgroundColor: 'white', color: TMColors.button_icon, borderRadius: '3px', content: _jsx(TMButton, { btnStyle: 'icon', icon: _jsx(IconMenuVertical, {}), showTooltip: false }), disabled: item.isLexProt === 1, items: getAdvancedMenuItems(item) }) })] }, item.mid));
-    const layoutWorkItem = () => {
+                        } }) }), !isReadOnly && _jsx("div", { style: { marginTop: item.md?.dataType === MetadataDataTypes.DateTime ? '12px' : '18px' }, onClick: () => { handleMetadataValueSelection(item); }, children: _jsx(TMDropDownMenu, { backgroundColor: 'white', color: TMColors.button_icon, borderRadius: '3px', content: _jsx(TMButton, { btnStyle: 'icon', icon: _jsx(IconMenuVertical, {}), showTooltip: false }), disabled: item.isLexProt === 1, items: getAdvancedMenuItems(item) }) })] }, item.mid)), [TID, showCheckBoxes, showNullValueCheckBoxes, isReadOnly, layoutMode, selectedMID, isOpenDistinctValues, openChooserBySingleClick, dynDataListsToBeRefreshed, metadataValues, metadataValuesOrig, validationItems, onValueChanged, handleMetadataValueSelection, getAdvancedMenuItems, onChangeHandler, editorValidationHandler, isEditable]);
+    const layoutWorkItem = useMemo(() => {
         const workItemData = [];
         const technicalWorkItemData = [];
         const documentData = [];
@@ -328,8 +328,8 @@ const TMMetadataValues = ({ showCheckBoxes = ShowCheckBoxesMode.Never, checkPerm
             }
         });
         return (_jsxs("div", { style: { width: '100%' }, children: [documentData.length > 0 && _jsx(TMAccordion, { title: SDKUI_Localizator.DocumentData, children: documentData.map(item => renderMetadataItem(item)) }), workItemData.length > 0 && _jsx(TMAccordion, { title: SDKUI_Localizator.WorkItemData, children: workItemData.map(item => renderMetadataItem(item, true)) }), technicalWorkItemData.length > 0 && _jsx(TMAccordion, { title: SDKUI_Localizator.WorkItemTechnicalData, defaultCollapsed: true, children: technicalWorkItemData.map(item => renderMetadataItem(item, true)) })] }));
-    };
-    const layoutDraft = () => {
+    }, [metadataValues, showCheckBoxes, showNullValueCheckBoxes, isReadOnly, dynDataListsToBeRefreshed, validationItems, selectedMID, isOpenDistinctValues, openChooserBySingleClick, metadataValuesOrig]);
+    const layoutDraft = useMemo(() => {
         // Definiamo l'ordine desiderato per gli elementi
         const desiredDraftOrder = [
             DraftsMIDs.Name,
@@ -384,36 +384,73 @@ const TMMetadataValues = ({ showCheckBoxes = ShowCheckBoxesMode.Never, checkPerm
                 checkOutData.push(tempCICODataMap[id]);
             }
         });
-        return (_jsxs("div", { style: { width: '100%' }, children: [draftData.length > 0 && _jsx(TMAccordion, { title: SDKUI_Localizator.Draft, children: draftData.map(item => renderMetadataItem(item)) }), checkOutData.length > 0 && _jsx(TMAccordion, { title: `${SDKUI_Localizator.CheckIn}/${SDKUI_Localizator.CheckOut}`, children: checkOutData.map(item => renderMetadataItem(item, true)) })] }));
-    };
-    const layoutCustom = () => {
+        return (_jsxs("div", { style: { width: '100%' }, children: [draftData.length > 0 && _jsx(TMAccordion, { title: SDKUI_Localizator.Draft, children: draftData.map(item => renderMetadataItem(item, isReadOnly)) }), checkOutData.length > 0 && _jsx(TMAccordion, { title: `${SDKUI_Localizator.CheckIn}/${SDKUI_Localizator.CheckOut}`, children: checkOutData.map(item => renderMetadataItem(item, true)) })] }));
+    }, [metadataValues, showCheckBoxes, showNullValueCheckBoxes, isReadOnly, dynDataListsToBeRefreshed, validationItems, selectedMID, isOpenDistinctValues, openChooserBySingleClick, metadataValuesOrig]);
+    const layoutDsAttachs = useMemo(() => {
+        const dsAttachsData = [];
+        metadataValues.forEach(item => {
+            switch (item.md?.id) {
+                // case DSAttachsMIDs.DSID:
+                case DSAttachsMIDs.Name:
+                case DSAttachsMIDs.Description:
+                    dsAttachsData.push(item);
+                    break;
+                default:
+                    break;
+            }
+        });
+        return (_jsx("div", { style: { width: '100%' }, children: dsAttachsData.length > 0 && _jsx(TMAccordion, { title: SDKUI_Localizator.Attachment, children: dsAttachsData.map(item => renderMetadataItem(item, isReadOnly)) }) }));
+    }, [metadataValues, showCheckBoxes, showNullValueCheckBoxes, isReadOnly, dynDataListsToBeRefreshed, validationItems, selectedMID, isOpenDistinctValues, openChooserBySingleClick, metadataValuesOrig]);
+    const layoutCustom = useMemo(() => {
         if (!layout || !layout.items || layout.items.length === 0) {
             return metadataValues.map((item) => renderMetadataItem(item));
         }
-        // Build a map of items by ID for quick lookup
+        // Build a map of items by ID for quick lookup (include negative/zero IDs)
         const itemsById = new Map();
         layout.items.forEach(item => {
-            if (item.layoutItemID) {
+            if (item.layoutItemID !== undefined && item.layoutItemID !== null) {
                 itemsById.set(item.layoutItemID, item);
             }
         });
-        // Find root items (items without parent or parent === 0)
-        const rootItems = layout.items.filter(item => !item.parentID || item.parentID === 0);
-        // Recursive function to get children of an item
+        // Determine root items. Prefer explicit LayoutRoot items if present;
+        // otherwise fall back to items with no parent (parentID undefined or -1).
+        const hasExplicitRoot = layout.items.some(item => item.type === LayoutItemTypes.LayoutRoot);
+        const rootItems = hasExplicitRoot
+            ? layout.items.filter(item => item.type === LayoutItemTypes.LayoutRoot)
+            : layout.items.filter(item => item.parentID === undefined || item.parentID === -1);
+        // Recursive function to get children of an item. Handle parentID === -1 and undefined
+        // because some layouts use -1 for root while children use undefined.
         const getChildren = (parentID) => {
+            if (parentID === -1) {
+                return layout.items?.filter(item => item.parentID === -1 || item.parentID === undefined) || [];
+            }
+            if (parentID === undefined) {
+                return layout.items?.filter(item => item.parentID === undefined) || [];
+            }
             return layout.items?.filter(item => item.parentID === parentID) || [];
         };
         // Recursive function to render layout items with depth tracking for indentation
-        const renderLayoutItem = (layoutItem, depth = 0) => {
+        // Prevent infinite recursion by tracking visited layoutItemIDs (handles malformed layouts where an item
+        // may reference itself as a child or cycles exist).
+        const renderLayoutItem = (layoutItem, depth = 0, visited = new Set()) => {
+            const id = layoutItem.layoutItemID ?? 0;
+            if (visited.has(id))
+                return null;
+            visited.add(id);
+            // Check if this is a LayoutRoot - just render its children
+            if (layoutItem.type === LayoutItemTypes.LayoutRoot) {
+                const children = getChildren(layoutItem.layoutItemID);
+                return (_jsx(React.Fragment, { children: children.map(child => renderLayoutItem(child, depth, visited)) }, `root-${layoutItem.layoutItemID}`));
+            }
             // Check if this is a LayoutGroup
-            if (layoutItem.type === LayoutItemTypes.LayoutGroup && layoutItem.lgd) {
-                const children = getChildren(layoutItem.layoutItemID ?? 0);
+            else if (layoutItem.type === LayoutItemTypes.LayoutGroup && layoutItem.lgd) {
+                const children = getChildren(layoutItem.layoutItemID);
                 const groupDescriptor = layoutItem.lgd;
                 const groupTitle = groupDescriptor.caption || `Group ${layoutItem.layoutItemID}`;
                 const isCollapsed = false; // LayoutGroupDescriptor doesn't have collapsed property
                 // Apply indentation only to subgroups (depth > 0), not to root groups
                 const indentationPx = depth > 0 ? depth * 10 : 0;
-                return (_jsx("div", { style: { paddingLeft: `${indentationPx}px` }, children: _jsx(TMAccordion, { title: groupTitle, defaultCollapsed: isCollapsed, children: children.map(child => renderLayoutItem(child, depth + 1)) }) }, `group-wrapper-${layoutItem.layoutItemID}`));
+                return (_jsx("div", { style: { paddingLeft: `${indentationPx}px` }, children: _jsx(TMAccordion, { title: groupTitle, defaultCollapsed: isCollapsed, children: children.map(child => renderLayoutItem(child, depth + 1, visited)) }) }, `group-wrapper-${layoutItem.layoutItemID}`));
             }
             // Check if this is a LayoutControlItem (metadata field)
             else if (layoutItem.type === LayoutItemTypes.LayoutControlItem && layoutItem.lcid) {
@@ -425,8 +462,9 @@ const TMMetadataValues = ({ showCheckBoxes = ShowCheckBoxesMode.Never, checkPerm
                 const metadataItem = metadataValues.find(m => m.mid === mid);
                 if (!metadataItem)
                     return null;
-                // No indentation for control items - they maintain their original styling
-                return (_jsx(React.Fragment, { children: renderMetadataItem(metadataItem) }, `control-${layoutItem.layoutItemID}`));
+                // Indent control items based on depth so they align under groups
+                const controlIndentPx = depth > 0 ? depth * 10 : 15;
+                return (_jsx("div", { style: { paddingLeft: `${controlIndentPx}px` }, children: renderMetadataItem(metadataItem) }, `control-${layoutItem.layoutItemID}`));
             }
             // Check if this is a SeparatorItem (horizontal line)
             else if (layoutItem.type === LayoutItemTypes.SeparatorItem) {
@@ -434,27 +472,39 @@ const TMMetadataValues = ({ showCheckBoxes = ShowCheckBoxesMode.Never, checkPerm
             }
             return null;
         };
-        return (_jsx("div", { style: { width: '100%' }, children: rootItems.map(item => renderLayoutItem(item, 0)) }));
-    };
-    const renderForm = () => {
+        return (_jsx("div", { style: { width: '100%' }, children: (() => {
+                const visited = new Set();
+                return rootItems.map(item => renderLayoutItem(item, 0, visited));
+            })() }));
+    }, [layout, metadataValues, showCheckBoxes, showNullValueCheckBoxes, isReadOnly, dynDataListsToBeRefreshed, validationItems, selectedMID, isOpenDistinctValues, openChooserBySingleClick, metadataValuesOrig]);
+    const renderForm = useMemo(() => {
+        // Se currentDTD non è ancora stato caricato, non renderizzare nulla
+        if (!currentDTD) {
+            return null;
+        }
+        // Se tutti i metadata sono di sistema, renderizziamo tutti in sola lettura senza layout
+        const allSystem = metadataValues.length > 0 && metadataValues.every(item => item.md?.isSystem === 1);
+        if (allSystem) {
+            return metadataValues.map((item) => renderMetadataItem(item, true));
+        }
         if (currentDTD?.templateTID === TemplateTIDs.WF_WIApprView && !isReadOnly) {
-            return layoutWorkItem();
+            return layoutWorkItem;
         }
         switch (currentDTD?.id) {
-            case SystemTIDs.Drafts: return !isReadOnly ? layoutDraft() : metadataValues.map((item) => renderMetadataItem(item));
+            case SystemTIDs.Drafts: return layoutDraft;
             // case SystemTIDs.Chronology: break;
-            // case SystemTIDs.DSAttachs: break;
+            case SystemTIDs.DSAttachs: return layoutDsAttachs;
             default:
                 // Se è presente un layout personalizzato, usalo, altrimenti usa il rendering standard
                 if (layout && layout.items && layout.items.length > 0) {
-                    return layoutCustom();
+                    return layoutCustom;
                 }
                 return metadataValues.map((item) => renderMetadataItem(item));
         }
-    };
+    }, [currentDTD, metadataValues, layout, isReadOnly, showCheckBoxes, showNullValueCheckBoxes, dynDataListsToBeRefreshed, validationItems, selectedMID, isOpenDistinctValues, openChooserBySingleClick, metadataValuesOrig]);
     return (_jsx(StyledMetadataValuesContainer, { children: !TID ?
             _jsx(TMNothingToShow, { text: `${SDKUI_Localizator.NoDcmtSelected}.`, secondText: `${SDKUI_Localizator.MetadataSystem} - ${SDKUI_Localizator.NotAvailable}`, icon: _jsx(IconDcmtTypeSys, { fontSize: 96 }) }) :
-            _jsx(_Fragment, { children: renderForm() }) }));
+            _jsx(_Fragment, { children: renderForm }) }));
 };
 export default TMMetadataValues;
 //#region  Styled Components

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;