@topconsultnpm/sdkui-react 6.17.0-test10

package/lib/components/base/TMFileManager.js

@@ -0,0 +1,233 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { extractTextsFromDirectory, findFileItems, setFolderTreeViewItems } from "./TMFileManagerUtils";
+import { DeviceType, useDeviceType } from "./TMDeviceProvider";
+import { formatBytes, Globalization, IconDashboard, IconFolder, IconHide, IconList, IconMenuVertical, IconRefresh, IconShow, SDKUI_Globals, SDKUI_Localizator, svgToString, TMCommandsContextMenu, TMConditionalWrapper } from "../../helper";
+import TMTooltip from "./TMTooltip";
+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/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 { 
+    // Required props
+    focusedFile = undefined, handleFocusedFile, selectedFiles = [], handleSelectedFiles, selectedFolder, handleFocusedFolder, refreshCallback, treeFs, folderContextMenuItems, fileContextMenuItems, 
+    // Optional props
+    handleSelectedFolder, onDoubleClickHandler, userID, viewMode: initialViewMode, handleDropFileCallback, dcmtsFound = 0, showPanel = false, onClosePanel, allowMaximize = true, onMaximizePanel, } = props;
+    // 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.
+    let isMobile = useMemo(() => { return deviceType === DeviceType.MOBILE; }, [deviceType]);
+    // State to manage the current view mode ('thumbnails' or 'details')
+    const [viewMode, setViewMode] = useState(initialViewMode ?? 'details');
+    // State to store transformed directory data for file manager
+    const [treeViewData, setTreeViewData] = useState([]);
+    // State to store the anchor element for the tree view context men
+    const [treeViewAnchor, setTreeViewAnchor] = useState(null);
+    // State to store the filtered file items after search or filtering
+    const [filteredFileItems, setFilteredFileItems] = useState([]);
+    // State to store the anchor element for draft thumbnails view
+    const [draftThumbViewAnchor, setDraftThumbViewAnchor] = useState(null);
+    // State to store the search text entered by the user
+    const [searchText, setSearchText] = useState('');
+    // State to control the collapse/expand of the left panel
+    const [isLeftPanelCollapsed, setIsLeftPanelCollapsed] = useState(false);
+    // State to control the visibility of the draft list (for mobile)
+    const [openDraftList, setOpenDraftList] = useState(false);
+    // State to store the files that are dropped into the file manager
+    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
+        let treeViewDataDirectory = [];
+        // Push the root directory data and items into the array
+        treeViewDataDirectory.push({ id: -1, text: treeFs.name, subFileFolderCount: treeFs.items.filter(item => !item.isDirectory).length, expanded: true, items: setFolderTreeViewItems(treeFs.items) });
+        // Update the state with the constructed tree view data
+        setTreeViewData(treeViewDataDirectory);
+    }, [treeFs]);
+    useEffect(() => {
+        const extractedTexts = extractTextsFromDirectory(treeViewData);
+        // Reset the selected file item if its name is not found in the extracted texts.
+        if (selectedFolder)
+            if (!extractedTexts.includes(selectedFolder.name)) {
+                handleSelectedFolder?.(undefined);
+                setIsLeftPanelCollapsed(false);
+            }
+            else {
+                // update selectedFolder
+                const item = selectedFolder.id === treeFs.id ? treeFs : findFileItems(treeFs.items, selectedFolder.id);
+                handleSelectedFolder?.(item);
+            }
+    }, [treeViewData]);
+    useEffect(() => {
+        // Filter items whenever searchText or selectedFolder changes
+        const filterItems = () => {
+            const folderItems = selectedFolder?.items ?? [];
+            const filtered = folderItems.filter(item => !item.isDirectory &&
+                (
+                /* (item.id?.toString()?.includes(searchText.toLowerCase().trim())) || */
+                (item.name?.toLowerCase()?.includes(searchText.toLowerCase().trim())) ||
+                    (item.description?.toLowerCase()?.includes(searchText.toLowerCase().trim())) ||
+                    (item.ext?.toString().toLowerCase().includes(searchText.toLowerCase().trim())) ||
+                    (formatBytes(item.size)?.toLowerCase().toString().includes(searchText.toLowerCase())) ||
+                    (Globalization.getDateTimeDisplayValue(item.lastUpdateTime)?.toLowerCase().toString().includes(searchText.toLowerCase().trim())) ||
+                    (Globalization.getDateTimeDisplayValue(item.creationTime)?.toLowerCase().toString().includes(searchText.toLowerCase().trim())) ||
+                    (item.version?.toString().includes(searchText.toLowerCase().trim()))));
+            setFilteredFileItems(filtered);
+        };
+        filterItems();
+    }, [searchText, selectedFolder]);
+    // Callback to handle the "back" action (closing the draft list view)
+    const onBackCallback = useCallback(() => {
+        setOpenDraftList(false);
+    }, []);
+    const toolbar = useMemo(() => _jsxs(_Fragment, { children: [_jsx(IconMenuVertical, { id: "TMPanel-FileManager-Commands-Header", color: 'white', cursor: 'pointer' }), _jsx(TMCommandsContextMenu, { target: '#TMPanel-FileManager-Commands-Header', menuItems: [
+                    {
+                        icon: isLeftPanelCollapsed ? "eyeclose" : "eyeopen",
+                        onClick: () => setIsLeftPanelCollapsed(prev => !prev),
+                        text: isLeftPanelCollapsed ? SDKUI_Localizator.ShowLeftPanel : SDKUI_Localizator.HideLeftPanel,
+                    },
+                    {
+                        icon: svgToString(_jsx(IconRefresh, {})),
+                        onClick: async () => await refreshCallback(),
+                        text: SDKUI_Localizator.Refresh,
+                    },
+                ], showEvent: "click" })] }), [isLeftPanelCollapsed]);
+    // Handle closing the context menu
+    const closeTreeViewContextMenu = useCallback(() => {
+        setTreeViewAnchor(null);
+    }, []);
+    const handleTreeViewItemClick = useCallback((e) => {
+        if (!e)
+            return;
+        const clickedItemId = e.itemData.id;
+        const item = clickedItemId === treeFs.id ? treeFs : findFileItems(treeFs.items, clickedItemId);
+        if (isMobile)
+            setOpenDraftList(true);
+        handleSelectedFolder?.(item);
+        handleFocusedFolder?.(undefined);
+        handleFocusedFile?.(undefined);
+        handleSelectedFiles?.([]);
+    }, [treeFs, isMobile]);
+    // Render each TreeView item (directories) with custom styling/icons
+    const renderTreeViewItem = useCallback((itemData) => {
+        const isSelected = selectedFolder && selectedFolder.id === itemData.id;
+        const tooltipContent = _jsxs("div", { style: { textAlign: "center" }, children: [_jsx("span", { style: { fontWeight: 'bold' }, children: "ID" }), ": ", itemData.id] });
+        const onDragOver = (e) => {
+            if (e === undefined)
+                return;
+            const item = itemData.id === treeFs.id ? treeFs : findFileItems(treeFs.items, itemData.id);
+            if (item)
+                handleSelectedFolder?.(item);
+            handleDragOver(e);
+        };
+        const onDrop = (e) => {
+            if (e === undefined)
+                return;
+            const item = itemData.id === treeFs.id ? treeFs : findFileItems(treeFs.items, itemData.id);
+            if (item)
+                handleSelectedFolder?.(item);
+            handleDrop(e);
+        };
+        const onDragLeave = (e) => {
+            e.preventDefault();
+            handleDragLeave(e);
+        };
+        return (_jsxs("div", { onDrop: onDrop, onDragOver: onDragOver, onDragLeave: onDragLeave, style: {
+                whiteSpace: "nowrap",
+                display: "flex",
+                alignItems: "center",
+                opacity: (isSelected || itemData.subFileFolderCount > 0) ? 1 : 0.5
+            }, className: isSelected ? 'treeview-selected-item-manager' : '', children: [_jsx(TMTooltip, { content: tooltipContent, children: _jsx(IconFolder, { fontSize: 24, style: { marginRight: 5, color: TMColors.iconLight } }) }), itemData.text, itemData.subFileFolderCount > 0 && ` (${itemData.subFileFolderCount})`] }));
+    }, [selectedFolder]);
+    const onBackgroundTreeViewContextMenu = useCallback((event) => {
+        if (event === undefined)
+            return;
+        event.preventDefault();
+        setTreeViewAnchor(event.currentTarget);
+        handleFocusedFolder?.(undefined);
+    }, []);
+    const onItemTreeViewContextMenu = useCallback((contextMenuEvent) => {
+        if (contextMenuEvent === undefined || contextMenuEvent.event === undefined)
+            return;
+        contextMenuEvent.event.preventDefault();
+        const clickedItemId = contextMenuEvent.itemData.id;
+        const item = clickedItemId === treeFs.id ? treeFs : findFileItems(treeFs.items, clickedItemId);
+        handleFocusedFolder?.(item);
+    }, []);
+    const toggleViewMode = useCallback(() => {
+        handleFocusedFile(undefined);
+        setViewMode((prevViewMode) => (prevViewMode === 'details' ? 'thumbnails' : 'details'));
+    }, []);
+    // Update searchText state
+    const handleSearchChange = useCallback((value) => {
+        // setFocusedRowKey(undefined);
+        handleFocusedFile?.(undefined);
+        setSearchText(value);
+    }, []);
+    // Handle the file drop
+    const handleDrop = (e) => {
+        e.preventDefault();
+        const files = Array.from(e.dataTransfer?.files || []);
+        setDroppedFiles(files);
+        setIsDragging(false);
+        if (handleDropFileCallback)
+            handleDropFileCallback(files);
+    };
+    const handleDragOver = (e) => {
+        e.preventDefault();
+        setIsDragging(true);
+    };
+    const handleDragLeave = (e) => {
+        setIsDragging(false);
+    };
+    return _jsx(TMPanel, { title: SDKUI_Localizator.Drafts, totalItems: dcmtsFound ?? 0, showHeader: showPanel, onBack: (isMobile && openDraftList) ? onBackCallback : undefined, onClose: onClosePanel, allowMaximize: !isMobile ? allowMaximize : false, onMaximize: !isMobile ? onMaximizePanel : undefined, onHeaderDoubleClick: !isMobile ? onMaximizePanel : undefined, toolbar: toolbar, children: _jsx("div", { style: { flexDirection: "column", height: "100%", width: "100%", }, children: _jsxs(TMConditionalWrapper, { condition: !isMobile, wrapper: children => _jsx("div", { style: { display: "flex", flexGrow: 1, height: "100%" }, children: _jsx(TMSplitterLayout, { direction: 'horizontal', showSeparator: true, separatorColor: 'transparent', separatorActiveColor: 'transparent', min: ['0', '0'], start: [isLeftPanelCollapsed ? '0%' : "32%", isLeftPanelCollapsed ? '100%' : "68%"], children: children }, "TMWGs-panels-treeView") }), children: [_jsxs("div", { style: {
+                            height: "100%",
+                            width: "100%",
+                            ...(isMobile && { display: openDraftList ? 'none' : 'block', transition: "opacity 0.3s ease-in-out" }),
+                        }, onContextMenu: onBackgroundTreeViewContextMenu, children: [_jsx(TreeView, { height: "100%", width: "100%", useNativeScrolling: SDKUI_Globals.userSettings?.themeSettings.gridSettings.useNativeScrollbar === 1, dataSource: treeViewData, displayExpr: "text", itemRender: renderTreeViewItem, onItemClick: handleTreeViewItemClick, onItemContextMenu: onItemTreeViewContextMenu }), treeViewAnchor && _jsx(ContextMenu, { id: "treeViewContextMenuDesktop", target: treeViewAnchor, dataSource: folderContextMenuItems, onHiding: closeTreeViewContextMenu })] }), _jsxs("div", { style: {
+                            backgroundColor: "#fff",
+                            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.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",
+                                    overflow: "hidden"
+                                }, children: [isDragging && _jsx("div", { style: {
+                                            position: "absolute",
+                                            top: 0,
+                                            left: 0,
+                                            width: "100%",
+                                            height: "100%",
+                                            backgroundColor: "rgba(37, 89, 165, 0.8)",
+                                            color: "#fff",
+                                            display: "flex",
+                                            justifyContent: "center",
+                                            alignItems: "center",
+                                            fontSize: "1.2rem",
+                                            zIndex: 10,
+                                            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 ?? [], 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

@@ -0,0 +1,16 @@
+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>;
+    handleSelectedFiles: (fileItems: Array<FileItem>) => void;
+    fileContextMenuItems: Array<TMFileManagerContextMenuItem>;
+    searchText: string;
+    userID?: number;
+    onDoubleClickHandler?: (fileItem: FileItem | undefined) => void;
+}
+declare const TMFileManagerDataGridView: (props: TMFileManagerDataGridViewProps) => import("react/jsx-runtime").JSX.Element;
+export default TMFileManagerDataGridView;

package/lib/components/base/TMFileManagerDataGridView.js

@@ -0,0 +1,101 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { formatBytes, Globalization, renderHighlightedText, SDKUI_Localizator } from "../../helper";
+import TMDataGrid from "./TMDataGrid";
+import TMDcmtIcon from "../features/documents/TMDcmtIcon";
+import TMTooltip from "./TMTooltip";
+const TMFileManagerDataGridView = (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
+    const [selectedRowKeys, setSelectedRowKeys] = useState(selectedFiles.map(selectedFile => selectedFile.id));
+    useEffect(() => {
+        setFocusedRowKey(focusedFile ? focusedFile.id : undefined);
+    }, [focusedFile]);
+    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) => {
+        setFocusedRowKey(e.row?.key);
+        if (handleFocusedFile && e.row)
+            handleFocusedFile(e.row.data);
+    }, [handleFocusedFile]);
+    // Handles selection change in the data grid
+    const onSelectionChanged = useCallback((e) => {
+        const selectedKeys = e.component.getSelectedRowKeys() ?? [];
+        setSelectedRowKeys(selectedKeys);
+        if (handleSelectedFiles) {
+            const selectedRowsData = e.component.getSelectedRowsData() ?? [];
+            handleSelectedFiles(selectedRowsData);
+        }
+    }, [handleSelectedFiles]);
+    // Handler for double-click cell event
+    const onCellDblClick = useCallback((e) => {
+        if (e.column.dataField === "ext")
+            return;
+        if (onDoubleClickHandler)
+            onDoubleClickHandler(e.data);
+    }, [onDoubleClickHandler]);
+    const onContextMenuPreparing = (e) => {
+        if (e === undefined)
+            return;
+        if (e.target === 'content') {
+            if (handleFocusedFile && e.row)
+                handleFocusedFile(e.row.data);
+            e.items = e.items || [];
+            e.items = fileContextMenuItems ? [...fileContextMenuItems] : [];
+        }
+    };
+    const cellDefaultRender = useCallback((cellData) => {
+        const value = cellData.value ?? '';
+        return renderHighlightedText(value.toString(), searchText, false);
+    }, [searchText]);
+    const cellNameRender = useCallback((cellData) => {
+        const { checkoutDate, checkOutUserID, checkOutUserName, version, ext, creationTime, lastUpdateTime } = cellData.data;
+        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 }), ": ", 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) => {
+        const item = cellData.data;
+        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("div", { style: { display: 'flex', justifyContent: 'center', alignItems: 'center' }, children: _jsx(TMDcmtIcon, { tid: item.tid, did: item.did, fileExtension: item.ext, downloadMode: 'openInNewWindow', tooltipContent: tooltipContent }) });
+    }, []);
+    const cellDatetimeRender = useCallback((cellData) => {
+        if (!cellData.value)
+            return '-';
+        return renderHighlightedText(Globalization.getDateTimeDisplayValue(cellData.value).toString(), searchText, false);
+    }, [searchText]);
+    const cellSizeRender = useCallback((cellData) => {
+        const size = formatBytes(cellData.data.size ?? 0);
+        return renderHighlightedText(size.toString(), searchText, false);
+    }, [searchText]);
+    const dataColumns = useMemo(() => {
+        return [
+            { dataField: "id", caption: "ID", dataType: 'string', visible: false },
+            { dataField: "ext", caption: "", cellRender: cellExtRender },
+            { dataField: "name", caption: SDKUI_Localizator.Name, cellRender: cellNameRender },
+            { dataField: "version", caption: "V.", cellRender: cellDefaultRender },
+            { dataField: "size", caption: SDKUI_Localizator.Size, cellRender: cellSizeRender },
+            { dataField: "updaterName", caption: SDKUI_Localizator.Author, cellRender: cellDefaultRender },
+            { dataField: "lastUpdateTime", caption: SDKUI_Localizator.LastUpdateTime, dataType: 'datetime', format: 'dd/MM/yyyy HH:mm', cellRender: cellDatetimeRender },
+            { 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 });
+};
+export default TMFileManagerDataGridView;

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

@@ -0,0 +1,18 @@
+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;
+    selectedFiles: Array<FileItem>;
+    handleSelectedFiles: (fileItems: Array<FileItem>) => void;
+    searchText: string;
+    setDraftThumbViewAnchor: React.Dispatch<React.SetStateAction<HTMLElement | null>>;
+    onDoubleClick?: (file: FileItem) => void;
+    userID?: number;
+}
+declare const TMFileManagerThumbnailItems: (props: TMFileManagerThumbnailItemsProps) => import("react/jsx-runtime").JSX.Element;
+export default TMFileManagerThumbnailItems;

package/lib/components/base/TMFileManagerThumbnailItems.js

@@ -0,0 +1,148 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef } from 'react';
+import { colors, TMFileItemContainer } from './TMFileManagerUtils';
+import { formatBytes, Globalization, renderHighlightedText, SDKUI_Localizator } from '../../helper';
+import TMTooltip from './TMTooltip';
+import TMDcmtIcon from '../features/documents/TMDcmtIcon';
+const TMFileManagerThumbnailItems = (props) => {
+    // Destructuring props for cleaner usage
+    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
+    const lastSelectedIndexRef = useRef(null);
+    // Ref to handle click vs double click timing
+    const clickTimeoutRef = useRef(null);
+    // Automatically scrolls selected file into view
+    useEffect(() => {
+        if (items.length > 0 && containerRef.current && lastSelectedIndexRef.current !== null) {
+            const lastSelected = items[lastSelectedIndexRef.current];
+            if (lastSelected && lastSelected.id) {
+                const selectedElement = document.getElementById("tm-file-manager-thumbnail-item-" + lastSelected.id.toString());
+                if (selectedElement) {
+                    selectedElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
+                }
+            }
+        }
+    }, [items, lastSelectedIndexRef.current]);
+    const handleKeyUp = useCallback((event) => {
+        event.preventDefault();
+        if (event.key === 'ArrowUp' && lastSelectedIndexRef.current) {
+            const currentIndex = lastSelectedIndexRef.current - 1;
+            if (currentIndex > -1 && items[currentIndex]) {
+                handleSelectedFiles([items[currentIndex]]);
+                lastSelectedIndexRef.current = currentIndex;
+            }
+        }
+    }, [items, lastSelectedIndexRef.current]);
+    const handleKeyDown = useCallback((event) => {
+        event.preventDefault();
+        if (event.key === 'ArrowDown' && lastSelectedIndexRef.current !== null) {
+            const currentIndex = lastSelectedIndexRef.current + 1;
+            if (currentIndex > -1 && items[currentIndex]) {
+                handleSelectedFiles([items[currentIndex]]);
+                lastSelectedIndexRef.current = currentIndex;
+            }
+        }
+        if (event.key === 'Enter' && selectedFiles.length === 1 && onDoubleClick) {
+            const currentItem = items.find(item => item.id === selectedFiles[0].id);
+            if (currentItem)
+                onDoubleClick(currentItem);
+        }
+    }, [items, lastSelectedIndexRef.current, selectedFiles]);
+    // Double click handler with timeout cleanup
+    const onDoubleClickHandler = useCallback((item) => {
+        if (clickTimeoutRef.current) {
+            clearTimeout(clickTimeoutRef.current);
+            clickTimeoutRef.current = null;
+        }
+        if (onDoubleClick && item)
+            onDoubleClick(item);
+    }, [onDoubleClick]);
+    const onClickHandler = useCallback((e, item) => {
+        // If a click timeout is already running, clear it (distinguish between single and double clicks)
+        if (clickTimeoutRef.current) {
+            clearTimeout(clickTimeoutRef.current);
+            clickTimeoutRef.current = null;
+        }
+        else {
+            // Start a timeout to defer selection until we know it's not a double click
+            clickTimeoutRef.current = setTimeout(() => {
+                const clickedIndex = items.findIndex(f => f.id === item.id);
+                if (clickedIndex === -1)
+                    return;
+                // Determine if Ctrl (or Cmd on Mac) or Shift is pressed
+                const isCtrlPressed = e.ctrlKey || e.metaKey;
+                const isShiftPressed = e.shiftKey;
+                // If Shift is pressed and there's a valid last selection, select a range
+                if (isShiftPressed && lastSelectedIndexRef.current !== null) {
+                    const rangeStart = Math.min(lastSelectedIndexRef.current, clickedIndex);
+                    const rangeEnd = Math.max(lastSelectedIndexRef.current, clickedIndex);
+                    const selectedFilesRange = items.slice(rangeStart, rangeEnd + 1);
+                    handleSelectedFiles(selectedFilesRange);
+                }
+                else if (isCtrlPressed) {
+                    // If Ctrl/Cmd is pressed, toggle selection of this item
+                    let newSelectedFiles = [];
+                    const isAlreadySelected = selectedFiles.some(f => f.id === item.id);
+                    if (isAlreadySelected) {
+                        // Deselect if already selected
+                        newSelectedFiles = selectedFiles.filter(f => f.id !== item.id);
+                    }
+                    else {
+                        // Add to selection
+                        newSelectedFiles = [...selectedFiles, item];
+                    }
+                    // Apply new selection
+                    handleSelectedFiles(newSelectedFiles);
+                    lastSelectedIndexRef.current = clickedIndex;
+                }
+                else {
+                    // Regular single click selection
+                    lastSelectedIndexRef.current = clickedIndex;
+                    handleSelectedFiles([item]);
+                }
+                clickTimeoutRef.current = null;
+            }, 200); // Short delay to allow for double click to interrupt
+        }
+    }, [selectedFiles, items]);
+    // Right-click to open context menu and set focus
+    const onContextMenu = useCallback((e, item) => {
+        e.preventDefault();
+        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;
+            const checkoutUsedId = item.checkOutUserID;
+            const editMode = checkoutDate && checkoutUsedId && userID && userID === checkoutUsedId;
+            const lockMode = checkoutDate && checkoutUsedId && userID && userID !== checkoutUsedId;
+            const textColor = isSelected ? colors.WHITE : colors.BLACK;
+            const backgroundColors = { editMode: colors.LIGHT_GREEN, lockMode: colors.LIGHT_YELLOW, };
+            let bgColor = isSelected ? colors.PRIMARY_BLUE : colors.LIGHT_GRAY;
+            let bgHoverColor = isSelected ? colors.PRIMARY_BLUE : "#e0e0e0";
+            if (editMode) {
+                bgColor = isSelected ? colors.PRIMARY_BLUE : backgroundColors.editMode;
+                bgHoverColor = isSelected ? colors.PRIMARY_BLUE : "#a5d6a7";
+            }
+            if (lockMode) {
+                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 }), ": ", 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);
+        }) });
+};
+export default TMFileManagerThumbnailItems;

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

@@ -0,0 +1,19 @@
+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>;
+    handleSelectedFiles: (fileItems: Array<FileItem>) => void;
+    fileContextMenuItems: Array<TMFileManagerContextMenuItem>;
+    searchText: string;
+    userID?: number;
+    onDoubleClickHandler?: (fileItem: FileItem | undefined) => void;
+    draftThumbViewAnchor: HTMLElement | null;
+    setDraftThumbViewAnchor: React.Dispatch<React.SetStateAction<HTMLElement | null>>;
+}
+declare const TMFileManagerThumbnailsView: (props: TMFileManagerThumbnailsViewProps) => import("react/jsx-runtime").JSX.Element;
+export default TMFileManagerThumbnailsView;

package/lib/components/base/TMFileManagerThumbnailsView.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useState } from "react";
+import { TMFileManagerPageSize } from "./TMFileManagerUtils";
+import { ContextMenu, Pagination, ScrollView } from "devextreme-react";
+import TMFileManagerThumbnailItems from "./TMFileManagerThumbnailItems";
+import { SDKUI_Localizator } from "../../helper";
+const TMFileManagerThumbnailsView = (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;
+    const [pageSize, setPageSize] = useState(TMFileManagerPageSize.Small);
+    const [pageIndex, setPageIndex] = useState(1);
+    const [paginatedItems, setPaginatedItems] = useState([]);
+    // Update paginated items when pageSize or pageIndex changes
+    useEffect(() => {
+        const startIndex = (pageIndex - 1) * pageSize;
+        const endIndex = startIndex + pageSize;
+        // Slice the items array based on the current page
+        setPaginatedItems(items?.slice(startIndex, endIndex) ?? []);
+    }, [pageSize, pageIndex, items]);
+    // Handle item selection
+    const handleItemDoubleClick = useCallback((item) => {
+        if (onDoubleClickHandler)
+            onDoubleClickHandler(item);
+    }, []);
+    // Handle closing the context menu
+    const closeViewContextMenu = useCallback(() => {
+        setDraftThumbViewAnchor(null);
+    }, []);
+    const onBackgroundContextMenu = (event) => {
+        if (event === undefined)
+            return;
+        if (event.target.closest('.tm-file-manager-thumbnail-items'))
+            return;
+        event.preventDefault();
+        setDraftThumbViewAnchor(event.currentTarget);
+        handleFocusedFile?.(undefined);
+        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, 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 })] });
+};
+export default TMFileManagerThumbnailsView;