@topconsultnpm/sdkui-react-beta 6.11.35 → 6.11.36

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

@@ -29,8 +29,11 @@ export interface FileItem {
     ext?: string;
     creationTime?: Date;
     lastUpdateTime?: Date;
+    updaterID?: number;
+    updaterName?: string;
     description?: string;
     checkOutUserID?: number;
+    checkOutUserName?: string;
     checkoutDate?: Date | null;
     size?: number;
     version?: number;
@@ -57,6 +60,8 @@ export interface TMFileManagerProps {
         folder: Array<TMFileManagerContextMenuItem>;
         file: Array<TMFileManagerContextMenuItem>;
     };
+    /** Selected Folder */
+    selectedFolder: FileItem | undefined;
     /** Array of selected files */
     selectedFiles?: Array<FileItem>;
     /** The currently focused file */

package/lib/components/base/TMFileManager.js

@@ -17,15 +17,13 @@ export var TMFileManagerPageSize;
 })(TMFileManagerPageSize || (TMFileManagerPageSize = {}));
 const TMFileManager = (props) => {
     // Destructure the treeFs prop to get the root file system
-    const { treeFs, selectedFiles, focusedFile, handleSelectedFiles, handleFocusedFile, handleSelectedFolder, viewMode: initialViewMode, contextMenuItems, onDoubleClickHandler, handleDropFileCallback, thumbnailsViewItemComponent } = props;
+    const { treeFs, selectedFolder, selectedFiles, focusedFile, handleSelectedFiles, handleFocusedFile, handleSelectedFolder, viewMode: initialViewMode, contextMenuItems, onDoubleClickHandler, thumbnailsViewItemComponent, handleDropFileCallback } = props;
     // State to manage the current view mode ('thumbnails' or 'details')
     const [viewMode, setViewMode] = useState(initialViewMode ?? 'thumbnails');
     // State to store the search text entered by the user
     const [searchText, setSearchText] = useState('');
     // State to store transformed directory data for file manager
     const [treeViewData, setTreeViewData] = useState([]);
-    // State to store the currently selected folder item
-    const [selectedFolder, setSelectedFolder] = useState(undefined);
     // State to store the filtered file items after search or filtering
     const [filteredFileItems, setFilteredFileItems] = useState([]);
     // State to control the collapse/expand of the left panel
@@ -35,13 +33,11 @@ const TMFileManager = (props) => {
     // State to track whether a file drag operation is in progress
     const [isDragging, setIsDragging] = useState(false);
     // State to store context menu items for file manager actions
-    const [menuItems, setMenuItems] = useState([]);
+    const [menuItems, setMenuItems] = useState({ folder: [], file: [] });
     // State to manage the anchor element for context menu positioning
     const [anchorEl, setAnchorEl] = useState(null);
-    // Effect to initialize the context menu items when the component mounts or contextMenuItems change
     useEffect(() => {
-        if (contextMenuItems)
-            setMenuItems(contextMenuItems?.file);
+        setMenuItems(contextMenuItems ?? { folder: [], file: [] });
     }, [contextMenuItems]);
     const onTreeViewContextMenu = (event) => {
         if (event === undefined)
@@ -49,7 +45,7 @@ const TMFileManager = (props) => {
         event.preventDefault();
         setAnchorEl(event.currentTarget);
         const items = contextMenuItems ?? { folder: [], file: [] };
-        setMenuItems(items.folder);
+        setMenuItems(items);
     };
     const onViewContextMenu = (event) => {
         if (event === undefined)
@@ -57,7 +53,7 @@ const TMFileManager = (props) => {
         event.preventDefault();
         setAnchorEl(event.currentTarget);
         const items = contextMenuItems ?? { folder: [], file: [] };
-        setMenuItems(items.file);
+        setMenuItems(items);
     };
     // Handle closing the context menu
     const closeContextMenu = useCallback(() => {
@@ -89,10 +85,16 @@ const TMFileManager = (props) => {
     useEffect(() => {
         const extractedTexts = extractTextsFromDirectory(treeViewData);
         // Reset the selected file item if its name is not found in the extracted texts.
-        if (selectedFolder && !extractedTexts.includes(selectedFolder.name)) {
-            setSelectedFolder(undefined);
-            setIsLeftPanelCollapsed(false);
-        }
+        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
@@ -125,14 +127,14 @@ const TMFileManager = (props) => {
         });
     };
     // Function to find a specific file or folder based on its ID (used for finding nested items)
-    const findFileItems = (items, folderId) => {
+    const findFileItems = (items, id) => {
         for (let item of items) {
-            if (item.id === folderId) {
+            if (item.id === id) {
                 return item; // Return the found item
             }
             // Recursively search in sub-items if any
             if (item.items) {
-                const found = findFileItems(item.items, folderId);
+                const found = findFileItems(item.items, id);
                 if (found) {
                     return found; // Return the found item from recursive call
                 }
@@ -143,7 +145,7 @@ const TMFileManager = (props) => {
     // Render each TreeView item (directories) with custom styling/icons
     const renderTreeViewItem = (itemData) => {
         const isSelected = selectedFolder && selectedFolder.id === itemData.id;
-        return (_jsxs("div", { style: { minWidth: '90px' }, className: isSelected ? 'treeview-selected-item-manager' : '', children: [_jsx(IconFolder, { style: { marginRight: 5, color: '#e6c200' } }), itemData.text, " (", itemData.subFileFolderCount, ")"] }));
+        return (_jsxs("div", { style: { whiteSpace: "nowrap" }, className: isSelected ? 'treeview-selected-item-manager' : '', children: [_jsx(IconFolder, { style: { marginRight: 5, color: '#e6c200' } }), itemData.text, " (", itemData.subFileFolderCount, ")"] }));
     };
     // Function to handle item click event in the TreeView
     const handleTreeViewItemClick = (e) => {
@@ -151,7 +153,6 @@ const TMFileManager = (props) => {
             return;
         const clickedItemId = e.itemData.id;
         const item = clickedItemId === treeFs.id ? treeFs : findFileItems(treeFs.items, clickedItemId);
-        setSelectedFolder(item);
         handleSelectedFolder?.(item);
         handleFocusedFile?.(undefined);
         handleSelectedFiles?.([]);
@@ -172,7 +173,6 @@ const TMFileManager = (props) => {
         if (handleDropFileCallback)
             handleDropFileCallback(files);
     };
-    // Prevent default behavior (i.e., preventing the page from navigating)
     const handleDragOver = (e) => {
         e.preventDefault();
         setIsDragging(true);
@@ -186,7 +186,7 @@ const TMFileManager = (props) => {
                     display: "flex",
                     flexGrow: 1,
                     height: "calc(100% - 40px)"
-                }, children: _jsxs(TMSplitterLayout, { direction: 'horizontal', showSeparator: true, separatorColor: 'transparent', separatorActiveColor: 'transparent', min: ['0', '0'], start: [isLeftPanelCollapsed ? '0%' : "50%", isLeftPanelCollapsed ? '100%' : "50%"], children: [_jsxs("div", { style: { height: "100%", width: "100%" }, onContextMenu: onTreeViewContextMenu, children: [_jsx(TreeView, { style: { marginTop: "10px" }, dataSource: treeViewData, displayExpr: "text", itemRender: renderTreeViewItem, onItemClick: handleTreeViewItemClick }), anchorEl && _jsx(ContextMenu, { dataSource: menuItems, target: anchorEl, onHiding: closeContextMenu })] }), _jsxs("div", { style: { backgroundColor: "#fff", width: "100%", height: "100%" }, children: [_jsxs(Toolbar, { style: { backgroundColor: '#f4f4f4', height: "40px", paddingLeft: "5px", paddingRight: '5px' }, children: [_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: '160px', searchValue: searchText, onSearchValueChanged: (e) => handleSearchChange(e) }) })] }), _jsxs("div", { onDrop: handleDrop, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onContextMenu: onViewContextMenu, style: { width: "100%", height: "calc(100% - 40px)", border: isDragging ? '2px solid red' : '2px solid transparent' }, children: [viewMode === 'thumbnails' && _jsx(ThumbnailsView, { items: filteredFileItems, selectedFiles: selectedFiles, contextMenuItems: contextMenuItems?.file, handleSelectedFiles: handleSelectedFiles, handleFocusedFile: handleFocusedFile, onDoubleClickHandler: onDoubleClickHandler, thumbnailsViewItemComponent: thumbnailsViewItemComponent }), viewMode === 'details' && _jsx(DetailsView, { items: filteredFileItems, contextMenuItems: contextMenuItems?.file, selectedFiles: selectedFiles, focusedFile: focusedFile, handleSelectedFiles: handleSelectedFiles, handleFocusedFile: handleFocusedFile, onDoubleClickHandler: onDoubleClickHandler }), anchorEl && _jsx(ContextMenu, { dataSource: menuItems, target: anchorEl, onHiding: closeContextMenu })] })] })] }, "TMWGs-panels-treeView") })] });
+                }, children: _jsxs(TMSplitterLayout, { direction: 'horizontal', showSeparator: true, separatorColor: 'transparent', separatorActiveColor: 'transparent', min: ['0', '0'], start: [isLeftPanelCollapsed ? '0%' : "50%", isLeftPanelCollapsed ? '100%' : "50%"], children: [_jsxs("div", { style: { height: "100%", width: "100%" }, onContextMenu: onTreeViewContextMenu, children: [_jsx(TreeView, { style: { marginTop: "10px" }, dataSource: treeViewData, displayExpr: "text", itemRender: renderTreeViewItem, onItemClick: handleTreeViewItemClick }), anchorEl && _jsx(ContextMenu, { dataSource: menuItems.folder, target: anchorEl, onHiding: closeContextMenu })] }), _jsxs("div", { style: { backgroundColor: "#fff", width: "100%", height: "100%" }, children: [_jsxs(Toolbar, { style: { backgroundColor: '#f4f4f4', height: "40px", paddingLeft: "5px", paddingRight: '5px' }, children: [_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: '160px', searchValue: searchText, onSearchValueChanged: (e) => handleSearchChange(e) }) })] }), _jsxs("div", { onDrop: handleDrop, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onContextMenu: onViewContextMenu, style: { width: "100%", height: "calc(100% - 40px)", border: isDragging ? '2px solid red' : '2px solid transparent' }, children: [viewMode === 'thumbnails' && _jsx(ThumbnailsView, { items: filteredFileItems, selectedFiles: selectedFiles, contextMenuItems: contextMenuItems?.file, handleSelectedFiles: handleSelectedFiles, handleFocusedFile: handleFocusedFile, onDoubleClickHandler: onDoubleClickHandler, thumbnailsViewItemComponent: thumbnailsViewItemComponent }), viewMode === 'details' && _jsx(DetailsView, { items: filteredFileItems, contextMenuItems: contextMenuItems?.file, selectedFiles: selectedFiles, focusedFile: focusedFile, handleSelectedFiles: handleSelectedFiles, handleFocusedFile: handleFocusedFile, onDoubleClickHandler: onDoubleClickHandler }), anchorEl && _jsx(ContextMenu, { dataSource: menuItems.file, target: anchorEl, onHiding: closeContextMenu })] })] })] }, "TMWGs-panels-treeView") })] });
 };
 export default TMFileManager;
 const DetailsView = (props) => {
@@ -231,6 +231,7 @@ const DetailsView = (props) => {
             { dataField: "name", caption: SDKUI_Localizator.Name },
             { dataField: "version", caption: SDKUI_Localizator.Version },
             { dataField: "size", caption: SDKUI_Localizator.Size, cellRender: (cellData) => formatBytes(cellData.data.size ?? 0) },
+            { dataField: "updaterName", caption: SDKUI_Localizator.Author },
             { 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 },
         ], focusedRowKey: focusedFile?.id, selectedRowKeys: selectedFiles?.map(file => file.id), onFocusedRowChanged: onFocusedRowChanged, onSelectionChanged: onSelectionChanged, onRowDblClick: onRowDblClick, onContextMenuPreparing: onContextMenuPreparing, showSearchPanel: false, showRowLines: SDKUI_Globals.dataGridShowRowLines, showColumnLines: SDKUI_Globals.dataGridShowColumnLines })) : _jsx("div", { style: { width: "100%", height: "100%", display: 'flex', justifyContent: 'center', alignItems: 'center', marginTop: '10px' }, children: SDKUI_Localizator.FolderIsEmpty });

package/lib/helper/SDKUI_Localizator.d.ts

@@ -34,6 +34,7 @@ export declare class SDKUI_Localizator {
     static get AuthMode(): "Authentifizierungsmodus" | "Authentication mode" | "Modo de autenticación" | "Mode d'authentification" | "Modo de autenticação" | "Modalità di autenticazione";
     static get AuthMode_OnBehalfOf(): string;
     static get AuthMode_WindowsViaTopMedia(): "Windows-Authentifizierung über TopMedia" | "Windows authentication via TopMedia" | "Autenticación de Windows a través de TopMedia" | "Authentification Windows via TopMedia" | "Autenticação Windows via TopMedia" | "Autenticazione Windows tramite TopMedia";
+    static get Author(): string;
     static get Back(): "Zurück" | "Back" | "Atrás" | "Dos" | "Voltar" | "Indietro";
     static get BatchUpdate(): "Mehrfachbearbeitung" | "Multiple modification" | "Modificación múltiple" | "Modifie multiple" | "Editar múltipla" | "Modifica multipla";
     static get BlogCase(): "Anschlagbrett" | "Blog board" | "Tablón" | "Tableau d'affichage" | "Bakeca" | "Bacheca";

package/lib/helper/SDKUI_Localizator.js

@@ -289,6 +289,16 @@ export class SDKUI_Localizator {
             default: return "Autenticazione Windows tramite TopMedia";
         }
     }
+    static get Author() {
+        switch (this._cultureID) {
+            case CultureIDs.De_DE: return "Autor";
+            case CultureIDs.En_US: return "Author";
+            case CultureIDs.Es_ES: return "Autor";
+            case CultureIDs.Fr_FR: return "Auteur";
+            case CultureIDs.Pt_PT: return "Autor";
+            default: return "Autore";
+        }
+    }
     static get Back() {
         switch (this._cultureID) {
             case CultureIDs.De_DE: return "Zurück";

package/package.json

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