@topconsultnpm/sdkui-react 6.19.0-dev1.9 → 6.19.0-dev2.2

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

@@ -0,0 +1,107 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import React, { useCallback, useEffect, useState } from "react";
+import ArrayStore from "devextreme/data/array_store";
+import Scheduler from "devextreme-react/cjs/scheduler";
+import { calculateNumberOfDays, highlightTaskText, priorityLegend, renderTaskIcons } from "./TMTasksUtilsView";
+import { Priorities, Task_States } from "@topconsultnpm/sdk-ts";
+import { checkIfNew, convertToSchedulerAppointments, findTasksBySearch, formatDate, getPriorityColor, getStatusLocalizatorValue } from "./TMTasksUtils";
+import ScrollView from "devextreme-react/cjs/scroll-view";
+import LoadIndicator from "devextreme-react/cjs/load-indicator";
+import { FormModes } from "../../../ts";
+import { SDKUI_Localizator } from "../../../helper";
+import TMCustomSearchBar from "../../../helper/TMCustomSearchBar";
+import TMTooltip from "../../base/TMTooltip";
+const TMTasksAgenda = React.memo((props) => {
+    const views = ['agenda'];
+    const { id, showId, showSearch, visualizedTasks, fromCell, toCell, currentAgendaDate, setCurrentAgendaDate, openTaskForm, handleFocusedRowChange } = props;
+    const [schedulerData, setSchedulerData] = useState([]);
+    const [loading, setLoading] = useState(false);
+    const [searchText, setSearchText] = useState('');
+    useEffect(() => {
+        setSchedulerData(convertToSchedulerAppointments(visualizedTasks));
+    }, [visualizedTasks]);
+    useEffect(() => {
+        let timeoutId;
+        if (searchText.length > 0) {
+            setLoading(true);
+            timeoutId = setTimeout(() => {
+                const filteredTasks = findTasksBySearch(visualizedTasks, searchText);
+                setSchedulerData(convertToSchedulerAppointments(filteredTasks));
+                setLoading(false);
+            }, 300);
+        }
+        else {
+            setSchedulerData(convertToSchedulerAppointments(visualizedTasks));
+            setLoading(false);
+        }
+        return () => {
+            clearTimeout(timeoutId);
+        };
+    }, [searchText]);
+    const appointmentRender = useCallback((params) => {
+        const currentTask = visualizedTasks.find(task => task.id !== undefined && task.id === params.appointmentData.id);
+        if (currentTask === undefined || currentTask.id === undefined)
+            return;
+        const startTime = currentTask.startTime;
+        const endTime = currentTask.endTime;
+        const remTime = currentTask.remTime;
+        const stateLabel = currentTask.state ?? Task_States.None;
+        const stateTooltipLabel = getStatusLocalizatorValue(stateLabel);
+        const pdg = currentTask.pdG ?? undefined;
+        const ID1Name = currentTask.iD1Name ?? '';
+        const isNew = checkIfNew(currentTask.fromID, currentTask.isNew);
+        const numberOfDays = calculateNumberOfDays(startTime, endTime);
+        const priority = currentTask.priority ?? Priorities.None;
+        let bgColor = 'transparent';
+        if (priority)
+            bgColor = getPriorityColor(priority);
+        return _jsx("div", { style: { width: "100%", height: "100%", display: 'flex', flexDirection: 'column', justifyContent: 'flex-start', alignItems: 'flex-end', backgroundColor: bgColor }, children: _jsx(ScrollView, { width: "100%", height: "100%", direction: "both", useNative: true, children: _jsxs("div", { style: { display: 'flex', justifyContent: 'space-between', width: '100%', fontWeight: isNew ? 'bold' : 'normal' }, children: [_jsxs("div", { style: { display: 'flex', flexDirection: 'column', alignItems: 'flex-start' }, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center' }, children: [showId && _jsxs("span", { children: [highlightTaskText(currentTask.id.toString(), searchText, currentTask.id), " - "] }), renderTaskIcons({ stateLabel, stateTooltipLabel, pdg, ID1Name, endTime, remTime, isNew, numberOfDays }), "\u00A0", _jsx("span", { style: { fontWeight: "bold" }, children: highlightTaskText(currentTask.name ?? '', searchText, currentTask.id) })] }), _jsxs("div", { children: [startTime !== undefined && (_jsxs("span", { children: [SDKUI_Localizator.StartDate, ": ", formatDate(startTime), " - \u00A0"] })), endTime !== undefined && (_jsxs("span", { children: [SDKUI_Localizator.Expiration, ": ", formatDate(endTime)] }))] })] }), fromCell && _jsxs("div", { style: { display: 'flex', alignItems: 'center', alignSelf: 'flex-end' }, children: [_jsxs("span", { children: [SDKUI_Localizator.AssignedBy, ":"] }), "\u00A0", _jsxs("div", { children: [highlightTaskText(currentTask.fromName ?? '', searchText, currentTask.id), (showId && currentTask.fromID) && _jsxs("span", { children: ["(", currentTask.fromID, ")"] })] })] }), toCell && _jsxs("div", { style: { display: 'flex', alignItems: 'center', alignSelf: 'flex-end' }, children: [_jsxs("span", { children: [SDKUI_Localizator.AssignedTo, ":"] }), "\u00A0", _jsxs("div", { children: [highlightTaskText(currentTask.toName ?? '', searchText, currentTask.id), (showId && currentTask.toID) && _jsxs("span", { children: ["(", currentTask.toID, ")"] })] })] })] }) }) });
+    }, [visualizedTasks, searchText]);
+    // handle appointment click handler
+    const handleAppointmentClick = useCallback((e) => {
+        if (e === undefined || e.event === undefined || e.appointmentData.id === undefined)
+            return;
+        e.event.preventDefault();
+        e.cancel = true;
+        const { id } = e.appointmentData;
+        // Update the state with the new set of selected appointments
+        const task = visualizedTasks.find(task => task.id === id);
+        if (task) {
+            handleFocusedRowChange(task);
+        }
+    }, [visualizedTasks]);
+    const onAppointmentContextMenu = useCallback((e) => {
+        if (e === undefined || e.event === undefined || e.appointmentData.id === undefined)
+            return;
+        e.event.preventDefault();
+        const { id } = e.appointmentData;
+        // Update the state with the new set of selected appointments
+        const task = visualizedTasks.find(task => task.id === id);
+        if (task) {
+            handleFocusedRowChange(task);
+        }
+    }, []);
+    const onCurrentDateChange = useCallback((value) => {
+        // Exit early if it's not a valid Date
+        if (!(value instanceof Date) || isNaN(value.getTime())) {
+            return;
+        }
+        setCurrentAgendaDate(value);
+        setSearchText('');
+    }, []);
+    // Double-click appointment handler
+    const handleAppointmentDblClick = useCallback((e) => {
+        if (e === undefined || e.event === undefined || e.appointmentData.id === undefined)
+            return;
+        e.event.preventDefault();
+        e.cancel = true;
+        const task = visualizedTasks.find(task => task.id === e.appointmentData.id);
+        if (task) {
+            handleFocusedRowChange(task);
+            openTaskForm(FormModes.Update, task);
+        }
+    }, [visualizedTasks]);
+    return _jsxs("div", { style: { height: "100%", width: "100%" }, children: [_jsxs("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', width: '100%', height: "48px" }, children: [_jsx("div", { style: { width: showSearch ? "160px" : "0", marginLeft: '10px' }, children: showSearch && (_jsx(TMCustomSearchBar, { initialValue: searchText, onSearchChange: (value) => setSearchText(value) })) }), _jsx("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: "default" }, children: _jsxs(TMTooltip, { content: priorityLegend(), children: [" ", SDKUI_Localizator.PriorityLegend] }) })] }), _jsx("div", { style: { height: "calc(100% - 48px)", width: "100%" }, children: loading ? _jsx("div", { style: { display: "flex", justifyContent: "center", alignItems: "center", height: "100%", width: "100%" }, children: _jsx(LoadIndicator, {}) })
+                    : _jsx("div", { id: `tasks-agenda-wrapper-${id}`, style: { width: "100%", height: "100%" }, onContextMenu: () => { handleFocusedRowChange(undefined); }, onClick: () => { handleFocusedRowChange(undefined); }, children: _jsx(Scheduler, { id: "tasks-agenda", defaultCurrentView: "agenda", dataSource: new ArrayStore({ key: `tasks-agenda-data`, data: schedulerData }), width: "100%", height: "100%", editing: false, views: views, currentDate: currentAgendaDate, appointmentRender: appointmentRender, onAppointmentDblClick: handleAppointmentDblClick, onCurrentDateChange: onCurrentDateChange, onAppointmentContextMenu: onAppointmentContextMenu, onAppointmentClick: handleAppointmentClick }) }) })] });
+});
+export default TMTasksAgenda;

package/lib/components/features/tasks/TMTasksCalendar.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import { TaskDescriptor } from "@topconsultnpm/sdk-ts";
+import { FormModes } from '../../../ts';
+interface TMTasksCalendarProps {
+    id: string;
+    visualizedTasks: Array<TaskDescriptor>;
+    showId: boolean;
+    showSearch: boolean;
+    fromCell: boolean;
+    toCell: boolean;
+    openTaskForm: (formMode: FormModes, task?: TaskDescriptor) => void;
+    onDeleteCallback: (rowIds: Array<number>) => void;
+    currentCalendarDate: Date;
+    setCurrentCalendarDate: React.Dispatch<React.SetStateAction<Date>>;
+    setCalendarStartDate: React.Dispatch<React.SetStateAction<Date | undefined>>;
+    setCalendarEndDate: React.Dispatch<React.SetStateAction<Date | undefined>>;
+    focusedRowKey: number | undefined;
+    handleFocusedRowChange: (row: TaskDescriptor | undefined) => void;
+}
+declare const TMTasksCalendar: (props: TMTasksCalendarProps) => import("react/jsx-runtime").JSX.Element;
+export default TMTasksCalendar;

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

@@ -0,0 +1,240 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import ArrayStore from 'devextreme/data/array_store';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { Priorities, Task_States } from "@topconsultnpm/sdk-ts";
+import Scheduler, { Resource } from 'devextreme-react/scheduler';
+import { calculateNumberOfDays, highlightTaskText, priorityLegend, renderTaskIcons, taskStateIconMap, TMActionCalendar } from './TMTasksUtilsView';
+import { checkIfNew, convertToSchedulerAppointments, findTasksBySearch, formatDate, getPriorityColor, getPriorityLocalizatorValue, getStatusLocalizatorValue, prioritiesResourceData } from './TMTasksUtils';
+import LoadIndicator from 'devextreme-react/cjs/load-indicator';
+import { FormModes } from '../../../ts';
+import { SDKUI_Localizator } from '../../../helper';
+import TMTooltip from '../../base/TMTooltip';
+import TMCustomSearchBar from '../../../helper/TMCustomSearchBar';
+const views = ['month'];
+let clickTimeout = null; // Timeout reference
+let clickCount = 0; // Click counter
+let lastClickedCell = null;
+const TMTasksCalendar = (props) => {
+    const { id, visualizedTasks, showId, showSearch, fromCell, toCell, openTaskForm, onDeleteCallback, currentCalendarDate, setCurrentCalendarDate, focusedRowKey, handleFocusedRowChange, setCalendarStartDate, setCalendarEndDate } = props;
+    const [isMobile, setIsMobile] = useState(false);
+    const mobileBreakpoint = 768;
+    const [schedulerData, setSchedulerData] = useState([]);
+    const [isRange, setIsRange] = useState(false);
+    const [loading, setLoading] = useState(false);
+    const [searchText, setSearchText] = useState('');
+    const containerRef = useRef(null);
+    const schedulerRef = useRef(null);
+    useEffect(() => {
+        const updateDimensions = (entries) => {
+            for (let entry of entries) {
+                const { width } = entry.contentRect;
+                setIsMobile(width <= mobileBreakpoint);
+            }
+            if (schedulerRef.current && schedulerRef.current.instance) {
+                schedulerRef.current.instance().repaint();
+            }
+        };
+        const resizeObserver = new ResizeObserver(updateDimensions);
+        if (containerRef.current) {
+            resizeObserver.observe(containerRef.current);
+        }
+        return () => {
+            if (containerRef.current) {
+                resizeObserver.unobserve(containerRef.current);
+            }
+        };
+    }, [containerRef]);
+    useEffect(() => {
+        setSchedulerData(convertToSchedulerAppointments(visualizedTasks));
+    }, [visualizedTasks]);
+    useEffect(() => {
+        let timeoutId;
+        if (searchText.length > 0) {
+            setLoading(true);
+            timeoutId = setTimeout(() => {
+                const filteredTasks = findTasksBySearch(visualizedTasks, searchText);
+                setSchedulerData(convertToSchedulerAppointments(filteredTasks));
+                setLoading(false);
+            }, 300);
+        }
+        else {
+            setSchedulerData(convertToSchedulerAppointments(visualizedTasks));
+            setLoading(false);
+        }
+        return () => {
+            clearTimeout(timeoutId);
+        };
+    }, [searchText]);
+    // Runs the handleContentReady function whenever the currentCalendarDate changes, ensuring the scheduler scrolls to the correct date
+    useEffect(() => {
+        handleContentReady();
+    }, [currentCalendarDate]);
+    // Scrolls the scheduler to the current date or the start of the view based on the current calendar date
+    const handleContentReady = () => {
+        if (schedulerRef.current === null)
+            return;
+        const schedulerInstance = schedulerRef.current.instance();
+        const startOfView = schedulerInstance.getStartViewDate();
+        const endOfView = schedulerInstance.getEndViewDate();
+        if (currentCalendarDate >= startOfView && currentCalendarDate <= endOfView) {
+            schedulerInstance.scrollTo(currentCalendarDate);
+        }
+        else {
+            schedulerInstance.scrollTo(startOfView);
+        }
+    };
+    const handleAppointmentClick = (e) => {
+        // Capture the appointment ID
+        const appointmentId = e.appointmentData.id;
+        const task = visualizedTasks.find(task => task.id === appointmentId);
+        if (task)
+            handleFocusedRowChange(task);
+    };
+    // Double-click appointment handler
+    const handleAppointmentDblClick = (e) => {
+        if (e === undefined || e.event === undefined || e.appointmentData.id === undefined)
+            return;
+        e.event.preventDefault();
+        e.cancel = true;
+        const task = visualizedTasks.find(task => task.id === e.appointmentData.id);
+        if (task) {
+            handleFocusedRowChange(task);
+            openTaskForm(FormModes.Update, task);
+        }
+    };
+    const onAppointmentContextMenu = (e) => {
+        if (e === undefined || e.event === undefined || e.appointmentData.id === undefined)
+            return;
+        e.event.preventDefault();
+        const { id } = e.appointmentData;
+        // Update the state with the new set of selected appointments
+        const task = visualizedTasks.find(task => task.id === id);
+        if (task)
+            handleFocusedRowChange(task);
+        setCalendarStartDate(undefined);
+        setCalendarEndDate(undefined);
+    };
+    const onCellContextMenu = (e) => {
+        if (e === undefined || e.event === undefined)
+            return;
+        e.event.preventDefault();
+        handleFocusedRowChange(undefined);
+        if (!isRange) {
+            setCalendarStartDate(e.cellData.startDate);
+            const endDateWithTime = new Date(e.cellData.endDate);
+            endDateWithTime.setDate(endDateWithTime.getDate() - 1);
+            endDateWithTime.setHours(23, 59, 0, 0);
+            setCalendarEndDate(endDateWithTime);
+        }
+    };
+    const appointmentTooltipComponent = (params) => {
+        if (params === undefined || params.data === undefined || params.data.appointmentData === undefined)
+            return;
+        const { appointmentData } = params.data;
+        const currentTask = visualizedTasks.find(task => task.id !== undefined && task.id === appointmentData.id);
+        if (currentTask === undefined || currentTask.id === undefined)
+            return;
+        const priority = getPriorityLocalizatorValue(currentTask.priority ?? Priorities.None);
+        const startTime = currentTask.startTime;
+        const endTime = currentTask.endTime;
+        const remTime = currentTask.remTime;
+        const stateLabel = currentTask.state ?? Task_States.None;
+        const stateTooltipLabel = getStatusLocalizatorValue(stateLabel);
+        const pdg = currentTask.pdG || undefined;
+        const ID1Name = currentTask.iD1Name || '';
+        const isNew = checkIfNew(currentTask.fromID, currentTask.isNew);
+        const numberOfDays = calculateNumberOfDays(startTime, endTime);
+        return _jsxs("div", { className: "dx-tooltip-appointment-item", onClick: (e) => { e.preventDefault(); e.stopPropagation(); }, style: { backgroundColor: getPriorityColor(currentTask.priority ?? Priorities.None) }, children: [_jsxs("div", { className: "dx-tooltip-appointment-item-content", style: { width: '70%', cursor: 'auto' }, children: [_jsx("div", { style: { display: "flex" }, children: renderTaskIcons({ stateLabel, stateTooltipLabel, pdg, ID1Name, endTime, remTime, isNew, numberOfDays }) }), _jsxs("div", { className: "dx-tooltip-appointment-item-content-subject", children: [" ", showId && _jsxs("span", { children: [highlightTaskText(appointmentData.id.toString(), searchText, appointmentData.id), " - "] }), " ", highlightTaskText(appointmentData.text ?? '', searchText, currentTask.id)] }), _jsx("div", { className: "dx-tooltip-appointment-item-content-date", children: startTime !== undefined && (_jsxs("span", { children: [SDKUI_Localizator.StartDate, ": ", formatDate(startTime)] })) }), _jsx("div", { className: "dx-tooltip-appointment-item-content-date", children: endTime !== undefined && (_jsxs("span", { children: [SDKUI_Localizator.Expiration, ": ", formatDate(endTime)] })) }), _jsxs("div", { className: "dx-tooltip-appointment-item-content-subject", children: [SDKUI_Localizator.Priority, ": ", highlightTaskText(priority, searchText, currentTask.id)] }), _jsxs("div", { className: "dx-tooltip-appointment-item-content-subject", children: [fromCell && _jsxs("div", { style: { display: 'flex', alignItems: 'center', alignSelf: 'flex-end' }, children: [_jsxs("span", { children: [SDKUI_Localizator.AssignedBy, ":"] }), "\u00A0", _jsxs("div", { children: [highlightTaskText(currentTask.fromName ?? '', searchText, currentTask.id), (showId && currentTask.fromID) && _jsxs("span", { children: ["(", currentTask.fromID, ")"] })] })] }), toCell && _jsxs("div", { style: { display: 'flex', alignItems: 'center', alignSelf: 'flex-end' }, children: [_jsxs("span", { children: [SDKUI_Localizator.AssignedTo, ":"] }), "\u00A0", _jsxs("div", { children: [highlightTaskText(currentTask.toName ?? '', searchText, currentTask.id), (showId && currentTask.toID) && _jsxs("span", { children: ["(", currentTask.toID, ")"] })] })] })] })] }), _jsx(TMActionCalendar, { currentTask: currentTask, openTaskForm: openTaskForm, onDeleteCallback: onDeleteCallback })] });
+    };
+    const onCurrentCalendarDateChange = (value) => {
+        // Exit early if it's not a valid Date
+        if (!(value instanceof Date) || isNaN(value.getTime())) {
+            return;
+        }
+        setCurrentCalendarDate(value);
+        setSearchText('');
+    };
+    // Custom appointment component to render each appointment
+    const appointmentComponent = (params) => {
+        if (!params || !params.data)
+            return null;
+        const { appointmentData } = params.data;
+        // Define inline styles for the selected appointment
+        const isSelected = focusedRowKey === appointmentData.id;
+        let stateLabel = undefined;
+        let stateTooltipLabel = undefined;
+        const currentTask = visualizedTasks.find(task => task.id !== undefined && task.id === appointmentData.id);
+        stateLabel = currentTask?.state ?? Task_States.None;
+        stateTooltipLabel = getStatusLocalizatorValue(stateLabel);
+        const inlineStyles = isSelected ? { backgroundColor: '#2559A5', boxShadow: '0 4px 8px rgba(0, 0, 0, 0.1)', fontWeight: 'bold', color: 'white', cursor: 'pointer', transition: 'all 0.3s ease-in-out', } : {};
+        const centerStyles = { display: 'flex', justifyContent: 'center', alignItems: 'center', textAlign: 'center', height: '100%' };
+        return (_jsxs("div", { id: "appointment-" + appointmentData.id.toString(), style: { ...inlineStyles, ...centerStyles }, children: [(stateLabel && stateTooltipLabel) && _jsxs(TMTooltip, { content: stateTooltipLabel, children: [" ", _jsxs("div", { children: [taskStateIconMap(15).get(stateLabel), "\u00A0"] })] }), showId && _jsxs("span", { children: [highlightTaskText(appointmentData.id.toString(), searchText, appointmentData.id), "\u00A0-\u00A0"] }), appointmentData.text] }));
+    };
+    const handleCellClick = (e) => {
+        handleFocusedRowChange(undefined);
+        clickCount += 1;
+        if (clickTimeout)
+            clearTimeout(clickTimeout);
+        clickTimeout = setTimeout(() => {
+            if (clickCount === 1) {
+                // Single click logic
+                setCalendarStartDate(e.cellData.startDate);
+                const endDateWithTime = new Date(e.cellData.endDate);
+                endDateWithTime.setDate(endDateWithTime.getDate() - 1);
+                endDateWithTime.setHours(23, 59, 59, 0);
+                setCalendarEndDate(endDateWithTime);
+            }
+            else if (clickCount === 2) {
+                // Double click logic (only on the same cell)
+                if (lastClickedCell && lastClickedCell.startDate === e.cellData.startDate && lastClickedCell.endDate === e.cellData.endDate) {
+                    // Double click on the same cell
+                    setCalendarStartDate(e.cellData.startDate);
+                    const endDateWithTime = new Date(e.cellData.endDate);
+                    endDateWithTime.setDate(endDateWithTime.getDate() - 1);
+                    endDateWithTime.setHours(23, 59, 59, 0);
+                    setCalendarEndDate(endDateWithTime);
+                    openTaskForm(FormModes.Create, undefined); // Open the task form
+                }
+            }
+            // Reset click count
+            clickCount = 0;
+        }, 200); // Delay for double-click detection
+        // Save the current cell as the last clicked cell
+        lastClickedCell = { startDate: e.cellData.startDate, endDate: e.cellData.endDate };
+    };
+    const handleAppointmentFormOpening = (e) => {
+        // Cancel the default form opening
+        e.cancel = true;
+        // If no appointment data, return
+        if (!e.appointmentData)
+            return;
+        // Show the tooltip manually
+        e.component.showAppointmentTooltip(e.appointmentData, "#appointment-" + e.appointmentData.id.toString());
+    };
+    const onOptionChanged = ({ name, value }) => {
+        if (typeof name === 'string' && Array.isArray(value)) {
+            if (name === "selectedCellData") {
+                const startDate = value[0]?.startDate;
+                const endDate = value[value.length - 1]?.endDate;
+                if (startDate && endDate) {
+                    setCalendarStartDate(startDate);
+                    // Set the endDate to 23:59:59 and subtract one day
+                    const endDateWithTime = new Date(endDate);
+                    endDateWithTime.setDate(endDateWithTime.getDate() - 1);
+                    endDateWithTime.setHours(23, 59, 59, 0);
+                    setCalendarEndDate(endDateWithTime);
+                    setIsRange(true);
+                }
+            }
+        }
+    };
+    const onWrapperContextMenu = useCallback(() => {
+        handleFocusedRowChange(undefined);
+    }, []);
+    const onWrapperClick = useCallback(() => {
+        handleFocusedRowChange(undefined);
+    }, []);
+    return (_jsxs("div", { style: { width: "100%", height: "100%" }, children: [_jsxs("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', width: '100%', height: "48px", padding: 5 }, children: [_jsx("div", { style: { width: showSearch ? "160px" : "0", marginLeft: '10px' }, children: showSearch && (_jsx(TMCustomSearchBar, { initialValue: searchText, onSearchChange: (value) => setSearchText(value) })) }), _jsx("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: "default" }, children: _jsx(TMTooltip, { content: priorityLegend(), children: SDKUI_Localizator.PriorityLegend }) })] }), _jsx("div", { style: { height: "calc(100% - 48px)", width: "100%" }, children: loading ? _jsx("div", { style: { display: "flex", justifyContent: "center", alignItems: "center", height: "100%", width: "100%" }, children: _jsx(LoadIndicator, {}) })
+                    : _jsx("div", { id: `tasks-calendar-wrapper-${id}`, style: { width: "100%", height: "100%" }, onContextMenu: onWrapperContextMenu, onClick: onWrapperClick, children: _jsx(Scheduler, { ref: schedulerRef, id: "tasks-calendar", dataSource: new ArrayStore({ key: 'tasks-calendar-data', data: schedulerData }), views: views, defaultCurrentView: "month", adaptivityEnabled: isMobile, editing: false, width: "100%", height: "100%", currentDate: currentCalendarDate, appointmentComponent: appointmentComponent, onAppointmentFormOpening: handleAppointmentFormOpening, appointmentTooltipComponent: appointmentTooltipComponent, onAppointmentDblClick: handleAppointmentDblClick, onCurrentDateChange: onCurrentCalendarDateChange, onAppointmentContextMenu: onAppointmentContextMenu, onCellContextMenu: onCellContextMenu, onCellClick: handleCellClick, onAppointmentClick: handleAppointmentClick, onContentReady: handleContentReady, onOptionChanged: onOptionChanged, children: _jsx(Resource, { dataSource: prioritiesResourceData, fieldExpr: "priority", label: "Priority" }) }) }) })] }));
+};
+export default TMTasksCalendar;

package/lib/components/features/tasks/TMTasksHeader.d.ts

@@ -0,0 +1,14 @@
+import { TaskDescriptor } from '@topconsultnpm/sdk-ts';
+import { TaskViewType } from './TMTasksUtils';
+import React from 'react';
+interface TMTasksHeaderProps {
+    activeComponent: TaskViewType;
+    updateActiveComponent: (newComponent: TaskViewType) => void;
+    allTasks: Array<TaskDescriptor>;
+    appliedGlobalFilters: Array<number>;
+    setAppliedGlobalFilters: React.Dispatch<React.SetStateAction<Array<number>>>;
+    color?: string;
+    height?: string;
+}
+declare const TMTasksHeader: (props: TMTasksHeaderProps) => import("react/jsx-runtime").JSX.Element;
+export default TMTasksHeader;

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

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from 'styled-components';
+import { treeFilterDataSource } from './TMTasksUtilsView';
+import { FilterCategoryId, TaskView } from './TMTasksUtils';
+import { useEffect, useRef, useState } from 'react';
+import ScrollView from 'devextreme-react/cjs/scroll-view';
+import TMTooltip from '../../base/TMTooltip';
+import { SDKUI_Localizator } from '../../../helper';
+import TMDropDown from '../../editors/TMDropDown';
+import TMTreeDropDown from '../../editors/TMTreeDropDown';
+const StyledListHeader = styled.div ` border-bottom: 1px solid #e6e6e6; width: 100%; height: ${props => props.$height}; min-height: 55px; display: flex; flex-direction: row; align-items: center; justify-content: space-between; padding: 10px 20px; `;
+const StyledViewChangerContainer = styled.div ` width: 100%; height: 100%; display: flex; flex-direction: row; gap: 8px; align-items: left; `;
+const TMTasksHeader = (props) => {
+    const { activeComponent, color, height, appliedGlobalFilters, setAppliedGlobalFilters, updateActiveComponent, allTasks } = props;
+    const containerRef = useRef(null);
+    const [treeDataSource, setTreeDataSource] = useState([]);
+    useEffect(() => {
+        setTreeDataSource(treeFilterDataSource(allTasks));
+    }, [allTasks]);
+    // Function to disable right-click
+    const handleContextMenu = (e) => {
+        e.preventDefault();
+    };
+    const onSelectListOrCalendarCallback = (e) => {
+        const { value } = e.target;
+        updateActiveComponent(value);
+    };
+    const isValidKey = (key) => {
+        return key !== FilterCategoryId.AllStates && key !== FilterCategoryId.AllPriorities;
+    };
+    return (_jsx(StyledListHeader, { ref: containerRef, "$color": color ?? 'black', "$height": height ?? '100%', onContextMenu: handleContextMenu, children: _jsx(ScrollView, { width: "100%", height: "100%", direction: "horizontal", useNative: true, children: _jsxs(StyledViewChangerContainer, { children: [_jsx(TMTooltip, { content: SDKUI_Localizator.SelectViewMode, showEvent: "mouseenter", hideEvent: "mouseleave", position: "top", children: _jsx(TMDropDown, { elementStyle: { minWidth: "120px", width: "120px", height: "29px" }, dataSource: [
+                                { value: TaskView.AGENDA_TASK, display: "Agenda", icon: 'clock' },
+                                { value: TaskView.CALENDAR_TASK, display: SDKUI_Localizator.Calendar, icon: 'event' },
+                                { value: TaskView.LIST_TASK, display: SDKUI_Localizator.List, icon: 'fields' },
+                            ], value: activeComponent, onValueChanged: onSelectListOrCalendarCallback }) }), _jsx(TMTreeDropDown, { dataSource: treeDataSource, values: appliedGlobalFilters, setValues: setAppliedGlobalFilters, displayExpr: false, isValidKey: isValidKey, elementStyle: { minWidth: "250px", height: "29px" } })] }) }) }));
+};
+export default TMTasksHeader;

package/lib/components/features/tasks/TMTasksPanelContent.d.ts

@@ -0,0 +1,20 @@
+import React from "react";
+import { HomeBlogPost, TaskDescriptor, UserDescriptor } from "@topconsultnpm/sdk-ts";
+import { DcmtInfo, FormModes, TaskContext } from "../../../ts";
+interface TMTasksPanelContentProps {
+    id: string;
+    allTasks: Array<TaskDescriptor>;
+    getAllTasks: () => Promise<void>;
+    deleteTaskByIdsCallback: (deletedTaskIds: Array<number>) => Promise<void>;
+    addTaskCallback: (task: TaskDescriptor) => Promise<void>;
+    editTaskCallback: (task: TaskDescriptor) => Promise<void>;
+    handleNavigateToWGs: (value: HomeBlogPost | number) => Promise<void>;
+    handleNavigateToDossiers: (value: HomeBlogPost | number) => Promise<void>;
+    taskContext?: TaskContext;
+    usersList?: Array<UserDescriptor>;
+    onOpenS4TViewerRequest?: (dcmtInfo: Array<DcmtInfo>, onRefreshSearchAsync?: (() => Promise<void>)) => void;
+    s4TViewerDialogComponent?: React.ReactNode;
+    afterTaskSaved?: (task: TaskDescriptor | undefined, formMode: FormModes | undefined, forceRefresh?: boolean) => Promise<void>;
+}
+declare const TMTasksPanelContent: (props: TMTasksPanelContentProps) => import("react/jsx-runtime").JSX.Element;
+export default TMTasksPanelContent;

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

@@ -0,0 +1,65 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useCallback, useEffect } from "react";
+import { useState } from "react";
+import { applyContextFilters, AssignedTab, FilterCategoryId, filterTreeTask, getTaskAssignedToMe, TaskView } from "./TMTasksUtils";
+import { getTaskAssignedByMe } from "../tasks/TMTasksUtils";
+import TMTasksView from "./TMTasksView";
+import TMTasksHeader from "./TMTasksHeader";
+const TMTasksPanelContent = (props) => {
+    // Destructure the common props
+    const { id, handleNavigateToWGs, handleNavigateToDossiers, allTasks, getAllTasks, deleteTaskByIdsCallback, addTaskCallback, editTaskCallback, taskContext, usersList, onOpenS4TViewerRequest, s4TViewerDialogComponent, afterTaskSaved } = props;
+    // activeComponent holds the current task view type, which is determined based on the `layout` prop
+    const [activeComponent, setActiveComponent] = useState(TaskView.LIST_TASK);
+    // State to store clicked task to process for editing
+    const [currentTask, setCurrentTask] = useState(null);
+    // State to hold tasks that are currently visualized
+    const [visualizedTasks, setVisualizedTasks] = useState([]);
+    // State to count tasks in different categories
+    const [assignedToMeCount, setAssignedToMeCount] = useState(0);
+    const [assignedByMeCount, setAssignedByMeCount] = useState(0);
+    const [allTasksFilteredCount, setAllTasksFilteredCount] = useState(0);
+    // State to manage the active tab
+    const [activeTabIndex, setActiveTabIndex] = useState(AssignedTab.AssignedToMe);
+    // appliedGlobalFilters is a state variable that holds an array of filter category IDs (numbers)
+    const [appliedGlobalFilters, setAppliedGlobalFilters] = useState([FilterCategoryId.Expiring, FilterCategoryId.NewAssignedActivities, FilterCategoryId.New, FilterCategoryId.InProgress, FilterCategoryId.Pending, FilterCategoryId.Postponed, FilterCategoryId.Low, FilterCategoryId.High]);
+    // showContextualWG is a state variable that determines whether the contextual working group filter is visible
+    const [showContextualWG, setShowContextualWG] = useState(true);
+    // showContextualDossier is a state variable that determines whether the contextual dossier filter is visible
+    const [showContextualDossier, setShowContextualDossier] = useState(true);
+    // showContextualDocument is a state variable that determines whether the contextual document filter is visible
+    const [showContextualDocument, setShowContextualDocument] = useState(true);
+    // showId is a state variable that determines whether an ID-related component or feature should be displayed
+    const [showId, setShowId] = useState(false);
+    // showSearch is a state variable that controls the visibility of a search-related component or feature
+    const [showSearch, setShowSearch] = useState(true);
+    const contextualTasks = React.useMemo(() => {
+        return applyContextFilters(allTasks, showContextualWG, showContextualDossier, showContextualDocument, taskContext);
+    }, [allTasks, showContextualWG, showContextualDossier, showContextualDocument, taskContext]);
+    useEffect(() => {
+        const getFilteredTasks = (tab) => {
+            let tasks = allTasks;
+            switch (tab) {
+                case AssignedTab.AssignedToMe:
+                    tasks = getTaskAssignedToMe(tasks);
+                    break;
+                case AssignedTab.AssignedByMe:
+                    tasks = getTaskAssignedByMe(tasks);
+                    break;
+                default:
+                    break;
+            }
+            tasks = applyContextFilters(tasks, showContextualWG, showContextualDossier, showContextualDocument, taskContext);
+            tasks = filterTreeTask(tasks, appliedGlobalFilters);
+            return tasks;
+        };
+        setAssignedToMeCount(getFilteredTasks(AssignedTab.AssignedToMe).length);
+        setAssignedByMeCount(getFilteredTasks(AssignedTab.AssignedByMe).length);
+        setAllTasksFilteredCount(getFilteredTasks(AssignedTab.All).length);
+        setVisualizedTasks(getFilteredTasks(activeTabIndex));
+    }, [allTasks, appliedGlobalFilters, activeTabIndex, showContextualWG, showContextualDossier, showContextualDocument, taskContext]);
+    const updateActiveComponent = useCallback((newComponent) => {
+        setActiveComponent(newComponent);
+    }, []);
+    return _jsxs("div", { style: { width: "100%", height: "100%" }, children: [_jsx(TMTasksHeader, { height: "55px", activeComponent: activeComponent, updateActiveComponent: updateActiveComponent, allTasks: contextualTasks, appliedGlobalFilters: appliedGlobalFilters, setAppliedGlobalFilters: setAppliedGlobalFilters }), _jsx("div", { style: { width: "100%", height: "calc(100% - 55px)" }, children: _jsx(TMTasksView, { id: id, allTasks: allTasks, getAllTasks: getAllTasks, deleteTaskByIdsCallback: deleteTaskByIdsCallback, addTaskCallback: addTaskCallback, editTaskCallback: editTaskCallback, currentTask: currentTask, setCurrentTask: setCurrentTask, visualizedTasks: visualizedTasks, activeComponent: activeComponent, activeTabIndex: activeTabIndex, setActiveTabIndex: setActiveTabIndex, assignedToMeCount: assignedToMeCount, assignedByMeCount: assignedByMeCount, allTasksFilteredCount: allTasksFilteredCount, showId: showId, setShowId: setShowId, showSearch: showSearch, setShowSearch: setShowSearch, showContextualWG: showContextualWG, setShowContextualWG: setShowContextualWG, showContextualDossier: showContextualDossier, setShowContextualDossier: setShowContextualDossier, showContextualDocument: showContextualDocument, setShowContextualDocument: setShowContextualDocument, handleNavigateToWGs: handleNavigateToWGs, handleNavigateToDossiers: handleNavigateToDossiers, taskContext: taskContext, usersList: usersList, onOpenS4TViewerRequest: onOpenS4TViewerRequest, s4TViewerDialogComponent: s4TViewerDialogComponent, afterTaskSaved: afterTaskSaved }) })] });
+};
+export default TMTasksPanelContent;