@topconsultnpm/sdkui-react 6.19.0-dev1.10

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

@@ -0,0 +1,573 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { useCallback, useEffect, useState } from 'react';
+import { DcmtTypeListCacheService, SDK_Globals, DataColumnTypes, MetadataFormats, SystemMIDs, MetadataDataDomains, RelationCacheService, RelationTypes } from "@topconsultnpm/sdk-ts";
+import { genUniqueId, IconBackhandIndexPointingRight, IconFolder } from '../../../helper';
+import { TMColors } from '../../../utils/theme';
+import { StyledDivHorizontal, StyledBadge } from '../../base/Styled';
+import TMTreeView from '../../base/TMTreeView';
+import { TMWaitPanel } from '../../base/TMWaitPanel';
+import { TMUserIdViewer } from '../../choosers/TMUserChooser';
+import TMDataListItemViewer from '../../viewers/TMDataListItemViewer';
+import TMDcmtIcon from './TMDcmtIcon';
+// ============================================================================
+// UTILITY FUNCTIONS 
+// ============================================================================
+/**
+ * Check if document type has detail relations
+ */
+export const hasDetailRelations = async (mTID) => {
+    if (!mTID)
+        return false;
+    const allRelations = await RelationCacheService.GetAllAsync();
+    const rdlOneToMany = allRelations?.filter(o => o.masterTID == mTID && o.relationType == RelationTypes.OneToMany) ?? [];
+    const rdlManyToMany = allRelations?.filter(o => o.relationType == RelationTypes.ManyToMany && (o.masterTID == mTID || o.detailTID == mTID)) ?? [];
+    return rdlManyToMany.length > 0 || rdlOneToMany.length > 0;
+};
+/**
+ * Check if document type has master relations
+ */
+export const hasMasterRelations = async (dTID) => {
+    if (!dTID)
+        return false;
+    const allRelations = await RelationCacheService.GetAllAsync();
+    const rdlOneToMany = allRelations?.filter(o => o.detailTID == dTID && o.relationType == RelationTypes.OneToMany) ?? [];
+    const rdlManyToMany = allRelations?.filter(o => o.relationType == RelationTypes.ManyToMany && (o.masterTID == dTID || o.detailTID == dTID)) ?? [];
+    return rdlManyToMany.length > 0 || rdlOneToMany.length > 0;
+};
+/**
+ * Check if relation is ManyToMany
+ */
+const isManyToManyRelation = async (relationID) => {
+    if (!relationID)
+        return false;
+    const allRelations = await RelationCacheService.GetAllAsync();
+    const rdlManyToMany = allRelations.filter(o => o.relationType == RelationTypes.ManyToMany && o.id === relationID) ?? [];
+    return rdlManyToMany.length > 0;
+};
+/**
+ * Get metadata keys excluding system metadata
+ */
+function getMetadataKeys(obj) {
+    if (!obj)
+        return [];
+    const keys = Object.keys(obj);
+    const sysMIDs = Object.values(SystemMIDs).map(o => o.toUpperCase());
+    return keys.filter(k => obj?.[k].value && !sysMIDs.includes(k)).filter(o => o !== "rowIndex" && o !== "ISLEXPROT");
+}
+/**
+ * Get display value keys for a document (max 5, prioritize SYS_Abstract)
+ */
+function getDcmtDisplayValue(obj) {
+    const mdKeys = getMetadataKeys(obj);
+    if (mdKeys.includes("SYS_Abstract"))
+        return ["SYS_Abstract"];
+    return mdKeys.slice(0, 5);
+}
+/**
+ * Get display value formatted by column type
+ */
+const getDisplayValueByColumn = (col, value) => {
+    if (!value)
+        return value;
+    if (!col)
+        return value;
+    if (col.dataType === DataColumnTypes.Text)
+        return value;
+    const format = MetadataFormats[(col.extendedProperties?.["Format"] ?? "None")];
+    const formatCulture = col.extendedProperties?.["FormatCulture"] ?? window.navigator.language;
+    if (col.dataType === DataColumnTypes.DateTime) {
+        const date = new Date(value);
+        switch (format) {
+            case MetadataFormats.ShortDate: return date.toLocaleString(formatCulture, formatCulture == "it-IT" ? { year: "numeric", month: "2-digit", day: "2-digit" } : { dateStyle: 'short' });
+            case MetadataFormats.ShortTime: return date.toLocaleString(formatCulture, { timeStyle: 'short' });
+            case MetadataFormats.ShortDateLongTime: return date.toLocaleString(formatCulture, formatCulture == "it-IT" ? { year: "numeric", month: "2-digit", day: "2-digit", hour: '2-digit', minute: '2-digit', second: '2-digit' } : { dateStyle: 'short', timeStyle: 'medium' }).replace(',', '');
+            case MetadataFormats.ShortDateShortTime: return date.toLocaleString(formatCulture, formatCulture == "it-IT" ? { year: "numeric", month: "2-digit", day: "2-digit", hour: '2-digit', minute: '2-digit' } : { dateStyle: 'short', timeStyle: 'short' }).replace(',', '');
+            case MetadataFormats.LongDate: return date.toLocaleString(formatCulture, { weekday: "long", year: "numeric", month: "long", day: "numeric" });
+            case MetadataFormats.LongTime: return date.toLocaleString(formatCulture, { timeStyle: 'medium' });
+            case MetadataFormats.LongDateLongTime: return date.toLocaleString(formatCulture, { weekday: "long", year: "numeric", month: "long", day: "numeric", hour: '2-digit', minute: '2-digit', second: '2-digit' });
+            case MetadataFormats.LongDateShortTime: return date.toLocaleString(formatCulture, { weekday: "long", year: "numeric", month: "long", day: "numeric", hour: '2-digit', minute: '2-digit' });
+            default: return date.toLocaleString(formatCulture, { dateStyle: 'short' });
+        }
+    }
+    if (col.dataType === DataColumnTypes.Number) {
+        return value.toLocaleString(formatCulture, { useGrouping: format == MetadataFormats.NumberWithThousandsSeparator });
+    }
+    if (format == MetadataFormats.None)
+        return value;
+    if (format == MetadataFormats.CurrencyEuro)
+        return value.toLocaleString(formatCulture, { style: 'currency', currency: "EUR" });
+    if (format == MetadataFormats.CurrencyDollar)
+        return value.toLocaleString(formatCulture, { style: 'currency', currency: "USD" });
+    if (format == MetadataFormats.CurrencyPound)
+        return value.toLocaleString(formatCulture, { style: 'currency', currency: "GBP" });
+    if (format == MetadataFormats.CurrencyYen)
+        return value.toLocaleString(formatCulture, { style: 'currency', currency: "JPY" });
+    return value;
+};
+/**
+ * Convert SearchResultDescriptor to structured data source with metadata
+ */
+const searchResultToDataSource = async (searchResult, hideSysMetadata) => {
+    const rows = searchResult?.dtdResult?.rows ?? [];
+    const tid = searchResult?.fromTID;
+    const dtd = await DcmtTypeListCacheService.GetAsync(tid);
+    const output = [];
+    for (let index = 0; index < rows.length; index++) {
+        const item = { rowIndex: index };
+        const row = rows[index];
+        for (let i = 0; i < row.length; i++) {
+            const mid = Number(searchResult?.dtdResult?.columns?.[i]?.extendedProperties?.["MID"] ?? "0");
+            if (hideSysMetadata && mid < 100)
+                continue;
+            let key = searchResult?.dtdResult?.columns?.[i].caption ?? '';
+            if (mid <= 100)
+                key = key.toUpperCase();
+            const value = row[i];
+            const md = dtd?.metadata?.find(o => o.id == mid);
+            item[key] = {
+                md: md,
+                value: getDisplayValueByColumn(searchResult?.dtdResult?.columns?.[i], value)
+            };
+        }
+        output.push(item);
+    }
+    return output;
+};
+const TMRelationViewer = ({ inputDcmts, isForMaster = false, showCurrentDcmtIndicator = true, allowShowZeroDcmts = true, initialShowZeroDcmts = false, allowedTIDs, allowMultipleSelection = false, focusedItem, selectedItems, onFocusedItemChanged, onSelectedItemsChanged, onDocumentDoubleClick, customItemRender, maxDepthLevel = 2, invertMasterNavigation = true, }) => {
+    // State
+    const [dcmtTypes, setDcmtTypes] = useState([]);
+    const [treeData, setTreeData] = useState([]);
+    const [showZeroDcmts, setShowZeroDcmts] = useState(initialShowZeroDcmts);
+    // Wait Panel State (only used if allowWaitPanel is true)
+    const [showWaitPanel, setShowWaitPanel] = useState(false);
+    const [waitPanelTextPrimary, setWaitPanelTextPrimary] = useState('');
+    const [waitPanelValuePrimary, setWaitPanelValuePrimary] = useState(0);
+    const [waitPanelMaxValuePrimary, setWaitPanelMaxValuePrimary] = useState(0);
+    const [abortController] = useState(new AbortController());
+    // Ref to track last loaded input to prevent unnecessary reloads
+    const lastLoadedInputRef = React.useRef('');
+    /**
+     * Generate a stable key from inputDcmts to detect real changes
+     */
+    const getInputKey = useCallback(() => {
+        if (!inputDcmts || inputDcmts.length === 0)
+            return '';
+        return inputDcmts.map(d => `${d.TID}-${d.DID}`).join('|') + `|${isForMaster}`;
+    }, [inputDcmts, isForMaster]);
+    // Load document types
+    useEffect(() => {
+        const loadDcmtTypes = async () => {
+            const types = await DcmtTypeListCacheService.GetAllWithoutMetadataAsync() || [];
+            setDcmtTypes(types);
+        };
+        loadDcmtTypes();
+    }, []);
+    useEffect(() => {
+        setShowZeroDcmts(initialShowZeroDcmts);
+    }, [initialShowZeroDcmts]);
+    /**
+     * Recursively retrieve detail documents (adapted from TMMasterDetailDcmts.tsx)
+     */
+    const getDetailDcmtsAsync = useCallback(async (mTID, mDID, maxLevel) => {
+        const items = [];
+        if (!mTID)
+            return [];
+        if (!mDID)
+            return [];
+        if (maxLevel <= 0)
+            return [];
+        const dcmtTypeHasRel = await hasDetailRelations(mTID);
+        if (!dcmtTypeHasRel)
+            return [];
+        try {
+            const searchEngine = SDK_Globals.tmSession?.NewSearchEngine();
+            if (!searchEngine)
+                return items;
+            const results = await searchEngine.GetAllDetailDcmtsAsync(mTID, mDID) ?? [];
+            for (const searchResult of results) {
+                // Skip if allowedTIDs is set and this TID is not allowed
+                if (allowedTIDs && searchResult.fromTID && !allowedTIDs.includes(searchResult.fromTID)) {
+                    continue;
+                }
+                const containerGUID = genUniqueId();
+                const dtd = await DcmtTypeListCacheService.GetAsync(searchResult.fromTID);
+                const newDcmtTypeContainer = {
+                    tid: searchResult.fromTID,
+                    dtd: dtd,
+                    did: undefined,
+                    key: `${searchResult.fromTID}_${searchResult.relationID}_${mTID}_${mDID}_${containerGUID}`,
+                    name: searchResult.fromName || dtd?.name || `TID: ${searchResult.fromTID}`,
+                    isContainer: true,
+                    relationId: searchResult.relationID,
+                    isManyToMany: await isManyToManyRelation(searchResult.relationID),
+                    searchResult: [searchResult],
+                    isZero: (searchResult.dcmtsFound ?? 0) <= 0,
+                    itemsCount: (searchResult.dcmtsFound ?? 0),
+                    expanded: false,
+                    hidden: false
+                };
+                const source = await searchResultToDataSource(searchResult);
+                if (source && source.length > 0) {
+                    const dcmtDetails = [];
+                    for (const row of source) {
+                        const rowGUID = genUniqueId();
+                        const tid = row?.TID?.value;
+                        const did = row?.DID?.value;
+                        dcmtDetails.push({
+                            tid: tid,
+                            did: did,
+                            key: `${tid}_${did}_${searchResult.relationID}_${mTID}_${mDID}_${rowGUID}`,
+                            isDcmt: true,
+                            isContainer: false,
+                            isZero: false, // Documents are never zero (they exist)
+                            values: row,
+                            searchResult: [searchResult],
+                            itemsCount: 0,
+                            expanded: false,
+                            hidden: false,
+                            name: row?.SYS_Abstract?.value || row?.SYS_SUBJECT?.value || `Documento ${did}`
+                            // Note: Recursive loading on expansion is handled by calculateItemsForNode
+                        });
+                    }
+                    newDcmtTypeContainer.items = dcmtDetails;
+                }
+                items.push(newDcmtTypeContainer);
+            }
+        }
+        catch (error) {
+            console.error('❌ Error loading detail documents:', error);
+        }
+        return items;
+    }, [allowedTIDs]);
+    /**
+     * Recursively retrieve master documents
+     */
+    const getMasterDcmtsAsync = useCallback(async (dTID, dDID, maxLevel) => {
+        const items = [];
+        if (!dTID)
+            return [];
+        if (!dDID)
+            return [];
+        if (maxLevel <= 0)
+            return [];
+        const dcmtTypeHasRel = await hasMasterRelations(dTID);
+        if (!dcmtTypeHasRel)
+            return [];
+        try {
+            const searchEngine = SDK_Globals.tmSession?.NewSearchEngine();
+            if (!searchEngine)
+                return items;
+            const results = await searchEngine.GetAllMasterDcmtsAsync(dTID, dDID) ?? [];
+            for (const searchResult of results) {
+                // Skip if allowedTIDs is set and this TID is not allowed
+                if (allowedTIDs && searchResult.fromTID && !allowedTIDs.includes(searchResult.fromTID)) {
+                    continue;
+                }
+                const containerGUID = genUniqueId();
+                const dtd = await DcmtTypeListCacheService.GetAsync(searchResult.fromTID);
+                const newDcmtTypeContainer = {
+                    tid: searchResult.fromTID,
+                    dtd: dtd,
+                    did: undefined,
+                    key: `${searchResult.fromTID}_${searchResult.relationID}_${dTID}_${dDID}_${containerGUID}`,
+                    name: searchResult.fromName || dtd?.name || `TID: ${searchResult.fromTID}`,
+                    isContainer: true,
+                    relationId: searchResult.relationID,
+                    isManyToMany: await isManyToManyRelation(searchResult.relationID),
+                    searchResult: [searchResult],
+                    isZero: (searchResult.dcmtsFound ?? 0) <= 0,
+                    itemsCount: (searchResult.dcmtsFound ?? 0),
+                    expanded: false,
+                    hidden: false
+                };
+                const source = await searchResultToDataSource(searchResult);
+                if (source && source.length > 0) {
+                    const dcmtMasters = [];
+                    for (const row of source) {
+                        const rowGUID = genUniqueId();
+                        const tid = row?.TID?.value;
+                        const did = row?.DID?.value;
+                        dcmtMasters.push({
+                            tid: tid,
+                            did: did,
+                            key: `${tid}_${did}_${searchResult.relationID}_${dTID}_${dDID}_${rowGUID}`,
+                            isDcmt: true,
+                            isContainer: false,
+                            isZero: false, // Documents are never zero (they exist)
+                            values: row,
+                            searchResult: [searchResult],
+                            itemsCount: 0,
+                            expanded: false,
+                            hidden: false,
+                            name: row?.SYS_Abstract?.value || row?.SYS_SUBJECT?.value || `Documento ${did}`
+                            // Note: Recursive loading on expansion is handled by calculateItemsForNode
+                        });
+                    }
+                    newDcmtTypeContainer.items = dcmtMasters;
+                }
+                items.push(newDcmtTypeContainer);
+            }
+        }
+        catch (error) {
+            console.error('❌ Error loading master documents:', error);
+        }
+        return items;
+    }, [allowedTIDs]);
+    /**
+     * Update hidden property based on showZeroDcmts (original simple logic)
+     */
+    const updateHiddenProperty = useCallback((nodes) => {
+        return nodes.map(node => {
+            const updatedNode = { ...node, hidden: !showZeroDcmts && node.isZero };
+            if (node.items) {
+                updatedNode.items = updateHiddenProperty(node.items);
+            }
+            return updatedNode;
+        });
+    }, [showZeroDcmts]);
+    /**
+     * Main data loading function
+     */
+    const loadData = useCallback(async () => {
+        if (!inputDcmts || inputDcmts.length === 0 || dcmtTypes.length === 0) {
+            setTreeData([]);
+            return;
+        }
+        const tree = [];
+        let processedCount = 0;
+        for (const dcmt of inputDcmts) {
+            // Check for abort
+            if (abortController.signal.aborted) {
+                console.warn(`⚠️ Operation aborted. Processed ${processedCount} documents`);
+                break;
+            }
+            // Update wait panel progress
+            setWaitPanelTextPrimary(`Caricamento correlazione ${processedCount + 1} di ${inputDcmts.length}`);
+            const searchEngine = SDK_Globals.tmSession?.NewSearchEngine();
+            if (!searchEngine)
+                continue;
+            // Load document metadata
+            const result = await searchEngine.GetMetadataAsync(dcmt.TID, dcmt.DID, false);
+            const dtd = await DcmtTypeListCacheService.GetAsync(dcmt.TID);
+            // Parse document values
+            const docValues = await searchResultToDataSource(result);
+            const docRow = docValues.length > 0 ? docValues[0] : undefined;
+            // Generate unique GUID for this container
+            const containerGUID = genUniqueId();
+            // ========================================================================
+            // MODALITÀ MASTER CON NAVIGAZIONE ORIGINALE (invertMasterNavigation=false)
+            // ========================================================================
+            if (isForMaster && !invertMasterNavigation) {
+                // Carica i master documents
+                const masterDocs = await getMasterDcmtsAsync(dcmt.TID, dcmt.DID, maxDepthLevel);
+                // Per ogni master, carica i suoi detail (incluso il documento corrente)
+                for (const masterContainer of masterDocs) {
+                    if (!masterContainer.items)
+                        continue;
+                    // Per ogni master document nel container, carica i detail
+                    for (const masterDoc of masterContainer.items) {
+                        if (masterDoc.tid && masterDoc.did) {
+                            // Carica i detail del master (incluso il documento di partenza)
+                            const detailDocs = await getDetailDcmtsAsync(masterDoc.tid, masterDoc.did, 1);
+                            masterDoc.items = detailDocs;
+                            masterDoc.itemsCount = detailDocs.length;
+                            masterDoc.isLoaded = true;
+                        }
+                    }
+                }
+                // Aggiungi i master come root
+                tree.push(...masterDocs);
+            }
+            // ========================================================================
+            // MODALITÀ STANDARD (detail o master invertito)
+            // ========================================================================
+            else {
+                // Load related documents (detail or master based on isForMaster flag)
+                const relatedDocs = isForMaster
+                    ? await getMasterDcmtsAsync(dcmt.TID, dcmt.DID, maxDepthLevel)
+                    : await getDetailDcmtsAsync(dcmt.TID, dcmt.DID, maxDepthLevel);
+                // Create document node WITH VALUES
+                const docNode = {
+                    key: `${isForMaster ? 'detail' : 'master'}-doc-${dcmt.TID}-${dcmt.DID}-${containerGUID}`,
+                    name: docRow?.SYS_Abstract?.value || docRow?.SYS_SUBJECT?.value || `Documento ${isForMaster ? 'Dettaglio' : 'Master'}`,
+                    tid: dcmt.TID,
+                    did: dcmt.DID,
+                    isDcmt: true,
+                    isContainer: false,
+                    expanded: tree.length === 0,
+                    isZero: dcmt.DID === 0,
+                    isMaster: !isForMaster,
+                    isRoot: true,
+                    isLoaded: true,
+                    hidden: false,
+                    values: docRow,
+                    searchResult: result ? [result] : [],
+                    items: relatedDocs,
+                    itemsCount: relatedDocs.length
+                };
+                // Create type container with unique key
+                const typeContainer = {
+                    key: `${isForMaster ? 'detail' : 'master'}-type-${dcmt.TID}-${containerGUID}`,
+                    name: result?.fromName || dtd?.name || `TID: ${dcmt.TID}`,
+                    tid: dcmt.TID,
+                    dtd,
+                    isContainer: true,
+                    isRoot: true,
+                    isLoaded: true,
+                    isZero: false, // Type container is never zero (contains documents)
+                    searchResult: result ? [result] : [],
+                    items: [docNode],
+                    itemsCount: 1,
+                    expanded: tree.length === 0
+                };
+                tree.push(typeContainer);
+            }
+            // Update progress counter
+            processedCount++;
+            setWaitPanelValuePrimary(processedCount);
+        }
+        setTreeData(updateHiddenProperty(tree));
+    }, [inputDcmts, dcmtTypes, maxDepthLevel, isForMaster, invertMasterNavigation, getDetailDcmtsAsync, getMasterDcmtsAsync, abortController, updateHiddenProperty]);
+    /**
+     * Load data when inputs change
+     */
+    useEffect(() => {
+        if (!inputDcmts || inputDcmts.length === 0 || dcmtTypes.length === 0) {
+            setTreeData([]);
+            lastLoadedInputRef.current = '';
+            return;
+        }
+        // Generate current input key
+        const currentKey = getInputKey();
+        // Skip if we already loaded this exact data
+        if (currentKey === lastLoadedInputRef.current && treeData.length > 0) {
+            return;
+        }
+        // Mark as loading this key
+        lastLoadedInputRef.current = currentKey;
+        setShowWaitPanel(true);
+        setWaitPanelMaxValuePrimary(inputDcmts.length);
+        setWaitPanelValuePrimary(0);
+        // Call loadData and use .then() instead of await to allow React to render
+        loadData().then(() => {
+            setShowWaitPanel(false);
+            setWaitPanelTextPrimary('');
+            setWaitPanelMaxValuePrimary(0);
+            setWaitPanelValuePrimary(0);
+        });
+    }, [inputDcmts, dcmtTypes, maxDepthLevel, getInputKey, loadData, treeData.length]);
+    /**
+     * Update tree when showZeroDcmts changes
+     */
+    useEffect(() => {
+        setTreeData(prevData => updateHiddenProperty(prevData));
+    }, [showZeroDcmts, updateHiddenProperty]);
+    /**
+     * Calculate items for node when expanded (lazy loading)
+     */
+    const calculateItemsForNode = useCallback(async (node) => {
+        // If it's a document, return existing items
+        if (node.isDcmt)
+            return node.items;
+        // If container is already loaded, return items
+        if (node.isLoaded)
+            return node.items;
+        // Load sub-documents for each document in the container
+        const newItems = [];
+        for (const dcmt of node.items ?? []) {
+            const item = { ...dcmt }; // Create a new reference
+            if (item.tid && item.did && !item.isLoaded) {
+                // Nella modalità originale (invertMasterNavigation=false), 
+                // i documenti detail non devono caricare i master come figli
+                if (isForMaster && !invertMasterNavigation) {
+                    // Carica i detail dei detail (navigazione naturale detail→detail)
+                    const loadedItems = await getDetailDcmtsAsync(item.tid, item.did, 1);
+                    item.items = updateHiddenProperty(loadedItems);
+                }
+                else {
+                    // Modalità standard o invertita
+                    const loadedItems = isForMaster
+                        ? await getMasterDcmtsAsync(item.tid, item.did, 1)
+                        : await getDetailDcmtsAsync(item.tid, item.did, 1);
+                    item.items = updateHiddenProperty(loadedItems);
+                }
+                item.isLoaded = true;
+            }
+            newItems.push(item);
+        }
+        return newItems;
+    }, [isForMaster, invertMasterNavigation, getDetailDcmtsAsync, getMasterDcmtsAsync, updateHiddenProperty]);
+    /**
+     * Default item renderer with metadata display (adapted from TMMasterDetailDcmts.tsx)
+     */
+    const defaultItemRender = useCallback((item) => {
+        if (!item)
+            return _jsx("span", { children: "-" });
+        const handleDoubleClick = (e) => {
+            if (item.isContainer || !item.tid || !item.did)
+                return;
+            e.stopPropagation();
+            onDocumentDoubleClick?.(item.tid, item.did, item.name);
+        };
+        // Container rendering
+        if (item.isContainer || !item.isDcmt) {
+            return (_jsxs("div", { style: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: '10px',
+                    height: '32px',
+                    padding: '6px 0',
+                    opacity: item.isZero ? 0.4 : 1,
+                    transition: 'opacity 0.2s ease-in-out'
+                }, children: [_jsx("div", { style: { position: 'relative' }, children: _jsx(IconFolder, { color: item.isManyToMany ? '#ff8f44' : TMColors.iconLight, fontSize: 24 }) }), _jsxs(StyledDivHorizontal, { style: { gap: 5, overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis' }, children: [_jsx("p", { style: {
+                                    whiteSpace: 'nowrap',
+                                    textOverflow: 'ellipsis',
+                                    fontSize: '1rem',
+                                    color: 'inherit'
+                                }, children: item.name }), _jsx(StyledBadge, { "$backgroundColor": TMColors.info, children: item.items?.length ?? 0 })] })] }));
+        }
+        // Document rendering with full metadata display
+        return (_jsxs("div", { onDoubleClick: handleDoubleClick, style: {
+                minWidth: '90px',
+                width: '100%',
+                display: 'flex',
+                marginLeft: '5px',
+                marginTop: '5px',
+                marginBottom: '5px',
+                gap: '15px',
+                alignItems: 'center',
+                cursor: 'pointer',
+                userSelect: 'none',
+                opacity: item.isZero ? 0.4 : 1,
+                transition: 'opacity 0.2s ease-in-out'
+            }, children: [item.did && showCurrentDcmtIndicator && item.did === inputDcmts?.[0].DID ? _jsx(IconBackhandIndexPointingRight, { fontSize: 22, overflow: 'visible' }) : _jsx(_Fragment, {}), item.values && (_jsx(TMDcmtIcon, { tid: item.values?.TID?.value, did: item.values?.DID?.value, fileExtension: item.values?.FILEEXT?.value, fileCount: item.values?.FILECOUNT?.value, isLexProt: item.values?.IsLexProt?.value, isMail: item.values?.ISMAIL?.value, isShared: item.values?.ISSHARED?.value, isSigned: item.values?.ISSIGNED?.value, downloadMode: 'openInNewWindow' })), item.values && (_jsx(StyledDivHorizontal, { style: {
+                        whiteSpace: 'nowrap',
+                        textOverflow: 'ellipsis',
+                        fontSize: '1rem',
+                    }, children: getDcmtDisplayValue(item.values).map((key, index) => {
+                        const md = item.values?.[key]?.md;
+                        const value = item.values?.[key]?.value;
+                        return (_jsxs(StyledDivHorizontal, { children: [index > 0 && _jsx("p", { style: { marginRight: '2px' }, children: ";" }), md?.dataDomain == MetadataDataDomains.DataList ? (_jsx(TMDataListItemViewer, { dataListId: md.dataListID, viewMode: md.dataListViewMode, value: value })) : md?.dataDomain == MetadataDataDomains.UserID ? (_jsx(TMUserIdViewer, { userId: value, showIcon: true, noneSelectionText: '' })) : (_jsx("p", { style: { fontSize: '1rem' }, children: value }))] }, `${key}_${index}`));
+                    }) }))] }));
+    }, [onDocumentDoubleClick]);
+    /**
+     * Handle focused item changed
+     */
+    const handleFocusedItemChanged = useCallback((item) => {
+        onFocusedItemChanged?.(item);
+    }, [onFocusedItemChanged]);
+    /**
+     * Handle selected items changed
+     */
+    const handleSelectedItemsChanged = useCallback((items) => {
+        onSelectedItemsChanged?.(items);
+    }, [onSelectedItemsChanged]);
+    if (showWaitPanel) {
+        return _jsx("div", { style: { padding: '20px', textAlign: 'center' }, children: _jsx(TMWaitPanel, { title: 'Caricamento documenti dettaglio', showPrimary: true, textPrimary: waitPanelTextPrimary, valuePrimary: waitPanelValuePrimary, maxValuePrimary: waitPanelMaxValuePrimary, isCancelable: true, abortController: abortController, onAbortClick: (abortController) => { setTimeout(() => { abortController?.abort(); }, 1000); } }) });
+    }
+    if (treeData.length === 0) {
+        return _jsx("div", { style: { padding: '20px', textAlign: 'center', color: '#666' }, children: "Nessuna relazione disponibile." });
+    }
+    return (_jsx(TMTreeView, { dataSource: treeData, itemRender: customItemRender || defaultItemRender, calculateItemsForNode: calculateItemsForNode, onDataChanged: setTreeData, focusedItem: focusedItem, onFocusedItemChanged: handleFocusedItemChanged, allowMultipleSelection: allowMultipleSelection, selectedItems: selectedItems, onSelectionChanged: handleSelectedItemsChanged }));
+};
+export default TMRelationViewer;

package/lib/components/features/search/TMSavedQueryForm.d.ts

@@ -0,0 +1,9 @@
+import { FC } from 'react';
+import { QueryDescriptor, SavedQueryDescriptor } from '@topconsultnpm/sdk-ts';
+import { ITMSaveFormProps } from '../../../ts';
+interface ISavedQueryFormProps extends ITMSaveFormProps<SavedQueryDescriptor> {
+    qd?: QueryDescriptor;
+    isAdvancedSearch?: boolean;
+}
+declare const TMSavedQueryForm: FC<ISavedQueryFormProps>;
+export default TMSavedQueryForm;

package/lib/components/features/search/TMSavedQueryForm.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ObjectClasses, PlatformObjectValidator, SharingModes, SDK_Localizator, ValidationItem, ResultTypes, TMPropertyNames, SearchEngine } from '@topconsultnpm/sdk-ts';
+import { LocalizeSharingModes } from '../../../helper/Enum_Localizator';
+import { deepCompare, SDKUI_Localizator } from '../../../helper';
+import { SaveFormOptions, useSaveForm } from '../../../hooks/useForm';
+import { FormModes } from '../../../ts';
+import TMLayoutContainer, { TMLayoutItem } from '../../base/TMLayout';
+import TMUserChooser from '../../choosers/TMUserChooser';
+import TMCheckBox from '../../editors/TMCheckBox';
+import TMRadioButton from '../../editors/TMRadioButton';
+import TMTextBox from '../../editors/TMTextBox';
+import TMSaveForm from '../../forms/TMSaveForm';
+const TMSavedQueryForm = ({ id, qd, isAdvancedSearch = false, title, width, height, onSaved, onCancel, onClose, onStatusChanged, isModal, formMode = FormModes.Update, showBackButton }) => {
+    const validator = async (d) => {
+        let vil = [];
+        if (!d.name)
+            vil.push(new ValidationItem(ResultTypes.ERROR, "name", `${SDK_Localizator.RequiredField}`));
+        else if (!PlatformObjectValidator.IsValidObjectName(d.name))
+            vil.push(new ValidationItem(ResultTypes.ERROR, "name", `${SDK_Localizator.InvalidName}`));
+        return vil;
+    };
+    const sfo = new SaveFormOptions();
+    sfo.objClass = ObjectClasses.SavedQuery;
+    const customizeFormData = (d) => { d.qd = qd; d.isEasyWhere = isAdvancedSearch ? 0 : 1; return d; };
+    const { formData, setFormData, formDataOrig, validationItems, exception, saveDataAsync } = useSaveForm(formMode, id, sfo, validator, onSaved, onStatusChanged, customizeFormData);
+    const isModified = () => {
+        let data = { ...formData };
+        data.qd = SearchEngine.NormalizeQueryDescriptor(data.qd);
+        let dataOrig = { ...formDataOrig };
+        dataOrig.qd = SearchEngine.NormalizeQueryDescriptor(dataOrig.qd);
+        return !deepCompare(data, dataOrig);
+    };
+    return (_jsx(TMSaveForm, { id: id, title: title, isModal: isModal, onClose: onClose, onCancel: onCancel, formMode: formMode, exception: exception, hasNavigation: false, width: width, height: height, showBackButton: showBackButton, validationItems: validationItems, onUndo: () => { setFormData(customizeFormData(formDataOrig)); }, onSaveAsync: async () => { await saveDataAsync(); onClose?.(); }, isModified: isModified(), children: _jsx(TMLayoutContainer, { direction: 'vertical', children: _jsx(TMLayoutItem, { height: 'max-content', children: _jsxs(TMLayoutContainer, { gap: 5, children: [_jsx(TMLayoutItem, { height: 'max-content', children: _jsx(TMTextBox, { value: formData?.name ?? '', label: SDKUI_Localizator.Name, isModifiedWhen: formData?.name !== formDataOrig?.name, validationItems: validationItems?.filter(o => o.PropertyName === TMPropertyNames.entityName), onValueChanged: (e) => { formData && setFormData({ ...formData, name: e.target.value }); } }) }), _jsx(TMLayoutItem, { height: 'max-content', children: _jsx(TMTextBox, { value: formData?.description ?? '', label: SDKUI_Localizator.Description, isModifiedWhen: formData?.description !== formDataOrig?.description, onValueChanged: (e) => { formData && setFormData({ ...formData, description: e.target.value }); } }) }), _jsx(TMLayoutItem, { height: 'max-content', children: _jsx(TMCheckBox, { value: formData?.runSearchWhenSelected ?? 0, label: 'Eseguire immediatamente la ricerca quando viene selezionata', isModifiedWhen: formData?.runSearchWhenSelected !== formDataOrig?.runSearchWhenSelected, onValueChanged: (newValue) => { setFormData({ ...formData, runSearchWhenSelected: newValue }); } }) }), _jsx(TMLayoutItem, { height: 'max-content', children: _jsx(TMRadioButton, { label: 'Condivisione', dataSource: [
+                                    { value: SharingModes.Private, display: LocalizeSharingModes(SharingModes.Private) },
+                                    { value: SharingModes.Public, display: LocalizeSharingModes(SharingModes.Public) },
+                                    { value: SharingModes.Shared, display: LocalizeSharingModes(SharingModes.Shared) }
+                                ], value: formData?.sharingMode, isModifiedWhen: formData?.sharingMode !== formDataOrig?.sharingMode, onValueChanged: (newValue) => setFormData({ ...formData, sharingMode: newValue }) }) }), _jsx(TMLayoutItem, { children: _jsx(TMUserChooser, { allowMultipleSelection: true, values: formData?.sharingUserIDs, label: SDKUI_Localizator.UserName, placeHolder: SDKUI_Localizator.NoneSelection, disabled: formData?.sharingMode !== SharingModes.Shared, 
+                                // isModifiedWhen={!MiscHelper.IntArraysAreEquals(value?.tiDs, valueOrig?.tiDs)}
+                                onValueChanged: (newValue) => setFormData({ ...formData, sharingUserIDs: newValue }) }) })] }) }) }) }));
+};
+export default TMSavedQueryForm;

package/lib/components/features/search/TMSavedQuerySelector.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import { SavedQueryDescriptor } from '@topconsultnpm/sdk-ts';
+export declare const getTooltipBySqd: (sqd: SavedQueryDescriptor | undefined) => import("react/jsx-runtime").JSX.Element | null;
+interface ITMSavedQuerySelectorProps {
+    height?: string;
+    items?: SavedQueryDescriptor[];
+    selectedId?: number;
+    allowShowSearch?: boolean;
+    manageDefault?: boolean;
+    onItemClick?: (sqd: SavedQueryDescriptor) => void;
+    onDeleted?: (sqd: SavedQueryDescriptor) => void;
+    onFavoritesAdded?: (sqd: SavedQueryDescriptor) => void;
+    onRefreshData?: () => void;
+}
+declare const TMSavedQuerySelector: React.MemoExoticComponent<({ items, selectedId, allowShowSearch, height, manageDefault, onItemClick, onDeleted, onFavoritesAdded, onRefreshData }: ITMSavedQuerySelectorProps) => import("react/jsx-runtime").JSX.Element>;
+export default TMSavedQuerySelector;