@topconsultnpm/sdkui-react-beta 6.14.36 → 6.14.38

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

@@ -1,3 +1,20 @@
+import { SearchResultDescriptor, UserDescriptor, WGTreeDescriptor } from "@topconsultnpm/sdk-ts-beta";
 import { FileItem, TMFileManagerTreeViewDirectory } from "./TMFileManager";
 export declare const findFileItems: (items: Array<FileItem>, id: number) => FileItem | undefined;
 export declare const setFolderTreeViewItems: (items: Array<FileItem>) => Array<TMFileManagerTreeViewDirectory>;
+export declare const buildFolderHierarchy: (fileSystemTree: WGTreeDescriptor | undefined, draftsFile: SearchResultDescriptor | undefined, archivedDocuments: Array<SearchResultDescriptor> | undefined, participants: Array<UserDescriptor> | undefined) => {
+    folderMap: Map<number, FileItem>;
+    draftInfoMap: Map<number, {
+        latestVersion: number;
+        folderId: number;
+        folderName: string;
+        fileExt: string;
+        fileSize: string;
+    }>;
+    archivedDocumentMap: Map<number, {
+        tid: number;
+        did: number;
+        fileExt: string;
+        fileSize: string;
+    }>;
+};

package/lib/components/base/TMFileManagerUtils.js

@@ -1,3 +1,4 @@
+import { associateColumnsToRows } from "../../helper";
 // Function to find a specific file or folder based on its ID (used for finding nested items)
 export const findFileItems = (items, id) => {
     for (let item of items) {
@@ -29,3 +30,125 @@ export const setFolderTreeViewItems = (items) => {
         return el;
     });
 };
+// Function to process and build the folder hierarchy
+export const buildFolderHierarchy = (fileSystemTree, draftsFile, archivedDocuments, participants) => {
+    // Initialize a map to hold folder data
+    const folderMap = new Map();
+    // Initialize a map to hold information draft
+    const draftInfoMap = new Map();
+    // Initialize a map to hold archived document
+    const archivedDocumentMap = new Map();
+    // Set to track IDs of folders that are children
+    const childFolderIds = new Set();
+    // Extract folders from the file system tree
+    const folders = fileSystemTree?.folders ?? [];
+    // Step 1: Populate the folderMap with folder data
+    folders.forEach((folder) => {
+        if (folder.id) {
+            folderMap.set(folder.id, { id: folder.id, name: `${folder.name ?? '-'}`, isDirectory: true, items: [] });
+        }
+    });
+    // Step 2: Process the draftsFile if it is provided, and populate items for corresponding folders
+    if (draftsFile !== undefined && draftsFile.dtdResult !== undefined) {
+        // Process the columns and rows to associate them with folder IDs
+        const data = associateColumnsToRows(draftsFile.dtdResult.columns, draftsFile.dtdResult.rows);
+        data.forEach(row => {
+            if (row.FolderID) {
+                // Ensure FolderID is a number, and retrieve the folder from the folderMap
+                const folderId = Number(row.FolderID);
+                const folder = folderMap.get(folderId);
+                const draftID = Number(row.DraftID);
+                const version = row.Versione ? Number(row.Versione) : 0;
+                let checkOutUserName = '';
+                let updaterName = '';
+                if (participants) {
+                    const checkOutUserParticipant = participants.find(participant => participant.id === Number(row.CheckOutUserID)) || null;
+                    if (checkOutUserParticipant) {
+                        checkOutUserName = checkOutUserParticipant.name ?? '-';
+                    }
+                    const updaterUserParticipant = participants.find(participant => participant.id === Number(row.UpdaterID)) || null;
+                    if (updaterUserParticipant) {
+                        updaterName = updaterUserParticipant.name ?? '-';
+                    }
+                }
+                const fileItem = {
+                    id: draftID,
+                    name: (row.Nome ?? '-'),
+                    tid: Number(row.TID),
+                    did: Number(row.DID),
+                    isDirectory: false,
+                    items: [],
+                    size: row.FileSize ? Number(row.FileSize) : 0,
+                    ext: row.FileExt,
+                    creationTime: new Date(row.CreationTime),
+                    lastUpdateTime: new Date(row.LastUpdateTime),
+                    updaterID: Number(row.UpdaterID),
+                    updaterName: updaterName,
+                    description: row.Descrizione,
+                    checkOutUserID: Number(row.CheckOutUserID),
+                    checkOutUserName: checkOutUserName,
+                    checkoutDate: row.CheckOutDate ? new Date(row.CheckOutDate) : null,
+                    version,
+                };
+                if (draftInfoMap.has(draftID)) {
+                    // Get the current version in the map
+                    const currentDraftInfo = draftInfoMap.get(draftID);
+                    // Update only if the new version is greater than the current version
+                    if (currentDraftInfo && version > currentDraftInfo.latestVersion) {
+                        draftInfoMap.set(draftID, { latestVersion: version, folderId: folderId, folderName: folder ? folder.name : '', fileExt: row.FileExt, fileSize: row.FileSize });
+                    }
+                }
+                else {
+                    // If DraftID doesn't exist in the map, add it
+                    draftInfoMap.set(draftID, { latestVersion: version, folderId: folderId, folderName: folder ? folder.name : '', fileExt: row.FileExt, fileSize: row.FileSize });
+                }
+                if (folder) {
+                    // Add the item to the folder's items if the folder exists
+                    folder.items.push(fileItem);
+                }
+                else {
+                    folderMap.set(draftID, fileItem);
+                }
+            }
+        });
+    }
+    // Step 3: Process the archived document if it is provided, and populate items for corresponding files
+    if (archivedDocuments !== undefined && archivedDocuments.length > 0) {
+        archivedDocuments.forEach((archivedDocument) => {
+            if (archivedDocument.dtdResult?.columns && archivedDocument.dtdResult.rows) {
+                const data = associateColumnsToRows(archivedDocument.dtdResult.columns, archivedDocument.dtdResult.rows);
+                data.forEach((row) => {
+                    const did = Number(row.DID);
+                    const tid = Number(row.TID);
+                    if (did && tid) {
+                        if (archivedDocumentMap.has(did)) {
+                            const currentArchivedDocumentInfo = draftInfoMap.get(did);
+                            if (currentArchivedDocumentInfo) {
+                                archivedDocumentMap.set(did, { tid, did, fileExt: row.FileExt, fileSize: row.FileSize });
+                            }
+                        }
+                        else {
+                            archivedDocumentMap.set(did, { tid, did, fileExt: row.FileExt, fileSize: row.FileSize });
+                        }
+                    }
+                });
+            }
+        });
+    }
+    // Step 4: Build parent-child relationships based on folder structure
+    folders.forEach((folder) => {
+        if (folder.parentID !== undefined && folder.id !== undefined) {
+            const parent = folderMap.get(folder.parentID);
+            const child = folderMap.get(folder.id);
+            if (parent && child) {
+                parent.items.push(child); // Attach the child folder to the parent's items
+                childFolderIds.add(folder.id); // Mark folder ID as a child
+            }
+        }
+    });
+    // Step 4: Remove child folders from the root-level folder map
+    childFolderIds.forEach((id) => {
+        folderMap.delete(id);
+    });
+    return { folderMap, draftInfoMap, archivedDocumentMap };
+};

package/lib/components/features/wg/TMWGsCopyMoveForm.d.ts

@@ -0,0 +1,24 @@
+import { WorkingGroupDescriptor } from "@topconsultnpm/sdk-ts-beta";
+import { FileItem } from '../../base/TMFileManager';
+interface TMWGsCopyMoveFormProps {
+    mode: 'copy' | 'move';
+    currentWorkingGroup: WorkingGroupDescriptor;
+    folder: FileItem;
+    selectedDrafts: Array<FileItem>;
+    onClose: () => void;
+    refreshCallback: () => void;
+    workingGroups?: Array<WorkingGroupDescriptor>;
+}
+declare const TMWGsCopyMoveForm: (props: TMWGsCopyMoveFormProps) => import("react/jsx-runtime").JSX.Element;
+export default TMWGsCopyMoveForm;
+interface StepItem {
+    id: number | string;
+    title: string;
+    subtitle?: string;
+}
+interface TMStepNavigatorProps {
+    steps: Array<StepItem>;
+    currentStep: number;
+    onStepChange: (stepIndex: number) => void;
+}
+export declare const TMStepNavigator: (props: TMStepNavigatorProps) => import("react/jsx-runtime").JSX.Element;

package/lib/components/features/wg/TMWGsCopyMoveForm.js

@@ -0,0 +1,329 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { ResultTypes, SDK_Globals, WorkingGroupCacheService, WorkingGroupEngine } from "@topconsultnpm/sdk-ts-beta";
+import { TreeView } from 'devextreme-react';
+import styled from 'styled-components';
+import { buildFolderHierarchy, findFileItems, setFolderTreeViewItems } from '../../base/TMFileManagerUtils';
+import TMSpinner from '../../base/TMSpinner';
+import { TMExceptionBoxManager } from '../../base/TMPopUp';
+import { useDeviceType } from '../../base/TMDeviceProvider';
+import { SDKUI_Localizator, getExceptionMessage, Globalization, IconUserGroup, IconFolder, calcResponsiveSizes } from '../../../helper';
+import { useSaveForm, SaveFormOptions } from '../../../hooks/useForm';
+import { FormModes } from '../../../ts';
+import { TMColors } from '../../../utils/theme';
+import TMDataGrid from '../../base/TMDataGrid';
+import TMTooltip from '../../base/TMTooltip';
+import { TMLayoutWaitingContainer } from '../../base/TMWaitPanel';
+import { TMResultManager } from '../../forms/TMResultDialog';
+import TMSaveForm from '../../forms/TMSaveForm';
+let abortController = new AbortController();
+const TMWGsCopyMoveForm = (props) => {
+    const { mode, workingGroups, currentWorkingGroup, folder, selectedDrafts, onClose, refreshCallback } = props;
+    // Get the current device type (e.g., mobile, tablet, desktop) using a custom hook.
+    const deviceType = useDeviceType();
+    // Stepper state: manages the current step in a multi-step UI
+    const [currentStep, setCurrentStep] = useState(0);
+    // State to store the list of working groups
+    const [wgs, setWgs] = useState([]);
+    // State to store the currently selected working group, or undefined if none is selected
+    const [selectedWg, setSelectedWg] = useState(undefined);
+    // State hook to store the currently focused row key, initially set to undefined
+    const [focusedRowKey, setFocusedRowKey] = useState(undefined);
+    // State to store selected row keys
+    const [selectedRowKeys, setSelectedRowKeys] = useState([]);
+    // State to manage the file system hierarchy
+    const [treeFs, setTreeFs] = useState(undefined);
+    // State to store transformed directory data for file manager
+    const [treeViewData, setTreeViewData] = useState([]);
+    // State to manage the selected file
+    const [selectedFolder, setSelectedFolder] = useState(undefined);
+    // State variable to control the visibility of the wait panel
+    const [showWaitPanel, setShowWaitPanel] = useState(false);
+    // State variable to store the title of the wait panel
+    const [waitPanelTitle, setWaitPanelTitle] = useState('');
+    // State variable to control the visibility of the primary section of the wait panel
+    const [showPrimary, setShowPrimary] = useState(false);
+    // State variable to store the primary text of the wait panel
+    const [waitPanelTextPrimary, setWaitPanelTextPrimary] = useState('');
+    // State variable to track the current value of the primary progress indicator in the wait panel
+    const [waitPanelValuePrimary, setWaitPanelValuePrimary] = useState(0);
+    // State variable to define the maximum value for the primary progress indicator in the wait panel
+    const [waitPanelMaxValuePrimary, setWaitPanelMaxValuePrimary] = useState(0);
+    // Disable if currentWorkingGroup or its id, selectedWg, or selectedFolder are undefined; recomputed only when dependencies change
+    const isDisabled = useMemo(() => {
+        return currentWorkingGroup === undefined || currentWorkingGroup.id === undefined || selectedWg === undefined || selectedFolder === undefined;
+    }, [currentWorkingGroup, selectedWg, selectedFolder]);
+    // Sort working groups and set focused row to current and select current working group and go to step 
+    useEffect(() => {
+        if (!currentWorkingGroup)
+            return;
+        const loadWorkingGroups = async () => {
+            let groupsToUse = workingGroups;
+            if (!groupsToUse) {
+                try {
+                    TMSpinner.show({ description: SDKUI_Localizator.LoadingWorkGroups });
+                    // Clear cache and fetch working groups
+                    WorkingGroupCacheService.RemoveAll();
+                    const fetchedGroups = await WorkingGroupCacheService.GetAllAsync();
+                    groupsToUse = fetchedGroups;
+                }
+                catch (error) {
+                    TMExceptionBoxManager.show({ exception: error });
+                }
+                finally {
+                    TMSpinner.hide();
+                }
+            }
+            if (groupsToUse) {
+                const sortedGroups = [...groupsToUse].sort((a, b) => {
+                    if (!a.name && !b.name)
+                        return 0;
+                    if (!a.name)
+                        return 1;
+                    if (!b.name)
+                        return -1;
+                    return a.name.localeCompare(b.name);
+                });
+                setWgs(sortedGroups);
+                setFocusedRowKey(currentWorkingGroup.id);
+                setSelectedWg(currentWorkingGroup);
+                setCurrentStep(1);
+            }
+        };
+        loadWorkingGroups();
+    }, [workingGroups, currentWorkingGroup]);
+    // Fetch the file system tree for the selected working group when it or the list of WGs changes
+    useEffect(() => {
+        const fetchWgTree = async () => {
+            if (!selectedWg || !selectedWg.id)
+                return;
+            try {
+                const workingGroupEngine = new WorkingGroupEngine(SDK_Globals.tmSession);
+                const wgTreeFileSystem = await workingGroupEngine.DraftsGetTreeAsync(selectedWg.id);
+                const { folderMap } = buildFolderHierarchy(wgTreeFileSystem, undefined, undefined, undefined);
+                const rootFolder = { id: -1, name: SDKUI_Localizator.Drafts, isDirectory: true, items: Array.from(folderMap.values()), };
+                const rootTreeViewItem = { id: -1, text: rootFolder.name, subFileFolderCount: rootFolder.items.filter(item => !item.isDirectory).length, expanded: true, items: setFolderTreeViewItems(rootFolder.items), };
+                setTreeFs(rootFolder);
+                setTreeViewData([rootTreeViewItem]);
+            }
+            catch (error) {
+                TMExceptionBoxManager.show({ exception: error });
+            }
+        };
+        if (selectedWg && wgs.length) {
+            fetchWgTree();
+        }
+    }, [selectedWg, wgs]);
+    // When the current step resets to the first step (index 0), clear the selected folder by setting it to undefined
+    useEffect(() => {
+        if (currentStep === 0) {
+            setSelectedFolder(undefined);
+        }
+    }, [currentStep]);
+    // Single selection mode for data grid
+    const selection = useMemo(() => {
+        return { mode: 'single' };
+    }, []);
+    // Handles focus change in the data grid
+    const onFocusedRowChanged = useCallback((e) => {
+        setFocusedRowKey(e.row?.key);
+    }, []);
+    // Handles selection change in the data grid
+    const onSelectionChanged = useCallback((e) => {
+        const selectedKeys = e.component.getSelectedRowKeys() ?? [];
+        setSelectedRowKeys(selectedKeys);
+    }, []);
+    const onRowDblClick = useCallback((e) => {
+        if (e.data) {
+            setSelectedWg(e.data);
+            setCurrentStep(1);
+        }
+    }, []);
+    // Handle selected folder
+    const handleSelectedFolder = (folderItem) => {
+        setSelectedFolder(folderItem);
+    };
+    // Function to handle item click event in the TreeView
+    const handleTreeViewItemClick = (e) => {
+        if (!e || !treeFs)
+            return;
+        const clickedItemId = e.itemData.id;
+        const item = clickedItemId === treeFs.id ? treeFs : findFileItems(treeFs.items, clickedItemId);
+        handleSelectedFolder(item);
+    };
+    const validator = async () => {
+        let vil = [];
+        return vil;
+    };
+    // Returns true if one row and folder are selected and either differs from the current group or folder
+    const isLocalSelectionModified = () => {
+        // Ensure a single row is selected and a folder is selected
+        if (selectedWg !== undefined && selectedFolder !== undefined && currentStep === 1) {
+            // Check if the selected row and folder differ from the current state
+            const isGroupChanged = selectedWg.id !== currentWorkingGroup.id;
+            const isFolderChanged = selectedFolder.id !== folder.id;
+            return isGroupChanged || isFolderChanged;
+        }
+        // Default to unmodified
+        return false;
+    };
+    const { validationItems, exception } = useSaveForm(FormModes.Update, 0, new SaveFormOptions(), validator);
+    const onSaveAsync = async () => {
+        if (isDisabled)
+            return;
+        try {
+            // If the currentWorkingGroup or its id is not defined, exit early by resolving the promise
+            if (currentWorkingGroup === undefined || currentWorkingGroup.id === undefined || selectedWg === undefined || selectedFolder === undefined)
+                return Promise.resolve();
+            setWaitPanelTitle(mode === 'copy' ? SDKUI_Localizator.Copy : SDKUI_Localizator.Move);
+            setShowWaitPanel(true);
+            setShowPrimary(true);
+            // Initialize an empty array to hold the result information
+            abortController = new AbortController();
+            let result = [];
+            let i = 0;
+            setWaitPanelMaxValuePrimary(selectedDrafts.length);
+            for (const draft of selectedDrafts) {
+                i++;
+                setWaitPanelValuePrimary(i);
+                if (abortController.signal.aborted) {
+                    result.push({ rowIndex: i, id1: i, id2: i, resultType: ResultTypes.WARNING, description: SDKUI_Localizator.OperationFilesInterrupted.replaceParams(i) });
+                    break;
+                }
+                else {
+                    setWaitPanelTextPrimary(`${i}/${selectedDrafts.length}`);
+                    try {
+                        const workingGroupEngine = new WorkingGroupEngine(SDK_Globals.tmSession);
+                        if (currentWorkingGroup.id && selectedWg && selectedWg.id && selectedFolder && draft.did) {
+                            const selectedFolderId = selectedFolder.id === -1 ? 0 : selectedFolder.id;
+                            if (mode === 'copy') {
+                                await workingGroupEngine.DraftsCopyAsync(currentWorkingGroup.id, draft.did, selectedWg.id, selectedFolderId);
+                            }
+                            else if (mode === 'move') {
+                                await workingGroupEngine.DraftsMoveAsync(currentWorkingGroup.id, draft.did, selectedWg.id, selectedFolderId);
+                            }
+                        }
+                        result.push({ rowIndex: i, id1: i, id2: i, description: SDKUI_Localizator.UpdateCompletedSuccessfully, resultType: ResultTypes.SUCCESS });
+                    }
+                    catch (err) {
+                        result.push({ rowIndex: i, id1: i, id2: i, resultType: ResultTypes.ERROR, description: getExceptionMessage(err) });
+                    }
+                }
+            }
+            setWaitPanelTextPrimary('');
+            setWaitPanelMaxValuePrimary(0);
+            setWaitPanelValuePrimary(0);
+            setShowWaitPanel(false);
+            TMResultManager.show(result, mode === 'copy' ? SDKUI_Localizator.Copy : SDKUI_Localizator.Move, "ID", undefined);
+            refreshCallback();
+            onClose();
+        }
+        catch (e) {
+            // If any error occurs during the try block execution, display the exception in an error box
+            TMExceptionBoxManager.show({ exception: e });
+        }
+    };
+    const cellIconRender = useCallback((cellData) => {
+        const data = cellData.data;
+        const tooltipContent = (_jsxs("div", { style: { textAlign: 'left' }, children: [_jsx("div", { children: _jsx("strong", { children: SDKUI_Localizator.WorkGroup }) }), _jsx("hr", {}), _jsxs("div", { children: [_jsx("span", { style: { fontWeight: 'bold' }, children: "ID:" }), " ", data.id] }), _jsxs("div", { children: [_jsxs("span", { style: { fontWeight: 'bold' }, children: [SDKUI_Localizator.Name, ":"] }), " ", data.name ?? '-'] }), _jsxs("div", { children: [_jsxs("span", { style: { fontWeight: 'bold' }, children: [SDKUI_Localizator.OwnerName, ":"] }), " ", data.ownerName ?? '-'] }), _jsxs("div", { children: [_jsxs("span", { style: { fontWeight: 'bold' }, children: [SDKUI_Localizator.CreationTime, ":"] }), " ", Globalization.getDateTimeDisplayValue(data.creationTime)] })] }));
+        return _jsx(TMTooltip, { content: tooltipContent, children: _jsx(IconUserGroup, { color: "#009700" }) });
+    }, []);
+    const cellDafaultRender = useCallback((cellData) => {
+        return _jsx("span", { children: cellData.value });
+    }, []);
+    const cellNameRender = useCallback((cellData) => {
+        const data = cellData.data;
+        return _jsx("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: _jsx("span", { children: data.name }) });
+    }, []);
+    const dataColumns = useMemo(() => {
+        return ([
+            { dataField: 'id', caption: "ID", dataType: 'string', visible: false, cellRender: cellDafaultRender },
+            { caption: "", dataType: 'string', cellRender: cellIconRender, width: "30px", allowFiltering: false },
+            { dataField: 'name', caption: SDKUI_Localizator.Name, dataType: 'string', cellRender: cellNameRender },
+            { dataField: 'description', caption: SDKUI_Localizator.Description, dataType: 'string', cellRender: cellDafaultRender },
+            { dataField: "ownerName", caption: SDKUI_Localizator.OwnerName, dataType: 'string', cellRender: cellDafaultRender },
+        ]);
+    }, []);
+    // Render each TreeView item (directories) with custom styling/icons
+    const renderTreeViewItem = (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] });
+        return (_jsxs("div", { style: { whiteSpace: "nowrap", display: "flex", alignItems: "center" }, className: isSelected ? 'treeview-selected-item-manager' : '', children: [_jsx(TMTooltip, { content: tooltipContent, children: _jsx(IconFolder, { style: { marginRight: 5, color: '#e6c200' } }) }), itemData.text] }));
+    };
+    return _jsx(TMSaveForm, { title: (mode === 'copy' ? SDKUI_Localizator.Copy : SDKUI_Localizator.Move) + (selectedDrafts.length === 1
+            ? ': ' + selectedDrafts[0].name
+            : ' (' + selectedDrafts.length + ')'), showErrorCount: false, showUndoButton: false, hasNavigation: false, skipIsModifiedCheck: true, isModal: true, width: calcResponsiveSizes(deviceType, '800px', '800px', '95%'), height: '550px', validationItems: validationItems, exception: exception, isModified: isLocalSelectionModified(), showToolbar: false, showSaveButton: false, onClose: onClose, children: _jsxs(TMLayoutWaitingContainer, { direction: 'vertical', showWaitPanel: showWaitPanel, showWaitPanelPrimary: showPrimary, waitPanelTitle: waitPanelTitle, waitPanelTextPrimary: waitPanelTextPrimary, waitPanelValuePrimary: waitPanelValuePrimary, waitPanelMaxValuePrimary: waitPanelMaxValuePrimary, isCancelable: true, abortController: abortController, children: [_jsx("div", { style: { width: "100%", height: '48px' }, children: _jsx(TMStepNavigator, { steps: [
+                            { id: 0, title: SDKUI_Localizator.ChooseGroup, subtitle: selectedWg ? selectedWg.name : undefined },
+                            { id: 1, title: SDKUI_Localizator.ChooseFolder, subtitle: selectedFolder ? selectedFolder.name : undefined }
+                        ], currentStep: currentStep, onStepChange: (stepIndex) => { setCurrentStep(stepIndex); } }) }), _jsxs("div", { style: {
+                        marginTop: '10px',
+                        padding: '10px',
+                        borderRadius: '8px',
+                        boxShadow: '3px 0 5px #D3D3D3BF, -3px 0 5px #D3D3D3BF, 0 3px 5px #D3D3D3BF, 0 -3px 5px #D3D3D3BF',
+                        border: '1px solid rgba(0,0,0,0.15)',
+                        width: '100%',
+                        height: 'calc(100% - 113px)',
+                        overflow: 'auto',
+                    }, children: [(currentStep === 0 && wgs.length > 0) &&
+                            _jsx(TMDataGrid, { dataColumns: dataColumns, dataSource: wgs, selection: selection, focusedRowKey: focusedRowKey, onFocusedRowChanged: onFocusedRowChanged, selectedRowKeys: [...selectedRowKeys], onSelectionChanged: onSelectionChanged, onRowDblClick: onRowDblClick, autoNavigateToFocusedRow: true, showColumnHeaders: false }), (currentStep === 1) &&
+                            _jsx(TreeView, { dataSource: treeViewData, displayExpr: "text", itemRender: renderTreeViewItem, onItemClick: handleTreeViewItemClick })] }), _jsxs("div", { style: {
+                        width: "100%",
+                        height: '45px',
+                        marginTop: "10px",
+                        display: 'flex',
+                        justifyContent: 'flex-end',
+                        alignItems: 'center',
+                        gap: '10px'
+                    }, children: [_jsx("button", { onClick: () => onSaveAsync(), disabled: isDisabled, style: {
+                                background: 'none',
+                                border: 'none',
+                                color: isDisabled ? '#a0a0a0' : TMColors.primary,
+                                cursor: isDisabled ? 'not-allowed' : 'pointer',
+                                padding: '6px 14px',
+                                borderRadius: '6px',
+                                transition: 'background-color 0.3s, color 0.3s',
+                            }, onMouseEnter: e => {
+                                if (!isDisabled) {
+                                    e.currentTarget.style.backgroundColor = '#e6f0ff';
+                                    e.currentTarget.style.color = '#004a99';
+                                }
+                            }, onMouseLeave: e => {
+                                if (!isDisabled) {
+                                    e.currentTarget.style.backgroundColor = 'transparent';
+                                    e.currentTarget.style.color = TMColors.primary;
+                                }
+                            }, children: mode === 'copy' ? SDKUI_Localizator.Copy : SDKUI_Localizator.Move }), _jsx("button", { onClick: () => onClose(), style: {
+                                background: 'none',
+                                border: 'none',
+                                color: TMColors.primary,
+                                cursor: 'pointer',
+                                padding: '6px 14px',
+                                borderRadius: '6px',
+                                transition: 'background-color 0.3s, color 0.3s',
+                            }, onMouseEnter: e => {
+                                e.currentTarget.style.backgroundColor = '#e6f0ff';
+                                e.currentTarget.style.color = '#004a99';
+                            }, onMouseLeave: e => {
+                                e.currentTarget.style.backgroundColor = 'transparent';
+                                e.currentTarget.style.color = TMColors.primary;
+                            }, children: SDKUI_Localizator.Cancel })] })] }) });
+};
+export default TMWGsCopyMoveForm;
+const StepSpan = styled.span `
+  color: ${({ $isCurrent, $isPast }) => ($isCurrent ? TMColors.primary : $isPast ? '#555' : '#888')};
+  font-weight: ${({ $isCurrent }) => ($isCurrent ? 600 : 400)};
+  cursor: ${({ $isPast }) => ($isPast ? 'pointer' : 'default')};
+  transition: color 0.3s ease;
+  &:hover {
+    color: ${({ $isPast }) => ($isPast ? '#007bff' : undefined)};
+    text-decoration: ${({ $isPast }) => ($isPast ? 'underline' : 'none')};
+  }
+`;
+export const TMStepNavigator = (props) => {
+    const { steps, currentStep, onStepChange } = props;
+    return (_jsx("div", { style: { display: 'flex', justifyContent: 'center' }, children: _jsx("div", { style: { display: 'flex', alignItems: 'center', backgroundColor: '#f9f9f9', padding: '6px 16px', borderRadius: '999px', boxShadow: '0 1px 4px rgba(0, 0, 0, 0.05)' }, children: steps.map((step, index) => {
+                const isPastStep = index < currentStep;
+                const isCurrent = currentStep === index;
+                return _jsxs("div", { style: { display: 'flex', alignItems: 'center' }, children: [_jsx(StepSpan, { "$isCurrent": isCurrent, "$isPast": isPastStep, onClick: isPastStep ? () => onStepChange(index) : undefined, children: _jsxs("div", { style: { display: 'flex', flexDirection: 'column', alignItems: 'center' }, children: [_jsx("span", { children: step.title }), step.subtitle && _jsxs("span", { style: { fontSize: '0.90em', fontStyle: "italic" }, children: ["\"", step.subtitle, "\""] })] }) }), index < steps.length - 1 && (_jsx("span", { style: { margin: '0 8px', color: '#ddd' }, children: _jsx("i", { className: 'dx-icon-greater' }) }))] }, step.id);
+            }) }) }));
+};

package/lib/helper/SDKUI_Localizator.d.ts

@@ -60,6 +60,8 @@ export declare class SDKUI_Localizator {
     static get ChangePassword(): "Kennwort ändern" | "Change password" | "Cambiar la contraseña" | "Changer le mot de passe" | "Alterar a senha" | "Cambia password";
     static get CheckIn(): "Check in" | "Enregistrement";
     static get CheckOut(): "Check out" | "Extraction";
+    static get ChooseFolder(): string;
+    static get ChooseGroup(): string;
     static get ChronologyDelete(): "Physische Löschung der Chronologie" | "Physical deletion of chronology" | "Eliminación física de la cronología" | "Suppression physique de la chronologie" | "Exclusão física da cronologia" | "Cancellazione fisica della cronologia";
     static get Clear(): "Bereinigen" | "Clear" | "Limpiar" | "Efface" | "Limpar" | "Pulisci";
     static get ClearOTP(): "OTP löschen" | "Clear OTP" | "Borrar OTP" | "Effacer l'OTP" | "Limpar OTP" | "Cancella OTP";
@@ -200,6 +202,7 @@ export declare class SDKUI_Localizator {
     static get List_Hide(): "Liste ausblenden" | "Hide list" | "Ocultar lista" | "Masquer la liste" | "Nascondi la lista";
     static get List_Show(): "liste anzeigen" | "Show list" | "Ver lista" | "Afficher la liste" | "Visualizza la lista";
     static get Loading(): "Laden" | "Loading" | "Carga" | "Chargement" | "Caricamento";
+    static get LoadingWorkGroups(): string;
     static get Login(): string;
     static get LogDelete(): "Löschen der Logik" | "Logical delete" | "Cancelación lógica" | "Suppression logique" | "Lógica de cancelamento" | "Cancellazione logica";
     static get MakeEditable(): "Bearbeitbar machen" | "Make editable" | "Hacer editable" | "Rendre modifiable" | "Faça editável" | "Rendi editabile";
@@ -256,6 +259,7 @@ export declare class SDKUI_Localizator {
     static get Operations(): "Operationen" | "Operations" | "Operaciones" | "Opérations" | "Operações" | "Operazioni";
     static get OnBehalfOf(): "im Auftrag von" | "on behalf of" | "a nombre de" | "de la part de" | "em nome de" | "per conto di";
     static get OneMore(): "andere" | "more" | "otro" | "autre" | "outro" | "altro";
+    static get OperationFilesInterrupted(): string;
     static get OperationResult(): "Operationsergebnis" | "Operation result" | "Resultado de la operación" | "Résultat de l'opération" | "Resultado da operação" | "Esito operazione";
     static get OperationSuccess(): "Vorgang erfolgreich abgeschlossen" | "Operation completed successfully" | "Operación completada con éxito" | "Opération terminée avec succès" | "Operação concluída com sucesso" | "Operazione completata con successo";
     static get Options(): "Optionen" | "Options" | "Opciones" | "Opções" | "Opzioni";

package/lib/helper/SDKUI_Localizator.js

@@ -549,6 +549,26 @@ export class SDKUI_Localizator {
             default: return "Check out";
         }
     }
+    static get ChooseFolder() {
+        switch (this._cultureID) {
+            case CultureIDs.De_DE: return "Ordner auswählen";
+            case CultureIDs.En_US: return "Choose the folder";
+            case CultureIDs.Es_ES: return "Elegir la carpeta";
+            case CultureIDs.Fr_FR: return "Choisir le dossier";
+            case CultureIDs.Pt_PT: return "Escolher a pasta";
+            default: return "Scegli la cartella";
+        }
+    }
+    static get ChooseGroup() {
+        switch (this._cultureID) {
+            case CultureIDs.De_DE: return "Gruppe auswählen";
+            case CultureIDs.En_US: return "Choose the group";
+            case CultureIDs.Es_ES: return "Elegir el grupo";
+            case CultureIDs.Fr_FR: return "Choisir le groupe";
+            case CultureIDs.Pt_PT: return "Escolher o grupo";
+            default: return "Scegli il gruppo";
+        }
+    }
     static get ChronologyDelete() {
         switch (this._cultureID) {
             case CultureIDs.De_DE: return "Physische Löschung der Chronologie";
@@ -1960,6 +1980,16 @@ export class SDKUI_Localizator {
             default: return "Caricamento";
         }
     }
+    static get LoadingWorkGroups() {
+        switch (this._cultureID) {
+            case CultureIDs.De_DE: return "Laden von Arbeitsgruppen";
+            case CultureIDs.En_US: return "Loading Work Groups";
+            case CultureIDs.Es_ES: return "Cargando Grupos de Trabajo";
+            case CultureIDs.Fr_FR: return "Chargement des Groupes de Travail";
+            case CultureIDs.Pt_PT: return "Carregando Grupos de Trabalho";
+            default: return "Caricamento dei Gruppi di lavoro";
+        }
+    }
     static get Login() {
         switch (this._cultureID) {
             case CultureIDs.De_DE: return "Anmeldung";
@@ -2511,6 +2541,16 @@ export class SDKUI_Localizator {
             default: return "altro";
         }
     }
+    static get OperationFilesInterrupted() {
+        switch (this._cultureID) {
+            case CultureIDs.De_DE: return `Vorgang unterbrochen. {{0}} Dateien verarbeitet`;
+            case CultureIDs.En_US: return `Operation interrupted. Processed {{0}} files`;
+            case CultureIDs.Es_ES: return `Operación interrumpida. Procesados {{0}} archivos`;
+            case CultureIDs.Fr_FR: return `Opération interrompue. {{0}} fichiers traités`;
+            case CultureIDs.Pt_PT: return `Operação interrompida. Processados {{0}} arquivos`;
+            default: return `Operazione interrotta. Elaborati {{0}} files`;
+        }
+    }
     static get OperationResult() {
         switch (this._cultureID) {
             case CultureIDs.De_DE: return "Operationsergebnis";

package/lib/helper/TMUtils.d.ts

@@ -1,2 +1,7 @@
+import { DataColumnDescriptor } from '@topconsultnpm/sdk-ts-beta';
 export declare const getFileIcon: (fileExtension: string | undefined, fileCount: number | undefined, tooltipContent?: JSX.Element | string) => import("react/jsx-runtime").JSX.Element;
 export declare function formatBytes(bytes: number | undefined, decimalPlaces?: number): string;
+export interface RowData {
+    [key: string]: string | number | null;
+}
+export declare const associateColumnsToRows: (columns: Array<DataColumnDescriptor> | undefined, rows: Array<Array<string>> | undefined) => Array<RowData>;

package/lib/helper/TMUtils.js

@@ -95,3 +95,23 @@ export function formatBytes(bytes, decimalPlaces = 2) {
     const value = parseFloat((bytes / Math.pow(k, i)).toFixed(decimalPlaces));
     return `${value} ${units[i]}`;
 }
+// Function to associate columns to rows and return an array of RowData objects
+export const associateColumnsToRows = (columns, rows) => {
+    if (columns === undefined || rows === undefined)
+        return [];
+    // Map over each row and associate each value with the corresponding column's caption
+    return rows.map(row => {
+        // Create an empty object to hold the key-value pairs for each row
+        const rowObject = {};
+        // Loop through each cell in the row and map its value to the corresponding column's caption
+        row.forEach((value, index) => {
+            const column = columns[index]; // Get the column corresponding to the current index
+            // If a column exists at this index, add the value to the rowObject with the column's caption as the key
+            if (column && column.caption) {
+                rowObject[column.caption] = value;
+            }
+        });
+        // Return the populated rowObject, which represents the row with columns as keys
+        return rowObject;
+    });
+};

package/package.json

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