@topconsultnpm/sdkui-react 6.17.0-test10

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

@@ -0,0 +1,392 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { ObjectClasses, TaskDescriptor, Priorities, PdGs, SDK_Globals, UserListCacheService, SDK_Localizator, Task_States } from '@topconsultnpm/sdk-ts';
+import { areDifferentIDs, formatDate, getOriginLabel, getPriorityLocalizatorValue, getPriorityLocalizatorValues, getStatusLocalizatorValues, gotoPDGExtendedLabel, taskValidatorAsync } from './TMTasksUtils';
+import ScrollView from 'devextreme-react/scroll-view';
+import TMLayoutContainer from '../../base/TMLayout';
+import { FormModes } from '../../../ts';
+import { useWorkflowApprove } from '../../../hooks/useWorkflowApprove';
+import { SaveFormOptions, useSaveForm } from '../../../hooks/useForm';
+import { SDKUI_Localizator, calcIsModified, TMConditionalWrapper, getPdgsIconMap, DateDisplayTypes } from '../../../helper';
+import { TMExceptionBoxManager } from '../../base/TMPopUp';
+import TMSpinner from '../../base/TMSpinner';
+import TMTooltip from '../../base/TMTooltip';
+import TMUserChooser from '../../choosers/TMUserChooser';
+import TMDateBox from '../../editors/TMDateBox';
+import TMDropDown from '../../editors/TMDropDown';
+import TMTextArea from '../../editors/TMTextArea';
+import TMTextBox from '../../editors/TMTextBox';
+import TMSaveForm from '../../forms/TMSaveForm';
+import TMDcmtForm from '../documents/TMDcmtForm';
+import styled from 'styled-components';
+import { TMColors } from '../../../utils/theme';
+import { renderContextBlock } from './TMTasksUtilsView';
+const ResponseCommentWrapper = styled.div `
+  position: relative;
+  width: 100%;
+`;
+const ResponseCommentLabel = styled.label `
+  position: absolute;
+  top: -8px; 
+  left: 12px;
+  background-color: white; 
+  padding: 0 4px;
+  font-size: 0.9rem;
+  color: rgb(80,80,80);
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+`;
+const ResponseCommentTextArea = styled.textarea.attrs({
+    maxLength: 500,
+}) `
+    width: 100%;
+    height: 100px;
+    border: 1px solid ${props => props.$isValid ? (props.$isModifiedWhen ? "#E29000" : '#b4b4b4') : TMColors.error};
+    border-radius: 10px;
+    padding: 10px;
+    resize: none;
+    cursor: ${props => props.disabled ? 'not-allowed' : 'text'};
+    &:focus {
+        outline: none;
+        border-bottom: 4px solid ${props => props.$isValid ? TMColors.primaryColor : TMColors.error};
+    }
+`;
+const ResponseCommentCharacterCounter = styled.div `
+    text-align: right;
+    font-size: 0.8rem;
+    color: #6c757d;
+    margin-top: 4px;
+`;
+const TMTaskForm = (props) => {
+    // Custom hook to manage workflow approval data
+    const { refreshWorkflowApprove } = useWorkflowApprove();
+    const validator = async (taskDescriptor) => { return await taskValidatorAsync(taskDescriptor); };
+    // Destructure the props object to extract individual properties
+    const { id, title, isModal, formMode, visualizedTasks, editTaskCallback, currentTask, setCurrentTask, isContextualCreate = false, selectedRowKeys, handleFocusedRowKeyChange, onStatusChanged, onSaved, onClose, onCancel, taskContext, startDate, endDate, showBackButton = true, hasNavigation = true, width = "100%", height = "100%", usersList, onOpenS4TViewerRequest, s4TViewerDialogComponent, allTasks, getAllTasks, deleteTaskByIdsCallback, addTaskCallback, handleNavigateToWGs, handleNavigateToDossiers } = props;
+    const sfo = new SaveFormOptions();
+    sfo.objClass = ObjectClasses.Task;
+    const customizeFormData = (task) => {
+        if (!isContextualCreate)
+            return task;
+        if (formMode !== FormModes.Create)
+            return task;
+        if (task.id && task.id > 0)
+            return task;
+        if (taskContext?.document) {
+            task.pdG = PdGs.DT;
+            task.iD1 = taskContext.document.tid;
+            task.iD2 = taskContext.document.did;
+        }
+        else if (taskContext?.workingGroup) {
+            task.pdG = PdGs.WG;
+            task.iD1 = taskContext.workingGroup.id;
+            if (currentTask) {
+                task.name = currentTask.name;
+                task.toID = 0;
+                task.startTime = new Date();
+            }
+        }
+        else if (taskContext?.dossier) {
+            task.pdG = PdGs.CF;
+            task.iD1 = taskContext.dossier.id;
+            if (currentTask) {
+                task.name = currentTask.name;
+                task.toID = 0;
+            }
+        }
+        else if (taskContext?.workItem) {
+            task.pdG = PdGs.DT;
+            task.iD1 = taskContext.workItem.tid;
+            task.iD2 = taskContext.workItem.did;
+            task.toID = 0;
+        }
+        return task;
+    };
+    const { formData, setFormData, formDataOrig, validationItems, exception, saveDataAsync } = useSaveForm(formMode, id, sfo, validator, onSaved, onStatusChanged, customizeFormData);
+    const containerRef = useRef(null);
+    const [isMobile, setIsMobile] = useState(false);
+    const [showDcmtForm, setShowDcmtForm] = useState(false);
+    const mobileBreakpoint = 768;
+    const [users, setUsers] = useState([]); // State to store the users
+    // Initial state for the fields' editability (readonly)
+    const [fieldsReadOnly, setFieldsReadOnly] = useState({
+        name: false,
+        description: false,
+        fromID: false,
+        assignedTO: false,
+        status: false,
+        priority: false,
+        startDate: false,
+        endDate: false,
+        remTime: false,
+        response: false
+    });
+    useEffect(() => {
+        const fetchUsers = async () => {
+            try {
+                // Show spinner while loading
+                TMSpinner.show({ description: `${SDKUI_Localizator.Loading} - ${SDK_Localizator.Users} ...` });
+                const userList = await UserListCacheService.GetAllAsync();
+                setUsers(userList); // Update state with the fetched users
+            }
+            catch (err) {
+                TMExceptionBoxManager.show({ exception: err });
+            }
+            finally {
+                TMSpinner.hide();
+            }
+        };
+        fetchUsers();
+    }, []);
+    useEffect(() => {
+        if (isModal)
+            setIsMobile(true);
+    }, [isModal]);
+    useEffect(() => {
+        if (formDataOrig && formMode === FormModes.Update) {
+            const isTaskAssignedByDifferentUser = areDifferentIDs(formDataOrig.fromID, SDK_Globals.tmSession?.SessionDescr?.userID);
+            setFieldsReadOnly({
+                name: isTaskAssignedByDifferentUser,
+                description: isTaskAssignedByDifferentUser,
+                fromID: isTaskAssignedByDifferentUser,
+                assignedTO: isTaskAssignedByDifferentUser,
+                status: false,
+                priority: isTaskAssignedByDifferentUser,
+                startDate: isTaskAssignedByDifferentUser,
+                endDate: isTaskAssignedByDifferentUser,
+                remTime: false,
+                response: false
+            });
+            const newTaskDescriptor = new TaskDescriptor();
+            Object.assign(newTaskDescriptor, formDataOrig);
+            newTaskDescriptor.isNew = 0;
+            editTaskCallback(newTaskDescriptor);
+        }
+        else if (formDataOrig && formMode === FormModes.Create && taskContext?.dossier && currentTask) {
+            setFieldsReadOnly({
+                name: true,
+                description: false,
+                fromID: false,
+                assignedTO: false,
+                status: false,
+                priority: false,
+                startDate: false,
+                endDate: false,
+                remTime: false,
+                response: false
+            });
+        }
+    }, [formDataOrig, formMode]);
+    useEffect(() => {
+        if (!isModal) {
+            // Function to handle resize events and update the mobile state based on container width.
+            const updateDimensions = (entries) => {
+                for (let entry of entries) {
+                    const { width } = entry.contentRect;
+                    setIsMobile(width <= mobileBreakpoint);
+                }
+            };
+            // Create a ResizeObserver to observe container size changes
+            const resizeObserver = new ResizeObserver(updateDimensions);
+            if (containerRef.current) {
+                resizeObserver.observe(containerRef.current);
+            }
+            // Cleanup: Stop observing when the component unmounts or the dependency changes.
+            return () => {
+                if (containerRef.current) {
+                    resizeObserver.unobserve(containerRef.current);
+                }
+            };
+        }
+        return undefined;
+    }, [containerRef, isModal]); // Dependency array ensures this effect runs when containerRef changes.
+    // Function to handle changes in the status value of a TM Drop Down
+    const onStatusValueChange = (e) => {
+        if (!e?.target?.value)
+            return;
+        setFormData({ ...formData ?? {}, state: e?.target?.value });
+    };
+    // Function to handle changes in the priority value of a TM Drop Down
+    const onPriorityValueChange = (e) => {
+        if (!e?.target?.value)
+            return;
+        setFormData({ ...formData ?? {}, priority: e?.target?.value });
+    };
+    const onAnswerChange = (e) => {
+        setFormData({ ...formData ?? {}, response: e.target.value ?? '' });
+    };
+    // Function to handle the undo action
+    const onUndoCallback = () => {
+        setFormData(formDataOrig);
+    };
+    const canNext = () => {
+        if (currentTask === null)
+            return false;
+        if (visualizedTasks.length === 1)
+            return false;
+        let index = visualizedTasks.findIndex(item => item.id === currentTask.id);
+        if (index < visualizedTasks.length - 1) {
+            return true;
+        }
+        else {
+            return false;
+        }
+    };
+    const canPrev = () => {
+        if (currentTask === null)
+            return false;
+        if (visualizedTasks.length === 1)
+            return false;
+        let index = visualizedTasks.findIndex(item => item.id === currentTask.id);
+        if (index > 0) {
+            return true;
+        }
+        else {
+            return false;
+        }
+    };
+    const onNextCallback = () => {
+        if (currentTask === null)
+            return;
+        if (visualizedTasks.length === 0)
+            return;
+        let index = visualizedTasks.findIndex(item => item.id === currentTask.id);
+        const nextTask = visualizedTasks[index + 1];
+        if (nextTask) {
+            setCurrentTask?.(nextTask);
+            if (nextTask.id)
+                handleFocusedRowKeyChange?.(nextTask);
+        }
+    };
+    const onPrevCallback = () => {
+        if (currentTask === null)
+            return;
+        if (visualizedTasks.length === 0)
+            return;
+        let index = visualizedTasks.findIndex(item => item.id === currentTask.id);
+        const prevTask = visualizedTasks[index - 1];
+        if (prevTask) {
+            setCurrentTask?.(prevTask);
+            if (prevTask.id)
+                handleFocusedRowKeyChange?.(prevTask);
+        }
+    };
+    const gotoPDGExtendedLabelClickCallback = () => {
+        // Return early if formData is not defined
+        if (!formData)
+            return;
+        // Destructure needed properties from formData
+        const { pdG = PdGs.None, iD1, iD2, iD1Name } = formData;
+        // Check if pdG is None
+        if (pdG === PdGs.None)
+            return;
+        // If both id1 and id2 are present and pdg is of type DT, show the document form
+        if (iD1 && iD2 && pdG === PdGs.DT) {
+            setShowDcmtForm(true);
+            return; // Exit the function after showing the form
+        }
+        if (iD1 && pdG === PdGs.WG) {
+            // Working Group navigation
+            if (handleNavigateToWGs) {
+                handleNavigateToWGs(iD1);
+            }
+            return; // Exit the function after navigation
+        }
+        if (iD1 && pdG === PdGs.CF) {
+            // Dossier navigation
+            if (handleNavigateToDossiers) {
+                handleNavigateToDossiers(iD1);
+            }
+            return; // Exit the function after navigation
+        }
+        // Otherwise, alert the user with the provided information
+        alert(gotoPDGExtendedLabel(false, pdG, iD1Name));
+    };
+    const handleStartTimeContentReady = () => {
+        setTimeout(() => { if (startDate && !formData?.startTime && formMode === FormModes.Create) {
+            setFormData(prev => ({ ...prev, startTime: startDate }));
+        } }, 100);
+    };
+    const handleEndTimeContentReady = () => {
+        setTimeout(() => { if (endDate && !formData?.endTime && formMode === FormModes.Create) {
+            setFormData(prev => ({ ...prev, endTime: endDate }));
+        } }, 200);
+    };
+    const onCloseCallback = () => {
+        if (formData && formData.id) {
+            if (!selectedRowKeys.includes(formData.id)) {
+                handleFocusedRowKeyChange?.(formData);
+            }
+        }
+        onClose?.();
+    };
+    const onTaskCompleted = async (task) => {
+        await editTaskCallback(task);
+        onClose?.();
+    };
+    return (_jsx("div", { style: { width: "100%", height: "100%", overflow: "auto" }, ref: containerRef, children: _jsx(TMSaveForm, { width: width, height: height, id: id, title: title, isModal: isModal, formMode: formMode, onSaveAsync: saveDataAsync, onClose: onCloseCallback, onUndo: onUndoCallback, exception: exception, isModified: calcIsModified(formData, formDataOrig), validationItems: validationItems, showBackButton: showBackButton, hasNavigation: (hasNavigation && formMode !== FormModes.Create), canNext: canNext(), onNext: onNextCallback, canPrev: canPrev(), onPrev: onPrevCallback, showToolbar: !(showDcmtForm && formData?.iD1 && formData?.iD2), children: _jsxs(_Fragment, { children: [_jsx(ScrollView, { direction: "vertical", useNative: true, height: "calc(100% - 35px)", children: _jsx("div", { style: { marginRight: "5px" }, children: _jsxs(TMLayoutContainer, { direction: 'vertical', gap: 2, children: [(formMode === FormModes.Update && areDifferentIDs(formDataOrig?.fromID, SDK_Globals.tmSession?.SessionDescr?.userID)) && _jsx(TMConditionalWrapper, { condition: !isMobile, wrapper: children => _jsx("div", { style: { display: 'flex', flexDirection: 'row', width: '100%', gap: 10 }, children: children }), children: _jsxs("div", { style: { width: '100%', display: 'flex', alignItems: 'center', color: "#E29000" }, children: [_jsx("i", { className: "dx-icon-info", style: { fontSize: 20 } }), "\u00A0", _jsx("span", { children: SDKUI_Localizator.TaskAssignedMessage.replaceParams(formDataOrig?.fromName ?? '') })] }) }), taskContext?.workItem === undefined && (!areDifferentIDs(formData?.fromID, SDK_Globals.tmSession?.SessionDescr?.userID)
+                                        && !areDifferentIDs(formData?.toID, SDK_Globals.tmSession?.SessionDescr?.userID))
+                                        && _jsx(TMConditionalWrapper, { condition: !isMobile, wrapper: children => _jsx("div", { style: { display: 'flex', flexDirection: 'row', width: '100%', gap: 10 }, children: children }), children: _jsxs("div", { style: { width: '100%', display: 'flex', alignItems: 'center', color: "#2559A5" }, children: [_jsx("i", { className: "dx-icon-info", style: { fontSize: 20 } }), "\u00A0", _jsx("span", { children: SDKUI_Localizator.PersonalTaskAssignmentMessage })] }) }), (!areDifferentIDs(formData?.fromID, SDK_Globals.tmSession?.SessionDescr?.userID)
+                                        && areDifferentIDs(formData?.toID, SDK_Globals.tmSession?.SessionDescr?.userID))
+                                        && _jsx(TMConditionalWrapper, { condition: !isMobile, wrapper: children => _jsx("div", { style: { display: 'flex', flexDirection: 'row', width: '100%', gap: 10 }, children: children }), children: _jsxs("div", { style: { width: '100%', display: 'flex', alignItems: 'center', color: "#2559A5" }, children: [_jsx("i", { className: "dx-icon-info", style: { fontSize: 20 } }), "\u00A0", _jsx("span", { children: SDKUI_Localizator.TaskAssignedToUserMessage.replaceParams(users.find(user => user.id === formData?.toID)?.name ?? '-') })] }) }), renderContextBlock({
+                                        condition: formMode === FormModes.Create && isContextualCreate && !!taskContext?.workingGroup?.id,
+                                        pdg: PdGs.WG,
+                                        label: getOriginLabel(PdGs.WG, taskContext?.workingGroup?.name),
+                                        isMobile: isMobile
+                                    }), renderContextBlock({
+                                        condition: formMode === FormModes.Create && isContextualCreate && !!taskContext?.dossier?.id,
+                                        pdg: PdGs.CF,
+                                        label: getOriginLabel(PdGs.CF, taskContext?.dossier?.name),
+                                        isMobile: isMobile
+                                    }), renderContextBlock({
+                                        condition: formMode === FormModes.Create && isContextualCreate && !!taskContext?.document?.tid && !!taskContext?.document?.did,
+                                        pdg: PdGs.DT,
+                                        label: getOriginLabel(PdGs.DT, taskContext?.document?.name),
+                                        isMobile: isMobile
+                                    }), renderContextBlock({
+                                        condition: formMode === FormModes.Create && isContextualCreate && !!taskContext?.workItem?.tid && !!taskContext?.workItem?.did,
+                                        pdg: PdGs.DT,
+                                        label: getOriginLabel(PdGs.DT, taskContext?.workItem?.name),
+                                        isMobile: isMobile
+                                    }), formMode === FormModes.Update && formData?.pdG && formData?.iD1Name && (_jsx(TMConditionalWrapper, { condition: !isMobile, wrapper: children => (_jsx("div", { style: {
+                                                display: 'flex',
+                                                flexDirection: 'row',
+                                                width: '100%',
+                                                gap: 16,
+                                                padding: '8px 0'
+                                            }, children: children })), children: _jsx("div", { style: { width: isMobile ? '100%' : '50%' }, children: _jsx("div", { style: {
+                                                    display: 'flex',
+                                                    alignItems: 'center',
+                                                    marginTop: 12
+                                                }, children: _jsx(TMTooltip, { content: formData.pdG !== PdGs.None ? gotoPDGExtendedLabel(true, formData.pdG, formData.iD1Name) : '', children: _jsxs("span", { onClick: () => formData.pdG !== PdGs.None ? gotoPDGExtendedLabelClickCallback() : null, style: {
+                                                            display: 'inline-flex',
+                                                            alignItems: 'center',
+                                                            lineHeight: 1,
+                                                            padding: '6px 10px',
+                                                            borderRadius: 8,
+                                                            backgroundColor: formData.pdG !== PdGs.None ? '#f5f5f7' : 'transparent',
+                                                            color: formData.pdG !== PdGs.None ? '#2559A5' : '#444',
+                                                            cursor: formData.pdG !== PdGs.None ? 'pointer' : 'default',
+                                                            fontWeight: 600,
+                                                            transition: 'all 0.25s ease',
+                                                            gap: 6
+                                                        }, onMouseEnter: e => {
+                                                            if (formData.pdG !== PdGs.None)
+                                                                e.currentTarget.style.backgroundColor = '#ebebef';
+                                                        }, onMouseLeave: e => {
+                                                            if (formData.pdG !== PdGs.None)
+                                                                e.currentTarget.style.backgroundColor = '#f5f5f7';
+                                                        }, children: [_jsx("span", { style: { display: 'flex', alignItems: 'center' }, children: getPdgsIconMap().get(formData.pdG) }), _jsx("span", { children: getOriginLabel(formData.pdG, formData.iD1Name) })] }) }) }) }) })), _jsx(TMConditionalWrapper, { condition: !isMobile, wrapper: children => _jsx("div", { style: { display: 'flex', flexDirection: 'row', width: '100%', gap: 10 }, children: children }), children: _jsx("div", { style: { width: isMobile ? '100%' : '50%' }, children: _jsx(TMTextBox, { label: SDKUI_Localizator.Name, value: formData?.name ?? '', readOnly: fieldsReadOnly.name, autoFocus: true, maxLength: 100, isModifiedWhen: formData?.name !== formDataOrig?.name, onValueChanged: (e) => { setFormData({ ...formData ?? {}, name: e.target.value }); }, validationItems: validationItems?.filter(o => o.PropertyName === SDKUI_Localizator.Name) }) }) }), _jsx("div", { style: { width: '100%' }, children: _jsx(TMTextArea, { label: SDKUI_Localizator.Description, value: formData?.description ?? '', maxLength: 200, readOnly: fieldsReadOnly.description, isModifiedWhen: formData?.description !== formDataOrig?.description, onValueChanged: (e) => { setFormData({ ...formData ?? {}, description: e.target.value }); }, validationItems: validationItems?.filter(o => o.PropertyName === SDKUI_Localizator.Description), resize: false }) }), _jsx(TMConditionalWrapper, { condition: !isMobile, wrapper: children => _jsx("div", { style: { display: 'flex', flexDirection: 'row', width: '100%', gap: 10 }, children: children }), children: (formMode === FormModes.Create || !areDifferentIDs(formDataOrig?.fromID, SDK_Globals.tmSession?.SessionDescr?.userID)) ?
+                                            _jsx("div", { id: "assignedToAnotherUserField", style: { width: isMobile ? '100%' : '50%' }, children: _jsx(TMUserChooser, { dataSource: usersList ?? undefined, allowMultipleSelection: false, label: SDKUI_Localizator.AssignedTo_Female, readOnly: fieldsReadOnly.assignedTO, values: formData?.toID ? [formData?.toID] : [], isModifiedWhen: formData?.toID !== formDataOrig?.toID, validationItems: validationItems?.filter(o => o.PropertyName === SDKUI_Localizator.AssignedTo_Female), onValueChanged: (newValue) => {
+                                                        if (newValue === undefined)
+                                                            return;
+                                                        setFormData({ ...formData ?? {}, toID: newValue[0] });
+                                                    } }) })
+                                            : formMode === FormModes.Update && _jsxs(_Fragment, { children: [areDifferentIDs(formDataOrig?.fromID, SDK_Globals.tmSession?.SessionDescr?.userID) && _jsx("div", { style: { width: isMobile ? '100%' : '50%' }, children: _jsx(TMTextBox, { label: SDKUI_Localizator.AssignedBy, value: formData?.fromName ?? '', readOnly: true }) }), areDifferentIDs(formDataOrig?.toID, SDK_Globals.tmSession?.SessionDescr?.userID) && _jsx("div", { style: { width: isMobile ? '100%' : '50%' }, children: _jsx(TMTextBox, { label: SDKUI_Localizator.AssignedTo_Female, value: formData?.toName ?? '', readOnly: true }) })] }) }), _jsx(TMConditionalWrapper, { condition: !isMobile, wrapper: children => _jsx("div", { style: { display: 'flex', flexDirection: 'row', width: '100%', gap: 10 }, children: children }), children: _jsxs(_Fragment, { children: [_jsx("div", { style: { width: isMobile ? '100%' : '50%' }, children: _jsx(TMDropDown, { label: SDKUI_Localizator.Status, value: formData?.state, dataSource: getStatusLocalizatorValues(), isModifiedWhen: formData?.state !== formDataOrig?.state, onValueChanged: onStatusValueChange, readOnly: fieldsReadOnly.status }) }), _jsx("div", { style: { width: isMobile ? '100%' : '50%' }, children: !fieldsReadOnly.priority ? _jsx(TMDropDown, { label: SDKUI_Localizator.Priority, value: formData?.priority, dataSource: getPriorityLocalizatorValues(), isModifiedWhen: formData?.priority !== formDataOrig?.priority, onValueChanged: onPriorityValueChange })
+                                                        : _jsx(TMTextBox, { label: SDKUI_Localizator.Priority, value: getPriorityLocalizatorValue(formData?.priority ?? Priorities.Low), readOnly: true }) })] }) }), _jsx(TMConditionalWrapper, { condition: !isMobile, wrapper: children => _jsx("div", { style: { display: 'flex', flexDirection: 'row', width: '100%', gap: 10 }, children: children }), children: _jsxs(_Fragment, { children: [_jsx("div", { style: { width: isMobile ? '100%' : '50%', marginTop: 10 }, children: !fieldsReadOnly.startDate ? _jsx(TMDateBox, { id: "start-date", resetTimeToZeroOnKeyPress: false, label: SDKUI_Localizator.StartDate, dateDisplayType: DateDisplayTypes.DateTime, value: formData?.startTime, isModifiedWhen: formData?.startTime !== formDataOrig?.startTime, validationItems: validationItems?.filter(o => o.PropertyName === SDKUI_Localizator.ErrorStartEndDate), onContentReady: handleStartTimeContentReady, onValueChange: (value) => { setFormData({ ...formData ?? {}, startTime: value }); }, showClearButton: true }) : _jsx(TMTextBox, { label: SDKUI_Localizator.StartDate, value: formData?.startTime ? formatDate(formData?.startTime) : '', readOnly: true }) }), _jsx("div", { style: { width: isMobile ? '100%' : '50%', marginTop: 10 }, children: !fieldsReadOnly.startDate ? _jsx(TMDateBox, { id: "end-date", resetTimeToZeroOnKeyPress: false, label: SDKUI_Localizator.Expiration, dateDisplayType: DateDisplayTypes.DateTime, value: formData?.endTime, isModifiedWhen: formData?.endTime !== formDataOrig?.endTime, validationItems: validationItems?.filter(o => o.PropertyName === SDKUI_Localizator.ErrorStartEndDate || o.PropertyName === SDKUI_Localizator.ErrorEndRemDate), onContentReady: handleEndTimeContentReady, onValueChange: (value) => { setFormData({ ...formData ?? {}, endTime: value }); }, showClearButton: true, readOnly: fieldsReadOnly.endDate }) : _jsx(TMTextBox, { label: SDKUI_Localizator.Expiration, value: formData?.endTime ? formatDate(formData?.endTime) : '', readOnly: true }) })] }) }), _jsx(TMConditionalWrapper, { condition: !isMobile, wrapper: children => _jsx("div", { style: { display: 'flex', flexDirection: 'row', width: '100%', gap: 3 }, children: children }), children: _jsx("div", { style: { width: isMobile ? '100%' : '50%', marginTop: 10 }, children: _jsx(TMDateBox, { id: "alert-time", resetTimeToZeroOnKeyPress: false, label: SDKUI_Localizator.Reminder, dateDisplayType: DateDisplayTypes.DateTime, value: formData?.remTime ?? undefined, isModifiedWhen: formData?.remTime !== formDataOrig?.remTime, validationItems: validationItems?.filter(o => o.PropertyName === SDKUI_Localizator.ErrorEndRemDate), onValueChange: (value) => { setFormData({ ...formData ?? {}, remTime: value }); }, showClearButton: true, readOnly: fieldsReadOnly.remTime }) }) }), (formData?.state && [Task_States.Completed, Task_States.Waiting, Task_States.Deferred].includes(formData?.state) ||
+                                        (formData?.response ?? "") !== "") && _jsx(TMConditionalWrapper, { condition: !isMobile, wrapper: children => _jsx("div", { style: { display: 'flex', flexDirection: 'row', width: '100%', gap: 3 }, children: children }), children: _jsx("div", { style: { width: isMobile ? '100%' : '50%', marginTop: 10 }, children: _jsxs(ResponseCommentWrapper, { children: [_jsx(ResponseCommentTextArea, { id: "responseId", name: "response", "$isValid": true, value: formData?.response ?? '', onChange: onAnswerChange, "$isModifiedWhen": formData?.response !== formDataOrig?.response, disabled: (formData?.response ?? "") !== "" &&
+                                                            (formData?.state && ![Task_States.Completed, Task_States.Waiting, Task_States.Deferred].includes(formData?.state)) }), _jsxs(ResponseCommentLabel, { htmlFor: "responseId", children: [SDKUI_Localizator.Answer, _jsxs(TMTooltip, { content: SDKUI_Localizator.AnswerTooltip, children: [" ", _jsx("i", { className: 'dx-icon-info' }), " "] })] }), _jsx(ResponseCommentCharacterCounter, { children: `${500 - (formData?.response ?? '').length} ${SDKUI_Localizator.CharactersRemaining}` })] }) }) })] }) }) }), (showDcmtForm && formData?.iD1 && formData?.iD2) &&
+                        _jsx(TMDcmtForm, { titleModal: formData.iD1Name ?? '-', isModal: true, TID: formData.iD1, DID: formData.iD2, allowButtonsRefs: true, taskMoreInfo: formData, onWFOperationCompleted: refreshWorkflowApprove, onTaskCompleted: onTaskCompleted, onClose: () => { setShowDcmtForm(false); }, onOpenS4TViewerRequest: onOpenS4TViewerRequest, s4TViewerDialogComponent: s4TViewerDialogComponent, allTasks: allTasks, getAllTasks: getAllTasks, deleteTaskByIdsCallback: deleteTaskByIdsCallback, addTaskCallback: addTaskCallback, editTaskCallback: editTaskCallback, handleNavigateToWGs: handleNavigateToWGs, handleNavigateToDossiers: handleNavigateToDossiers })] }) }) }));
+};
+export default TMTaskForm;

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

@@ -0,0 +1,17 @@
+import React from "react";
+import { TaskDescriptor } from "@topconsultnpm/sdk-ts";
+import { FormModes } from "../../../ts";
+interface TMTasksAgendaProps {
+    id: string;
+    showId: boolean;
+    showSearch: boolean;
+    visualizedTasks: Array<TaskDescriptor>;
+    fromCell: boolean;
+    toCell: boolean;
+    currentAgendaDate: Date;
+    setCurrentAgendaDate: React.Dispatch<React.SetStateAction<Date>>;
+    openTaskForm: (formMode: FormModes, task?: TaskDescriptor) => void;
+    handleFocusedRowChange: (row: TaskDescriptor | undefined) => void;
+}
+declare const TMTasksAgenda: React.MemoExoticComponent<(props: TMTasksAgendaProps) => import("react/jsx-runtime").JSX.Element>;
+export default TMTasksAgenda;

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/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/scroll-view";
+import LoadIndicator from "devextreme-react/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_Female, ":"] }), "\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;