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

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

@@ -0,0 +1,538 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { 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, SDKUI_Localizator } 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";
+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 } = 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 (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, ": ", getPdgsIconMap().get(pdg), " ", label] }));
+};
+export const TaskFormContextualAttachments = ({ taskContext }) => {
+    const hasWorkingGroup = !!taskContext?.workingGroup?.id;
+    const hasDossier = !!taskContext?.dossier?.id;
+    const hasDocument = !!taskContext?.document?.tid && !!taskContext?.document?.did;
+    const hasWorkItem = !!taskContext?.workItem?.tid && !!taskContext?.workItem?.did;
+    const hasAnyAttachment = hasWorkingGroup || hasDossier || hasDocument || hasWorkItem;
+    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, taskContext?.workingGroup?.name) + '"' }), _jsx(RenderAttachmentBlock, { condition: hasDossier, pdg: PdGs.CF, label: SDKUI_Localizator.Dossier + ' "' + getOriginLabel(PdGs.CF, taskContext?.dossier?.name) + '"' }), _jsx(RenderAttachmentBlock, { condition: hasDocument, pdg: PdGs.DT, label: SDKUI_Localizator.Document + ' "' + getOriginLabel(PdGs.DT, taskContext?.document?.name) + '"' }), _jsx(RenderAttachmentBlock, { condition: hasWorkItem, pdg: PdGs.DT, label: SDKUI_Localizator.Document + ' "' + getOriginLabel(PdGs.DT, taskContext?.workItem?.name) + '"' })] })) }));
+};
+const TaskPdgOriginNavigator = (props) => {
+    const { formMode, formData, isMobile, gotoPDGExtendedLabelClickCallback } = props;
+    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: "#C2388B",
+                    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 = "#A12D78";
+                    e.currentTarget.style.transform = 'scale(1.05)';
+                }, onMouseLeave: e => {
+                    if (formData.pdG !== PdGs.None)
+                        e.currentTarget.style.backgroundColor = "#C2388B";
+                    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, 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: 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: 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;
+`;
+// Nuovo Styled component semplice per StatusFieldValue
+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 ResponseReadOnlyContainer = styled.div `width: 100%;`;
+const ResponseReadOnlyLabel = styled.div `
+    font-size: 1rem;
+    color: #000;
+    margin-bottom: 6px;
+`;
+const ResponseReadOnlyValue = styled.div `
+    border: 1px solid #dee2e6;
+    border-radius: 8px;
+    padding: 12px 14px;
+    font-size: 0.95rem;
+    color: #495057;
+    line-height: 1.5;
+    white-space: pre-wrap;
+    word-wrap: break-word;
+    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;`}
+    /* Limite a 3 righe con scrollbar */
+    max-height: calc(1.5em * 3 + 24px); /* 3 righe + padding */
+    overflow-y: auto;
+    
+    /* Scrollbar stilizzata */
+    &::-webkit-scrollbar {
+        width: 6px;
+    }
+    &::-webkit-scrollbar-track {
+        background: #f1f1f1;
+        border-radius: 3px;
+    }
+    &::-webkit-scrollbar-thumb {
+        background: linear-gradient(180deg, #46B5A2, #3681AD);
+        border-radius: 3px;
+    }
+    &::-webkit-scrollbar-thumb:hover {
+        background: linear-gradient(180deg, #3a9a89, #2d6d94);
+    }
+    
+    /* Permette selezione testo */
+    user-select: text;
+`;
+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' : 'rgb(80,80,80)'};
+`;
+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
+                                    ? currentResponse
+                                    : _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
+                                ? currentResponse
+                                : _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 = ({ validationItems, setFormData, formData, formDataOrig, fieldsReadOnly }) => (_jsx("div", { style: fieldContainerStyle, 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) }) }));
+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 = ({ validationItems, setFormData, formData, formDataOrig, fieldsReadOnly, onContentReady }) => (_jsx("div", { style: fieldContainerWithMarginStyle, 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: 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 = ({ validationItems, setFormData, formData, formDataOrig, fieldsReadOnly, onContentReady }) => (_jsx("div", { style: fieldContainerWithMarginStyle, children: !fieldsReadOnly.startDate ? (_jsx(TMDateBox, { id: "end-date", resetTimeToZeroOnKeyPress: false, label: SDKUI_Localizator.ExpirationDate, 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);
+    console.log(taskRole);
+    console.log("showCloseButton", showCloseButton);
+    console.log("showModifyButton", showModifyButton);
+    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.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.InProgress, Task_States.Waiting, Task_States.Deferred, Task_States.Completed],
+        [Task_States.InProgress]: [Task_States.InProgress, Task_States.Waiting, Task_States.Deferred, Task_States.Completed],
+        [Task_States.Waiting]: [Task_States.InProgress, Task_States.Waiting, Task_States.Deferred, Task_States.Completed],
+        [Task_States.Deferred]: [Task_States.InProgress, Task_States.Waiting, Task_States.Deferred, 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: {
@@ -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,