@topconsultnpm/sdkui-react 6.20.0-test1 → 6.21.0-dev1.2

package/lib/components/editors/TMMetadataValues.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 import styled from "styled-components";
-import { AccessLevels, DcmtTypeListCacheService, LayoutGroupBorderStyles, LayoutGroupOrientations, LayoutItemTypes, LayoutModes, MetadataDataDomains, MetadataDataTypes, SDK_Globals, SystemMIDsAsNumber, SystemTIDs, WorkItemMetadataNames } from '@topconsultnpm/sdk-ts';
-import { IconUndo, IconPencil, IconFunction, IconMenuVertical, IconDataList, SDKUI_Localizator, IconNull, stringIsNullOrEmpty, deepCompare, SDKUI_Globals, IconDcmtTypeSys, isApprovalWorkflowView } from "../../helper";
+import { AccessLevels, AppModules, DcmtTypeListCacheService, LayoutGroupBorderStyles, LayoutGroupOrientations, LayoutItemTypes, LayoutModes, MetadataDataDomains, MetadataDataTypes, SDK_Globals, SystemMIDsAsNumber, SystemTIDs, WorkItemMetadataNames } from '@topconsultnpm/sdk-ts';
+import { IconUndo, IconPencil, IconFunction, IconMenuVertical, IconDataList, SDKUI_Localizator, IconNull, stringIsNullOrEmpty, deepCompare, SDKUI_Globals, IconDcmtTypeSys, isApprovalWorkflowView, StyledTabItem, getAppModuleGradient } from "../../helper";
 import { TMColors } from "../../utils/theme";
 import TMButton from "../base/TMButton";
 import TMDropDownMenu from "../base/TMDropDownMenu";
@@ -14,6 +14,7 @@ import { ChronologyMIDs, DraftsMIDs, DSAttachsMIDs } from "../../ts";
 import { TMNothingToShow } from "../features/documents/TMDcmtPreview";
 import TMAccordion from "../base/TMAccordion";
 import TabPanel, { Item } from 'devextreme-react/tab-panel';
+import { TMExceptionBoxManager } from "../base/TMPopUp";
 export var ShowCheckBoxesMode;
 (function (ShowCheckBoxesMode) {
     ShowCheckBoxesMode[ShowCheckBoxesMode["Never"] = 0] = "Never";
@@ -34,7 +35,6 @@ const TMMetadataValues = ({ showCheckBoxes = ShowCheckBoxesMode.Never, checkPerm
     const [selectedItem, setSelectedItem] = useState(undefined);
     const [prevMetadataValues, setPrevMetadataValues] = useState([]);
     const [inputMidsApplied, setInputMidsApplied] = useState(false);
-    const [selectedIndex, setSelectedIndex] = useState(0);
     const onChangeHandler = useCallback((newValue, mid) => {
         let newValues = structuredClone(metadataValues);
         const item = newValues.find(value => value.mid === mid);
@@ -78,10 +78,20 @@ const TMMetadataValues = ({ showCheckBoxes = ShowCheckBoxesMode.Never, checkPerm
             setDynDataListsToBeRefreshed([]);
             return;
         }
-        // Passiamo did = undefined, perché è già in cache
-        DcmtTypeListCacheService.GetWithNotGrantedAsync(TID, undefined).then((resultDTD) => {
-            setCurrentDTD(resultDTD);
-        });
+        const fetchData = async () => {
+            try {
+                let resultDTD = await DcmtTypeListCacheService.GetAsync(TID);
+                if (!resultDTD) {
+                    // Passiamo did = undefined, perché è già in cache
+                    resultDTD = await DcmtTypeListCacheService.GetWithNotGrantedAsync(TID, undefined);
+                }
+                setCurrentDTD(resultDTD);
+            }
+            catch (error) {
+                TMExceptionBoxManager.show({ exception: error });
+            }
+        };
+        fetchData();
     }, [TID]);
     useEffect(() => {
         if (metadataValues.length <= 0)
@@ -165,7 +175,8 @@ const TMMetadataValues = ({ showCheckBoxes = ShowCheckBoxesMode.Never, checkPerm
         if (!d)
             return;
         let toBeRefreshed = [];
-        let dynDlDataSource = await SDK_Globals.tmSession?.NewSearchEngine().GetDynDataListValuesAsync(tid, mid, layoutMode, qParams);
+        let dynDlDataSource = await SDK_Globals.tmSession?.NewSearchEngine().GetDynDataListValuesAsync(tid, mid, layoutMode, qParams)
+            .catch((err) => { TMExceptionBoxManager.show({ exception: err }); });
         if (!d.onValueChanged_DynDataListsToBeRefreshed)
             return;
         let row = dynDlDataSource?.dtdResult?.rows?.filter(o => o[d.selectItemForValue ?? 0] == value);
@@ -420,6 +431,55 @@ const TMMetadataValues = ({ showCheckBoxes = ShowCheckBoxesMode.Never, checkPerm
         });
         return (_jsx("div", { style: { width: '100%' }, children: chronologyData.length > 0 && chronologyData.map(item => renderMetadataItem(item, isReadOnly)) }));
     }, [metadataValues, showCheckBoxes, showNullValueCheckBoxes, isReadOnly, dynDataListsToBeRefreshed, validationItems, selectedMID, isOpenDistinctValues, openChooserBySingleClick, metadataValuesOrig]);
+    // Mappa TabLayoutItemID -> conteggio errori e dettagli per mostrare il badge sul tab
+    const tabErrorCountMap = useMemo(() => {
+        const map = new Map();
+        if (!layout || !layout.items || layout.items.length === 0 || !layout.showTab) {
+            return map;
+        }
+        // Trova i tab (LayoutGroup con parentID === 0 e orientation Vertical)
+        const tabGroups = layout.items.filter(item => item.type === LayoutItemTypes.LayoutGroup &&
+            item.parentID === 0 &&
+            item.lgd?.orientation === LayoutGroupOrientations.Vertical);
+        // Funzione ricorsiva per trovare tutti i MID figli di un tab
+        const findMidsInGroup = (parentID) => {
+            const mids = [];
+            const children = layout.items?.filter(item => item.parentID === parentID) || [];
+            for (const child of children) {
+                if (child.type === LayoutItemTypes.LayoutControlItem && child.lcid?.mid) {
+                    mids.push(child.lcid.mid);
+                }
+                else if (child.type === LayoutItemTypes.LayoutGroup) {
+                    mids.push(...findMidsInGroup(child.layoutItemID));
+                }
+            }
+            return mids;
+        };
+        // Per ogni tab, conta gli errori e raccoglie i dettagli
+        for (const tabGroup of tabGroups) {
+            const tabId = tabGroup.layoutItemID;
+            if (tabId === undefined)
+                continue;
+            const midsInTab = findMidsInGroup(tabId);
+            const errorDetails = [];
+            for (const mid of midsInTab) {
+                const md = metadataValues.find(m => m.mid === mid);
+                if (md) {
+                    const validationItem = validationItems.find(v => v.PropertyName === md.md?.nameLoc);
+                    if (validationItem) {
+                        errorDetails.push({
+                            fieldName: md.md?.nameLoc ?? '',
+                            message: validationItem.Message ?? ''
+                        });
+                    }
+                }
+            }
+            if (errorDetails.length > 0) {
+                map.set(tabId, { count: errorDetails.length, details: errorDetails });
+            }
+        }
+        return map;
+    }, [layout, metadataValues, validationItems]);
     const layoutDsAttachs = useMemo(() => {
         const dsAttachsData = [];
         metadataValues.forEach(item => {
@@ -463,22 +523,56 @@ const TMMetadataValues = ({ showCheckBoxes = ShowCheckBoxesMode.Never, checkPerm
             }
             return layout.items?.filter(item => item.parentID === parentID) || [];
         };
-        // Recursive function to render layout items with depth tracking for indentation
-        // Prevent infinite recursion by tracking visited layoutItemIDs (handles malformed layouts where an item
-        // may reference itself as a child or cycles exist).
+        /**
+         * Renderizza ricorsivamente l'albero del layout partendo dalla radice e scendendo verso i figli.
+         *
+         * Tipi gestiti:
+         * - LayoutRoot: elemento radice, renderizza i figli come tab (se showTab) o come contenitore semplice
+         * - LayoutGroup: contenitori con orientamento (Vertical/Horizontal) e stili bordo (NoBorder, Group, GroupBox, Tabbed)
+         * - LayoutControlItem: campi metadata terminali, recuperati tramite MID e passati a renderMetadataItem
+         * - SeparatorItem: linee di separazione orizzontali
+         *
+         * @param layoutItem - elemento del layout da renderizzare
+         * @param depth - profondità di annidamento per calcolare l'indentazione (default 0)
+         * @param visited - Set di ID già visitati per prevenire cicli infiniti in layout malformati
+         */
         const renderLayoutItem = (layoutItem, depth = 0, visited = new Set()) => {
             const id = layoutItem.layoutItemID ?? 0;
             if (visited.has(id))
                 return null;
             visited.add(id);
+            // Helper: renderizza i children di un layout item
+            const renderChildren = (parentItem, childDepth) => {
+                const itemChildren = getChildren(parentItem.layoutItemID);
+                return itemChildren.map(child => (_jsx(React.Fragment, { children: renderLayoutItem(child, childDepth, visited) }, `child-${child.layoutItemID}`)));
+            };
             // Check if this is a LayoutRoot - just render its children
             if (layoutItem.type === LayoutItemTypes.LayoutRoot) {
                 const children = getChildren(layoutItem.layoutItemID);
                 if (layout.showTab) {
-                    return (_jsx(React.Fragment, { children: _jsx(TabPanel, { width: "100%", height: "100%", children: children.map(child => (_jsx(React.Fragment, { children: renderLayoutItem(child, depth, visited) }, `child-${child.layoutItemID}`))) }) }, `root-${layoutItem.layoutItemID}`));
+                    // Per ogni figlio che è un LayoutGroup tab, costruisce i dati per il TabPanel
+                    // Segna ogni LayoutGroup come visitato per prevenire cicli
+                    const tabItems = [];
+                    for (const child of children) {
+                        const childId = child.layoutItemID ?? 0;
+                        if (visited.has(childId))
+                            continue;
+                        visited.add(childId);
+                        const childChildren = getChildren(child.layoutItemID);
+                        const childContent = (_jsx("div", { style: { width: '100%' }, children: childChildren.map(grandChild => (_jsx(React.Fragment, { children: renderLayoutItem(grandChild, depth + 1, visited) }, `grandchild-${grandChild.layoutItemID}`))) }));
+                        const errorData = tabErrorCountMap.get(childId);
+                        tabItems.push({
+                            layoutItemID: child.layoutItemID,
+                            content: childContent,
+                            title: (child.type === LayoutItemTypes.LayoutGroup && child.lgd?.caption) || `Tab ${child.layoutItemID}`,
+                            errorCount: errorData?.count || 0,
+                            errorDetails: errorData?.details || []
+                        });
+                    }
+                    return (_jsx(React.Fragment, { children: _jsx(TMLayoutTabPanel, { tabItems: tabItems }) }, `root-${layoutItem.layoutItemID}`));
                 }
                 else {
-                    return (_jsx(React.Fragment, { children: children.map(child => (_jsx(React.Fragment, { children: renderLayoutItem(child, depth, visited) }, `child-${child.layoutItemID}`))) }, `root-${layoutItem.layoutItemID}`));
+                    return (_jsx(React.Fragment, { children: renderChildren(layoutItem, depth) }, `root-${layoutItem.layoutItemID}`));
                 }
             }
             // Check if this is a LayoutGroup
@@ -488,42 +582,55 @@ const TMMetadataValues = ({ showCheckBoxes = ShowCheckBoxesMode.Never, checkPerm
                 const groupTitle = groupDescriptor.caption || `Group ${layoutItem.layoutItemID}`;
                 const groupIsNoBorder = groupDescriptor.borderStyle == undefined || groupDescriptor.borderStyle == LayoutGroupBorderStyles.NoBorder || groupDescriptor.borderStyle == LayoutGroupBorderStyles.None;
                 const isCollapsed = false; // LayoutGroupDescriptor doesn't have collapsed property
-                //Layout Grou da trasformare in tab
-                if (groupDescriptor.orientation == LayoutGroupOrientations.Vertical && layout.showTab && layoutItem.parentID === 0) {
-                    return (_jsx(Item, { title: groupTitle, children: _jsx("div", { style: { width: '100%' }, children: children.map(child => (_jsx(React.Fragment, { children: renderLayoutItem(child, depth + 1, visited) }, `child-${child.layoutItemID}`))) }) }, `group-tab-${layoutItem.layoutItemID}`));
+                const isVertical = groupDescriptor.orientation === LayoutGroupOrientations.Vertical;
+                const isHorizontal = groupDescriptor.orientation === LayoutGroupOrientations.Horizontal;
+                const nextDepth = depth + 1;
+                // Stile comune per gruppi con bordo e titolo
+                const borderedGroupStyle = (flexDir) => ({
+                    position: 'relative',
+                    border: '2px solid #CAD9EB',
+                    borderRadius: '3px',
+                    padding: '12px 6px 6px',
+                    margin: '10px',
+                    display: 'flex',
+                    flexDirection: flexDir,
+                    flexWrap: 'wrap',
+                    gap: '3px'
+                });
+                const groupTitleElement = (_jsx("div", { style: { position: 'absolute', top: '-10px', left: '10px', padding: '0 8px', backgroundColor: '#fff', fontWeight: 600, fontSize: '1rem', color: TMColors.primaryColor }, children: groupTitle }));
+                // Layout Group da trasformare in tab - il rendering è già gestito da LayoutRoot
+                if (isVertical && layout.showTab && layoutItem.parentID === 0) {
+                    return null;
                 }
-                if (groupIsNoBorder && groupDescriptor.orientation !== LayoutGroupOrientations.Horizontal && children.length == 0) {
-                    return (_jsx("br", {}));
+                // Gruppo vuoto senza bordo (non orizzontale) → line break
+                if (groupIsNoBorder && !isHorizontal && children.length === 0) {
+                    return _jsx("br", {});
                 }
-                if (!groupIsNoBorder && groupDescriptor.orientation === LayoutGroupOrientations.Horizontal && children.length > 0 && groupTitle.length > 0) {
-                    return (
-                    // <div key={`group-horizontal-${layoutItem.layoutItemID}`} style={{ display: 'flex', flexDirection: 'row', flexWrap: 'wrap', gap: '3px' }}>
-                    _jsxs("div", { style: { position: 'relative', border: '2px solid #CAD9EB', borderRadius: '3px', padding: '12px 6px 6px', margin: '10px', display: 'flex', flexDirection: 'row', flexWrap: 'wrap', gap: '3px' }, children: [_jsx("div", { style: { position: 'absolute', top: '-10px', left: '10px', padding: '0 8px', backgroundColor: '#fff', fontWeight: 600, fontSize: '1rem', color: TMColors.primaryColor, }, children: groupTitle }), children.map(child => (_jsx(React.Fragment, { children: renderLayoutItem(child, depth + 1, visited) }, `child-${child.layoutItemID}`))), "  "] }, `group-horizontal-${layoutItem.layoutItemID}`)
-                    // </div>
-                    );
+                // Orizzontale con bordo, children e titolo
+                if (!groupIsNoBorder && isHorizontal && children.length > 0 && groupTitle.length > 0) {
+                    return (_jsxs("div", { style: borderedGroupStyle('row'), children: [groupTitleElement, renderChildren(layoutItem, nextDepth)] }, `group-horizontal-${layoutItem.layoutItemID}`));
                 }
-                if (groupIsNoBorder && groupDescriptor.orientation === LayoutGroupOrientations.Vertical) {
-                    return (_jsx("div", { style: { width: '100%', border: 'none', padding: 0 }, children: children.map(child => (_jsx(React.Fragment, { children: renderLayoutItem(child, depth + 1, visited) }, `child-${child.layoutItemID}`))) }));
+                // Verticale senza bordo
+                if (groupIsNoBorder && isVertical) {
+                    return (_jsx("div", { style: { width: '100%', border: 'none', padding: 0 }, children: renderChildren(layoutItem, nextDepth) }));
                 }
-                if (!groupIsNoBorder && groupDescriptor.orientation === LayoutGroupOrientations.Vertical) {
-                    if (groupDescriptor.borderStyle == LayoutGroupBorderStyles.Group) {
-                        return (_jsxs("div", { style: { position: 'relative', border: '2px solid #CAD9EB', borderRadius: '3px', padding: '12px 6px 6px', margin: '10px', display: 'flex', flexDirection: 'column', flexWrap: 'wrap', gap: '3px', }, children: [_jsx("div", { style: { position: 'absolute', top: '-10px', left: '10px', padding: '0 8px', backgroundColor: '#fff', fontWeight: 600, fontSize: '1rem', color: TMColors.primaryColor, }, children: groupTitle }), children.map(child => (_jsx(React.Fragment, { children: renderLayoutItem(child, depth + 1, visited) }, `child-${child.layoutItemID}`)))] }));
+                // Verticale con bordo
+                if (!groupIsNoBorder && isVertical) {
+                    if (groupDescriptor.borderStyle === LayoutGroupBorderStyles.Group) {
+                        return (_jsxs("div", { style: borderedGroupStyle('column'), children: [groupTitleElement, renderChildren(layoutItem, nextDepth)] }));
                     }
-                    if (groupDescriptor.borderStyle == LayoutGroupBorderStyles.GroupBox || groupDescriptor.borderStyle == LayoutGroupBorderStyles.Tabbed) {
-                        return (_jsx(TMAccordion, { title: groupTitle, titleSize: "Small", children: children.map(child => (_jsx(React.Fragment, { children: renderLayoutItem(child, depth + 1, visited) }, `child-${child.layoutItemID}`))) }));
+                    if (groupDescriptor.borderStyle === LayoutGroupBorderStyles.GroupBox || groupDescriptor.borderStyle === LayoutGroupBorderStyles.Tabbed) {
+                        return (_jsx(TMAccordion, { title: groupTitle, titleSize: "Small", children: renderChildren(layoutItem, nextDepth) }));
                     }
                 }
-                if (groupDescriptor.orientation === LayoutGroupOrientations.Horizontal) {
-                    return (_jsx("div", { style: { display: 'flex', flexDirection: 'row', flexWrap: 'wrap', gap: '3px' }, children: groupDescriptor.borderStyle == LayoutGroupBorderStyles.GroupBox || groupDescriptor.borderStyle == LayoutGroupBorderStyles.Tabbed ?
-                            _jsx(TMAccordion, { title: groupTitle, titleSize: "Small", children: children.map(child => (_jsx(React.Fragment, { children: renderLayoutItem(child, depth + 1, visited) }, `child-${child.layoutItemID}`))) }) :
-                            groupDescriptor.borderStyle == LayoutGroupBorderStyles.Group ?
-                                _jsxs("div", { style: { position: 'relative', border: '2px solid #CAD9EB', borderRadius: '3px', padding: '12px 6px 6px', margin: '10px', display: 'flex', flexDirection: 'column', flexWrap: 'wrap', gap: '3px', }, children: [_jsx("div", { style: { position: 'absolute', top: '-10px', left: '10px', padding: '0 8px', backgroundColor: '#fff', fontWeight: 600, fontSize: '1rem', color: TMColors.primaryColor, }, children: groupTitle }), children.map(child => (_jsx("div", { style: { flex: '1 1 0', minWidth: 0 }, children: renderLayoutItem(child, depth + 1, visited) }, child.layoutItemID)))] })
-                                :
-                                    children.map(child => (_jsx("div", { style: { flex: '1 1 0', minWidth: 0 }, children: renderLayoutItem(child, depth + 1, visited) }, child.layoutItemID))) }, `group-horizontal-${layoutItem.layoutItemID}`));
+                // Orizzontale
+                if (isHorizontal) {
+                    const renderHorizontalChildren = () => children.map(child => (_jsx("div", { style: { flex: '1 1 0', minWidth: 0 }, children: renderLayoutItem(child, nextDepth, visited) }, child.layoutItemID)));
+                    return (_jsx("div", { style: { display: 'flex', flexDirection: 'row', flexWrap: 'wrap', gap: '3px' }, children: groupDescriptor.borderStyle === LayoutGroupBorderStyles.GroupBox || groupDescriptor.borderStyle === LayoutGroupBorderStyles.Tabbed ? (_jsx(TMAccordion, { title: groupTitle, titleSize: "Small", children: renderChildren(layoutItem, nextDepth) })) : groupDescriptor.borderStyle === LayoutGroupBorderStyles.Group ? (_jsxs("div", { style: borderedGroupStyle('column'), children: [groupTitleElement, renderHorizontalChildren()] })) : (renderHorizontalChildren()) }, `group-horizontal-${layoutItem.layoutItemID}`));
                 }
-                // Apply indentation only to subgroups (depth > 0), not to root groups
+                // Fallback: gruppo con accordion e indentazione
                 const indentationPx = depth > 0 ? depth * 10 : 0;
-                return (_jsx("div", { style: { paddingLeft: `${indentationPx}px` }, children: _jsx(TMAccordion, { title: groupTitle, defaultCollapsed: isCollapsed, titleSize: "Small", children: children.map(child => (_jsx(React.Fragment, { children: renderLayoutItem(child, depth + 1, visited) }, `child-${child.layoutItemID}`))) }) }, `group-wrapper-${layoutItem.layoutItemID}`));
+                return (_jsx("div", { style: { paddingLeft: `${indentationPx}px` }, children: _jsx(TMAccordion, { title: groupTitle, defaultCollapsed: isCollapsed, titleSize: "Small", children: renderChildren(layoutItem, nextDepth) }) }, `group-wrapper-${layoutItem.layoutItemID}`));
             }
             // Check if this is a LayoutControlItem (metadata field)
             else if (layoutItem.type === LayoutItemTypes.LayoutControlItem && layoutItem.lcid) {
@@ -557,7 +664,7 @@ const TMMetadataValues = ({ showCheckBoxes = ShowCheckBoxesMode.Never, checkPerm
                 const visited = new Set();
                 return rootItems.map(item => (_jsx(React.Fragment, { children: renderLayoutItem(item, 0, visited) }, `root-item-${item.layoutItemID}`)));
             })() }));
-    }, [layout, metadataValues, showCheckBoxes, showNullValueCheckBoxes, isReadOnly, dynDataListsToBeRefreshed, validationItems, selectedMID, isOpenDistinctValues, openChooserBySingleClick, metadataValuesOrig]);
+    }, [layout, metadataValues, showCheckBoxes, showNullValueCheckBoxes, isReadOnly, dynDataListsToBeRefreshed, validationItems, selectedMID, isOpenDistinctValues, openChooserBySingleClick, metadataValuesOrig, tabErrorCountMap]);
     const renderForm = useMemo(() => {
         // Se currentDTD non è ancora stato caricato, non renderizzare nulla
         if (!currentDTD) {
@@ -609,3 +716,58 @@ const StyledSeparator = styled.hr `
     border: none;
     border-top: 1px solid #e0e0e0;
 `;
+const StyledErrorBadge = styled.span `
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 18px;
+    height: 18px;
+    padding: 0 5px;
+    border-radius: 9px;
+    background-color: #c62828;
+    color: white;
+    font-size: 0.75rem;
+    font-weight: bold;
+    line-height: 1;
+    margin-left: 6px;
+`;
+const TMLayoutTabPanel = React.memo(({ tabItems }) => {
+    const [activeTabIndex, setActiveTabIndex] = useState(0);
+    const handleSelectedIndexChange = useCallback((index) => {
+        setActiveTabIndex(index);
+    }, []);
+    return (_jsx(TabPanel, { width: "100%", height: "100%", animationEnabled: false, swipeEnabled: false, loop: false, showNavButtons: true, repaintChangesOnly: true, stylingMode: "primary", iconPosition: 'start', tabsPosition: 'top', selectedIndex: activeTabIndex, onSelectedIndexChange: handleSelectedIndexChange, children: tabItems.map((tabItem, index) => (_jsx(Item, { title: tabItem.title, tabRender: () => (_jsxs(StyledTabItem, { "$isSelected": activeTabIndex === index, "$activeGradient": getAppModuleGradient(SDK_Globals.tmSession?.SessionDescr?.appModuleID ?? AppModules.SURFER), children: [_jsx("span", { children: tabItem.title }), tabItem.errorCount !== undefined && tabItem.errorCount > 0 && (_jsx(TMTooltip, { content: _jsxs("div", { style: {
+                                minWidth: '240px',
+                                padding: '14px',
+                                borderRadius: '10px',
+                                background: '#ffffff',
+                                boxShadow: '0 6px 16px rgba(0,0,0,0.08)',
+                                border: '1px solid #e5e7eb',
+                                color: '#1f2937',
+                                fontFamily: 'sans-serif'
+                            }, children: [_jsx("div", { style: {
+                                        fontWeight: 600,
+                                        textAlign: 'center',
+                                        fontSize: '1.05em',
+                                        marginBottom: '10px',
+                                        color: '#b91c1c'
+                                    }, children: tabItem.errorCount === 1 ? "1 campo non valido" : `${tabItem.errorCount} campi non validi` }), _jsx("div", { style: {
+                                        height: '1px',
+                                        background: '#e5e7eb',
+                                        marginBottom: '10px'
+                                    } }), _jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: '10px' }, children: tabItem.errorDetails?.map((error, idx) => (_jsxs("div", { style: {
+                                            padding: '10px',
+                                            borderRadius: '8px',
+                                            background: '#fef2f2',
+                                            border: '1px solid #fecaca'
+                                        }, children: [_jsx("div", { style: {
+                                                    fontWeight: 600,
+                                                    fontSize: '0.95em',
+                                                    marginBottom: '3px',
+                                                    color: '#991b1b'
+                                                }, children: error.fieldName }), _jsx("div", { style: {
+                                                    fontSize: '0.85em',
+                                                    color: '#7f1d1d',
+                                                    lineHeight: 1.4
+                                                }, children: error.message })] }, idx))) })] }), children: _jsx(StyledErrorBadge, { children: tabItem.errorCount > 99 ? '99+' : tabItem.errorCount }) }))] })), children: _jsx("div", { style: { width: '100%' }, children: tabItem.content }) }, `tab-${tabItem.layoutItemID}`))) }));
+});

package/lib/components/editors/TMTextArea.d.ts

@@ -13,6 +13,7 @@ interface ITMTextArea extends ITMEditorBase {
     maxLength?: number;
     resize?: boolean;
     autoCalculateRows?: boolean;
+    fillHeight?: boolean;
 }
 declare const TMTextArea: React.FunctionComponent<ITMTextArea>;
 export default TMTextArea;

package/lib/components/editors/TMTextArea.js

@@ -28,7 +28,7 @@ const StyledTextAreaEditorButton = styled.div `
 // Define the TMTextArea component
 const TMTextArea = (props) => {
     // Extract properties from the props object
-    const { label = '', value = '', width = '100%', height = 'auto', autoFocus = false, showClearButton, validationItems = [], disabled = false, isModifiedWhen = false, fontSize = FontSize.defaultFontSize, elementStyle = {}, icon = null, labelPosition = 'left', readOnly = false, onValueChanged, onBlur, placeHolder, formulaItems = [], buttons = [], maxHeight = 'auto', rows, maxLength, resize = true, autoCalculateRows = true } = props;
+    const { label = '', value = '', width = '100%', height = 'auto', autoFocus = false, showClearButton, validationItems = [], disabled = false, isModifiedWhen = false, fontSize = FontSize.defaultFontSize, elementStyle = {}, icon = null, labelPosition = 'left', readOnly = false, onValueChanged, onBlur, placeHolder, formulaItems = [], buttons = [], maxHeight = 'auto', rows, maxLength, resize = true, autoCalculateRows = true, fillHeight = false } = props;
     // Reference to the textarea DOM element
     const inputRef = useRef(null);
     // Stores the textarea is focused
@@ -36,7 +36,7 @@ const TMTextArea = (props) => {
     // Stores the current value of the textarea
     const [currentValue, setCurrentValue] = useState(value);
     // Stores the calculated number of rows for the textarea
-    const [calculatedRows, setCalculatedRows] = useState(rows ?? 1);
+    const [calculatedRows, setCalculatedRows] = useState(fillHeight ? 1 : (rows ?? 1));
     //Show chooserForm formulaItems
     const [showFormulaItemsChooser, setShowFormulaItemsChooser] = useState(false);
     const deviceType = useDeviceType();
@@ -148,8 +148,8 @@ const TMTextArea = (props) => {
     };
     // Renders the textarea
     const renderTextArea = () => {
-        const textareaElement = _jsxs(_Fragment, { children: [_jsx(StyledTextareaEditor, { ref: inputRef, autoFocus: autoFocus, readOnly: readOnly, disabled: disabled, value: currentValue, placeholder: placeHolder, rows: calculatedRows, maxLength: maxLength, spellCheck: false, onFocus: () => setIsFocused(true), onBlur: (e) => { setIsFocused(false); if (currentValue != value)
-                        onBlur?.(currentValue); }, onChange: (e) => { setCurrentValue(e.target.value); onValueChanged?.(e); }, "$isMobile": deviceType === DeviceType.MOBILE, "$maxHeight": maxHeight, "$disabled": disabled, "$vil": validationItems, "$isModified": isModifiedWhen, "$fontSize": fontSize, "$width": width, "$resize": resize }), _jsxs("div", { style: { display: 'flex', flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', position: 'absolute', right: '6px', top: calculatedRows === 1 ? (label.length > 0 ? '20px' : '7px') : (label.length > 0 ? '22px' : '7px'), pointerEvents: disabled ? 'none' : 'auto', opacity: disabled ? 0.4 : 1 }, children: [formulaItems.length > 0 &&
+        const textareaElement = _jsxs(_Fragment, { children: [_jsx(StyledTextareaEditor, { ref: inputRef, autoFocus: autoFocus, readOnly: readOnly, disabled: disabled, value: currentValue, placeholder: placeHolder, rows: fillHeight ? undefined : calculatedRows, maxLength: maxLength, spellCheck: false, onFocus: () => setIsFocused(true), onBlur: (e) => { setIsFocused(false); if (currentValue != value)
+                        onBlur?.(currentValue); }, onChange: (e) => { setCurrentValue(e.target.value); onValueChanged?.(e); }, "$isMobile": deviceType === DeviceType.MOBILE, "$maxHeight": maxHeight, "$disabled": disabled, "$vil": validationItems, "$isModified": isModifiedWhen, "$fontSize": fontSize, "$width": width, "$resize": resize, style: fillHeight ? { flex: 1, height: 0 } : undefined }), _jsxs("div", { style: { display: 'flex', flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', position: 'absolute', right: '6px', top: calculatedRows === 1 ? (label.length > 0 ? '20px' : '7px') : (label.length > 0 ? '22px' : '7px'), pointerEvents: disabled ? 'none' : 'auto', opacity: disabled ? 0.4 : 1 }, children: [formulaItems.length > 0 &&
                             _jsx(StyledTextAreaEditorButton, { onClick: () => {
                                     setShowFormulaItemsChooser(true);
                                 }, children: _jsx(IconDataList, {}) }), showClearButton && currentValue &&
@@ -170,8 +170,8 @@ const TMTextArea = (props) => {
     };
     // Layout for the textarea with a left-aligned label
     const renderedLeftLabelTextArea = () => {
-        return (_jsxs(TMLayoutContainer, { direction: 'horizontal', children: [icon && _jsx(TMLayoutItem, { width: '20px', children: _jsx(StyledEditorIcon, { "$disabled": disabled, "$vil": validationItems, "$isModified": isModifiedWhen, children: icon }) }), _jsx(TMLayoutItem, { children: _jsxs(StyledEditorContainer, { "$width": width, children: [label && _jsx(StyledEditorLabel, { "$isFocused": isFocused, "$labelPosition": labelPosition, "$disabled": disabled, children: label ?? '' }), renderTextArea()] }) })] }));
+        return (_jsxs(TMLayoutContainer, { direction: 'horizontal', children: [icon && _jsx(TMLayoutItem, { width: '20px', children: _jsx(StyledEditorIcon, { "$disabled": disabled, "$vil": validationItems, "$isModified": isModifiedWhen, children: icon }) }), _jsx(TMLayoutItem, { children: _jsxs(StyledEditorContainer, { "$width": width, style: fillHeight ? { height: '100%', display: 'flex', flexDirection: 'column' } : {}, children: [label && _jsx(StyledEditorLabel, { "$isFocused": isFocused, "$labelPosition": labelPosition, "$disabled": disabled, children: label ?? '' }), renderTextArea()] }) })] }));
     };
-    return (_jsx("div", { style: elementStyle, children: renderedLeftLabelTextArea() }));
+    return (_jsx("div", { style: { ...elementStyle, ...(fillHeight ? { height: '100%' } : {}) }, children: renderedLeftLabelTextArea() }));
 };
 export default TMTextArea;

package/lib/components/editors/TMTextBox.js

@@ -81,15 +81,14 @@ const TMTextBox = ({ autoFocus, maxLength, labelColor, precision, fromModal = fa
     }, [maxValue, minValue, currentValue, currentType]);
     // Handle autofocus behavior on mount
     useEffect(() => {
-        if (autoFocus && inputRef.current) {
-            if (fromModal) // utilizzato per i textBox derivanti da una Modal che non riescono a utilizzare l'autofocus
-                setTimeout(() => {
-                    inputRef.current && inputRef.current.focus(); // Focus the input field
-                }, 100);
-            else
-                inputRef.current.focus(); // Focus the input field
-        }
-    }, [autoFocus]); // This effect runs when the autoFocus prop changes
+        if (!autoFocus || !inputRef.current)
+            return;
+        const delay = fromModal ? 100 : 50;
+        const timeoutId = setTimeout(() => {
+            inputRef.current?.focus();
+        }, delay);
+        return () => clearTimeout(timeoutId);
+    }, [autoFocus, fromModal]); // This effect runs when the autoFocus or fromModal prop changes
     useEffect(() => {
         if (formulaItems && formulaItems.length > 0) {
             let menuItems = [];
@@ -278,7 +277,7 @@ const TMTextBox = ({ autoFocus, maxLength, labelColor, precision, fromModal = fa
                 return 6 + (buttonCount * buttonWidth) + 8;
             }
         };
-        return (_jsxs("div", { style: { width: '100%', height: 'fit-content' }, id: `text-${id}`, children: [_jsx(StyledEditor, { ref: inputRef, id: `text-${label}-${id}`, name: label, autoFocus: autoFocus, readOnly: readOnly, type: currentType, disabled: disabled, value: displayedValue, width: width || '100%', placeholder: placeHolder, maxLength: maxLength, autoComplete: 'off', spellCheck: false, onFocus: () => setIsFocused(true), onBlur: (e) => { setIsFocused(false); if (currentValue != value)
+        return (_jsxs("div", { style: { width: '100%', height: 'fit-content' }, id: `text-${id}`, children: [_jsx(StyledEditor, { ref: inputRef, onContextMenu: (e) => e.stopPropagation(), id: `text-${label}-${id}`, name: label, autoFocus: autoFocus, readOnly: readOnly, type: currentType, disabled: disabled, value: displayedValue, width: width || '100%', placeholder: placeHolder, maxLength: maxLength, autoComplete: 'off', spellCheck: false, onFocus: () => setIsFocused(true), onBlur: (e) => { setIsFocused(false); if (currentValue != value)
                         onBlur?.(currentValue); }, onChange: handleInputChange, onKeyDown: (e) => {
                         if (currentType === 'number') {
                             if (!scale && (e.key == "." || e.key == ","))

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { HomeBlogPost, TaskDescriptor } from '@topconsultnpm/sdk-ts';
+import { DcmtTypeDescriptor, HomeBlogPost, TaskDescriptor } from '@topconsultnpm/sdk-ts';
 interface ITMArchiveProps {
     inputFile?: File | null;
     inputMids?: Array<{
@@ -24,6 +24,8 @@ interface ITMArchiveProps {
     editTaskCallback?: (task: TaskDescriptor) => Promise<void>;
     handleNavigateToWGs?: (value: HomeBlogPost | number) => Promise<void>;
     handleNavigateToDossiers?: (value: HomeBlogPost | number) => Promise<void>;
+    openFileUploaderPdfEditor?: (fromDTD?: DcmtTypeDescriptor, file?: File | null, handleFile?: (file: File) => void) => void;
+    onScanRequest?: (onFileScanned: (file: File) => void) => void;
 }
 declare const TMArchive: React.FunctionComponent<ITMArchiveProps>;
 export default TMArchive;

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useEffect, useMemo, useState } from 'react';
 import Logo from '../../../assets/Toppy-generico.png';
-import { DcmtTypeListCacheService, LayoutModes, SDK_Localizator } from '@topconsultnpm/sdk-ts';
+import { ArchiveConstraints, DcmtTypeListCacheService, LayoutModes, SDK_Localizator } from '@topconsultnpm/sdk-ts';
 import { IconTree, SDKUI_Globals, SDKUI_Localizator, IconRecentlyViewed, IconPreview, IconShow, IconBoard, IconDcmtTypeSys, removeMruTid, getMoreInfoTasksForDocument } from '../../../helper';
 import { useDeviceType, DeviceType } from '../../base/TMDeviceProvider';
 import TMLayoutContainer from '../../base/TMLayout';
@@ -12,7 +12,7 @@ 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, isSharedArchive = false, inputDID = undefined, allTasks = [], getAllTasks, deleteTaskByIdsCallback, addTaskCallback, editTaskCallback, handleNavigateToWGs, handleNavigateToDossiers }) => {
+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, openFileUploaderPdfEditor, onScanRequest }) => {
     const [currentTID, setCurrentTID] = useState(inputTID ?? 0);
     const [mruTIDs, setMruTIDs] = useState([]);
     const [currentMruTID, setCurrentMruTID] = useState(0);
@@ -77,7 +77,7 @@ const TMArchive = ({ onDcmtTypeSelect = undefined, inputTID, inputFile = null, c
                 if (onDcmtTypeSelect)
                     onDcmtTypeSelect(tidToUse);
                 passToSearch(tidToUse, outputMids);
-            } : undefined, isSharedDcmt: isSharedArchive, allTasks: allTasks, getAllTasks: getAllTasks, deleteTaskByIdsCallback: deleteTaskByIdsCallback, addTaskCallback: addTaskCallback, editTaskCallback: editTaskCallback, handleNavigateToWGs: handleNavigateToWGs, handleNavigateToDossiers: handleNavigateToDossiers, moreInfoTasks: getMoreInfoTasksForDocument(allTasks, currentTID, currentTID === inputTID ? inputDID : undefined) }, currentTID)
+            } : undefined, isSharedDcmt: isSharedArchive, allTasks: allTasks, getAllTasks: getAllTasks, deleteTaskByIdsCallback: deleteTaskByIdsCallback, addTaskCallback: addTaskCallback, editTaskCallback: editTaskCallback, handleNavigateToWGs: handleNavigateToWGs, handleNavigateToDossiers: handleNavigateToDossiers, moreInfoTasks: getMoreInfoTasksForDocument(allTasks, currentTID, currentTID === inputTID ? inputDID : undefined), openFileUploaderPdfEditor: openFileUploaderPdfEditor, onScanRequest: onScanRequest }, 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, currentInputMids, enableDragDropOverlay, isSharedArchive, allTasks]);
     const allInitialPanelVisibility = {
@@ -145,49 +145,36 @@ const TMArchive = ({ onDcmtTypeSelect = undefined, inputTID, inputFile = null, c
 export default TMArchive;
 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);
-            if (isMobile)
-                setPanelVisibilityById('tmDcmtForm', true);
-            else {
-                setPanelVisibilityById('tmDcmtForm', true);
-                if (!isSharedArchive) {
-                    setPanelVisibilityById('tmDcmtPreview', true);
-                }
-            }
-            if (!isSharedArchive) {
-                setToolbarButtonVisibility('tmDcmtPreview', true);
-            }
-            setToolbarButtonVisibility('tmDcmtForm', true);
-        } }));
+    const updatePanelsVisibility = async (tid) => {
+        if (!tid)
+            return;
+        const dtd = await DcmtTypeListCacheService.GetAsync(tid);
+        const isOnlyMetadata = dtd?.archiveConstraint === ArchiveConstraints.OnlyMetadata;
+        const previewVisible = !isSharedArchive && !isOnlyMetadata;
+        setPanelVisibilityById('tmDcmtPreview', previewVisible);
+        setToolbarButtonVisibility('tmDcmtPreview', previewVisible);
+        setPanelVisibilityById('tmDcmtForm', true);
+        setToolbarButtonVisibility('tmDcmtForm', true);
+    };
+    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: async (tid) => { updatePanelsVisibility(tid); onSelectedTIDChanged?.(tid); } }));
 };
 const TMRecentsManagerWrapper = ({ mruTIDs, currentTID, currentMruTID, deviceType, isSharedArchive, onSelectedTID, onDeletedTID }) => {
     const { setPanelVisibilityById, setToolbarButtonVisibility } = useTMPanelManagerContext();
+    // This avoids unnecessary re-renders by only recalculating when deviceType changes.
+    let isMobile = useMemo(() => { return deviceType === DeviceType.MOBILE; }, [deviceType]);
+    const updatePanelsVisibility = async (tid) => {
+        if (!tid)
+            return;
+        const dtd = await DcmtTypeListCacheService.GetAsync(tid);
+        const isOnlyMetadata = dtd?.archiveConstraint === ArchiveConstraints.OnlyMetadata;
+        const previewVisible = !isSharedArchive && !isOnlyMetadata;
+        setPanelVisibilityById('tmDcmtPreview', previewVisible);
+        setToolbarButtonVisibility('tmDcmtPreview', previewVisible);
+        setPanelVisibilityById('tmDcmtForm', true);
+        setToolbarButtonVisibility('tmDcmtForm', true);
+    };
     useEffect(() => {
-        if (currentTID) {
-            setPanelVisibilityById('tmDcmtForm', true);
-            if (!isSharedArchive) {
-                setToolbarButtonVisibility('tmDcmtPreview', true);
-            }
-            setToolbarButtonVisibility('tmDcmtForm', true);
-        }
-    }, [currentTID, isSharedArchive]);
-    return (_jsx(TMRecentsManager, { accessFilter: 'canArchive', mruTIDs: mruTIDs, currentMruTID: currentMruTID, deviceType: deviceType, onSelectedTID: (tid) => {
-            onSelectedTID?.(tid);
-            if (deviceType === DeviceType.MOBILE) {
-                setPanelVisibilityById('tmDcmtForm', true);
-            }
-            else {
-                setPanelVisibilityById('tmDcmtForm', true);
-                if (!isSharedArchive) {
-                    setPanelVisibilityById('tmDcmtPreview', true);
-                }
-            }
-            if (!isSharedArchive) {
-                setToolbarButtonVisibility('tmDcmtPreview', true);
-            }
-            setToolbarButtonVisibility('tmDcmtForm', true);
-        }, onDeletedTID: (tid) => {
-            onDeletedTID?.(tid);
-        } }));
+        updatePanelsVisibility(currentTID);
+    }, [currentTID, isSharedArchive, isMobile]);
+    return (_jsx(TMRecentsManager, { accessFilter: "canArchive", mruTIDs: mruTIDs, currentMruTID: currentMruTID, deviceType: deviceType, onSelectedTID: async (tid) => { await updatePanelsVisibility(tid); onSelectedTID?.(tid); }, onDeletedTID: onDeletedTID }));
 };

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

@@ -14,6 +14,9 @@ interface TMBlogCommentFormProps {
     onFilterCreated?: (predicate: (post: BlogPost) => boolean) => void;
     refreshCallback?: () => Promise<void>;
     isCommentRequired?: boolean;
+    maxLength?: number;
+    /** External save handler - when provided, bypasses internal engine logic */
+    onCustomSave?: (blogPost: BlogPost) => Promise<void>;
 }
 declare const TMBlogCommentForm: (props: TMBlogCommentFormProps) => import("react/jsx-runtime").JSX.Element;
 export default TMBlogCommentForm;