@topconsultnpm/sdkui-react 6.17.0-test9

package/lib/components/features/tasks/TMTasksView.js

@@ -0,0 +1,560 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useEffect, useState } from "react";
+import { AssignedTab, checkIfNew, createTasksMenuItems, getHeaderPriorityFilterConfig, getHeaderStatusFilterConfig, getMondayOfCurrentWeek, getNewTaskCount, getStatusLocalizatorValue, isTaskAssignedToAnotherUser, TaskView, TEXT_NOT_SELECTED_COLOR } from "./TMTasksUtils";
+import { TabPanel, Item } from 'devextreme-react/tab-panel';
+import { Priorities, ResultTypes, SDK_Globals, Task_States } from "@topconsultnpm/sdk-ts";
+import { calculateNumberOfDays, renderTaskIcons } from "./TMTasksUtilsView";
+import { getPriorityLocalizatorValue } from "../tasks/TMTasksUtils";
+import ContextMenu from 'devextreme-react/context-menu';
+import { calcResponsiveSizes, getExceptionMessage, SDKUI_Localizator, StyledTabItem, TMCountBadge } from "../../../helper";
+import { useDeviceType } from "../../base/TMDeviceProvider";
+import { FormModes } from "../../../ts";
+import TMDataGrid from "../../base/TMDataGrid";
+import { TMMessageBoxManager, ButtonNames } from "../../base/TMPopUp";
+import TMTooltip from "../../base/TMTooltip";
+import { TMLayoutWaitingContainer } from "../../base/TMWaitPanel";
+import { TMResultManager } from "../../forms/TMResultDialog";
+import TMTasksCalendar from "./TMTasksCalendar";
+import TMTasksAgenda from "./TMTasksAgenda";
+import TMTaskForm from "./TMTaskForm";
+let abortController = new AbortController();
+const TMTasksView = (props) => {
+    const { id, allTasks, getAllTasks, deleteTaskByIdsCallback, addTaskCallback, editTaskCallback, visualizedTasks, activeComponent, activeTabIndex, setActiveTabIndex, currentTask, setCurrentTask, assignedToMeCount, assignedByMeCount, allTasksFilteredCount, showId, setShowId, showSearch, setShowSearch, showContextualWG, setShowContextualWG, showContextualDossier, setShowContextualDossier, showContextualDocument, setShowContextualDocument, handleNavigateToWGs, handleNavigateToDossiers, taskContext, usersList, onOpenS4TViewerRequest, s4TViewerDialogComponent, afterTaskSaved, } = props;
+    // Get the current device type (e.g., mobile, tablet, desktop) using a custom hook.
+    const deviceType = useDeviceType();
+    // State to manage show comment form selected file
+    const [showTaskForm, setShowTaskForm] = useState(false);
+    // State to store form mode (None, Create, Update, Duplicate, ReadOnly)
+    const [formMode, setFormMode] = useState(undefined);
+    // State to know if there are filters applied
+    const [hasFilters, setHasFilters] = useState(false);
+    // State to store selected row keys
+    const [selectedRowKeys, setSelectedRowKeys] = useState([]);
+    // State hook to store the currently focused row key, initially set to undefined
+    const [focusedRowKey, setFocusedRowKey] = useState(undefined);
+    // State to manage the current agenda date
+    const [currentAgendaDate, setCurrentAgendaDate] = useState(getMondayOfCurrentWeek(new Date()));
+    // State to manage the current agenda date
+    const [currentCalendarDate, setCurrentCalendarDate] = useState(getMondayOfCurrentWeek(new Date()));
+    /* State to manage the calendar start date */
+    const [calendarStartDate, setCalendarStartDate] = useState(undefined);
+    /* State to manage the calendar end date */
+    const [calendarEndDate, setCalendarEndDate] = 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);
+    const [isContextualCreate, setIsContextualCreate] = useState(false);
+    // This function open the task form for editing a selected task
+    const editTaskAgendaCallback = (rowId) => {
+        if (rowId === undefined)
+            return;
+        const selectedTask = visualizedTasks.find(task => task.id === rowId);
+        if (selectedTask) {
+            openTaskFormCallback(FormModes.Update, selectedTask);
+        }
+        else {
+            console.error(`Task with ID ${rowId} not found.`);
+        }
+    };
+    const onDuplicateAgendaCallback = (rowId) => {
+        if (rowId === undefined)
+            return;
+        const selectedTask = visualizedTasks.find(task => task.id === rowId);
+        if (selectedTask) {
+            openTaskFormCallback(FormModes.Duplicate, selectedTask);
+        }
+        else {
+            console.error(`Task with ID ${rowId} not found.`);
+        }
+    };
+    const agendaCalendarItems = useCallback(() => {
+        const taskDescriptor = visualizedTasks.find(task => task.id === focusedRowKey);
+        return [
+            ...createTasksMenuItems(taskDescriptor, showId, setShowId, showSearch, setShowSearch, () => { openTaskFormCallback(FormModes.Create); }, () => { if (focusedRowKey)
+                editTaskAgendaCallback(focusedRowKey); }, () => { if (focusedRowKey)
+                onDuplicateAgendaCallback(focusedRowKey); }, () => { if (focusedRowKey)
+                onDeleteCallback([focusedRowKey]); }, (rowIds, status) => { if (focusedRowKey)
+                markAsStatus([focusedRowKey], status); }, getAllTasks, taskContext?.workingGroup?.id !== undefined, showContextualWG, setShowContextualWG, taskContext?.dossier?.id !== undefined, showContextualDossier, setShowContextualDossier, taskContext?.document?.tid !== undefined && taskContext?.document?.did !== undefined, showContextualDocument, setShowContextualDocument, true, () => { setCurrentCalendarDate(new Date()); setCurrentAgendaDate(new Date()); }, false),
+        ];
+    }, [visualizedTasks, focusedRowKey, showId, showSearch, showContextualWG, showContextualDossier, taskContext]);
+    const [menuItems, setMenuItems] = useState(agendaCalendarItems());
+    const newTaskCount = getNewTaskCount(allTasks);
+    useEffect(() => {
+        setMenuItems(agendaCalendarItems());
+    }, [agendaCalendarItems]);
+    useEffect(() => {
+        if (activeComponent !== TaskView.CALENDAR_TASK) {
+            setCalendarStartDate(undefined);
+            setCalendarEndDate(undefined);
+        }
+    }, [activeComponent]);
+    // Callback function to close the task form and reset related states
+    const closeTaskFormCallback = useCallback(() => {
+        setFormMode(undefined);
+        setShowTaskForm(false);
+    }, []);
+    // Callback function to open the task form in a specific mode
+    const openTaskFormCallback = useCallback((mode, task, isContextual) => {
+        setFormMode(mode);
+        setShowTaskForm(true);
+        setIsContextualCreate(isContextual ?? false);
+        // If a task is provided, set it as the current task to be processed
+        setCurrentTask(task ?? null);
+    }, []);
+    // Updates the active tab index when the selected index changes
+    const onSelectedIndexChange = (index) => {
+        setActiveTabIndex(index);
+        setSelectedRowKeys([]);
+    };
+    const handleSelectionChange = useCallback((rows) => {
+        const selectedKeys = rows.map(row => row.id).filter(id => id !== undefined);
+        setSelectedRowKeys([...selectedKeys]);
+    }, []);
+    // Handles focus change in the data grid
+    const handleFocusedRowChange = useCallback((row) => {
+        setFocusedRowKey(row?.id ?? undefined);
+    }, []);
+    // Handles selection change in the data grid
+    const onSelectionChanged = useCallback((e) => {
+        const selectedKeys = e.component.getSelectedRowKeys() ?? [];
+        if (JSON.stringify(selectedKeys) === JSON.stringify(selectedRowKeys))
+            return;
+        setSelectedRowKeys(selectedKeys);
+    }, [selectedRowKeys]);
+    // Handles focus change in the data grid
+    const onFocusedRowChanged = useCallback((e) => {
+        setFocusedRowKey(e.row?.key);
+    }, []);
+    // Handler for double-click row event
+    const onRowDblClick = useCallback((e) => {
+        openTaskFormCallback(FormModes.Update, e.data);
+    }, [openTaskFormCallback]);
+    const onDeleteCallback = useCallback((rowIds) => {
+        let msg = "";
+        switch (rowIds.length) {
+            case 0: return;
+            case 1: {
+                const selectedTaskId = Number(rowIds[0]);
+                const selectedTask = visualizedTasks.find(task => task.id === selectedTaskId);
+                if (selectedTask)
+                    msg = SDKUI_Localizator.Delete_ConfirmFor1.replaceParams(selectedTask.name);
+                break;
+            }
+            default:
+                msg = SDKUI_Localizator.Delete_ConfirmForN.replaceParams(rowIds.length);
+                break;
+        }
+        TMMessageBoxManager.show({
+            title: SDKUI_Localizator.Delete, message: msg, buttons: [ButtonNames.YES, ButtonNames.NO],
+            onButtonClick: async (e) => {
+                if (e !== ButtonNames.YES)
+                    return;
+                setWaitPanelTitle(SDKUI_Localizator.Delete);
+                setShowWaitPanel(true);
+                setShowPrimary(true);
+                abortController = new AbortController();
+                let result = [];
+                let i = 0;
+                const deletedTaskIds = [];
+                setWaitPanelMaxValuePrimary(rowIds.length);
+                for (const key of rowIds) {
+                    i++;
+                    const deletedTaskId = Number(key);
+                    const deletedTask = visualizedTasks.find(task => task.id === deletedTaskId);
+                    setWaitPanelValuePrimary(i);
+                    if (abortController.signal.aborted) {
+                        result.push({ rowIndex: i, id1: deletedTaskId, id2: deletedTaskId, resultType: ResultTypes.WARNING, description: `Operazione interrotta. Elaborate ${i} attività` });
+                        break;
+                    }
+                    else {
+                        setWaitPanelTextPrimary(SDKUI_Localizator.TaskXofY.replaceParams(i, rowIds.length));
+                        try {
+                            const deletionNotAllowed = deletedTask?.fromID !== SDK_Globals.tmSession?.SessionDescr?.userID;
+                            if (deletionNotAllowed) {
+                                result.push({ rowIndex: key, id1: key, id2: 0, resultType: ResultTypes.ERROR, description: SDKUI_Localizator.OperationNotAllowed });
+                            }
+                            else {
+                                await SDK_Globals.tmSession?.NewTaskEngine().DeleteAsync(deletedTaskId);
+                                result.push({ rowIndex: key, id1: key, id2: 0, description: SDKUI_Localizator.DeletionCompletedSuccessfully, resultType: ResultTypes.SUCCESS });
+                                deletedTaskIds.push(deletedTaskId);
+                            }
+                        }
+                        catch (err) {
+                            result.push({ rowIndex: key, id1: key, id2: 0, resultType: ResultTypes.ERROR, description: getExceptionMessage(err) });
+                        }
+                    }
+                }
+                await deleteTaskByIdsCallback(deletedTaskIds);
+                handleSelectionChange([]);
+                setWaitPanelTextPrimary('');
+                setWaitPanelMaxValuePrimary(0);
+                setWaitPanelValuePrimary(0);
+                setShowWaitPanel(false);
+                TMResultManager.show(result, SDKUI_Localizator.Delete, "ID", undefined);
+            }
+        });
+    }, [visualizedTasks]);
+    const markAsStatus = useCallback((rowIds, status) => {
+        let msg = "";
+        switch (rowIds.length) {
+            case 0: return;
+            case 1: {
+                const selectedTaskId = Number(rowIds[0]);
+                const selectedTask = visualizedTasks.find(task => task.id === selectedTaskId);
+                if (selectedTask)
+                    msg = SDKUI_Localizator.Edit_ConfirmFor1.replaceParams(selectedTask.name);
+                break;
+            }
+            default:
+                msg = SDKUI_Localizator.Edit_ConfirmForN.replaceParams(rowIds.length);
+                break;
+        }
+        TMMessageBoxManager.show({
+            title: SDKUI_Localizator.MarkAs, message: msg, buttons: [ButtonNames.YES, ButtonNames.NO],
+            onButtonClick: async (e) => {
+                if (e !== ButtonNames.YES)
+                    return;
+                setWaitPanelTitle(SDKUI_Localizator.MarkAs);
+                setShowWaitPanel(true);
+                setShowPrimary(true);
+                abortController = new AbortController();
+                let result = [];
+                let i = 0;
+                setWaitPanelMaxValuePrimary(rowIds.length);
+                for (const key of rowIds) {
+                    i++;
+                    const selectedTask = visualizedTasks.find(task => task.id === key) || undefined;
+                    if (selectedTask === undefined)
+                        return;
+                    selectedTask.state = status;
+                    setWaitPanelValuePrimary(i);
+                    if (abortController.signal.aborted) {
+                        result.push({ rowIndex: i, id1: selectedTask.id, id2: selectedTask.id, resultType: ResultTypes.WARNING, description: `Operazione interrotta. Elaborate ${i} attività` });
+                        break;
+                    }
+                    else {
+                        setWaitPanelTextPrimary(SDKUI_Localizator.TaskXofY.replaceParams(i, rowIds.length));
+                        try {
+                            await SDK_Globals.tmSession?.NewTaskEngine().UpdateAsync(selectedTask);
+                            result.push({ rowIndex: key, id1: key, id2: 0, description: SDKUI_Localizator.UpdateCompletedSuccessfully, resultType: ResultTypes.SUCCESS });
+                        }
+                        catch (err) {
+                            result.push({ rowIndex: key, id1: key, id2: 0, resultType: ResultTypes.ERROR, description: getExceptionMessage(err) });
+                        }
+                    }
+                }
+                await getAllTasks().then(() => {
+                    handleSelectionChange([]);
+                    setWaitPanelTextPrimary('');
+                    setWaitPanelMaxValuePrimary(0);
+                    setWaitPanelValuePrimary(0);
+                    setShowWaitPanel(false);
+                    TMResultManager.show(result, SDKUI_Localizator.MarkAs, "ID", undefined);
+                    if (afterTaskSaved) {
+                        afterTaskSaved(undefined, undefined, true);
+                    }
+                });
+            }
+        });
+    }, [visualizedTasks]);
+    const onSavedCallback = async (task) => {
+        // If task is undefined or has no ID, exit early
+        if (task === undefined || task.id === undefined)
+            return;
+        // Determine the active tab based on task assignment.
+        // If assigned to another user, switch to the "Assigned By Me" tab;
+        let activeTab = activeTabIndex;
+        if (isTaskAssignedToAnotherUser(task))
+            activeTab = AssignedTab.AssignedByMe;
+        setActiveTabIndex(activeTab);
+        // Focus the task row by setting its ID as selected in the list view
+        if (task.id) {
+            setFocusedRowKey(task.id);
+            setCurrentAgendaDate(task.startTime ?? (task.endTime ?? new Date()));
+            setCurrentCalendarDate(task.startTime ?? (task.endTime ?? new Date()));
+        }
+        // Dispatch appropriate action based on form mode (Create or Edit).
+        // If in Create mode or in Duplicate mode, add the new task; otherwise, edit the existing task.
+        if (formMode === FormModes.Create || formMode === FormModes.Duplicate) {
+            await addTaskCallback(task);
+        }
+        else {
+            await editTaskCallback(task);
+        }
+        if (afterTaskSaved) {
+            await afterTaskSaved(task, formMode);
+        }
+        setShowTaskForm(false);
+    };
+    const handleNavigateToDossiersWrapper = useCallback(async (dossierId) => {
+        setShowTaskForm(false);
+        await handleNavigateToDossiers(dossierId);
+    }, []);
+    const handleNavigateToWGsWrapper = useCallback(async (workGroupId) => {
+        setShowTaskForm(false);
+        await handleNavigateToWGs(workGroupId);
+    }, []);
+    const onContextMenuPreparing = (e) => {
+        if (e === undefined)
+            return;
+        if (e.target === 'content') {
+            e.items = e.items || [];
+            e.items = createTasksMenuItems(e.row?.data, showId, setShowId, showSearch, setShowSearch, openTaskFormCallback, () => { openTaskFormCallback(FormModes.Update, e.row?.data); }, () => { openTaskFormCallback(FormModes.Duplicate, e.row?.data); }, onDeleteCallback, markAsStatus, getAllTasks, taskContext?.workingGroup?.id !== undefined, showContextualWG, setShowContextualWG, taskContext?.dossier?.id !== undefined, showContextualDossier, setShowContextualDossier, taskContext?.document?.tid !== undefined && taskContext?.document?.did !== undefined, showContextualDocument, setShowContextualDocument, false);
+        }
+    };
+    const RenderCustomHeader = ({ data }) => { return _jsx("p", { style: { color: TEXT_NOT_SELECTED_COLOR }, children: data.column.caption }); };
+    const cellDefaultRender = useCallback((cellData) => {
+        const data = cellData.data;
+        const { endTime, state, fromID, isNew } = data;
+        // Determine styles
+        const isCompleted = state === Task_States.Completed;
+        const isExpired = endTime && endTime < new Date();
+        const isNewTask = checkIfNew(fromID, isNew);
+        return _jsx("div", { style: {
+                color: isCompleted ? '#000' : (isExpired ? 'red' : '#000'),
+                textDecoration: isCompleted ? 'line-through' : 'none',
+                fontWeight: isNewTask ? 'bold' : 'normal'
+            }, children: cellData.value });
+    }, []);
+    const cellStateRender = useCallback((cellData) => {
+        const data = cellData.data;
+        const { startTime, endTime, remTime, pdG, iD1Name, state, fromID, isNew } = data;
+        // Determine styles
+        const isCompleted = state === Task_States.Completed;
+        const isExpired = endTime && endTime < new Date();
+        const isNewTask = checkIfNew(fromID, isNew);
+        const stateLabel = state || Task_States.None;
+        const stateTooltipLabel = getStatusLocalizatorValue(stateLabel);
+        const numberOfDays = calculateNumberOfDays(startTime, endTime);
+        return _jsx("div", { style: {
+                display: 'flex',
+                alignItems: 'left',
+                justifyContent: 'left',
+                gap: 2,
+                color: isCompleted ? '#000' : (isExpired ? 'red' : '#000'),
+                textDecoration: isCompleted ? 'line-through' : 'none',
+                fontWeight: isNewTask ? 'bold' : 'normal'
+            }, children: renderTaskIcons({
+                stateLabel,
+                stateTooltipLabel,
+                pdg: pdG ?? undefined,
+                ID1Name: iD1Name ?? '',
+                endTime,
+                remTime,
+                isNew: isNewTask,
+                numberOfDays
+            }) });
+    }, []);
+    const cellPriorityRender = useCallback((cellData) => {
+        const data = cellData.data;
+        const { endTime, state, fromID, isNew } = data;
+        const priorityLabel = getPriorityLocalizatorValue(cellData.value || Priorities.Low);
+        // Determine styles
+        const isCompleted = state === Task_States.Completed;
+        const isExpired = endTime && endTime < new Date();
+        const isNewTask = checkIfNew(fromID, isNew);
+        return _jsx("div", { style: {
+                color: isCompleted ? '#000' : (isExpired ? 'red' : '#000'),
+                textDecoration: isCompleted ? 'line-through' : 'none',
+                fontWeight: isNewTask ? 'bold' : 'normal'
+            }, children: priorityLabel });
+    }, []);
+    const cellDatetimeRender = useCallback((cellData) => {
+        const data = cellData.data;
+        const { endTime, state, fromID, isNew } = data;
+        const formattedDate = cellData.value ? new Date(cellData.value).toLocaleString('en-GB', { day: '2-digit', month: '2-digit', year: 'numeric', hour: '2-digit', minute: '2-digit' }) : '';
+        // Determine styles
+        const isCompleted = state === Task_States.Completed;
+        const isExpired = endTime && endTime < new Date();
+        const isNewTask = checkIfNew(fromID, isNew);
+        return _jsx("div", { style: {
+                color: isCompleted ? '#000' : (isExpired ? 'red' : '#000'),
+                textDecoration: isCompleted ? 'line-through' : 'none',
+                fontWeight: isNewTask ? 'bold' : 'normal'
+            }, children: formattedDate });
+    }, []);
+    const cellFromRender = useCallback((cellData) => {
+        const data = cellData.data;
+        const { endTime, state, fromID, isNew, fromName } = data;
+        // Determine styles
+        const isCompleted = state === Task_States.Completed;
+        const isExpired = endTime && endTime < new Date();
+        const isNewTask = checkIfNew(fromID, isNew);
+        // Initial styles setup for default layout
+        let style = {
+            width: "100%",
+            height: "100%",
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            color: isCompleted ? '#000' : (isExpired ? 'red' : '#000'),
+            textDecoration: isCompleted ? 'line-through' : 'none',
+            fontWeight: isNewTask ? 'bold' : 'normal'
+        };
+        return (_jsx("div", { style: { width: '100%', display: 'flex', alignItems: 'left', justifyContent: 'left' }, children: _jsx(TMTooltip, { content: fromName, children: _jsx("div", { style: style, children: _jsxs("div", { children: [fromName, " ", (showId && fromID) && "(" + fromID + ")", " "] }) }) }) }));
+    }, []);
+    const cellToRender = useCallback((cellData) => {
+        const data = cellData.data;
+        const { endTime, state, fromID, isNew, toName, toID } = data;
+        // Determine styles
+        const isCompleted = state === Task_States.Completed;
+        const isExpired = endTime && endTime < new Date();
+        const isNewTask = checkIfNew(fromID, isNew);
+        // Initial styles setup for default layout
+        let style = {
+            width: "100%",
+            height: "100%",
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            color: isCompleted ? '#000' : (isExpired ? 'red' : '#000'),
+            textDecoration: isCompleted ? 'line-through' : 'none',
+            fontWeight: isNewTask ? 'bold' : 'normal'
+        };
+        return (_jsx("div", { style: { width: '100%', display: 'flex', alignItems: 'left', justifyContent: 'left' }, children: _jsx(TMTooltip, { content: toName, children: _jsx("div", { style: style, children: _jsxs("div", { children: [toName, " ", (showId && toID) && "(" + toID + ")", " "] }) }) }) }));
+    }, []);
+    const getDataColumns = useCallback((fromCell = false, toCell = false) => {
+        return [
+            {
+                dataField: "id",
+                caption: "ID",
+                dataType: 'string',
+                cellRender: cellDefaultRender,
+                headerCellRender: (e) => _jsx(RenderCustomHeader, { data: e }),
+                visible: showId,
+                alignment: "left"
+            },
+            {
+                dataField: "state",
+                caption: SDKUI_Localizator.Status,
+                dataType: 'string',
+                cellRender: cellStateRender,
+                headerCellRender: (e) => _jsx(RenderCustomHeader, { data: e }),
+                headerFilter: getHeaderStatusFilterConfig(),
+                visible: true,
+                alignment: "left"
+            },
+            {
+                dataField: "name",
+                caption: SDKUI_Localizator.Name,
+                dataType: 'string',
+                cellRender: cellDefaultRender,
+                headerCellRender: (e) => _jsx(RenderCustomHeader, { data: e }),
+                visible: true,
+                alignment: "left"
+            },
+            {
+                dataField: "priority",
+                caption: SDKUI_Localizator.Priority,
+                dataType: 'string',
+                cellRender: cellPriorityRender,
+                headerCellRender: (e) => _jsx(RenderCustomHeader, { data: e }),
+                headerFilter: getHeaderPriorityFilterConfig(),
+                visible: true,
+                alignment: "left"
+            },
+            {
+                dataField: "startTime",
+                caption: SDKUI_Localizator.StartDate,
+                dataType: 'datetime',
+                cellRender: cellDatetimeRender,
+                headerCellRender: (e) => _jsx(RenderCustomHeader, { data: e }),
+                visible: true,
+                alignment: "left",
+                format: 'dd/MM/yyyy HH:mm'
+            },
+            {
+                dataField: "endTime",
+                caption: SDKUI_Localizator.Expiration,
+                dataType: 'datetime',
+                cellRender: cellDatetimeRender,
+                headerCellRender: (e) => _jsx(RenderCustomHeader, { data: e }),
+                visible: true,
+                alignment: "left",
+                format: 'dd/MM/yyyy HH:mm'
+            },
+            {
+                dataField: "remTime",
+                caption: SDKUI_Localizator.Reminder,
+                dataType: 'datetime',
+                cellRender: cellDatetimeRender,
+                headerCellRender: (e) => _jsx(RenderCustomHeader, { data: e }),
+                visible: true,
+                alignment: "left",
+                format: 'dd/MM/yyyy HH:mm'
+            },
+            {
+                dataField: "fromName",
+                caption: SDKUI_Localizator.AssignedBy,
+                dataType: 'string',
+                cellRender: cellFromRender,
+                headerCellRender: (e) => _jsx(RenderCustomHeader, { data: e }),
+                visible: fromCell,
+                alignment: "left"
+            },
+            {
+                dataField: "toName",
+                caption: SDKUI_Localizator.AssignedTo,
+                dataType: 'string',
+                cellRender: cellToRender,
+                headerCellRender: (e) => _jsx(RenderCustomHeader, { data: e }),
+                visible: toCell,
+                alignment: "left"
+            },
+        ];
+    }, [showId]);
+    const getFromOrToDatagridElement = (fromOrToDataSource, fromCell = false, toCell = false) => {
+        return _jsx(TMDataGrid, { dataSource: fromOrToDataSource, dataColumns: getDataColumns(fromCell, toCell), selection: { mode: 'multiple', showCheckBoxesMode: "always" }, focusedRowKey: focusedRowKey, selectedRowKeys: [...selectedRowKeys], onFocusedRowChanged: onFocusedRowChanged, onSelectionChanged: onSelectionChanged, onRowDblClick: onRowDblClick, onContextMenuPreparing: onContextMenuPreparing, showSearchPanel: showSearch, noDataText: SDKUI_Localizator.TasksEmpty, counterConfig: { show: true }, onHasFiltersChange: (active) => setHasFilters(active) });
+    };
+    const getFromOrToAgendaElement = (fromOrToDataSource, fromCell = false, toCell = false) => {
+        return _jsxs("div", { style: { width: '100%', height: '100%', display: 'flex', flexDirection: 'column', overflow: "auto" }, children: [_jsx(ContextMenu, { dataSource: menuItems, target: `#tasks-agenda-wrapper-${id}` }), _jsx("div", { style: { width: "100%", height: "100%" }, children: _jsx(TMTasksAgenda, { id: id, showId: showId, showSearch: showSearch, visualizedTasks: fromOrToDataSource, fromCell: fromCell, toCell: toCell, currentAgendaDate: currentAgendaDate, setCurrentAgendaDate: setCurrentAgendaDate, openTaskForm: openTaskFormCallback, handleFocusedRowChange: handleFocusedRowChange }) })] });
+    };
+    const getFromOrToCalendarElement = (fromOrToDataSource, fromCell = false, toCell = false) => {
+        return _jsxs("div", { style: { width: '100%', height: '100%', display: 'flex', flexDirection: 'column', overflow: "auto" }, children: [_jsx(ContextMenu, { dataSource: menuItems, target: `#tasks-calendar-wrapper-${id}` }), _jsx("div", { style: { width: "100%", height: "100%" }, children: _jsx(TMTasksCalendar, { id: id, visualizedTasks: fromOrToDataSource, showId: showId, fromCell: fromCell, toCell: toCell, showSearch: showSearch, currentCalendarDate: currentCalendarDate, setCurrentCalendarDate: setCurrentCalendarDate, openTaskForm: openTaskFormCallback, onDeleteCallback: onDeleteCallback, setCalendarStartDate: setCalendarStartDate, setCalendarEndDate: setCalendarEndDate, focusedRowKey: focusedRowKey, handleFocusedRowChange: handleFocusedRowChange }) })] });
+    };
+    return _jsxs("div", { style: { width: '100%', height: '100%' }, onContextMenu: (e) => e.preventDefault(), children: [_jsx(TMLayoutWaitingContainer, { direction: 'vertical', showWaitPanel: showWaitPanel, showWaitPanelPrimary: showPrimary, waitPanelTitle: waitPanelTitle, waitPanelTextPrimary: waitPanelTextPrimary, waitPanelValuePrimary: waitPanelValuePrimary, waitPanelMaxValuePrimary: waitPanelMaxValuePrimary, isCancelable: true, abortController: abortController, children: _jsxs(TabPanel, { width: "100%", height: "100%", animationEnabled: false, swipeEnabled: false, loop: false, showNavButtons: true, repaintChangesOnly: true, stylingMode: "primary", iconPosition: 'start', tabsPosition: 'top', selectedIndex: activeTabIndex, onSelectedIndexChange: onSelectedIndexChange, id: "task-centered-tab-title", children: [_jsx(Item, { title: SDKUI_Localizator.AssignedToMe, icon: "user", tabRender: (params) => {
+                                return _jsxs(StyledTabItem, { "$isSelected": activeTabIndex === AssignedTab.AssignedToMe, children: [_jsxs(TMTooltip, { content: SDKUI_Localizator.AssignedToMe, children: [_jsx("i", { className: `dx-icon-${params.icon}` }), "\u00A0", params.title, " ", (assignedToMeCount > 0) ? `(${assignedToMeCount})` : ''] }), newTaskCount > 0 && (_jsx(TMTooltip, { content: SDKUI_Localizator.NewAssignedActivitiesNumber + ": " + newTaskCount, children: _jsx(TMCountBadge, { children: newTaskCount }) }))] });
+                            }, render: () => activeTabIndex === AssignedTab.AssignedToMe ?
+                                _jsxs(_Fragment, { children: [activeComponent === TaskView.LIST_TASK && getFromOrToDatagridElement(visualizedTasks, true, false), activeComponent === TaskView.AGENDA_TASK && getFromOrToAgendaElement(visualizedTasks, true, false), activeComponent === TaskView.CALENDAR_TASK && getFromOrToCalendarElement(visualizedTasks, true, false)] }) : '' }), _jsx(Item, { title: SDKUI_Localizator.AssignedByMe, icon: "login", tabRender: (params) => {
+                                return _jsx(StyledTabItem, { "$isSelected": activeTabIndex === AssignedTab.AssignedByMe, children: _jsxs(TMTooltip, { content: SDKUI_Localizator.AssignedByMe, children: [_jsx("i", { className: `dx-icon-${params.icon}` }), "\u00A0", params.title, " ", (assignedByMeCount > 0) ? `(${assignedByMeCount})` : ''] }) });
+                            }, render: () => activeTabIndex === AssignedTab.AssignedByMe ?
+                                _jsxs(_Fragment, { children: [activeComponent === TaskView.CALENDAR_TASK && getFromOrToCalendarElement(visualizedTasks, false, true), activeComponent === TaskView.AGENDA_TASK && getFromOrToAgendaElement(visualizedTasks, false, true), activeComponent === TaskView.LIST_TASK && getFromOrToDatagridElement(visualizedTasks, false, true)] }) : '' }), _jsx(Item, { title: SDKUI_Localizator.AllFemale, icon: "fields", tabRender: (params) => {
+                                return _jsxs(StyledTabItem, { "$isSelected": activeTabIndex === AssignedTab.All, children: [_jsxs(TMTooltip, { content: SDKUI_Localizator.AllFemale, children: [_jsx("i", { className: `dx-icon-${params.icon}` }), "\u00A0", params.title, " ", (allTasksFilteredCount > 0) ? `(${allTasksFilteredCount})` : ''] }), newTaskCount > 0 && (_jsx(TMTooltip, { content: SDKUI_Localizator.NewAssignedActivitiesNumber + ": " + newTaskCount, children: _jsx(TMCountBadge, { children: newTaskCount }) }))] });
+                            }, render: () => activeTabIndex === AssignedTab.All ?
+                                _jsxs(_Fragment, { children: [activeComponent === TaskView.CALENDAR_TASK && getFromOrToCalendarElement(visualizedTasks, true, true), activeComponent === TaskView.AGENDA_TASK && getFromOrToAgendaElement(visualizedTasks, true, true), activeComponent === TaskView.LIST_TASK && getFromOrToDatagridElement(visualizedTasks, true, true)] }) : '' })] }) }), showTaskForm && _jsx(TMTaskForm, { id: currentTask?.id ?? -1, width: calcResponsiveSizes(deviceType, '700px', '700px', '95%'), height: calcResponsiveSizes(deviceType, '700px', '700px', '95%'), title: isContextualCreate ? SDKUI_Localizator.ContextualTask : SDKUI_Localizator.Widget_Activities, isModal: true, formMode: formMode ?? FormModes.Create, visualizedTasks: visualizedTasks, currentTask: currentTask, setCurrentTask: setCurrentTask, isContextualCreate: isContextualCreate, selectedRowKeys: selectedRowKeys, handleFocusedRowKeyChange: handleFocusedRowChange, taskContext: taskContext, usersList: usersList, onStatusChanged: () => { }, onClose: closeTaskFormCallback, onCancel: closeTaskFormCallback, showBackButton: false, onSaved: onSavedCallback, startDate: calendarStartDate, endDate: calendarEndDate, onOpenS4TViewerRequest: onOpenS4TViewerRequest, s4TViewerDialogComponent: s4TViewerDialogComponent, allTasks: allTasks, getAllTasks: getAllTasks, deleteTaskByIdsCallback: deleteTaskByIdsCallback, addTaskCallback: addTaskCallback, editTaskCallback: editTaskCallback, handleNavigateToWGs: handleNavigateToWGsWrapper, handleNavigateToDossiers: handleNavigateToDossiersWrapper }), _jsx("button", { style: {
+                    position: 'absolute',
+                    bottom: hasFilters ? '90px' : '18px',
+                    right: '20px',
+                    width: '40px',
+                    height: '40px',
+                    borderRadius: "50%",
+                    backgroundColor: "#C2388B",
+                    color: '#fff',
+                    border: 'none',
+                    cursor: 'pointer',
+                    boxShadow: '0 2px 6px rgba(0,0,0,0.2)',
+                    zIndex: 1000,
+                    transition: 'background-color 0.3s ease, transform 0.2s ease',
+                    display: 'flex',
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                }, onMouseEnter: (e) => {
+                    e.currentTarget.style.backgroundColor = '#D94A9F';
+                    e.currentTarget.style.transform = 'scale(1.1)';
+                    e.currentTarget.style.boxShadow = '0 4px 12px rgba(37, 89, 165, 0.6)';
+                }, onMouseLeave: (e) => {
+                    e.currentTarget.style.backgroundColor = "#C2388B";
+                    e.currentTarget.style.transform = 'scale(1)';
+                    e.currentTarget.style.boxShadow = '0 2px 6px rgba(0,0,0,0.2)';
+                }, onClick: () => openTaskFormCallback(FormModes.Create, undefined, taskContext !== undefined), children: _jsx(TMTooltip, { content: SDKUI_Localizator.Create, children: _jsx("i", { className: "dx-icon-add", style: { fontSize: '25px' } }) }) })] });
+};
+export default TMTasksView;

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

@@ -0,0 +1,39 @@
+import { DcmtTypeDescriptor, WorkingGroupDescriptor } from "@topconsultnpm/sdk-ts";
+import { FileItem } from '../../base/TMFileManagerUtils';
+/** Context descriptor for copy/move operations using different engines */
+export type TMWgsCopyMoveContextDescriptor = {
+    engine: 'WorkingGroupEngine';
+    object?: WorkingGroupDescriptor;
+    selectedDrafts: Array<FileItem>;
+} | {
+    engine: 'SearchEngine';
+    object?: DcmtTypeDescriptor;
+    selectedDrafts: Array<any>;
+};
+export declare const getDocumentDisplayInfo: (descriptor: DcmtTypeDescriptor, item: any) => {
+    name: string;
+    description: string;
+};
+interface TMWGsCopyMoveFormProps {
+    context: TMWgsCopyMoveContextDescriptor;
+    mode: 'copy' | 'move' | 'copyToWgDraft' | 'copyToWgArchivedDoc';
+    onClose: () => void;
+    workingGroups?: Array<WorkingGroupDescriptor>;
+    folder?: FileItem;
+    focusedWorkingGroupId?: number;
+    fetchTreeFileSystemForWorkingGroup?: (workingGroupId: number | undefined) => Promise<void>;
+    fetchArchivedDocumentsForWorkingGroup?: (workingGroupId: number | undefined) => Promise<void>;
+}
+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;