@topconsultnpm/sdkui-react-beta 6.13.64 → 6.13.66

package/lib/components/features/archive/TMArchive.js

@@ -1,22 +1,23 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from 'react';
 import Logo from '../../../assets/Toppy-generico.png';
-import { LayoutModes } from '@topconsultnpm/sdk-ts-beta';
-import { IconTree, IconProgressReady, SDKUI_Globals } from '../../../helper';
+import { DcmtTypeListCacheService, LayoutModes, SDK_Localizator } from '@topconsultnpm/sdk-ts-beta';
+import { IconTree, SDKUI_Globals, SDKUI_Localizator, IconRecentlyViewed, IconPreview, IconShow, IconBoard, IconDcmtTypeSys } from '../../../helper';
 import { useDeviceType, DeviceType } from '../../base/TMDeviceProvider';
-import TMLayoutContainer, { TMSplitterLayout, TMLayoutItem } from '../../base/TMLayout';
+import TMLayoutContainer, { TMLayoutItem } from '../../base/TMLayout';
 import TMRecentsManager from '../../grids/TMRecentsManager';
 import TMDcmtForm from '../documents/TMDcmtForm';
 import { StyledToppyTextContainer, StyledToppyText } from '../search/TMSearchQueryPanel';
 import TMTreeSelector from '../search/TMTreeSelector';
 import TMPanel from '../../base/TMPanel';
-import TMCommandsPanel from '../../sidebar/TMCommandsPanel';
+import { TMPanelManagerProvider, useTMPanelManagerContext } from '../../layout/panelManager/TMPanelManagerContext';
+import TMPanelManagerContainer from '../../layout/panelManager/TMPanelManagerContainer';
 const TMArchive = ({ inputTID }) => {
     const TIDs = SDKUI_Globals.userSettings.archivingSettings.mruTIDs;
     const [currentTID, setCurrentTID] = useState(0);
     const [mruTIDs, setMruTIDs] = useState(TIDs);
-    const [showRecentsPanel, setShowRecentsPanel] = useState(true);
-    const [showTreesPanel, setShowTreesPanel] = useState(true);
+    const [currentMruTID, setCurrentMruTID] = useState(0);
+    const [fromDTD, setFromDTD] = useState();
     const deviceType = useDeviceType();
     useEffect(() => { setMruTIDs(TIDs); }, []);
     useEffect(() => {
@@ -24,43 +25,128 @@ const TMArchive = ({ inputTID }) => {
             return;
         setCurrentTID(inputTID);
     }, [inputTID]);
-    const setSearchByTID = (tid) => { setCurrentTID(tid); };
-    const getPrimarySplitterStartValues = useCallback(() => {
-        if (deviceType === DeviceType.MOBILE) {
-            return ['0%', '100%'];
-        }
-        return showTreesPanel ? ['20%', '80%'] : ['0', '100%'];
-    }, [deviceType, showTreesPanel]);
-    const getSecondarySplitterStartValues = useCallback(() => {
-        if (deviceType === DeviceType.MOBILE) {
-            return currentTID ? ['0', '100%'] : ['100%', '0%'];
+    useEffect(() => {
+        if (!currentTID || currentTID <= 0) {
+            return;
         }
-        return showRecentsPanel ? ['25%', '75%'] : ['0', '100%'];
-    }, [deviceType, currentTID, showRecentsPanel]);
-    let customSidebarItems = useMemo(() => {
-        return ([
-            { icon: _jsx(IconTree, {}), selected: showTreesPanel, onClick: () => { setShowTreesPanel(!showTreesPanel); } },
-            { icon: _jsx(IconProgressReady, {}), selected: showRecentsPanel, onClick: () => { setShowRecentsPanel(!showRecentsPanel); } }
-        ]);
-    }, [showTreesPanel, showRecentsPanel]);
+        DcmtTypeListCacheService.GetAsync(currentTID).then(async (dtd) => {
+            setFromDTD(dtd);
+        });
+    }, [currentTID]);
+    const setSearchByTID = (tid) => { setCurrentTID(tid); };
     const isMobile = deviceType === DeviceType.MOBILE;
-    return (_jsxs("div", { style: {
-            display: 'flex',
-            flexDirection: isMobile ? 'column' : 'row',
-            justifyContent: 'space-between',
-            gap: SDKUI_Globals.userSettings.themeSettings.gutters,
-            width: '100%',
-            height: '100%',
-        }, children: [_jsx("div", { style: { flex: 1, minWidth: 0, height: '100%' }, children: _jsxs(TMSplitterLayout, { direction: 'horizontal', overflow: 'visible', separatorSize: SDKUI_Globals.userSettings.themeSettings.gutters, showSeparator: deviceType !== DeviceType.MOBILE && showTreesPanel, separatorColor: 'transparent', separatorActiveColor: 'transparent', min: ['0', '0'], start: getPrimarySplitterStartValues(), children: [showTreesPanel ? _jsx(TMLayoutItem, { children: deviceType !== DeviceType.MOBILE && _jsx(TMTreeSelector, { onClosePanel: () => setShowTreesPanel(false), layoutMode: LayoutModes.Ark, onSelectedTIDChanged: (tid) => { setSearchByTID(tid); } }) }) : _jsx(_Fragment, {}), _jsx(TMLayoutItem, { children: _jsxs(TMSplitterLayout, { separatorSize: SDKUI_Globals.userSettings.themeSettings.gutters, direction: 'horizontal', overflow: 'visible', showSeparator: deviceType !== DeviceType.MOBILE && showRecentsPanel, separatorColor: 'transparent', separatorActiveColor: 'transparent', min: ['0', '0'], start: getSecondarySplitterStartValues(), children: [showRecentsPanel ? _jsx(TMLayoutItem, { children: _jsx(TMPanel, { title: 'Recenti', onClose: () => setShowRecentsPanel(false), totalItems: mruTIDs.length, children: _jsx(TMRecentsManager, { mruTIDs: mruTIDs, deviceType: deviceType, onSelectedTID: (tid) => setCurrentTID(tid), onDeletedTID: (tid) => {
-                                                    let newMruTIDS = mruTIDs.slice();
-                                                    let index = newMruTIDS.findIndex(o => o == tid);
-                                                    if (index >= 0)
-                                                        newMruTIDS.splice(index, 1);
-                                                    SDKUI_Globals.userSettings.archivingSettings.mruTIDs = newMruTIDS.filter(tid => tid != undefined && tid != null);
-                                                    setMruTIDs(newMruTIDS);
-                                                } }) }) }) : _jsx(_Fragment, {}), _jsx(TMLayoutItem, { children: currentTID ?
-                                            _jsx(TMDcmtForm, { TID: currentTID, DID: undefined, layoutMode: LayoutModes.Ark, customRightSidebarItems: customSidebarItems, showPreview: deviceType !== DeviceType.MOBILE, onClose: deviceType === DeviceType.MOBILE ? () => setCurrentTID(undefined) : undefined, onSaveRecents: (TIDs) => setMruTIDs(TIDs) })
-                                            :
-                                                _jsx(TMPanel, { title: 'Archiviazione', children: _jsxs(TMLayoutContainer, { gap: 30, alignItems: 'center', justifyContent: 'center', children: [_jsxs(TMLayoutItem, { width: 'max-content', height: 'max-content', children: [" ", _jsxs(StyledToppyTextContainer, { children: [" ", _jsxs(StyledToppyText, { children: [" ", 'Selezionare un tipo documento', " "] }), " "] }), " "] }), _jsxs(TMLayoutItem, { width: 'max-content', height: 'max-content', children: [" ", _jsx("img", { src: Logo, width: 120, alt: '' }), " "] })] }) }) })] }) })] }) }), !currentTID ? _jsx(TMCommandsPanel, { isMobile: isMobile, items: customSidebarItems }) : _jsx(_Fragment, {})] }));
+    const tmTreeSelectorElement = useMemo(() => _jsx(TMTreeSelectorWrapper, { isMobile: isMobile, onSelectedTIDChanged: (tid) => {
+            setSearchByTID(tid);
+            if (tid && mruTIDs.includes(tid))
+                setCurrentMruTID(tid);
+            else
+                setCurrentMruTID(0);
+        } }), [isMobile]);
+    const tmRecentsManagerElement = useMemo(() => _jsx(TMRecentsManagerWrapper, { mruTIDs: mruTIDs, currentMruTID: currentMruTID, deviceType: deviceType, onSelectedTID: (tid) => {
+            setCurrentMruTID(tid);
+            setCurrentTID(tid);
+        }, onDeletedTID: (tid) => {
+            let newMruTIDS = mruTIDs.slice();
+            let index = newMruTIDS.findIndex(o => o == tid);
+            if (index >= 0)
+                newMruTIDS.splice(index, 1);
+            SDKUI_Globals.userSettings.searchSettings.mruTIDs = newMruTIDS.filter(tid => tid != undefined && tid != null);
+            setMruTIDs(newMruTIDS);
+        } }), [mruTIDs, currentMruTID, deviceType]);
+    const tmFormElement = useMemo(() => currentTID ?
+        _jsx(TMDcmtForm, { TID: currentTID, DID: undefined, groupId: 'tmForm', layoutMode: LayoutModes.Ark, showPreview: deviceType !== DeviceType.MOBILE, onClose: deviceType === DeviceType.MOBILE ? () => setCurrentTID(undefined) : undefined, onSaveRecents: (TIDs) => setMruTIDs(TIDs), showDcmtFormSidebar: false })
+        :
+            _jsx(TMPanel, { title: 'Archiviazione', children: _jsxs(TMLayoutContainer, { gap: 30, alignItems: 'center', justifyContent: 'center', children: [_jsxs(TMLayoutItem, { width: 'max-content', height: 'max-content', children: [" ", _jsxs(StyledToppyTextContainer, { children: [" ", _jsxs(StyledToppyText, { children: [" ", 'Selezionare un tipo documento', " "] }), " "] }), " "] }), _jsxs(TMLayoutItem, { width: 'max-content', height: 'max-content', children: [" ", _jsx("img", { src: Logo, width: 120, alt: '' }), " "] })] }) }), [currentTID, deviceType, mruTIDs]);
+    const allInitialPanelVisibility = {
+        'tmTreeSelector': true,
+        'tmRecentsManager': true,
+        'tmForm': true,
+        'tmDcmtForm': true,
+        'tmBlog': false,
+        'tmSysMetadata': false,
+        'tmDcmtPreview': true,
+    };
+    const initialPanelDimensions = {
+        'tmTreeSelector': { width: '20%', height: '100%' },
+        'tmRecentsManager': { width: '20%', height: '100%' },
+        'tmForm': { width: '60%', height: '100%' },
+        'tmDcmtForm': { width: '25%', height: '100%' },
+        'tmBlog': { width: '25%', height: '100%' },
+        'tmSysMetadata': { width: '25%', height: '100%' },
+        'tmDcmtPreview': { width: '25%', height: '100%' },
+    };
+    const initialPanels = useMemo(() => [
+        {
+            id: 'tmTreeSelector',
+            name: SDK_Localizator.Trees,
+            contentOptions: { component: tmTreeSelectorElement },
+            toolbarOptions: { icon: _jsx(IconTree, { fontSize: 24 }), visible: true, orderNumber: 1, isActive: allInitialPanelVisibility['tmTreeSelector'] }
+        },
+        {
+            id: 'tmRecentsManager',
+            name: SDKUI_Localizator.Shortcuts,
+            contentOptions: { component: tmRecentsManagerElement, panelContainer: { title: SDKUI_Localizator.Shortcuts, totalItems: mruTIDs.length } },
+            toolbarOptions: { icon: _jsx(IconRecentlyViewed, { fontSize: 24 }), visible: true, orderNumber: 2, isActive: allInitialPanelVisibility['tmRecentsManager'] }
+        },
+        {
+            id: 'tmForm',
+            name: fromDTD?.nameLoc ?? SDK_Localizator.Metadatas,
+            contentOptions: { component: tmFormElement },
+            toolbarOptions: { icon: _jsx(IconPreview, { fontSize: 24 }), visible: false, orderNumber: 3, isActive: allInitialPanelVisibility['tmForm'] },
+            children: [
+                {
+                    id: 'tmDcmtForm',
+                    name: SDK_Localizator.Metadatas,
+                    toolbarOptions: { icon: _jsx(IconPreview, { fontSize: 24 }), visible: false, orderNumber: 4, isActive: allInitialPanelVisibility['tmDcmtForm'] }
+                },
+                {
+                    id: 'tmBlog',
+                    name: SDKUI_Localizator.BlogCase,
+                    toolbarOptions: { icon: _jsx(IconBoard, { fontSize: 24 }), visible: false, orderNumber: 5, isActive: allInitialPanelVisibility['tmBlog'] }
+                },
+                {
+                    id: 'tmSysMetadata',
+                    name: SDKUI_Localizator.MetadataSystem,
+                    toolbarOptions: { icon: _jsx(IconDcmtTypeSys, { fontSize: 24 }), visible: false, orderNumber: 6, isActive: allInitialPanelVisibility['tmSysMetadata'] }
+                },
+                {
+                    id: 'tmDcmtPreview',
+                    name: SDKUI_Localizator.PreviewDocument,
+                    toolbarOptions: { icon: _jsx(IconShow, { fontSize: 24 }), visible: false, orderNumber: 7, isActive: allInitialPanelVisibility['tmDcmtPreview'] }
+                }
+            ]
+        },
+    ], [tmTreeSelectorElement, tmRecentsManagerElement, tmFormElement, currentTID, mruTIDs]);
+    return (_jsx(TMPanelManagerProvider, { panels: initialPanels, initialVisibility: allInitialPanelVisibility, initialDimensions: initialPanelDimensions, initialMobilePanelId: 'tmRecentsManager', children: _jsx(TMPanelManagerContainer, { panels: initialPanels, direction: "horizontal", showToolbar: true }) }));
 };
 export default TMArchive;
+const TMTreeSelectorWrapper = ({ isMobile, onSelectedTIDChanged }) => {
+    const { setPanelVisibilityById, toggleMaximize, setToolbarButtonVisibility } = useTMPanelManagerContext();
+    return (_jsx(TMTreeSelector, { onClosePanel: () => setPanelVisibilityById('tmTreeSelector', false), onMaximizePanel: () => toggleMaximize('tmTreeSelector'), onSelectedTIDChanged: (tid) => {
+            onSelectedTIDChanged?.(tid);
+            if (isMobile)
+                setPanelVisibilityById('tmForm', true);
+            else {
+                setPanelVisibilityById('tmDcmtForm', true);
+                setPanelVisibilityById('tmDcmtPreview', true);
+            }
+            setToolbarButtonVisibility('tmDcmtPreview', true);
+            setToolbarButtonVisibility('tmDcmtForm', true);
+        } }));
+};
+const TMRecentsManagerWrapper = ({ mruTIDs, currentMruTID, deviceType, onSelectedTID, onDeletedTID }) => {
+    const { setPanelVisibilityById, setToolbarButtonVisibility } = useTMPanelManagerContext();
+    return (_jsx(TMRecentsManager, { mruTIDs: mruTIDs, currentMruTID: currentMruTID, deviceType: deviceType, onSelectedTID: (tid) => {
+            onSelectedTID?.(tid);
+            if (deviceType === DeviceType.MOBILE)
+                setPanelVisibilityById('tmForm', true);
+            else {
+                setPanelVisibilityById('tmDcmtForm', true);
+                setPanelVisibilityById('tmDcmtPreview', true);
+            }
+            setToolbarButtonVisibility('tmDcmtPreview', true);
+            setToolbarButtonVisibility('tmDcmtForm', true);
+        }, onDeletedTID: (tid) => {
+            onDeletedTID?.(tid);
+        } }));
+};

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

@@ -23,6 +23,7 @@ interface ITMDcmtFormProps {
     canNext?: boolean;
     canPrev?: boolean;
     isClosable?: boolean;
+    groupId?: string;
     onNext?: () => void;
     onPrev?: () => void;
     onClose?: () => void;