@topconsultnpm/sdkui-react 6.20.0-dev2.5 → 6.20.0-dev2.50

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

@@ -1,64 +1,18 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useEffect, useMemo, 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 { useEffect, useRef, useState } from 'react';
+import { ObjectClasses, TaskDescriptor, PdGs, UserListCacheService, SDK_Localizator } from '@topconsultnpm/sdk-ts';
+import { 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 { SDKUI_Localizator, calcIsModified, getMoreInfoTasksForDocument } 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';
-import { DeviceType, useDeviceType } from '../../base/TMDeviceProvider';
-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;
-`;
+import { getCurrentUserTaskRole, RenderDescriptionField, RenderEndDateField, RenderNameField, RenderPriorityField, RenderRemindDateField, RenderStartDateField, RenderTaskFormStateField, TaskAssigneeField, TaskFormAssignmentNoticeBadge, TaskFormContextualAttachments, TMChangeStateForm } from './TMTaskFormUtils';
 const TMTaskForm = (props) => {
     // Custom hook to manage workflow approval data
     const { refreshWorkflowApprove } = useWorkflowApprove();
@@ -106,13 +60,8 @@ const TMTaskForm = (props) => {
     };
     const { formData, setFormData, formDataOrig, validationItems, exception, saveDataAsync } = useSaveForm(formMode, id, sfo, validator, onSaved, onStatusChanged, customizeFormData);
     const containerRef = useRef(null);
-    // Get the current device type (e.g., mobile, tablet, desktop) using a custom hook.
-    const deviceType = useDeviceType();
-    // This avoids unnecessary re-renders by only recalculating when deviceType changes.
-    let isMobileDevice = useMemo(() => { return deviceType === DeviceType.MOBILE; }, [deviceType]);
-    const [isMobile, setIsMobile] = useState(false);
     const [showDcmtForm, setShowDcmtForm] = useState(false);
-    const mobileBreakpoint = 768;
+    const [showChangeStateForm, setShowChangeStateForm] = useState(false);
     const [users, setUsers] = useState([]); // State to store the users
     // Initial state for the fields' editability (readonly)
     const [fieldsReadOnly, setFieldsReadOnly] = useState({
@@ -144,22 +93,18 @@ const TMTaskForm = (props) => {
         };
         fetchUsers();
     }, []);
-    useEffect(() => {
-        if (isModal)
-            setIsMobile(true);
-    }, [isModal]);
     useEffect(() => {
         if (formDataOrig && formMode === FormModes.Update) {
-            const isTaskAssignedByDifferentUser = areDifferentIDs(formDataOrig.fromID, SDK_Globals.tmSession?.SessionDescr?.userID);
+            const taskRole = getCurrentUserTaskRole(formDataOrig);
             setFieldsReadOnly({
-                name: isTaskAssignedByDifferentUser,
-                description: isTaskAssignedByDifferentUser,
-                fromID: isTaskAssignedByDifferentUser,
-                assignedTO: isTaskAssignedByDifferentUser,
+                name: taskRole === 'receiver',
+                description: taskRole === 'receiver',
+                fromID: taskRole === 'receiver',
+                assignedTO: taskRole === 'receiver',
                 status: false,
-                priority: isTaskAssignedByDifferentUser,
-                startDate: isTaskAssignedByDifferentUser,
-                endDate: isTaskAssignedByDifferentUser,
+                priority: taskRole === 'receiver',
+                startDate: taskRole === 'receiver',
+                endDate: taskRole === 'receiver',
                 remTime: false,
                 response: false
             });
@@ -183,44 +128,12 @@ const TMTaskForm = (props) => {
             });
         }
     }, [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);
@@ -330,6 +243,9 @@ const TMTaskForm = (props) => {
         await editTaskCallback(task);
         onClose?.();
     };
+    const handleShowChangeStateForm = (value) => {
+        setShowChangeStateForm(value);
+    };
     const handleNavigateToReference = (ref) => {
         switch (ref.objClass) {
             case ObjectClasses.Dossier:
@@ -349,94 +265,26 @@ const TMTaskForm = (props) => {
                 console.warn(`Unhandled object type: ${ref.objClass}`);
         }
     };
-    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: "100%",
-                                                display: 'flex',
-                                                alignItems: 'center',
-                                                justifyContent: 'center',
-                                                marginTop: 12
-                                            }, children: _jsxs("div", { onClick: () => formData.pdG !== PdGs.None ? gotoPDGExtendedLabelClickCallback() : null, style: {
-                                                    backgroundColor: "#C2388B",
-                                                    color: "#fff",
-                                                    padding: "10px 16px",
-                                                    borderRadius: "20px",
-                                                    display: "flex",
-                                                    alignItems: "center",
-                                                    justifyContent: "space-between",
-                                                    cursor: "pointer",
-                                                    fontWeight: 500,
-                                                    transition: "background-color 0.3s",
-                                                    minWidth: "180px",
-                                                    maxWidth: "100%",
-                                                    flexWrap: "wrap",
-                                                    gap: "8px",
-                                                }, onMouseEnter: e => {
-                                                    if (formData.pdG !== PdGs.None)
-                                                        e.currentTarget.style.backgroundColor = "#A12D78";
-                                                }, onMouseLeave: e => {
-                                                    if (formData.pdG !== PdGs.None)
-                                                        e.currentTarget.style.backgroundColor = "#C2388B";
-                                                }, children: [_jsxs("span", { style: {
-                                                            flex: 1,
-                                                            textAlign: "center",
-                                                            gap: "6px",
-                                                            display: "flex",
-                                                            justifyContent: "center",
-                                                            alignItems: "center",
-                                                        }, children: [formData.pdG === PdGs.WG && _jsx("span", { children: SDKUI_Localizator.GoToWorkgroup }), formData.pdG === PdGs.CF && _jsx("span", { children: SDKUI_Localizator.GoToDossier }), formData.pdG === PdGs.DT && _jsx("span", { children: SDKUI_Localizator.GoToDocument }), (() => {
-                                                                const originLabel = getOriginLabel(formData.pdG, formData.iD1Name);
-                                                                if (!originLabel)
-                                                                    return null;
-                                                                const maxLength = isMobileDevice ? 10 : 25;
-                                                                const displayText = originLabel.length > maxLength
-                                                                    ? originLabel.slice(0, maxLength) + "..."
-                                                                    : originLabel;
-                                                                return _jsxs("span", { children: ["\u201C", displayText, "\u201D"] });
-                                                            })()] }), _jsx(TMTooltip, { content: _jsxs("div", { style: { textAlign: "left" }, children: [formData.pdG && (_jsxs(_Fragment, { children: [_jsxs("div", { style: {
-                                                                                display: "flex",
-                                                                                alignItems: "center",
-                                                                                gap: "6px",
-                                                                                fontWeight: 600,
-                                                                            }, children: [_jsx("span", { style: { display: "flex", alignItems: "center" }, children: getPdgsIconMap().get(formData.pdG) }), _jsx("span", { children: formData.pdG === PdGs.WG ? SDKUI_Localizator.WorkGroup : formData.pdG === PdGs.CF ? SDKUI_Localizator.Dossier : formData.pdG === PdGs.DT ? SDKUI_Localizator.Document : "" })] }), _jsx("hr", { style: { margin: "4px 0 8px 0" } })] })), formData.iD1 != null && formData.iD1 !== 0 && (_jsxs("div", { children: [_jsx("b", { children: "ID1" }), ": ", formData.iD1.toString()] })), formData.iD1Name && (_jsxs("div", { children: [_jsx("b", { children: "ID1NAME" }), ": ", formData.iD1Name.toString()] })), formData.iD2 != null && formData.iD2 !== 0 && (_jsxs("div", { children: [_jsx("b", { children: "ID2" }), ": ", formData.iD2.toString()] }))] }), children: _jsx("i", { className: "dx-icon-info", style: { fontSize: "1.3rem", flexShrink: 0 } }) })] }) }) })), _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) => {
+    return (_jsx("div", { style: { width: "100%", height: "100%", overflow: "auto" }, ref: containerRef, children: _jsxs(TMSaveForm, { width: width, height: height, id: id, title: title, isModal: isModal, formMode: formMode, onSaveAsync: saveDataAsync, onClose: onCloseCallback, showUndoButton: formMode === FormModes.Update, 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: formData && (formMode === FormModes.Create || formMode === FormModes.None) ? "calc(100% - 70px)" : "calc(100% - 35px)", children: _jsx("div", { style: { marginRight: "5px" }, children: _jsxs(TMLayoutContainer, { direction: 'vertical', gap: 2, children: [(formMode === FormModes.Create || formMode === FormModes.None) && _jsxs("div", { style: { width: '100%', height: '100%' }, children: [_jsx(RenderNameField, { fieldsReadOnly: fieldsReadOnly, setFormData: setFormData, formData: formData, formDataOrig: formDataOrig, validationItems: validationItems }), _jsx(RenderDescriptionField, { fieldsReadOnly: fieldsReadOnly, setFormData: setFormData, formData: formData, formDataOrig: formDataOrig, validationItems: validationItems }), _jsx(TaskAssigneeField, { formMode: formMode, formData: formData, formDataOrig: formDataOrig, taskContext: taskContext, validationItems: validationItems, fieldsReadOnly: fieldsReadOnly, usersList: usersList, onValueChanged: (newValue) => {
+                                                        if (newValue === undefined)
+                                                            return;
+                                                        setFormData({ ...formData ?? {}, toID: newValue[0] });
+                                                    } }), _jsx(RenderStartDateField, { fieldsReadOnly: fieldsReadOnly, formData: formData, formDataOrig: formDataOrig, validationItems: validationItems, setFormData: setFormData, onContentReady: handleStartTimeContentReady }), _jsx(RenderEndDateField, { fieldsReadOnly: fieldsReadOnly, formData: formData, formDataOrig: formDataOrig, validationItems: validationItems, setFormData: setFormData, onContentReady: handleEndTimeContentReady }), _jsx(RenderRemindDateField, { fieldsReadOnly: fieldsReadOnly, formData: formData, formDataOrig: formDataOrig, validationItems: validationItems, setFormData: setFormData }), _jsx(RenderPriorityField, { formData: formData, formDataOrig: formDataOrig, fieldsReadOnly: fieldsReadOnly, onPriorityValueChange: onPriorityValueChange }), _jsx(TaskFormContextualAttachments, { taskContext: taskContext })] }), (formMode === FormModes.Update || formMode === FormModes.Duplicate) && _jsxs("div", { style: { width: '100%', height: '100%' }, children: [_jsx(RenderNameField, { fieldsReadOnly: fieldsReadOnly, setFormData: setFormData, formData: formData, formDataOrig: formDataOrig, validationItems: validationItems }), _jsx(RenderDescriptionField, { fieldsReadOnly: fieldsReadOnly, setFormData: setFormData, formData: formData, formDataOrig: formDataOrig, validationItems: validationItems }), _jsx(TaskAssigneeField, { formMode: formMode, formData: formData, formDataOrig: formDataOrig, taskContext: taskContext, validationItems: validationItems, fieldsReadOnly: fieldsReadOnly, usersList: usersList, 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, moreInfoTasks: [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, onReferenceClick: handleNavigateToReference })] }) }) }));
+                                                    } }), _jsx(RenderStartDateField, { fieldsReadOnly: fieldsReadOnly, formData: formData, formDataOrig: formDataOrig, validationItems: validationItems, setFormData: setFormData, onContentReady: handleStartTimeContentReady }), _jsx(RenderEndDateField, { fieldsReadOnly: fieldsReadOnly, formData: formData, formDataOrig: formDataOrig, validationItems: validationItems, setFormData: setFormData, onContentReady: handleEndTimeContentReady }), _jsx(RenderPriorityField, { formData: formData, formDataOrig: formDataOrig, fieldsReadOnly: fieldsReadOnly, onPriorityValueChange: onPriorityValueChange }), _jsx(RenderRemindDateField, { fieldsReadOnly: fieldsReadOnly, formData: formData, formDataOrig: formDataOrig, validationItems: validationItems, setFormData: setFormData }), _jsx(RenderTaskFormStateField, { formData: formData, formDataOrig: formDataOrig, formMode: formMode, gotoPDGExtendedLabelClickCallback: gotoPDGExtendedLabelClickCallback, handleShowChangeStateForm: handleShowChangeStateForm, onSavedCallback: onSaved })] })] }) }) }), formData && (_jsx("div", { style: {
+                                position: 'absolute',
+                                bottom: 0,
+                                left: 0,
+                                right: 0,
+                                padding: '8px 12px',
+                                backgroundColor: '#fff',
+                                borderTop: '1px solid #e6e6e6',
+                                display: 'flex',
+                                justifyContent: 'flex-end',
+                                alignItems: 'center'
+                            }, children: _jsx(TaskFormAssignmentNoticeBadge, { task: formData, users: users }) })), (showDcmtForm && formData?.iD1 && formData?.iD2) &&
+                            _jsx(TMDcmtForm, { titleModal: formData.iD1Name ?? '-', isModal: true, TID: formData.iD1, DID: formData.iD2, allowButtonsRefs: true, moreInfoTasks: getMoreInfoTasksForDocument(allTasks, formData?.iD1, formData?.iD2), 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, onReferenceClick: handleNavigateToReference })] }), formData && showChangeStateForm && _jsx(TMChangeStateForm, { formData: formData, formDataOrig: formDataOrig, handleShowChangeStateForm: handleShowChangeStateForm, setFormData: setFormData })] }) }));
 };
 export default TMTaskForm;

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

@@ -0,0 +1,74 @@
+import React from "react";
+import { PdGs, Task_States, TaskDescriptor, UserDescriptor, ValidationItem } from "@topconsultnpm/sdk-ts";
+import { FormModes, TaskContext } from "../../../ts";
+import { IFieldsEditability } from "./TMTasksUtils";
+export declare const getCurrentUserTaskRole: (task?: TaskDescriptor) => TaskRole;
+interface TaskFormAssignmentNoticeSectionProps {
+    task: TaskDescriptor;
+    users: Array<UserDescriptor>;
+}
+export declare const TaskFormAssignmentNoticeBadge: (props: TaskFormAssignmentNoticeSectionProps) => import("react/jsx-runtime").JSX.Element | null;
+interface RenderContextBlockParams {
+    condition: boolean;
+    pdg: PdGs;
+    label: string | undefined;
+}
+export declare const RenderAttachmentBlock: ({ condition, pdg, label }: RenderContextBlockParams) => JSX.Element | null;
+interface TaskFormContextualAttachmentsProps {
+    taskContext: TaskContext | undefined;
+}
+export declare const TaskFormContextualAttachments: ({ taskContext }: TaskFormContextualAttachmentsProps) => JSX.Element | null;
+interface TaskFormAssignedToProps {
+    formMode: FormModes;
+    formData: TaskDescriptor | undefined;
+    formDataOrig: TaskDescriptor | undefined;
+    taskContext: TaskContext | undefined;
+    validationItems: Array<ValidationItem>;
+    fieldsReadOnly: IFieldsEditability;
+    usersList?: Array<UserDescriptor>;
+    onValueChanged: (newValue: Array<number> | undefined) => void;
+}
+export declare const TaskAssigneeField: (props: TaskFormAssignedToProps) => import("react/jsx-runtime").JSX.Element;
+interface RenderFieldBaseProps {
+    fieldsReadOnly: IFieldsEditability;
+    formDataOrig?: TaskDescriptor;
+    formData?: TaskDescriptor;
+}
+interface RenderFieldProps extends RenderFieldBaseProps {
+    validationItems?: Array<ValidationItem>;
+    setFormData: React.Dispatch<React.SetStateAction<TaskDescriptor | undefined>>;
+}
+interface RenderPriorityFieldProps extends RenderFieldBaseProps {
+    onPriorityValueChange: (e: React.ChangeEvent<HTMLSelectElement>) => void;
+}
+interface RenderDateFieldProps extends RenderFieldProps {
+    onContentReady?: () => void;
+}
+export declare const RenderNameField: ({ validationItems, setFormData, formData, formDataOrig, fieldsReadOnly }: RenderFieldProps) => import("react/jsx-runtime").JSX.Element;
+export declare const RenderDescriptionField: ({ validationItems, setFormData, formData, formDataOrig, fieldsReadOnly }: RenderFieldProps) => import("react/jsx-runtime").JSX.Element;
+export declare const RenderPriorityField: ({ formData, formDataOrig, fieldsReadOnly, onPriorityValueChange }: RenderPriorityFieldProps) => import("react/jsx-runtime").JSX.Element;
+export declare const RenderStartDateField: ({ validationItems, setFormData, formData, formDataOrig, fieldsReadOnly, onContentReady }: RenderDateFieldProps) => import("react/jsx-runtime").JSX.Element;
+export declare const RenderEndDateField: ({ validationItems, setFormData, formData, formDataOrig, fieldsReadOnly, onContentReady }: RenderDateFieldProps) => import("react/jsx-runtime").JSX.Element;
+export declare const RenderRemindDateField: ({ validationItems, setFormData, formData, formDataOrig, fieldsReadOnly }: RenderFieldProps) => import("react/jsx-runtime").JSX.Element;
+interface RenderTaskFormStateFieldProps {
+    formDataOrig: TaskDescriptor | undefined;
+    formData: TaskDescriptor | undefined;
+    formMode: FormModes;
+    gotoPDGExtendedLabelClickCallback: () => void;
+    handleShowChangeStateForm: (value: boolean) => void;
+    onSavedCallback?: (task: TaskDescriptor) => void;
+}
+export declare const RenderTaskFormStateField: (props: RenderTaskFormStateFieldProps) => JSX.Element | null;
+interface TMChangeStateFormProps {
+    formData: TaskDescriptor;
+    formDataOrig?: TaskDescriptor;
+    handleShowChangeStateForm: (value: boolean) => void;
+    setFormData: React.Dispatch<React.SetStateAction<TaskDescriptor | undefined>>;
+}
+export declare const TMChangeStateForm: (props: TMChangeStateFormProps) => import("react/jsx-runtime").JSX.Element;
+type TaskRole = "personal" | "sender" | "receiver";
+type StatusTransitionMap = {
+    [key in Task_States]?: Task_States[];
+};
+export declare const STATUS_TRANSITIONS: Record<TaskRole, StatusTransitionMap>;
+export {};