@topconsultnpm/sdkui-react 6.19.0-dev1.10

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

@@ -0,0 +1,1083 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import TMDcmtPreview from './TMDcmtPreview';
+import { AccessLevels, ArchiveConstraints, ArchiveEngineByID, DcmtTypeListCacheService, LayoutModes, MetadataDataTypes, ResultTypes, SDK_Globals, SDK_Localizator, SystemMIDsAsNumber, SystemTIDs, Task_States, TemplateTIDs, UpdateEngineByID, ValidationItem, WorkflowCacheService, WorkItemMetadataNames } from '@topconsultnpm/sdk-ts';
+import { ContextMenu } from 'devextreme-react';
+import { WorkFlowApproveRejectPopUp, WorkFlowMoreInfoPopUp, WorkFlowOperationButtons, WorkFlowReAssignPopUp } from '../workflow/TMWorkflowPopup';
+import { DownloadTypes, FormModes } from '../../../ts';
+import { DeviceType, useDeviceType } from '../../base/TMDeviceProvider';
+import { useDcmtOperations } from '../../../hooks/useDcmtOperations';
+import { getWorkItemSetIDAsync, handleArchiveVisibility, searchResultToMetadataValues } from '../../../helper/queryHelper';
+import { genUniqueId, IconShow, SDKUI_Localizator, updateMruTids, IconBoard, IconDcmtTypeSys, IconDetailDcmts, svgToString, IconDownload, calcIsModified, IconMenuVertical, Globalization, getListMaxItems, getSystemMetadata, IconBoxArchiveIn, IconClear, IconUndo, SDKUI_Globals, IconPreview, isTaskMoreInfo, IconWorkflow, IconSearch, deepCompare } from '../../../helper';
+import { hasDetailRelations, hasMasterRelations, isXMLFileExt } from '../../../helper/dcmtsHelper';
+import { Gutters, TMColors } from '../../../utils/theme';
+import { StyledFormButtonsContainer, StyledLoadingContainer, StyledModalContainer, StyledSpinner, StyledToolbarCardContainer } from '../../base/Styled';
+import ShowAlert from '../../base/TMAlert';
+import TMButton from '../../base/TMButton';
+import { TMExceptionBoxManager, TMMessageBoxManager, ButtonNames } from '../../base/TMPopUp';
+import TMSpinner, { Spinner } from '../../base/TMSpinner';
+import { TMLayoutWaitingContainer } from '../../base/TMWaitPanel';
+import TMDistinctValues from '../../choosers/TMDistinctValues';
+import TMFormulaEditor, { FormulaDescriptor, FormulaHelper, FormulaTargets } from '../../editors/TMFormulaEditor';
+import TMMetadataValues, { AdvancedMenuButtons } from '../../editors/TMMetadataValues';
+import { TMSaveFormButtonPrevious, TMSaveFormButtonNext, TMSaveFormButtonSave, TMSaveFormButtonUndo } from '../../forms/TMSaveForm';
+import TMShowAllOrMaxItemsButton from '../../base/TMShowAllOrMaxItemsButton';
+import TMFileUploader from '../../features/documents/TMFileUploader';
+import TMMasterDetailDcmts from './TMMasterDetailDcmts';
+import TMDcmtBlog from './TMDcmtBlog';
+import { useInputAttachmentsDialog } from '../../../hooks/useInputDialog';
+import TMModal from '../../base/TMModal';
+import { useTMPanelManagerContext } from '../../layout/panelManager/TMPanelManagerContext';
+import TMPanelManagerContainer from '../../layout/panelManager/TMPanelManagerContainer';
+import { TMPanelManagerWithPersistenceProvider } from '../../layout/panelManager/TMPanelManagerWithPersistenceProvider';
+import { useWorkflowApprove } from '../../../hooks/useWorkflowApprove';
+import ToppyHelpCenter from '../assistant/ToppyHelpCenter';
+import TMBlogCommentForm from '../blog/TMBlogCommentForm';
+import WFDiagram from '../workflow/diagram/WFDiagram';
+import TMTooltip from '../../base/TMTooltip';
+let abortControllerLocal = new AbortController();
+//#endregion
+const TMDcmtForm = ({ showHeader = true, onSaveRecents, layoutMode = LayoutModes.Update, onClose, onSavedAsyncCallback, TID, DID, formMode = FormModes.Update, canNext, canPrev, count, itemIndex, onNext, onPrev, allowNavigation = true, allowRelations = true, isClosable = false, isExpertMode = SDKUI_Globals.userSettings.advancedSettings.expertMode === 1, showDcmtFormSidebar = true, invokedByTodo = false, titleModal, isModal = false, widthModal = "100%", heightModal = "100%", groupId, onWFOperationCompleted, onTaskCompleted, inputFile = null, taskFormDialogComponent, taskMoreInfo, connectorFileSave = undefined, inputMids = [], onOpenS4TViewerRequest, s4TViewerDialogComponent, enableDragDropOverlay = false, passToSearch }) => {
+    const [id, setID] = useState('');
+    const [showWaitPanelLocal, setShowWaitPanelLocal] = useState(false);
+    const [waitPanelTitleLocal, setWaitPanelTitleLocal] = useState('');
+    const [showPrimaryLocal, setShowPrimaryLocal] = useState(false);
+    const [waitPanelTextPrimaryLocal, setWaitPanelTextPrimaryLocal] = useState('');
+    const [waitPanelValuePrimaryLocal, setWaitPanelValuePrimaryLocal] = useState(0);
+    const [waitPanelMaxValuePrimaryLocal, setWaitPanelMaxValuePrimaryLocal] = useState(0);
+    const [showSecondaryLocal, setShowSecondaryLocal] = useState(false);
+    const [waitPanelTextSecondaryLocal, setWaitPanelTextSecondaryLocal] = useState('');
+    const [waitPanelValueSecondaryLocal, setWaitPanelValueSecondaryLocal] = useState(0);
+    const [waitPanelMaxValueSecondaryLocal, setWaitPanelMaxValueSecondaryLocal] = useState(0);
+    const [useWaitPanelLocalState, setUseWaitPanelLocalState] = useState(false);
+    const [formData, setFormData] = useState([]);
+    const [formDataOrig, setFormDataOrig] = useState([]);
+    const [validationItems, setValidationItems] = useState([]);
+    const [fromDTD, setFromDTD] = useState();
+    const [showApprovePopup, setShowApprovePopup] = useState(false);
+    const [showRejectPopup, setShowRejectPopup] = useState(false);
+    const [showReAssignPopup, setShowReAssignPopup] = useState(false);
+    const [showMoreInfoPopup, setShowMoreInfoPopup] = useState(false);
+    const [layout, setLayout] = useState();
+    const appliedInputMidsRef = useRef(null);
+    // Refs per evitare stale closure nei callback
+    // I useCallback catturano i valori delle dipendenze al momento della creazione.
+    // Questi ref vengono sincronizzati tramite useEffect e permettono di accedere
+    // sempre ai valori correnti senza dover ricreare i callback ad ogni cambio di stato.
+    const formDataOrigRef = useRef([]);
+    const formDataRef = useRef([]);
+    const fromDTDRef = useRef();
+    const [isOpenDetails, setIsOpenDetails] = useState(false);
+    const [isOpenMaster, setIsOpenMaster] = useState(false);
+    const [secondaryMasterDcmts, setSecondaryMasterDcmts] = useState([]);
+    const [isOpenDistinctValues, setIsOpenDistinctValues] = useState(false);
+    const [isOpenFormulaEditor, setIsOpenFormulaEditor] = useState(false);
+    const [currentTIDHasDetailRelations, setCurrentTIDHasDetailRelations] = useState();
+    const [currentTIDHasMasterRelations, setCurrentTIDHasMasterRelations] = useState();
+    const [currentDcmt, setCurrentDcmt] = useState();
+    const [dcmtFile, setDcmtFile] = useState(null);
+    const [focusedMetadataValue, setFocusedMetadataValue] = useState();
+    const [showAll, setShowAll] = useState(layoutMode === LayoutModes.Ark);
+    const [fetchError, setFetchError] = useState(false);
+    const [isWFDataLoading, setIsWFDataLoading] = useState(false);
+    const [workItems, setWorkItems] = useState([]);
+    const [workflows, setWorkflows] = useState([]);
+    const [showCommentForm, setShowCommentForm] = useState(false);
+    const [isInitialLoading, setIsInitialLoading] = useState(true);
+    const [isNavigating, setIsNavigating] = useState(false);
+    const { openConfirmAttachmentsDialog, ConfirmAttachmentsDialog } = useInputAttachmentsDialog();
+    const { abortController, showWaitPanel, waitPanelTitle, showPrimary, waitPanelTextPrimary, waitPanelValuePrimary, waitPanelMaxValuePrimary, showSecondary, waitPanelTextSecondary, waitPanelValueSecondary, waitPanelMaxValueSecondary, downloadDcmtsAsync } = useDcmtOperations();
+    // Custom hook to manage workflow approval data
+    const { workflowApproveData } = useWorkflowApprove();
+    const fetchErrorShownRef = useRef(false);
+    const deviceType = useDeviceType();
+    const getDcmts = useCallback(() => {
+        return [{ TID: currentDcmt?.tid, DID: currentDcmt?.did, FILEEXT: currentDcmt?.fileExt }];
+    }, [currentDcmt?.tid, currentDcmt?.did, currentDcmt?.fileExt]);
+    const handleReset = useCallback(() => {
+        setDcmtFile(null);
+    }, []);
+    const setMetadataList = useCallback(async (mdList, getMetadataResult = undefined, archived = false, currentDID) => {
+        try {
+            let did = currentDID ?? DID;
+            if (!did)
+                return;
+            TMSpinner.show({ description: 'Loading Metadata...' });
+            let res = getMetadataResult ?? await SDK_Globals.tmSession?.NewSearchEngine().GetMetadataAsync(TID, did, true);
+            let dtd = res?.dtdResult;
+            let rows = dtd.rows ? dtd.rows[0] : [];
+            let mids = res?.selectMIDs;
+            let metadataList = searchResultToMetadataValues(TID, dtd, rows, mids, mdList, layoutMode);
+            if (archived) {
+                // Usa setFormData con funzione callback per accedere allo stato precedente
+                // invece di dipendere da formDataOrig nell'array di dipendenze
+                setFormData(prevFormDataOrig => {
+                    let tempMetadataList = [];
+                    for (let md of metadataList) {
+                        if (md.value === null) {
+                            if (prevFormDataOrig.find(metadata => metadata.mid === md.mid)?.value === '') {
+                                tempMetadataList.push({ ...md, value: '' });
+                            }
+                            if (prevFormDataOrig.find(metadata => metadata.mid === md.mid)?.value === undefined) {
+                                tempMetadataList.push({ ...md, value: undefined });
+                            }
+                            if (prevFormDataOrig.find(metadata => metadata.mid === md.mid)?.value === null) {
+                                tempMetadataList.push(md);
+                            }
+                        }
+                        else {
+                            tempMetadataList.push(md);
+                        }
+                    }
+                    return tempMetadataList;
+                });
+                return;
+            }
+            setFormDataOrig(structuredClone(metadataList));
+            setFormData(structuredClone(metadataList));
+            // Sincronizza il ref con i dati caricati per evitare stale closure in handleSave
+            formDataOrigRef.current = structuredClone(metadataList);
+        }
+        catch (e) {
+            TMExceptionBoxManager.show({ exception: e });
+        }
+        finally {
+            TMSpinner.hide();
+        }
+    }, [TID, DID, layoutMode]);
+    const fetchData = useCallback(async () => {
+        try {
+            setFetchError(false);
+            if (!TID)
+                return;
+            if (!DID && layoutMode === LayoutModes.Update)
+                return;
+            let getMetadataResult;
+            if (layoutMode === LayoutModes.Update)
+                getMetadataResult = await SDK_Globals.tmSession?.NewSearchEngine().GetMetadataAsync(TID, DID, true);
+            let dtd = await DcmtTypeListCacheService.GetWithNotGrantedAsync(TID, DID, getMetadataResult);
+            setFromDTD(dtd);
+            if (layoutMode === LayoutModes.Update || (layoutMode === LayoutModes.Ark && DID)) {
+                await setMetadataList(dtd?.metadata ?? [], getMetadataResult);
+            }
+            else {
+                const renderedMetadata = dtd?.metadata?.filter((metadata) => handleArchiveVisibility(metadata)) ?? [];
+                const metadataList = searchResultToMetadataValues(dtd?.id, undefined, [], [], renderedMetadata, layoutMode);
+                setFormDataOrig(structuredClone(metadataList));
+                setFormData(structuredClone(metadataList));
+                formDataOrigRef.current = structuredClone(metadataList);
+            }
+            let resLayout = await SDK_Globals.tmSession?.NewDcmtTypeEngine().LayoutRetrieveAsync(TID, layoutMode);
+            setLayout(resLayout);
+            (layoutMode === LayoutModes.Ark && !inputFile) && handleReset();
+        }
+        catch (e) {
+            setFetchError(true);
+            throw e;
+        }
+        finally {
+            setIsInitialLoading(false);
+            setIsNavigating(false);
+        }
+    }, [TID, DID, layoutMode, inputFile, setMetadataList, handleReset]);
+    const createChange = useCallback((mid, metadataType, modifiedValue) => {
+        return { mid, metadataType, modifiedValue };
+    }, []);
+    const getSpecificChangedKeysWithValues = useCallback((originalList, modifiedList) => {
+        const changes = [];
+        if (!originalList || !modifiedList)
+            return changes;
+        const originalMap = new Map(originalList.map(item => [item.mid, item]));
+        for (const modified of modifiedList) {
+            if (modified.mid === undefined)
+                continue;
+            const original = originalMap.get(modified.mid);
+            if (!original)
+                continue;
+            if (original.value !== modified.value) {
+                changes.push(createChange(modified.mid, modified.md?.dataType ?? MetadataDataTypes.Varchar, modified.value));
+            }
+        }
+        return changes;
+    }, [createChange]);
+    useEffect(() => { setID(genUniqueId()); }, []);
+    // Sincronizza i ref con gli stati correnti per evitare stale closure nei callback.
+    // I useCallback catturano le variabili delle dipendenze al momento della loro creazione,
+    // quindi se uno stato cambia frequentemente, il callback avrebbe sempre valori vecchi.
+    // Usando i ref, possiamo accedere sempre ai valori più recenti senza dover ricreare i callback.
+    useEffect(() => {
+        formDataRef.current = formData;
+    }, [formData]);
+    useEffect(() => {
+        fromDTDRef.current = fromDTD;
+    }, [fromDTD]);
+    useEffect(() => {
+        if (!inputFile || inputFile === null)
+            return;
+        setDcmtFile(inputFile);
+    }, [inputFile]);
+    useEffect(() => {
+        const run = async () => {
+            try {
+                fetchErrorShownRef.current = false; // Reset flag all'inizio
+                // Distinguish between initial load and navigation
+                if (isInitialLoading) {
+                    // First load - keep isInitialLoading true
+                    await fetchData();
+                }
+                else {
+                    // Navigation - use isNavigating instead
+                    setIsNavigating(true);
+                    await fetchData();
+                }
+            }
+            catch (e) {
+                // Mostra l'errore solo se non è già stato mostrato (evita duplicati in StrictMode)
+                if (!fetchErrorShownRef.current) {
+                    fetchErrorShownRef.current = true;
+                    TMExceptionBoxManager.show({ exception: e });
+                    // Se il caricamento fallisce, chiudi il form
+                    onClose?.();
+                }
+            }
+        };
+        run();
+    }, [TID, DID, fetchData]);
+    useEffect(() => {
+        if (formData.length > 0) {
+            setValidationItems(validateMetadataList(formData));
+            const newDcmt = {
+                tid: formData.find(o => o.mid == SystemMIDsAsNumber.TID)?.value,
+                did: formData.find(o => o.mid == SystemMIDsAsNumber.DID)?.value,
+                fileCount: formData.find(o => o.mid == SystemMIDsAsNumber.FileCount)?.value,
+                fileSize: formData.find(o => o.mid == SystemMIDsAsNumber.FileSize)?.value,
+                fileExt: formData.find(o => o.mid == SystemMIDsAsNumber.FileExt)?.value
+            };
+            if (!currentDcmt ||
+                currentDcmt.tid !== newDcmt.tid ||
+                currentDcmt.did !== newDcmt.did ||
+                currentDcmt.fileExt !== newDcmt.fileExt ||
+                currentDcmt.fileSize !== newDcmt.fileSize ||
+                currentDcmt.fileCount !== newDcmt.fileCount) {
+                setCurrentDcmt(newDcmt);
+            }
+        }
+    }, [formData, formDataOrig, getSpecificChangedKeysWithValues, currentDcmt]);
+    useEffect(() => {
+        hasDetailRelations(TID).then((value) => setCurrentTIDHasDetailRelations(value));
+        hasMasterRelations(TID).then((value) => setCurrentTIDHasMasterRelations(value));
+    }, [TID]);
+    useEffect(() => {
+        if (layoutMode !== LayoutModes.Ark)
+            return;
+        setFocusedMetadataValue(undefined);
+    }, [fromDTD, layoutMode]);
+    useEffect(() => {
+        if (!inputMids || inputMids.length === 0)
+            return;
+        if (layoutMode !== LayoutModes.Ark)
+            return;
+        if (!formData || formData.length === 0)
+            return;
+        if (appliedInputMidsRef.current && deepCompare(appliedInputMidsRef.current, inputMids))
+            return;
+        appliedInputMidsRef.current = inputMids;
+        let data = structuredClone(formData);
+        for (let md of data) {
+            if (!md.mid)
+                continue;
+            if (md.mid > 99) {
+                const defaultValue = md.md?.defaultValue;
+                if (defaultValue) {
+                    if (FormulaHelper.isFormula(defaultValue)) {
+                        md.value = undefined;
+                    }
+                    else {
+                        md.value = defaultValue;
+                    }
+                }
+                else if (formDataOrig.find(metadata => metadata.mid === md.mid)?.value === undefined) {
+                    if (md.value)
+                        md.value = undefined;
+                }
+                else if (md.value && md.value.length > 0) {
+                    md.value = '';
+                }
+            }
+        }
+        inputMids.forEach(inputMid => {
+            const md = data.find(m => m.mid === inputMid.mid);
+            if (md) {
+                md.value = inputMid.value;
+            }
+        });
+        setFormData(data);
+    }, [inputMids, layoutMode, formData, formDataOrig]);
+    // Memoizza solo il valore WI_SetID per evitare re-render quando altri metadata cambiano
+    const workItemSetIDValue = useMemo(() => formData.find(o => o.md?.name === WorkItemMetadataNames.WI_SetID)?.value, [formData]);
+    useEffect(() => {
+        const loadAllWfData = async () => {
+            if (layoutMode !== LayoutModes.Update || !DID) {
+                setWorkItems([]);
+                setWorkflows([]);
+                return;
+            }
+            setIsWFDataLoading(true);
+            try {
+                // 1. item da processare in modo sincrono
+                const itemsToProcess = [];
+                for (const workflow of workflowApproveData) {
+                    for (const dataRow of workflow.dtdResult?.rows ?? []) {
+                        const did = Number(dataRow?.[1]);
+                        if (did === Number(DID)) {
+                            const tid = Number(dataRow?.[0]);
+                            itemsToProcess.push({ tid, did });
+                        }
+                    }
+                }
+                if (itemsToProcess.length === 0) {
+                    setWorkItems([]);
+                    setWorkflows([]);
+                    setIsWFDataLoading(false);
+                    return;
+                }
+                // promises per i setID in modo condizionale
+                let setIDPromises;
+                if (workItemSetIDValue !== undefined) {
+                    // Se abbiamo il setID dal form, non facciamo chiamate di rete.
+                    setIDPromises = itemsToProcess.map(() => Promise.resolve(workItemSetIDValue));
+                }
+                else {
+                    // Altrimenti, procediamo con le chiamate di rete come prima.
+                    setIDPromises = itemsToProcess.map(item => getWorkItemSetIDAsync(item.tid, item.did));
+                }
+                // Crea un array di Promise per tutte le chiamate a GetWFInfoAsync
+                const workflowInfoPromises = itemsToProcess.map(item => WorkflowCacheService.GetWFInfoAsync(item.tid));
+                // Esegui tutte le chiamate in parallelo e attendi i risultati
+                const setIDResults = await Promise.all(setIDPromises);
+                const workflowInfoResults = await Promise.all(workflowInfoPromises);
+                // Combina i risultati
+                const finalWorkItems = itemsToProcess.map((item, index) => ({
+                    ...item,
+                    setID: setIDResults[index],
+                }));
+                const validWorkflows = workflowInfoResults.filter(Boolean);
+                // Aggiorna lo stato una sola volta con i dati finali
+                setWorkItems(finalWorkItems);
+                setWorkflows(validWorkflows);
+            }
+            catch (error) {
+                console.error("Errore durante il caricamento dei dati del workflow:", error);
+                setWorkItems([]);
+                setWorkflows([]);
+            }
+            finally {
+                setIsWFDataLoading(false);
+            }
+        };
+        if (workItemSetIDValue !== undefined || workflowApproveData.length > 0)
+            loadAllWfData();
+    }, [workItemSetIDValue, workflowApproveData, DID, layoutMode]);
+    const getSelectionDcmtInfo = useCallback(() => {
+        let dcmts = [];
+        dcmts.push({ TID: TID ?? 0, DID: DID ?? 0 });
+        return dcmts;
+    }, [TID, DID]);
+    const handleAddItem = useCallback((tid, did) => {
+        let newItem = { TID: tid ?? 0, DID: did ?? 0 };
+        setSecondaryMasterDcmts((prevItems) => [...prevItems, newItem]);
+    }, []);
+    const handleRemoveItem = useCallback((tid, did) => {
+        setSecondaryMasterDcmts((prevItems) => prevItems.filter(item => item.TID !== tid && item.DID !== did));
+    }, []);
+    const handlePassToSearch = useCallback(() => {
+        if (!passToSearch)
+            return;
+        const outputMids = formData
+            .filter(md => md.mid && md.mid > 100 && md.value && md.value.length > 0)
+            .map(md => ({ mid: md.mid, value: md.value }));
+        passToSearch(outputMids);
+    }, [passToSearch, formData]);
+    const isPreviewDisabled = useMemo(() => layoutMode === LayoutModes.Ark && fromDTD?.archiveConstraint === ArchiveConstraints.OnlyMetadata, [layoutMode, fromDTD?.archiveConstraint]);
+    const isBoardDisabled = useMemo(() => layoutMode !== LayoutModes.Update || fromDTD?.hasBlog !== 1, [layoutMode, fromDTD?.hasBlog]);
+    const isSysMetadataDisabled = useMemo(() => layoutMode !== LayoutModes.Update, [layoutMode]);
+    const isDetailsDisabled = useMemo(() => layoutMode !== LayoutModes.Update || !DID, [layoutMode, DID]);
+    const isMasterDisabled = useMemo(() => layoutMode !== LayoutModes.Update || !DID, [layoutMode, DID]);
+    const isWFDisabled = useMemo(() => layoutMode !== LayoutModes.Update || fetchError || workItems.length <= 0, [layoutMode, fetchError, workItems.length]);
+    const showToppyForApprove = useMemo(() => layoutMode === LayoutModes.Update && !fetchError && workItems.length > 0 && !isOpenDetails && !isOpenMaster, [layoutMode, fetchError, workItems.length, isOpenDetails, isOpenMaster]);
+    const showToppyForCompleteMoreInfo = useMemo(() => layoutMode === LayoutModes.Update && isTaskMoreInfo(taskMoreInfo?.name) && taskMoreInfo?.state !== Task_States.Completed, [layoutMode, taskMoreInfo?.name, taskMoreInfo?.state]);
+    const isMobile = useMemo(() => deviceType === DeviceType.MOBILE, [deviceType]);
+    const isApprView = useMemo(() => fromDTD?.templateTID === TemplateTIDs.WF_WIApprView, [fromDTD?.templateTID]);
+    const workitemSetID = useMemo(() => workItems.find(o => o.did === Number(DID))?.setID || formData.find(o => o.md?.name === WorkItemMetadataNames.WI_SetID)?.value, [workItems, DID, formData]);
+    const approvalVID = useMemo(() => workItems.length > 0 ? Number(workItems[0].tid) : -1, [workItems]);
+    const commandsMenuItems = useMemo(() => [
+        { icon: svgToString(_jsx(IconDownload, {})), operationType: 'singleRow', disabled: fromDTD?.perm?.canRetrieveFile !== AccessLevels.Yes, text: "Download file", onClick: async () => await downloadDcmtsAsync(getDcmts(), DownloadTypes.Dcmt, "download") },
+        { icon: svgToString(_jsx(IconDownload, {})), operationType: 'singleRow', disabled: !isXMLFileExt(currentDcmt?.fileExt), text: "Download allegati XML", onClick: async () => await downloadDcmtsAsync(getDcmts(), DownloadTypes.Attachment, "download", undefined, openConfirmAttachmentsDialog) },
+        ...(allowRelations && currentTIDHasMasterRelations ? [{ icon: svgToString(_jsx(IconDetailDcmts, { transform: 'scale(-1, 1)' })), operationType: 'singleRow', disabled: isMasterDisabled, text: SDKUI_Localizator.DcmtsMaster, onClick: () => { if (!isMasterDisabled)
+                    setIsOpenMaster(!isOpenMaster); } }] : []),
+        ...(allowRelations && currentTIDHasDetailRelations ? [{ icon: svgToString(_jsx(IconDetailDcmts, {})), operationType: 'singleRow', disabled: isDetailsDisabled, text: SDKUI_Localizator.DcmtsDetail, onClick: () => { if (!isDetailsDisabled)
+                    setIsOpenDetails(!isOpenDetails); } }] : []),
+    ], [fromDTD?.perm?.canRetrieveFile, currentDcmt?.fileExt, allowRelations, currentTIDHasMasterRelations, isMasterDisabled, currentTIDHasDetailRelations, isDetailsDisabled, getDcmts, downloadDcmtsAsync, openConfirmAttachmentsDialog]);
+    const isModified = useMemo(() => calcIsModified(formData, formDataOrig), [formData, formDataOrig]);
+    const formToolbar = useMemo(() => _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '10px' }, children: [allowNavigation && canPrev != undefined && _jsx("p", { style: { textAlign: 'center', padding: '1px 4px', display: 'flex' }, children: `${itemIndex}/${count}` }), allowNavigation && canPrev != undefined && _jsx(TMSaveFormButtonPrevious, { btnStyle: 'icon', iconColor: 'white', isModified: isModified, formMode: formMode, canPrev: canPrev, onPrev: onPrev }), allowNavigation && canNext != undefined && _jsx(TMSaveFormButtonNext, { btnStyle: 'icon', iconColor: 'white', isModified: isModified, formMode: formMode, canNext: canNext, onNext: onNext }), layoutMode === LayoutModes.Update && _jsx(IconMenuVertical, { id: `commands-detail-${id}`, color: 'white', cursor: 'pointer' }), layoutMode === LayoutModes.Update && _jsx(ContextMenu, { showEvent: 'click', dataSource: commandsMenuItems, target: `#commands-detail-${id}` }), layoutMode === LayoutModes.Ark &&
+                _jsx(TMTooltip, { content: SDKUI_Localizator.PassToSearch, position: 'bottom', children: _jsx(IconSearch, { style: { cursor: 'pointer' }, onClick: handlePassToSearch }) })] }), [allowNavigation, canPrev, canNext, itemIndex, count, isModified, formMode, onPrev, onNext, layoutMode, id, commandsMenuItems, handlePassToSearch]);
+    const handleUndo = useCallback(() => {
+        setFormData(structuredClone(formDataOrig));
+    }, [formDataOrig]);
+    const handleConfirmAction = useCallback(async () => {
+        TMMessageBoxManager.show({
+            parentId: isModal ? "TMDcmtFormShowConfirmForClose-" + id : undefined,
+            buttons: [ButtonNames.YES, ButtonNames.NO],
+            message: layoutMode === LayoutModes.Update ? SDKUI_Localizator.SaveQuestion : 'Sei sicuro di voler archiviare questo documento?',
+            onButtonClick(e) {
+                if (e !== ButtonNames.YES)
+                    return;
+                layoutMode === LayoutModes.Update ? handleSave() : handleArchiveCompleted();
+            },
+        });
+    }, [isModal, id, layoutMode]);
+    const handleSave = useCallback(async () => {
+        const ue = new UpdateEngineByID(SDK_Globals.tmSession);
+        ue.DID = DID;
+        ue.TID = TID;
+        ue.Metadata_ClearAll();
+        try {
+            TMSpinner.show({ description: 'Aggiornamento in corso...' });
+            // Usa i ref invece degli stati per evitare stale closure.
+            // handleSave è un useCallback che verrebbe ricreato ogni volta che formData/formDataOrig cambiano,
+            // causando problemi di performance. Usando i ref, possiamo mantenere lo stesso callback
+            // ma accedere sempre ai valori correnti tramite formDataRef.current e formDataOrigRef.current.
+            const changes = getSpecificChangedKeysWithValues(formDataOrigRef.current, formDataRef.current);
+            for (let metadata of changes) {
+                if (!metadata.modifiedValue)
+                    ue.Metadata_AddNull(metadata.mid);
+                else {
+                    switch (metadata.metadataType) {
+                        case MetadataDataTypes.DateTime:
+                            ue.Metadata_AddDateTime(metadata.mid, new Date(metadata.modifiedValue));
+                            break;
+                        case MetadataDataTypes.Number:
+                            ue.Metadata_AddNumber(metadata.mid, metadata.modifiedValue);
+                            break;
+                        case MetadataDataTypes.Varchar:
+                            ue.Metadata_AddString(metadata.mid, metadata.modifiedValue);
+                            break;
+                        default: ue.Metadata_AddNull(metadata.mid);
+                    }
+                }
+            }
+            await ue.UpdateAsync();
+            // Aggiorna lo stato locale immediatamente dopo il salvataggio riuscito
+            // Questo garantisce che isModified diventi false anche se il reload fallisce
+            const savedFormData = structuredClone(formDataRef.current);
+            setFormDataOrig(savedFormData);
+            formDataOrigRef.current = savedFormData;
+            // Tenta di ottenere i metadati aggiornati
+            let metadataResult = undefined;
+            let hasGetMetadataError = false;
+            try {
+                metadataResult = await SDK_Globals.tmSession?.NewSearchEngine().GetMetadataAsync(TID, DID, true);
+            }
+            catch (metadataError) {
+                hasGetMetadataError = true;
+                // Estrai ErrorCode dal campo detail se disponibile
+                let errorCode = undefined;
+                if (metadataError?.isApiException && metadataError?.response?.detail) {
+                    try {
+                        const detailObj = JSON.parse(metadataError.response.detail);
+                        errorCode = detailObj?.ErrorCode;
+                    }
+                    catch (parseError) {
+                        console.log("Impossibile parsare il detail dell'eccezione:", parseError);
+                    }
+                }
+                // Se ErrorCode è -5, mostra messaggio personalizzato, altrimenti mostra l'eccezione originale
+                if (errorCode === -5) {
+                    TMMessageBoxManager.show({
+                        message: SDKUI_Localizator.DcmtOutOfView,
+                        buttons: [ButtonNames.OK],
+                    });
+                }
+                else {
+                    TMExceptionBoxManager.show({ exception: metadataError });
+                }
+                // Usa null per indicare al callback che c'è stato un errore e non deve ritentare
+                metadataResult = null;
+            }
+            // Esegui sempre il callback:
+            // - Se metadataResult è un oggetto: refresh normale
+            // - Se metadataResult è null: GetMetadataAsync fallito, rimuove il documento dalla griglia senza ritentare
+            // - Se metadataResult è undefined: nessun parametro passato, il callback può decidere cosa fare
+            await onSavedAsyncCallback?.(TID, DID, metadataResult === null ? null : metadataResult);
+            // Mostra messaggio di successo solo se non ci sono stati errori critici
+            if (!hasGetMetadataError) {
+                if (metadataResult && metadataResult !== null) {
+                    // Usa fromDTDRef.current invece di fromDTD per evitare stale closure.
+                    // fromDTD potrebbe essere undefined/vuoto nel callback se lo stato è cambiato,
+                    // mentre fromDTDRef.current contiene sempre il valore corrente sincronizzato tramite useEffect.
+                    await setMetadataList(fromDTDRef.current?.metadata ?? [], metadataResult);
+                }
+                ShowAlert({ mode: 'success', title: 'Form di documento', message: 'Le modifiche sono state salvate con successo', duration: 3000 });
+            }
+            else
+                onClose?.();
+        }
+        catch (e) {
+            TMExceptionBoxManager.show({ exception: e });
+        }
+        finally {
+            TMSpinner.hide();
+        }
+    }, [DID, TID, getSpecificChangedKeysWithValues, onSavedAsyncCallback, onClose, setMetadataList]);
+    const handleArchiveCompleted = useCallback(async () => {
+        let firstBlock = true;
+        let maxFileSize = 0;
+        let operationTitle = 'Archiviazione';
+        setUseWaitPanelLocalState(true);
+        setShowWaitPanelLocal(true);
+        setShowPrimaryLocal(false);
+        setShowSecondaryLocal(true);
+        setWaitPanelTitleLocal(operationTitle);
+        abortControllerLocal = new AbortController();
+        const ae = new ArchiveEngineByID(SDK_Globals.tmSession);
+        ae.TID = TID;
+        ae.Metadata_ClearAll();
+        try {
+            // Usa formDataRef.current invece di formData per evitare stale closure.
+            // Questo garantisce di avere sempre i valori più recenti dei metadati da archiviare.
+            for (let metadata of formDataRef.current) {
+                if (!metadata.value)
+                    continue;
+                switch (metadata.md?.dataType) {
+                    case MetadataDataTypes.DateTime:
+                        ae.Metadata_AddDateTime(metadata.mid, new Date(metadata.value));
+                        break;
+                    case MetadataDataTypes.Number:
+                        ae.Metadata_AddNumber(metadata.mid, parseFloat(metadata.value));
+                        break;
+                    case MetadataDataTypes.Varchar:
+                        ae.Metadata_AddString(metadata.mid, metadata.value);
+                        break;
+                    default: ae.Metadata_AddNull(metadata.mid);
+                }
+            }
+            if (connectorFileSave) {
+                let file = await connectorFileSave();
+                ae.ArchivingFile = file;
+            }
+            else {
+                ae.ArchivingFile = dcmtFile;
+            }
+            let newDID = await ae.ArchiveAsync(abortControllerLocal.signal, (pd) => {
+                if (firstBlock) {
+                    maxFileSize = pd.ProgressBarMaximum ?? 0;
+                    setWaitPanelMaxValueSecondaryLocal(maxFileSize);
+                    firstBlock = false;
+                }
+                setWaitPanelValueSecondaryLocal(pd.ProgressBarValue);
+                setWaitPanelTextSecondaryLocal(`Archiviazione... ${Globalization.getNumberDisplayValue(pd.ProgressBarValue, true)} / ${Globalization.getNumberDisplayValue(maxFileSize, true)}`);
+                if (pd.ProgressBarValue === pd.ProgressBarMaximum) {
+                    setWaitPanelMaxValueSecondaryLocal(0);
+                    setWaitPanelValueSecondaryLocal(0);
+                    setWaitPanelTextSecondaryLocal('');
+                    firstBlock = true;
+                }
+            });
+            // Aggiorna lo stato locale immediatamente dopo il salvataggio riuscito
+            // Questo garantisce che isModified diventi false anche se il reload fallisce
+            const savedFormData = structuredClone(formDataRef.current);
+            setFormDataOrig(savedFormData);
+            formDataOrigRef.current = savedFormData;
+            await onSavedAsyncCallback?.(ae.TID, newDID);
+            // Usa fromDTDRef.current invece di fromDTD per evitare stale closure,
+            // garantendo di avere il descrittore del tipo documento corrente.
+            await setMetadataList(fromDTDRef.current?.metadata ?? [], undefined, true, newDID);
+            handleReset();
+            let newMruTIDS = updateMruTids(SDKUI_Globals.userSettings.archivingSettings.mruTIDs, TID);
+            SDKUI_Globals.userSettings.archivingSettings.mruTIDs = newMruTIDS;
+            onSaveRecents?.(newMruTIDS);
+            ShowAlert({ mode: 'success', title: 'Archiviazione', message: 'Il documento è stato archiviato con successo', duration: 3000 });
+            const isDuplication = layoutMode === LayoutModes.Ark && DID;
+            if (isDuplication)
+                onClose?.();
+        }
+        catch (err) {
+            TMExceptionBoxManager.show({ exception: err });
+        }
+        finally {
+            setWaitPanelTextPrimaryLocal('');
+            setWaitPanelMaxValuePrimaryLocal(0);
+            setWaitPanelValuePrimaryLocal(0);
+            setWaitPanelTextSecondaryLocal('');
+            setWaitPanelMaxValueSecondaryLocal(0);
+            setWaitPanelValueSecondaryLocal(0);
+            setShowWaitPanelLocal(false);
+            setUseWaitPanelLocalState(false);
+        }
+    }, [TID, dcmtFile, connectorFileSave, onSavedAsyncCallback, onSaveRecents, onClose, DID, setMetadataList, handleReset, layoutMode]);
+    const handleClearForm = useCallback(() => {
+        let data = structuredClone(formData);
+        if (!data || data.length === 0)
+            return;
+        for (let md of data) {
+            if (!md.mid)
+                continue;
+            if (md.mid > 99) {
+                const defaultValue = md.md?.defaultValue;
+                if (defaultValue) {
+                    if (FormulaHelper.isFormula(defaultValue)) {
+                        md.value = undefined;
+                    }
+                    else {
+                        md.value = defaultValue;
+                    }
+                }
+                else if (formDataOrig.find(metadata => metadata.mid === md.mid)?.value === undefined) {
+                    if (md.value)
+                        md.value = undefined;
+                }
+                else if (md.value && md.value.length > 0) {
+                    md.value = '';
+                }
+            }
+        }
+        setFormData(data);
+    }, [formData, formDataOrig]);
+    const clearFormBtnDisabled = useMemo(() => formData.filter(md => md.mid && md.value && md.mid > 99 && md.value.length > 0).length > 0, [formData]);
+    const archiveBtnDisabled = useMemo(() => layoutMode === LayoutModes.Update || (fromDTD?.archiveConstraint === ArchiveConstraints.ContentCompulsory && !dcmtFile) || validationItems.length > 0, [layoutMode, fromDTD?.archiveConstraint, dcmtFile, validationItems.length]);
+    const undoBtnDisabled = useMemo(() => layoutMode === LayoutModes.Update || !isModified, [layoutMode, isModified]);
+    const listMaxItems = useMemo(() => getListMaxItems(deviceType ?? DeviceType.DESKTOP), [deviceType]);
+    const totalItems = useMemo(() => formData.filter(o => o.mid && o.mid > 100).length, [formData]);
+    const metadataValuesSource = useMemo(() => {
+        return applyMetadataFilter(formData, showAll, listMaxItems, TID);
+    }, [showAll, formData, listMaxItems, TID]);
+    const metadataValuesSourceOrig = useMemo(() => {
+        return applyMetadataFilter(formDataOrig, showAll, listMaxItems, TID);
+    }, [showAll, formDataOrig, listMaxItems, TID]);
+    const handleClose = useCallback(() => {
+        if (!isModified) {
+            onClose?.();
+            return;
+        }
+        TMMessageBoxManager.show({
+            parentId: isModal ? "TMDcmtFormShowConfirmForClose-" + id : undefined,
+            message: SDKUI_Localizator.SaveQuestion, buttons: [ButtonNames.YES, ButtonNames.NO, ButtonNames.CANCEL],
+            onButtonClick: async (e) => {
+                try {
+                    if (e == ButtonNames.CANCEL)
+                        return;
+                    if (e == ButtonNames.YES)
+                        await handleSave();
+                    onClose?.();
+                }
+                catch (ex) {
+                    TMExceptionBoxManager.show({ exception: ex });
+                }
+            }
+        });
+    }, [isModified, onClose, isModal, id, handleSave]);
+    const getFormula = useCallback(() => {
+        let fd = new FormulaDescriptor();
+        fd.expression = FormulaHelper.isFormula(focusedMetadataValue?.value) ? FormulaHelper.removeFormulaTag(focusedMetadataValue?.value) : undefined;
+        fd.formulaTarget = FormulaTargets.BatchUpdate;
+        fd.items = FormulaHelper.TreeViewList(TID ?? 0, getSystemMetadata(true), undefined, FormulaTargets.BatchUpdate, SDK_Globals.dbBrand);
+        fd.mid = focusedMetadataValue?.mid ?? 0;
+        fd.tid = TID;
+        return fd;
+    }, [focusedMetadataValue?.value, focusedMetadataValue?.mid, TID]);
+    const handleWFOperationCompleted = useCallback(async () => {
+        await onWFOperationCompleted?.();
+        onClose?.();
+    }, [onWFOperationCompleted, onClose]);
+    // Determina se showAll deve essere automaticamente true
+    // Best practice: usa useMemo per calcolare valori derivati invece di useEffect con setState
+    const shouldShowAll = useMemo(() => {
+        // Mostra sempre tutti i metadati se:
+        // 1. È presente un layout personalizzato (per renderizzare correttamente la gerarchia)
+        // 2. È una vista di approvazione workflow
+        // 3. È il tipo documento Drafts
+        const hasCustomLayout = layout && layout.items && layout.items.length > 0;
+        return hasCustomLayout || isApprView || TID === SystemTIDs.Drafts;
+    }, [layout, isApprView, TID]);
+    // Aggiorna showAll quando shouldShowAll cambia
+    useEffect(() => {
+        if (shouldShowAll && !showAll) {
+            setShowAll(true);
+        }
+    }, [shouldShowAll, showAll]);
+    const tmDcmtForm = useMemo(() => {
+        return _jsx(_Fragment, { children: metadataValuesSource.length > 0 &&
+                _jsxs(StyledToolbarCardContainer, { children: [_jsx(TMMetadataValues, { TID: TID, metadataValues: metadataValuesSource, metadataValuesOrig: metadataValuesSourceOrig, isExpertMode: isExpertMode, isOpenDistinctValues: isOpenDistinctValues, openChooserBySingleClick: !isOpenDistinctValues, selectedMID: focusedMetadataValue?.mid, isReadOnly: formMode === FormModes.ReadOnly, layoutMode: layoutMode, deviceType: deviceType, validationItems: validationItems, inputMids: inputMids, layout: layout, onFocusedItemChanged: (item) => { (item?.mid !== focusedMetadataValue?.mid) && setFocusedMetadataValue(item); }, onValueChanged: (newItems) => {
+                                setFormData((prevItems) => prevItems.map((item) => {
+                                    const newItem = newItems.find((newItem) => newItem.tid === item.tid && newItem.mid === item.mid);
+                                    return newItem ? { ...item, ...newItem } : item;
+                                }));
+                            }, onAdvancedMenuClick: (e) => {
+                                switch (e.button) {
+                                    case AdvancedMenuButtons.DistinctValues:
+                                        setIsOpenDistinctValues(!isOpenDistinctValues);
+                                        break;
+                                    case AdvancedMenuButtons.FormulaEditor:
+                                        setIsOpenFormulaEditor(!isOpenFormulaEditor);
+                                        break;
+                                }
+                            } }), _jsxs(StyledFormButtonsContainer, { children: [_jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: 10 }, children: _jsx("div", { style: { display: 'flex', justifyContent: 'center', alignItems: 'center', gap: '8px' }, children: layoutMode === LayoutModes.Update ? _jsxs(_Fragment, { children: [_jsx(TMSaveFormButtonSave, { showTooltip: false, btnStyle: 'advanced', advancedColor: '#f09c0a', isModified: isModified, formMode: formMode, errorsCount: validationItems.filter(o => o.ResultType == ResultTypes.ERROR).length, onSaveAsync: handleConfirmAction }), _jsx(TMSaveFormButtonUndo, { btnStyle: 'toolbar', showTooltip: true, color: 'primary', isModified: isModified, formMode: formMode, onUndo: handleUndo })] }) :
+                                            _jsxs(_Fragment, { children: [_jsx(TMButton, { disabled: archiveBtnDisabled, btnStyle: 'advanced', icon: _jsx(IconBoxArchiveIn, {}), width: 'auto', showTooltip: false, caption: SDKUI_Localizator.Archive, advancedColor: TMColors.success, onClick: handleConfirmAction }), _jsx(TMButton, { disabled: !clearFormBtnDisabled, btnStyle: 'advanced', icon: _jsx(IconClear, {}), width: 'auto', showTooltip: false, caption: SDKUI_Localizator.Clear, advancedColor: TMColors.tertiary, onClick: handleClearForm }), DID && _jsx(TMButton, { disabled: undoBtnDisabled, btnStyle: 'advanced', icon: _jsx(IconUndo, {}), width: '150px', showTooltip: false, caption: SDKUI_Localizator.Undo, advancedColor: TMColors.tertiary, onClick: handleUndo })] }) }) }), totalItems > listMaxItems &&
+                                    !isApprView &&
+                                    TID !== SystemTIDs.Drafts &&
+                                    !shouldShowAll &&
+                                    _jsx(TMShowAllOrMaxItemsButton, { showAll: showAll, dataSourceLength: totalItems, onClick: () => { setShowAll(!showAll); } })] }), _jsx(ConfirmAttachmentsDialog, {})] }) });
+    }, [
+        TID,
+        DID,
+        metadataValuesSource,
+        metadataValuesSourceOrig,
+        isExpertMode,
+        isOpenDistinctValues,
+        focusedMetadataValue?.mid,
+        formMode,
+        layoutMode,
+        deviceType,
+        validationItems,
+        inputMids,
+        layout,
+        isModified,
+        archiveBtnDisabled,
+        clearFormBtnDisabled,
+        undoBtnDisabled,
+        totalItems,
+        listMaxItems,
+        isApprView,
+        shouldShowAll,
+        showAll,
+        handleConfirmAction,
+        handleUndo,
+        handleClearForm
+    ]);
+    const tmBlog = useMemo(() => _jsx(TMDcmtBlog, { tid: TID, did: DID }), [TID, DID]);
+    const tmSysMetadata = useMemo(() => _jsx(TMMetadataValues, { layoutMode: layoutMode, openChooserBySingleClick: !isOpenDistinctValues, TID: TID, isReadOnly: true, deviceType: deviceType, metadataValues: formData.filter(o => (o.mid != undefined && o.mid <= 100)), metadataValuesOrig: formData.filter(o => (o.mid != undefined && o.mid <= 100)), validationItems: [], inputMids: inputMids }), [TID, layoutMode, formData, deviceType, inputMids]);
+    const tmDcmtPreview = useMemo(() => _jsx(TMDcmtPreviewWrapper, { currentDcmt: currentDcmt, dcmtFile: dcmtFile ?? inputFile, deviceType: deviceType, fromDTD: fromDTD, layoutMode: layoutMode, onFileUpload: (setFile) => {
+            setDcmtFile(setFile);
+        }, enableDragDropOverlay: enableDragDropOverlay }), [currentDcmt, dcmtFile, deviceType, fromDTD, layoutMode, inputFile, enableDragDropOverlay]);
+    const tmWF = useMemo(() => {
+        if (isWFDataLoading) {
+            return (_jsx("div", { style: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    width: '100%',
+                    height: '100%',
+                    minHeight: '200px'
+                }, children: _jsxs(StyledLoadingContainer, { children: [_jsx(StyledSpinner, {}), _jsx("span", { children: `${'Caricamento dati workflow'}...` })] }) }));
+        }
+        const isAuthorized = !!workflows?.[0]?.diagram;
+        return (_jsxs("div", { style: { position: 'relative', width: '100%', height: '100%', display: 'flex', flexDirection: 'column', gap: 3 }, children: [workItems.length > 0
+                    ? (isAuthorized
+                        ? _jsx(WFDiagram, { xmlDiagramString: workflows?.[0]?.diagram || '', allowEdit: false, currentSetID: workitemSetID })
+                        : _jsx("div", { style: {
+                                position: 'absolute',
+                                top: '50%',
+                                left: '50%',
+                                transform: 'translate(-50%, -50%)',
+                                fontSize: '1.1rem',
+                                color: TMColors.primaryColor,
+                                textAlign: 'center',
+                            }, children: SDKUI_Localizator.WorkflowDiagramNotAuthorized }))
+                    : _jsx("div", { style: {
+                            position: 'absolute',
+                            top: '50%',
+                            left: '50%',
+                            transform: 'translate(-50%, -50%)',
+                            fontSize: '1.1rem',
+                            color: TMColors.primaryColor,
+                            textAlign: 'center',
+                        }, children: SDKUI_Localizator.WorkitemsToApproveNone }), isAuthorized && !workitemSetID && workItems.length > 0 &&
+                    _jsx("div", { style: {
+                            padding: 5,
+                            backgroundColor: 'khaki',
+                            borderRadius: 8
+                        }, children: SDKUI_Localizator.WorkItemTechnicalNote_SetID })] }));
+    }, [workflows, formData, workitemSetID, workItems, isWFDataLoading]);
+    const normalizedTID = TID !== undefined ? Number(TID) : undefined;
+    const defaultPanelDimensions = {
+        'tmDcmtForm': { width: '20%', height: '100%' },
+        'tmBlog': { width: '20%', height: '100%' },
+        'tmSysMetadata': { width: '20%', height: '100%' },
+        'tmDcmtPreview': { width: '20%', height: '100%' },
+        'tmWF': { width: '20%', height: '100%' },
+    };
+    const allInitialPanelVisibility = {
+        'tmDcmtForm': true,
+        'tmBlog': false,
+        'tmSysMetadata': false,
+        'tmDcmtPreview': true,
+        'tmWF': false,
+    };
+    const initialPanels = useMemo(() => [
+        {
+            id: 'tmDcmtForm',
+            name: SDK_Localizator.Metadatas,
+            contentOptions: {
+                component: tmDcmtForm,
+                isClosable: isClosable,
+                panelContainer: {
+                    showHeader: showHeader,
+                    title: fromDTD?.nameLoc,
+                    allowMaximize: !isMobile,
+                    onBack: (isClosable && deviceType !== DeviceType.MOBILE) ? undefined : handleClose,
+                    onClose: isClosable ? () => { } : undefined,
+                    toolbar: allowNavigation ? formToolbar : _jsx(_Fragment, {})
+                },
+            },
+            toolbarOptions: {
+                icon: _jsx(IconPreview, { fontSize: 24 }),
+                visible: true,
+                orderNumber: 1,
+                isActive: allInitialPanelVisibility['tmDcmtForm']
+            }
+        },
+        {
+            id: 'tmBlog',
+            name: SDKUI_Localizator.BlogCase,
+            contentOptions: { component: tmBlog, panelContainer: { title: SDKUI_Localizator.BlogCase, allowMaximize: !isMobile } },
+            toolbarOptions: {
+                icon: _jsx(IconBoard, { fontSize: 24 }),
+                visible: true,
+                disabled: isBoardDisabled,
+                orderNumber: 2,
+                isActive: allInitialPanelVisibility['tmBlog']
+            }
+        },
+        {
+            id: 'tmSysMetadata',
+            name: SDKUI_Localizator.MetadataSystem,
+            contentOptions: { component: tmSysMetadata, panelContainer: { title: SDKUI_Localizator.MetadataSystem, allowMaximize: !isMobile } },
+            toolbarOptions: { icon: _jsx(IconDcmtTypeSys, { fontSize: 24 }), visible: true, disabled: isSysMetadataDisabled, orderNumber: 3, isActive: allInitialPanelVisibility['tmSysMetadata'] }
+        },
+        {
+            id: 'tmDcmtPreview',
+            name: SDKUI_Localizator.PreviewDocument,
+            contentOptions: { component: tmDcmtPreview },
+            toolbarOptions: { icon: _jsx(IconShow, { fontSize: 24 }), disabled: isPreviewDisabled, visible: true, orderNumber: 4, isActive: allInitialPanelVisibility['tmDcmtPreview'] }
+        },
+        {
+            id: 'tmWF',
+            name: "Workflow",
+            contentOptions: {
+                component: tmWF,
+                panelContainer: {
+                    title: "Workflow", allowMaximize: !isMobile
+                }
+            },
+            toolbarOptions: {
+                icon: _jsx(IconWorkflow, { fontSize: 24 }),
+                visible: true,
+                disabled: isWFDisabled,
+                orderNumber: 5,
+                isActive: allInitialPanelVisibility['tmWF']
+            }
+        },
+    ], [fromDTD, tmDcmtForm, tmBlog, tmSysMetadata, tmDcmtPreview, tmWF, isPreviewDisabled, isSysMetadataDisabled, isBoardDisabled, isWFDisabled, inputFile, isClosable]);
+    // Retrieves the current document form setting based on the normalized TID
+    const getCurrentDcmtFormSetting = () => {
+        const settings = SDKUI_Globals.userSettings.dcmtFormSettings;
+        // Find the index of the setting that matches the normalized TID
+        const idx = settings.findIndex(s => Number(s.TID) === normalizedTID);
+        // Return both the index and the corresponding setting (or empty object if not found)
+        return { idx, setting: settings[idx] ?? {} };
+    };
+    // Checks if there's a saved panel layout for the current context (ToDo or general)
+    const hasSavedLayout = () => {
+        const { setting } = getCurrentDcmtFormSetting();
+        if (invokedByTodo) {
+            // If invoked by ToDo, check for existence of layoutToDo and that it has keys
+            return setting.layoutToDo !== undefined && Object.keys(setting.layoutToDo).length > 0;
+        }
+        else {
+            // Otherwise, check for general layout
+            return setting.layout !== undefined && Object.keys(setting.layout).length > 0;
+        }
+    };
+    // Persists the current panel states (layout) into user settings
+    const persistPanelStates = (state) => {
+        // If no valid TID or empty state, skip saving
+        if (normalizedTID === undefined || Object.keys(state).length === 0)
+            return;
+        const settings = SDKUI_Globals.userSettings.dcmtFormSettings;
+        const { idx, setting: existingSetting } = getCurrentDcmtFormSetting();
+        // Prepare the new setting object with updated layout depending on context
+        const newSetting = {
+            TID: normalizedTID,
+            layout: invokedByTodo ? (existingSetting.layout ?? {}) : state,
+            layoutToDo: invokedByTodo ? state : (existingSetting.layoutToDo ?? {}),
+        };
+        // Replace existing setting if found, otherwise push a new one
+        if (idx >= 0) {
+            settings[idx] = newSetting;
+        }
+        else {
+            settings.push(newSetting);
+        }
+        // Assign the updated settings array back to the global settings
+        SDKUI_Globals.userSettings.dcmtFormSettings = [...settings];
+    };
+    // Retrieves the persisted panel states (layout) for the current context
+    const getPersistedPanelStates = () => {
+        // Do not return layout on mobile devices
+        if (isMobile)
+            return undefined;
+        const settings = getCurrentDcmtFormSetting()?.setting;
+        // Return the appropriate layout based on context
+        return invokedByTodo ? settings?.layoutToDo : settings?.layout;
+    };
+    const handleCompleteMoreInfo = useCallback(async () => {
+        try {
+            TMSpinner.show();
+            let newTask = { ...taskMoreInfo, state: Task_States.Completed };
+            await SDK_Globals.tmSession?.NewTaskEngine().UpdateAsync(newTask);
+            onTaskCompleted?.(newTask);
+            onClose?.();
+            ShowAlert({ mode: 'success', title: SDKUI_Localizator.MoreInformation, message: SDKUI_Localizator.MoreInfoCompleted, duration: 3000 });
+        }
+        catch (e) {
+            TMSpinner.hide();
+            TMExceptionBoxManager.show({ exception: e });
+        }
+        finally {
+            TMSpinner.hide();
+        }
+    }, [taskMoreInfo, onTaskCompleted, onClose]);
+    const handleSignApprove = useCallback(() => {
+        if (onOpenS4TViewerRequest && TID && DID) {
+            onOpenS4TViewerRequest([{ TID, DID }]);
+            return;
+        }
+        ShowAlert({
+            message: "TODO",
+            mode: "info",
+            duration: 3000,
+            title: SDKUI_Localizator.SignatureAndApprove,
+        });
+    }, [onOpenS4TViewerRequest, TID, DID]);
+    const renderDcmtForm = () => {
+        // Show flat spinner during initial load (before component is mounted)
+        if (isInitialLoading) {
+            return _jsx(Spinner, { description: SDKUI_Localizator.Loading, flat: true });
+        }
+        return (_jsxs("div", { style: {
+                display: 'flex',
+                flexDirection: deviceType === DeviceType.MOBILE ? 'column' : 'row',
+                justifyContent: 'space-between',
+                gap: Gutters.getGutters(),
+                width: '100%',
+                height: '100%',
+                position: 'relative',
+                overflow: 'hidden'
+            }, children: [isNavigating && _jsx(Spinner, { description: SDKUI_Localizator.Loading, flat: false }), (fromDTD) && _jsxs(TMLayoutWaitingContainer, { direction: 'vertical', showWaitPanel: useWaitPanelLocalState ? showWaitPanelLocal : showWaitPanel, showWaitPanelPrimary: useWaitPanelLocalState ? showPrimaryLocal : showPrimary, showWaitPanelSecondary: useWaitPanelLocalState ? showSecondaryLocal : showSecondary, waitPanelTitle: useWaitPanelLocalState ? waitPanelTitleLocal : waitPanelTitle, waitPanelTextPrimary: useWaitPanelLocalState ? waitPanelTextPrimaryLocal : waitPanelTextPrimary, waitPanelValuePrimary: useWaitPanelLocalState ? waitPanelValuePrimaryLocal : waitPanelValuePrimary, waitPanelMaxValuePrimary: useWaitPanelLocalState ? waitPanelMaxValuePrimaryLocal : waitPanelMaxValuePrimary, waitPanelTextSecondary: useWaitPanelLocalState ? waitPanelTextSecondaryLocal : waitPanelTextSecondary, waitPanelValueSecondary: useWaitPanelLocalState ? waitPanelValueSecondaryLocal : waitPanelValueSecondary, waitPanelMaxValueSecondary: useWaitPanelLocalState ? waitPanelMaxValueSecondaryLocal : waitPanelMaxValueSecondary, isCancelable: useWaitPanelLocalState ? dcmtFile ? dcmtFile.size >= 1000000 : false : true, abortController: useWaitPanelLocalState ? abortControllerLocal : abortController, children: [(groupId && groupId.length > 0)
+                            ? _jsx(TMPanelManagerContainer, { panels: initialPanels, direction: "horizontal", parentId: groupId, showToolbar: showDcmtFormSidebar })
+                            : _jsxs(TMPanelManagerWithPersistenceProvider, { panels: initialPanels, initialVisibility: allInitialPanelVisibility, defaultDimensions: defaultPanelDimensions, initialDimensions: defaultPanelDimensions, initialMobilePanelId: 'tmDcmtForm', isPersistenceEnabled: !isMobile ? hasSavedLayout() : false, persistPanelStates: !isMobile ? (state) => persistPanelStates(state) : undefined, persistedPanelStates: getPersistedPanelStates(), children: [_jsx(WfButtonStateHandler, { isWFDisabled: isWFDisabled }), _jsx(TMPanelManagerContainer, { panels: initialPanels, direction: "horizontal", parentId: groupId, showToolbar: showDcmtFormSidebar })] }), isOpenDistinctValues &&
+                            _jsx(TMDistinctValues, { tid: TID, mid: focusedMetadataValue?.mid, isModal: true, showHeader: false, layoutMode: layoutMode, onSelectionChanged: (e) => {
+                                    if (!e)
+                                        return;
+                                    setFormData((prevItems) => prevItems.map((item) => item.tid == e.tid && item.mid === e.mid ? { ...item, value: e.newValue } : item));
+                                } }), isOpenFormulaEditor &&
+                            _jsx(TMFormulaEditor, { isModal: true, formMode: FormModes.Update, inputData: getFormula(), showBack: false, onClose: () => setIsOpenFormulaEditor(false), onApplied: (newFormula) => {
+                                    setFormData((prevItems) => prevItems.map((item) => item.tid == newFormula.tid && item.mid === newFormula.mid ? { ...item, value: FormulaHelper.addFormulaTag(newFormula.expression), isSelected: true, isEditable: true } : item));
+                                    setFocusedMetadataValue(prevState => ({
+                                        ...prevState,
+                                        isSelected: true,
+                                        isEditable: true,
+                                        value: FormulaHelper.addFormulaTag(newFormula.expression)
+                                    }));
+                                } }), showApprovePopup && _jsx(WorkFlowApproveRejectPopUp, { deviceType: deviceType, onCompleted: handleWFOperationCompleted, TID: approvalVID, DID: DID, isReject: 0, onClose: () => setShowApprovePopup(false) }), showRejectPopup && _jsx(WorkFlowApproveRejectPopUp, { deviceType: deviceType, onCompleted: handleWFOperationCompleted, TID: approvalVID, DID: DID, isReject: 1, onClose: () => setShowRejectPopup(false) }), showReAssignPopup && _jsx(WorkFlowReAssignPopUp, { deviceType: deviceType, onCompleted: handleWFOperationCompleted, TID: approvalVID, DID: DID, onClose: () => setShowReAssignPopup(false) }), showMoreInfoPopup && _jsx(WorkFlowMoreInfoPopUp, { deviceType: deviceType, onCompleted: handleWFOperationCompleted, TID: approvalVID, DID: DID, onClose: () => setShowMoreInfoPopup(false) }), (isModal && onClose) && _jsx("div", { id: "TMDcmtFormShowConfirmForClose-" + id })] }), showToppyForApprove && (_jsx(ToppyHelpCenter, { deviceType: deviceType, usePortal: false, content: workItems.length === 1 ?
+                        _jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: '10px' }, children: _jsx(WorkFlowOperationButtons, { deviceType: deviceType, onApprove: () => setShowApprovePopup(true), onSignApprove: handleSignApprove, onReject: () => setShowRejectPopup(true), onReAssign: () => setShowReAssignPopup(true), onMoreInfo: () => setShowMoreInfoPopup(true) }) })
+                        :
+                            _jsxs("div", { style: { padding: 10, color: 'white', maxWidth: '180px', borderRadius: 10, background: '#1B1464 0% 0% no-repeat padding-box', border: '1px solid #FFFFFF' }, children: [`Devi approvare ${workItems.length} workitem(s) per questo documento.`, `Vai alla sezione di approvazione.`] }) })), showToppyForCompleteMoreInfo && (_jsx(ToppyHelpCenter, { deviceType: deviceType, usePortal: false, content: _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 10 }, children: [_jsx("div", { style: { padding: 10, color: 'white', maxWidth: '180px', borderRadius: 10, background: '#1B1464 0% 0% no-repeat padding-box', border: '1px solid #FFFFFF' }, children: `${SDKUI_Localizator.MoreInfoCompleteRequestSentBy} ${taskMoreInfo?.fromName}!` }), _jsx(TMButton, { caption: SDKUI_Localizator.CommentAndComplete, color: 'success', showTooltip: false, onClick: () => {
+                                    setShowCommentForm(true);
+                                } })] }) })), (showCommentForm && TID && DID) &&
+                    _jsx(TMBlogCommentForm, { context: { engine: 'SearchEngine', object: { tid: TID, did: DID } }, onClose: () => setShowCommentForm(false), refreshCallback: handleCompleteMoreInfo, participants: [], showAttachmentsSection: false, allArchivedDocumentsFileItems: [] }), isOpenDetails &&
+                    _jsx(StyledModalContainer, { style: { backgroundColor: 'white' }, children: _jsx(TMMasterDetailDcmts, { deviceType: deviceType, isForMaster: false, inputDcmts: getSelectionDcmtInfo(), allowNavigation: allowNavigation, canNext: canNext, canPrev: canPrev, onNext: onNext, onPrev: onPrev, onBack: () => setIsOpenDetails(false) }) }), isOpenMaster &&
+                    _jsxs(StyledModalContainer, { style: { backgroundColor: 'white' }, children: [_jsx(TMMasterDetailDcmts, { deviceType: deviceType, inputDcmts: getSelectionDcmtInfo(), isForMaster: true, allowNavigation: allowNavigation, canNext: canNext, canPrev: canPrev, onNext: onNext, onPrev: onPrev, onBack: () => setIsOpenMaster(false), appendMasterDcmts: handleAddItem }), secondaryMasterDcmts.length > 0 && secondaryMasterDcmts.map((dcmt, index) => {
+                                return (_jsx(StyledModalContainer, { style: { backgroundColor: 'white' }, children: _jsx(TMMasterDetailDcmts, { deviceType: deviceType, inputDcmts: [dcmt], isForMaster: true, allowNavigation: false, onBack: () => handleRemoveItem(dcmt.TID, dcmt.DID), appendMasterDcmts: handleAddItem }) }, `${index}-${dcmt.DID}`));
+                            })] }), taskFormDialogComponent, s4TViewerDialogComponent] }));
+    };
+    return (_jsx(_Fragment, { children: (isModal && onClose)
+            ? _jsx(TMModal, { title: titleModal, onClose: handleClose, width: widthModal ?? '100%', height: heightModal ?? '100%', hidePopup: false, askClosingConfirm: true, children: _jsx("div", { style: { width: "100%", height: "100%", display: 'block', padding: "4px", position: 'relative' }, children: renderDcmtForm() }) })
+            : renderDcmtForm() }));
+};
+export default TMDcmtForm;
+/**
+ * Utility function to apply metadata filtering logic
+ * @param data - Array of metadata values to filter
+ * @param showAll - Whether to show all items or limit to maxItems
+ * @param listMaxItems - Maximum number of items to show when showAll is false
+ * @param TID - Document type ID to determine specific filtering rules
+ * @returns Filtered array of metadata values
+ */
+const applyMetadataFilter = (data, showAll, listMaxItems, TID) => {
+    // Early return for empty data
+    if (!data || data.length === 0)
+        return [];
+    // Base filter: include only metadata with mid > 100
+    const baseFilter = (o) => Boolean(o.mid && o.mid > 100);
+    // Special filter for Draft document type: includes base filter + system fields
+    const draftFilter = (o) => baseFilter(o) ||
+        o.mid === SystemMIDsAsNumber.FileExt ||
+        o.mid === SystemMIDsAsNumber.FileSize ||
+        o.mid === SystemMIDsAsNumber.LastUpdateTime ||
+        o.mid === SystemMIDsAsNumber.CreationTime;
+    // Select the appropriate filter based on document type
+    const currentFilter = TID === SystemTIDs.Drafts ? draftFilter : baseFilter;
+    // Apply filter once
+    const filteredData = data.filter(currentFilter);
+    // Return all filtered data or slice to max items
+    return showAll ? filteredData : filteredData.slice(0, listMaxItems);
+};
+//#region Validaion
+const validateMetadataList = (mvdList = []) => {
+    if (!Array.isArray(mvdList)) {
+        throw new TypeError("metadataList must be an array of ITMMetadataProps.");
+    }
+    return mvdList.reduce((validationItems, mvd) => {
+        const value = mvd.value?.toString() ?? "";
+        if (isValidForValidation(mvd)) {
+            validateRequiredField(mvd, value, validationItems);
+            validateMaxLength(mvd, value, validationItems);
+        }
+        return validationItems;
+    }, []);
+};
+const isValidForValidation = (mvd) => { return mvd.mid > 99; };
+const validateRequiredField = (mvd, value, validationItems) => {
+    if (mvd.isRequired === '1' && !value.trim()) {
+        const message = SDKUI_Localizator.RequiredField;
+        validationItems.push(new ValidationItem(ResultTypes.ERROR, mvd.md?.nameLoc ?? "", message));
+    }
+};
+const validateMaxLength = (mvd, value, validationItems) => {
+    const regex = /[!?[\],./*-+'<>:";]/g;
+    const maxLength = mvd.md?.length ?? 0;
+    const isTextOrNumber = mvd.md?.dataType === MetadataDataTypes.Varchar || mvd.md?.dataType === MetadataDataTypes.Number;
+    const isFormula = FormulaHelper.isFormula(value);
+    if (isTextOrNumber && !isFormula && mvd.md?.length && value.replace(regex, '').length > maxLength) {
+        const message = `"${mvd.md.nameLoc ?? "no-name"}" ha superata massimo lunghezza di ${maxLength} caratteri.`;
+        validationItems.push(new ValidationItem(ResultTypes.ERROR, mvd.md.nameLoc ?? "", message));
+    }
+};
+//#endregion Validation
+// Questo componente non renderizza nulla (return null)
+// ma viene utilizzato come child del Provider per disabilitare il bottone
+const WfButtonStateHandler = ({ isWFDisabled }) => {
+    const { setToolbarButtonDisabled } = useTMPanelManagerContext();
+    useEffect(() => {
+        setToolbarButtonDisabled('tmWF', isWFDisabled);
+    }, [isWFDisabled, setToolbarButtonDisabled]);
+    return null; // Non renderizza elementi nel DOM
+};
+const TMDcmtPreviewWrapper = ({ currentDcmt, layoutMode, fromDTD, dcmtFile, deviceType, isVisible, onFileUpload, enableDragDropOverlay = false }) => {
+    const { setPanelVisibilityById, toggleMaximize, isResizingActive, countVisibleLeafPanels, panelVisibility } = useTMPanelManagerContext();
+    const isMobile = deviceType === DeviceType.MOBILE;
+    return (layoutMode === LayoutModes.Update ?
+        _jsx(TMDcmtPreview, { isVisible: isVisible, onClosePanel: (!isMobile && countVisibleLeafPanels() > 1) ? () => setPanelVisibilityById('tmDcmtPreview', false) : undefined, allowMaximize: !isMobile && countVisibleLeafPanels() > 1, onMaximizePanel: (!isMobile && countVisibleLeafPanels() > 1) ? () => toggleMaximize("tmDcmtPreview") : undefined, dcmtData: currentDcmt, isResizingActive: isResizingActive }) :
+        _jsx(TMFileUploader, { onFileUpload: onFileUpload, onClose: (!isMobile && countVisibleLeafPanels() > 1) ? () => setPanelVisibilityById('tmDcmtPreview', false) : undefined, isRequired: fromDTD?.archiveConstraint === ArchiveConstraints.ContentCompulsory && dcmtFile === null, defaultBlob: dcmtFile, deviceType: deviceType, isResizingActive: isResizingActive, enableDragDropOverlay: panelVisibility['tmDcmtPreview'] && enableDragDropOverlay }));
+};