@topconsultnpm/sdkui-react-beta 6.13.75 → 6.13.76

package/lib/components/base/TMFileManager.js

@@ -50,6 +50,7 @@ const TMFileManager = (props) => {
             return;
         event.preventDefault();
         setTreeViewAnchor(event.currentTarget);
+        handleFocusedFolder?.(undefined);
     };
     // Handle closing the context menu
     const closeTreeViewContextMenu = useCallback(() => {

package/lib/components/features/documents/TMDcmtBlog.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 interface ITMDcmtBlogProps {
     tid: number | undefined;
     did: number | undefined;
+    isVisible?: boolean;
 }
 declare const TMDcmtBlog: React.FC<ITMDcmtBlogProps>;
 export default TMDcmtBlog;

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

@@ -7,27 +7,42 @@ import TMSpinner from '../../base/TMSpinner';
 import TMBlogs from '../../grids/TMBlogs';
 import { TMNothingToShow } from './TMDcmtPreview';
 import { IconBoard } from '../../../helper';
-const TMDcmtBlog = ({ tid, did }) => {
+const TMDcmtBlog = ({ tid, did, isVisible }) => {
     const [blogsDatasource, setBlogsDatasource] = useState([]);
+    const [hasLoadedDataOnce, setHasLoadedDataOnce] = useState(false); //traccia se *qualsiasi* dato è stato caricato per la prima volta
+    const [lastLoadedDid, setLastLoadedDid] = useState(undefined); // `lastLoadedDid` tiene traccia dell'ultimo `did` per cui abbiamo caricato i dati
     useEffect(() => {
-        if (!tid || !did)
+        if (!tid || !did) {
+            setBlogsDatasource([]);
+            setLastLoadedDid(undefined); // Reset per consentire un nuovo caricamento quando tid/did diventano validi
             return;
-        loadDataAsync(tid, did);
-    }, [did]);
-    const loadDataAsync = async (tid, did) => {
-        try {
-            TMSpinner.show({ description: 'Caricamento - Bacheca...' });
-            let res = await SDK_Globals.tmSession?.NewSearchEngine().BlogRetrieveAsync(tid, did);
-            setBlogsDatasource(res ?? []);
         }
-        catch (e) {
-            let err = e;
-            TMExceptionBoxManager.show({ exception: err });
+        // Condizione per eseguire il fetch:
+        // 1. Il pannello è visibile
+        // 2. E (non abbiamo ancora caricato dati O il `did` è cambiato rispetto all'ultima volta)
+        const shouldFetch = isVisible && (!hasLoadedDataOnce || did !== lastLoadedDid);
+        // Esegui la chiamata API solo se il pannello è visibile E i dati non sono già stati caricati
+        // O, se vuoi ricaricare ogni volta che diventa visibile (ma è meno efficiente per "pesante")
+        if (shouldFetch) {
+            const fetchDataAsync = async (tid, did) => {
+                try {
+                    TMSpinner.show({ description: 'Caricamento - Bacheca...' });
+                    let res = await SDK_Globals.tmSession?.NewSearchEngine().BlogRetrieveAsync(tid, did);
+                    setBlogsDatasource(res ?? []);
+                    setHasLoadedDataOnce(true); // Marca che abbiamo caricato dati almeno una volta
+                    setLastLoadedDid(did); // Memorizza il `did` per cui abbiamo caricato
+                }
+                catch (e) {
+                    let err = e;
+                    TMExceptionBoxManager.show({ exception: err });
+                }
+                finally {
+                    TMSpinner.hide();
+                }
+            };
+            fetchDataAsync(tid, did);
         }
-        finally {
-            TMSpinner.hide();
-        }
-    };
+    }, [tid, did, isVisible, hasLoadedDataOnce, lastLoadedDid]);
     return (_jsx(StyledContainer, { children: _jsx(StyledSectionContainer, { style: { position: 'relative' }, children: _jsx(StyledBoardContainer, { children: !did ? _jsx(TMNothingToShow, { text: 'Nessun documento selezionato.', secondText: 'Bacheca non disponibile.', icon: _jsx(IconBoard, { fontSize: 96 }) }) :
                     _jsx(TMBlogs, { id: "dcmt-blog", allData: blogsDatasource, showExtendedAttachments: false }) }) }) }));
 };

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

@@ -446,10 +446,10 @@ const TMDcmtForm = ({ showHeader = true, onSaveRecents, layoutMode = LayoutModes
         'tmDcmtPreview': true,
     };
     const initialPanelDimensions = {
-        'tmDcmtForm': { width: '25%', height: '100%' },
-        'tmBlog': { width: '25%', height: '100%' },
-        'tmSysMetadata': { width: '25%', height: '100%' },
-        'tmDcmtPreview': { width: '25%', height: '100%' },
+        'tmDcmtForm': { width: '20%', height: '100%' },
+        'tmBlog': { width: '30%', height: '100%' },
+        'tmSysMetadata': { width: '20%', height: '100%' },
+        'tmDcmtPreview': { width: '30%', height: '100%' },
     };
     const initialPanels = useMemo(() => [
         {
@@ -493,24 +493,6 @@ const TMDcmtForm = ({ showHeader = true, onSaveRecents, layoutMode = LayoutModes
             toolbarOptions: { icon: _jsx(IconShow, { fontSize: 24 }), disabled: isPreviewDisabled, visible: true, orderNumber: 4, isActive: allInitialPanelVisibility['tmDcmtPreview'] }
         }
     ], [tmDcmtForm, tmBlog, tmSysMetadata, tmDcmtPreview, isPreviewDisabled, isBoardDisabled, isSysMetadataDisabled, isClosable]);
-    // {showDcmtFormSidebar && <TMCommandsPanel
-    //     isMobile={deviceType === DeviceType.MOBILE}
-    //     items={[
-    //         ...(layoutMode === LayoutModes.Ark ? [
-    //             { icon: <IconRoundFileUpload />, selected: isOpenPreview, disabled: isPreviewDisabled, onClick: () => { if (!isPreviewDisabled) setIsOpenPreview(!isOpenPreview); } }
-    //         ] : []),
-    //         ...(layoutMode !== LayoutModes.Ark ? [
-    //             ...(deviceType === DeviceType.MOBILE ? [{ icon: <IconArrowLeft />, onClick: isClosable ? undefined : handleClose }] : []),
-    //             { icon: <IconPreview />, selected: isOpenDcmtForm, onClick: () => { setIsOpenDcmtForm(!isOpenDcmtForm); } },
-    //             { icon: <IconShow />, selected: isOpenPreview, disabled: isPreviewDisabled, onClick: () => { if (!isPreviewDisabled) setIsOpenPreview(!isOpenPreview); } },
-    //             { icon: <IconBoard />, selected: isOpenBoard, disabled: isBoardDisabled, onClick: () => { if (!isBoardDisabled) { closeMiddlePanel(); setIsOpenBoard(!isOpenBoard); } } },
-    //             { icon: <IconDcmtTypeSys />, selected: isOpenSysMetadata, disabled: isSysMetadataDisabled, onClick: () => { if (!isSysMetadataDisabled) { closeMiddlePanel(); setIsOpenSysMetadata(!isOpenSysMetadata); } } },
-    //         ] : []),
-    //         ...(allowRelations && currentTIDHasMasterRelations ? [{ icon: <IconDetailDcmts />, selected: isOpenMaster, disabled: isMasterDisabled, onClick: () => { if (!isMasterDisabled) setIsOpenMaster(!isOpenMaster); } }] : []),
-    //         ...(allowRelations && currentTIDHasDetailRelations ? [{ icon: <IconDetailDcmts transform='scale(-1, 1)' />, selected: isOpenDetails, disabled: isDetailsDisabled, onClick: () => { if (!isDetailsDisabled) setIsOpenDetails(!isOpenDetails); } }] : []),
-    //         ...customRightSidebarItems
-    //     ]}
-    // />}
     const renderDcmtForm = () => {
         return (_jsxs("div", { style: {
                 display: 'flex',
@@ -603,9 +585,9 @@ const ToppyImage = styled.img `
 export const ToppyHelpCenter = ({ content, onClick, deviceType, top = -200 }) => {
     return (_jsxs(ToppyContainer, { children: [_jsx(ToppyImage, { "$isMobile": deviceType === DeviceType.MOBILE, onClick: onClick, src: toppy, alt: "Toppy" }), _jsx("div", { style: { top: deviceType === DeviceType.MOBILE ? -180 : top, right: deviceType === DeviceType.MOBILE ? 20 : 1, transform: 'rotate(20deg)', position: 'absolute', width: 'max-content', height: 'max-content' }, children: content })] }));
 };
-const TMDcmtPreviewWrapper = ({ currentDcmt, layoutMode, fromDTD, dcmtFile, deviceType, onFileUpload }) => {
+const TMDcmtPreviewWrapper = ({ currentDcmt, layoutMode, fromDTD, dcmtFile, deviceType, isVisible, onFileUpload }) => {
     const { setPanelVisibilityById, toggleMaximize, isResizingActive } = useTMPanelManagerContext();
     return (layoutMode === LayoutModes.Update ?
-        _jsx(TMDcmtPreview, { onClosePanel: () => setPanelVisibilityById('tmDcmtPreview', false), onMaximizePanel: () => toggleMaximize('tmDcmtPreview'), dcmtData: currentDcmt, isResizingActive: isResizingActive }) :
+        _jsx(TMDcmtPreview, { isVisible: isVisible, onClosePanel: () => setPanelVisibilityById('tmDcmtPreview', false), onMaximizePanel: () => toggleMaximize('tmDcmtPreview'), dcmtData: currentDcmt, isResizingActive: isResizingActive }) :
         _jsx(TMFileUploader, { onFileUpload: onFileUpload, onClose: () => setPanelVisibilityById('tmDcmtPreview', false), isRequired: fromDTD?.archiveConstraint === ArchiveConstraints.ContentCompulsory && dcmtFile === null, defaultBlob: dcmtFile, deviceType: deviceType, isResizingActive: isResizingActive }));
 };

package/lib/components/features/documents/TMDcmtPreview.d.ts

@@ -5,6 +5,7 @@ interface ITMDcmtPreviewProps {
     canNext?: boolean;
     canPrev?: boolean;
     isResizingActive?: boolean;
+    isVisible?: boolean;
     onNext?: () => void;
     onPrev?: () => void;
     onClosePanel?: () => void;

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

@@ -15,7 +15,7 @@ import { TMSaveFormButtonPrevious, TMSaveFormButtonNext } from '../../forms/TMSa
 import { StyledAnimatedComponentOpacity } from '../../base/Styled';
 import TMPanel from '../../base/TMPanel';
 import { DeviceType, useDeviceType } from '../../base/TMDeviceProvider';
-const TMDcmtPreview = ({ dcmtData, isResizingActive, onClosePanel, canNext, canPrev, onNext, onPrev, onMaximizePanel }) => {
+const TMDcmtPreview = ({ dcmtData, isResizingActive, isVisible, canNext, canPrev, onClosePanel, onNext, onPrev, onMaximizePanel }) => {
     const [dcmtBlob, setDcmtBlob] = useState(undefined);
     const [showPreview, setShowPreview] = useState(false);
     const [isFromCache, setIsFromCache] = useState(false);
@@ -24,24 +24,37 @@ const TMDcmtPreview = ({ dcmtData, isResizingActive, onClosePanel, canNext, canP
     const cacheKey = dcmtData ? `${dcmtData.tid}-${dcmtData.did}` : '00';
     const deviceType = useDeviceType();
     const isMobile = deviceType === DeviceType.MOBILE;
+    const [hasLoadedDataOnce, setHasLoadedDataOnce] = useState(false);
+    const [lastLoadedDid, setLastLoadedDid] = useState(undefined);
     useEffect(() => {
-        setDcmtBlob(undefined);
-        setError('');
-        if (!dcmtData)
-            return;
-        if (isDcmtFileInCache(cacheKey)) {
-            loadDocumentWithCache();
-            setShowPreview(true);
+        if (!dcmtData) {
+            setLastLoadedDid(undefined); // Reset 
+            setDcmtBlob(undefined);
+            setError('');
+            setShowPreview(false);
             return;
         }
-        if ((extensionHandler(dcmtData.fileExt) !== FileExtensionHandler.NONE) && ((dcmtData.fileSize ?? 0) <= (SDKUI_Globals.userSettings.searchSettings.previewThreshold * 1024))) {
+        const currentCacheKey = `${dcmtData.tid}-${dcmtData.did}`;
+        const shouldFetch = isVisible && (!hasLoadedDataOnce || currentCacheKey !== lastLoadedDid);
+        if (isDcmtFileInCache(currentCacheKey)) {
             loadDocumentWithCache();
             setShowPreview(true);
+            return;
         }
-        else {
-            setShowPreview(false);
+        if (shouldFetch) {
+            setDcmtBlob(undefined);
+            setError('');
+            if ((extensionHandler(dcmtData.fileExt) !== FileExtensionHandler.NONE) && ((dcmtData.fileSize ?? 0) <= (SDKUI_Globals.userSettings.searchSettings.previewThreshold * 1024))) {
+                loadDocumentWithCache();
+                setShowPreview(true);
+            }
+            else {
+                setShowPreview(false);
+            }
+            setHasLoadedDataOnce(true);
+            setLastLoadedDid(currentCacheKey);
         }
-    }, [dcmtData]);
+    }, [dcmtData?.did, isVisible, hasLoadedDataOnce, lastLoadedDid]);
     const loadDocumentWithCache = async () => {
         const rfo = new RetrieveFileOptions();
         rfo.retrieveReason = DcmtOpers.None;

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

@@ -696,7 +696,7 @@ const TMSearchResultSelector = ({ searchResults = [], onSelectionChanged }) => {
     return (_jsx("div", { style: { height: '100%', width: '100%', overflow: 'auto' }, children: sortedCategories.map((category) => (_jsxs("div", { children: [_jsxs(StyledGroupTemplate, { onClick: () => toggleCategory(category), children: [activeCategories.includes(category) ? _jsx(IconChevronDown, {}) : _jsx(IconChevronDown, { transform: 'scale(-1, 1)' }), renderGroupTemplate(category)] }, category), activeCategories.includes(category) && (_jsx("div", { style: { padding: '5px' }, children: groupedResults[category].map((result, index) => (_jsx(StyledItemTemplate, { "$isSelected": selectedResult === result, onClick: () => handleSelect(result), children: renderItemTemplate(result) }, index))) }))] }, category))) }));
 };
 //#endregion TMSearchResultSelector
-const TMDcmtPreviewWrapper = ({ currentDcmt }) => {
+const TMDcmtPreviewWrapper = ({ currentDcmt, isVisible }) => {
     const { setPanelVisibilityById, toggleMaximize, isResizingActive } = useTMPanelManagerContext();
-    return (_jsx(TMDcmtPreview, { onClosePanel: () => setPanelVisibilityById('tmDcmtPreview', false), onMaximizePanel: () => toggleMaximize('tmDcmtPreview'), dcmtData: currentDcmt, isResizingActive: isResizingActive }));
+    return (_jsx(TMDcmtPreview, { onClosePanel: () => setPanelVisibilityById('tmDcmtPreview', false), onMaximizePanel: () => toggleMaximize('tmDcmtPreview'), dcmtData: currentDcmt, isResizingActive: isResizingActive, isVisible: isVisible }));
 };

package/lib/components/layout/panelManager/TMPanelWrapper.d.ts

@@ -4,5 +4,5 @@ interface TMPanelWrapperProps {
     panel: TMPanelDefinition;
     children: ReactNode;
 }
-declare const TMPanelWrapper: (props: TMPanelWrapperProps) => import("react/jsx-runtime").JSX.Element;
+declare const TMPanelWrapper: (props: TMPanelWrapperProps) => import("react/jsx-runtime").JSX.Element | null;
 export default TMPanelWrapper;

package/lib/components/layout/panelManager/TMPanelWrapper.js

@@ -1,7 +1,7 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useMemo } from 'react';
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import React, { useMemo, useState, useEffect } from 'react';
 import { useTMPanelManagerContext } from './TMPanelManagerContext';
-import { DeviceType, useDeviceType } from '../../base/TMDeviceProvider';
+import { useDeviceType, DeviceType } from '../../base/TMDeviceProvider';
 import TMPanel from '../../base/TMPanel';
 const TMPanelWrapper = (props) => {
     const { panel, children } = props;
@@ -16,15 +16,23 @@ const TMPanelWrapper = (props) => {
     // Extract panel dimensions based on panel id
     const width = panelDimensions[panel.id].width;
     const height = panelDimensions[panel.id].height;
-    // Determine visibility: 
+    // Determine visibility:
     // - If any panels are maximized, only show those maximized panels
     // - Otherwise, rely on the normal panel visibility state
-    const isVisible = maximizedPanels.length > 0 ? maximizedPanels.includes(panel.id) : panelVisibility[panel.id];
+    const isCurrentlyVisible = maximizedPanels.length > 0 ? maximizedPanels.includes(panel.id) : panelVisibility[panel.id];
+    // NUOVO STATO: Traccia se il pannello è mai stato reso visibile
+    const [hasBeenRenderedOnce, setHasBeenRenderedOnce] = useState(isCurrentlyVisible);
+    // NUOVO useEffect: Aggiorna hasBeenRenderedOnce quando il pannello diventa visibile per la prima volta
+    useEffect(() => {
+        if (isCurrentlyVisible && !hasBeenRenderedOnce) {
+            setHasBeenRenderedOnce(true);
+        }
+    }, [isCurrentlyVisible, hasBeenRenderedOnce]);
     const panelStyles = {
         margin: '0',
-        // overflow: 'hidden',
         boxSizing: 'border-box',
-        display: isVisible ? 'flex' : 'none',
+        // Applica 'flex' o 'none' solo se è già stato reso visibile almeno una volta
+        display: isCurrentlyVisible ? 'flex' : 'none',
         flexDirection: 'column',
         minWidth: '50px',
         minHeight: '50px',
@@ -32,7 +40,22 @@ const TMPanelWrapper = (props) => {
         height: height,
         pointerEvents: 'auto',
     };
+    // Rende il pannello solo se è attualmente visibile O se è già stato reso visibile una volta.
+    // Se non è mai stato reso visibile E non è attualmente visibile, non renderizza nulla (o un placeholder vuoto).
+    if (!isCurrentlyVisible && !hasBeenRenderedOnce) {
+        return null;
+    }
+    // Clona il child e passa una prop 'isVisible'
+    const childrenWithProps = React.Children.map(children, child => {
+        if (React.isValidElement(child)) {
+            return React.cloneElement(child, { isVisible: isCurrentlyVisible });
+        }
+        return child;
+    });
     return (_jsx("div", { "data-panel-id": panel.id, style: panelStyles, children: panel.contentOptions?.panelContainer ?
-            _jsx(TMPanel, { ...panel.contentOptions.panelContainer, allowMaximize: !isMobile, onHeaderDoubleClick: isMaximizable ? () => toggleMaximize(panel.id) : undefined, onMaximize: isMaximizable ? () => toggleMaximize(panel.id) : undefined, onClose: isClosable ? () => togglePanelVisibility(panel.id) : undefined, children: children }) : children }));
+            _jsxs(TMPanel, { ...panel.contentOptions.panelContainer, allowMaximize: !isMobile, onHeaderDoubleClick: isMaximizable ? () => toggleMaximize(panel.id) : undefined, onMaximize: isMaximizable ? () => toggleMaximize(panel.id) : undefined, onClose: isClosable ? () => togglePanelVisibility(panel.id) : undefined, children: [childrenWithProps, " "] })
+            :
+                childrenWithProps // Usa i children clonati
+     }));
 };
 export default TMPanelWrapper;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@topconsultnpm/sdkui-react-beta",
-    "version": "6.13.75",
+    "version": "6.13.76",
     "description": "",
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",