@topconsultnpm/sdkui-react 6.20.0-dev2.45 → 6.20.0-dev2.47

package/lib/components/editors/TMTextBox.js

@@ -81,15 +81,14 @@ const TMTextBox = ({ autoFocus, maxLength, labelColor, precision, fromModal = fa
     }, [maxValue, minValue, currentValue, currentType]);
     // Handle autofocus behavior on mount
     useEffect(() => {
-        if (autoFocus && inputRef.current) {
-            if (fromModal) // utilizzato per i textBox derivanti da una Modal che non riescono a utilizzare l'autofocus
-                setTimeout(() => {
-                    inputRef.current && inputRef.current.focus(); // Focus the input field
-                }, 100);
-            else
-                inputRef.current.focus(); // Focus the input field
-        }
-    }, [autoFocus]); // This effect runs when the autoFocus prop changes
+        if (!autoFocus || !inputRef.current)
+            return;
+        const delay = fromModal ? 100 : 50;
+        const timeoutId = setTimeout(() => {
+            inputRef.current?.focus();
+        }, delay);
+        return () => clearTimeout(timeoutId);
+    }, [autoFocus, fromModal]); // This effect runs when the autoFocus or fromModal prop changes
     useEffect(() => {
         if (formulaItems && formulaItems.length > 0) {
             let menuItems = [];

package/lib/components/features/documents/TMDcmtForm.js

@@ -8,7 +8,7 @@ import { DeviceType, useDeviceType } from '../../base/TMDeviceProvider';
 import { useDcmtOperations } from '../../../hooks/useDcmtOperations';
 import { useRelatedDocuments } from '../../../hooks/useRelatedDocuments';
 import { getWorkItemSetIDAsync, handleArchiveVisibility, searchResultToMetadataValues } from '../../../helper/queryHelper';
-import { genUniqueId, IconShow, SDKUI_Localizator, updateMruTids, IconBoard, IconDcmtTypeSys, IconDetailDcmts, IconDownload, calcIsModified, IconMenuVertical, Globalization, getListMaxItems, getSystemMetadata, IconBoxArchiveIn, IconClear, IconUndo, SDKUI_Globals, IconPreview, isTaskMoreInfo, IconWorkflow, IconSearch, deepCompare, IconCheck, IconActivity, TMImageLibrary, IconStar, IconRelation, IconInfo, IconArchiveDoc, IconDelete, IconPair, IconUnpair, IconArchiveMaster, IconArchiveDetail, getExceptionMessage, isApprovalWorkflowView, getDcmtCicoStatus, IconFileDots, IconCustom, buildWorkItemsFromWFCtrl, IconLock, getDcmtFormToolbarVisibility, TASK_MORE_INFO_PREFIX_NAME, calcResponsiveSizes } from '../../../helper';
+import { genUniqueId, IconShow, SDKUI_Localizator, updateMruTids, IconBoard, IconDcmtTypeSys, IconDetailDcmts, IconDownload, calcIsModified, IconMenuVertical, Globalization, getListMaxItems, getSystemMetadata, IconBoxArchiveIn, IconClear, IconUndo, SDKUI_Globals, IconPreview, isTaskMoreInfo, IconWorkflow, IconSearch, deepCompare, IconCheck, IconActivity, TMImageLibrary, IconStar, IconRelation, IconInfo, IconArchiveDoc, IconDelete, IconPair, IconUnpair, IconArchiveMaster, IconArchiveDetail, getExceptionMessage, isApprovalWorkflowView, getDcmtCicoStatus, IconFileDots, IconCustom, buildWorkItemsFromWFCtrl, IconLock, getDcmtFormToolbarVisibility, TASK_MORE_INFO_PREFIX_NAME, taskModalSizes } from '../../../helper';
 import { hasDetailRelations, hasMasterRelations, isXMLFileExt } from '../../../helper/dcmtsHelper';
 import { Gutters, TMColors } from '../../../utils/theme';
 import { ReferencesContainer, StyledFormButtonsContainer, StyledLoadingContainer, StyledModalContainer, StyledReferenceButton, StyledSpinner, StyledToolbarCardContainer } from '../../base/Styled';
@@ -87,6 +87,8 @@ const TMDcmtForm = ({ allTasks = [], getAllTasks, deleteTaskByIdsCallback, addTa
     const [showRejectPopup, setShowRejectPopup] = useState(false);
     const [showReAssignPopup, setShowReAssignPopup] = useState(false);
     const [showMoreInfoPopup, setShowMoreInfoPopup] = useState(false);
+    const [showMoreInfoTaskPopup, setShowMoreInfoTaskPopup] = useState(false);
+    const [showMoreInfoTaskTask, setShowMoreInfoTaskTask] = useState(undefined);
     const [layout, setLayout] = useState();
     const [customButtonsLayout, setCustomButtonsLayout] = useState();
     const [customButton, setCustomButton] = useState();
@@ -1589,6 +1591,17 @@ const TMDcmtForm = ({ allTasks = [], getAllTasks, deleteTaskByIdsCallback, addTa
         [ObjectClasses.WorkingGroup]: { label: SDKUI_Localizator.GoToWorkgroup },
         // add other ObjectClasses here as needed
     }), []);
+    const onSavedTaskFormCallback = (task) => {
+        if (task && showMoreInfoTaskTask && editTaskCallback) {
+            editTaskCallback(task);
+            setShowMoreInfoTaskPopup(false);
+            setShowMoreInfoTaskTask(undefined);
+            ShowAlert({ message: SDKUI_Localizator.TaskSavedSuccessfully.replaceParams(task.name ?? '-'), mode: 'success', title: SDKUI_Localizator.Widget_Activities, duration: 3000 });
+        }
+        else {
+            ShowAlert({ message: SDKUI_Localizator.TaskSaveError, mode: 'error', title: SDKUI_Localizator.Widget_Activities, duration: 3000 });
+        }
+    };
     const renderDcmtForm = () => {
         // Show flat spinner during initial load (before component is mounted)
         if (isInitialLoading) {
@@ -1619,14 +1632,14 @@ const TMDcmtForm = ({ allTasks = [], getAllTasks, deleteTaskByIdsCallback, addTa
                                                     isEditable: true,
                                                     value: FormulaHelper.addFormulaTag(newFormula.expression)
                                                 }));
-                                            } }), showApprovePopup && _jsx(WorkFlowApproveRejectPopUp, { deviceType: deviceType, onCompleted: handleWFOperationCompleted, TID: approvalVID, DID: DID, isReject: 0, onClose: () => setShowApprovePopup(false) }), showRejectPopup && _jsx(WorkFlowApproveRejectPopUp, { deviceType: deviceType, onCompleted: handleWFOperationCompleted, TID: approvalVID, DID: DID, isReject: 1, onClose: () => setShowRejectPopup(false) }), showReAssignPopup && _jsx(WorkFlowReAssignPopUp, { deviceType: deviceType, onCompleted: handleWFOperationCompleted, TID: approvalVID, DID: DID, onClose: () => setShowReAssignPopup(false) }), showMoreInfoPopup && _jsx(WorkFlowMoreInfoPopUp, { deviceType: deviceType, onCompleted: handleWFOperationCompleted, TID: approvalVID, DID: DID, onClose: () => setShowMoreInfoPopup(false), getAllTasks: getAllTasks }), (isModal && onClose) && _jsx("div", { id: "TMDcmtFormShowConfirmForClose-" + id })] }) }), _jsx(TMToppyDraggableHelpCenter, { isVisible: isToppyVisible, content: _jsx(TMDcmtFormActionButtons, { showToppyForApprove: showToppyForApprove, workItems: workItems, deviceType: deviceType, isMobile: isMobile, handleSignApprove: handleSignApprove, setShowApprovePopup: setShowApprovePopup, setShowRejectPopup: setShowRejectPopup, setShowReAssignPopup: setShowReAssignPopup, setShowMoreInfoPopup: setShowMoreInfoPopup, fromDTD: fromDTD, showToppyForCompleteMoreInfo: showToppyForCompleteMoreInfo, moreInfoTasks: moreInfoTasks, setShowCommentForm: setShowCommentForm, showToppyForReferences: showToppyForReferences, dcmtReferences: dcmtReferences, referenceActionMap: referenceActionMap, handleNavigateToReference: handleNavigateToReference, allTasks: allTasks, getAllTasks: getAllTasks, deleteTaskByIdsCallback: deleteTaskByIdsCallback, addTaskCallback: addTaskCallback, editTaskCallback: editTaskCallback, handleNavigateToWGs: handleNavigateToWGs, handleNavigateToDossiers: handleNavigateToDossiers }) })] }), (showCommentForm && TID && DID) &&
+                                            } }), showApprovePopup && _jsx(WorkFlowApproveRejectPopUp, { deviceType: deviceType, onCompleted: handleWFOperationCompleted, TID: approvalVID, DID: DID, isReject: 0, onClose: () => setShowApprovePopup(false) }), showRejectPopup && _jsx(WorkFlowApproveRejectPopUp, { deviceType: deviceType, onCompleted: handleWFOperationCompleted, TID: approvalVID, DID: DID, isReject: 1, onClose: () => setShowRejectPopup(false) }), showReAssignPopup && _jsx(WorkFlowReAssignPopUp, { deviceType: deviceType, onCompleted: handleWFOperationCompleted, TID: approvalVID, DID: DID, onClose: () => setShowReAssignPopup(false) }), showMoreInfoPopup && _jsx(WorkFlowMoreInfoPopUp, { deviceType: deviceType, onCompleted: handleWFOperationCompleted, TID: approvalVID, DID: DID, onClose: () => setShowMoreInfoPopup(false), getAllTasks: getAllTasks }), (isModal && onClose) && _jsx("div", { id: "TMDcmtFormShowConfirmForClose-" + id })] }) }), _jsx(TMToppyDraggableHelpCenter, { isVisible: isToppyVisible, content: _jsx(TMDcmtFormActionButtons, { showToppyForApprove: showToppyForApprove, workItems: workItems, deviceType: deviceType, isMobile: isMobile, handleSignApprove: handleSignApprove, setShowApprovePopup: setShowApprovePopup, setShowRejectPopup: setShowRejectPopup, setShowReAssignPopup: setShowReAssignPopup, setShowMoreInfoPopup: setShowMoreInfoPopup, fromDTD: fromDTD, showToppyForCompleteMoreInfo: showToppyForCompleteMoreInfo, moreInfoTasks: moreInfoTasks, setShowCommentForm: setShowCommentForm, showToppyForReferences: showToppyForReferences, dcmtReferences: dcmtReferences, referenceActionMap: referenceActionMap, handleNavigateToReference: handleNavigateToReference, setShowMoreInfoTaskPopup: setShowMoreInfoTaskPopup, setShowMoreInfoTaskTask: setShowMoreInfoTaskTask }) })] }), (showCommentForm && TID && DID) &&
                     _jsx(TMBlogCommentForm, { context: { engine: 'SearchEngine', object: { tid: TID, did: DID } }, onClose: () => setShowCommentForm(false), refreshCallback: handleCompleteMoreInfo, participants: [], showAttachmentsSection: false, allArchivedDocumentsFileItems: [] }), isOpenDetails &&
                     _jsx(StyledModalContainer, { children: _jsx(TMMasterDetailDcmts, { deviceType: deviceType, isForMaster: false, inputDcmts: getSelectionDcmtInfo(), allowNavigation: allowNavigation, canNext: canNext, canPrev: canPrev, onNext: onNext, onPrev: onPrev, onBack: () => setIsOpenDetails(false), allTasks: allTasks, getAllTasks: getAllTasks, deleteTaskByIdsCallback: deleteTaskByIdsCallback, addTaskCallback: addTaskCallback, editTaskCallback: editTaskCallback, handleNavigateToWGs: handleNavigateToWGs, handleNavigateToDossiers: handleNavigateToDossiers }) }), isOpenMaster &&
                     _jsxs(StyledModalContainer, { children: [_jsx(TMMasterDetailDcmts, { deviceType: deviceType, inputDcmts: getSelectionDcmtInfo(), isForMaster: true, allowNavigation: allowNavigation, canNext: canNext, canPrev: canPrev, onNext: onNext, onPrev: onPrev, onBack: () => setIsOpenMaster(false), appendMasterDcmts: handleAddItem, allTasks: allTasks, getAllTasks: getAllTasks, deleteTaskByIdsCallback: deleteTaskByIdsCallback, addTaskCallback: addTaskCallback, editTaskCallback: editTaskCallback, handleNavigateToWGs: handleNavigateToWGs, handleNavigateToDossiers: handleNavigateToDossiers }), secondaryMasterDcmts.length > 0 && secondaryMasterDcmts.map((dcmt, index) => {
                                 return (_jsx(StyledModalContainer, { children: _jsx(TMMasterDetailDcmts, { deviceType: deviceType, inputDcmts: [dcmt], isForMaster: true, allowNavigation: false, onBack: () => handleRemoveItem(dcmt.TID, dcmt.DID), appendMasterDcmts: handleAddItem, allTasks: allTasks, getAllTasks: getAllTasks, deleteTaskByIdsCallback: deleteTaskByIdsCallback, addTaskCallback: addTaskCallback, editTaskCallback: editTaskCallback, handleNavigateToWGs: handleNavigateToWGs, handleNavigateToDossiers: handleNavigateToDossiers }) }, `${index}-${dcmt.DID}`));
                             })] }), taskFormDialogComponent, s4TViewerDialogComponent] }));
     };
-    return (_jsxs(_Fragment, { children: [(isModal && onClose)
+    return (_jsxs("div", { style: { width: '100%', height: '100%' }, children: [(isModal && onClose)
                 ? _jsx(TMModal, { title: titleModal, onClose: handleClose, width: widthModal ?? '100%', height: heightModal ?? '100%', hidePopup: false, askClosingConfirm: true, children: _jsx("div", { style: { width: "100%", height: "100%", display: 'block', padding: "4px", position: 'relative' }, children: renderDcmtForm() }) })
                 : renderDcmtForm(), showRelatedDcmtsChooser && (_jsx(TMChooserForm, { dataSource: relatedDcmtsChooserDataSource, onChoose: async (selectedRelation) => {
                     try {
@@ -1670,7 +1683,7 @@ const TMDcmtForm = ({ allTasks = [], getAllTasks, deleteTaskByIdsCallback, addTa
                     setArchiveRelatedDcmtFormTID(undefined);
                     setArchiveRelatedDcmtFormMids([]);
                     await fetchData();
-                }, allTasks: allTasks, getAllTasks: getAllTasks, deleteTaskByIdsCallback: deleteTaskByIdsCallback, addTaskCallback: addTaskCallback, editTaskCallback: editTaskCallback, handleNavigateToWGs: handleNavigateToWGs, handleNavigateToDossiers: handleNavigateToDossiers, onReferenceClick: handleNavigateToReference })), showPairDcmtsModal && (_jsx(TMModal, { title: (isPairingManyToMany ? "Abbina" : "Disabbina") + " documenti", onClose: () => setShowPairDcmtsModal(false), width: isMobile ? '90%' : '50%', height: isMobile ? '90%' : '70%', children: _jsx(TMSearchResult, { searchResults: pairedSearchResults, onRefreshSearchAsync: async () => await fetchData(), onTaskCreateRequest: onTaskCreateRequest, allowFloatingBar: false, floatingActionConfig: pairFloatingActionConfig, showBackButton: false, allTasks: allTasks, getAllTasks: getAllTasks, deleteTaskByIdsCallback: deleteTaskByIdsCallback, addTaskCallback: addTaskCallback, editTaskCallback: editTaskCallback, handleNavigateToWGs: handleNavigateToWGs, handleNavigateToDossiers: handleNavigateToDossiers, toppyHelpCenterUsePortal: true }) }))] }));
+                }, allTasks: allTasks, getAllTasks: getAllTasks, deleteTaskByIdsCallback: deleteTaskByIdsCallback, addTaskCallback: addTaskCallback, editTaskCallback: editTaskCallback, handleNavigateToWGs: handleNavigateToWGs, handleNavigateToDossiers: handleNavigateToDossiers, onReferenceClick: handleNavigateToReference })), showPairDcmtsModal && (_jsx(TMModal, { title: (isPairingManyToMany ? "Abbina" : "Disabbina") + " documenti", onClose: () => setShowPairDcmtsModal(false), width: isMobile ? '90%' : '50%', height: isMobile ? '90%' : '70%', children: _jsx(TMSearchResult, { searchResults: pairedSearchResults, onRefreshSearchAsync: async () => await fetchData(), onTaskCreateRequest: onTaskCreateRequest, allowFloatingBar: false, floatingActionConfig: pairFloatingActionConfig, showBackButton: false, allTasks: allTasks, getAllTasks: getAllTasks, deleteTaskByIdsCallback: deleteTaskByIdsCallback, addTaskCallback: addTaskCallback, editTaskCallback: editTaskCallback, handleNavigateToWGs: handleNavigateToWGs, handleNavigateToDossiers: handleNavigateToDossiers, toppyHelpCenterUsePortal: true }) })), (showMoreInfoTaskPopup && showMoreInfoTaskTask && showMoreInfoTaskTask.id && handleNavigateToWGs && handleNavigateToDossiers && getAllTasks && deleteTaskByIdsCallback && addTaskCallback && editTaskCallback) && _jsx(TMTaskForm, { id: Number(showMoreInfoTaskTask.id), title: showMoreInfoTaskTask.name ?? 'N/A', formMode: FormModes.Update, onSaved: onSavedTaskFormCallback, editTaskCallback: editTaskCallback, onClose: () => { setShowMoreInfoTaskPopup(false); setShowMoreInfoTaskTask(undefined); }, onCancel: () => { setShowMoreInfoTaskPopup(false); setShowMoreInfoTaskTask(undefined); }, isModal: true, showBackButton: false, hasNavigation: false, width: taskModalSizes(deviceType, FormModes.Update).width, height: taskModalSizes(deviceType, FormModes.Update).height, handleNavigateToWGs: handleNavigateToWGs, handleNavigateToDossiers: handleNavigateToDossiers, visualizedTasks: [], currentTask: null, setCurrentTask: () => { }, selectedRowKeys: [], handleFocusedRowKeyChange: () => { }, onStatusChanged: () => { }, allTasks: allTasks, getAllTasks: getAllTasks, deleteTaskByIdsCallback: deleteTaskByIdsCallback, addTaskCallback: addTaskCallback })] }));
 };
 export default TMDcmtForm;
 /**
@@ -1784,7 +1797,7 @@ const Ribbon = styled.div `
     `}
 `;
 const TaskLink = (props) => {
-    const { deviceType, taskId, messagePrefix, name, taskNameTrunc, description, allTasks = [], getAllTasks, deleteTaskByIdsCallback, addTaskCallback, editTaskCallback, handleNavigateToWGs, handleNavigateToDossiers } = props;
+    const { messagePrefix, name, taskNameTrunc, description, currentTask, setShowMoreInfoTaskPopup, setShowMoreInfoTaskTask } = props;
     const mouseMoved = useRef(false);
     const handleMouseDown = () => {
         mouseMoved.current = false;
@@ -1792,28 +1805,21 @@ const TaskLink = (props) => {
     const handleMouseMove = () => {
         mouseMoved.current = true;
     };
-    // Stato per gestire la visualizzazione del form di modifica attività
-    const [showTaskForm, setShowTaskForm] = useState(false);
-    const onSavedTaskFormCallback = (task) => {
-        if (task && taskId && editTaskCallback) {
-            editTaskCallback(task);
-            setShowTaskForm(false);
-            ShowAlert({ message: SDKUI_Localizator.TaskSavedSuccessfully.replaceParams(task.name ?? '-'), mode: 'success', title: SDKUI_Localizator.Widget_Activities, duration: 3000 });
-        }
-        else {
-            ShowAlert({ message: SDKUI_Localizator.TaskSaveError, mode: 'error', title: SDKUI_Localizator.Widget_Activities, duration: 3000 });
-        }
-    };
-    return (_jsxs(_Fragment, { children: [_jsx("div", { style: { display: 'inline-flex', alignItems: 'center', gap: '4px' }, children: _jsxs("div", { onMouseDown: handleMouseDown, onMouseMove: handleMouseMove, style: { display: 'inline' }, children: [messagePrefix, ' "', _jsx("span", { style: {
-                                cursor: 'pointer',
-                                fontWeight: 500,
-                                textDecoration: 'none',
-                                transition: 'text-decoration 0.2s',
-                            }, onClick: () => setShowTaskForm(true), onMouseEnter: e => e.currentTarget.style.textDecoration = 'underline', onMouseLeave: e => e.currentTarget.style.textDecoration = 'none', children: taskNameTrunc }), '" ', _jsx(TMTooltip, { parentStyle: { display: 'inline' }, childStyle: { display: 'inline' }, content: _jsxs("div", { style: { whiteSpace: 'pre-line', textAlign: 'left' }, children: [_jsxs("div", { children: [_jsx("b", { children: SDKUI_Localizator.Name }), ": ", name] }), _jsxs("div", { children: [_jsx("b", { children: SDKUI_Localizator.Description }), ": ", description] })] }), children: _jsx("i", { className: "dx-icon dx-icon-info", style: { fontSize: '16px', lineHeight: 1, cursor: 'pointer' }, onClick: () => setShowTaskForm(true) }) })] }) }), (showTaskForm && taskId && handleNavigateToWGs && handleNavigateToDossiers && getAllTasks && deleteTaskByIdsCallback && addTaskCallback && editTaskCallback) &&
-                _jsx("div", { style: { position: 'fixed', inset: 0, pointerEvents: 'none' }, children: _jsx(TMTaskForm, { id: Number(taskId), title: name, formMode: FormModes.Update, onSaved: onSavedTaskFormCallback, editTaskCallback: editTaskCallback, onClose: () => { setShowTaskForm(false); }, onCancel: () => setShowTaskForm(false), isModal: true, showBackButton: false, hasNavigation: false, width: calcResponsiveSizes(deviceType, '670px', '670px', '95%'), height: calcResponsiveSizes(deviceType, '670px', '670px', '95%'), handleNavigateToWGs: handleNavigateToWGs, handleNavigateToDossiers: handleNavigateToDossiers, visualizedTasks: [], currentTask: null, setCurrentTask: () => { }, selectedRowKeys: [], handleFocusedRowKeyChange: () => { }, onStatusChanged: () => { }, allTasks: allTasks, getAllTasks: getAllTasks, deleteTaskByIdsCallback: deleteTaskByIdsCallback, addTaskCallback: addTaskCallback }) })] }));
+    return (_jsx(_Fragment, { children: _jsx("div", { style: { display: 'inline-flex', alignItems: 'center', gap: '4px' }, children: _jsxs("div", { onMouseDown: handleMouseDown, onMouseMove: handleMouseMove, style: { display: 'inline' }, children: [messagePrefix, ' "', _jsx("span", { style: {
+                            cursor: 'pointer',
+                            fontWeight: 500,
+                            textDecoration: 'none',
+                            transition: 'text-decoration 0.2s',
+                        }, onClick: () => {
+                            setShowMoreInfoTaskPopup(true);
+                            setShowMoreInfoTaskTask(currentTask);
+                        }, onMouseEnter: e => e.currentTarget.style.textDecoration = 'underline', onMouseLeave: e => e.currentTarget.style.textDecoration = 'none', children: taskNameTrunc }), '" ', _jsx(TMTooltip, { parentStyle: { display: 'inline' }, childStyle: { display: 'inline' }, content: _jsxs("div", { style: { whiteSpace: 'pre-line', textAlign: 'left' }, children: [_jsxs("div", { children: [_jsx("b", { children: SDKUI_Localizator.Name }), ": ", name] }), _jsxs("div", { children: [_jsx("b", { children: SDKUI_Localizator.Description }), ": ", description] })] }), children: _jsx("i", { className: "dx-icon dx-icon-info", onClick: () => {
+                                setShowMoreInfoTaskPopup(true);
+                                setShowMoreInfoTaskTask(currentTask);
+                            }, style: { fontSize: '16px', lineHeight: 1, cursor: 'pointer' } }) })] }) }) }));
 };
 const TMDcmtFormActionButtons = (props) => {
-    const { showToppyForApprove, workItems, deviceType, isMobile, handleSignApprove, setShowApprovePopup, setShowRejectPopup, setShowReAssignPopup, setShowMoreInfoPopup, fromDTD, showToppyForCompleteMoreInfo, moreInfoTasks, setShowCommentForm, showToppyForReferences, dcmtReferences, referenceActionMap, handleNavigateToReference, allTasks = [], getAllTasks, deleteTaskByIdsCallback, addTaskCallback, editTaskCallback, handleNavigateToWGs, handleNavigateToDossiers, } = props;
+    const { showToppyForApprove, workItems, deviceType, isMobile, handleSignApprove, setShowApprovePopup, setShowRejectPopup, setShowReAssignPopup, setShowMoreInfoPopup, fromDTD, showToppyForCompleteMoreInfo, moreInfoTasks, setShowCommentForm, showToppyForReferences, dcmtReferences, referenceActionMap, handleNavigateToReference, setShowMoreInfoTaskPopup, setShowMoreInfoTaskTask } = props;
     const tasksNumber = useMemo(() => moreInfoTasks?.length ?? 0, [moreInfoTasks]);
     const currentTask = useMemo(() => {
         if (!moreInfoTasks || moreInfoTasks.length === 0)
@@ -1859,12 +1865,12 @@ const TMDcmtFormActionButtons = (props) => {
                         const senderNameTruncated = currentTask?.fromName ? truncate(currentTask.fromName, 30) : 'N/A';
                         const recipientNameTruncated = currentTask?.toName ? truncate(currentTask.toName, 30) : 'N/A';
                         const taskNameTrunc = currentTask?.name ? truncate(currentTask.name.replace(TASK_MORE_INFO_PREFIX_NAME ?? '', ''), 30) : 'N/A';
-                        return (_jsxs(_Fragment, { children: [(isSender && !isRecipient) && (_jsx(TaskLink, { taskId: currentTask.id, messagePrefix: `Hai richiesto maggiori informazioni a "${recipientNameTruncated}" tramite l'attività`, name: currentTask.name ?? 'N/A', taskNameTrunc: taskNameTrunc ?? 'N/A', description: currentTask.description ?? 'N/A', allTasks: allTasks, getAllTasks: getAllTasks, deleteTaskByIdsCallback: deleteTaskByIdsCallback, addTaskCallback: addTaskCallback, editTaskCallback: editTaskCallback, handleNavigateToWGs: handleNavigateToWGs, handleNavigateToDossiers: handleNavigateToDossiers, deviceType: deviceType })), (isRecipient && !isSender) && (_jsxs("div", { style: {
+                        return (_jsxs(_Fragment, { children: [(isSender && !isRecipient) && (_jsx(TaskLink, { messagePrefix: `Hai richiesto maggiori informazioni a "${recipientNameTruncated}" tramite l'attività`, name: currentTask.name ?? 'N/A', taskNameTrunc: taskNameTrunc ?? 'N/A', description: currentTask.description ?? 'N/A', currentTask: currentTask, setShowMoreInfoTaskPopup: setShowMoreInfoTaskPopup, setShowMoreInfoTaskTask: setShowMoreInfoTaskTask })), (isRecipient && !isSender) && (_jsxs("div", { style: {
                                         display: 'flex',
                                         flexDirection: 'column',
                                         alignItems: 'center',
                                         gap: '10px'
-                                    }, children: [_jsx(TaskLink, { taskId: currentTask.id, messagePrefix: `"${senderNameTruncated}" ti ha richiesto maggiori informazioni tramite l'attività`, name: currentTask.name ?? 'N/A', taskNameTrunc: taskNameTrunc ?? 'N/A', description: currentTask.description ?? 'N/A', allTasks: allTasks, getAllTasks: getAllTasks, deleteTaskByIdsCallback: deleteTaskByIdsCallback, addTaskCallback: addTaskCallback, editTaskCallback: editTaskCallback, handleNavigateToWGs: handleNavigateToWGs, handleNavigateToDossiers: handleNavigateToDossiers, deviceType: deviceType }), _jsx(TMButton, { btnStyle: isMobile ? 'toolbar' : 'advanced', showTooltip: isMobile, icon: _jsx("span", { className: "dx-icon-chat" }), caption: SDKUI_Localizator.CommentAndComplete, width: "180px", disabled: false, onClick: () => setShowCommentForm(true), onMouseDown: e => e.stopPropagation(), advancedColor: TMColors.success, color: "success" })] }))] }));
+                                    }, children: [_jsx(TaskLink, { messagePrefix: `"${senderNameTruncated}" ti ha richiesto maggiori informazioni tramite l'attività`, name: currentTask.name ?? 'N/A', taskNameTrunc: taskNameTrunc ?? 'N/A', description: currentTask.description ?? 'N/A', currentTask: currentTask, setShowMoreInfoTaskPopup: setShowMoreInfoTaskPopup, setShowMoreInfoTaskTask: setShowMoreInfoTaskTask }), _jsx(TMButton, { btnStyle: isMobile ? 'toolbar' : 'advanced', showTooltip: isMobile, icon: _jsx("span", { className: "dx-icon-chat" }), caption: SDKUI_Localizator.CommentAndComplete, width: "180px", disabled: false, onClick: () => setShowCommentForm(true), onMouseDown: e => e.stopPropagation(), advancedColor: TMColors.success, color: "success" })] }))] }));
                     })() }) })) : (_jsx("div", { style: {
                     padding: '10px',
                     color: '#FFFFFF',

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

@@ -1,64 +1,19 @@
 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 { 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, getMoreInfoTasksForDocument } 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, TaskFormResponseComment, TaskPdgOriginNavigator, TMChangeStateForm } from './TMTaskFormUtils';
 const TMTaskForm = (props) => {
     // Custom hook to manage workflow approval data
     const { refreshWorkflowApprove } = useWorkflowApprove();
@@ -109,10 +64,9 @@ const TMTaskForm = (props) => {
     // 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);
+    let isMobile = useMemo(() => { return deviceType === DeviceType.MOBILE; }, [deviceType]);
     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 +98,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 +133,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 +248,9 @@ const TMTaskForm = (props) => {
         await editTaskCallback(task);
         onClose?.();
     };
+    const handleShowChangeStateForm = (value) => {
+        setShowChangeStateForm(value);
+    };
     const handleNavigateToReference = (ref) => {
         switch (ref.objClass) {
             case ObjectClasses.Dossier:
@@ -349,94 +270,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, 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: 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 })] }) }) }));
+                                                    } }), _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, handleShowChangeStateForm: handleShowChangeStateForm, onSavedCallback: onSaved }), _jsx(TaskFormResponseComment, { originalResponse: formDataOrig?.response, currentResponse: formData?.response, readonly: true }), _jsx(TaskPdgOriginNavigator, { formMode: formMode, formData: formDataOrig, isMobile: isMobile, gotoPDGExtendedLabelClickCallback: gotoPDGExtendedLabelClickCallback })] })] }) }) }), 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,86 @@
+import React, { ChangeEvent } 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 TaskPdgOriginNavigatorProps {
+    formMode: FormModes;
+    formData: TaskDescriptor | undefined;
+    isMobile: boolean;
+    gotoPDGExtendedLabelClickCallback: () => void;
+}
+export declare const TaskPdgOriginNavigator: (props: TaskPdgOriginNavigatorProps) => false | "" | import("react/jsx-runtime").JSX.Element | undefined;
+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 TaskFormResponseCommentProps {
+    originalResponse?: string;
+    currentResponse?: string;
+    readonly?: boolean;
+    onAnswerChange?: (e: ChangeEvent<HTMLTextAreaElement>) => void;
+}
+export declare const TaskFormResponseComment: (props: TaskFormResponseCommentProps) => 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;
+    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 {};