@topconsultnpm/sdkui-react 6.17.0-test9

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

@@ -0,0 +1,46 @@
+import React from "react";
+import { LayoutDescriptor, LayoutModes, ValidationItem } from '@topconsultnpm/sdk-ts';
+import { DeviceContextProps } from "../base/TMDeviceProvider";
+import { MetadataValueDescriptorEx } from "../../ts";
+export declare enum ShowCheckBoxesMode {
+    Never = 0,
+    Always = 1,
+    AlwaysReadOnly = 2
+}
+export declare enum AdvancedMenuButtons {
+    None = 0,
+    MakeEditable = 1,
+    FormulaEditor = 2,
+    DistinctValues = 3
+}
+export type AdvancedMenuClickEventArgs = {
+    tid: number | undefined;
+    mid: number | undefined;
+    button: AdvancedMenuButtons;
+};
+interface ITMMetadataValuesProps extends DeviceContextProps {
+    TID: number | undefined;
+    metadataValues: MetadataValueDescriptorEx[];
+    metadataValuesOrig?: MetadataValueDescriptorEx[];
+    customMenuItems?: any[];
+    isExpertMode?: boolean;
+    isReadOnly?: boolean;
+    showCheckBoxes?: ShowCheckBoxesMode;
+    showNullValueCheckBoxes?: boolean;
+    validationItems: ValidationItem[];
+    layoutMode?: LayoutModes;
+    selectedMID?: number;
+    openChooserBySingleClick?: boolean;
+    isOpenDistinctValues?: boolean;
+    checkPerms?: boolean;
+    inputMids?: Array<{
+        mid: number;
+        value: string;
+    }>;
+    layout?: LayoutDescriptor;
+    onAdvancedMenuClick?: (e: AdvancedMenuClickEventArgs) => void;
+    onValueChanged?: (mid: MetadataValueDescriptorEx[]) => void;
+    onFocusedItemChanged?: (mid: MetadataValueDescriptorEx | undefined) => void;
+}
+declare const TMMetadataValues: React.FC<ITMMetadataValuesProps>;
+export default TMMetadataValues;

package/lib/components/editors/TMMetadataValues.js

@@ -0,0 +1,530 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+import styled from "styled-components";
+import { AccessLevels, DcmtTypeListCacheService, LayoutItemTypes, LayoutModes, MetadataDataDomains, MetadataDataTypes, SDK_Globals, SystemMIDsAsNumber, SystemTIDs, TemplateTIDs, WorkItemMetadataNames } from '@topconsultnpm/sdk-ts';
+import { IconUndo, IconPencil, IconFunction, IconMenuVertical, IconDataList, SDKUI_Localizator, IconNull, stringIsNullOrEmpty, deepCompare, SDKUI_Globals, IconDcmtTypeSys } from "../../helper";
+import { TMColors } from "../../utils/theme";
+import TMButton from "../base/TMButton";
+import TMDropDownMenu from "../base/TMDropDownMenu";
+import TMTooltip from "../base/TMTooltip";
+import TMCheckBox from "./TMCheckBox";
+import TMMetadataEditor, { useMetadataEditableList } from "./TMMetadataEditor";
+import { FormulaHelper } from "./TMFormulaEditor";
+import { DraftsMIDs, DSAttachsMIDs } from "../../ts";
+import { TMNothingToShow } from "../features/documents/TMDcmtPreview";
+import TMAccordion from "../base/TMAccordion";
+export var ShowCheckBoxesMode;
+(function (ShowCheckBoxesMode) {
+    ShowCheckBoxesMode[ShowCheckBoxesMode["Never"] = 0] = "Never";
+    ShowCheckBoxesMode[ShowCheckBoxesMode["Always"] = 1] = "Always";
+    ShowCheckBoxesMode[ShowCheckBoxesMode["AlwaysReadOnly"] = 2] = "AlwaysReadOnly";
+})(ShowCheckBoxesMode || (ShowCheckBoxesMode = {}));
+export var AdvancedMenuButtons;
+(function (AdvancedMenuButtons) {
+    AdvancedMenuButtons[AdvancedMenuButtons["None"] = 0] = "None";
+    AdvancedMenuButtons[AdvancedMenuButtons["MakeEditable"] = 1] = "MakeEditable";
+    AdvancedMenuButtons[AdvancedMenuButtons["FormulaEditor"] = 2] = "FormulaEditor";
+    AdvancedMenuButtons[AdvancedMenuButtons["DistinctValues"] = 3] = "DistinctValues";
+})(AdvancedMenuButtons || (AdvancedMenuButtons = {}));
+const TMMetadataValues = ({ showCheckBoxes = ShowCheckBoxesMode.Never, checkPerms = true, isReadOnly = false, isExpertMode = SDKUI_Globals.userSettings.advancedSettings.expertMode === 1, customMenuItems = [], showNullValueCheckBoxes, isOpenDistinctValues = false, openChooserBySingleClick, selectedMID, onFocusedItemChanged, layoutMode = LayoutModes.Update, metadataValues = [], metadataValuesOrig = [], TID, onValueChanged, onAdvancedMenuClick, validationItems, inputMids = [], layout }) => {
+    const [dynDataListsToBeRefreshed, setDynDataListsToBeRefreshed] = useState([]);
+    const [currentDTD, setCurrentDTD] = useState();
+    const [isEditableList, addOrRemoveEditableList] = useMetadataEditableList();
+    const [selectedItem, setSelectedItem] = useState(undefined);
+    const [prevMetadataValues, setPrevMetadataValues] = useState([]);
+    const [inputMidsApplied, setInputMidsApplied] = useState(false);
+    const onChangeHandler = useCallback((newValue, mid) => {
+        let newValues = structuredClone(metadataValues);
+        const item = newValues.find(value => value.mid === mid);
+        if (item) {
+            item.value = newValue;
+            if (showCheckBoxes !== ShowCheckBoxesMode.Never)
+                item.isSelected = !stringIsNullOrEmpty(newValue);
+        }
+        if (!newValue) {
+            let dynDLToBeRefreshed = dynDataListsToBeRefreshed.find(o => o.midStarter === mid);
+            while (dynDLToBeRefreshed != undefined) {
+                const item = newValues.find(value => value.mid === dynDLToBeRefreshed?.mid);
+                if (item)
+                    item.value = newValue;
+                dynDLToBeRefreshed = dynDataListsToBeRefreshed.find(o => o.midStarter === item?.mid);
+            }
+        }
+        onValueChanged?.(newValues);
+    }, [metadataValues, showCheckBoxes, dynDataListsToBeRefreshed, onValueChanged]);
+    const editorValidationHandler = useCallback((mid) => {
+        const md = metadataValues?.find(m => m.mid === mid);
+        const validationItem = validationItems.find(vil => vil.PropertyName === md?.md?.nameLoc);
+        return validationItem ? [validationItem] : [];
+    }, [metadataValues, validationItems]);
+    const isEditable = useCallback((mid) => {
+        let md = currentDTD?.metadata?.find(o => o.id == mid);
+        if (!md)
+            return false;
+        let isList = md.dataDomain == MetadataDataDomains.DataList || md.dataDomain == MetadataDataDomains.DynamicDataList || md.dataDomain == MetadataDataDomains.UserID;
+        return isList && isEditableList(mid);
+    }, [currentDTD, isEditableList]);
+    const handleMetadataValueSelection = useCallback((item) => {
+        if (selectedItem?.mid !== item.mid) {
+            setSelectedItem(item);
+            onFocusedItemChanged?.(item);
+        }
+    }, [selectedItem, onFocusedItemChanged]);
+    useEffect(() => {
+        if (!TID) {
+            setCurrentDTD(undefined);
+            setDynDataListsToBeRefreshed([]);
+            return;
+        }
+        // Passiamo did = undefined, perché è già in cache
+        DcmtTypeListCacheService.GetWithNotGrantedAsync(TID, undefined).then((resultDTD) => {
+            setCurrentDTD(resultDTD);
+        });
+    }, [TID]);
+    useEffect(() => {
+        if (metadataValues.length <= 0)
+            return;
+        if (!currentDTD)
+            return;
+        if (deepCompare(metadataValues.filter(o => o.md?.dataDomain === MetadataDataDomains.DynamicDataList), prevMetadataValues.filter(o => o.md?.dataDomain === MetadataDataDomains.DynamicDataList)))
+            return;
+        setPrevMetadataValues(metadataValues);
+        loadDynDataListToBeRefreshedCascadeAsync(TID, metadataValues).then((result) => {
+            setDynDataListsToBeRefreshed(result);
+        });
+    }, [metadataValues, currentDTD]);
+    useEffect(() => {
+        setInputMidsApplied(false);
+    }, [inputMids]);
+    //modified by ASH
+    useEffect(() => {
+        if (!inputMids || inputMids.length === 0)
+            return;
+        if (!metadataValues || metadataValues.length === 0)
+            return;
+        if (inputMidsApplied)
+            return;
+        let newValues = structuredClone(metadataValues);
+        let hasChanges = false;
+        inputMids.forEach(inputMid => {
+            const item = newValues.find(value => value.mid === inputMid.mid);
+            if (item) {
+                item.value = inputMid.value;
+                if (showCheckBoxes !== ShowCheckBoxesMode.Never) {
+                    item.isSelected = !stringIsNullOrEmpty(inputMid.value);
+                }
+                hasChanges = true;
+            }
+        });
+        if (hasChanges) {
+            onValueChanged?.(newValues);
+            setInputMidsApplied(true);
+        }
+    }, [inputMids, metadataValues, inputMidsApplied]);
+    const loadDynDataListToBeRefreshedCascadeAsync = async (tid, mvdList) => {
+        if (!tid)
+            return [];
+        if (mvdList.length <= 0)
+            return [];
+        let dynDLToBeRefreshed = [];
+        for (const m of mvdList) {
+            if (!m.value)
+                continue;
+            let data = await getDataDynDataListsToBeRefreshedAsync(tid, m.mid, m.value, dynDLToBeRefreshed.find(o => o.mid == m.mid)?.queryParams ?? []);
+            if (!data)
+                continue;
+            for (const item of data)
+                dynDLToBeRefreshed.push(item);
+        }
+        return dynDLToBeRefreshed;
+    };
+    const getDataDynDataListsToBeRefreshedAsync = async (tid, mid, value, qParams) => {
+        if (!tid)
+            return;
+        if (!mid)
+            return;
+        if (stringIsNullOrEmpty(value))
+            return;
+        let md = currentDTD?.metadata?.find(o => o.id == mid);
+        if (md?.dataDomain !== MetadataDataDomains.DynamicDataList)
+            return;
+        let d = md?.dynDL_Cfgs?.[0];
+        if (md?.dynDL_IsMultiCfg == 1) {
+            switch (layoutMode) {
+                case LayoutModes.None:
+                case LayoutModes.Update:
+                    d = md?.dynDL_Cfgs?.[1];
+                    break;
+                default:
+                    d = md?.dynDL_Cfgs?.[0];
+                    break;
+            }
+        }
+        if (!d)
+            return;
+        let toBeRefreshed = [];
+        let dynDlDataSource = await SDK_Globals.tmSession?.NewSearchEngine().GetDynDataListValuesAsync(tid, mid, layoutMode, qParams);
+        if (!d.onValueChanged_DynDataListsToBeRefreshed)
+            return;
+        let row = dynDlDataSource?.dtdResult?.rows?.filter(o => o[d.selectItemForValue ?? 0] == value);
+        if (!row || row.length <= 0)
+            return;
+        for (const t of d.onValueChanged_DynDataListsToBeRefreshed) {
+            let mid = t.item1;
+            let queryParams = [];
+            if ((t.item2 ?? 0) >= 0)
+                queryParams.push(row[0][t.item2 ?? 0]);
+            if ((t.item3 ?? 0) >= 0)
+                queryParams.push(row[0][t.item3 ?? 0]);
+            if ((t.item4 ?? 0) >= 0)
+                queryParams.push(row[0][t.item4 ?? 0]);
+            if ((t.item5 ?? 0) >= 0)
+                queryParams.push(row[0][t.item5 ?? 0]);
+            toBeRefreshed.push({ mid: mid, queryParams: queryParams, midStarter: md?.id });
+        }
+        return toBeRefreshed;
+    };
+    const getAdvancedMenuItems = useCallback((mvd) => {
+        let md = mvd.md;
+        if (!md)
+            return [];
+        let isDisabledOper = checkPerms && (md.dataDomain === MetadataDataDomains.Computed || md?.perm?.canUpdate !== AccessLevels.Yes);
+        const menu = [
+            // Only add MakeEditable/Restore and FormulaEditor if isExpertMode is true
+            ...(isExpertMode ? [
+                {
+                    text: mvd.isEditable ? SDKUI_Localizator.Restore : SDKUI_Localizator.MakeEditable,
+                    icon: mvd.isEditable ? _jsx(IconUndo, {}) : _jsx(IconPencil, {}),
+                    disabled: isDisabledOper,
+                    onClick: () => {
+                        onAdvancedMenuClick?.({ tid: mvd.tid, mid: mvd.mid, button: AdvancedMenuButtons.MakeEditable });
+                        onValueChanged?.(metadataValues.map((item) => {
+                            if (item.tid == mvd.tid && item.mid === mvd.mid) {
+                                // If DateTime and value is a formula, clear value but keep formulaValue
+                                if (item.md?.dataType === MetadataDataTypes.DateTime && FormulaHelper.isFormula(item.value)) {
+                                    return {
+                                        ...item,
+                                        isEditable: !item.isEditable,
+                                        formulaValue: item.value,
+                                        value: null
+                                    };
+                                }
+                                // If restoring and formulaValue exists, restore it
+                                if (item.md?.dataType === MetadataDataTypes.DateTime && !item.isEditable && item.formulaValue) {
+                                    return {
+                                        ...item,
+                                        isEditable: !item.isEditable,
+                                        value: item.formulaValue,
+                                        formulaValue: undefined
+                                    };
+                                }
+                                return { ...item, isEditable: !item.isEditable };
+                            }
+                            return item;
+                        }));
+                    }
+                },
+                {
+                    text: SDKUI_Localizator.FormulaEditorTitle,
+                    icon: _jsx(IconFunction, {}),
+                    disabled: isDisabledOper,
+                    onClick: () => onAdvancedMenuClick?.({ tid: mvd.tid, mid: mvd.mid, button: AdvancedMenuButtons.FormulaEditor })
+                }
+            ] : []),
+            // Always add DistinctValues
+            {
+                text: SDKUI_Localizator.DistinctValues,
+                icon: _jsx(IconDataList, {}),
+                onClick: () => onAdvancedMenuClick?.({ tid: mvd.tid, mid: mvd.mid, button: AdvancedMenuButtons.DistinctValues })
+            },
+            // Always add customMenuItems if present
+            ...customMenuItems
+        ];
+        return menu;
+    }, [checkPerms, isExpertMode, customMenuItems, metadataValues, onAdvancedMenuClick, onValueChanged]);
+    // Helper function to render a single metadata item
+    const renderMetadataItem = useCallback((item, isReadOnlyOverride = false) => (_jsxs(StyledRow, { style: { marginTop: item.md?.dataType === MetadataDataTypes.DateTime ? '6px' : '0', gap: '8px' }, onClick: () => { handleMetadataValueSelection(item); }, onFocus: () => { handleMetadataValueSelection(item); }, children: [showCheckBoxes !== ShowCheckBoxesMode.Never &&
+                _jsx(TMCheckBox, { elementStyle: { marginTop: item.md?.dataType === MetadataDataTypes.DateTime ? '14px' : '20px' }, value: item.isSelected, disabled: showCheckBoxes === ShowCheckBoxesMode.AlwaysReadOnly, onValueChanged: (newValue) => {
+                        let newValues = structuredClone(metadataValues);
+                        const mvd = newValues.find(value => value.mid === item.mid);
+                        if (mvd)
+                            mvd.isSelected = newValue;
+                        onValueChanged?.(newValues);
+                    } }), _jsxs("div", { style: { position: 'relative', height: '100%', width: '100%', opacity: showNullValueCheckBoxes && item.isNull ? 0.4 : 1 }, children: [_jsx(TMMetadataEditor, { tid: TID, mid: item.mid, customLabel: item.customName, layoutMode: layoutMode, isLexProt: item.isLexProt, isSelected: isOpenDistinctValues && item.mid === selectedMID, isModifiedWhen: (item.value ?? '') !== (metadataValuesOrig.find(m => m.mid === item.mid)?.value ?? ''), isReadOnly: isReadOnly || isReadOnlyOverride || item.isReadOnly || (showNullValueCheckBoxes ? item.isNull : undefined), isEditable: item.isEditable, validationItems: editorValidationHandler(item.mid ?? 0), value: item.value, openChooserBySingleClick: openChooserBySingleClick, onValueChanged: (newValue) => { onChangeHandler(newValue, item.mid ?? 0); }, onValueChange: (newValue) => { onChangeHandler(newValue, item.mid ?? 0); }, queryParamsDynDataList: dynDataListsToBeRefreshed.find(o => o.mid == item.mid)?.queryParams ?? [], onCascadeRefreshDynDataLists: (ddlToBeRefreshed) => {
+                            let newDynDataListsToBeRefreshed = [];
+                            for (const item of dynDataListsToBeRefreshed) {
+                                let index = ddlToBeRefreshed.findIndex(o => o.mid == item.mid || (o.mid == -1 && o.midStarter == item.midStarter));
+                                if (index >= 0)
+                                    continue;
+                                newDynDataListsToBeRefreshed.push(item);
+                            }
+                            for (const item of ddlToBeRefreshed) {
+                                if (item.queryParams.length <= 0)
+                                    continue;
+                                if (!item.mid)
+                                    continue;
+                                if (item.mid <= 0)
+                                    continue;
+                                newDynDataListsToBeRefreshed.push(item);
+                            }
+                            setDynDataListsToBeRefreshed(newDynDataListsToBeRefreshed);
+                        }, onCascadeUpdateMIDs: (midsToBeUpdated) => {
+                            //Attenzione. Il primo elemento di midsToBeUpdated è il currentMID con il new value.
+                            //nonostante passi prima da onValueChanged, la collection metadata non risulta aggiornata!
+                            let newMetadata = structuredClone(metadataValues);
+                            for (const item of midsToBeUpdated) {
+                                const mdItem = newMetadata.find(value => value.mid === item.mid);
+                                if (mdItem)
+                                    mdItem.value = item.value;
+                            }
+                            onValueChanged?.(newMetadata);
+                        } }), FormulaHelper.isFormula(item.value)
+                        ? _jsx(IconFunction, { color: "#1a89d3", fontSize: 14, style: { position: "absolute", top: item.md?.dataType === MetadataDataTypes.DateTime ? '3px' : '5px', left: '14px' } })
+                        : (isEditable(item.mid) || item.isEditable)
+                            ? _jsx(IconPencil, { color: "#138603", fontSize: 14, style: { position: "absolute", top: item.md?.dataType === MetadataDataTypes.DateTime ? '3px' : '5px', left: '16px' } })
+                            : _jsx(_Fragment, {})] }), showNullValueCheckBoxes &&
+                _jsx(TMTooltip, { content: "Imposta <Null>", children: _jsx(IconNull, { style: { marginTop: item.md?.dataType === MetadataDataTypes.DateTime ? '12px' : '18px', opacity: item.md?.isRequired === 1 ? 0.4 : 1 }, cursor: item.md?.isRequired === 1 ? 'default' : 'pointer', color: item.isNull ? TMColors.isModified : TMColors.button_icon, onClick: () => {
+                            if (item.md?.isRequired === 1)
+                                return;
+                            let newValues = structuredClone(metadataValues);
+                            const mvd = newValues.find(value => value.mid === item.mid);
+                            if (mvd) {
+                                mvd.isNull = !mvd.isNull;
+                                if (mvd.isNull)
+                                    mvd.isSelected = true;
+                                else
+                                    mvd.isSelected = !stringIsNullOrEmpty(mvd.value);
+                            }
+                            onValueChanged?.(newValues);
+                        } }) }), !isReadOnly && _jsx("div", { style: { marginTop: item.md?.dataType === MetadataDataTypes.DateTime ? '12px' : '18px' }, onClick: () => { handleMetadataValueSelection(item); }, children: _jsx(TMDropDownMenu, { backgroundColor: 'white', color: TMColors.button_icon, borderRadius: '3px', content: _jsx(TMButton, { btnStyle: 'icon', icon: _jsx(IconMenuVertical, {}), showTooltip: false }), disabled: item.isLexProt === 1, items: getAdvancedMenuItems(item) }) })] }, item.mid)), [TID, showCheckBoxes, showNullValueCheckBoxes, isReadOnly, layoutMode, selectedMID, isOpenDistinctValues, openChooserBySingleClick, dynDataListsToBeRefreshed, metadataValues, metadataValuesOrig, validationItems, onValueChanged, handleMetadataValueSelection, getAdvancedMenuItems, onChangeHandler, editorValidationHandler, isEditable]);
+    const layoutWorkItem = useMemo(() => {
+        const workItemData = [];
+        const technicalWorkItemData = [];
+        const documentData = [];
+        metadataValues.forEach(item => {
+            switch (item.md?.name) {
+                case WorkItemMetadataNames.WI_Description:
+                case WorkItemMetadataNames.WI_CreationTime:
+                    workItemData.push(item);
+                    break;
+                case WorkItemMetadataNames.WI_Response:
+                case WorkItemMetadataNames.WI_From:
+                case WorkItemMetadataNames.WI_To:
+                case WorkItemMetadataNames.WI_WFID:
+                case WorkItemMetadataNames.WI_TID:
+                case WorkItemMetadataNames.WI_DID:
+                case WorkItemMetadataNames.WI_SetID:
+                    technicalWorkItemData.push(item);
+                    break;
+                default:
+                    // Check if it's another WorkItemMetadataName not explicitly listed
+                    if (Object.values(WorkItemMetadataNames).includes(item.md?.name)) {
+                        technicalWorkItemData.push(item);
+                    }
+                    else {
+                        documentData.push(item);
+                    }
+                    break;
+            }
+        });
+        return (_jsxs("div", { style: { width: '100%' }, children: [documentData.length > 0 && _jsx(TMAccordion, { title: SDKUI_Localizator.DocumentData, children: documentData.map(item => renderMetadataItem(item)) }), workItemData.length > 0 && _jsx(TMAccordion, { title: SDKUI_Localizator.WorkItemData, children: workItemData.map(item => renderMetadataItem(item, true)) }), technicalWorkItemData.length > 0 && _jsx(TMAccordion, { title: SDKUI_Localizator.WorkItemTechnicalData, defaultCollapsed: true, children: technicalWorkItemData.map(item => renderMetadataItem(item, true)) })] }));
+    }, [metadataValues, showCheckBoxes, showNullValueCheckBoxes, isReadOnly, dynDataListsToBeRefreshed, validationItems, selectedMID, isOpenDistinctValues, openChooserBySingleClick, metadataValuesOrig]);
+    const layoutDraft = useMemo(() => {
+        // Definiamo l'ordine desiderato per gli elementi
+        const desiredDraftOrder = [
+            DraftsMIDs.Name,
+            DraftsMIDs.Description,
+            DraftsMIDs.Ver,
+            DraftsMIDs.LastVer,
+            SystemMIDsAsNumber.FileExt,
+            SystemMIDsAsNumber.FileSize,
+            SystemMIDsAsNumber.LastUpdateTime,
+            SystemMIDsAsNumber.CreationTime,
+        ];
+        const desiredCICOOrder = [
+            DraftsMIDs.CheckOutDate,
+            DraftsMIDs.CheckOutUserID,
+        ];
+        // Usiamo una mappa temporanea per raccogliere gli elementi per ID,
+        // in modo da poterli poi ordinare facilmente.
+        const tempDraftDataMap = {};
+        const tempCICODataMap = {};
+        metadataValues.forEach(item => {
+            switch (item.md?.id) {
+                case DraftsMIDs.Name:
+                case DraftsMIDs.Description:
+                    tempDraftDataMap[item.md.id] = item;
+                    break;
+                case DraftsMIDs.Ver:
+                case DraftsMIDs.LastVer:
+                case SystemMIDsAsNumber.FileExt:
+                case SystemMIDsAsNumber.FileSize:
+                case SystemMIDsAsNumber.LastUpdateTime:
+                case SystemMIDsAsNumber.CreationTime:
+                    // item.isReadOnly = true;
+                    tempDraftDataMap[item.md.id] = item;
+                    break;
+                case DraftsMIDs.CheckOutDate:
+                case DraftsMIDs.CheckOutUserID:
+                    tempCICODataMap[item.md.id] = item;
+                    break;
+                default: break;
+            }
+        });
+        // Visualizziamo nell'ordine desiderato
+        const draftData = [];
+        desiredDraftOrder.forEach(id => {
+            if (tempDraftDataMap[id]) {
+                draftData.push(tempDraftDataMap[id]);
+            }
+        });
+        const checkOutData = [];
+        desiredCICOOrder.forEach(id => {
+            if (tempCICODataMap[id]) {
+                checkOutData.push(tempCICODataMap[id]);
+            }
+        });
+        return (_jsxs("div", { style: { width: '100%' }, children: [draftData.length > 0 && _jsx(TMAccordion, { title: SDKUI_Localizator.Draft, children: draftData.map(item => renderMetadataItem(item, isReadOnly)) }), checkOutData.length > 0 && _jsx(TMAccordion, { title: `${SDKUI_Localizator.CheckIn}/${SDKUI_Localizator.CheckOut}`, children: checkOutData.map(item => renderMetadataItem(item, true)) })] }));
+    }, [metadataValues, showCheckBoxes, showNullValueCheckBoxes, isReadOnly, dynDataListsToBeRefreshed, validationItems, selectedMID, isOpenDistinctValues, openChooserBySingleClick, metadataValuesOrig]);
+    const layoutDsAttachs = useMemo(() => {
+        const dsAttachsData = [];
+        metadataValues.forEach(item => {
+            switch (item.md?.id) {
+                // case DSAttachsMIDs.DSID:
+                case DSAttachsMIDs.Name:
+                case DSAttachsMIDs.Description:
+                    dsAttachsData.push(item);
+                    break;
+                default:
+                    break;
+            }
+        });
+        return (_jsx("div", { style: { width: '100%' }, children: dsAttachsData.length > 0 && _jsx(TMAccordion, { title: SDKUI_Localizator.Attachment, children: dsAttachsData.map(item => renderMetadataItem(item, isReadOnly)) }) }));
+    }, [metadataValues, showCheckBoxes, showNullValueCheckBoxes, isReadOnly, dynDataListsToBeRefreshed, validationItems, selectedMID, isOpenDistinctValues, openChooserBySingleClick, metadataValuesOrig]);
+    const layoutCustom = useMemo(() => {
+        if (!layout || !layout.items || layout.items.length === 0) {
+            return metadataValues.map((item) => renderMetadataItem(item));
+        }
+        // Build a map of items by ID for quick lookup (include negative/zero IDs)
+        const itemsById = new Map();
+        layout.items.forEach(item => {
+            if (item.layoutItemID !== undefined && item.layoutItemID !== null) {
+                itemsById.set(item.layoutItemID, item);
+            }
+        });
+        // Determine root items. Prefer explicit LayoutRoot items if present;
+        // otherwise fall back to items with no parent (parentID undefined or -1).
+        const hasExplicitRoot = layout.items.some(item => item.type === LayoutItemTypes.LayoutRoot);
+        const rootItems = hasExplicitRoot
+            ? layout.items.filter(item => item.type === LayoutItemTypes.LayoutRoot)
+            : layout.items.filter(item => item.parentID === undefined || item.parentID === -1);
+        // Recursive function to get children of an item. Handle parentID === -1 and undefined
+        // because some layouts use -1 for root while children use undefined.
+        const getChildren = (parentID) => {
+            if (parentID === -1) {
+                return layout.items?.filter(item => item.parentID === -1 || item.parentID === undefined) || [];
+            }
+            if (parentID === undefined) {
+                return layout.items?.filter(item => item.parentID === undefined) || [];
+            }
+            return layout.items?.filter(item => item.parentID === parentID) || [];
+        };
+        // Recursive function to render layout items with depth tracking for indentation
+        // Prevent infinite recursion by tracking visited layoutItemIDs (handles malformed layouts where an item
+        // may reference itself as a child or cycles exist).
+        const renderLayoutItem = (layoutItem, depth = 0, visited = new Set()) => {
+            const id = layoutItem.layoutItemID ?? 0;
+            if (visited.has(id))
+                return null;
+            visited.add(id);
+            // Check if this is a LayoutRoot - just render its children
+            if (layoutItem.type === LayoutItemTypes.LayoutRoot) {
+                const children = getChildren(layoutItem.layoutItemID);
+                return (_jsx(React.Fragment, { children: children.map(child => renderLayoutItem(child, depth, visited)) }, `root-${layoutItem.layoutItemID}`));
+            }
+            // Check if this is a LayoutGroup
+            else if (layoutItem.type === LayoutItemTypes.LayoutGroup && layoutItem.lgd) {
+                const children = getChildren(layoutItem.layoutItemID);
+                const groupDescriptor = layoutItem.lgd;
+                const groupTitle = groupDescriptor.caption || `Group ${layoutItem.layoutItemID}`;
+                const isCollapsed = false; // LayoutGroupDescriptor doesn't have collapsed property
+                // Apply indentation only to subgroups (depth > 0), not to root groups
+                const indentationPx = depth > 0 ? depth * 10 : 0;
+                return (_jsx("div", { style: { paddingLeft: `${indentationPx}px` }, children: _jsx(TMAccordion, { title: groupTitle, defaultCollapsed: isCollapsed, children: children.map(child => renderLayoutItem(child, depth + 1, visited)) }) }, `group-wrapper-${layoutItem.layoutItemID}`));
+            }
+            // Check if this is a LayoutControlItem (metadata field)
+            else if (layoutItem.type === LayoutItemTypes.LayoutControlItem && layoutItem.lcid) {
+                const controlDescriptor = layoutItem.lcid;
+                const mid = controlDescriptor.mid;
+                if (!mid)
+                    return null;
+                // Find the metadata value for this MID
+                const metadataItem = metadataValues.find(m => m.mid === mid);
+                if (!metadataItem)
+                    return null;
+                // Indent control items based on depth so they align under groups
+                const controlIndentPx = depth > 0 ? depth * 10 : 15;
+                return (_jsx("div", { style: { paddingLeft: `${controlIndentPx}px` }, children: renderMetadataItem(metadataItem) }, `control-${layoutItem.layoutItemID}`));
+            }
+            // Check if this is a SeparatorItem (horizontal line)
+            else if (layoutItem.type === LayoutItemTypes.SeparatorItem) {
+                return (_jsx(StyledSeparator, {}, `separator-${layoutItem.layoutItemID}`));
+            }
+            return null;
+        };
+        return (_jsx("div", { style: { width: '100%' }, children: (() => {
+                const visited = new Set();
+                return rootItems.map(item => renderLayoutItem(item, 0, visited));
+            })() }));
+    }, [layout, metadataValues, showCheckBoxes, showNullValueCheckBoxes, isReadOnly, dynDataListsToBeRefreshed, validationItems, selectedMID, isOpenDistinctValues, openChooserBySingleClick, metadataValuesOrig]);
+    const renderForm = useMemo(() => {
+        // Se currentDTD non è ancora stato caricato, non renderizzare nulla
+        if (!currentDTD) {
+            return null;
+        }
+        // Se tutti i metadata sono di sistema, renderizziamo tutti in sola lettura senza layout
+        const allSystem = metadataValues.length > 0 && metadataValues.every(item => item.md?.isSystem === 1);
+        if (allSystem) {
+            return metadataValues.map((item) => renderMetadataItem(item, true));
+        }
+        if (currentDTD?.templateTID === TemplateTIDs.WF_WIApprView && !isReadOnly) {
+            return layoutWorkItem;
+        }
+        switch (currentDTD?.id) {
+            case SystemTIDs.Drafts: return layoutDraft;
+            // case SystemTIDs.Chronology: break;
+            case SystemTIDs.DSAttachs: return layoutDsAttachs;
+            default:
+                // Se è presente un layout personalizzato, usalo, altrimenti usa il rendering standard
+                if (layout && layout.items && layout.items.length > 0) {
+                    return layoutCustom;
+                }
+                return metadataValues.map((item) => renderMetadataItem(item));
+        }
+    }, [currentDTD, metadataValues, layout, isReadOnly, showCheckBoxes, showNullValueCheckBoxes, dynDataListsToBeRefreshed, validationItems, selectedMID, isOpenDistinctValues, openChooserBySingleClick, metadataValuesOrig]);
+    return (_jsx(StyledMetadataValuesContainer, { children: !TID ?
+            _jsx(TMNothingToShow, { text: `${SDKUI_Localizator.NoDcmtSelected}.`, secondText: `${SDKUI_Localizator.MetadataSystem} - ${SDKUI_Localizator.NotAvailable}`, icon: _jsx(IconDcmtTypeSys, { fontSize: 96 }) }) :
+            _jsx(_Fragment, { children: renderForm }) }));
+};
+export default TMMetadataValues;
+//#region  Styled Components
+const StyledMetadataValuesContainer = styled.div ` 
+    display: flex; 
+    flex-direction: column; 
+    width: 100%; 
+    height: 100%; 
+    overflow: auto;
+    padding: 0 10px 10px 10px;
+`;
+const StyledRow = styled.div ` 
+    display: flex; 
+    flex-direction: row; 
+    width: 100%; 
+    gap: 5px; 
+`;
+const StyledSeparator = styled.hr `
+    width: 100%;
+    margin: 10px 0;
+    border: none;
+    border-top: 1px solid #e0e0e0;
+`;

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import { ITMEditorBase } from '../base/TMEditorBase';
+interface ITMRadioButton extends ITMEditorBase {
+    dataSource?: any[];
+    alignment?: 'flex-start' | 'flex-end' | 'space-between' | 'center' | 'space-around';
+    direction?: 'row' | 'column';
+    onValueChanged?: (e: any) => void;
+}
+declare const TMRadioButton: React.FC<ITMRadioButton>;
+export default TMRadioButton;

package/lib/components/editors/TMRadioButton.js

@@ -0,0 +1,57 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FontSize, TMColors } from '../../utils/theme';
+import styled from 'styled-components';
+import { makeID } from '../../helper/helpers';
+const StyledWrapper = styled.label `
+    color: ${props => !props.$disabled ? props.$isModifiedWhen ? TMColors.isModified : TMColors.text_normal : TMColors.disabled};
+    display: flex;
+    flex-direction: ${props => props.$direction};
+    align-items: ${props => props.$direction === 'row' ? 'center' : 'flex-start'};
+    font-size: ${props => props.$fontSize};
+    gap: ${props => props.$direction === 'row' ? '20px' : "10px"};
+`;
+const StyledRadioGroupLabel = styled.div `
+    flex: ${props => props.$flexBase};
+`;
+const StyledRadioGroupContainer = styled.div `
+    flex: ${props => 10 - props.$flexBase};
+`;
+const StyledRadioButtonWrapper = styled.div `
+    display: flex;
+    flex-direction: ${props => props.$direction};
+    align-items: ${props => props.$direction === 'row' ? 'center' : 'flex-start'};
+    justify-content: flex-start;
+    gap: ${props => props.$direction === 'row' ? '10px' : '5px'};
+`;
+const StyledRadioButtoncontainer = styled.div `
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    gap: 5px;
+    height: 18px;
+`;
+const StyledRadioButton = styled.input `
+   accent-color: ${props => !props.$disabled ? props.$isModifiedWhen ? TMColors.isModified : TMColors.primary : TMColors.disabled}; 
+   cursor: ${props => !props.$disabled && 'pointer'};
+`;
+const StyledradioButtonLabel = styled.label `
+    font-size: ${props => props.$fontSize};
+    color: ${props => !props.$disabled ? props.$isModifiedWhen ? TMColors.isModified : TMColors.text_normal : TMColors.disabled};
+    user-select: none;
+    width: 100%;
+    cursor: ${props => !props.$disabled && 'pointer'};
+    &:focus{
+        outline: none;
+        background-image: linear-gradient(white, #E4E9F7);
+        border-bottom: 2px solid ;
+        border-bottom-color: ${props => !props.$isModifiedWhen ? TMColors.primary : TMColors.isModified};
+    }
+`;
+const TMRadioButton = ({ isModifiedWhen, flexBase = 1, elementStyle, label, value, fontSize = FontSize.defaultFontSize, dataSource = [], direction = 'row', onValueChanged, disabled = false }) => {
+    const renderedRadioButtons = () => {
+        return (_jsx(StyledRadioButtonWrapper, { "$direction": direction, children: dataSource.map((data, index) => (_jsxs(StyledRadioButtoncontainer, { children: [_jsx(StyledRadioButton, { "$disabled": disabled, tabIndex: -1, name: makeID(8), checked: value === data.value ? true : false, onChange: () => onValueChanged(data.value), disabled: disabled, type: 'radio' }), _jsxs(StyledradioButtonLabel, { tabIndex: 0, onKeyDown: (e) => e.code === 'Space' && onValueChanged(data.value), onClick: () => onValueChanged(data.value), "$isModifiedWhen": isModifiedWhen, "$fontSize": fontSize, "$disabled": disabled, children: [" ", data.display, " "] })] }, index))) }));
+    };
+    return (_jsx("div", { style: elementStyle, children: _jsxs(StyledWrapper, { "$isModifiedWhen": isModifiedWhen, "$direction": direction, "$disabled": disabled, "$fontSize": fontSize, style: { display: 'flex', flexDirection: direction, alignItems: direction === 'row' ? 'center' : 'flex-start', fontSize: fontSize, gap: direction === 'row' ? '20px' : "10px" }, children: [label && _jsx(StyledRadioGroupLabel, { "$flexBase": flexBase, children: label }), _jsx(StyledRadioGroupContainer, { "$flexBase": flexBase, children: renderedRadioButtons() })] }) }));
+};
+export default TMRadioButton;