@topconsultnpm/sdkui-react 6.22.0-dev2.45 → 6.22.0-dev2.46

package/lib/components/base/TMDataGrid.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
-import styled, { css } from 'styled-components';
+import styled, { createGlobalStyle, css } from 'styled-components';
 import DataGrid, { Column, HeaderFilter, Selection, Scrolling, LoadPanel, SearchPanel, Pager, Sorting, Paging, FilterPanel, ColumnChooser, Grouping, GroupPanel, Summary, Editing, FilterRow, StateStoring, RowDragging, MasterDetail, Position, ColumnChooserSearch, ColumnChooserSelection } from 'devextreme-react/data-grid';
 import DataSource from 'devextreme/data/data_source';
 import { IconAll, IconSelected, IconVisible, SDKUI_Globals, SDKUI_Localizator } from '../../helper';
@@ -382,7 +382,7 @@ const TMDataGrid = React.forwardRef((props, ref) => {
             return pager;
         return { ...pager, displayMode: pager.displayMode ?? 'compact' };
     }, [pager, compactPager]);
-    return _jsxs(StyledDataGridContainer, { "$compactPager": compactPager, style: { width: "100%", height: "100%" }, children: [_jsx("div", { ref: gridContainerRef, style: { width: "100%", height: counterConfig.show ? "calc(100% - 25px)" : "100%" }, children: _jsxs(DataGrid, { ref: internalRef, id: id, className: `tm-datagrid ${hasFilters ? 'has-filters' : ''}`, 
+    return _jsxs(StyledDataGridContainer, { "$compactPager": compactPager, style: { width: "100%", height: "100%" }, children: [_jsx(HeaderFilterMenuGlobalStyle, {}), _jsx("div", { ref: gridContainerRef, style: { width: "100%", height: counterConfig.show ? "calc(100% - 25px)" : "100%" }, children: _jsxs(DataGrid, { ref: internalRef, id: id, className: `tm-datagrid ${hasFilters ? 'has-filters' : ''}`, 
                     // main properties
                     keyExpr: keyExpr, dataSource: dataSource, selectedRowKeys: selectedRowKeys, focusedRowEnabled: focusedRowEnabled, hoverStateEnabled: hoverStateEnabled, 
                     // events and callbacks
@@ -451,6 +451,185 @@ const StyledDataGridContainer = styled.div `
         }
     `}
 `;
+// Stile del pannello del filtro d'intestazione (ricerca, elenco valori, OK/Annulla).
+// Il popup è in portale sul body, fuori da StyledDataGridContainer: le regole sono globali
+// ma tutte sotto .dx-header-filter-menu, classe che DevExtreme applica solo a questo popup.
+const HeaderFilterMenuGlobalStyle = createGlobalStyle `
+    .dx-header-filter-menu {
+
+        &.dx-popup-wrapper > .dx-overlay-content.dx-popup-normal {
+            border: 1px solid #E4E8EE;
+            border-radius: 8px;
+            box-shadow: 0 2px 6px rgba(18, 44, 76, .08), 0 12px 28px rgba(18, 44, 76, .14);
+            overflow: hidden;
+        }
+
+        &.dx-popup-wrapper .dx-popup-content {
+            padding: 10px 10px 4px;
+        }
+
+        /* Campo di ricerca: TextBox mode "search" resa da List o da TreeView (filtri gerarchici) */
+        .dx-searchbox.dx-list-search,
+        .dx-searchbox.dx-treeview-search {
+            margin-bottom: 8px;
+            border-radius: 6px;
+            border: 1px solid #CDD2D8;
+            background-color: #F4F6F9;
+            box-shadow: none;
+            transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
+
+            /* fluent disegna qui la barretta di focus, sostituita da bordo + alone */
+            &::before,
+            &::after {
+                display: none;
+            }
+
+            &.dx-state-hover:not(.dx-state-focused) {
+                border-color: #AEB6C1;
+                background-color: #EEF2F7;
+            }
+
+            &.dx-state-focused {
+                border-color: #2559A5;
+                background-color: #FFFFFF;
+                box-shadow: 0 0 0 2px rgba(37, 89, 165, .16);
+            }
+
+            .dx-icon-search {
+                width: 28px;
+                color: #8A929B;
+                transition: color .15s ease;
+            }
+
+            &.dx-state-focused .dx-icon-search {
+                color: #2559A5;
+            }
+
+            .dx-texteditor-input {
+                min-height: 28px;
+                padding-inline-start: 28px;
+                padding-inline-end: 8px;
+                font-size: 12px;
+                background-color: transparent;
+            }
+
+            .dx-placeholder {
+                color: #9AA3AD;
+                font-size: 12px;
+
+                &::before {
+                    padding-inline-start: 28px;
+                    padding-inline-end: 8px;
+                }
+            }
+
+            .dx-clear-button-area .dx-icon-clear {
+                color: #8A929B;
+                transition: color .15s ease;
+            }
+
+            .dx-clear-button-area:hover .dx-icon-clear {
+                color: #2559A5;
+            }
+        }
+
+        .dx-list-item {
+            border-radius: 4px;
+            transition: background-color .12s ease;
+        }
+
+        .dx-list-item-content {
+            padding: 4px 6px;
+        }
+
+        .dx-list-item.dx-state-hover,
+        .dx-list-item.dx-state-focused {
+            background-color: #F1F6FD;
+            color: #122C4C;
+        }
+
+        .dx-list-select-all {
+            padding: 2px 0 6px;
+            margin-bottom: 4px;
+            border-bottom: 1px solid #ECEFF3;
+        }
+
+        .dx-list-select-all-label {
+            font-weight: 600;
+            color: #122C4C;
+        }
+
+        .dx-checkbox-checked .dx-checkbox-icon,
+        .dx-checkbox-indeterminate .dx-checkbox-icon {
+            border-color: #2559A5;
+            background-color: #2559A5;
+        }
+
+        .dx-checkbox.dx-state-hover:not(.dx-checkbox-checked) .dx-checkbox-icon {
+            border-color: #2559A5;
+        }
+
+        /* il :not() lascia intatto il fade-out nativo della scrollbar */
+        .dx-scrollable-scroll:not(.dx-state-invisible) .dx-scrollable-scroll-content {
+            background-color: rgba(18, 44, 76, .28);
+            border-radius: 3px;
+        }
+
+        &.dx-popup-wrapper .dx-popup-bottom.dx-toolbar {
+            padding: 8px 10px 10px;
+            border-top: 1px solid #ECEFF3;
+        }
+
+        .dx-popup-bottom .dx-button {
+            border-radius: 5px;
+            min-width: 76px;
+            margin: 0;
+        }
+
+        .dx-popup-bottom .dx-toolbar-button + .dx-toolbar-button {
+            margin-inline-start: 6px;
+
+            .dx-button {
+                margin: 0;
+            }
+        }
+
+        /* DevExtreme aggiunge prima OK e poi Annulla: individuarli per posizione li rende indipendenti dalla lingua */
+        .dx-popup-bottom .dx-toolbar-after > .dx-toolbar-button:first-child .dx-button {
+            border-color: transparent;
+            background-color: #2559A5;
+
+            .dx-button-text {
+                color: #FFFFFF;
+            }
+
+            &.dx-state-hover {
+                background-color: #1E4A8C;
+            }
+
+            &.dx-state-active {
+                background-color: #1A3F78;
+            }
+        }
+
+        .dx-popup-bottom .dx-toolbar-after > .dx-toolbar-button + .dx-toolbar-button .dx-button {
+            border-color: transparent;
+            background-color: transparent;
+
+            .dx-button-text {
+                color: #44506B;
+            }
+
+            &.dx-state-hover {
+                background-color: #F0F3F7;
+            }
+
+            &.dx-state-active {
+                background-color: #E6EBF2;
+            }
+        }
+    }
+`;
 const getRecordCount = (dataSource) => {
     if (Array.isArray(dataSource)) {
         return dataSource.length; // For array

package/lib/components/base/TMTooltip.js

@@ -7,9 +7,8 @@ import { DeviceType, useDeviceType } from './TMDeviceProvider';
 const HIDE_DELAY_MS = 400;
 const TMTooltip = ({ children, position, content, hideAfterDelay, parentStyle, childStyle, allowContentInteraction = false }) => {
     const [showTooltip, setShowTooltip] = useState(false);
-    const [id, setID] = useState('');
+    const [id] = useState(() => genUniqueId());
     const hideTimerRef = useRef();
-    useEffect(() => { setID(genUniqueId()); }, [children]);
     useEffect(() => {
         const hide = () => setShowTooltip(false);
         window.addEventListener('click', hide);

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

@@ -13,6 +13,15 @@ import { TMColors } from '../../../utils/theme';
 import styled from 'styled-components';
 import { useOutsideClick } from '../../../hooks/useOutsideClick';
 import { DeviceType, useDeviceType } from '../../base/TMDeviceProvider';
+const TMTreeDcmtTypeCell = ({ tid, isMobile }) => {
+    const [dtd, setDtd] = useState();
+    const loadDTD = useCallback(async () => {
+        if (isMobile || dtd || !tid)
+            return;
+        setDtd(await DcmtTypeListCacheService.GetAsync(tid));
+    }, [isMobile, dtd, tid]);
+    return (_jsxs(StyledTreeDcmtTypeRow, { onMouseEnter: loadDTD, children: [_jsx("span", { style: { cursor: 'pointer', flex: 1, minWidth: 0 }, children: _jsx(TMTidViewer, { tid: tid, showIcon: false }) }), !isMobile && (_jsx("span", { className: 'info-icon', children: _jsx(TMDcmtTypeTooltip, { dtd: dtd, children: _jsx(IconInfo, { color: TMColors.info }) }) }))] }));
+};
 const TMTreeSelector = ({ layoutMode = LayoutModes.Update, isVisible, onSelectedTIDChanged, onClosePanel, allowMaximize = true, onMaximizePanel }) => {
     const [trees, setTrees] = useState([]);
     const [treeItems, setTreeItems] = useState([]);
@@ -66,36 +75,9 @@ const TMTreeSelector = ({ layoutMode = LayoutModes.Update, isVisible, onSelected
     }, [selectedTreeId, trees]);
     const renderCell = useCallback((data) => {
         const treeItem = data.data;
-        const [showInfo, setShowInfo] = useState(false);
         // Documento (DcmtType)
         if (treeItem.type === TreeItemTypes.DcmtType) {
-            return (_jsxs(StyledDivHorizontal, { style: {
-                    alignItems: 'center',
-                    minWidth: 0,
-                    width: '100%',
-                    gap: 2,
-                    position: 'relative'
-                }, onMouseEnter: async () => {
-                    if (!isMobile) {
-                        setShowInfo(true);
-                        let dtd = await DcmtTypeListCacheService.GetAsync(treeItem.tid);
-                        setInfoDTD(dtd);
-                    }
-                }, onMouseLeave: () => {
-                    if (!isMobile) {
-                        setShowInfo(false);
-                        setInfoDTD(undefined);
-                    }
-                }, children: [_jsx("span", { style: { cursor: 'pointer', flex: 1, minWidth: 0 }, children: _jsx(TMTidViewer, { tid: treeItem.tid, showIcon: false }) }), !isMobile && (_jsx("span", { style: {
-                            opacity: showInfo ? 1 : 0,
-                            transition: 'opacity 0.2s',
-                            pointerEvents: showInfo ? 'auto' : 'none',
-                            cursor: 'pointer',
-                            display: 'flex',
-                            alignItems: 'center',
-                            marginLeft: 'auto',
-                            zIndex: 2
-                        }, children: _jsx(TMDcmtTypeTooltip, { dtd: infoDTD, children: _jsx(IconInfo, { color: TMColors.info }) }) }))] }));
+            return _jsx(TMTreeDcmtTypeCell, { tid: treeItem.tid, isMobile: isMobile });
         }
         // Folder (altri tipi)
         return (_jsxs(StyledDivHorizontal, { style: { gap: 5, alignItems: 'center', minWidth: 0 }, children: [_jsx("span", { style: {
@@ -113,7 +95,7 @@ const TMTreeSelector = ({ layoutMode = LayoutModes.Update, isVisible, onSelected
                         whiteSpace: 'nowrap',
                         flex: 1,
                     }, children: treeItem.nameLoc })] }));
-    }, [isMobile, infoDTD, setInfoDTD]);
+    }, [isMobile]);
     // Handles selection change in the data grid
     const onSelectionChanged = useCallback((e) => {
         const selectedKeys = e.component.getSelectedRowKeys() ?? [];
@@ -214,6 +196,29 @@ const TMTreeSelector = ({ layoutMode = LayoutModes.Update, isVisible, onSelected
             : _jsx("div", { style: { display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '100%', width: '100%', fontSize: '1.5rem' }, children: SDKUI_Localizator.TreesNoAvailable }) }));
 };
 export default TMTreeSelector;
+const StyledTreeDcmtTypeRow = styled(StyledDivHorizontal) `
+    align-items: center;
+    min-width: 0;
+    width: 100%;
+    gap: 2px;
+    position: relative;
+
+    .info-icon {
+        display: flex;
+        align-items: center;
+        margin-left: auto;
+        z-index: 2;
+        cursor: pointer;
+        opacity: 0;
+        pointer-events: none;
+        transition: opacity 0.2s;
+    }
+
+    &:hover .info-icon {
+        opacity: 1;
+        pointer-events: auto;
+    }
+`;
 const StyledTreeListWrapper = styled.div `
     width: 100%;
     height: 100%;

package/lib/components/viewers/TMTidViewer.js

@@ -6,6 +6,7 @@ import TMSpinner from '../base/TMSpinner';
 import { StyledDivHorizontal, StyledTooltipContainer, StyledTooltipItem, StyledTooltipSeparatorItem } from '../base/Styled';
 import TMTooltip from '../base/TMTooltip';
 import { TMColors } from '../../utils/theme';
+import styled, { keyframes } from 'styled-components';
 export var ImageIDList;
 (function (ImageIDList) {
     ImageIDList["arrow_001"] = "arrow_001";
@@ -261,13 +262,54 @@ export const TMDcmtTypeIcon = ({ dtd }) => {
 export const TMDcmtTypeTooltip = ({ dtd, children }) => {
     return (_jsx("div", { style: { pointerEvents: 'all' }, children: _jsx(TMTooltip, { allowContentInteraction: true, content: renderDTDTooltipContent(dtd), children: children }) }));
 };
+/** Legge il tipo documento dalle cache dell'SDK senza passare dal mutex. Serve perché
+ *  l'espansione di una cartella nell'albero ricrea tutte le celle: senza una lettura sincrona
+ *  ogni riga tornerebbe a mostrare il testo di "nessuna selezione" fino alla fine delle
+ *  richieste (una per TID, serializzate dal mutex).
+ *  GetCache restituisce le mappe vive usate dall'SDK, quindi le invalidazioni
+ *  (RemoveAllWithMetadata, RemoveAllWithoutMetadata, logout) hanno effetto immediato. */
+const getCachedDTD = (tid, tmSession) => {
+    if (!tid || tid <= 0)
+        return undefined;
+    const accessToken = (tmSession ?? SDK_Globals.tmSession)?.SessionDescr?.accessToken;
+    if (!accessToken)
+        return undefined;
+    // La cache senza metadati è popolata dalla login: copre già i tipi documento autorizzati
+    return DcmtTypeListCacheService.GetCache(false).get(accessToken)?.find(o => o.id === tid)
+        ?? DcmtTypeListCacheService.GetCache(true).get(accessToken)?.find(o => o.id === tid);
+};
+const shimmer = keyframes `
+    0% { background-position: 200% 0; }
+    100% { background-position: -200% 0; }
+`;
+/** Segnaposto animato mostrato al posto del nome durante il caricamento.
+ *  Grigio semitrasparente: leggibile sia su sfondo chiaro che scuro. */
+const StyledTidSkeleton = styled.span `
+    display: inline-block;
+    flex: 0 0 auto;
+    width: 90px;
+    height: 0.9em;
+    border-radius: 4px;
+    background-image: linear-gradient(90deg, rgba(127, 127, 127, 0.12) 25%, rgba(127, 127, 127, 0.28) 50%, rgba(127, 127, 127, 0.12) 75%);
+    background-size: 200% 100%;
+    animation: ${shimmer} 1.4s ease-in-out infinite;
+
+    @media (prefers-reduced-motion: reduce) { animation: none; }
+`;
 const TMTidViewer = ({ tmSession, tid, did, showIcon = false, color, showId = false, noneSelectionText = `<${SDKUI_Localizator.NoneSelection}>` }) => {
-    const [dtd, setDtd] = useState();
+    const accessToken = (tmSession ?? SDK_Globals.tmSession)?.SessionDescr?.accessToken;
+    const [dtd, setDtd] = useState(() => getCachedDTD(tid, tmSession));
+    const [isLoading, setIsLoading] = useState(() => !!tid && tid > 0 && !getCachedDTD(tid, tmSession));
     const fetchData = async (tid, did) => {
         if (!tid || tid <= 0) {
             setDtd(undefined);
+            setIsLoading(false);
             return;
         }
+        const cached = getCachedDTD(tid, tmSession);
+        if (cached)
+            setDtd(cached);
+        setIsLoading(!cached);
         let count = DcmtTypeListCacheService.CacheCount(true, 'all', tmSession);
         if (count <= 0)
             TMSpinner.show({ description: `${SDKUI_Localizator.Loading} - ${SDK_Localizator.ListDcmtTypeOrView} ...` });
@@ -281,11 +323,14 @@ const TMTidViewer = ({ tmSession, tid, did, showIcon = false, color, showId = fa
         finally {
             if (count <= 0)
                 TMSpinner.hide();
+            setIsLoading(false);
         }
     };
+    // accessToken e non tmSession: la sessione è un oggetto e un'identità nuova a ogni render
+    // del chiamante rifarebbe la richiesta senza motivo
     useEffect(() => {
         fetchData(tid, did);
-    }, [tid, did]);
+    }, [tid, did, accessToken]);
     const displayName = () => {
         if (!dtd)
             return noneSelectionText;
@@ -295,16 +340,18 @@ const TMTidViewer = ({ tmSession, tid, did, showIcon = false, color, showId = fa
             whiteSpace: 'nowrap',
             overflow: 'hidden',
             textOverflow: 'ellipsis'
-        }, children: [showIcon && dtd && _jsx(TMDcmtTypeIcon, { dtd: dtd }), _jsx("p", { title: displayName(), style: {
-                    textAlign: 'left',
-                    margin: 0,
-                    marginLeft: showIcon ? '5px' : '',
-                    color: dtd?.isView ? 'red' : (color ?? TMColors.primary),
-                    whiteSpace: 'nowrap',
-                    overflow: 'hidden',
-                    textOverflow: 'ellipsis',
-                    // paddingRight: '10px'
-                }, children: displayName() }), showId && _jsx("p", { style: { padding: '0px 3px', margin: 0 }, children: `(TID: ${tid})` })] }));
+        }, children: [showIcon && dtd && _jsx(TMDcmtTypeIcon, { dtd: dtd }), isLoading && !dtd
+                ? _jsx(StyledTidSkeleton, { title: `${SDKUI_Localizator.Loading} ...`, style: { marginLeft: showIcon ? '5px' : undefined } })
+                : _jsx("p", { title: displayName(), style: {
+                        textAlign: 'left',
+                        margin: 0,
+                        marginLeft: showIcon ? '5px' : '',
+                        color: dtd?.isView ? 'red' : (color ?? TMColors.primary),
+                        whiteSpace: 'nowrap',
+                        overflow: 'hidden',
+                        textOverflow: 'ellipsis',
+                        // paddingRight: '10px'
+                    }, children: displayName() }), showId && _jsx("p", { style: { padding: '0px 3px', margin: 0 }, children: `(TID: ${tid})` })] }));
 };
 export default TMTidViewer;
 export const cellRenderTID = (data, noneSelectionText) => {

package/package.json

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