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

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

@@ -0,0 +1,432 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { useEffect, useMemo } 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 { 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";
+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) + '"' })] })) }));
+};
+export 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 ReadOnlyFieldWrapper = styled.div `
+    position: relative;
+    width: 100%;
+    background: #ffffff;
+    border: 1px solid ${props => props.$isModifiedWhen ? '#E29000' : '#e6e6e6'};
+    border-radius: 10px;
+    padding: 12px 15px;
+    margin-top: 12px;
+    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
+`;
+const ReadOnlyFieldLabel = 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 ReadOnlyFieldValue = styled.div `
+    font-size: 0.95rem;
+    color: ${props => props.$isModifiedWhen ? '#E29000' : '#525252'};
+    white-space: pre-wrap;
+
+    /* Limite a 4 linee con scrollbar se serve */
+    display: -webkit-box;
+    -webkit-line-clamp: 4;
+    -webkit-box-orient: vertical;  
+    overflow-y: auto;   /* scrollbar verticale se serve */
+    max-height: calc(1.2em * 4); /* altezza approssimativa di 4 linee */
+
+    /* 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;
+`;
+export const TaskFormResponseComment = (props) => {
+    const { originalResponse = "", currentResponse = "", onAnswerChange, readonly = false } = props;
+    return (_jsx("div", { style: { width: '100%', marginTop: 15 }, children: readonly ? (currentResponse && currentResponse.trim() !== '' ? (_jsxs(ReadOnlyFieldWrapper, { "$isModifiedWhen": currentResponse !== originalResponse, children: [_jsxs(ReadOnlyFieldLabel, { "$isModifiedWhen": currentResponse !== originalResponse, children: [SDKUI_Localizator.Answer, " "] }), _jsx(ReadOnlyFieldValue, { "$isModifiedWhen": currentResponse !== originalResponse, children: currentResponse && currentResponse.trim() !== '' ? currentResponse : "" })] })) : null) : (_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) => {
+    const { formDataOrig, formData, handleShowChangeStateForm, onSavedCallback } = props;
+    // Non renderizzare nulla finché i dati non sono pronti
+    if (!formDataOrig)
+        return null;
+    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 = `Sei sicuro voler chiudere l'attività ${formData.name ?? 'N/A'}?`;
+        TMMessageBoxManager.show({
+            title: SDKUI_Localizator.MarkAs, 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();
+                }
+            }
+        });
+    };
+    return (_jsx("div", { style: { width: '100%', marginTop: 15 }, children: _jsxs(ReadOnlyFieldWrapper, { "$isModifiedWhen": formDataOrig?.state !== formData?.state, style: { display: 'flex', alignItems: 'center', gap: 16 }, children: [_jsx(ReadOnlyFieldLabel, { "$isModifiedWhen": formDataOrig?.state !== formData?.state, children: SDKUI_Localizator.Status }), _jsx(ReadOnlyFieldValue, { "$isModifiedWhen": formDataOrig?.state !== formData?.state, children: getStatusLocalizatorValue(formData?.state ?? Task_States.None) }), _jsxs("div", { style: { flex: 1, display: 'flex', justifyContent: 'center' }, children: [showModifyButton && (_jsx("div", { onClick: () => handleShowChangeStateForm(true), style: {
+                                backgroundColor: '#C2388B',
+                                color: '#fff',
+                                padding: '10px 16px',
+                                borderRadius: '25px',
+                                display: 'flex',
+                                alignItems: 'center',
+                                justifyContent: 'center',
+                                cursor: 'pointer',
+                                fontWeight: 600,
+                                transition: 'background-color 0.3s, transform 0.2s',
+                            }, onMouseEnter: (e) => {
+                                e.currentTarget.style.backgroundColor = '#A12D78';
+                                e.currentTarget.style.transform = 'scale(1.05)';
+                            }, onMouseLeave: (e) => {
+                                e.currentTarget.style.backgroundColor = '#C2388B';
+                                e.currentTarget.style.transform = 'scale(1)';
+                            }, children: _jsx("span", { style: { fontSize: '1rem', letterSpacing: '0.5px' }, children: "Modifica stato" }) })), showCloseButton && (_jsx("div", { onClick: closeTaskCallback, style: {
+                                backgroundColor: '#C2388B',
+                                color: '#fff',
+                                padding: '10px 16px',
+                                borderRadius: '25px',
+                                display: 'flex',
+                                alignItems: 'center',
+                                justifyContent: 'center',
+                                cursor: 'pointer',
+                                fontWeight: 600,
+                                transition: 'background-color 0.3s, transform 0.2s',
+                            }, onMouseEnter: (e) => {
+                                e.currentTarget.style.backgroundColor = '#A12D78';
+                                e.currentTarget.style.transform = 'scale(1.05)';
+                            }, onMouseLeave: (e) => {
+                                e.currentTarget.style.backgroundColor = '#C2388B';
+                                e.currentTarget.style.transform = 'scale(1)';
+                            }, children: _jsx("span", { style: { fontSize: '1rem', letterSpacing: '0.5px' }, children: "Chiudi attivit\u00E0" }) }))] })] }) }));
+};
+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, formData?.state ?? Task_States.None);
+        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, currentState) => {
+    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 && state !== currentState)
+        .map(state => ({ value: state, display: map[state] }));
+};

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

@@ -431,6 +431,7 @@ export const formatDate = (date) => {
     // Return the formatted date string
     return `${day}/${month}/${year} ${hours}:${minutes}:${seconds}`;
 };
+// Funzione per confrontare due ID e verificare se sono diversi
 export const areDifferentIDs = (fromID, userID) => {
     if (fromID && userID) {
         return fromID !== userID;

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

@@ -29,11 +29,4 @@ export declare const treeFilterDataSource: (allTasks: Array<TaskDescriptor>) =>
     expanded?: boolean;
     tooltipContent?: ReactNode;
 }>;
-type RenderContextBlockParams = {
-    condition: boolean;
-    pdg: PdGs;
-    label: string | undefined;
-    isMobile: boolean;
-};
-export declare const renderContextBlock: ({ condition, pdg, label, isMobile }: RenderContextBlockParams) => JSX.Element | null;
 export {};

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

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useState } from "react";
 import { PdGs, Priorities, SDK_Globals, Task_States } from '@topconsultnpm/sdk-ts';
 import { Extended_Task_States, FilterCategoryId, filterTreeTask, gotoPDGExtendedLabel, prioritiesResourceData, taskIsExpiringSoon } from "./TMTasksUtils";
-import { getPdgsIconMap, SDKUI_Localizator, TMConditionalWrapper } from "../../../helper";
+import { getPdgsIconMap, SDKUI_Localizator } from "../../../helper";
 import { FormModes } from "../../../ts";
 import TMTooltip from "../../base/TMTooltip";
 const taskStateIconClassMap = () => {
@@ -131,14 +131,3 @@ export const treeFilterDataSource = (allTasks) => {
         { id: FilterCategoryId.High, label: SDKUI_Localizator.High + " (" + highLength + ")", value: Priorities.High, categoryId: FilterCategoryId.AllPriorities },
     ];
 };
-export const renderContextBlock = ({ condition, pdg, label, isMobile }) => {
-    if (!condition || !label)
-        return null;
-    return (_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%',
-                display: 'flex',
-                alignItems: 'center',
-                color: "#2559A5",
-                marginTop: 10
-            }, children: _jsxs(TMTooltip, { content: label, children: [_jsx("span", { children: getPdgsIconMap().get(pdg) }), "\u00A0", _jsx("span", { children: label })] }) }) }));
-};

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

@@ -5,7 +5,7 @@ import { TabPanel, Item } from 'devextreme-react/tab-panel';
 import { Priorities, ResultTypes, SDK_Globals, Task_States } from "@topconsultnpm/sdk-ts";
 import { calculateNumberOfDays, renderTaskIcons } from "./TMTasksUtilsView";
 import { getPriorityLocalizatorValue } from "../tasks/TMTasksUtils";
-import { calcResponsiveSizes, getExceptionMessage, SDKUI_Localizator, StyledTabItem, TMCountBadge } from "../../../helper";
+import { getExceptionMessage, SDKUI_Localizator, StyledTabItem, taskModalSizes, TMCountBadge } from "../../../helper";
 import { useDeviceType } from "../../base/TMDeviceProvider";
 import { FormModes } from "../../../ts";
 import TMDataGrid from "../../base/TMDataGrid";
@@ -545,7 +545,7 @@ const TMTasksView = (props) => {
                                 _jsxs(_Fragment, { children: [activeComponent === TaskView.CALENDAR_TASK && getFromOrToCalendarElement(visualizedTasks, false, true), activeComponent === TaskView.AGENDA_TASK && getFromOrToAgendaElement(visualizedTasks, false, true), activeComponent === TaskView.LIST_TASK && getFromOrToDatagridElement(visualizedTasks, false, true)] }) : '' }), _jsx(Item, { title: SDKUI_Localizator.AllFemale, icon: "fields", tabRender: (params) => {
                                 return _jsxs(StyledTabItem, { "$isSelected": activeTabIndex === AssignedTab.All, children: [_jsxs(TMTooltip, { content: SDKUI_Localizator.AllFemale, children: [_jsx("i", { className: `dx-icon-${params.icon}` }), "\u00A0", params.title, " ", (allTasksFilteredCount > 0) ? `(${allTasksFilteredCount})` : ''] }), newTaskCount > 0 && (_jsx(TMTooltip, { content: SDKUI_Localizator.NewAssignedActivitiesNumber + ": " + newTaskCount, children: _jsx(TMCountBadge, { children: newTaskCount }) }))] });
                             }, render: () => activeTabIndex === AssignedTab.All ?
-                                _jsxs(_Fragment, { children: [activeComponent === TaskView.CALENDAR_TASK && getFromOrToCalendarElement(visualizedTasks, true, true), activeComponent === TaskView.AGENDA_TASK && getFromOrToAgendaElement(visualizedTasks, true, true), activeComponent === TaskView.LIST_TASK && getFromOrToDatagridElement(visualizedTasks, true, true)] }) : '' })] }) }), showTaskForm && _jsx(TMTaskForm, { id: currentTask?.id ?? -1, width: calcResponsiveSizes(deviceType, '700px', '700px', '95%'), height: calcResponsiveSizes(deviceType, '700px', '700px', '95%'), title: isContextualCreate ? SDKUI_Localizator.ContextualTask : SDKUI_Localizator.Widget_Activities, isModal: true, formMode: formMode ?? FormModes.Create, visualizedTasks: visualizedTasks, currentTask: currentTask, setCurrentTask: setCurrentTask, isContextualCreate: isContextualCreate, selectedRowKeys: selectedRowKeys, handleFocusedRowKeyChange: handleFocusedRowChange, taskContext: taskContext, usersList: usersList, onStatusChanged: () => { }, onClose: closeTaskFormCallback, onCancel: closeTaskFormCallback, showBackButton: false, onSaved: onSavedCallback, startDate: calendarStartDate, endDate: calendarEndDate, onOpenS4TViewerRequest: onOpenS4TViewerRequest, s4TViewerDialogComponent: s4TViewerDialogComponent, allTasks: allTasks, getAllTasks: getAllTasks, deleteTaskByIdsCallback: deleteTaskByIdsCallback, addTaskCallback: addTaskCallback, editTaskCallback: editTaskCallback, handleNavigateToWGs: handleNavigateToWGsWrapper, handleNavigateToDossiers: handleNavigateToDossiersWrapper }), _jsx("button", { style: {
+                                _jsxs(_Fragment, { children: [activeComponent === TaskView.CALENDAR_TASK && getFromOrToCalendarElement(visualizedTasks, true, true), activeComponent === TaskView.AGENDA_TASK && getFromOrToAgendaElement(visualizedTasks, true, true), activeComponent === TaskView.LIST_TASK && getFromOrToDatagridElement(visualizedTasks, true, true)] }) : '' })] }) }), showTaskForm && _jsx(TMTaskForm, { id: currentTask?.id ?? -1, width: taskModalSizes(deviceType, formMode ?? FormModes.Create).width, height: taskModalSizes(deviceType, formMode ?? FormModes.Create).height, title: isContextualCreate ? SDKUI_Localizator.ContextualTask : SDKUI_Localizator.Widget_Activities, isModal: true, formMode: formMode ?? FormModes.Create, visualizedTasks: visualizedTasks, currentTask: currentTask, setCurrentTask: setCurrentTask, isContextualCreate: isContextualCreate, selectedRowKeys: selectedRowKeys, handleFocusedRowKeyChange: handleFocusedRowChange, taskContext: taskContext, usersList: usersList, onStatusChanged: () => { }, onClose: closeTaskFormCallback, onCancel: closeTaskFormCallback, showBackButton: false, onSaved: onSavedCallback, startDate: calendarStartDate, endDate: calendarEndDate, onOpenS4TViewerRequest: onOpenS4TViewerRequest, s4TViewerDialogComponent: s4TViewerDialogComponent, allTasks: allTasks, getAllTasks: getAllTasks, deleteTaskByIdsCallback: deleteTaskByIdsCallback, addTaskCallback: addTaskCallback, editTaskCallback: editTaskCallback, handleNavigateToWGs: handleNavigateToWGsWrapper, handleNavigateToDossiers: handleNavigateToDossiersWrapper }), _jsx("button", { style: {
                     position: 'absolute',
                     bottom: hasFilters ? '90px' : '18px',
                     right: '20px',

package/lib/components/forms/TMSaveForm.js

@@ -11,7 +11,7 @@ import { TMColors } from '../../utils/theme';
 import TMValidationItemsList from '../grids/TMValidationItemsList';
 import TMModal from '../base/TMModal';
 import { DeviceType, useDeviceType } from '../base/TMDeviceProvider';
-const TMSaveForm = ({ id, formMode = FormModes.Update, showToolbar = true, skipIsModifiedCheck = false, title, children, isModal, exception, customToolbarElements, hasNavigation, showSaveButton = true, customSaveButton, customTooltipSaveButton, showBackButton, showWarningsCount = true, showErrorCount = true, showUndoButton = true, onClose, onSaveAsync, onNext, onPrev, canNext, canPrev, isModified, onShowList, validationItems = [], onUndo, onCancel, width, height, askClosingConfirm = false, showTitleFormMode = true, showCloseButton = true }) => {
+const TMSaveForm = ({ id, formMode = FormModes.Update, showToolbar = true, skipIsModifiedCheck = false, title, children, isModal, exception, customToolbarElements, hasNavigation, showSaveButton = true, customSaveButton, customTooltipSaveButton, showBackButton, showWarningsCount = true, showErrorCount = true, showUndoButton = true, onClose, onSaveAsync, onNext, onPrev, canNext, canPrev, isModified, onShowList, validationItems = [], onUndo, onCancel, width, height, askClosingConfirm = false, showTitleFormMode = true, showCloseButton = true, resizable = true }) => {
     const [showList, setShowList] = useState(true);
     const [showErrorGrid, setShowErrorGrid] = useState(false);
     const deviceType = useDeviceType();
@@ -65,26 +65,74 @@ const TMSaveForm = ({ id, formMode = FormModes.Update, showToolbar = true, skipI
             }
         });
     };
-    const doClose = () => {
+    const doClose = async () => {
+        // Se non ci sono modifiche o vogliamo ignorare il controllo delle modifiche
         if (!isModified || skipIsModifiedCheck) {
             onClose?.();
-            deviceType === DeviceType.MOBILE && setShowList(true), onShowList?.(true);
+            // Se il dispositivo è mobile, mostra di nuovo la lista
+            if (deviceType === DeviceType.MOBILE) {
+                setShowList(true);
+                onShowList?.(true);
+            }
             return;
         }
+        // Determina il messaggio e i pulsanti da mostrare in base alla presenza di errori
+        const hasValidationErrors = validationItems.length > 0;
+        const message = (isModified && hasValidationErrors) ? SDKUI_Localizator.FormErrorsProceedQuestion : SDKUI_Localizator.SaveQuestion;
+        const buttons = hasValidationErrors
+            ? [ButtonNames.YES, ButtonNames.NO]
+            : [ButtonNames.YES, ButtonNames.NO, ButtonNames.CANCEL];
+        // Mostra il messaggio di conferma
         TMMessageBoxManager.show({
-            parentId: isModal ? "TMSaveFormShowConfirmForClose-" + id : undefined,
-            message: SDKUI_Localizator.SaveQuestion, buttons: [ButtonNames.YES, ButtonNames.NO, ButtonNames.CANCEL],
-            onButtonClick: async (e) => {
+            parentId: isModal ? `TMSaveFormShowConfirmForClose-${id}` : undefined,
+            message,
+            buttons,
+            onButtonClick: async (buttonClicked) => {
                 try {
-                    if (e == ButtonNames.CANCEL)
-                        return;
-                    if (e == ButtonNames.NO)
-                        deviceType === DeviceType.MOBILE && (onUndo(), setShowList(true), onShowList?.(true));
-                    if (e == ButtonNames.YES)
-                        deviceType === DeviceType.MOBILE ? (await onSaveAsync?.(), setShowList(true), onShowList?.(true)) : await onSaveAsync?.();
+                    // Caso con errori di validazione
+                    if (hasValidationErrors) {
+                        if (buttonClicked === ButtonNames.NO)
+                            return; // Non fare nulla
+                        if (buttonClicked === ButtonNames.YES) {
+                            if (deviceType === DeviceType.MOBILE) {
+                                onUndo();
+                                setShowList(true);
+                                onShowList?.(true);
+                            }
+                            else {
+                                onUndo();
+                            }
+                        }
+                    }
+                    else {
+                        // Caso senza errori
+                        switch (buttonClicked) {
+                            case ButtonNames.CANCEL:
+                                return; // Non fare nulla
+                            case ButtonNames.NO:
+                                if (deviceType === DeviceType.MOBILE) {
+                                    onUndo();
+                                    setShowList(true);
+                                    onShowList?.(true);
+                                }
+                                break;
+                            case ButtonNames.YES:
+                                if (deviceType === DeviceType.MOBILE) {
+                                    await onSaveAsync?.();
+                                    setShowList(true);
+                                    onShowList?.(true);
+                                }
+                                else {
+                                    await onSaveAsync?.();
+                                }
+                                break;
+                        }
+                    }
+                    // Chiude il form/modal
                     onClose?.();
                 }
                 catch (ex) {
+                    // Mostra eventuali eccezioni
                     TMExceptionBoxManager.show({ exception: ex });
                 }
             }
@@ -102,7 +150,7 @@ const TMSaveForm = ({ id, formMode = FormModes.Update, showToolbar = true, skipI
                                         _jsx("div", { style: { width: '100%', height: '100%', marginTop: '50px', display: 'flex', alignItems: 'center', justifyContent: 'center', flexDirection: 'column', color: getColor('error') }, children: 'Si è verificato un errore' })
                                     : _jsx(_Fragment, { children: children }) }), showErrorGrid && validationItems.length > 0 ? _jsx(TMCard, { scrollY: true, padding: false, showBorder: false, children: _jsx(TMValidationItemsList, { validationItems: validationItems }) }) : _jsx(_Fragment, {})] }) }), (isModal && onClose) && _jsx("div", { id: "TMSaveFormShowConfirmForClose-" + id })] }));
     };
-    return (_jsx(_Fragment, { children: (isModal && onClose) ? _jsx(_Fragment, { children: _jsx(TMModal, { title: `${title}${showTitleFormMode ? ` - ${LocalizeFormModes(formMode)}` : ''}`, onClose: doClose, width: width ?? '100%', height: height ?? '100%', hidePopup: false, askClosingConfirm: askClosingConfirm, showCloseButton: showCloseButton, children: _jsx("div", { style: { width: "100%", height: "100%", display: 'block' }, children: renderSaveForm() }) }) })
+    return (_jsx(_Fragment, { children: (isModal && onClose) ? _jsx(_Fragment, { children: _jsx(TMModal, { title: `${title}${showTitleFormMode ? ` - ${LocalizeFormModes(formMode)}` : ''}`, onClose: doClose, width: width ?? '100%', height: height ?? '100%', hidePopup: false, askClosingConfirm: askClosingConfirm, showCloseButton: showCloseButton, resizable: resizable, children: _jsx("div", { style: { width: "100%", height: "100%", display: 'block' }, children: renderSaveForm() }) }) })
             : renderSaveForm() }));
 };
 export default TMSaveForm;