@topconsultnpm/sdkui-react 6.20.0-dev2.6 → 6.20.0-dev2.60

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

@@ -0,0 +1,559 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+import { PdGs, Priorities, SDK_Globals, Task_States } from "@topconsultnpm/sdk-ts";
+import { FormModes } from "../../../ts";
+import { calcResponsiveSizes, DateDisplayTypes, getPdgsIconMap, IconSave, PDGS_COLORS, SDKUI_Localizator, TASK_MORE_INFO_PREFIX_NAME } from "../../../helper";
+import { areDifferentIDs, formatDate, getOriginLabel, getPriorityLocalizatorValue, getPriorityLocalizatorValues, getStatusLocalizatorValue } from "./TMTasksUtils";
+import TMTooltip from "../../base/TMTooltip";
+import TMTextBox from "../../editors/TMTextBox";
+import TMUserChooser from "../../choosers/TMUserChooser";
+import styled from "styled-components";
+import { TMColors } from "../../../utils/theme";
+import TMTextArea from "../../editors/TMTextArea";
+import TMDropDown from "../../editors/TMDropDown";
+import TMDateBox from "../../editors/TMDateBox";
+import { DeviceType, useDeviceType } from "../../base/TMDeviceProvider";
+import TMModal from "../../base/TMModal";
+import TMButton from "../../base/TMButton";
+import { ButtonNames, TMExceptionBoxManager, TMMessageBoxManager } from "../../base/TMPopUp";
+import TMSpinner from "../../base/TMSpinner";
+import { taskStateIconMap } from "./TMTasksUtilsView";
+import TMHtmlContentDisplay from "../../editors/TMHtmlContentDisplay";
+export const getCurrentUserTaskRole = (task) => {
+    if (!task)
+        return "personal";
+    // ID dell'utente a cui il task è assegnato
+    const taskToId = task.toID;
+    // ID dell'utente che ha creato/assegnato il task
+    const taskFromId = task.fromID;
+    // ID dell'utente attualmente loggato nella sessione
+    const userSessionId = SDK_Globals.tmSession?.SessionDescr?.userID;
+    // TRUE se il task è stato assegnato da un utente diverso da quello corrente
+    const isAssignedByOtherUser = areDifferentIDs(taskFromId, userSessionId);
+    // TRUE se il task è assegnato a un utente diverso da quello corrente
+    const isAssignedToOtherUser = areDifferentIDs(taskToId, userSessionId);
+    // Caso 1: Task personale: non è un work item, è stato creato da me, è assegnato a me
+    if (!isAssignedByOtherUser && !isAssignedToOtherUser) {
+        return "personal";
+    }
+    else if (!isAssignedByOtherUser && isAssignedToOtherUser) {
+        // Caso 2: Task che ho assegnato a un altro utente: creato da me, assegnato a un altro utente
+        return "sender";
+    }
+    else if (isAssignedByOtherUser) {
+        // Caso 3: il task è stato creato da un altro utente
+        return "receiver";
+    }
+    else {
+        // Default case, consider it as personal task
+        return "personal";
+    }
+};
+export const TaskFormAssignmentNoticeBadge = (props) => {
+    const { task, users, requestMoreInfo = false } = props;
+    const taskRole = useMemo(() => getCurrentUserTaskRole(task), [task?.toID, task?.fromID, SDK_Globals.tmSession?.SessionDescr?.userID]);
+    const getMessage = () => {
+        const assigneeName = users.find(user => user.id === task.toID)?.name;
+        if (requestMoreInfo)
+            return assigneeName ? SDKUI_Localizator.MoreInfoRequestedTo.replaceParams(assigneeName) : SDKUI_Localizator.MoreInfoRequested;
+        if (taskRole === "personal")
+            return SDKUI_Localizator.PersonalTaskAssignmentMessage;
+        if (taskRole === "receiver")
+            return SDKUI_Localizator.TaskAssignedMessage.replaceParams(task.fromName ?? '');
+        if (taskRole === "sender")
+            return SDKUI_Localizator.TaskAssignedToUserMessage.replaceParams(assigneeName);
+        return null;
+    };
+    const message = getMessage();
+    if (!message)
+        return null;
+    return (_jsxs("div", { style: {
+            display: 'flex',
+            justifyContent: 'flex-end',
+            alignItems: 'center',
+            gap: 6,
+            width: '100%',
+        }, children: [_jsx("i", { className: "dx-icon-info", style: {
+                    fontSize: 15,
+                    color: taskRole === "receiver" ? '#A66300' : '#2559A5',
+                    display: 'flex',
+                    alignItems: 'center'
+                } }), _jsx("span", { style: {
+                    fontSize: 13,
+                    color: taskRole === "receiver" ? '#A66300' : '#2559A5',
+                    lineHeight: 1
+                }, children: message })] }));
+};
+export const RenderAttachmentBlock = ({ condition, pdg, label }) => {
+    if (!condition || !label)
+        return null;
+    return (_jsxs("span", { style: { display: 'inline-flex', alignItems: 'center', gap: 4 }, children: [SDKUI_Localizator.Attachment, ": ", _jsx("span", { style: { flexShrink: 0 }, children: getPdgsIconMap().get(pdg) }), " ", label] }));
+};
+export const TaskFormContextualAttachments = (props) => {
+    const { currentTask, taskContext } = props;
+    const getAttachmentInfo = useCallback(() => {
+        let hasWorkingGroup = false;
+        let workingGroupName;
+        let hasDossier = false;
+        let dossierName;
+        let hasDocument = false;
+        let documentName;
+        let hasWorkItem = false;
+        let workItemName;
+        if (taskContext) {
+            hasWorkingGroup = !!taskContext?.workingGroup?.id;
+            workingGroupName = taskContext?.workingGroup?.name;
+            hasDossier = !!taskContext?.dossier?.id;
+            dossierName = taskContext?.dossier?.name;
+            hasDocument = !!taskContext?.document?.tid && !!taskContext?.document?.did;
+            documentName = taskContext?.document?.name;
+            hasWorkItem = !!taskContext?.workItem?.tid && !!taskContext?.workItem?.did;
+            workItemName = taskContext?.workItem?.name;
+        }
+        else if (currentTask) {
+            switch (currentTask.pdG) {
+                case PdGs.WG:
+                    hasWorkingGroup = true;
+                    workingGroupName = currentTask.iD1Name;
+                    break;
+                case PdGs.CF:
+                    hasDossier = true;
+                    dossierName = currentTask.iD1Name;
+                    break;
+                case PdGs.DT:
+                    hasDocument = true;
+                    documentName = currentTask.iD1Name;
+                    break;
+            }
+        }
+        const hasAnyAttachment = hasWorkingGroup || hasDossier || hasDocument || hasWorkItem;
+        return { hasWorkingGroup, workingGroupName, hasDossier, dossierName, hasDocument, documentName, hasWorkItem, workItemName, hasAnyAttachment };
+    }, [currentTask, taskContext]);
+    const { hasWorkingGroup, workingGroupName, hasDossier, dossierName, hasDocument, documentName, hasWorkItem, workItemName, hasAnyAttachment } = useMemo(() => getAttachmentInfo(), [getAttachmentInfo]);
+    return (_jsx("div", { style: { width: '100%', marginTop: 15, marginLeft: 5 }, children: !hasAnyAttachment ? (_jsxs("span", { children: [SDKUI_Localizator.Attachment, ":", " ", _jsx("span", { style: { color: "#6c757d", fontStyle: "italic" }, children: "Nessun allegato" })] })) : (_jsxs(_Fragment, { children: [_jsx(RenderAttachmentBlock, { condition: hasWorkingGroup, pdg: PdGs.WG, label: `${SDKUI_Localizator.WorkGroup} "${getOriginLabel(PdGs.WG, workingGroupName)}"` }), _jsx(RenderAttachmentBlock, { condition: hasDossier, pdg: PdGs.CF, label: `${SDKUI_Localizator.Dossier} "${getOriginLabel(PdGs.CF, dossierName)}"` }), _jsx(RenderAttachmentBlock, { condition: hasDocument, pdg: PdGs.DT, label: `${SDKUI_Localizator.Document} "${getOriginLabel(PdGs.DT, documentName)}"` }), _jsx(RenderAttachmentBlock, { condition: hasWorkItem, pdg: PdGs.DT, label: `${SDKUI_Localizator.Document} "${getOriginLabel(PdGs.DT, workItemName)}"` })] })) }));
+};
+const TaskPdgOriginNavigator = (props) => {
+    const { formMode, formData, isMobile, gotoPDGExtendedLabelClickCallback } = props;
+    let backgroundColor;
+    let backgroundHoverColor;
+    switch (formData?.pdG) {
+        case PdGs.WG:
+            backgroundColor = PDGS_COLORS.WORKING_GROUP;
+            backgroundHoverColor = "#007300";
+            break;
+        case PdGs.CF:
+            backgroundColor = PDGS_COLORS.DOSSIER;
+            backgroundHoverColor = "#b94700";
+            break;
+        case PdGs.DT:
+            backgroundColor = PDGS_COLORS.DOCUMENT;
+            backgroundHoverColor = "#8c6700";
+            break;
+        default:
+            backgroundColor = "#C2388B";
+            backgroundHoverColor = "#A12D78";
+            break;
+    }
+    return formMode === FormModes.Update && formData?.pdG && formData?.iD1Name && (_jsx("div", { style: { display: 'flex', flexDirection: 'row', width: '100%', gap: 16, padding: '8px 0' }, children: _jsx("div", { style: { width: "100%", display: 'flex', alignItems: 'center', justifyContent: 'center' }, children: _jsxs("div", { onClick: () => formData.pdG !== PdGs.None ? gotoPDGExtendedLabelClickCallback() : null, style: {
+                    backgroundColor: backgroundColor,
+                    color: "#fff",
+                    padding: "10px 16px",
+                    borderRadius: "20px",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "space-between",
+                    cursor: "pointer",
+                    fontWeight: 600,
+                    transition: 'background-color 0.3s, transform 0.2s',
+                    minWidth: "180px",
+                    maxWidth: "100%",
+                    flexWrap: "wrap",
+                    gap: "8px",
+                }, onMouseEnter: e => {
+                    if (formData.pdG !== PdGs.None)
+                        e.currentTarget.style.backgroundColor = backgroundHoverColor;
+                    e.currentTarget.style.transform = 'scale(1.05)';
+                }, onMouseLeave: e => {
+                    if (formData.pdG !== PdGs.None)
+                        e.currentTarget.style.backgroundColor = backgroundColor;
+                    e.currentTarget.style.transform = 'scale(1)';
+                }, 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 = isMobile ? 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 } }) })] }) }) }));
+};
+export const TaskAssigneeField = (props) => {
+    const { formMode, formData, taskContext, validationItems, fieldsReadOnly, formDataOrig, usersList, label = SDKUI_Localizator.AssignedTo_Female, onValueChanged, } = props;
+    const { isCreateMode, isUpdateMode, isAssignedByOtherUser, isAssignedToOtherUser } = useMemo(() => {
+        const isCreateMode = formMode === FormModes.Create;
+        const isUpdateMode = formMode === FormModes.Update;
+        const taskToId = formData?.toID;
+        const taskFromId = formData?.fromID;
+        const userSessionId = SDK_Globals.tmSession?.SessionDescr?.userID;
+        // Vero se il task è stato creato da un altro utente
+        // taskFromId = ID dell’utente che ha assegnato il task
+        // userSessionId = ID dell’utente attualmente loggato
+        const isAssignedByOtherUser = areDifferentIDs(taskFromId, userSessionId);
+        // Vero se il task è assegnato a un altro utente
+        // taskToId = ID dell’utente a cui è assegnato il task
+        // userSessionId = ID dell’utente attualmente loggato
+        const isAssignedToOtherUser = areDifferentIDs(taskToId, userSessionId);
+        return {
+            isCreateMode,
+            isUpdateMode,
+            isAssignedByOtherUser,
+            isAssignedToOtherUser
+        };
+    }, [formData?.toID, formData?.fromID, formMode, SDK_Globals.tmSession?.SessionDescr?.userID]);
+    let content = null;
+    if (isCreateMode || !isAssignedByOtherUser) {
+        content = (_jsx("div", { id: "assignedToAnotherUserField", style: { width: '100%' }, children: _jsx(TMUserChooser, { dataSource: usersList, allowShowAllUsers: !!taskContext?.dossier, allowMultipleSelection: false, label: label, readOnly: fieldsReadOnly.assignedTO, values: formData?.toID ? [formData?.toID] : [], isModifiedWhen: formData?.toID !== formDataOrig?.toID, validationItems: validationItems?.filter(o => o.PropertyName === SDKUI_Localizator.AssignedTo_Female), onValueChanged: onValueChanged }) }));
+    }
+    else if (isUpdateMode) {
+        content = (_jsxs(_Fragment, { children: [isAssignedByOtherUser && (_jsx("div", { style: { width: '100%' }, children: _jsx(TMTextBox, { label: SDKUI_Localizator.AssignedBy, value: formData?.fromName ?? '', readOnly: true }) })), isAssignedToOtherUser && (_jsx("div", { style: { width: '100%' }, children: _jsx(TMTextBox, { label: SDKUI_Localizator.AssignedTo_Female, value: formData?.toName ?? '', readOnly: true }) }))] }));
+    }
+    return (_jsx("div", { style: { display: 'flex', flexDirection: 'row', width: '100%', gap: 10 }, children: content }));
+};
+const FloatingLabelFieldCard = styled.div `
+    position: relative;
+    width: 100%;
+    background: #ffffff;
+    border: 1px solid ${props => props.$isModifiedWhen ? '#E29000' : '#e6e6e6'};
+    border-radius: 10px;
+    padding: 12px 15px;
+    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
+`;
+const FloatingFieldLabel = styled.label `
+    position: absolute;
+    top: -9px;
+    left: 9px;
+    padding: 0 3px;
+    font-size: 0.9rem;
+    background-color: white;
+    color: ${props => props.$isModifiedWhen ? '#E29000' : 'rgb(80,80,80)'};
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+`;
+const StatusFieldLabel = styled.div `
+    display: flex;
+    align-items: center;
+    gap: 8px;      // spazio tra label e valore
+    font-size: 1rem;
+    color: #000;   // nero semplice
+    font-weight: 400;
+`;
+const StatusValue = styled.span `
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 1rem;
+    font-weight: 500;
+    padding: 4px 10px;
+    border-radius: 999px;
+    border: 2px solid transparent;
+    background: ${props => props.$isModifiedWhen
+    ? "#FFF4E0"
+    : `linear-gradient(#F6F7F9, #F6F7F9) padding-box,
+           linear-gradient(270deg, #46B5A2 16%, #3BAABC 34%, #3BAABC 34%, #3681AD 54%, #3368A5 72%, #2F549D 88%, #304F99 100%) border-box`};
+    ${props => props.$isModifiedWhen && `border-color: #FFD79A;`}
+    color: ${props => props.$isModifiedWhen ? "#B46900" : "#3A3A3A"};
+    transition: all 0.2s ease;
+`;
+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;
+    color: ${props => props.$isModifiedWhen ? '#E29000' : 'rgb(80,80,80)'};
+`;
+const ResponseCommentTextArea = styled.textarea.attrs({
+    maxLength: 500,
+}) `
+    width: 100%;
+    height: 100px;
+    border: 1px solid ${props => props.$isValid ? (props.$isModifiedWhen ? "#E29000" : 'rgb(80,80,80)') : 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};
+    }
+    color: ${props => props.$isModifiedWhen ? '#E29000' : '#000000'};
+`;
+const ResponseCommentCharacterCounter = styled.div `
+    text-align: right;
+    font-size: 0.8rem;
+    color: #6c757d;
+    margin-top: 4px;
+`;
+const TaskFormResponseComment = (props) => {
+    const { originalResponse = "", currentResponse = "", onAnswerChange, readonly = false } = props;
+    const [showFullscreen, setShowFullscreen] = useState(false);
+    const deviceType = useDeviceType();
+    return (_jsx("div", { style: { width: '100%', marginTop: !readonly ? 10 : 0 }, children: readonly ?
+            _jsxs(_Fragment, { children: [_jsxs("div", { style: {
+                            width: '100%',
+                            backgroundColor: '#fff',
+                            border: '1px solid #ccc',
+                            borderRadius: 8,
+                            padding: 8,
+                            boxSizing: 'border-box',
+                            height: '5.4rem',
+                            overflowY: 'auto',
+                            position: 'relative',
+                        }, children: [_jsx("i", { className: "dx-icon-fullscreen", onClick: () => setShowFullscreen(true), style: {
+                                    position: 'absolute',
+                                    top: 6,
+                                    right: 6,
+                                    fontSize: '1.1rem',
+                                    color: '#6c757d',
+                                    cursor: 'pointer',
+                                    transition: 'color 0.2s',
+                                }, onMouseEnter: e => e.currentTarget.style.color = '#333', onMouseLeave: e => e.currentTarget.style.color = '#6c757d' }), _jsx("div", { style: {
+                                    fontSize: '1rem',
+                                    color: '#000',
+                                    whiteSpace: 'pre-wrap',
+                                    lineHeight: '1.6rem',
+                                    paddingRight: 20,
+                                }, children: currentResponse && currentResponse.length > 0
+                                    ? _jsx(TMHtmlContentDisplay, { markup: currentResponse ?? '-', isSelected: false })
+                                    : _jsx("span", { style: { color: '#6c757d', fontStyle: 'italic' }, children: SDKUI_Localizator.NoAnswerProvided }) })] }), showFullscreen && (_jsx(TMModal, { title: SDKUI_Localizator.Answer, width: calcResponsiveSizes(deviceType, '600px', '600px', '95%'), height: calcResponsiveSizes(deviceType, '400px', '400px', '80%'), isModal: true, resizable: true, onClose: () => setShowFullscreen(false), children: _jsx("div", { style: {
+                                padding: 16,
+                                fontSize: '1rem',
+                                color: '#000',
+                                whiteSpace: 'pre-wrap',
+                                lineHeight: '1.6rem',
+                                overflowY: 'auto',
+                                height: '100%',
+                                boxSizing: 'border-box',
+                            }, children: currentResponse && currentResponse.length > 0
+                                ? _jsx(TMHtmlContentDisplay, { markup: currentResponse ?? '-', isSelected: false })
+                                : _jsx("span", { style: { color: '#6c757d', fontStyle: 'italic' }, children: SDKUI_Localizator.NoAnswerProvided }) }) }))] })
+            : (_jsxs(ResponseCommentWrapper, { children: [_jsx(ResponseCommentTextArea, { id: "responseId", name: "response", "$isValid": true, value: currentResponse ?? '', onChange: onAnswerChange ? onAnswerChange : undefined, "$isModifiedWhen": currentResponse !== originalResponse }), _jsx(ResponseCommentLabel, { htmlFor: "responseId", "$isModifiedWhen": currentResponse !== originalResponse, children: SDKUI_Localizator.Answer }), _jsx(ResponseCommentCharacterCounter, { children: `${500 - (currentResponse ?? '').length} ${SDKUI_Localizator.CharactersRemaining}` })] })) }));
+};
+// Stile comune per i container dei campi
+const fieldContainerStyle = { width: '100%' };
+const fieldContainerWithMarginStyle = { width: '100%', marginTop: 10 };
+export const RenderNameField = ({ requestMoreInfo = false, validationItems, setFormData, formData, formDataOrig, fieldsReadOnly }) => {
+    // Se requestMoreInfo, il valore viene visualizzato senza prefisso nel campo di input
+    const displayValue = requestMoreInfo && formData?.name?.startsWith(TASK_MORE_INFO_PREFIX_NAME) ? formData.name.substring(TASK_MORE_INFO_PREFIX_NAME.length) : formData?.name ?? '';
+    return (_jsxs("div", { style: fieldContainerStyle, children: [_jsx(TMTextBox, { label: SDKUI_Localizator.Subject, value: displayValue, readOnly: fieldsReadOnly.name, autoFocus: true, maxLength: 100, isModifiedWhen: formData?.name !== formDataOrig?.name, onValueChanged: (e) => {
+                    const newValue = e.target.value;
+                    if (requestMoreInfo) {
+                        setFormData({ ...formData ?? {}, name: `${TASK_MORE_INFO_PREFIX_NAME}${newValue}` });
+                    }
+                    else {
+                        setFormData({ ...formData ?? {}, name: newValue });
+                    }
+                }, validationItems: validationItems?.filter(o => o.PropertyName === SDKUI_Localizator.Name) }), requestMoreInfo && (_jsx("p", { style: { fontStyle: 'italic', fontSize: '0.9rem', marginTop: '5px' }, children: `${TASK_MORE_INFO_PREFIX_NAME}${displayValue}` }))] }));
+};
+export const RenderDescriptionField = ({ validationItems, setFormData, formData, formDataOrig, fieldsReadOnly }) => (_jsx("div", { style: fieldContainerStyle, 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 }) }));
+export const RenderPriorityField = ({ formData, formDataOrig, fieldsReadOnly, onPriorityValueChange }) => (_jsx("div", { style: fieldContainerStyle, 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 })) }));
+export const RenderStartDateField = ({ label = SDKUI_Localizator.StartDate, validationItems, setFormData, formData, formDataOrig, fieldsReadOnly, onContentReady }) => (_jsx("div", { style: fieldContainerWithMarginStyle, children: !fieldsReadOnly.startDate ? (_jsx(TMDateBox, { id: "start-date", resetTimeToZeroOnKeyPress: false, label: label, dateDisplayType: DateDisplayTypes.DateTime, value: formData?.startTime, isModifiedWhen: formData?.startTime !== formDataOrig?.startTime, validationItems: validationItems?.filter(o => o.PropertyName === SDKUI_Localizator.ErrorStartEndDate), onContentReady: onContentReady, onValueChange: (value) => setFormData({ ...formData ?? {}, startTime: value }), showClearButton: true })) : (_jsx(TMTextBox, { label: SDKUI_Localizator.StartDate, value: formData?.startTime ? formatDate(formData?.startTime) : '', readOnly: true })) }));
+export const RenderEndDateField = ({ label = SDKUI_Localizator.ExpirationDate, validationItems, setFormData, formData, formDataOrig, fieldsReadOnly, onContentReady }) => (_jsx("div", { style: fieldContainerWithMarginStyle, children: !fieldsReadOnly.startDate ? (_jsx(TMDateBox, { id: "end-date", resetTimeToZeroOnKeyPress: false, label: label, 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: onContentReady, onValueChange: (value) => setFormData({ ...formData ?? {}, endTime: value }), showClearButton: true, readOnly: fieldsReadOnly.endDate })) : (_jsx(TMTextBox, { label: SDKUI_Localizator.ExpirationDate, value: formData?.endTime ? formatDate(formData?.endTime) : '', readOnly: true })) }));
+export const RenderRemindDateField = ({ validationItems, setFormData, formData, formDataOrig, fieldsReadOnly }) => (_jsx("div", { style: fieldContainerWithMarginStyle, 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 }) }));
+export const RenderTaskFormStateField = (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 isMobile = useMemo(() => { return deviceType === DeviceType.MOBILE; }, [deviceType]);
+    const { formDataOrig, formData, formMode, gotoPDGExtendedLabelClickCallback, handleShowChangeStateForm, onSavedCallback } = props;
+    const taskRole = getCurrentUserTaskRole(formDataOrig);
+    // Condizione per mostrare il pulsante
+    const showCloseButton = taskRole === 'sender' && formDataOrig?.state === Task_States.Completed;
+    const showModifyButton = !(taskRole === 'sender' && formDataOrig?.state === Task_States.Completed);
+    const closeTaskCallback = () => {
+        if (!formData || !formData.id)
+            return;
+        const msg = _jsxs("span", { children: ["Sei sicuro voler chiudere l'attivit\u00E0 \"", _jsx("b", { children: formData.name ?? "N/A" }), "\"?"] });
+        TMMessageBoxManager.show({
+            title: SDKUI_Localizator.CloseTask, message: msg, buttons: [ButtonNames.YES, ButtonNames.NO],
+            onButtonClick: async (e) => {
+                if (e !== ButtonNames.YES)
+                    return;
+                TMSpinner.show();
+                try {
+                    const selectedTask = await SDK_Globals.tmSession?.NewTaskEngine().RetrieveAsync(formData.id);
+                    if (!selectedTask) {
+                        TMMessageBoxManager.show({ title: SDKUI_Localizator.Error, message: `Attività ${formData.name ?? 'N/A'} non trovata.` });
+                        return;
+                    }
+                    selectedTask.state = Task_States.Closed;
+                    await SDK_Globals.tmSession?.NewTaskEngine().UpdateAsync(selectedTask);
+                    onSavedCallback?.(selectedTask);
+                }
+                catch (err) {
+                    TMExceptionBoxManager.show({ exception: err });
+                }
+                finally {
+                    TMSpinner.hide();
+                }
+            }
+        });
+    };
+    // Non renderizzare nulla finché i dati non sono pronti
+    if (!formDataOrig)
+        return null;
+    return (_jsx("div", { style: { width: '100%', marginTop: 15 }, children: _jsxs(FloatingLabelFieldCard, { "$isModifiedWhen": formDataOrig?.state !== formData?.state, style: { display: 'flex', flexDirection: 'column', gap: 10 }, children: [_jsx(FloatingFieldLabel, { "$isModifiedWhen": formDataOrig?.state !== formData?.state, children: SDKUI_Localizator.StatusAndAnswer }), _jsxs("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', width: '100%' }, children: [_jsx(StatusFieldLabel, { children: _jsxs(StatusValue, { "$isModifiedWhen": formDataOrig?.state !== formData?.state, children: [_jsx("span", { style: { display: 'flex', alignItems: 'center' }, children: taskStateIconMap(20).get(formData?.state ?? Task_States.None) }), getStatusLocalizatorValue(formData?.state ?? Task_States.None)] }) }), _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '8px' }, children: [showModifyButton && (_jsxs("div", { onClick: () => handleShowChangeStateForm(true), style: {
+                                        backgroundColor: "#d17800",
+                                        color: "#fff",
+                                        padding: "10px 16px",
+                                        borderRadius: "20px",
+                                        display: "inline-flex",
+                                        alignItems: "center",
+                                        justifyContent: "center",
+                                        gap: "8px",
+                                        cursor: "pointer",
+                                        fontWeight: 600,
+                                        width: "120px",
+                                        transition: 'background-color 0.3s, transform 0.2s',
+                                    }, onMouseEnter: e => {
+                                        e.currentTarget.style.backgroundColor = "#a66300";
+                                        e.currentTarget.style.transform = 'scale(1.05)';
+                                    }, onMouseLeave: e => {
+                                        e.currentTarget.style.backgroundColor = "#d17800";
+                                        e.currentTarget.style.transform = 'scale(1)';
+                                    }, children: [_jsx("span", { style: { fontWeight: 500 }, children: SDKUI_Localizator.Update }), _jsx("i", { className: "dx-icon-edit", style: { fontSize: '20px' } })] })), showCloseButton && (_jsxs("div", { onClick: closeTaskCallback, style: {
+                                        backgroundColor: "#d17800",
+                                        color: "#fff",
+                                        padding: "10px 16px",
+                                        borderRadius: "20px",
+                                        display: "inline-flex",
+                                        alignItems: "center",
+                                        justifyContent: "center",
+                                        gap: "8px",
+                                        cursor: "pointer",
+                                        fontWeight: 600,
+                                        width: "150px",
+                                        transition: 'background-color 0.3s, transform 0.2s',
+                                    }, onMouseEnter: e => {
+                                        e.currentTarget.style.backgroundColor = "#a66300";
+                                        e.currentTarget.style.transform = 'scale(1.05)';
+                                    }, onMouseLeave: e => {
+                                        e.currentTarget.style.backgroundColor = "#d17800";
+                                        e.currentTarget.style.transform = 'scale(1)';
+                                    }, children: [_jsx("span", { style: { fontWeight: 500 }, children: SDKUI_Localizator.CloseTask }), _jsx("i", { className: "dx-icon-lock", style: { fontSize: '20px' } })] }))] })] }), _jsx(TaskFormResponseComment, { originalResponse: formDataOrig?.response, currentResponse: formData?.response, readonly: true }), _jsx("div", { style: { display: 'flex', justifyContent: 'center', width: '100%' }, children: _jsx(TaskPdgOriginNavigator, { formMode: formMode, formData: formDataOrig, isMobile: isMobile, gotoPDGExtendedLabelClickCallback: gotoPDGExtendedLabelClickCallback }) })] }) }));
+};
+export const TMChangeStateForm = (props) => {
+    const { formData, formDataOrig, handleShowChangeStateForm, setFormData } = props;
+    const deviceType = useDeviceType();
+    const taskRole = useMemo(() => getCurrentUserTaskRole(formData), [formData.toID, formData.fromID, SDK_Globals.tmSession?.SessionDescr?.userID]);
+    const [statusValue, setStatusValue] = React.useState(formData?.state ?? Task_States.None);
+    const [responseValue, setResponseValue] = React.useState(formData?.response ?? '');
+    const [dropdownValues, setDropdownValues] = React.useState([]);
+    useEffect(() => {
+        const availableTransitions = getAvailableTaskTransitions(formData?.state ?? Task_States.None, taskRole);
+        const values = getDropdownValuesFromTaskStates(availableTransitions);
+        setDropdownValues(values);
+        if (values.length > 0) {
+            const currentState = formData?.state ?? Task_States.None;
+            const existsInDropdown = values.some(v => v.value === currentState);
+            setStatusValue(existsInDropdown ? currentState : values[0].value);
+        }
+        else {
+            setStatusValue(Task_States.NotStarted);
+        }
+        setResponseValue(formData?.response ?? '');
+    }, [formData, taskRole]);
+    const onStatusValueChange = (e) => {
+        if (!e?.target?.value)
+            return;
+        setStatusValue(e?.target?.value);
+    };
+    const onAnswerChange = (e) => {
+        setResponseValue(e.target.value ?? '');
+    };
+    const onSaveCallback = () => {
+        setFormData(({ ...formData ?? {}, state: statusValue, response: responseValue }));
+        handleShowChangeStateForm(false);
+    };
+    return _jsx(TMModal, { title: `Modifica stato: ` + getStatusLocalizatorValue(formDataOrig?.state ?? Task_States.None), width: calcResponsiveSizes(deviceType, '570px', '570px', '95%'), height: calcResponsiveSizes(deviceType, '300px', '300px', '95%'), isModal: true, resizable: false, onClose: () => handleShowChangeStateForm(false), children: _jsxs("div", { style: {
+                display: 'flex',
+                flexDirection: 'column',
+                gap: '5px',
+                padding: '5px 24px',
+                justifyContent: 'center',
+                height: '100%',
+            }, children: [_jsx(TMDropDown, { label: SDKUI_Localizator.Status, value: statusValue, dataSource: dropdownValues, isModifiedWhen: statusValue !== formDataOrig?.state, onValueChanged: onStatusValueChange }), _jsx(TaskFormResponseComment, { currentResponse: responseValue, originalResponse: formDataOrig?.response, onAnswerChange: onAnswerChange }), _jsx("div", { style: {
+                        display: 'flex',
+                        justifyContent: 'center',
+                        gap: '10px',
+                        marginTop: '5px'
+                    }, children: _jsx(TMButton, { caption: SDKUI_Localizator.ApplyAndClose, advancedColor: TMColors.primary, icon: _jsx(IconSave, {}), showTooltip: false, onClick: onSaveCallback }) })] }) });
+};
+export const STATUS_TRANSITIONS = {
+    // Proprietario del task: può cambiare liberamente in qualsiasi stato
+    personal: {
+        [Task_States.NotStarted]: [Task_States.NotStarted, Task_States.InProgress, Task_States.Waiting, Task_States.Deferred, Task_States.Completed, Task_States.Closed],
+        [Task_States.InProgress]: [Task_States.NotStarted, Task_States.InProgress, Task_States.Waiting, Task_States.Deferred, Task_States.Completed, Task_States.Closed],
+        [Task_States.Waiting]: [Task_States.NotStarted, Task_States.InProgress, Task_States.Waiting, Task_States.Deferred, Task_States.Completed, Task_States.Closed],
+        [Task_States.Deferred]: [Task_States.NotStarted, Task_States.InProgress, Task_States.Waiting, Task_States.Deferred, Task_States.Completed, Task_States.Closed],
+        [Task_States.Completed]: [Task_States.NotStarted, Task_States.InProgress, Task_States.Waiting, Task_States.Deferred, Task_States.Completed, Task_States.Closed],
+        [Task_States.Closed]: [Task_States.NotStarted, Task_States.InProgress, Task_States.Waiting, Task_States.Deferred, Task_States.Completed, Task_States.Closed]
+    },
+    // Mittente del task: può modificare lo stato liberamente, ma solo riaprire o chiudere se completato
+    sender: {
+        [Task_States.NotStarted]: [Task_States.NotStarted, Task_States.InProgress, Task_States.Waiting, Task_States.Deferred, Task_States.Completed],
+        [Task_States.InProgress]: [Task_States.NotStarted, Task_States.InProgress, Task_States.Waiting, Task_States.Deferred, Task_States.Completed],
+        [Task_States.Waiting]: [Task_States.NotStarted, Task_States.InProgress, Task_States.Waiting, Task_States.Deferred, Task_States.Completed],
+        [Task_States.Deferred]: [Task_States.NotStarted, Task_States.InProgress, Task_States.Waiting, Task_States.Deferred, Task_States.Completed],
+        [Task_States.Completed]: [Task_States.Completed, Task_States.Closed, Task_States.InProgress],
+        [Task_States.Closed]: [Task_States.NotStarted, Task_States.InProgress, Task_States.Waiting, Task_States.Deferred, Task_States.Completed, Task_States.Closed]
+    },
+    // Destinatario del task: può modificare lo stato liberamente, ma solo riaprire o chiudere se completato
+    receiver: {
+        [Task_States.NotStarted]: [Task_States.NotStarted, Task_States.InProgress, Task_States.Waiting, Task_States.Deferred, Task_States.Completed],
+        [Task_States.InProgress]: [Task_States.NotStarted, Task_States.InProgress, Task_States.Waiting, Task_States.Deferred, Task_States.Completed],
+        [Task_States.Waiting]: [Task_States.NotStarted, Task_States.InProgress, Task_States.Waiting, Task_States.Deferred, Task_States.Completed],
+        [Task_States.Deferred]: [Task_States.NotStarted, Task_States.InProgress, Task_States.Waiting, Task_States.Deferred, Task_States.Completed],
+        [Task_States.Completed]: [Task_States.Completed, Task_States.Closed, Task_States.InProgress],
+        [Task_States.Closed]: [Task_States.NotStarted, Task_States.InProgress, Task_States.Waiting, Task_States.Deferred, Task_States.Completed, Task_States.Closed]
+    }
+};
+const getAvailableTaskTransitions = (currentStatus, role) => {
+    const transitions = STATUS_TRANSITIONS[role];
+    return transitions?.[currentStatus] ?? [];
+};
+const getDropdownValuesFromTaskStates = (states) => {
+    const map = {
+        [Task_States.Completed]: SDKUI_Localizator.Completed,
+        [Task_States.Closed]: SDKUI_Localizator.Closed,
+        [Task_States.Deferred]: SDKUI_Localizator.Postponed,
+        [Task_States.InProgress]: SDKUI_Localizator.InProgress,
+        [Task_States.NotStarted]: SDKUI_Localizator.NewFemale,
+        [Task_States.Waiting]: SDKUI_Localizator.Pending,
+        [Task_States.None]: "",
+    };
+    return states
+        .filter(state => state !== Task_States.None)
+        .map(state => ({ value: state, display: map[state] }));
+};

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

@@ -62,6 +62,7 @@ export declare const getTaskNotPersonalAssignedToMe: (tasks: Array<TaskDescripto
 export declare const getTaskPersonalAssignedToMe: (tasks: Array<TaskDescriptor>) => Array<TaskDescriptor>;
 export declare const getTaskAssignedByMe: (tasks: Array<TaskDescriptor>) => Array<TaskDescriptor>;
 export declare const getTaskNotCompletedAssignedByMe: (tasks: Array<TaskDescriptor>) => Array<TaskDescriptor>;
+export declare const getTaskCompletedAssignedByMe: (tasks: Array<TaskDescriptor>) => Array<TaskDescriptor>;
 export declare const getHeaderStatusFilterConfig: () => {
     enabled: boolean;
     dataSource: {
@@ -95,7 +96,7 @@ export declare const getTaskColor: (taskState: Task_States) => {
 export declare const mergeUniqueTasks: (existing: Array<TaskDescriptor>, // Array of existing tasks
 newTasks: Array<TaskDescriptor>) => Array<TaskDescriptor>;
 export declare const getOriginLabel: (pdg: PdGs | undefined, ID1Name: string | undefined) => string;
-export declare const taskValidatorAsync: (taskDescriptor: TaskDescriptor) => Promise<ValidationItem[]>;
+export declare const taskValidatorAsync: (taskDescriptor: TaskDescriptor, requestMoreInfo?: boolean) => Promise<ValidationItem[]>;
 export declare const gotoPDGExtendedLabel: (gotoVisible: boolean, pdg: PdGs, iD1Name: string | undefined) => string;
 export declare const convertToSchedulerAppointments: (tasks: Array<TaskDescriptor>) => Array<Appointment>;
 export declare const formatDate: (date: Date) => string;
@@ -123,6 +124,7 @@ export declare enum FilterCategoryId {
     New = 1.2,
     InProgress = 1.3,
     Completed = 1.4,
+    Closed = 1.45,
     Pending = 1.5,
     Postponed = 1.6,
     Low = 2.1,