@topconsultnpm/sdkui-react 6.20.0-dev1.14 → 6.20.0-dev1.15

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

@@ -1,392 +0,0 @@
-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 && taskContext?.dossier?.origin === 'DossierAction' && 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, allowShowAllUsers: !!taskContext?.dossier, 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

@@ -1,17 +0,0 @@
-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

@@ -1,107 +0,0 @@
-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

@@ -1,21 +0,0 @@
-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;