@topconsultnpm/sdkui-react 6.22.0-dev2.20 → 6.22.0-dev2.22

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

@@ -1,10 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useCallback, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { LayoutModes } from "@topconsultnpm/sdk-ts";
 import { LoadIndicator } from "devextreme-react/load-indicator";
 import { SearchResultContext } from "../../../ts";
-import { getFullFileExtension, getMultiDetailPanelStates, hasMultiDetailPanelStates, hoverStyle, IconArchive, IconDelete, IconDuplicate, IconEdit, IconEraser, IconMenuVertical, IconRefresh, IconSearch, IconSearchCheck, saveMultiDetailPanelStates, SDKUI_Localizator } from "../../../helper";
+import { getFullFileExtension, getMultiDetailPanelStates, hasMultiDetailPanelStates, hoverStyle, IconArchive, IconDelete, IconDuplicate, IconEdit, IconEraser, IconInfo, IconMenuVertical, IconRefresh, IconSearch, IconSearchCheck, saveMultiDetailPanelStates, SDKUI_Localizator } from "../../../helper";
 import { TMColors } from "../../../utils/theme";
+import { DeviceType, useDeviceType } from "../../base/TMDeviceProvider";
 import { TMLayoutWaitingContainer } from "../../base/TMWaitPanel";
 import TMModal from "../../base/TMModal";
 import TMDataGrid from "../../base/TMDataGrid";
@@ -41,9 +42,20 @@ const styles = {
     archiveButton: { display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: '8px', height: '38px', padding: '0 22px', border: 'none', borderRadius: '10px', fontSize: '14px', fontWeight: 600, letterSpacing: '0.2px', color: '#ffffff', cursor: 'pointer', transition: 'transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease' },
     checkbox: { width: '16px', height: '16px', accentColor: TMColors.primary, cursor: 'pointer', margin: 0 },
 };
+/** Sezione mostrata per prima su mobile, dove i pannelli si vedono uno alla volta */
+const MOBILE_SECTION = 'archiveList';
 const TMMultiMasterDetailDcmtsForm = (props) => {
     const { dtd, masterDcmt, onClose, allTasks, getAllTasks, deleteTaskByIdsCallback, addTaskCallback, editTaskCallback, handleNavigateToWGs, handleNavigateToDossiers, showDcmtFormSidebar, showTodoDcmtForm, openFileUploaderPdfEditor, graphometricManager, editPdfForm, openS4TViewer, showToppyDraggableHelpCenter, toppyHelpCenterUsePortal, fetchRemoteCertificates, onOpenS4TViewerRequest, onOpenPdfEditorRequest, onReferenceClick, onTaskCreateRequest, onRefreshAfterAddDcmtToFavs, onFileOpened, passToArchiveCallback, openWGsCopyMoveForm } = props;
-    const { isLoading, isSummaryReady, phase, setPhase, detailRelationItems, selectedRelation, selectedItem, hasMultipleTypes, selectRelation, backToTypeSelection, isBackLocked, closeModal, sectionsOpen, setSectionOpen, clearLayout, layoutResetToken, canUpdateMaster, masterFieldsCount, getMasterMetadataAsync, masterInfoReloadToken, isOpenMasterForm, setIsOpenMasterForm, handleMasterSavedAsync, archivedDetailResults, archivedDetailsCount, isLoadingArchivedDetails, refreshArchivedDetailsAsync, detailColumns, detailSupportsFile, archiveRows, currentRows, focusedRowKey, setFocusedRowKey, selectedRowKeys, setSelectedRowKeys, isOpenAddForm, editingRowId, editingRow, formInputMids, openAddForm, openEditForm, closeAddForm, deleteRow, duplicateRow, upsertRow, updateRowValues, stopOnFirstError, setStopOnFirstError, isArchiving, archiveAllAsync, waitPanel, abortController, } = useMultiMasterDetailDcmts({ dtd, masterDcmt, onClose });
+    const { isLoading, isSummaryReady, phase, setPhase, detailRelationItems, selectedRelation, selectedItem, hasMultipleTypes, selectRelation, backToTypeSelection, isBackLocked, closeModal, sectionsOpen, setSectionOpen, openAllSections, clearLayout, layoutResetToken, canUpdateMaster, masterFieldsCount, getMasterMetadataAsync, masterInfoReloadToken, isOpenMasterForm, setIsOpenMasterForm, handleMasterSavedAsync, archivedDetailResults, archivedDetailsCount, isLoadingArchivedDetails, refreshArchivedDetailsAsync, detailColumns, detailSupportsFile, archiveRows, currentRows, focusedRowKey, setFocusedRowKey, selectedRowKeys, setSelectedRowKeys, isOpenAddForm, editingRowId, editingRow, formInputMids, openAddForm, openEditForm, closeAddForm, deleteRow, duplicateRow, upsertRow, updateRowValues, stopOnFirstError, setStopOnFirstError, isArchiving, archiveAllAsync, waitPanel, abortController, } = useMultiMasterDetailDcmts({ dtd, masterDcmt, onClose });
+    const deviceType = useDeviceType();
+    // Su mobile il panel manager mostra un pannello alla volta: le sezioni si raggiungono dalla sua barra
+    const isMobile = useMemo(() => deviceType === DeviceType.MOBILE, [deviceType]);
+    // Un pannello alla volta non lascia spazio da cedere: le sezioni chiuse nella vista impilata si
+    // aprono qui, altrimenti il pannello a schermo mostrerebbe la sola testata
+    useEffect(() => {
+        if (isMobile && isSummaryReady)
+            openAllSections();
+    }, [isMobile, isSummaryReady]);
     // Ricerca nella griglia dei dettagli da archiviare, come in TMSearch (vedi useDocumentOperations)
     const [showGridSearch, setShowGridSearch] = useState(false);
     const toggleGridSearchItem = {
@@ -131,9 +143,10 @@ const TMMultiMasterDetailDcmtsForm = (props) => {
     const optionsMenuItems = useMemo(() => [
         { name: 'Cancella layout', icon: _jsx(IconEraser, { fontSize: 18, color: TMColors.error }), onClick: clearLayout },
     ], [clearLayout]);
-    // Le opzioni riguardano i pannelli del riepilogo: fuori da quella fase non hanno effetto
+    // Le opzioni riguardano i pannelli del riepilogo: fuori da quella fase non hanno effetto, e su mobile
+    // non c'è un layout da cancellare (i pannelli si vedono uno alla volta, a tutta altezza)
     const renderOptionsMenu = () => {
-        if (!isSummaryPhase)
+        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" }) }) }));
     };
@@ -191,13 +204,13 @@ const TMMultiMasterDetailDcmtsForm = (props) => {
     // ----- Pannelli del riepilogo, uno per sezione ----------------------------------------------
     const renderSectionsInPanels = () => {
         const definitions = [
-            { section: 'masterInfo', name: `Master: ${getDtdDisplayName(dtd)}`, render: renderMasterInfo },
+            { section: 'masterInfo', name: `Master: ${getDtdDisplayName(dtd)}`, icon: _jsx(IconInfo, { fontSize: 22 }), count: masterFieldsCount, render: renderMasterInfo },
             ...(selectedRelation?.detailTID !== undefined
-                ? [{ section: 'archivedDetails', name: SDKUI_Localizator.ArchivedDetails, render: renderArchivedDetails }]
+                ? [{ section: 'archivedDetails', name: SDKUI_Localizator.ArchivedDetails, icon: _jsx(IconSearchCheck, { fontSize: 22 }), count: archivedDetailsCount, render: renderArchivedDetails }]
                 : []),
-            { section: 'archiveList', name: SDKUI_Localizator.DetailsToArchive, render: renderArchiveList },
+            { section: 'archiveList', name: SDKUI_Localizator.DetailsToArchive, icon: _jsx(IconArchive, { fontSize: 22 }), count: currentRows.length, render: renderArchiveList },
         ];
-        const panels = definitions.map(definition => ({
+        const panels = definitions.map((definition, index) => ({
             id: definition.section,
             name: definition.name,
             currentGroupDirection: 'vertical',
@@ -209,6 +222,8 @@ const TMMultiMasterDetailDcmtsForm = (props) => {
                 // La sezione collassata è alta quanto la sua testata: i separatori non la ingrandiscono
                 isCollapsed: !sectionsOpen[definition.section],
             },
+            // Barra dei pannelli: su mobile è l'unico modo per passare da una sezione all'altra
+            toolbarOptions: { icon: definition.icon, visible: true, isActive: true, orderNumber: index + 1, count: definition.count, tooltip: definition.name },
         }));
         const sections = panels.map(panel => panel.id);
         // Le altezze salvate sono il punto di partenza, ma è il collasso corrente a decidere le quote
@@ -220,13 +235,19 @@ const TMMultiMasterDetailDcmtsForm = (props) => {
                 return acc;
             }, {})
             : undefined;
-        const initialDimensions = sectionPanelHeights(sections, sectionsOpen, savedDimensions);
-        const initialVisibility = sections.reduce((acc, section) => { acc[section] = true; return acc; }, {});
+        // Con un pannello alla volta non ci sono quote da spartire: quello a schermo prende tutta l'altezza.
+        // Le quote proporzionali (e il layout salvato) valgono solo per i pannelli impilati
+        const fullHeights = sections.reduce((acc, section) => { acc[section] = { width: '100%', height: '100%' }; return acc; }, {});
+        const initialDimensions = isMobile ? fullHeights : sectionPanelHeights(sections, sectionsOpen, savedDimensions);
+        const initialVisibility = sections.reduce((acc, section) => { acc[section] = isMobile ? section === MOBILE_SECTION : true; return acc; }, {});
         return (_jsx("div", { style: styles.panelsHost, children: _jsx("div", { style: styles.panelsHostFill, children: _jsxs(TMPanelManagerWithPersistenceProvider
-                // Le dimensioni sono lette solo al montaggio: dopo la cancellazione del layout i pannelli vanno rimontati
-                , { panels: panels, initialVisibility: initialVisibility, defaultDimensions: initialDimensions, initialDimensions: initialDimensions, initialMobilePanelId: 'archiveList', isPersistenceEnabled: true, persistPanelStates: saveMultiDetailPanelStates, children: [_jsx(TMSectionPanelsHeights, { sections: sections, sectionsOpen: sectionsOpen }), _jsx(TMPanelManagerContainer, { panels: panels, direction: 'vertical', showToolbar: false, minPanelSizePx: SECTION_HEADER_HEIGHT_PX, gutterSizePx: PANEL_GUTTER_PX })] }, layoutResetToken) }) }));
+                // Le dimensioni sono lette solo al montaggio: dopo la cancellazione del layout, e al
+                // passaggio fra impilato e un pannello alla volta, i pannelli vanno rimontati
+                , { panels: panels, initialVisibility: initialVisibility, defaultDimensions: initialDimensions, initialDimensions: initialDimensions, initialMobilePanelId: MOBILE_SECTION, 
+                    // Su mobile il layout è imposto dal dispositivo: salvarlo sovrascriverebbe quello dell'utente
+                    isPersistenceEnabled: !isMobile, persistPanelStates: !isMobile ? saveMultiDetailPanelStates : undefined, children: [_jsx(TMSectionPanelsHeights, { sections: sections, sectionsOpen: sectionsOpen }), _jsx(TMPanelManagerContainer, { panels: panels, direction: 'vertical', showToolbar: isMobile, minPanelSizePx: SECTION_HEADER_HEIGHT_PX, gutterSizePx: isMobile ? undefined : PANEL_GUTTER_PX })] }, `${layoutResetToken}-${isMobile}`) }) }));
     };
-    const renderArchiveSummary = () => (_jsxs("div", { style: styles.summaryContainer, children: [renderSectionsInPanels(), _jsxs("div", { style: styles.footer, children: [_jsxs("label", { style: styles.footerLabel, ...hoverStyle({ borderColor: TMColors.primary, color: TMColors.text_normal }, { borderColor: TMColors.card_background, color: TMColors.label_normal }), children: [_jsx("input", { type: "checkbox", checked: stopOnFirstError, onChange: (e) => setStopOnFirstError(e.target.checked), style: styles.checkbox }), "Ferma l'archiviazione al primo errore"] }), _jsxs("button", { type: "button", onClick: archiveAllAsync, disabled: isArchiveDisabled, style: {
+    const renderArchiveSummary = () => (_jsxs("div", { style: styles.summaryContainer, children: [renderSectionsInPanels(), _jsxs("div", { style: styles.footer, children: [_jsxs("label", { style: styles.footerLabel, ...hoverStyle({ borderColor: TMColors.primary, color: TMColors.text_normal }, { borderColor: TMColors.card_background, color: TMColors.label_normal }), children: [_jsx("input", { type: "checkbox", checked: stopOnFirstError, onChange: (e) => setStopOnFirstError(e.target.checked), style: styles.checkbox }), SDKUI_Localizator.StopOnFirstError] }), _jsxs("button", { type: "button", onClick: archiveAllAsync, disabled: isArchiveDisabled, style: {
                             ...styles.archiveButton,
                             background: isArchiveDisabled ? TMColors.disabled : TMColors.success,
                             boxShadow: isArchiveDisabled ? 'none' : `0 4px 14px ${TMColors.success}55`,

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

@@ -19,6 +19,8 @@ export type AccordionSection = 'masterInfo' | 'archivedDetails' | 'archiveList';
  */
 export type SectionPanelState = {
     isMaximized: boolean;
+    canMaximize: boolean;
+    canCollapse: boolean;
     toggleMaximize: () => void;
 };
 /** Valore di un metadato letto da un documento: una cella del risultato di ricerca */
@@ -44,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;
@@ -68,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>;

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

@@ -6,6 +6,7 @@ import { formatScalarValue, getUserMetadataSorted } from '../../../helper/dcmtsH
 import { TMColors } from '../../../utils/theme';
 import { TMDcmtTypeIcon } from '../../viewers/TMTidViewer';
 import TMTooltip from '../../base/TMTooltip';
+import { DeviceType, useDeviceType } from '../../base/TMDeviceProvider';
 import { useTMPanelManagerContext } from '../../layout/panelManager/TMPanelManagerContext';
 // l'elenco da archiviare è l'informazione più importante, quindi prende la fetta maggiore
 export const SECTION_WEIGHTS = { masterInfo: 25, archivedDetails: 30, archiveList: 45 };
@@ -26,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;
@@ -40,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 }),
@@ -164,16 +179,19 @@ export const renderSelectDcmtType = ({ detailRelationItems, selectedRelation, on
             }) })] }));
 export const renderAccordionHeader = ({ section, isOpen, tooltip, count, title, actions, panel, onToggleOpen }) => {
     const restBackground = isOpen ? TMColors.toolbar_background : 'transparent';
-    // Un pannello ingrandito non si collassa: resterebbe la sola testata al posto di tutto il riepilogo
-    const canToggle = !panel.isMaximized;
+    // Un pannello ingrandito non si collassa: resterebbe la sola testata al posto di tutto il riepilogo.
+    // Dove i pannelli si vedono uno alla volta (mobile) il collasso è precluso per lo stesso motivo
+    const canToggle = panel.canCollapse && !panel.isMaximized;
+    // Con un pannello alla volta l'ingrandimento non ha nulla da nascondere
+    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: () => panel.toggleMaximize(), onKeyDown: canToggle ? (e) => { if (e.key === 'Enter' || e.key === ' ') {
+        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, _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, 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 } }))] }));
 };
 /**
  * Contenuto di un pannello: il contesto del panel manager è leggibile solo dentro l'albero del
@@ -182,6 +200,10 @@ export const renderAccordionHeader = ({ section, isOpen, tooltip, count, title,
 export const TMSummarySectionSlot = ({ section, render, onBeforeMaximize }) => {
     const { maximizedPanels, toggleMaximize } = useTMPanelManagerContext();
     const isMaximized = maximizedPanels.includes(section);
+    // Su mobile il panel manager mostra un pannello alla volta: la sezione è già a tutto schermo, e
+    // ingrandirla nasconderebbe la barra con cui si passa da una sezione all'altra; chiuderla lascerebbe
+    // a schermo la sola testata, perché non ci sono altre sezioni a cui cedere lo spazio
+    const isMobile = useDeviceType() === DeviceType.MOBILE;
     // Una sezione collassata non ha corpo: ingrandirla mostrerebbe un pannello vuoto, senza
     // nemmeno poterla riaprire (da ingrandita il collasso è bloccato), quindi la si apre prima
     const toggleMaximizeSection = () => {
@@ -189,7 +211,7 @@ export const TMSummarySectionSlot = ({ section, render, onBeforeMaximize }) => {
             onBeforeMaximize?.(section);
         toggleMaximize(section);
     };
-    return _jsx(_Fragment, { children: render({ isMaximized, toggleMaximize: toggleMaximizeSection }) });
+    return _jsx(_Fragment, { children: render({ isMaximized, canMaximize: !isMobile, canCollapse: !isMobile, toggleMaximize: toggleMaximizeSection }) });
 };
 /**
  * Tiene allineate le altezze dei pannelli al collasso delle sezioni: il panel manager non
@@ -197,7 +219,7 @@ export const TMSummarySectionSlot = ({ section, render, onBeforeMaximize }) => {
  * Vive dentro il provider perché il contesto è leggibile solo lì
  */
 export const TMSectionPanelsHeights = ({ sections, sectionsOpen }) => {
-    const { panelDimensions, setPanelDimensionsById, maximizedPanels } = useTMPanelManagerContext();
+    const { panelDimensions, panelVisibility, setPanelDimensionsById, maximizedPanels } = useTMPanelManagerContext();
     // Con un pannello ingrandito le quote sono quelle dell'ingrandimento (100% e 0%): riallinearle al
     // collasso lo svuoterebbe, quindi si aspetta il ritorno alla vista normale per rifare i conti
     const hasMaximizedPanel = maximizedPanels.length > 0;
@@ -214,8 +236,13 @@ export const TMSectionPanelsHeights = ({ sections, sectionsOpen }) => {
         }
         if (hasMaximizedPanel)
             return;
-        const heights = sectionPanelHeights(sections, sectionsOpen, dimensionsRef.current);
-        sections.forEach(section => setPanelDimensionsById(section, heights[section].width, heights[section].height));
-    }, [sectionsOpen, hasMaximizedPanel]);
+        // 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
+        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));
+    }, [sectionsOpen, hasMaximizedPanel, panelVisibility]);
     return null;
 };

package/lib/helper/SDKUI_Localizator.d.ts

@@ -820,6 +820,7 @@ export declare class SDKUI_Localizator {
     static get Statistics(): "Statistiken" | "Statistics" | "Estadística" | "Statistiques" | "Estatísticas" | "Statistiche";
     static get Status(): "Status" | "Estado" | "Statut" | "Stato";
     static get StatusAndAnswer(): "Status und Antwort" | "Status and answer" | "Estado y respuesta" | "Statut et réponse" | "Estado e resposta" | "Stato e risposta";
+    static get StopOnFirstError(): "Beim ersten Fehler abbrechen" | "Stop at the first error" | "Detener en el primer error" | "Arrêter à la première erreur" | "Parar no primeiro erro" | "Interrompi al primo errore";
     static get Subject(): "Betreff" | "Subject" | "Asunto" | "Objet" | "Assunto" | "Oggetto";
     static get Summary(): "Zusammenfassung" | "Summary" | "Resumen" | "Résumé" | "Resumo" | "Riepilogo";
     static get SwitchUser(): "Benutzer wechseln" | "Switch user" | "Cambiar usuario" | "Changer d'utilisateur" | "Mudar de usuário" | "Cambia utente";

package/lib/helper/SDKUI_Localizator.js

@@ -8180,6 +8180,16 @@ export class SDKUI_Localizator {
             default: return "Stato e risposta";
         }
     }
+    static get StopOnFirstError() {
+        switch (this._cultureID) {
+            case CultureIDs.De_DE: return "Beim ersten Fehler abbrechen";
+            case CultureIDs.En_US: return "Stop at the first error";
+            case CultureIDs.Es_ES: return "Detener en el primer error";
+            case CultureIDs.Fr_FR: return "Arrêter à la première erreur";
+            case CultureIDs.Pt_PT: return "Parar no primeiro erro";
+            default: return "Interrompi al primo errore";
+        }
+    }
     static get Subject() {
         switch (this._cultureID) {
             case CultureIDs.De_DE: return "Betreff";

package/lib/hooks/useMultiMasterDetailDcmts.d.ts

@@ -56,6 +56,7 @@ export declare const useMultiMasterDetailDcmts: ({ dtd, masterDcmt, onClose }: U
     closeModal: () => void;
     sectionsOpen: Record<AccordionSection, boolean>;
     setSectionOpen: (section: AccordionSection, isOpen: boolean) => void;
+    openAllSections: () => void;
     clearLayout: () => void;
     layoutResetToken: number;
     canUpdateMaster: boolean;

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();
@@ -218,6 +226,18 @@ export const useMultiMasterDetailDcmts = ({ dtd, masterDcmt, onClose }) => {
         if (section === 'archivedDetails' && isOpen && !areArchivedDetailsLoadedRef.current && !isLoadingArchivedDetails)
             refreshArchivedDetailsAsync();
     };
+    /**
+     * Apre tutte le sezioni senza salvare: serve dove il collasso non è una scelta dell'utente ma una
+     * conseguenza del layout (su mobile si vede un pannello alla volta, e una sezione chiusa lascerebbe
+     * a schermo la sola testata). Non si persiste per non sovrascrivere le sezioni che l'utente ha
+     * chiuso nella vista a pannelli impilati.
+     */
+    const openAllSections = () => {
+        setSectionsOpen(prev => Object.values(prev).every(Boolean) ? prev : { masterInfo: true, archivedDetails: true, archiveList: true });
+        // I dettagli già archiviati si caricano come alla prima apertura della sezione
+        if (!areArchivedDetailsLoadedRef.current && !isLoadingArchivedDetails)
+            refreshArchivedDetailsAsync();
+    };
     /**
      * Cancella il layout configurato dall'utente (altezze dei pannelli e sezioni collassate), previa
      * conferma. Il token cambia per rimontare il panel manager, che legge le dimensioni solo all'avvio.
@@ -303,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;
     }, []);
@@ -326,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
      */
@@ -334,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;
@@ -352,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;
         }));
     }, []);
@@ -537,7 +561,7 @@ export const useMultiMasterDetailDcmts = ({ dtd, masterDcmt, onClose }) => {
         detailRelationItems, selectedRelation, selectedItem, hasMultipleTypes,
         selectRelation, backToTypeSelection, isBackLocked, closeModal,
         // Sezioni
-        sectionsOpen, setSectionOpen, clearLayout, layoutResetToken,
+        sectionsOpen, setSectionOpen, openAllSections, clearLayout, layoutResetToken,
         // Master
         canUpdateMaster, masterFieldsCount, getMasterMetadataAsync, masterInfoReloadToken,
         isOpenMasterForm, setIsOpenMasterForm, handleMasterSavedAsync,

package/package.json

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