@topconsultnpm/sdkui-react 6.19.0-test.1 → 6.19.0-test2

package/lib/components/base/TMCounterContainer.js

@@ -2,38 +2,38 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styled from "styled-components";
 import TMTooltip from './TMTooltip';
 /* Styled container component that holds all counter items */
-const Container = styled.div `
-    background: ${({ bgColor }) => bgColor || 'linear-gradient(to right, #f8f9fa, #e9ecef)'};
-    display: flex;
-    align-items: center;
-    width: 100%;
-    padding: 4px 8px;
-    box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.1);
-    gap: 8px;
+const Container = styled.div `
+    background: ${({ bgColor }) => bgColor || 'linear-gradient(to right, #f8f9fa, #e9ecef)'};
+    display: flex;
+    align-items: center;
+    width: 100%;
+    padding: 4px 8px;
+    box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.1);
+    gap: 8px;
 `;
 /* Styled counter item component with customizable styles */
-const Counter = styled.div `
-    display: flex;
-    align-items: center;
-    border-right: 1px solid rgba(211, 211, 211, 0.5);
-    padding: 4px 10px;
-    gap: 8px;
-    transition: all 0.3s ease-in-out;
-    background: ${({ color }) => color || 'rgba(255, 255, 255, 0.6)'};
-    
-    &:last-child {
-        border-right: none;
-    }
-
-    svg {
-        color: ${({ textColor }) => textColor || '#495057'};
-        transition: color 0.3s ease-in-out;
-    }
-
-    span {
-        color: ${({ textColor }) => textColor || '#495057'};
-        transition: color 0.3s ease-in-out;
-    }
+const Counter = styled.div `
+    display: flex;
+    align-items: center;
+    border-right: 1px solid rgba(211, 211, 211, 0.5);
+    padding: 4px 10px;
+    gap: 8px;
+    transition: all 0.3s ease-in-out;
+    background: ${({ color }) => color || 'rgba(255, 255, 255, 0.6)'};
+    
+    &:last-child {
+        border-right: none;
+    }
+
+    svg {
+        color: ${({ textColor }) => textColor || '#495057'};
+        transition: color 0.3s ease-in-out;
+    }
+
+    span {
+        color: ${({ textColor }) => textColor || '#495057'};
+        transition: color 0.3s ease-in-out;
+    }
 `;
 /* Enum for possible counter item keys */
 export var CounterItemKey;

package/lib/components/base/TMCustomButton.d.ts

@@ -7,5 +7,5 @@ type TMCustomButtonProps = {
     selectedItems?: Array<any>;
     onClose?: () => void;
 };
-declare const TMCustomButton: (props: TMCustomButtonProps) => import("react/jsx-runtime").JSX.Element | null;
+declare const TMCustomButton: (props: TMCustomButtonProps) => false | import("react/jsx-runtime").JSX.Element;
 export default TMCustomButton;

package/lib/components/base/TMCustomButton.js

@@ -1,63 +1,118 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { SDK_Globals } from '@topconsultnpm/sdk-ts';
-import { useEffect, useRef, useState } from 'react';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useRef, useState, useMemo } from 'react';
 import TMModal from './TMModal';
 import styled from 'styled-components';
-import { processButtonAttributes } from '../../helper/dcmtsHelper';
-const IframeContainer = styled.div `
-  display: flex;
-  height: 100%;
-  flex-direction: column;
+import { SDKUI_Localizator, TMLayoutWaitingContainer } from '../..';
+import { getButtonAttributes, getSelectedItem } from '../../helper/dcmtsHelper';
+const IframeContainer = styled.div `
+  display: flex;
+  height: 100%;
+  flex-direction: column;
+  padding-left: 15px;
 `;
-const StyledIframe = styled.iframe `
-  border: none;
-  flex: 1;
+const StyledIframe = styled.iframe `
+  border: none;
+  flex: 1;
 `;
 const TMCustomButton = (props) => {
     const { button, isModal = true, formData, selectedItems, onClose } = props;
     const { appName: scriptUrl, arguments: args } = button;
     const iframeRef = useRef(null);
-    const attributes = processButtonAttributes(args, formData);
+    const attributes = useMemo(() => getButtonAttributes(args, formData, selectedItems), [args, formData, selectedItems]);
+    const RunOnce = button.mode === "RunOnce";
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState(false);
-    const getTargetOrigin = (url) => {
-        if (!url)
+    const selectedItemsCount = selectedItems?.length || 0;
+    // Stati per il wait panel
+    const [showWaitPanel, setShowWaitPanel] = useState(selectedItemsCount > 0 && !RunOnce);
+    const [waitPanelText, setWaitPanelText] = useState(SDKUI_Localizator.CustomButtonActions.replaceParams(1, selectedItemsCount));
+    const [waitPanelValue, setWaitPanelValue] = useState(0);
+    const [waitPanelMaxValue, setWaitPanelMaxValue] = useState(selectedItemsCount);
+    const [abortController, setAbortController] = useState(undefined);
+    const targetOrigin = useMemo(() => {
+        if (!scriptUrl)
             return '*';
         try {
-            const urlObj = new URL(url);
+            const urlObj = new URL(scriptUrl);
             return urlObj.origin;
         }
         catch {
             return '*';
         }
-    };
-    useEffect(() => {
-        if (iframeRef.current?.contentWindow) {
-            const mergedAttributes = { ...attributes, selectedItems: selectedItems };
-            iframeRef.current.contentWindow.postMessage({
-                "options": mergedAttributes,
-                "selectedItems": selectedItems,
-                "session": SDK_Globals.tmSession
-            }, getTargetOrigin(scriptUrl));
-        }
-        clearTimeout(timeoutIframe);
-    }, [loading, error, scriptUrl, attributes]);
+    }, [scriptUrl]);
     const handleLoad = () => setLoading(false);
     const handleError = () => {
         setLoading(false);
         setError(true);
     };
-    // Timeout di sicurezza nel caso l'evento 'error' non venga chiamato
-    const timeoutIframe = setTimeout(() => {
-        if (loading)
-            handleError();
-    }, 5000); // 5 secondi
+    const executeSequentially = async (controller) => {
+        if (!selectedItems)
+            return;
+        for (const [index, item] of selectedItems.entries()) {
+            if (controller.signal.aborted)
+                break;
+            setWaitPanelText(SDKUI_Localizator.CustomButtonActions.replaceParams(index + 1, selectedItemsCount));
+            setWaitPanelValue(index);
+            // Attendi che l'iframe sia pronto e invia il messaggio
+            await new Promise((resolve) => {
+                const checkIframe = setInterval(() => {
+                    if (iframeRef.current?.contentWindow) {
+                        clearInterval(checkIframe);
+                        //devo convertire item in formData
+                        const processedItem = getSelectedItem(args, formData, item);
+                        postMessageIframe(processedItem);
+                        // Attendi prima di passare al prossimo
+                        setTimeout(() => {
+                            setWaitPanelValue(index + 1);
+                            resolve();
+                        }, 500);
+                    }
+                }, 100);
+            });
+        }
+        setShowWaitPanel(false);
+        onClose?.();
+    };
+    const postMessageIframe = (data) => {
+        console.log("TMCustomButton - postMessageIframe - data:", data);
+        if (iframeRef.current?.contentWindow) {
+            iframeRef.current.contentWindow.postMessage({ "options": data }, targetOrigin);
+        }
+    };
+    useEffect(() => {
+        if (loading || error)
+            return;
+        //if(error) clearTimeout(timeoutIframe);
+        if (!RunOnce && selectedItemsCount > 0) {
+            // esegui per ogni item selezionato
+            const controller = new AbortController();
+            controller.signal.addEventListener('abort', () => {
+                setShowWaitPanel(false);
+                onClose?.();
+            });
+            setAbortController(controller);
+            setWaitPanelMaxValue(selectedItemsCount);
+            executeSequentially(controller);
+        }
+        else {
+            // Modalità RunOnce: invia dati all'iframe quando è caricato
+            postMessageIframe(attributes);
+            if (!RunOnce) {
+                //chiudo l'iframe dopo 2 secondi
+                setTimeout(() => {
+                    onClose?.();
+                }, 2000);
+            }
+            //clearTimeout(timeoutIframe);
+        }
+    }, [loading, error, RunOnce]);
     useEffect(() => {
-        if (!isModal && scriptUrl) {
+        if (!isModal && RunOnce && scriptUrl) {
             window.open(scriptUrl, '_blank');
             onClose?.();
         }
-    }, [isModal, scriptUrl, onClose]);
-    return isModal ? (_jsx(TMModal, { title: button.title, width: '60%', height: '60%', resizable: true, onClose: onClose, children: _jsxs(IframeContainer, { children: [error && _jsx("div", { children: "Si \u00E8 verificato un errore nel caricamento del contenuto." }), !error && _jsx(StyledIframe, { ref: iframeRef, loading: 'lazy', onLoad: handleLoad, onError: handleError, src: scriptUrl })] }) })) : null;
+    }, []);
+    const iframeContent = (_jsxs(IframeContainer, { style: !RunOnce ? { visibility: 'hidden' } : {}, children: [error && _jsx("div", { children: "Si \u00E8 verificato un errore nel caricamento del contenuto." }), !error && _jsx(StyledIframe, { ref: iframeRef, loading: 'lazy', onLoad: handleLoad, onError: handleError, src: scriptUrl })] }));
+    return isModal && RunOnce ? (_jsx(TMModal, { title: button.title, width: '60%', height: '70%', resizable: true, expandable: true, onClose: onClose, children: iframeContent })) : !RunOnce && (_jsxs(_Fragment, { children: [_jsx(TMLayoutWaitingContainer, { showWaitPanel: showWaitPanel, waitPanelTitle: SDKUI_Localizator.CustomButtonAction, showWaitPanelPrimary: true, waitPanelTextPrimary: waitPanelText, waitPanelValuePrimary: waitPanelValue, waitPanelMaxValuePrimary: waitPanelMaxValue, showWaitPanelSecondary: false, isCancelable: true, abortController: abortController, children: undefined }), iframeContent] }));
 };
 export default TMCustomButton;

package/lib/components/base/TMDataGridExportForm.d.ts

@@ -1,4 +1,4 @@
-import { IColumnProps } from 'devextreme-react/cjs/data-grid';
+import { IColumnProps } from 'devextreme-react/data-grid';
 import { SearchResultDescriptor } from '@topconsultnpm/sdk-ts';
 export type FormatOption = {
     value: 'csv' | 'xlsx' | 'xls' | 'txt';

package/lib/components/base/TMDataGridExportForm.js

@@ -64,7 +64,7 @@ const TMDataGridExportForm = (props) => {
             // Retrieve columns from the search result, or use an empty array if not available
             const columns = searchResult?.dtdResult?.columns ?? [];
             // If exportDescriptionsForDataLists is true, build a map of values to labels for the columns; otherwise use an empty Map
-            const { valueToNameMap, captions } = exportDescriptionsForDataLists ? await buildValueToLabelMapFromDataColumns(columns) : { valueToNameMap: new Map(), captions: new Set() };
+            const valueToNameMap = exportDescriptionsForDataLists ? await buildValueToLabelMapFromDataColumns(columns) : new Map();
             // Create a Set from selectedRowKeys for efficient lookup
             const selectedSet = new Set(selectedRowKeys);
             // If exporting only selected rows, filter the dataSource accordingly; otherwise use the full dataSource
@@ -82,8 +82,14 @@ const TMDataGridExportForm = (props) => {
             const getValue = (col, value) => {
                 // Replace raw value with corresponding label from the map if applicable
                 let result = value;
-                if (exportDescriptionsForDataLists && col.caption && captions.has(col.caption.toString())) {
-                    result = valueToNameMap.get(value) ?? value;
+                if (exportDescriptionsForDataLists && col.dataField && valueToNameMap.size > 0) {
+                    const mapForField = valueToNameMap.get(col.dataField);
+                    if (mapForField) {
+                        result = mapForField.get(value) ?? value;
+                    }
+                    else {
+                        result = value;
+                    }
                 }
                 // If the column is a datetime type, attempt to format it as a locale date string
                 if (col.dataType === 'datetime' && result) {

package/lib/components/base/TMDropDownMenu.js

@@ -4,31 +4,31 @@ import styled from 'styled-components';
 import ContextMenu from 'devextreme-react/context-menu';
 import { FontSize, TMColors } from '../../utils/theme';
 import { genUniqueId } from '../../helper';
-const StyledContent = styled.div `
-    cursor: pointer;
-    border-radius: ${props => props.$borderRadius};
-    color: ${props => props.$color};
-    /* background-color: ${props => props.$backgroundColor}; */
-    background-color: transparent;
-    opacity: ${props => props.$disabled ? 0.4 : 1};
-    pointer-events: ${props => props.$disabled ? 'none' : ''};
-    user-select: none;
-    display: flex;
-    align-items: center;
-
-    &:focus {
-        outline: none;
-        border-bottom: ${props => props.$disabled ? '' : '2px solid'};
-        border-bottom-color: ${TMColors.primary};
-    }
+const StyledContent = styled.div `
+    cursor: pointer;
+    border-radius: ${props => props.$borderRadius};
+    color: ${props => props.$color};
+    /* background-color: ${props => props.$backgroundColor}; */
+    background-color: transparent;
+    opacity: ${props => props.$disabled ? 0.4 : 1};
+    pointer-events: ${props => props.$disabled ? 'none' : ''};
+    user-select: none;
+    display: flex;
+    align-items: center;
+
+    &:focus {
+        outline: none;
+        border-bottom: ${props => props.$disabled ? '' : '2px solid'};
+        border-bottom-color: ${TMColors.primary};
+    }
 `;
-const StyledMenuItem = styled.div `
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 6px;
-    width: 100%;
-    font-size: ${FontSize.defaultFontSize};
+const StyledMenuItem = styled.div `
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 6px;
+    width: 100%;
+    font-size: ${FontSize.defaultFontSize};
 `;
 const TMDropDownMenu = forwardRef(({ content, items, disabled = false, color = TMColors.text_normal, backgroundColor = TMColors.default_background, borderRadius, onMenuShown }, ref) => {
     const [id, setID] = useState('');

package/lib/components/base/TMFileManager.js

@@ -8,11 +8,12 @@ import { TMColors } from "../../utils/theme";
 import TMPanel from "./TMPanel";
 import { TMSplitterLayout } from "./TMLayout";
 import { ContextMenu, TreeView } from "devextreme-react";
-import Toolbar, { Item as ToolbarItem } from 'devextreme-react/cjs/toolbar';
+import Toolbar, { Item as ToolbarItem } from 'devextreme-react/toolbar';
 import TMButton from "./TMButton";
 import { TMSearchBar } from "../sidebar/TMHeader";
 import TMFileManagerThumbnailsView from "./TMFileManagerThumbnailsView";
 import TMFileManagerDataGridView from "./TMFileManagerDataGridView";
+import { UserListCacheService } from "@topconsultnpm/sdk-ts";
 const TMFileManager = (props) => {
     // Destructure props
     const { 
@@ -44,6 +45,14 @@ const TMFileManager = (props) => {
     const [droppedFiles, setDroppedFiles] = useState([]);
     // State to track whether a file drag operation is in progress
     const [isDragging, setIsDragging] = useState(false);
+    const [allUsers, setAllUsers] = useState([]);
+    useEffect(() => {
+        const fetchAllUsers = async () => {
+            const users = await UserListCacheService.GetAllAsync();
+            setAllUsers(users ?? []);
+        };
+        fetchAllUsers();
+    }, []);
     // useEffect runs whenever `treeFs` changes
     useEffect(() => {
         // Initialize an empty array to hold tree view directory data
@@ -198,7 +207,7 @@ const TMFileManager = (props) => {
                             width: "100%",
                             height: "100%",
                             ...(isMobile && { display: openDraftList ? 'block' : 'none', transition: "opacity 0.3s ease-in-out" }),
-                        }, children: [_jsxs(Toolbar, { style: { backgroundColor: '#f4f4f4', height: "40px", paddingLeft: "5px", paddingRight: '5px' }, children: [!showPanel && _jsx(ToolbarItem, { location: "before", children: _jsx(TMButton, { caption: isLeftPanelCollapsed ? SDKUI_Localizator.ShowLeftPanel : SDKUI_Localizator.HideLeftPanel, btnStyle: 'toolbar', color: 'primaryOutline', icon: isLeftPanelCollapsed ? _jsx(IconHide, {}) : _jsx(IconShow, {}), onClick: () => setIsLeftPanelCollapsed(prev => !prev) }) }), _jsx(ToolbarItem, { location: "before", children: _jsx(TMButton, { caption: viewMode === 'details' ? SDKUI_Localizator.PreviewView : SDKUI_Localizator.DetailsView, btnStyle: 'toolbar', color: 'primaryOutline', icon: viewMode === 'details' ? _jsx(IconDashboard, {}) : _jsx(IconList, {}), onClick: toggleViewMode }) }), _jsx(ToolbarItem, { location: "before", children: _jsx(TMSearchBar, { marginLeft: '0px', maxWidth: '200px', searchValue: searchText, onSearchValueChanged: (e) => handleSearchChange(e) }) })] }), _jsxs("div", { onDrop: handleDrop, onDragOver: handleDragOver, onDragLeave: handleDragLeave, style: {
+                        }, children: [_jsxs(Toolbar, { style: { backgroundColor: '#f4f4f4', height: "40px", paddingLeft: "5px", paddingRight: '5px' }, children: [!showPanel && _jsx(ToolbarItem, { location: "before", children: _jsx(TMButton, { caption: isLeftPanelCollapsed ? SDKUI_Localizator.ShowLeftPanel : SDKUI_Localizator.HideLeftPanel, btnStyle: 'toolbar', color: 'primaryOutline', icon: isLeftPanelCollapsed ? _jsx(IconHide, {}) : _jsx(IconShow, {}), onClick: () => setIsLeftPanelCollapsed(prev => !prev) }) }), _jsx(ToolbarItem, { location: "before", children: _jsx(TMButton, { caption: viewMode === 'details' ? SDKUI_Localizator.CompactView : SDKUI_Localizator.DetailsView, btnStyle: 'toolbar', color: 'primaryOutline', icon: viewMode === 'details' ? _jsx(IconDashboard, {}) : _jsx(IconList, {}), onClick: toggleViewMode }) }), _jsx(ToolbarItem, { location: "before", children: _jsx(TMSearchBar, { marginLeft: '0px', maxWidth: '200px', searchValue: searchText, onSearchValueChanged: (e) => handleSearchChange(e) }) })] }), _jsxs("div", { onDrop: handleDrop, onDragOver: handleDragOver, onDragLeave: handleDragLeave, style: {
                                     width: "100%",
                                     height: "calc(100% - 40px)",
                                     position: "relative",
@@ -219,6 +228,6 @@ const TMFileManager = (props) => {
                                             pointerEvents: "none",
                                             backdropFilter: "blur(3px)",
                                             textShadow: "0 2px 4px rgba(0,0,0,0.5)"
-                                        }, children: SDKUI_Localizator.DropFileToShare }), viewMode === 'thumbnails' && _jsx(TMFileManagerThumbnailsView, { items: filteredFileItems ?? [], focusedFile: focusedFile, handleFocusedFile: handleFocusedFile, selectedFiles: selectedFiles, handleSelectedFiles: handleSelectedFiles, fileContextMenuItems: fileContextMenuItems, searchText: searchText, userID: userID, draftThumbViewAnchor: draftThumbViewAnchor, setDraftThumbViewAnchor: setDraftThumbViewAnchor, onDoubleClickHandler: onDoubleClickHandler }), viewMode === 'details' && _jsx(TMFileManagerDataGridView, { items: filteredFileItems ?? [], focusedFile: focusedFile, handleFocusedFile: handleFocusedFile, selectedFiles: selectedFiles, handleSelectedFiles: handleSelectedFiles, fileContextMenuItems: fileContextMenuItems, searchText: searchText, userID: userID, onDoubleClickHandler: onDoubleClickHandler })] })] })] }) }) });
+                                        }, children: SDKUI_Localizator.DropFileToShare }), viewMode === 'thumbnails' && _jsx(TMFileManagerThumbnailsView, { items: filteredFileItems ?? [], allUsers: allUsers, focusedFile: focusedFile, handleFocusedFile: handleFocusedFile, selectedFiles: selectedFiles, handleSelectedFiles: handleSelectedFiles, fileContextMenuItems: fileContextMenuItems, searchText: searchText, userID: userID, draftThumbViewAnchor: draftThumbViewAnchor, setDraftThumbViewAnchor: setDraftThumbViewAnchor, onDoubleClickHandler: onDoubleClickHandler }), viewMode === 'details' && _jsx(TMFileManagerDataGridView, { items: filteredFileItems ?? [], allUsers: allUsers, focusedFile: focusedFile, handleFocusedFile: handleFocusedFile, selectedFiles: selectedFiles, handleSelectedFiles: handleSelectedFiles, fileContextMenuItems: fileContextMenuItems, searchText: searchText, userID: userID, onDoubleClickHandler: onDoubleClickHandler })] })] })] }) }) });
 };
 export default TMFileManager;

package/lib/components/base/TMFileManagerDataGridView.d.ts

@@ -1,6 +1,8 @@
 import { FileItem, TMFileManagerContextMenuItem } from "./TMFileManagerUtils";
+import { UserDescriptor } from "@topconsultnpm/sdk-ts";
 interface TMFileManagerDataGridViewProps {
     items: Array<FileItem>;
+    allUsers: Array<UserDescriptor>;
     focusedFile: FileItem | undefined;
     handleFocusedFile: (fileItem: FileItem | undefined) => void;
     selectedFiles: Array<FileItem>;

package/lib/components/base/TMFileManagerDataGridView.js

@@ -5,7 +5,7 @@ import TMDataGrid from "./TMDataGrid";
 import TMDcmtIcon from "../features/documents/TMDcmtIcon";
 import TMTooltip from "./TMTooltip";
 const TMFileManagerDataGridView = (props) => {
-    const { items, focusedFile, handleFocusedFile, selectedFiles, handleSelectedFiles, fileContextMenuItems, searchText, userID, onDoubleClickHandler } = props;
+    const { items, allUsers, focusedFile, handleFocusedFile, selectedFiles, handleSelectedFiles, fileContextMenuItems, searchText, userID, onDoubleClickHandler } = props;
     // State hook to store the currently focused row key, initially set to undefined
     const [focusedRowKey, setFocusedRowKey] = useState(focusedFile?.id);
     // State to store selected row keys
@@ -16,6 +16,15 @@ const TMFileManagerDataGridView = (props) => {
     useEffect(() => {
         setSelectedRowKeys(selectedFiles.map(selectedFile => selectedFile.id));
     }, [selectedFiles]);
+    const findCheckOutUserName = useCallback((checkOutUserName, checkOutUserID) => {
+        if (checkOutUserName) {
+            return checkOutUserName;
+        }
+        else {
+            let checkOutUser = allUsers.find(user => user.id === checkOutUserID);
+            return checkOutUser ? checkOutUser.name : '-';
+        }
+    }, [allUsers]);
     // DataGrid Callback    
     // Handles focus change in the data grid
     const onFocusedRowChanged = useCallback((e) => {
@@ -58,7 +67,7 @@ const TMFileManagerDataGridView = (props) => {
         const checkoutUsedId = checkOutUserID;
         const editMode = checkoutDate && checkoutUsedId && userID && userID === checkoutUsedId;
         const lockMode = checkoutDate && checkoutUsedId && userID && userID !== checkoutUsedId;
-        const editLockTooltipText = _jsxs(_Fragment, { children: [_jsxs("div", { style: { textAlign: "center" }, children: [editMode && (_jsxs(_Fragment, { children: [_jsx("i", { style: { fontSize: "18px", color: "#28a745", fontWeight: "bold" }, className: "dx-icon-edit" }), SDKUI_Localizator.CurrentUserExtract] })), lockMode && (_jsxs(_Fragment, { children: [_jsx("i", { style: { fontSize: "18px", color: "#28a745", fontWeight: "bold" }, className: "dx-icon-lock" }), SDKUI_Localizator.ExtractedFromOtherUser] }))] }), _jsx("hr", {}), _jsxs("div", { style: { textAlign: "left" }, children: [_jsxs("ul", { children: [_jsxs("li", { children: ["- ", _jsx("span", { style: { fontWeight: 'bold' }, children: SDKUI_Localizator.ExtractedBy }), ": ", checkOutUserName ?? '-', " (ID: ", checkOutUserID, ")"] }), _jsxs("li", { children: ["- ", _jsx("span", { style: { fontWeight: 'bold' }, children: SDKUI_Localizator.ExtractedOn }), ": ", Globalization.getDateTimeDisplayValue(checkoutDate?.toString())] })] }), _jsx("hr", {}), _jsx("ul", { children: _jsxs("li", { children: ["- ", _jsx("span", { style: { fontWeight: 'bold' }, children: SDKUI_Localizator.Version }), ": ", version ?? 1] }) }), _jsx("hr", {}), _jsxs("ul", { children: [_jsxs("li", { children: ["- ", _jsx("span", { style: { fontWeight: 'bold' }, children: SDKUI_Localizator.Type }), ": ", ext] }), _jsxs("li", { children: ["- ", _jsx("span", { style: { fontWeight: 'bold' }, children: SDKUI_Localizator.CreationTime }), ": ", Globalization.getDateTimeDisplayValue(creationTime?.toString())] }), _jsxs("li", { children: ["- ", _jsx("span", { style: { fontWeight: 'bold' }, children: SDKUI_Localizator.LastUpdateTime }), ": ", Globalization.getDateTimeDisplayValue(lastUpdateTime?.toString())] })] })] })] });
+        const editLockTooltipText = _jsxs(_Fragment, { children: [_jsxs("div", { style: { textAlign: "center" }, children: [editMode && (_jsxs(_Fragment, { children: [_jsx("i", { style: { fontSize: "18px", color: "#28a745", fontWeight: "bold" }, className: "dx-icon-edit" }), SDKUI_Localizator.CurrentUserExtract] })), lockMode && (_jsxs(_Fragment, { children: [_jsx("i", { style: { fontSize: "18px", color: "#28a745", fontWeight: "bold" }, className: "dx-icon-lock" }), SDKUI_Localizator.ExtractedFromOtherUser] }))] }), _jsx("hr", {}), _jsxs("div", { style: { textAlign: "left" }, children: [_jsxs("ul", { children: [_jsxs("li", { children: ["- ", _jsx("span", { style: { fontWeight: 'bold' }, children: SDKUI_Localizator.ExtractedBy }), ": ", findCheckOutUserName(checkOutUserName, checkOutUserID) ?? '-', " (ID: ", checkOutUserID, ")"] }), _jsxs("li", { children: ["- ", _jsx("span", { style: { fontWeight: 'bold' }, children: SDKUI_Localizator.ExtractedOn }), ": ", Globalization.getDateTimeDisplayValue(checkoutDate?.toString())] })] }), _jsx("hr", {}), _jsx("ul", { children: _jsxs("li", { children: ["- ", _jsx("span", { style: { fontWeight: 'bold' }, children: SDKUI_Localizator.Version }), ": ", version ?? 1] }) }), _jsx("hr", {}), _jsxs("ul", { children: [_jsxs("li", { children: ["- ", _jsx("span", { style: { fontWeight: 'bold' }, children: SDKUI_Localizator.Type }), ": ", ext] }), _jsxs("li", { children: ["- ", _jsx("span", { style: { fontWeight: 'bold' }, children: SDKUI_Localizator.CreationTime }), ": ", Globalization.getDateTimeDisplayValue(creationTime?.toString())] }), _jsxs("li", { children: ["- ", _jsx("span", { style: { fontWeight: 'bold' }, children: SDKUI_Localizator.LastUpdateTime }), ": ", Globalization.getDateTimeDisplayValue(lastUpdateTime?.toString())] })] })] })] });
         return _jsxs("div", { style: { display: "inline-flex", alignItems: "center", gap: "4px" }, children: [editMode && _jsx(TMTooltip, { content: editLockTooltipText, children: _jsx("i", { style: { fontSize: "18px", color: "#28a745", fontWeight: "bold" }, className: "dx-icon-edit" }) }), lockMode && _jsx(TMTooltip, { content: editLockTooltipText, children: _jsx("i", { style: { fontSize: "18px", color: "#28a745", fontWeight: "bold" }, className: "dx-icon-lock" }) }), renderHighlightedText(cellData.value, searchText, false)] });
     }, [searchText]);
     const cellExtRender = useCallback((cellData) => {
@@ -87,6 +96,6 @@ const TMFileManagerDataGridView = (props) => {
             { dataField: "creationTime", caption: SDKUI_Localizator.CreationTime, dataType: 'datetime', format: 'dd/MM/yyyy HH:mm', cellRender: cellDatetimeRender },
         ];
     }, [searchText]);
-    return _jsx(TMDataGrid, { dataSource: items ?? [], dataColumns: dataColumns, focusedRowKey: focusedRowKey, selectedRowKeys: selectedRowKeys, onFocusedRowChanged: onFocusedRowChanged, onSelectionChanged: onSelectionChanged, onCellDblClick: onCellDblClick, onContextMenuPreparing: onContextMenuPreparing, showSearchPanel: false, noDataText: SDKUI_Localizator.FolderIsEmpty });
+    return _jsx(TMDataGrid, { dataSource: items ?? [], dataColumns: dataColumns, focusedRowKey: focusedRowKey, selectedRowKeys: selectedRowKeys, onFocusedRowChanged: onFocusedRowChanged, onSelectionChanged: onSelectionChanged, onCellDblClick: onCellDblClick, onContextMenuPreparing: onContextMenuPreparing, showSearchPanel: false, noDataText: SDKUI_Localizator.FolderIsEmpty }, items.length);
 };
 export default TMFileManagerDataGridView;

package/lib/components/base/TMFileManagerThumbnailItems.d.ts

@@ -1,7 +1,9 @@
 import React from 'react';
 import { FileItem } from './TMFileManagerUtils';
+import { UserDescriptor } from '@topconsultnpm/sdk-ts';
 export interface TMFileManagerThumbnailItemsProps {
     items: Array<FileItem>;
+    allUsers: Array<UserDescriptor>;
     paginatedItems: Array<FileItem>;
     focusedFile: FileItem | undefined;
     handleFocusedFile: (fileItem: FileItem | undefined) => void;

package/lib/components/base/TMFileManagerThumbnailItems.js

@@ -6,7 +6,7 @@ import TMTooltip from './TMTooltip';
 import TMDcmtIcon from '../features/documents/TMDcmtIcon';
 const TMFileManagerThumbnailItems = (props) => {
     // Destructuring props for cleaner usage
-    const { items, paginatedItems, selectedFiles, searchText, userID, onDoubleClick, handleSelectedFiles, handleFocusedFile, setDraftThumbViewAnchor } = props;
+    const { items, allUsers, paginatedItems, selectedFiles, searchText, userID, onDoubleClick, handleSelectedFiles, handleFocusedFile, setDraftThumbViewAnchor } = props;
     // Ref for the scrollable container
     const containerRef = useRef(null);
     // Stores index of the last selected item for shift selection
@@ -112,6 +112,16 @@ const TMFileManagerThumbnailItems = (props) => {
         setDraftThumbViewAnchor(e.currentTarget);
         handleFocusedFile(item);
     }, []);
+    const findCheckOutUserName = useCallback((item) => {
+        if (item.checkOutUserName) {
+            return item.checkOutUserName;
+        }
+        else {
+            const checkOutUserID = item.checkOutUserID;
+            let checkOutUser = allUsers.find(user => user.id === checkOutUserID);
+            return checkOutUser ? checkOutUser.name : '-';
+        }
+    }, [allUsers]);
     return _jsx("div", { style: { width: "100%", height: "100%" }, children: paginatedItems.map(item => {
             const isSelected = selectedFiles?.map(file => file.id).includes(item.id) ?? false;
             const checkoutDate = item.checkoutDate;
@@ -130,7 +140,7 @@ const TMFileManagerThumbnailItems = (props) => {
                 bgColor = isSelected ? colors.PRIMARY_BLUE : backgroundColors.lockMode;
                 bgHoverColor = isSelected ? colors.PRIMARY_BLUE : "#fff59d";
             }
-            const editLockTooltipText = _jsxs(_Fragment, { children: [_jsxs("div", { style: { textAlign: "center" }, children: [editMode && (_jsxs(_Fragment, { children: [_jsx("i", { style: { fontSize: "18px", color: colors.MEDIUM_GREEN, fontWeight: "bold" }, className: "dx-icon-edit" }), SDKUI_Localizator.CurrentUserExtract] })), lockMode && (_jsxs(_Fragment, { children: [_jsx("i", { style: { fontSize: "18px", color: colors.MEDIUM_GREEN, fontWeight: "bold" }, className: "dx-icon-lock" }), SDKUI_Localizator.ExtractedFromOtherUser] }))] }), _jsx("hr", {}), _jsxs("div", { style: { textAlign: "left" }, children: [_jsxs("ul", { children: [_jsxs("li", { children: ["- ", _jsx("span", { style: { fontWeight: 'bold' }, children: SDKUI_Localizator.ExtractedBy }), ": ", item.checkOutUserName ?? '-', " (ID: ", item.checkOutUserID, ")"] }), _jsxs("li", { children: ["- ", _jsx("span", { style: { fontWeight: 'bold' }, children: SDKUI_Localizator.ExtractedOn }), ": ", Globalization.getDateTimeDisplayValue(item.checkoutDate?.toString())] })] }), _jsx("hr", {}), _jsx("ul", { children: _jsxs("li", { children: ["- ", _jsx("span", { style: { fontWeight: 'bold' }, children: SDKUI_Localizator.Version }), ": ", item.version ?? 1] }) }), _jsx("hr", {}), _jsxs("ul", { children: [_jsxs("li", { children: ["- ", _jsx("span", { style: { fontWeight: 'bold' }, children: SDKUI_Localizator.Type }), ": ", item.ext] }), _jsxs("li", { children: ["- ", _jsx("span", { style: { fontWeight: 'bold' }, children: SDKUI_Localizator.CreationTime }), ": ", Globalization.getDateTimeDisplayValue(item.creationTime?.toString())] }), _jsxs("li", { children: ["- ", _jsx("span", { style: { fontWeight: 'bold' }, children: SDKUI_Localizator.LastUpdateTime }), ": ", Globalization.getDateTimeDisplayValue(item.lastUpdateTime?.toString())] })] })] })] });
+            const editLockTooltipText = _jsxs(_Fragment, { children: [_jsxs("div", { style: { textAlign: "center" }, children: [editMode && (_jsxs(_Fragment, { children: [_jsx("i", { style: { fontSize: "18px", color: colors.MEDIUM_GREEN, fontWeight: "bold" }, className: "dx-icon-edit" }), SDKUI_Localizator.CurrentUserExtract] })), lockMode && (_jsxs(_Fragment, { children: [_jsx("i", { style: { fontSize: "18px", color: colors.MEDIUM_GREEN, fontWeight: "bold" }, className: "dx-icon-lock" }), SDKUI_Localizator.ExtractedFromOtherUser] }))] }), _jsx("hr", {}), _jsxs("div", { style: { textAlign: "left" }, children: [_jsxs("ul", { children: [_jsxs("li", { children: ["- ", _jsx("span", { style: { fontWeight: 'bold' }, children: SDKUI_Localizator.ExtractedBy }), ": ", findCheckOutUserName(item) ?? '-', " (ID: ", item.checkOutUserID, ")"] }), _jsxs("li", { children: ["- ", _jsx("span", { style: { fontWeight: 'bold' }, children: SDKUI_Localizator.ExtractedOn }), ": ", Globalization.getDateTimeDisplayValue(item.checkoutDate?.toString())] })] }), _jsx("hr", {}), _jsx("ul", { children: _jsxs("li", { children: ["- ", _jsx("span", { style: { fontWeight: 'bold' }, children: SDKUI_Localizator.Version }), ": ", item.version ?? 1] }) }), _jsx("hr", {}), _jsxs("ul", { children: [_jsxs("li", { children: ["- ", _jsx("span", { style: { fontWeight: 'bold' }, children: SDKUI_Localizator.Type }), ": ", item.ext] }), _jsxs("li", { children: ["- ", _jsx("span", { style: { fontWeight: 'bold' }, children: SDKUI_Localizator.CreationTime }), ": ", Globalization.getDateTimeDisplayValue(item.creationTime?.toString())] }), _jsxs("li", { children: ["- ", _jsx("span", { style: { fontWeight: 'bold' }, children: SDKUI_Localizator.LastUpdateTime }), ": ", Globalization.getDateTimeDisplayValue(item.lastUpdateTime?.toString())] })] })] })] });
             const tooltipContent = (_jsxs("div", { style: { textAlign: 'left' }, children: [_jsxs("div", { children: [_jsx("span", { style: { fontWeight: 'bold' }, children: "ID:" }), " ", item.id ?? '-'] }), _jsxs("div", { children: [_jsx("span", { style: { fontWeight: 'bold' }, children: "DID:" }), " ", item.did ?? '-'] }), _jsxs("div", { children: [_jsx("span", { style: { fontWeight: 'bold' }, children: "TID:" }), " ", item.tid ?? '-'] }), _jsx("hr", {}), _jsxs("div", { children: [_jsxs("span", { style: { fontWeight: 'bold' }, children: [SDKUI_Localizator.Name, ":"] }), " ", item.name ?? '-'] }), _jsxs("div", { children: [_jsxs("span", { style: { fontWeight: 'bold' }, children: [SDKUI_Localizator.Author, ":"] }), " ", item.updaterName ?? '-'] }), _jsx("hr", {}), _jsxs("div", { children: [_jsxs("span", { style: { fontWeight: 'bold' }, children: [SDKUI_Localizator.Version, ":"] }), " ", item.version] }), _jsxs("div", { children: [_jsxs("span", { style: { fontWeight: 'bold' }, children: [SDKUI_Localizator.Size, ":"] }), " ", formatBytes(item.size ?? 0)] }), _jsx("hr", {}), _jsxs("div", { children: [_jsxs("span", { style: { fontWeight: 'bold' }, children: [SDKUI_Localizator.CreationTime, ":"] }), " ", Globalization.getDateTimeDisplayValue(item.creationTime)] }), _jsxs("div", { children: [_jsxs("span", { style: { fontWeight: 'bold' }, children: [SDKUI_Localizator.LastUpdateTime, ":"] }), " ", Globalization.getDateTimeDisplayValue(item.lastUpdateTime)] })] }));
             return _jsx(TMFileItemContainer, { className: "tm-file-manager-thumbnail-items", ref: containerRef, id: "tm-file-manager-thumbnail-item-" + item.id.toString(), "$backgroundColor": bgColor, "$bgHoverColor": bgHoverColor, "$textColor": textColor, onDoubleClick: () => onDoubleClickHandler(item), onContextMenu: (e) => onContextMenu(e, item), onClick: (e) => onClickHandler(e, item), tabIndex: 0, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, children: _jsxs("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', width: '100%' }, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', flex: 1, minWidth: 0 }, children: [_jsxs("div", { style: { marginRight: '16px', flexShrink: 0 }, children: [_jsx(TMDcmtIcon, { tid: item.tid, did: item.did, fileExtension: item.ext, downloadMode: 'openInNewWindow', tooltipContent: tooltipContent }), editMode && _jsx(TMTooltip, { content: editLockTooltipText, children: _jsx("i", { style: { fontSize: "18px", color: !isSelected ? colors.MEDIUM_GREEN : '#fff', fontWeight: "bold" }, className: "dx-icon-edit" }) }), lockMode && _jsx(TMTooltip, { content: editLockTooltipText, children: _jsx("i", { style: { fontSize: "18px", color: !isSelected ? colors.MEDIUM_GREEN : '#fff', fontWeight: "bold" }, className: "dx-icon-lock" }) })] }), _jsxs("div", { style: { overflow: 'hidden', minWidth: 0 }, children: [_jsx("div", { style: { whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', width: '100%', display: 'block', fontSize: '1rem', fontWeight: "bold" }, children: _jsx(TMTooltip, { parentStyle: { overflow: 'hidden' }, childStyle: { whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', width: '100%', display: 'block' }, children: renderHighlightedText(item.name, searchText, isSelected) }) }), _jsx("div", { style: { whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', width: '100%', display: 'block', fontSize: 'calc(1rem - 1px)' }, children: formatBytes(item.size ?? 0) })] })] }), item.version && (_jsx("div", { style: { flexShrink: 0, marginLeft: '12px', whiteSpace: 'nowrap' }, children: _jsx(TMTooltip, { content: SDKUI_Localizator.Version, children: _jsx("div", { style: { border: "2px solid #28a745", backgroundColor: "#28a745", color: "#ffffff", borderRadius: '50%', width: '30px', height: '30px', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '12px', fontWeight: 'bold' }, children: item.version }) }) }))] }) }, "tm-file-manager-thumbnail-item-" + item.id);
         }) });

package/lib/components/base/TMFileManagerThumbnailsView.d.ts

@@ -1,7 +1,9 @@
 import React from "react";
 import { FileItem, TMFileManagerContextMenuItem } from "./TMFileManagerUtils";
+import { UserDescriptor } from "@topconsultnpm/sdk-ts";
 interface TMFileManagerThumbnailsViewProps {
     items: Array<FileItem>;
+    allUsers: Array<UserDescriptor>;
     focusedFile: FileItem | undefined;
     handleFocusedFile: (fileItem: FileItem | undefined) => void;
     selectedFiles: Array<FileItem>;

package/lib/components/base/TMFileManagerThumbnailsView.js

@@ -5,7 +5,7 @@ import { ContextMenu, Pagination, ScrollView } from "devextreme-react";
 import TMFileManagerThumbnailItems from "./TMFileManagerThumbnailItems";
 import { SDKUI_Localizator } from "../../helper";
 const TMFileManagerThumbnailsView = (props) => {
-    const { items, focusedFile, handleFocusedFile, selectedFiles = [], handleSelectedFiles, fileContextMenuItems, searchText, userID, onDoubleClickHandler, draftThumbViewAnchor, setDraftThumbViewAnchor } = props;
+    const { items, allUsers, focusedFile, handleFocusedFile, selectedFiles = [], handleSelectedFiles, fileContextMenuItems, searchText, userID, onDoubleClickHandler, draftThumbViewAnchor, setDraftThumbViewAnchor } = props;
     const PAGE_SIZES = [TMFileManagerPageSize.Small, TMFileManagerPageSize.Medium, TMFileManagerPageSize.Large];
     const initPageSize = TMFileManagerPageSize.Small;
     const showPagination = (items?.length ?? 0) > initPageSize;
@@ -39,7 +39,7 @@ const TMFileManagerThumbnailsView = (props) => {
         handleSelectedFiles?.([]);
     };
     return items.length > 0 ?
-        _jsxs("div", { style: { width: "100%", height: "100%" }, onContextMenu: onBackgroundContextMenu, children: [_jsx(ScrollView, { width: "100%", height: showPagination ? "calc(100% - 50px)" : "100%", useNative: true, direction: 'vertical', children: _jsx(TMFileManagerThumbnailItems, { items: items, paginatedItems: paginatedItems, focusedFile: focusedFile, selectedFiles: selectedFiles, userID: userID, searchText: searchText, handleFocusedFile: handleFocusedFile, handleSelectedFiles: handleSelectedFiles, onDoubleClick: handleItemDoubleClick, setDraftThumbViewAnchor: setDraftThumbViewAnchor }) }), showPagination && _jsx(Pagination, { height: "50px", showInfo: true, showNavigationButtons: true, allowedPageSizes: PAGE_SIZES, displayMode: 'compact', itemCount: items.length, pageIndex: pageIndex, pageSize: pageSize, onPageIndexChange: setPageIndex, onPageSizeChange: setPageSize }), draftThumbViewAnchor && _jsx(ContextMenu, { id: 'fileViewContextMenuMobile', dataSource: fileContextMenuItems, target: draftThumbViewAnchor, onHiding: closeViewContextMenu })] })
+        _jsxs("div", { style: { width: "100%", height: "100%" }, onContextMenu: onBackgroundContextMenu, children: [_jsx(ScrollView, { width: "100%", height: showPagination ? "calc(100% - 50px)" : "100%", useNative: true, direction: 'vertical', children: _jsx(TMFileManagerThumbnailItems, { items: items, allUsers: allUsers, paginatedItems: paginatedItems, focusedFile: focusedFile, selectedFiles: selectedFiles, userID: userID, searchText: searchText, handleFocusedFile: handleFocusedFile, handleSelectedFiles: handleSelectedFiles, onDoubleClick: handleItemDoubleClick, setDraftThumbViewAnchor: setDraftThumbViewAnchor }) }), showPagination && _jsx(Pagination, { height: "50px", showInfo: true, showNavigationButtons: true, allowedPageSizes: PAGE_SIZES, displayMode: 'compact', itemCount: items.length, pageIndex: pageIndex, pageSize: pageSize, onPageIndexChange: setPageIndex, onPageSizeChange: setPageSize }), draftThumbViewAnchor && _jsx(ContextMenu, { id: 'fileViewContextMenuMobile', dataSource: fileContextMenuItems, target: draftThumbViewAnchor, onHiding: closeViewContextMenu })] })
         :
             _jsxs("div", { onContextMenu: onBackgroundContextMenu, style: { width: "100%", height: "100%", display: 'flex', justifyContent: 'center', alignItems: 'center', marginTop: '10px' }, children: [SDKUI_Localizator.FolderIsEmpty, draftThumbViewAnchor && _jsx(ContextMenu, { id: 'fileViewContextMenuMobile', dataSource: fileContextMenuItems, target: draftThumbViewAnchor, onHiding: closeViewContextMenu })] });
 };

package/lib/components/base/TMFileManagerUtils.js

@@ -15,25 +15,25 @@ export const colors = {
     LIGHT_YELLOW: "#fff9c4",
     MEDIUM_GREEN: "#28a745",
 };
-export const TMFileItemContainer = styled.div `
-    border: 1px solid #ddd;
-    border-radius: 8px;
-    background-color: ${({ $backgroundColor }) => $backgroundColor ?? colors.LIGHT_GRAY};
-    color: ${({ $textColor }) => $textColor ?? colors.BLACK}; 
-    cursor: pointer;
-    margin: 10px 5px;
-    padding: 8px;
-    display: flex;
-    flex-direction: column;
-    min-width: 100px;
-    gap: 4px;
-    &:hover {
-        background-color: ${({ $bgHoverColor }) => $bgHoverColor ?? '#e0e0e0'};
-        border-color: #999;
-    }
-    &:focus {
-        outline: none;
-    }
+export const TMFileItemContainer = styled.div `
+    border: 1px solid #ddd;
+    border-radius: 8px;
+    background-color: ${({ $backgroundColor }) => $backgroundColor ?? colors.LIGHT_GRAY};
+    color: ${({ $textColor }) => $textColor ?? colors.BLACK}; 
+    cursor: pointer;
+    margin: 10px 5px;
+    padding: 8px;
+    display: flex;
+    flex-direction: column;
+    min-width: 100px;
+    gap: 4px;
+    &:hover {
+        background-color: ${({ $bgHoverColor }) => $bgHoverColor ?? '#e0e0e0'};
+        border-color: #999;
+    }
+    &:focus {
+        outline: none;
+    }
 `;
 // Function to find a specific file or folder based on its ID (used for finding nested items)
 export const findFileItems = (items, id) => {