@topconsultnpm/sdkui-react 6.22.0-dev2.3 → 6.22.0-dev2.30

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

@@ -0,0 +1,296 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef, 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, 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";
+import TMTooltip from "../../base/TMTooltip";
+import { TMDcmtTypeIcon } from "../../viewers/TMTidViewer";
+import { ContextMenu } from "../../NewComponents/ContextMenu";
+import { TMPanelManagerWithPersistenceProvider } from "../../layout/panelManager/TMPanelManagerWithPersistenceProvider";
+import TMPanelManagerContainer from "../../layout/panelManager/TMPanelManagerContainer";
+import TMSearchResult from "../search/TMSearchResult";
+import TMDcmtForm from "./TMDcmtForm";
+import TMDcmtIcon from "./TMDcmtIcon";
+import TMMasterInfoFields from "./TMMasterInfoFields";
+import { MultiDetailArchivePhase, useMultiMasterDetailDcmts } from "../../../hooks/useMultiMasterDetailDcmts";
+import { accordionStyles, getDtdDisplayName, INLINE_EDITABLE_CELL_CLASS, multiDetailStyles, PANEL_GUTTER_PX, renderAccordionHeader, renderSelectDcmtType, renderStepper, SECTION_HEADER_HEIGHT_PX, sectionPanelHeights, TMSectionPanelsHeights, TMSummaryResizeTracker, TMSummarySectionSlot } from "./TMMultiMasterDetailDcmtsUtils";
+// Stili delle sezioni in TMMultiMasterDetailDcmtsUtils (vedi accordionStyles e multiDetailStyles)
+const styles = {
+    content: { display: 'flex', flexDirection: 'column', height: '100%', minHeight: 0 },
+    header: { display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '6px 12px', borderBottom: `1px solid ${TMColors.card_background}`, flexShrink: 0 },
+    // Opzioni nella barra del titolo: stesse misure e colore della chiusura DevExtreme (.dx-popup-title .dx-closebutton)
+    titleMenuIcon: { display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: '18px', height: '18px', margin: '1px 0 0', color: `var(--dx-color-text, ${TMColors.text_normal})`, cursor: 'pointer' },
+    loader: { display: 'flex', flex: 1, alignItems: 'center', justifyContent: 'center' },
+    summaryContainer: { display: 'flex', flexDirection: 'column', flex: 1, padding: '8px 12px 10px', minHeight: 0, gap: '8px' },
+    // I pannelli ripartiscono l'altezza in percentuale: serve un'altezza definita che non dipenda dal
+    // contenuto, da qui il riempimento in posizione assoluta dello spazio residuo
+    panelsHost: { position: 'relative', flex: 1, minHeight: 0, minWidth: 0 },
+    panelsHostFill: { position: 'absolute', top: 0, right: 0, bottom: 0, left: 0, display: 'flex' },
+    gridWrapper: { position: 'relative', flex: 1, minHeight: 0 },
+    actionsCell: { display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '14px' },
+    actionIcon: { cursor: 'pointer', display: 'flex' },
+    fileCell: { overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' },
+    fab: { position: 'absolute', bottom: '18px', right: '20px', width: '42px', height: '42px', borderRadius: '50%', backgroundColor: TMColors.button_floating_background, color: '#fff', border: 'none', cursor: 'pointer', boxShadow: '0 2px 6px rgba(0,0,0,0.2)', zIndex: 1000, transition: 'background-color 0.3s ease, transform 0.2s ease', display: 'flex', justifyContent: 'center', alignItems: 'center' },
+    footer: { display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'center', flexWrap: 'wrap', gap: '14px', paddingTop: '8px', borderTop: `1px solid ${TMColors.card_background}`, flexShrink: 0 },
+    footerLabel: { display: 'inline-flex', alignItems: 'center', gap: '8px', cursor: 'pointer', color: TMColors.label_normal, fontSize: '12px', userSelect: 'none', padding: '5px 10px', borderRadius: '16px', background: 'transparent', border: `1px solid ${TMColors.card_background}`, transition: 'all 0.15s ease' },
+    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, openAllSections, clearLayout, layoutResetToken, hasSavedLayout, setHasSavedLayout, 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]);
+    // Le altezze sono una scelta dell'utente solo da quando sposta un separatore: quelle calcolate all'apertura
+    // o al collasso di una sezione non vanno salvate. Con un layout già salvato lo sono comunque
+    const hasUserResizedRef = useRef(false);
+    useEffect(() => { hasUserResizedRef.current = hasMultiDetailPanelStates(); }, [layoutResetToken]);
+    const persistPanelStatesOnUserResize = useCallback((panelStates) => {
+        if (!hasUserResizedRef.current)
+            return;
+        saveMultiDetailPanelStates(panelStates);
+        setHasSavedLayout(true);
+    }, []);
+    // Ricerca nella griglia dei dettagli da archiviare, come in TMSearch (vedi useDocumentOperations)
+    const [showGridSearch, setShowGridSearch] = useState(false);
+    const toggleGridSearchItem = {
+        name: showGridSearch ? SDKUI_Localizator.HideSearch : SDKUI_Localizator.ShowSearch,
+        icon: _jsx(IconSearch, { fontSize: 18 }),
+        beginGroup: true,
+        onClick: () => setShowGridSearch(prev => !prev),
+    };
+    const isSummaryPhase = phase === MultiDetailArchivePhase.ArchiveSummary;
+    const baseTitle = SDKUI_Localizator.ArchiveMultipleDetailDocuments;
+    // Con un solo tipo il nome è mostrato direttamente nel titolo del modale
+    const modalTitle = !hasMultipleTypes && selectedItem ? `${baseTitle}: ${getDtdDisplayName(selectedItem.detailDtd)}` : baseTitle;
+    const isArchiveDisabled = isArchiving || currentRows.length === 0;
+    const archiveButtonCaption = currentRows.length > 0
+        ? `${SDKUI_Localizator.Archive} ${currentRows.length} ${currentRows.length === 1 ? 'dettaglio' : 'dettagli'}`
+        : SDKUI_Localizator.Archive;
+    const steps = [
+        ...(hasMultipleTypes ? [{ phase: MultiDetailArchivePhase.SelectDcmtType, label: SDKUI_Localizator.DcmtType }] : []),
+        {
+            phase: MultiDetailArchivePhase.ArchiveSummary,
+            // Nel riepilogo lo step mostra il tipo selezionato (icona + nome)
+            label: selectedItem
+                ? (_jsxs("span", { style: multiDetailStyles.stepTypeLabel, children: [_jsx(TMDcmtTypeIcon, { dtd: selectedItem.detailDtd }), _jsx("span", { style: multiDetailStyles.stepTypeLabelText, children: getDtdDisplayName(selectedItem.detailDtd) })] }))
+                : SDKUI_Localizator.Summary,
+        },
+    ];
+    // Colonne della griglia: icona del documento, metadati del tipo, file e azioni
+    const gridColumns = useMemo(() => {
+        const iconColumn = {
+            caption: '', width: 50, alignment: 'center',
+            allowSorting: false, allowFiltering: false, allowResizing: false, allowReordering: false, allowHiding: false, allowEditing: false,
+            cellRender: (cell) => {
+                const file = cell.data?.__file;
+                return _jsx(TMDcmtIcon, { fileExtension: file ? getFullFileExtension(file.name) : undefined, fileCount: file ? 1 : 0, tooltipContent: file?.name });
+            },
+        };
+        const fileColumn = {
+            caption: 'File', width: 220, allowSorting: false, allowEditing: false,
+            cellRender: (cell) => {
+                const file = cell.data?.__file;
+                return _jsx("span", { style: { ...styles.fileCell, color: file ? TMColors.text_normal : TMColors.label_normal }, children: file ? file.name : '' });
+            },
+        };
+        const actionsColumn = {
+            caption: '', width: 110, alignment: 'center',
+            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(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]);
+    // ----- Griglia dei dettagli: opzioni e callback con identità stabile -------------------------
+    // Un nuovo riferimento a ogni render farebbe rifare a DevExtreme il setup di selezione/editing
+    const gridSelection = useMemo(() => ({ mode: 'single', showCheckBoxesMode: 'none' }), []);
+    const gridEditing = useMemo(() => ({
+        mode: 'cell',
+        allowUpdating: true,
+        allowAdding: false,
+        allowDeleting: false,
+        startEditAction: 'click',
+        selectTextOnEditStart: false,
+    }), []);
+    const handleSelectionChanged = useCallback((e) => {
+        setSelectedRowKeys(e.selectedRowKeys ?? []);
+    }, [setSelectedRowKeys]);
+    const handleFocusedRowChanged = useCallback((e) => {
+        setFocusedRowKey(e.row?.key);
+    }, [setFocusedRowKey]);
+    const handleRowUpdating = useCallback((e) => {
+        updateRowValues(e.key, e.newData);
+    }, [updateRowValues]);
+    // Il doppio clic apre il form della riga, tranne su azioni e celle modificabili in linea
+    const handleCellDblClick = useCallback((e) => {
+        if (e.rowType !== 'data')
+            return;
+        const cssClass = e.column?.cssClass ?? '';
+        if (cssClass === 'tm-row-actions' || cssClass === INLINE_EDITABLE_CELL_CLASS)
+            return;
+        openEditForm(e.data);
+    }, [openEditForm]);
+    // Menu contestuale con le stesse azioni della colonna
+    const contextMenuItems = useMemo(() => [
+        { name: SDKUI_Localizator.Update, icon: _jsx(IconEdit, { fontSize: 18, color: TMColors.primary }), operationType: 'singleRow', onClick: (id) => openEditForm(archiveRows.find(r => r.id === id)) },
+        { name: SDKUI_Localizator.Duplicate, icon: _jsx(IconDuplicate, { fontSize: 18, color: TMColors.tertiary }), operationType: 'singleRow', onClick: (id) => duplicateRow(archiveRows.find(r => r.id === id)) },
+        { name: SDKUI_Localizator.Deletion, icon: _jsx(IconDelete, { fontSize: 18, color: TMColors.error }), operationType: 'singleRow', beginGroup: true, onClick: (id) => deleteRow(archiveRows.find(r => r.id === id)) },
+        toggleGridSearchItem,
+    ], [archiveRows, showGridSearch]);
+    // Menu delle opzioni del modale, aperto dal pulsante a tre punti nella barra del titolo.
+    // Con il layout di default non c'è niente da cancellare, quindi la voce non compare
+    const optionsMenuItems = useMemo(() => hasSavedLayout
+        ? [{ name: 'Cancella layout', icon: _jsx(IconEraser, { fontSize: 18, color: TMColors.error }), onClick: clearLayout }]
+        : [], [clearLayout, hasSavedLayout]);
+    // 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 = () => {
+        // Senza voci non si mostra il pulsante, per non aprire un menu vuoto
+        if (!isSummaryPhase || isMobile || optionsMenuItems.length === 0)
+            return undefined;
+        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(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',
+                    isOpen,
+                    tooltip: isOpen ? SDKUI_Localizator.HideMasterInfo : SDKUI_Localizator.ShowMasterInfo,
+                    count: masterFieldsCount,
+                    title: (_jsxs(_Fragment, { children: [_jsx(TMDcmtTypeIcon, { dtd: dtd }), _jsxs("span", { style: multiDetailStyles.stepTypeLabelText, children: ["Master: ", getDtdDisplayName(dtd)] })] })),
+                    actions: editMasterButton,
+                    panel,
+                    onToggleOpen: setSectionOpen,
+                }), isOpen && (_jsx(TMMasterInfoFields, { dtd: dtd, dcmt: masterDcmt, getValuesByMidAsync: getMasterMetadataAsync, reloadToken: masterInfoReloadToken, isExpandedView: panel.isMaximized }))] }));
+    };
+    // ----- Sezione: dettagli già archiviati -----------------------------------------------------
+    const renderArchivedDetails = (panel) => {
+        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(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,
+                    tooltip: isOpen ? SDKUI_Localizator.HideArchivedDetails : SDKUI_Localizator.ShowArchivedDetails,
+                    count: archivedDetailsCount,
+                    title: (_jsxs(_Fragment, { children: [_jsx(IconSearchCheck, { fontSize: 15 }), _jsx("span", { style: multiDetailStyles.stepTypeLabelText, children: SDKUI_Localizator.ArchivedDetails })] })),
+                    actions: refreshArchivedButton,
+                    panel,
+                    onToggleOpen: setSectionOpen,
+                }), isOpen && (_jsx("div", { style: { ...accordionStyles.accordionListBody, ...(panel.isMaximized ? { borderTop: 'none' } : {}) }, children: isLoadingArchivedDetails
+                        ? _jsxs("div", { style: accordionStyles.accordionListPlaceholder, children: [_jsx(LoadIndicator, { height: 30, width: 30 }), SDKUI_Localizator.Loading] })
+                        : (hasResults
+                            ? _jsx(TMSearchResult, { showToolbarHeader: false, showCounterConfig: false, showActionsColumn: true, compactPager: !panel.isMaximized, context: SearchResultContext.METADATA_SEARCH, searchResults: archivedDetailResults, onClose: () => setSectionOpen('archivedDetails', false), showBackButton: false, showToolbarCloseButton: false, allowFloatingBar: false, allowRelations: false, openDcmtFormAsModal: true, showSearchResultSidebar: false, showDcmtFormSidebar: true, autoFocusFirstRow: false, onRefreshSearchAsyncDatagrid: refreshArchivedDetailsAsync, allTasks: allTasks, getAllTasks: getAllTasks, deleteTaskByIdsCallback: deleteTaskByIdsCallback, addTaskCallback: addTaskCallback, editTaskCallback: editTaskCallback, handleNavigateToWGs: handleNavigateToWGs, handleNavigateToDossiers: handleNavigateToDossiers, showTodoDcmtForm: showTodoDcmtForm, openFileUploaderPdfEditor: openFileUploaderPdfEditor, graphometricManager: graphometricManager, editPdfForm: editPdfForm, openS4TViewer: openS4TViewer, showToppyDraggableHelpCenter: showToppyDraggableHelpCenter, toppyHelpCenterUsePortal: toppyHelpCenterUsePortal, fetchRemoteCertificates: fetchRemoteCertificates, onOpenS4TViewerRequest: onOpenS4TViewerRequest, onOpenPdfEditorRequest: onOpenPdfEditorRequest, onReferenceClick: onReferenceClick, onTaskCreateRequest: onTaskCreateRequest, onRefreshAfterAddDcmtToFavs: onRefreshAfterAddDcmtToFavs, onFileOpened: onFileOpened, passToArchiveCallback: passToArchiveCallback, openWGsCopyMoveForm: openWGsCopyMoveForm })
+                            : _jsx("div", { style: accordionStyles.accordionListPlaceholder, children: SDKUI_Localizator.NoDataToDisplay })) }))] }));
+    };
+    // ----- Sezione: dettagli da archiviare ------------------------------------------------------
+    const renderArchiveList = (panel) => {
+        const isOpen = sectionsOpen.archiveList;
+        return (_jsxs("div", { style: { ...accordionStyles.accordion, ...accordionStyles.accordionInPanel }, children: [renderAccordionHeader({
+                    section: 'archiveList',
+                    isOpen,
+                    tooltip: isOpen ? SDKUI_Localizator.HideDetailsToArchive : SDKUI_Localizator.ShowDetailsToArchive,
+                    count: currentRows.length,
+                    title: (_jsxs(_Fragment, { children: [_jsx(IconArchive, { fontSize: 15 }), _jsx("span", { style: multiDetailStyles.stepTypeLabelText, children: SDKUI_Localizator.DetailsToArchive })] })),
+                    panel,
+                    onToggleOpen: setSectionOpen,
+                }), isOpen && (_jsxs("div", { style: { ...styles.gridWrapper, ...(panel.isMaximized ? {} : { borderTop: `1px solid ${TMColors.card_background}` }) }, children: [_jsx(TMDataGrid, { dataColumns: gridColumns, dataSource: currentRows, keyExpr: "id", height: "100%", showSearchPanel: showGridSearch, showGroupPanel: false, showFilterPanel: false, showHeaderFilter: true, selection: gridSelection, selectedRowKeys: selectedRowKeys, onSelectionChanged: handleSelectionChanged, focusedRowKey: focusedRowKey, onFocusedRowChanged: handleFocusedRowChanged, onCellDblClick: handleCellDblClick, editing: gridEditing, onRowUpdating: handleRowUpdating, customContextMenuItems: contextMenuItems }), _jsx("button", { type: "button", onClick: openAddForm, style: styles.fab, ...hoverStyle({ backgroundColor: '#D94A9F', transform: 'scale(1.1)', boxShadow: '0 4px 12px rgba(37, 89, 165, 0.6)' }, { backgroundColor: TMColors.button_floating_background, transform: 'scale(1)', boxShadow: '0 2px 6px rgba(0,0,0,0.2)' }), children: _jsx(TMTooltip, { content: SDKUI_Localizator.Add, children: _jsx("i", { className: "dx-icon-add", style: { fontSize: '22px' } }) }) })] }))] }));
+    };
+    // ----- Pannelli del riepilogo, uno per sezione ----------------------------------------------
+    const renderSectionsInPanels = () => {
+        const definitions = [
+            { section: 'masterInfo', name: `Master: ${getDtdDisplayName(dtd)}`, icon: _jsx(IconInfo, { fontSize: 22 }), count: masterFieldsCount, render: renderMasterInfo },
+            ...(selectedRelation?.detailTID !== undefined
+                ? [{ section: 'archivedDetails', name: SDKUI_Localizator.ArchivedDetails, icon: _jsx(IconSearchCheck, { fontSize: 22 }), count: archivedDetailsCount, render: renderArchivedDetails }]
+                : []),
+            { section: 'archiveList', name: SDKUI_Localizator.DetailsToArchive, icon: _jsx(IconArchive, { fontSize: 22 }), count: currentRows.length, render: renderArchiveList },
+        ];
+        const panels = definitions.map((definition, index) => ({
+            id: definition.section,
+            name: definition.name,
+            currentGroupDirection: 'vertical',
+            contentOptions: {
+                // Ingrandire una sezione collassata la apre: altrimenti il pannello a tutto schermo sarebbe vuoto
+                component: _jsx(TMSummarySectionSlot, { section: definition.section, render: definition.render, onBeforeMaximize: (section) => setSectionOpen(section, true) }),
+                // Una sezione chiusa vale 0% di altezza: è questo minimo a tenerne a schermo la testata
+                minHeight: `${SECTION_HEADER_HEIGHT_PX}px`,
+                // 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
+        const savedStates = getMultiDetailPanelStates();
+        const savedDimensions = hasMultiDetailPanelStates()
+            ? sections.reduce((acc, section) => {
+                if (savedStates[section])
+                    acc[section] = { width: savedStates[section].width, height: savedStates[section].height };
+                return acc;
+            }, {})
+            : undefined;
+        // 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, 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, 
+                    // Le altezze si salvano solo dopo che l'utente ha spostato un separatore (vedi TMSummaryResizeTracker)
+                    persistPanelStates: !isMobile ? persistPanelStatesOnUserResize : undefined, children: [_jsx(TMSummaryResizeTracker, { onUserResize: () => { hasUserResizedRef.current = true; } }), _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 }), 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`,
+                            cursor: isArchiveDisabled ? 'default' : 'pointer',
+                            opacity: isArchiveDisabled ? 0.6 : 1,
+                        }, ...(isArchiveDisabled ? {} : hoverStyle({ transform: 'translateY(-2px)', boxShadow: `0 6px 20px ${TMColors.success}77`, filter: 'brightness(1.06)' }, { transform: 'translateY(0)', boxShadow: `0 4px 14px ${TMColors.success}55`, filter: 'brightness(1)' })), children: [_jsx(IconArchive, {}), archiveButtonCaption] })] })] }));
+    // ----- Render principale --------------------------------------------------------------------
+    if (isLoading)
+        return null;
+    return _jsxs(_Fragment, { children: [_jsx(TMLayoutWaitingContainer, { direction: 'vertical', ...waitPanel, isCancelable: true, abortController: abortController, usePortal: true, children: _jsx(TMModal, { width: isSummaryPhase ? '95%' : '720px', height: isSummaryPhase ? '95%' : 'auto', onClose: closeModal, title: modalTitle, hidePopup: false, askClosingConfirm: archiveRows.length > 0, recenterOnResize: true, titleActions: renderOptionsMenu(), children: _jsxs("div", { style: styles.content, children: [hasMultipleTypes && _jsx("div", { style: styles.header, children: renderStepper({
+                                    steps,
+                                    phase,
+                                    hasMultipleTypes,
+                                    isBackLocked,
+                                    showBackArrow: isSummaryPhase,
+                                    onBack: backToTypeSelection,
+                                    onStepClick: (stepPhase) => (stepPhase === MultiDetailArchivePhase.SelectDcmtType ? backToTypeSelection() : setPhase(stepPhase)),
+                                }) }), !isSummaryPhase
+                                ? renderSelectDcmtType({ detailRelationItems, selectedRelation, onSelectRelation: selectRelation })
+                                : (isSummaryReady
+                                    ? renderArchiveSummary()
+                                    : _jsx("div", { style: styles.loader, children: _jsx(LoadIndicator, { height: 40, width: 40 }) }))] }) }) }), isOpenAddForm && selectedRelation?.detailTID && (_jsx(TMDcmtForm, { isModal: true, titleModal: getDtdDisplayName(selectedItem?.detailDtd), TID: selectedRelation.detailTID, layoutMode: LayoutModes.Ark, showBackButton: false, allowButtonsRefs: false, inputMids: formInputMids, inputFile: editingRow?.__file ?? null, archiveListMode: {
+                    isEditingRow: editingRowId !== undefined,
+                    onUpsertRow: (values, file) => upsertRow(values, file),
+                }, onClose: closeAddForm, allTasks: allTasks, getAllTasks: getAllTasks, deleteTaskByIdsCallback: deleteTaskByIdsCallback, addTaskCallback: addTaskCallback, editTaskCallback: editTaskCallback, handleNavigateToWGs: handleNavigateToWGs, handleNavigateToDossiers: handleNavigateToDossiers, showDcmtFormSidebar: showDcmtFormSidebar, showTodoDcmtForm: showTodoDcmtForm, openFileUploaderPdfEditor: openFileUploaderPdfEditor, graphometricManager: graphometricManager })), isOpenMasterForm && masterDcmt?.TID !== undefined && masterDcmt?.DID !== undefined && (_jsx(TMDcmtForm, { isModal: true, titleModal: `${SDKUI_Localizator.Update}: ${getDtdDisplayName(dtd)}`, TID: masterDcmt.TID, DID: masterDcmt.DID, layoutMode: LayoutModes.Update, showBackButton: false, allowRelations: false, allowButtonsRefs: false, onSavedAsyncCallback: handleMasterSavedAsync, onClose: () => setIsOpenMasterForm(false), allTasks: allTasks, getAllTasks: getAllTasks, deleteTaskByIdsCallback: deleteTaskByIdsCallback, addTaskCallback: addTaskCallback, editTaskCallback: editTaskCallback, onTaskCreateRequest: onTaskCreateRequest, handleNavigateToWGs: handleNavigateToWGs, handleNavigateToDossiers: handleNavigateToDossiers, showDcmtFormSidebar: showDcmtFormSidebar, showTodoDcmtForm: showTodoDcmtForm, openFileUploaderPdfEditor: openFileUploaderPdfEditor, graphometricManager: graphometricManager, editPdfForm: editPdfForm, openS4TViewer: openS4TViewer, fetchRemoteCertificates: fetchRemoteCertificates, onOpenS4TViewerRequest: onOpenS4TViewerRequest, onOpenPdfEditorRequest: onOpenPdfEditorRequest, onReferenceClick: onReferenceClick }))] });
+};
+export default TMMultiMasterDetailDcmtsForm;