@topconsultnpm/sdkui-react 6.22.0-dev2.21 → 6.22.0-dev2.23

package/lib/components/base/TMDataGrid.js

@@ -386,7 +386,7 @@ const TMDataGrid = React.forwardRef((props, ref) => {
                         // Temporary: iOS-specific styles to prevent default long-press menu and text selection
                         WebkitTouchCallout: 'none',
                         WebkitUserSelect: 'none'
-                    }, children: [dataColumns.map((column, index) => (_jsx(Column, { ...column }, column.caption + index.toString()))), sorting && _jsx(Sorting, { ...sorting }), selection && _jsx(Selection, { ...selection }), scrolling && _jsx(Scrolling, { ...scrolling }), summary && _jsx(Summary, { ...summary }), showHeaderFilter && _jsx(HeaderFilter, { visible: true, ...headerFilter }), rowDragging && _jsx(RowDragging, { ...rowDragging }), filterRow && _jsx(FilterRow, { ...filterRow }), showFilterPanel && _jsx(FilterPanel, { visible: true }), showHeaderColumnChooser && _jsxs(ColumnChooser, { height: "400px", enabled: !showHeaderColumnChooser, mode: "select", children: [_jsx(Position, { my: "center", at: "center", of: window }), _jsx(ColumnChooserSearch, { enabled: true }), _jsx(ColumnChooserSelection, { allowSelectAll: false, selectByClick: true, recursive: true })] }), stateStoring && _jsx(StateStoring, { ...stateStoring }), groupPanel && _jsx(GroupPanel, { ...groupPanel }), _jsx(Grouping, { contextMenuEnabled: true, ...grouping }), _jsx(LoadPanel, { enabled: showLoadPanel }), _jsx(SearchPanel, { visible: showSearchPanel, searchVisibleColumnsOnly: true, highlightSearchText: true }), editing && _jsx(Editing, { ...editing }), paging && _jsx(Paging, { ...paging }), effectivePager && _jsx(Pager, { ...effectivePager, visible: totalRecordCount > pageSize }), masterDetail && _jsx(MasterDetail, { ...masterDetail })] }) }), counterConfig.show && _jsx("div", { style: { width: "100%", height: "25px", display: "flex", alignItems: "center", gap: "15px", backgroundColor: "#e0e0e0" }, children: _jsx(TMCounterContainer, { items: counterValues, bgColorContainer: counterConfig.bgColorContainer, bgColorItem: counterConfig.bgColorItem, hoverColorItem: counterConfig.hoverColorItem, textColorItem: counterConfig.textColorItem }) }), customContextMenuItems && (_jsx(TMContextMenu, { target: ".dx-data-row", items: processCustomContextMenuItems(customContextMenuItems, customContextMenuRowKey), externalControl: {
+                    }, children: [dataColumns.map((column, index) => (_jsx(Column, { ...column }, column.caption + index.toString()))), sorting && _jsx(Sorting, { ...sorting }), selection && _jsx(Selection, { ...selection }), scrolling && _jsx(Scrolling, { ...scrolling }), summary && _jsx(Summary, { ...summary }), showHeaderFilter && _jsx(HeaderFilter, { visible: true, ...headerFilter, search: { enabled: true, ...headerFilter?.search } }), rowDragging && _jsx(RowDragging, { ...rowDragging }), filterRow && _jsx(FilterRow, { ...filterRow }), showFilterPanel && _jsx(FilterPanel, { visible: true }), showHeaderColumnChooser && _jsxs(ColumnChooser, { height: "400px", enabled: !showHeaderColumnChooser, mode: "select", children: [_jsx(Position, { my: "center", at: "center", of: window }), _jsx(ColumnChooserSearch, { enabled: true }), _jsx(ColumnChooserSelection, { allowSelectAll: false, selectByClick: true, recursive: true })] }), stateStoring && _jsx(StateStoring, { ...stateStoring }), groupPanel && _jsx(GroupPanel, { ...groupPanel }), _jsx(Grouping, { contextMenuEnabled: true, ...grouping }), _jsx(LoadPanel, { enabled: showLoadPanel }), _jsx(SearchPanel, { visible: showSearchPanel, searchVisibleColumnsOnly: true, highlightSearchText: true }), editing && _jsx(Editing, { ...editing }), paging && _jsx(Paging, { ...paging }), effectivePager && _jsx(Pager, { ...effectivePager, visible: totalRecordCount > pageSize }), masterDetail && _jsx(MasterDetail, { ...masterDetail })] }) }), counterConfig.show && _jsx("div", { style: { width: "100%", height: "25px", display: "flex", alignItems: "center", gap: "15px", backgroundColor: "#e0e0e0" }, children: _jsx(TMCounterContainer, { items: counterValues, bgColorContainer: counterConfig.bgColorContainer, bgColorItem: counterConfig.bgColorItem, hoverColorItem: counterConfig.hoverColorItem, textColorItem: counterConfig.textColorItem }) }), customContextMenuItems && (_jsx(TMContextMenu, { target: ".dx-data-row", items: processCustomContextMenuItems(customContextMenuItems, customContextMenuRowKey), externalControl: {
                     visible: customContextMenuVisible,
                     position: customContextMenuPosition,
                     onClose: () => setCustomContextMenuVisible(false)

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

@@ -13,11 +13,17 @@ const styles = {
     wrapper: { display: 'flex', flexDirection: 'column', flex: 1, minHeight: 0, borderTop: `1px solid ${TMColors.card_background}` },
     body: { flex: 1, minHeight: 0, padding: '13px 10px 9px', display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(185px, 1fr))', gridAutoRows: 'max-content', alignContent: 'start', columnGap: '10px', rowGap: '13px', overflow: 'auto' },
     item: { position: 'relative', display: 'flex', alignItems: 'center', minWidth: 0, minHeight: '30px', padding: '5px 10px 4px', borderRadius: '8px', border: `1px solid ${TMColors.card_background}`, background: TMColors.default_background, transition: 'border-color 0.15s ease, box-shadow 0.15s ease' },
-    label: { position: 'absolute', top: '-7px', left: '8px', maxWidth: 'calc(100% - 16px)', padding: '0 5px', background: TMColors.default_background, fontSize: '9px', fontWeight: 700, lineHeight: '13px', letterSpacing: '0.5px', textTransform: 'uppercase', color: TMColors.label_normal, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' },
+    // Come per il pulsante copia, la posizione sta sull'ancora del tooltip; il troncamento con i
+    // puntini deve invece stare sull'elemento che contiene il testo
+    label: { position: 'absolute', top: '-7px', left: '8px', maxWidth: 'calc(100% - 16px)', minWidth: 0, padding: '0 5px', background: TMColors.default_background },
+    labelText: { maxWidth: '100%', fontSize: '9px', fontWeight: 700, lineHeight: '13px', letterSpacing: '0.5px', textTransform: 'uppercase', color: TMColors.label_normal, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' },
     value: { display: 'block', width: '100%', fontSize: '12.5px', fontWeight: 500, color: TMColors.text_normal, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', userSelect: 'text', cursor: 'text', minHeight: '17px', lineHeight: '17px' },
     emptyValue: { color: TMColors.disabled, fontWeight: 400 },
     // Pulsante di copia: pastiglia sul bordo superiore della card, come la caption
-    copyBtn: { position: 'absolute', top: '-9px', right: '6px', display: 'flex', alignItems: 'center', justifyContent: 'center', width: '18px', height: '18px', padding: 0, borderRadius: '50%', border: `1px solid ${TMColors.card_background}`, background: TMColors.default_background, color: TMColors.label_normal, cursor: 'pointer', transition: 'opacity 0.15s ease, background 0.15s ease, color 0.15s ease, border-color 0.15s ease' },
+    // La posizione sta sull'ancora e non sul pulsante: è il contenitore del tooltip, che deve stare
+    // dove si vede il pulsante, altrimenti il tooltip si aprirebbe altrove
+    copyBtnAnchor: { position: 'absolute', top: '-9px', right: '6px', transition: 'opacity 0.15s ease' },
+    copyBtn: { display: 'flex', alignItems: 'center', justifyContent: 'center', width: '18px', height: '18px', padding: 0, borderRadius: '50%', border: `1px solid ${TMColors.card_background}`, background: TMColors.default_background, color: TMColors.label_normal, cursor: 'pointer', transition: 'background 0.15s ease, color 0.15s ease, border-color 0.15s ease' },
     placeholder: { gridColumn: '1 / -1', padding: '6px 2px', color: TMColors.label_normal, fontSize: '12px' },
     // Barra di ricerca
     searchBar: { display: 'flex', alignItems: 'center', gap: '8px', padding: '12px 14px 0', flexShrink: 0 },
@@ -58,7 +64,7 @@ const MetadataCard = ({ caption, copyText, children }) => {
     };
     // Il pulsante resta visibile durante il feedback e quando ha il focus (accessibilità da tastiera)
     const isCopyVisible = copyText !== '' && (!SUPPORTS_HOVER || isHovered || isCopied);
-    return (_jsxs("div", { style: styles.item, onMouseEnter: (e) => { setIsHovered(true); Object.assign(e.currentTarget.style, { borderColor: TMColors.primary, boxShadow: '0 2px 8px rgba(37, 89, 165, 0.14)' }); }, onMouseLeave: (e) => { setIsHovered(false); Object.assign(e.currentTarget.style, { borderColor: TMColors.card_background, boxShadow: 'none' }); }, children: [_jsx("span", { style: { ...styles.label, maxWidth: isCopyVisible ? 'calc(100% - 38px)' : 'calc(100% - 16px)' }, title: caption, children: caption }), children, copyText !== '' && (_jsx("button", { type: 'button', style: { ...styles.copyBtn, ...(isCopied ? COPY_BTN_COPIED : COPY_BTN_IDLE), opacity: isCopyVisible ? 1 : 0, pointerEvents: isCopyVisible ? 'auto' : 'none' }, title: isCopied ? SDKUI_Localizator.CopiedSuccessfully : SDKUI_Localizator.CopyToClipboard, "aria-label": SDKUI_Localizator.CopyToClipboard, onClick: copyAsync, onFocus: () => setIsHovered(true), onBlur: () => setIsHovered(false), ...hoverStyle(isCopied ? COPY_BTN_COPIED : COPY_BTN_HOVER, isCopied ? COPY_BTN_COPIED : COPY_BTN_IDLE), children: isCopied ? _jsx(IconSuccess, { fontSize: 11 }) : _jsx(IconCopy, { fontSize: 11 }) }))] }));
+    return (_jsxs("div", { style: styles.item, onMouseEnter: (e) => { setIsHovered(true); Object.assign(e.currentTarget.style, { borderColor: TMColors.primary, boxShadow: '0 2px 8px rgba(37, 89, 165, 0.14)' }); }, onMouseLeave: (e) => { setIsHovered(false); Object.assign(e.currentTarget.style, { borderColor: TMColors.card_background, boxShadow: 'none' }); }, children: [_jsx(TMTooltip, { content: caption, parentStyle: { ...styles.label, maxWidth: isCopyVisible ? 'calc(100% - 38px)' : 'calc(100% - 16px)' }, childStyle: { maxWidth: '100%', minWidth: 0 }, children: _jsx("span", { style: styles.labelText, children: caption }) }), children, copyText !== '' && (_jsx(TMTooltip, { content: isCopied ? SDKUI_Localizator.CopiedSuccessfully : SDKUI_Localizator.CopyToClipboard, parentStyle: { ...styles.copyBtnAnchor, opacity: isCopyVisible ? 1 : 0, pointerEvents: isCopyVisible ? 'auto' : 'none' }, children: _jsx("button", { type: 'button', style: { ...styles.copyBtn, ...(isCopied ? COPY_BTN_COPIED : COPY_BTN_IDLE) }, "aria-label": SDKUI_Localizator.CopyToClipboard, onClick: copyAsync, onFocus: () => setIsHovered(true), onBlur: () => setIsHovered(false), ...hoverStyle(isCopied ? COPY_BTN_COPIED : COPY_BTN_HOVER, isCopied ? COPY_BTN_COPIED : COPY_BTN_IDLE), children: isCopied ? _jsx(IconSuccess, { fontSize: 11 }) : _jsx(IconCopy, { fontSize: 11 }) }) }))] }));
 };
 // Riepilogo dei metadati di un documento in card compatte
 const TMMasterInfoFields = ({ dtd, dcmt, getValuesByMidAsync, reloadToken, isExpandedView = false }) => {
@@ -157,7 +163,7 @@ const TMMasterInfoFields = ({ dtd, dcmt, getValuesByMidAsync, reloadToken, isExp
                             e.preventDefault();
                             e.stopPropagation();
                             setFilter('');
-                        } }, onFocus: (e) => Object.assign(e.currentTarget.parentElement?.style ?? {}, { borderColor: TMColors.primary, boxShadow: '0 0 0 2px rgba(37, 89, 165, 0.14)' }), onBlur: (e) => Object.assign(e.currentTarget.parentElement?.style ?? {}, { borderColor: TMColors.card_background, boxShadow: 'none' }) }), filter !== '' && (_jsx("button", { type: 'button', style: styles.searchClear, title: SDKUI_Localizator.Clear, "aria-label": SDKUI_Localizator.Clear, onClick: () => setFilter(''), ...hoverStyle({ background: TMColors.primary_container, color: TMColors.primary }, { background: 'transparent', color: TMColors.label_normal }), children: _jsx(IconClearButton, { fontSize: 13 }) }))] }), _jsxs("span", { style: styles.searchCount, children: [filteredRows.length, "/", rows.length] })] }));
+                        } }, onFocus: (e) => Object.assign(e.currentTarget.parentElement?.style ?? {}, { borderColor: TMColors.primary, boxShadow: '0 0 0 2px rgba(37, 89, 165, 0.14)' }), onBlur: (e) => Object.assign(e.currentTarget.parentElement?.style ?? {}, { borderColor: TMColors.card_background, boxShadow: 'none' }) }), filter !== '' && (_jsx(TMTooltip, { content: SDKUI_Localizator.Clear, parentStyle: { display: 'flex', flexShrink: 0 }, children: _jsx("button", { type: 'button', style: styles.searchClear, "aria-label": SDKUI_Localizator.Clear, onClick: () => setFilter(''), ...hoverStyle({ background: TMColors.primary_container, color: TMColors.primary }, { background: 'transparent', color: TMColors.label_normal }), children: _jsx(IconClearButton, { fontSize: 13 }) }) }))] }), _jsxs("span", { style: styles.searchCount, children: [filteredRows.length, "/", rows.length] })] }));
     // La ricerca sta solo nella vista ingrandita: in linea lo spazio è poco e l'elenco è limitato
     // all'anteprima, con il pulsante per aprirlo tutto
     const hasSearch = isExpandedView && rows.length > PREVIEW_COUNT;

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

@@ -104,7 +104,7 @@ const TMMultiMasterDetailDcmtsForm = (props) => {
             allowSorting: false, allowFiltering: false, allowHeaderFiltering: false, allowResizing: false,
             allowReordering: false, allowHiding: false, showInColumnChooser: false, allowEditing: false,
             cssClass: 'tm-row-actions',
-            cellRender: (cell) => (_jsxs("div", { style: styles.actionsCell, children: [_jsx("span", { style: styles.actionIcon, title: SDKUI_Localizator.Update, onClick: () => openEditForm(cell.data), children: _jsx(IconEdit, { fontSize: 18, color: TMColors.primary }) }), _jsx("span", { style: styles.actionIcon, title: SDKUI_Localizator.Duplicate, onClick: () => duplicateRow(cell.data), children: _jsx(IconDuplicate, { fontSize: 18, color: TMColors.tertiary }) }), _jsx("span", { style: styles.actionIcon, title: SDKUI_Localizator.Deletion, onClick: () => deleteRow(cell.data), children: _jsx(IconDelete, { fontSize: 18, color: TMColors.error }) })] })),
+            cellRender: (cell) => (_jsxs("div", { style: styles.actionsCell, children: [_jsx(TMTooltip, { content: SDKUI_Localizator.Update, children: _jsx("span", { style: styles.actionIcon, onClick: () => openEditForm(cell.data), children: _jsx(IconEdit, { fontSize: 18, color: TMColors.primary }) }) }), _jsx(TMTooltip, { content: SDKUI_Localizator.Duplicate, children: _jsx("span", { style: styles.actionIcon, onClick: () => duplicateRow(cell.data), children: _jsx(IconDuplicate, { fontSize: 18, color: TMColors.tertiary }) }) }), _jsx(TMTooltip, { content: SDKUI_Localizator.Deletion, children: _jsx("span", { style: styles.actionIcon, onClick: () => deleteRow(cell.data), children: _jsx(IconDelete, { fontSize: 18, color: TMColors.error }) }) })] })),
         };
         return [actionsColumn, iconColumn, ...detailColumns, ...(detailSupportsFile ? [fileColumn] : [])];
     }, [detailColumns, detailSupportsFile]);
@@ -148,13 +148,13 @@ const TMMultiMasterDetailDcmtsForm = (props) => {
     const renderOptionsMenu = () => {
         if (!isSummaryPhase || isMobile)
             return undefined;
-        return (_jsx(ContextMenu, { trigger: 'left', items: optionsMenuItems, children: _jsx("span", { style: styles.titleMenuIcon, title: SDKUI_Localizator.Options, "aria-label": SDKUI_Localizator.Options, children: _jsx(IconMenuVertical, { fontSize: 16, color: "white" }) }) }));
+        return (_jsx(ContextMenu, { trigger: 'left', items: optionsMenuItems, children: _jsx(TMTooltip, { content: SDKUI_Localizator.Options, children: _jsx("span", { style: styles.titleMenuIcon, "aria-label": SDKUI_Localizator.Options, children: _jsx(IconMenuVertical, { fontSize: 16, color: "white" }) }) }) }));
     };
     // ----- Sezione: informazioni del master -----------------------------------------------------
     const renderMasterInfo = (panel) => {
         const isOpen = sectionsOpen.masterInfo;
         const editMasterButton = canUpdateMaster
-            ? (_jsx("button", { type: 'button', onClick: (e) => { e.stopPropagation(); setIsOpenMasterForm(true); }, style: accordionStyles.accordionExpandBtn, title: `${SDKUI_Localizator.Update}: ${getDtdDisplayName(dtd)}`, ...hoverStyle({ background: TMColors.primary_container, color: TMColors.primary }, { background: 'transparent', color: TMColors.label_normal }), children: _jsx(IconEdit, { fontSize: 16 }) }))
+            ? (_jsx(TMTooltip, { content: `${SDKUI_Localizator.Update}: ${getDtdDisplayName(dtd)}`, children: _jsx("button", { type: 'button', onClick: (e) => { e.stopPropagation(); setIsOpenMasterForm(true); }, style: accordionStyles.accordionExpandBtn, ...hoverStyle({ background: TMColors.primary_container, color: TMColors.primary }, { background: 'transparent', color: TMColors.label_normal }), children: _jsx(IconEdit, { fontSize: 16 }) }) }))
             : undefined;
         return (_jsxs("div", { style: { ...accordionStyles.accordion, ...accordionStyles.accordionInPanel }, children: [renderAccordionHeader({
                     section: 'masterInfo',
@@ -172,7 +172,7 @@ const TMMultiMasterDetailDcmtsForm = (props) => {
         const isOpen = sectionsOpen.archivedDetails;
         const hasResults = archivedDetailResults.length > 0 && archivedDetailsCount > 0;
         // Ricarica i dettagli già archiviati: la sezione va aperta, altrimenti l'esito non sarebbe visibile
-        const refreshArchivedButton = (_jsx("button", { type: 'button', onClick: (e) => { e.stopPropagation(); setSectionOpen('archivedDetails', true); refreshArchivedDetailsAsync(); }, disabled: isLoadingArchivedDetails, style: { ...accordionStyles.accordionExpandBtn, ...(isLoadingArchivedDetails ? { cursor: 'default', opacity: 0.5 } : {}) }, title: SDKUI_Localizator.Refresh, "aria-label": SDKUI_Localizator.Refresh, ...(isLoadingArchivedDetails ? {} : hoverStyle({ background: TMColors.primary_container, color: TMColors.primary }, { background: 'transparent', color: TMColors.label_normal })), children: _jsx(IconRefresh, { fontSize: 16 }) }));
+        const refreshArchivedButton = (_jsx(TMTooltip, { content: SDKUI_Localizator.Refresh, children: _jsx("button", { type: 'button', onClick: (e) => { e.stopPropagation(); setSectionOpen('archivedDetails', true); refreshArchivedDetailsAsync(); }, disabled: isLoadingArchivedDetails, style: { ...accordionStyles.accordionExpandBtn, ...(isLoadingArchivedDetails ? { cursor: 'default', opacity: 0.5 } : {}) }, "aria-label": SDKUI_Localizator.Refresh, ...(isLoadingArchivedDetails ? {} : hoverStyle({ background: TMColors.primary_container, color: TMColors.primary }, { background: 'transparent', color: TMColors.label_normal })), children: _jsx(IconRefresh, { fontSize: 16 }) }) }));
         return (_jsxs("div", { style: { ...accordionStyles.accordion, ...accordionStyles.accordionInPanel }, children: [renderAccordionHeader({
                     section: 'archivedDetails',
                     isOpen,

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

@@ -46,13 +46,14 @@ export interface ArchiveRow {
  * stringhe, quindi il `value` generico di DevExtreme si restringe
  */
 export type ArchiveRowCell = Omit<DataGridTypes.ColumnCellTemplateData<ArchiveRow, number>, 'value'> & {
-    readonly value?: string;
+    readonly value?: string | number;
 };
 /**
  * Modifiche di una riga in arrivo dalla griglia (mid -> nuovo valore): in modifica diretta ci sono
- * solo i metadati testuali (vedi isInlineEditableMetadata) e l'editor svuotato restituisce null
+ * i metadati testuali e numerici (vedi isInlineEditableMetadata), quindi stringhe e numeri,
+ * e l'editor svuotato restituisce null
  */
-export type ArchiveRowChanges = Record<string, string | null | undefined>;
+export type ArchiveRowChanges = Record<string, string | number | null | undefined>;
 /** Aggiornamento di una riga della griglia, con le sole modifiche possibili in linea */
 export type ArchiveRowUpdatingEvent = Omit<DataGridTypes.RowUpdatingEvent<ArchiveRow, number>, 'newData'> & {
     newData: ArchiveRowChanges;
@@ -70,10 +71,15 @@ export declare const canArchive: (dtd?: DcmtTypeDescriptor) => boolean;
  */
 export declare const INLINE_EDITABLE_CELL_CLASS = "tm-cell-inline-editable";
 /**
- * Modifica diretta in griglia: solo il testo libero. Liste dati, calcolati, numeratori e speciali
- * hanno editor e vincoli propri, date e numeri una formattazione dedicata: restano al form
+ * Modifica diretta in griglia: testo libero e numeri. Liste dati, calcolati, numeratori e speciali
+ * hanno editor e vincoli propri, le date una formattazione dedicata: restano al form
  */
 export declare const isInlineEditableMetadata: (md: MetadataDescriptor) => boolean;
+/**
+ * Valore di una cella numerica: l'editor della griglia vuole un numero, non la stringa che
+ * la riga porta in `__values` per l'archiviazione. Vuoto o non numerico: cella vuota
+ */
+export declare const toGridNumber: (value: unknown) => number | undefined;
 /** Colonne della griglia di riepilogo dai metadati (utente) del tipo documento */
 export declare const buildColumnsFromDtd: (dtd: DcmtTypeDescriptor | undefined, renderDataListCell: (value: string | Date | number | undefined, dataListID: number, viewMode: DataListViewModes) => React.ReactElement) => Array<IColumnProps>;
 export declare const getDetailDtdAsync: (detailTID: number | undefined) => Promise<DcmtTypeDescriptor | undefined>;
@@ -205,7 +211,6 @@ export declare const multiDetailStyles: {
         lineHeight: number;
     };
 };
-/** Stili delle sezioni collassabili: qui perché la testata comune (renderAccordionHeader) vive in questo file */
 export declare const accordionStyles: {
     accordion: {
         display: "flex";
@@ -245,11 +250,6 @@ export declare const accordionStyles: {
         display: "inline-flex";
         alignItems: "center";
         justifyContent: "center";
-        minWidth: string;
-        height: string;
-        padding: string;
-        borderRadius: string;
-        background: string;
         color: string;
         fontSize: string;
         fontWeight: number;

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

@@ -27,12 +27,22 @@ export const canArchive = (dtd) => dtd?.perm?.canArchive === AccessLevelsEx.Yes
  */
 export const INLINE_EDITABLE_CELL_CLASS = 'tm-cell-inline-editable';
 /**
- * Modifica diretta in griglia: solo il testo libero. Liste dati, calcolati, numeratori e speciali
- * hanno editor e vincoli propri, date e numeri una formattazione dedicata: restano al form
+ * Modifica diretta in griglia: testo libero e numeri. Liste dati, calcolati, numeratori e speciali
+ * hanno editor e vincoli propri, le date una formattazione dedicata: restano al form
  */
-export const isInlineEditableMetadata = (md) => md.dataType === MetadataDataTypes.Varchar
+export const isInlineEditableMetadata = (md) => (md.dataType === MetadataDataTypes.Varchar || md.dataType === MetadataDataTypes.Number)
     && (md.dataDomain === undefined || md.dataDomain === MetadataDataDomains.None)
     && md.isSystem !== 1 && md.isSystemDerived !== 1;
+/**
+ * Valore di una cella numerica: l'editor della griglia vuole un numero, non la stringa che
+ * la riga porta in `__values` per l'archiviazione. Vuoto o non numerico: cella vuota
+ */
+export const toGridNumber = (value) => {
+    if (value === undefined || value === null || value === '')
+        return undefined;
+    const parsed = typeof value === 'number' ? value : Number(value);
+    return Number.isFinite(parsed) ? parsed : undefined;
+};
 /** Colonne della griglia di riepilogo dai metadati (utente) del tipo documento */
 export const buildColumnsFromDtd = (dtd, renderDataListCell) => getUserMetadataSorted(dtd).map(md => {
     const dataListID = md.dataListID ?? 0;
@@ -41,21 +51,25 @@ export const buildColumnsFromDtd = (dtd, renderDataListCell) => getUserMetadataS
     const dataType = md.dataType;
     const format = md.format?.format;
     const formatCulture = md.format?.formatCulture;
-    // Date e numeri usano la formattazione scalare; le liste dati il render comune
-    const needsScalarFormat = !isDataList && (dataType === MetadataDataTypes.DateTime || dataType === MetadataDataTypes.Number);
     const isInlineEditable = isInlineEditableMetadata(md);
+    const isNumber = dataType === MetadataDataTypes.Number;
+    // Date e numeri usano la formattazione scalare; le liste dati il render comune. La cella
+    // modificabile mostra sempre l'editor, quindi non ha un proprio render
+    const needsScalarFormat = !isDataList && !isInlineEditable && (dataType === MetadataDataTypes.DateTime || isNumber);
     return {
         dataField: String(md.id),
         caption: (SDK_Globals.useLocalizedName ? md.nameLoc : md.name) ?? md.name ?? '',
         // La colonna modificabile dichiara il tipo: senza valori DevExtreme non saprebbe che editor usare
         ...(isInlineEditable
             ? {
-                dataType: 'string',
+                // I numeri arrivano in cella già come numeri (vedi buildArchiveRow): l'editor è la casella numerica
+                dataType: isNumber ? 'number' : 'string',
                 allowEditing: true,
                 showEditorAlways: true,
                 cssClass: INLINE_EDITABLE_CELL_CLASS,
-                // Lunghezza e obbligatorietà del metadato valgono anche in griglia
-                editorOptions: md.length ? { maxLength: md.length } : undefined,
+                // Lunghezza e obbligatorietà del metadato valgono anche in griglia; sui numeri
+                // i limiti restano all'API, in cella basta che sia un numero
+                editorOptions: !isNumber && md.length ? { maxLength: md.length } : undefined,
                 validationRules: String(md.isRequired) === '1' ? [{ type: 'required', message: SDKUI_Localizator.RequiredField }] : undefined,
             }
             : { allowEditing: false }),
@@ -114,15 +128,13 @@ export const multiDetailStyles = {
     typeCardIcon: { width: '34px', height: '34px', borderRadius: '9px', background: TMColors.primary_container, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 },
     typeCardName: { flex: 1, fontSize: '14px', fontWeight: 500, color: TMColors.text_normal, whiteSpace: 'normal', wordBreak: 'break-word', lineHeight: 1.3 },
 };
-/** Stili delle sezioni collassabili: qui perché la testata comune (renderAccordionHeader) vive in questo file */
+// Stili delle sezioni collassabili
 export const accordionStyles = {
     accordion: { display: 'flex', flexDirection: 'column', minHeight: 0, borderRadius: '8px', border: `1px solid ${TMColors.card_background}`, background: TMColors.default_background, overflow: 'hidden' },
-    // Sezione dentro un pannello: l'altezza è quella del pannello, che la sezione riempie. Serve `flex`
-    // e non `height: 100%`, perché il pannello chiuso ha altezza 0 e vive del suo ingombro minimo
     accordionInPanel: { flex: 1 },
     accordionHeader: { display: 'flex', alignItems: 'center', gap: '8px', padding: '4px 8px', cursor: 'pointer', userSelect: 'none', transition: 'background 0.15s ease', outline: 'none', flexShrink: 0, minHeight: '28px' },
     accordionTitle: { flex: 1, fontSize: '12px', fontWeight: 600, color: TMColors.text_normal, display: 'flex', alignItems: 'center', gap: '6px', minWidth: 0 },
-    accordionBadge: { display: 'inline-flex', alignItems: 'center', justifyContent: 'center', minWidth: '18px', height: '16px', padding: '0 5px', borderRadius: '8px', background: TMColors.primary_container, color: TMColors.primary, fontSize: '10px', fontWeight: 700, flexShrink: 0 },
+    accordionBadge: { display: 'inline-flex', alignItems: 'center', justifyContent: 'center', color: TMColors.primary, fontSize: '13px', fontWeight: 700, flexShrink: 0 },
     accordionListBody: { position: 'relative', flex: 1, minHeight: 0, display: 'flex', flexDirection: 'column', borderTop: `1px solid ${TMColors.card_background}` },
     accordionListPlaceholder: { display: 'flex', flex: 1, alignItems: 'center', justifyContent: 'center', gap: '10px', padding: '16px', color: TMColors.label_normal, fontSize: '13px' },
     accordionExpandBtn: { display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: '20px', height: '20px', padding: 0, borderRadius: '6px', border: 'none', background: 'transparent', color: TMColors.label_normal, cursor: 'pointer', flexShrink: 0, transition: 'background 0.15s ease, color 0.15s ease' },
@@ -172,12 +184,10 @@ export const renderAccordionHeader = ({ section, isOpen, tooltip, count, title,
     const canMaximize = panel.canMaximize;
     const onToggle = () => onToggleOpen(section, !isOpen);
     const expandTooltip = panel.isMaximized ? SDKUI_Localizator.Minimize : SDKUI_Localizator.ZoomIn;
-    return (_jsxs("div", { role: canToggle ? 'button' : undefined, tabIndex: canToggle ? 0 : undefined, "aria-expanded": canToggle ? isOpen : undefined, style: { ...accordionStyles.accordionHeader, background: restBackground, ...(canToggle ? {} : { cursor: 'default' }) }, onClick: canToggle ? onToggle : undefined, 
-        // Doppio click sulla testata: ingrandisce e riduce, come nei pannelli del prodotto
-        onDoubleClick: canMaximize ? () => panel.toggleMaximize() : undefined, onKeyDown: canToggle ? (e) => { if (e.key === 'Enter' || e.key === ' ') {
+    return (_jsxs("div", { role: canToggle ? 'button' : undefined, tabIndex: canToggle ? 0 : undefined, "aria-expanded": canToggle ? isOpen : undefined, style: { ...accordionStyles.accordionHeader, background: restBackground, ...(canToggle ? {} : { cursor: 'default' }) }, onClick: canToggle ? onToggle : undefined, onDoubleClick: canMaximize ? () => panel.toggleMaximize() : undefined, onKeyDown: canToggle ? (e) => { if (e.key === 'Enter' || e.key === ' ') {
             e.preventDefault();
             onToggle();
-        } } : undefined, title: canToggle ? tooltip : undefined, ...(canToggle ? hoverStyle({ background: TMColors.primary_container }, { background: restBackground }) : {}), children: [_jsxs("span", { style: accordionStyles.accordionTitle, children: [title, _jsx("span", { style: accordionStyles.accordionBadge, children: count })] }), actions, canMaximize && (_jsx("button", { type: 'button', onClick: (e) => { e.stopPropagation(); panel.toggleMaximize(); }, style: accordionStyles.accordionExpandBtn, title: expandTooltip, "aria-label": expandTooltip, ...hoverStyle({ background: TMColors.primary_container, color: TMColors.primary }, { background: 'transparent', color: TMColors.label_normal }), children: panel.isMaximized ? _jsx(IconWindowMinimize, { fontSize: 14 }) : _jsx(IconWindowMaximize, { fontSize: 14 }) })), canToggle && (_jsx(IconChevronRight, { fontSize: 16, color: TMColors.label_normal, style: { transform: isOpen ? 'rotate(90deg)' : 'none', transition: 'transform 0.2s ease', flexShrink: 0 } }))] }));
+        } } : undefined, ...(canToggle ? hoverStyle({ background: TMColors.primary_container }, { background: restBackground }) : {}), children: [_jsx(TMTooltip, { content: canToggle ? tooltip : undefined, parentStyle: { flex: 1, minWidth: 0 }, childStyle: { maxWidth: '100%' }, children: _jsxs("span", { style: accordionStyles.accordionTitle, children: [title, _jsx("span", { style: accordionStyles.accordionBadge, children: count })] }) }), actions, canMaximize && (_jsx(TMTooltip, { content: expandTooltip, children: _jsx("button", { type: 'button', onClick: (e) => { e.stopPropagation(); panel.toggleMaximize(); }, style: accordionStyles.accordionExpandBtn, "aria-label": expandTooltip, ...hoverStyle({ background: TMColors.primary_container, color: TMColors.primary }, { background: 'transparent', color: TMColors.label_normal }), children: panel.isMaximized ? _jsx(IconWindowMinimize, { fontSize: 14 }) : _jsx(IconWindowMaximize, { fontSize: 14 }) }) })), canToggle && (_jsx(IconChevronRight, { fontSize: 16, color: TMColors.label_normal, style: { transform: isOpen ? 'rotate(90deg)' : 'none', transition: 'transform 0.2s ease', flexShrink: 0 } }))] }));
 };
 /**
  * Contenuto di un pannello: il contesto del panel manager è leggibile solo dentro l'albero del
@@ -222,10 +232,7 @@ export const TMSectionPanelsHeights = ({ sections, sectionsOpen }) => {
         }
         if (hasMaximizedPanel)
             return;
-        // Solo i pannelli a schermo si spartiscono l'altezza: contando anche i nascosti (su mobile ne
-        // resta visibile uno solo) al pannello a schermo toccherebbe la sua sola quota nominale,
-        // lasciando vuoto lo spazio dei pannelli che non ci sono. Chi è fuori schermo resta alle proprie
-        // quote, che sono quelle da cui il panel manager riparte quando lo si torna a mostrare
+        // Solo i pannelli a schermo si spartiscono l'altezza, altrimenti resterebbe vuoto lo spazio dei nascosti
         const visibleSections = sections.filter(section => panelVisibility[section] !== false);
         const heights = sectionPanelHeights(visibleSections, sectionsOpen, dimensionsRef.current);
         visibleSections.forEach(section => setPanelDimensionsById(section, heights[section].width, heights[section].height));

package/lib/hooks/useMultiMasterDetailDcmts.js

@@ -8,7 +8,7 @@ import TMSpinner from '../components/base/TMSpinner';
 import ShowAlert from '../components/base/TMAlert';
 import { TMResultManager } from '../components/forms/TMResultDialog';
 import { useDataListItem } from './useDataListItem';
-import { buildColumnsFromDtd, canArchive, canUpdateMasterCallback, getDetailDtdAsync } from '../components/features/documents/TMMultiMasterDetailDcmtsUtils';
+import { buildColumnsFromDtd, canArchive, canUpdateMasterCallback, getDetailDtdAsync, toGridNumber } from '../components/features/documents/TMMultiMasterDetailDcmtsUtils';
 /** Fasi del flusso di archiviazione multipla dei dettagli */
 export var MultiDetailArchivePhase;
 (function (MultiDetailArchivePhase) {
@@ -44,6 +44,8 @@ export const useMultiMasterDetailDcmts = ({ dtd, masterDcmt, onClose }) => {
     // Struttura del tipo documento selezionato
     const [detailColumns, setDetailColumns] = useState([]);
     const [detailSupportsFile, setDetailSupportsFile] = useState(false);
+    // Mid numerici del tipo di dettaglio: in griglia le loro celle portano il numero (vedi buildArchiveRow)
+    const numericMidsRef = useRef(new Set());
     // Dettagli già archiviati del tipo selezionato, collegati al master
     const [archivedDetailResults, setArchivedDetailResults] = useState([]);
     const [isLoadingArchivedDetails, setIsLoadingArchivedDetails] = useState(false);
@@ -146,6 +148,7 @@ export const useMultiMasterDetailDcmts = ({ dtd, masterDcmt, onClose }) => {
             if (!selectedRelation?.detailTID) {
                 setDetailColumns([]);
                 setDetailSupportsFile(false);
+                numericMidsRef.current = new Set();
                 return;
             }
             try {
@@ -153,16 +156,21 @@ export const useMultiMasterDetailDcmts = ({ dtd, masterDcmt, onClose }) => {
                 setDetailSupportsFile(detailDtd?.archiveConstraint !== ArchiveConstraints.OnlyMetadata);
                 // Liste dati referenziate dai metadati, servono al render delle celle
                 const dataListIDs = new Set();
+                const numericMids = new Set();
                 (detailDtd?.metadata ?? []).forEach(md => {
                     if (md.dataDomain === MetadataDataDomains.DataList && md.dataListID)
                         dataListIDs.add(md.dataListID);
+                    if (md.dataType === MetadataDataTypes.Number && md.id !== undefined)
+                        numericMids.add(md.id);
                 });
+                numericMidsRef.current = numericMids;
                 await loadDataListsAsync(dataListIDs);
                 setDetailColumns(buildColumnsFromDtd(detailDtd, renderDataListCell));
             }
             catch {
                 setDetailColumns([]);
                 setDetailSupportsFile(false);
+                numericMidsRef.current = new Set();
             }
         };
         loadDetailStructureAsync();
@@ -315,11 +323,13 @@ export const useMultiMasterDetailDcmts = ({ dtd, masterDcmt, onClose }) => {
             },
         });
     }, []);
+    // I valori del form sono stringhe: le celle numeriche vogliono il numero, richiesto dal loro editor
     const buildArchiveRow = useCallback((id, tid, values, file) => {
         const row = { id, __tid: tid, __values: values, __file: file };
         for (const v of values) {
-            if (v.mid !== undefined)
-                row[String(v.mid)] = v.value ?? '';
+            if (v.mid === undefined)
+                continue;
+            row[String(v.mid)] = numericMidsRef.current.has(v.mid) ? toGridNumber(v.value) : (v.value ?? '');
         }
         return row;
     }, []);
@@ -338,7 +348,7 @@ export const useMultiMasterDetailDcmts = ({ dtd, masterDcmt, onClose }) => {
         closeAddForm();
     };
     /**
-     * Modifica diretta in griglia di uno o più metadati testuali (changes: mid -> valore).
+     * Modifica diretta in griglia di uno o più metadati testuali o numerici (changes: mid -> valore).
      * La riga e i suoi __values sono ricreati: il duplicato, che condivide __values per
      * riferimento, resta invariato
      */
@@ -346,9 +356,10 @@ export const useMultiMasterDetailDcmts = ({ dtd, masterDcmt, onClose }) => {
         const changedMids = Object.keys(changes);
         if (changedMids.length === 0)
             return;
-        // La griglia restituisce null sull'editor svuotato: a sistema il metadato va vuoto, non nullo
+        // I __values vanno a sistema come stringhe, anche quelli che in griglia sono numeri. La griglia
+        // restituisce null sull'editor svuotato: a sistema il metadato va vuoto, non nullo
         const normalized = {};
-        changedMids.forEach(mid => { normalized[mid] = changes[mid] ?? ''; });
+        changedMids.forEach(mid => { normalized[mid] = changes[mid] === null || changes[mid] === undefined ? '' : String(changes[mid]); });
         setArchiveRows(prev => prev.map(r => {
             if (r.id !== rowId)
                 return r;
@@ -364,7 +375,8 @@ export const useMultiMasterDetailDcmts = ({ dtd, masterDcmt, onClose }) => {
                 values.push(added);
             });
             const updated = { ...r, __values: values };
-            changedMids.forEach(mid => { updated[mid] = normalized[mid]; });
+            // In cella il numero resta un numero, come lo vuole il suo editor
+            changedMids.forEach(mid => { updated[mid] = numericMidsRef.current.has(Number(mid)) ? toGridNumber(normalized[mid]) : normalized[mid]; });
             return updated;
         }));
     }, []);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@topconsultnpm/sdkui-react",
-    "version": "6.22.0-dev2.21",
+    "version": "6.22.0-dev2.23",
     "description": "",
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",