@topconsultnpm/sdkui-react-beta 6.13.104 → 6.14.0

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

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

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

@@ -9,7 +9,7 @@ import { DownloadTypes, FormModes } from '../../../ts';
 import { DeviceType, useDeviceType } from '../../base/TMDeviceProvider';
 import { useDcmtOperations } from '../../../hooks/useDcmtOperations';
 import { handleArchiveVisibility, searchResultToMetadataValues } from '../../../helper/queryHelper';
-import { genUniqueId, IconShow, SDKUI_Localizator, IconBoard, IconDcmtTypeSys, IconDetailDcmts, svgToString, IconDownload, calcIsModified, IconMenuVertical, Globalization, getListMaxItems, getSystemMetadata, IconBoxArchiveIn, IconClear, IconUndo, SDKUI_Globals, IconPreview } from '../../../helper';
+import { genUniqueId, IconShow, SDKUI_Localizator, IconBoard, IconDcmtTypeSys, IconDetailDcmts, svgToString, IconDownload, calcIsModified, IconMenuVertical, Globalization, getListMaxItems, getSystemMetadata, IconBoxArchiveIn, IconClear, IconUndo, SDKUI_Globals, IconPreview, defaultDcmtFormLayout } from '../../../helper';
 import { hasDetailRelations, hasMasterRelations, isXMLFileExt } from '../../../helper/dcmtsHelper';
 import { TMColors } from '../../../utils/theme';
 import { StyledFormButtonsContainer, StyledModalContainer, StyledToolbarCardContainer } from '../../base/Styled';
@@ -33,7 +33,7 @@ import { TMPanelManagerProvider, useTMPanelManagerContext } from '../../layout/p
 import TMPanelManagerContainer from '../../layout/panelManager/TMPanelManagerContainer';
 let abortControllerLocal = new AbortController();
 //#endregion
-const TMDcmtForm = ({ showHeader = true, onSaveRecents, layoutMode = LayoutModes.Update, onClose, onSavedAsyncCallback, TID, DID, formMode = FormModes.Update, canNext, canPrev, count, itemIndex, onNext, onPrev, customRightSidebarItems = [], allowNavigation = true, allowRelations = true, isClosable = false, isExpertMode = SDKUI_Globals.userSettings.advancedSettings.expertMode === 1, showDcmtForm = true, showDcmtFormSidebar = true, showPreview = false, showBoard = false, showSysMetadata = false, onClosePreviewPanel, onCloseBlogPanel, onCloseSysMetadataPanel, titleModal, isModal = false, widthModal = "100%", heightModal = "100%", groupId }) => {
+const TMDcmtForm = ({ showHeader = true, onSaveRecents, layoutMode = LayoutModes.Update, onClose, onSavedAsyncCallback, TID, DID, formMode = FormModes.Update, canNext, canPrev, count, itemIndex, onNext, onPrev, allowNavigation = true, allowRelations = true, isClosable = false, isExpertMode = SDKUI_Globals.userSettings.advancedSettings.expertMode === 1, showDcmtFormSidebar = true, invokedByTodo = false, titleModal, isModal = false, widthModal = "100%", heightModal = "100%", groupId }) => {
     const mruTIDs = SDKUI_Globals.userSettings.archivingSettings.mruTIDs;
     const [id, setID] = useState('');
     const [showWaitPanelLocal, setShowWaitPanelLocal] = useState(false);
@@ -58,13 +58,8 @@ const TMDcmtForm = ({ showHeader = true, onSaveRecents, layoutMode = LayoutModes
     const [isOpenDetails, setIsOpenDetails] = useState(false);
     const [isOpenMaster, setIsOpenMaster] = useState(false);
     const [secondaryMasterDcmts, setSecondaryMasterDcmts] = useState([]);
-    const [isOpenDcmtForm, setIsOpenDcmtForm] = useState(false);
-    const [isOpenPreview, setIsOpenPreview] = useState(false);
-    const [isOpenSysMetadata, setIsOpenSysMetadata] = useState(false);
-    const [isOpenBoard, setIsOpenBoard] = useState(false);
     const [isOpenDistinctValues, setIsOpenDistinctValues] = useState(false);
     const [isOpenFormulaEditor, setIsOpenFormulaEditor] = useState(false);
-    const [isOpenTags, setIsOpenTags] = useState(false);
     const [currentTIDHasDetailRelations, setCurrentTIDHasDetailRelations] = useState();
     const [currentTIDHasMasterRelations, setCurrentTIDHasMasterRelations] = useState();
     const [currentDcmt, setCurrentDcmt] = useState();
@@ -122,10 +117,6 @@ const TMDcmtForm = ({ showHeader = true, onSaveRecents, layoutMode = LayoutModes
             }
         }
     }, [formData]);
-    useEffect(() => { setIsOpenBoard(showBoard); }, [showBoard]);
-    useEffect(() => { setIsOpenSysMetadata(showSysMetadata); }, [showSysMetadata]);
-    useEffect(() => { setIsOpenDcmtForm(showDcmtForm); }, [showDcmtForm]);
-    useEffect(() => { setIsOpenPreview(showPreview); }, [showPreview]);
     useEffect(() => {
         hasDetailRelations(TID).then((value) => setCurrentTIDHasDetailRelations(value));
         hasMasterRelations(TID).then((value) => setCurrentTIDHasMasterRelations(value));
@@ -439,18 +430,56 @@ const TMDcmtForm = ({ showHeader = true, onSaveRecents, layoutMode = LayoutModes
     const tmDcmtPreview = useMemo(() => _jsx(TMDcmtPreviewWrapper, { currentDcmt: currentDcmt, dcmtFile: dcmtFile, deviceType: deviceType, fromDTD: fromDTD, layoutMode: layoutMode, onFileUpload: (setFile) => {
             setDcmtFile(setFile);
         } }), [currentDcmt, dcmtFile, deviceType, fromDTD, layoutMode]);
-    const allInitialPanelVisibility = {
-        'tmDcmtForm': true,
-        'tmBlog': false,
-        'tmSysMetadata': false,
-        'tmDcmtPreview': true,
-    };
-    const initialPanelDimensions = {
+    const normalizedTID = TID !== undefined ? Number(TID) : undefined;
+    const dcmtFormSettings = SDKUI_Globals.userSettings.dcmtFormSettings.find(o => o.TID === normalizedTID);
+    const layout = dcmtFormSettings?.layout;
+    const layoutToDo = dcmtFormSettings?.layoutToDo;
+    const layoutObj = invokedByTodo ? layoutToDo : layout;
+    const defaultPanelDimensions = {
         'tmDcmtForm': { width: '20%', height: '100%' },
         'tmBlog': { width: '30%', height: '100%' },
         'tmSysMetadata': { width: '20%', height: '100%' },
         'tmDcmtPreview': { width: '30%', height: '100%' },
     };
+    const allInitialPanelVisibility = useMemo(() => {
+        if (layoutObj) {
+            return {
+                'tmDcmtForm': layoutObj['tmDcmtForm']?.visible ?? true,
+                'tmBlog': layoutObj['tmBlog']?.visible ?? false,
+                'tmSysMetadata': layoutObj['tmSysMetadata']?.visible ?? false,
+                'tmDcmtPreview': layoutObj['tmDcmtPreview']?.visible ?? true,
+            };
+        }
+        return {
+            'tmDcmtForm': true,
+            'tmBlog': false,
+            'tmSysMetadata': false,
+            'tmDcmtPreview': true,
+        };
+    }, [layoutObj]);
+    const initialPanelDimensions = useMemo(() => {
+        if (layoutObj) {
+            return {
+                'tmDcmtForm': {
+                    width: layoutObj['tmDcmtForm']?.width ?? '20%',
+                    height: layoutObj['tmDcmtForm']?.height ?? '100%',
+                },
+                'tmBlog': {
+                    width: layoutObj['tmBlog']?.width ?? '30%',
+                    height: layoutObj['tmBlog']?.height ?? '100%',
+                },
+                'tmSysMetadata': {
+                    width: layoutObj['tmSysMetadata']?.width ?? '20%',
+                    height: layoutObj['tmSysMetadata']?.height ?? '100%',
+                },
+                'tmDcmtPreview': {
+                    width: layoutObj['tmDcmtPreview']?.width ?? '30%',
+                    height: layoutObj['tmDcmtPreview']?.height ?? '100%',
+                },
+            };
+        }
+        return defaultPanelDimensions;
+    }, [layoutObj]);
     const initialPanels = useMemo(() => [
         {
             id: 'tmDcmtForm',
@@ -463,7 +492,7 @@ const TMDcmtForm = ({ showHeader = true, onSaveRecents, layoutMode = LayoutModes
                     title: fromDTD?.nameLoc,
                     allowMaximize: !isMobile,
                     onBack: (isClosable && deviceType !== DeviceType.MOBILE) ? undefined : handleClose,
-                    onClose: isClosable ? () => setIsOpenDcmtForm(false) : undefined,
+                    onClose: isClosable ? () => { } : undefined,
                     toolbar: allowNavigation ? formToolbar : _jsx(_Fragment, {})
                 },
             },
@@ -493,6 +522,36 @@ 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]);
+    function saveLayout(panelVisibility, panelDimensions) {
+        // console.log('panelVisibility', panelVisibility)
+        // console.log('panelDimensions', panelDimensions)
+        if (normalizedTID === undefined)
+            return;
+        const layoutPanels = {};
+        Object.keys(panelVisibility).forEach(id => {
+            layoutPanels[id] = {
+                visible: panelVisibility[id],
+                width: panelDimensions[id]?.width ?? defaultPanelDimensions[id]?.width ?? '100%',
+                height: panelDimensions[id]?.height ?? defaultPanelDimensions[id]?.height ?? '100%'
+            };
+        });
+        // console.log('layoutPanels', layoutPanels)
+        const settings = SDKUI_Globals.userSettings.dcmtFormSettings;
+        const idx = settings.findIndex(s => Number(s.TID) === normalizedTID);
+        const prevSetting = settings[idx] ?? {};
+        const newSetting = {
+            TID: normalizedTID,
+            layout: invokedByTodo ? (prevSetting.layout ?? defaultDcmtFormLayout) : layoutPanels,
+            layoutToDo: invokedByTodo ? layoutPanels : (prevSetting.layoutToDo ?? defaultDcmtFormLayout),
+        };
+        if (idx >= 0) {
+            settings[idx] = newSetting;
+        }
+        else {
+            settings.push(newSetting);
+        }
+        SDKUI_Globals.userSettings.dcmtFormSettings = [...settings];
+    }
     const renderDcmtForm = () => {
         return (_jsxs("div", { style: {
                 display: 'flex',
@@ -503,7 +562,7 @@ const TMDcmtForm = ({ showHeader = true, onSaveRecents, layoutMode = LayoutModes
                 height: '100%',
             }, children: [_jsxs(TMLayoutWaitingContainer, { direction: 'vertical', showWaitPanel: useWaitPanelLocalState ? showWaitPanelLocal : showWaitPanel, showWaitPanelPrimary: useWaitPanelLocalState ? showPrimaryLocal : showPrimary, showWaitPanelSecondary: useWaitPanelLocalState ? showSecondaryLocal : showSecondary, waitPanelTitle: useWaitPanelLocalState ? waitPanelTitleLocal : waitPanelTitle, waitPanelTextPrimary: useWaitPanelLocalState ? waitPanelTextPrimaryLocal : waitPanelTextPrimary, waitPanelValuePrimary: useWaitPanelLocalState ? waitPanelValuePrimaryLocal : waitPanelValuePrimary, waitPanelMaxValuePrimary: useWaitPanelLocalState ? waitPanelMaxValuePrimaryLocal : waitPanelMaxValuePrimary, waitPanelTextSecondary: useWaitPanelLocalState ? waitPanelTextSecondaryLocal : waitPanelTextSecondary, waitPanelValueSecondary: useWaitPanelLocalState ? waitPanelValueSecondaryLocal : waitPanelValueSecondary, waitPanelMaxValueSecondary: useWaitPanelLocalState ? waitPanelMaxValueSecondaryLocal : waitPanelMaxValueSecondary, isCancelable: useWaitPanelLocalState ? dcmtFile ? dcmtFile.size >= 1000000 : false : true, abortController: useWaitPanelLocalState ? abortControllerLocal : abortController, children: [(groupId && groupId.length > 0)
                             ? _jsx(TMPanelManagerContainer, { panels: initialPanels, direction: "horizontal", parentId: groupId, showToolbar: showDcmtFormSidebar })
-                            : _jsx(TMPanelManagerProvider, { panels: initialPanels, initialVisibility: allInitialPanelVisibility, initialDimensions: initialPanelDimensions, initialMobilePanelId: 'tmDcmtForm', children: _jsx(TMPanelManagerContainer, { panels: initialPanels, direction: "horizontal", parentId: groupId, showToolbar: showDcmtFormSidebar }) }), isOpenDistinctValues &&
+                            : _jsx(TMPanelManagerProvider, { panels: initialPanels, initialVisibility: allInitialPanelVisibility, initialDimensions: initialPanelDimensions, initialMobilePanelId: 'tmDcmtForm', children: _jsx(TMPanelManagerContainer, { panels: initialPanels, direction: "horizontal", parentId: groupId, showToolbar: showDcmtFormSidebar, onLayoutChanged: saveLayout }) }), isOpenDistinctValues &&
                             _jsx(TMDistinctValues, { tid: TID, mid: focusedMetadataValue?.mid, isModal: true, showHeader: false, layoutMode: layoutMode, onSelectionChanged: (e) => {
                                     if (!e)
                                         return;
@@ -526,7 +585,8 @@ const TMDcmtForm = ({ showHeader = true, onSaveRecents, layoutMode = LayoutModes
                                 return (_jsx(StyledModalContainer, { style: { backgroundColor: 'white' }, children: _jsx(TMMasterDetailDcmts, { deviceType: deviceType, inputDcmts: [dcmt], isForMaster: true, allowNavigation: false, onBack: () => handleRemoveItem(dcmt.TID, dcmt.DID), appendMasterDcmts: handleAddItem }) }, `${index}-${dcmt.DID}`));
                             })] })] }));
     };
-    return (_jsx(_Fragment, { children: (isModal && onClose) ? _jsx(_Fragment, { children: _jsx(TMModal, { title: titleModal, onClose: handleClose, width: widthModal ?? '100%', height: heightModal ?? '100%', hidePopup: false, askClosingConfirm: true, children: _jsx("div", { style: { width: "100%", height: "100%", display: 'block', padding: "4px" }, children: renderDcmtForm() }) }) })
+    return (_jsx(_Fragment, { children: (isModal && onClose)
+            ? _jsx(TMModal, { title: titleModal, onClose: handleClose, width: widthModal ?? '100%', height: heightModal ?? '100%', hidePopup: false, askClosingConfirm: true, children: _jsx("div", { style: { width: "100%", height: "100%", display: 'block', padding: "4px" }, children: renderDcmtForm() }) })
             : renderDcmtForm() }));
 };
 export default TMDcmtForm;

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

@@ -1,9 +1,12 @@
-import { TMPanelDefinition, TMPanelDirection } from './types';
+import { TMPanelDefinition, TMPanelDimensionsMap, TMPanelDirection } from './types';
 interface TMPanelManagerContainerProps {
     panels: Array<TMPanelDefinition>;
     showToolbar: boolean;
     direction: TMPanelDirection;
     parentId?: string;
+    onLayoutChanged?: (panelVisibility: {
+        [id: string]: boolean;
+    }, panelDimensions: TMPanelDimensionsMap) => void;
 }
 declare const TMPanelManagerContainer: (props: TMPanelManagerContainerProps) => import("react/jsx-runtime").JSX.Element | null;
 export default TMPanelManagerContainer;

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useRef, useMemo } from 'react';
+import React, { useRef, useMemo, useEffect } from 'react';
 import styled from 'styled-components';
 import { useTMPanelManagerContext } from './TMPanelManagerContext';
 import TMPanelWrapper from './TMPanelWrapper';
@@ -23,8 +23,13 @@ const StyledResizerGutter = styled.div `
   z-index: 10;
 `;
 const TMPanelManagerContainer = (props) => {
-    const { panels, showToolbar, direction, parentId } = props;
-    const { panelVisibility, setPanelDimensionsById, hasVisiblePanels, maximizedPanels, updateIsResizingActive } = useTMPanelManagerContext();
+    const { panels, showToolbar, direction, parentId, onLayoutChanged } = props;
+    const { panelVisibility, panelDimensions, setPanelDimensionsById, hasVisiblePanels, maximizedPanels, updateIsResizingActive } = useTMPanelManagerContext();
+    // Returns data to parent for saving layout, only for desktop
+    useEffect(() => {
+        // console.log('useEffect panelVisibility, panelDimensions', panelVisibility, panelDimensions)
+        deviceType === DeviceType.DESKTOP && onLayoutChanged?.(panelVisibility, panelDimensions);
+    }, [panelVisibility, panelDimensions]);
     // Get the current device type (e.g., mobile, tablet, desktop) using a custom hook
     const deviceType = useDeviceType();
     // This avoids unnecessary re-renders by only recalculating when deviceType changes

package/lib/helper/SDKUI_Globals.d.ts

@@ -14,6 +14,7 @@ export declare class UserSettings {
     fullTextSettings: FullTextSettings;
     searchSettings: SearchSettings;
     themeSettings: ThemeSettings;
+    dcmtFormSettings: DcmtFormSettings[];
     constructor(skipCssUpdate?: boolean);
     /** Load settings from local storage or other sources */
     static LoadSettings(userID: number | undefined, archiveID: string | undefined): UserSettings;
@@ -54,6 +55,30 @@ export declare class AdvancedSettings {
         expertMode: number;
     };
 }
+export declare const defaultDcmtFormLayout: {
+    [id: string]: {
+        visible: boolean;
+        width: string;
+        height: string;
+    };
+};
+export declare class DcmtFormSettings {
+    TID: number | undefined;
+    layout: {
+        [id: string]: {
+            visible: boolean;
+            width: string;
+            height: string;
+        };
+    };
+    layoutToDo: {
+        [id: string]: {
+            visible: boolean;
+            width: string;
+            height: string;
+        };
+    };
+}
 export declare class SDKUI_Globals {
     static userSettings: UserSettings;
 }

package/lib/helper/SDKUI_Globals.js

@@ -17,6 +17,7 @@ export class UserSettings {
         this.fullTextSettings = new FullTextSettings();
         this.searchSettings = new SearchSettings();
         this.themeSettings = new ThemeSettings(true);
+        this.dcmtFormSettings = [];
         this.themeSettings = new ThemeSettings(skipCssUpdate);
     }
     /** Load settings from local storage or other sources */
@@ -114,6 +115,18 @@ export class AdvancedSettings {
         };
     }
 }
+export const defaultDcmtFormLayout = {
+    'tmDcmtForm': { visible: true, width: '20%', height: '100%' },
+    'tmBlog': { visible: false, width: '30%', height: '100%' },
+    'tmSysMetadata': { visible: false, width: '20%', height: '100%' },
+    'tmDcmtPreview': { visible: true, width: '30%', height: '100%' },
+};
+export class DcmtFormSettings {
+    constructor() {
+        this.layout = defaultDcmtFormLayout;
+        this.layoutToDo = defaultDcmtFormLayout;
+    }
+}
 export class SDKUI_Globals {
 }
 SDKUI_Globals.userSettings = new UserSettings(true);

package/lib/hooks/useDcmtOperations.js

@@ -68,12 +68,11 @@ export function useDcmtOperations() {
                     });
                 }
                 setWaitPanelValuePrimary(i + 1);
+                const fileURL = window.URL.createObjectURL(file);
                 if (downloadMode === "openInNewWindow") {
-                    const fileURL = window.URL.createObjectURL(file);
                     window.open(fileURL, '_blank', 'noopener');
                 }
                 else {
-                    const fileURL = window.URL.createObjectURL(file);
                     const alink2 = document.createElement('a');
                     alink2.href = fileURL;
                     alink2.download = inputDcmts[i].fileName ?? file?.name;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@topconsultnpm/sdkui-react-beta",
-    "version": "6.13.104",
+    "version": "6.14.0",
     "description": "",
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",
@@ -42,7 +42,7 @@
         "lib"
     ],
     "dependencies": {
-        "@topconsultnpm/sdk-ts-beta": "6.13.11",
+        "@topconsultnpm/sdk-ts-beta": "6.14.0",
         "buffer": "^6.0.3",
         "devextreme": "24.2.6",
         "devextreme-react": "24.2.6",