@topconsultnpm/sdkui-react 6.19.0-dev1.57 → 6.19.0-dev1.59

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from 'react';
-import { ObjectClasses, TaskDescriptor, Priorities, PdGs, SDK_Globals, UserListCacheService, SDK_Localizator } from '@topconsultnpm/sdk-ts';
+import { ObjectClasses, TaskDescriptor, Priorities, PdGs, SDK_Globals, UserListCacheService, SDK_Localizator, Task_States } from '@topconsultnpm/sdk-ts';
 import { areDifferentIDs, formatDate, getOriginLabel, getPriorityLocalizatorValue, getPriorityLocalizatorValues, getStatusLocalizatorValues, gotoPDGExtendedLabel, taskValidatorAsync } from './TMTasksUtils';
 import ScrollView from 'devextreme-react/cjs/scroll-view';
 import TMLayoutContainer from '../../base/TMLayout';
@@ -18,6 +18,45 @@ import TMTextArea from '../../editors/TMTextArea';
 import TMTextBox from '../../editors/TMTextBox';
 import TMSaveForm from '../../forms/TMSaveForm';
 import TMDcmtForm from '../documents/TMDcmtForm';
+import styled from 'styled-components';
+import { TMColors } from '../../../utils/theme';
+const ResponseCommentWrapper = styled.div `
+  position: relative;
+  width: 100%;
+`;
+const ResponseCommentLabel = styled.label `
+  position: absolute;
+  top: -8px; 
+  left: 12px;
+  background-color: white; 
+  padding: 0 4px;
+  font-size: 0.9rem;
+  color: rgb(80,80,80);
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+`;
+const ResponseCommentTextArea = styled.textarea.attrs({
+    maxLength: 500,
+}) `
+    width: 100%;
+    height: 100px;
+    border: 1px solid ${props => props.$isValid ? (props.$isModifiedWhen ? "#E29000" : '#b4b4b4') : TMColors.error};
+    border-radius: 10px;
+    padding: 10px;
+    resize: none;
+    cursor: ${props => props.disabled ? 'not-allowed' : 'text'};
+    &:focus {
+        outline: none;
+        border-bottom: 4px solid ${props => props.$isValid ? TMColors.primaryColor : TMColors.error};
+    }
+`;
+const ResponseCommentCharacterCounter = styled.div `
+    text-align: right;
+    font-size: 0.8rem;
+    color: #6c757d;
+    margin-top: 4px;
+`;
 const TMTaskForm = (props) => {
     // Custom hook to manage workflow approval data
     const { refreshWorkflowApprove } = useWorkflowApprove();
@@ -66,7 +105,8 @@ const TMTaskForm = (props) => {
         priority: false,
         startDate: false,
         endDate: false,
-        remTime: false
+        remTime: false,
+        response: false
     });
     useEffect(() => {
         const fetchUsers = async () => {
@@ -101,7 +141,8 @@ const TMTaskForm = (props) => {
                 priority: isTaskAssignedByDifferentUser,
                 startDate: isTaskAssignedByDifferentUser,
                 endDate: isTaskAssignedByDifferentUser,
-                remTime: false
+                remTime: false,
+                response: false
             });
             const newTaskDescriptor = new TaskDescriptor();
             Object.assign(newTaskDescriptor, formDataOrig);
@@ -118,7 +159,8 @@ const TMTaskForm = (props) => {
                 priority: false,
                 startDate: false,
                 endDate: false,
-                remTime: false
+                remTime: false,
+                response: false
             });
         }
     }, [formDataOrig, formMode]);
@@ -157,6 +199,9 @@ const TMTaskForm = (props) => {
             return;
         setFormData({ ...formData ?? {}, priority: e?.target?.value });
     };
+    const onAnswerChange = (e) => {
+        setFormData({ ...formData ?? {}, response: e.target.value ?? '' });
+    };
     // Function to handle the undo action
     const onUndoCallback = () => {
         setFormData(formDataOrig);
@@ -285,7 +330,9 @@ const TMTaskForm = (props) => {
                                                         setFormData({ ...formData ?? {}, toID: newValue[0] });
                                                     } }) })
                                             : formMode === FormModes.Update && _jsxs(_Fragment, { children: [areDifferentIDs(formDataOrig?.fromID, SDK_Globals.tmSession?.SessionDescr?.userID) && _jsx("div", { style: { width: isMobile ? '100%' : '50%' }, children: _jsx(TMTextBox, { label: SDKUI_Localizator.AssignedBy, value: formData?.fromName ?? '', readOnly: true }) }), areDifferentIDs(formDataOrig?.toID, SDK_Globals.tmSession?.SessionDescr?.userID) && _jsx("div", { style: { width: isMobile ? '100%' : '50%' }, children: _jsx(TMTextBox, { label: SDKUI_Localizator.AssignedTo, value: formData?.toName ?? '', readOnly: true }) })] }) }), _jsx(TMConditionalWrapper, { condition: !isMobile, wrapper: children => _jsx("div", { style: { display: 'flex', flexDirection: 'row', width: '100%', gap: 10 }, children: children }), children: _jsxs(_Fragment, { children: [_jsx("div", { style: { width: isMobile ? '100%' : '50%' }, children: _jsx(TMDropDown, { label: SDKUI_Localizator.Status, value: formData?.state, dataSource: getStatusLocalizatorValues(), isModifiedWhen: formData?.state !== formDataOrig?.state, onValueChanged: onStatusValueChange, readOnly: fieldsReadOnly.status }) }), _jsx("div", { style: { width: isMobile ? '100%' : '50%' }, children: !fieldsReadOnly.priority ? _jsx(TMDropDown, { label: SDKUI_Localizator.Priority, value: formData?.priority, dataSource: getPriorityLocalizatorValues(), isModifiedWhen: formData?.priority !== formDataOrig?.priority, onValueChanged: onPriorityValueChange })
-                                                        : _jsx(TMTextBox, { label: SDKUI_Localizator.Priority, value: getPriorityLocalizatorValue(formData?.priority ?? Priorities.Low), readOnly: true }) })] }) }), _jsx(TMConditionalWrapper, { condition: !isMobile, wrapper: children => _jsx("div", { style: { display: 'flex', flexDirection: 'row', width: '100%', gap: 10 }, children: children }), children: _jsxs(_Fragment, { children: [_jsx("div", { style: { width: isMobile ? '100%' : '50%', marginTop: 10 }, children: !fieldsReadOnly.startDate ? _jsx(TMDateBox, { id: "start-date", resetTimeToZeroOnKeyPress: false, label: SDKUI_Localizator.StartDate, dateDisplayType: DateDisplayTypes.DateTime, value: formData?.startTime, isModifiedWhen: formData?.startTime !== formDataOrig?.startTime, validationItems: validationItems?.filter(o => o.PropertyName === SDKUI_Localizator.ErrorStartEndDate), onContentReady: handleStartTimeContentReady, onValueChange: (value) => { setFormData({ ...formData ?? {}, startTime: value }); }, showClearButton: true }) : _jsx(TMTextBox, { label: SDKUI_Localizator.StartDate, value: formData?.startTime ? formatDate(formData?.startTime) : '', readOnly: true }) }), _jsx("div", { style: { width: isMobile ? '100%' : '50%', marginTop: 10 }, children: !fieldsReadOnly.startDate ? _jsx(TMDateBox, { id: "end-date", resetTimeToZeroOnKeyPress: false, label: SDKUI_Localizator.Expiration, dateDisplayType: DateDisplayTypes.DateTime, value: formData?.endTime, isModifiedWhen: formData?.endTime !== formDataOrig?.endTime, validationItems: validationItems?.filter(o => o.PropertyName === SDKUI_Localizator.ErrorStartEndDate || o.PropertyName === SDKUI_Localizator.ErrorEndRemDate), onContentReady: handleEndTimeContentReady, onValueChange: (value) => { setFormData({ ...formData ?? {}, endTime: value }); }, showClearButton: true, readOnly: fieldsReadOnly.endDate }) : _jsx(TMTextBox, { label: SDKUI_Localizator.Expiration, value: formData?.endTime ? formatDate(formData?.endTime) : '', readOnly: true }) })] }) }), _jsx(TMConditionalWrapper, { condition: !isMobile, wrapper: children => _jsx("div", { style: { display: 'flex', flexDirection: 'row', width: '100%', gap: 3 }, children: children }), children: _jsx("div", { style: { width: isMobile ? '100%' : '50%', marginTop: 10 }, children: _jsx(TMDateBox, { id: "alert-time", resetTimeToZeroOnKeyPress: false, label: SDKUI_Localizator.Reminder, dateDisplayType: DateDisplayTypes.DateTime, value: formData?.remTime ?? undefined, isModifiedWhen: formData?.remTime !== formDataOrig?.remTime, validationItems: validationItems?.filter(o => o.PropertyName === SDKUI_Localizator.ErrorEndRemDate), onValueChange: (value) => { setFormData({ ...formData ?? {}, remTime: value }); }, showClearButton: true, readOnly: fieldsReadOnly.remTime }) }) })] }) }) }), (showDcmtForm && formData?.iD1 && formData?.iD2) &&
+                                                        : _jsx(TMTextBox, { label: SDKUI_Localizator.Priority, value: getPriorityLocalizatorValue(formData?.priority ?? Priorities.Low), readOnly: true }) })] }) }), _jsx(TMConditionalWrapper, { condition: !isMobile, wrapper: children => _jsx("div", { style: { display: 'flex', flexDirection: 'row', width: '100%', gap: 10 }, children: children }), children: _jsxs(_Fragment, { children: [_jsx("div", { style: { width: isMobile ? '100%' : '50%', marginTop: 10 }, children: !fieldsReadOnly.startDate ? _jsx(TMDateBox, { id: "start-date", resetTimeToZeroOnKeyPress: false, label: SDKUI_Localizator.StartDate, dateDisplayType: DateDisplayTypes.DateTime, value: formData?.startTime, isModifiedWhen: formData?.startTime !== formDataOrig?.startTime, validationItems: validationItems?.filter(o => o.PropertyName === SDKUI_Localizator.ErrorStartEndDate), onContentReady: handleStartTimeContentReady, onValueChange: (value) => { setFormData({ ...formData ?? {}, startTime: value }); }, showClearButton: true }) : _jsx(TMTextBox, { label: SDKUI_Localizator.StartDate, value: formData?.startTime ? formatDate(formData?.startTime) : '', readOnly: true }) }), _jsx("div", { style: { width: isMobile ? '100%' : '50%', marginTop: 10 }, children: !fieldsReadOnly.startDate ? _jsx(TMDateBox, { id: "end-date", resetTimeToZeroOnKeyPress: false, label: SDKUI_Localizator.Expiration, dateDisplayType: DateDisplayTypes.DateTime, value: formData?.endTime, isModifiedWhen: formData?.endTime !== formDataOrig?.endTime, validationItems: validationItems?.filter(o => o.PropertyName === SDKUI_Localizator.ErrorStartEndDate || o.PropertyName === SDKUI_Localizator.ErrorEndRemDate), onContentReady: handleEndTimeContentReady, onValueChange: (value) => { setFormData({ ...formData ?? {}, endTime: value }); }, showClearButton: true, readOnly: fieldsReadOnly.endDate }) : _jsx(TMTextBox, { label: SDKUI_Localizator.Expiration, value: formData?.endTime ? formatDate(formData?.endTime) : '', readOnly: true }) })] }) }), _jsx(TMConditionalWrapper, { condition: !isMobile, wrapper: children => _jsx("div", { style: { display: 'flex', flexDirection: 'row', width: '100%', gap: 3 }, children: children }), children: _jsx("div", { style: { width: isMobile ? '100%' : '50%', marginTop: 10 }, children: _jsx(TMDateBox, { id: "alert-time", resetTimeToZeroOnKeyPress: false, label: SDKUI_Localizator.Reminder, dateDisplayType: DateDisplayTypes.DateTime, value: formData?.remTime ?? undefined, isModifiedWhen: formData?.remTime !== formDataOrig?.remTime, validationItems: validationItems?.filter(o => o.PropertyName === SDKUI_Localizator.ErrorEndRemDate), onValueChange: (value) => { setFormData({ ...formData ?? {}, remTime: value }); }, showClearButton: true, readOnly: fieldsReadOnly.remTime }) }) }), (formData?.state && [Task_States.Completed, Task_States.Waiting, Task_States.Deferred].includes(formData?.state) ||
+                                        (formData?.response ?? "") !== "") && _jsx(TMConditionalWrapper, { condition: !isMobile, wrapper: children => _jsx("div", { style: { display: 'flex', flexDirection: 'row', width: '100%', gap: 3 }, children: children }), children: _jsx("div", { style: { width: isMobile ? '100%' : '50%', marginTop: 10 }, children: _jsxs(ResponseCommentWrapper, { children: [_jsx(ResponseCommentTextArea, { id: "responseId", name: "response", "$isValid": true, value: formData?.response ?? '', onChange: onAnswerChange, "$isModifiedWhen": formData?.response !== formDataOrig?.response, disabled: (formData?.response ?? "") !== "" &&
+                                                            (formData?.state && ![Task_States.Completed, Task_States.Waiting, Task_States.Deferred].includes(formData?.state)) }), _jsxs(ResponseCommentLabel, { htmlFor: "responseId", children: [SDKUI_Localizator.Answer, _jsxs(TMTooltip, { content: SDKUI_Localizator.AnswerTooltip, children: [" ", _jsx("i", { className: 'dx-icon-info' }), " "] })] }), _jsx(ResponseCommentCharacterCounter, { children: `${500 - (formData?.response ?? '').length} ${SDKUI_Localizator.CharactersRemaining}` })] }) }) })] }) }) }), (showDcmtForm && formData?.iD1 && formData?.iD2) &&
                         _jsx(TMDcmtForm, { titleModal: formData.iD1Name ?? '-', isModal: true, TID: formData.iD1, DID: formData.iD2, allowButtonsRefs: true, taskMoreInfo: formData, onWFOperationCompleted: refreshWorkflowApprove, onTaskCompleted: onTaskCompleted, onClose: () => { setShowDcmtForm(false); }, onOpenS4TViewerRequest: onOpenS4TViewerRequest, s4TViewerDialogComponent: s4TViewerDialogComponent, allTasks: allTasks, getAllTasks: getAllTasks, deleteTaskByIdsCallback: deleteTaskByIdsCallback, addTaskCallback: addTaskCallback, editTaskCallback: editTaskCallback, handleNavigateToWGs: handleNavigateToWGs, handleNavigateToDossiers: handleNavigateToDossiers })] }) }) }));
 };
 export default TMTaskForm;

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

@@ -32,6 +32,7 @@ export interface IFieldsEditability {
     startDate: boolean;
     endDate: boolean;
     remTime: boolean;
+    response: boolean;
 }
 export declare const sortTasks: (tasks: Array<TaskDescriptor>) => Array<TaskDescriptor>;
 export declare const taskIsToday: (startTime: Date, endTime: Date) => boolean;

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

@@ -289,13 +289,13 @@ const TMTasksView = (props) => {
         }
         setShowTaskForm(false);
     };
-    const handleNavigateToDossiersWrapper = useCallback((dossierId) => {
+    const handleNavigateToDossiersWrapper = useCallback(async (dossierId) => {
         setShowTaskForm(false);
-        handleNavigateToDossiers(dossierId);
+        await handleNavigateToDossiers(dossierId);
     }, []);
-    const handleNavigateToWGsWrapper = useCallback((workGroupId) => {
+    const handleNavigateToWGsWrapper = useCallback(async (workGroupId) => {
         setShowTaskForm(false);
-        handleNavigateToWGs(workGroupId);
+        await handleNavigateToWGs(workGroupId);
     }, []);
     const onContextMenuPreparing = (e) => {
         if (e === undefined)
@@ -524,7 +524,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, '670px', '80%', '95%'), title: SDKUI_Localizator.Widget_Activities, isModal: true, formMode: formMode ?? FormModes.Create, visualizedTasks: visualizedTasks, currentTask: currentTask, setCurrentTask: setCurrentTask, 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: handleNavigateToWGs, handleNavigateToDossiers: handleNavigateToDossiers }), _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: calcResponsiveSizes(deviceType, '700px', '700px', '95%'), height: calcResponsiveSizes(deviceType, '700px', '700px', '95%'), title: SDKUI_Localizator.Widget_Activities, isModal: true, formMode: formMode ?? FormModes.Create, visualizedTasks: visualizedTasks, currentTask: currentTask, setCurrentTask: setCurrentTask, 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/helper/SDKUI_Localizator.d.ts

@@ -33,6 +33,8 @@ export declare class SDKUI_Localizator {
     static get AllPriorities(): "Alle Prioritäten" | "All priorities" | "Todas las prioridades" | "Toutes les priorités" | "Todas as prioridades" | "Tutte le priorità";
     static get AllStates(): "Alle Staaten" | "All states" | "Todos los estados" | "Tous les états" | "Todos os estados" | "Tutti gli stati";
     static get Alphabetic(): "Alphabetisch" | "Alphabetic" | "Alfabético" | "Alphabétique" | "Alfabética" | "Alfabetico";
+    static get Answer(): "Antwort" | "Answer" | "Respuesta" | "Réponse" | "Resposta" | "Risposta";
+    static get AnswerTooltip(): "Die Antwort kann nur bearbeitet werden, wenn der Aktivitätsstatus \"Abgeschlossen\", \"Ausstehend\" oder \"Verschoben\" ist." | "The answer can be edited only if the activity status is \"Completed\", \"Pending\", or \"Deferred\"." | "La respuesta solo se puede editar si el estado de la actividad es \"Completada\", \"Pendiente\" o \"Pospuesta\"." | "La réponse peut être modifiée uniquement si l'état de l’activité est \"Terminée\", \"En attente\" ou \"Reportée\"." | "A resposta só pode ser editada se o estado da atividade for \"Concluída\", \"Pendente\" ou \"Adiada\"." | "La risposta può essere modificata solo se lo stato dell’attività è \"Completata\", \"In attesa\" o \"Rinviata\".";
     static get Application(): "Anwendung" | "Application" | "Aplicación" | "Aplicação" | "Applicazione";
     static get Applied(): string;
     static get Apply(): "Anwenden" | "Apply" | "Aplicar" | "Applique" | "Applica";

package/lib/helper/SDKUI_Localizator.js

@@ -278,6 +278,32 @@ export class SDKUI_Localizator {
             default: return "Alfabetico";
         }
     }
+    static get Answer() {
+        switch (this._cultureID) {
+            case CultureIDs.De_DE: return "Antwort";
+            case CultureIDs.En_US: return "Answer";
+            case CultureIDs.Es_ES: return "Respuesta";
+            case CultureIDs.Fr_FR: return "Réponse";
+            case CultureIDs.Pt_PT: return "Resposta";
+            default: return "Risposta";
+        }
+    }
+    static get AnswerTooltip() {
+        switch (this._cultureID) {
+            case CultureIDs.De_DE:
+                return "Die Antwort kann nur bearbeitet werden, wenn der Aktivitätsstatus \"Abgeschlossen\", \"Ausstehend\" oder \"Verschoben\" ist.";
+            case CultureIDs.En_US:
+                return "The answer can be edited only if the activity status is \"Completed\", \"Pending\", or \"Deferred\".";
+            case CultureIDs.Es_ES:
+                return "La respuesta solo se puede editar si el estado de la actividad es \"Completada\", \"Pendiente\" o \"Pospuesta\".";
+            case CultureIDs.Fr_FR:
+                return "La réponse peut être modifiée uniquement si l'état de l’activité est \"Terminée\", \"En attente\" ou \"Reportée\".";
+            case CultureIDs.Pt_PT:
+                return "A resposta só pode ser editada se o estado da atividade for \"Concluída\", \"Pendente\" ou \"Adiada\".";
+            default:
+                return "La risposta può essere modificata solo se lo stato dell’attività è \"Completata\", \"In attesa\" o \"Rinviata\".";
+        }
+    }
     static get Application() {
         switch (this._cultureID) {
             case CultureIDs.De_DE: return "Anwendung";

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@topconsultnpm/sdkui-react",
-    "version": "6.19.0-dev1.57",
+    "version": "6.19.0-dev1.59",
     "description": "",
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",