@topconsultnpm/sdkui-react 6.19.0-dev1.53 → 6.19.0-dev1.55

package/lib/components/base/TMLayout.d.ts

@@ -48,7 +48,8 @@ export interface ITMLayoutContainerProps {
     alignItems?: string;
     direction?: 'vertical' | 'horizontal';
     onClick?: () => void;
+    onContextMenu?: (e: React.MouseEvent) => void;
 }
-declare const TMLayoutContainer: ({ gap, onClick, justifyContent, alignItems, children, direction }: ITMLayoutContainerProps) => import("react/jsx-runtime").JSX.Element;
+declare const TMLayoutContainer: ({ gap, onClick, justifyContent, alignItems, children, direction, onContextMenu }: ITMLayoutContainerProps) => import("react/jsx-runtime").JSX.Element;
 export { TMCard, TMLayoutItem, TMSplitterLayout };
 export default TMLayoutContainer;

package/lib/components/base/TMLayout.js

@@ -193,9 +193,9 @@ const TMSplitterLayout = ({ animation = false, showSeparator = true, separatorCo
 const TMLayoutItem = ({ onClick, children, width = '100%', minWidth, maxWidth, maxHeight, height = '100%', minHeight }) => {
     return (_jsx(StyledLayoutItem, { onClick: onClick, "$height": height, "$maxHeight": maxHeight, "$minHeight": minHeight, "$width": width, "$minWidth": minWidth, "$maxWidth": maxWidth, children: children }));
 };
-const TMLayoutContainer = ({ gap = 3, onClick, justifyContent = 'flex-start', alignItems = 'flex-start', children, direction = 'vertical' }) => {
+const TMLayoutContainer = ({ gap = 3, onClick, justifyContent = 'flex-start', alignItems = 'flex-start', children, direction = 'vertical', onContextMenu }) => {
     const renderedEls = () => { return (React.Children.map(children, child => (child))); };
-    return (_jsxs(StyledLayoutContainer, { "$alignItems": alignItems, "$justifyContent": justifyContent, onClick: onClick, "$direction": direction, style: { gap: gap }, children: [" ", renderedEls(), " "] }));
+    return (_jsxs(StyledLayoutContainer, { "$alignItems": alignItems, "$justifyContent": justifyContent, onClick: onClick, onContextMenu: onContextMenu, "$direction": direction, style: { gap: gap }, children: [" ", renderedEls(), " "] }));
 };
 export { TMCard, TMLayoutItem, TMSplitterLayout };
 export default TMLayoutContainer;

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

@@ -83,4 +83,4 @@ const TMDcmtBlog = ({ tid, did, isVisible }) => {
 export default TMDcmtBlog;
 const StyledContainer = styled.div ` user-select: none; overflow: hidden; background-color: #ffffff; width: calc(100%); height: calc(100%); display: flex; gap: 10px; `;
 const StyledSectionContainer = styled.div ` width:  100%; height: 100%; display:flex; flex-direction: column; `;
-const StyledBoardContainer = styled.div `width: 100%; height: 100%; padding: 10px;`;
+const StyledBoardContainer = styled.div `width: 100%; height: 100%;`;

package/lib/components/features/search/TMSearch.js

@@ -177,7 +177,7 @@ const TMSearch = ({ openInOffice, isVisible, inputTID, inputSqdID, inputMids, is
         } }), [fromDTD, showSearchResults, setShowSearchResults, currentSQD, isExpertMode, mruTIDs, searchResult, passToArchiveCallback, inputMids]);
     const tmSavedQuerySelectorElement = useMemo(() => _jsxs(TabPanel, { width: "100%", height: "100%", showNavButtons: true, repaintChangesOnly: true, selectedIndex: currentSQDMode, onSelectedIndexChange: (index) => setCurrentSQDMode(index), children: [(currentTID || currentSQD) ? _jsx(Item, { title: fromDTD?.nameLoc, children: _jsx(TMSavedQuerySelectorWrapper, { allowShowSearch: false, items: filteredByTIDSQDs, selectedId: currentSQD?.id, onRefreshData: () => { loadDataSQDsAsync(true); }, onItemClick: (sqd) => {
                         onSQDItemClick(sqd, setSQDAsync);
-                    }, onDeleted: (sqd) => onSQDDeleted(sqd, sqd.id == currentSQD?.id ? filteredByTIDSQDs.find(o => o.id == 1) : currentSQD, setSQDAsync) }) }) : _jsx(_Fragment, {}), _jsx(Item, { title: SDKUI_Localizator.Alls2, children: _jsx(TMSavedQuerySelectorWrapper, { allowShowSearch: true, items: allSQDs, manageDefault: false, onItemClick: (sqd) => {
+                    }, onDeleted: (sqd) => onSQDDeleted(sqd, sqd.id == currentSQD?.id ? filteredByTIDSQDs.find(o => o.id == 1) : currentSQD, setSQDAsync) }) }) : _jsx(_Fragment, {}), _jsx(Item, { title: SDKUI_Localizator.AllFemale, children: _jsx(TMSavedQuerySelectorWrapper, { allowShowSearch: true, items: allSQDs, manageDefault: false, onItemClick: (sqd) => {
                         onSQDItemClick(sqd, setSQDAsync);
                     }, onDeleted: (sqd) => onSQDDeleted(sqd, sqd.id == currentSQD?.id ? undefined : currentSQD, setSQDAsync) }) })] }), [currentSQDMode, currentTID, currentSQD, fromDTD, filteredByTIDSQDs, allSQDs]);
     // --- PANEL DEFINITIONS ---

package/lib/components/features/search/TMSearchResult.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { SDK_Globals, DataColumnTypes, MetadataDataDomains, DataListViewModes, MetadataFormats, LayoutModes, TemplateTIDs, DcmtTypeListCacheService, AccessLevels, SystemMIDsAsNumber, RetrieveFileOptions, DcmtOpers, GeneralRetrieveFormats } from '@topconsultnpm/sdk-ts';
+import { SDK_Globals, DataColumnTypes, MetadataDataDomains, DataListViewModes, MetadataFormats, LayoutModes, TemplateTIDs, DcmtTypeListCacheService, AccessLevels, SystemMIDsAsNumber, RetrieveFileOptions, DcmtOpers, GeneralRetrieveFormats, AccessLevelsEx } from '@topconsultnpm/sdk-ts';
 import styled from 'styled-components';
 import { getCommandsMenuItems, getSelectedDcmtsOrFocused } from './TMSearchResultsMenuItems';
 import { genUniqueId, IconShow, IconBoard, IconDcmtTypeSys, IconDetailDcmts, SDKUI_Localizator, IconDelete, IconRefresh, IconMenuVertical, IconDownload, deepCompare, getDataColumnName, searchResultDescriptorToSimpleArray, searchResultToMetadataValues, IconSearchCheck, TMCommandsContextMenu } from '../../../helper';
@@ -157,6 +157,15 @@ const TMSearchResult = ({ context = SearchResultContext.METADATA_SEARCH, isVisib
             ShowAlert({ message: "Nessun documento selezionato", mode: "warning", title: 'Archivio Condivisa', duration: 3000 });
             return;
         }
+        if (fromDTD?.perm?.canArchive !== AccessLevelsEx.Yes && fromDTD?.perm?.canArchive !== AccessLevelsEx.Mixed) {
+            ShowAlert({
+                message: "Non hai i permessi per archiviare documenti di questo tipo.",
+                mode: 'warning',
+                title: 'Archivio Condivisa',
+                duration: 5000
+            });
+            return;
+        }
         try {
             const rfo = new RetrieveFileOptions();
             rfo.retrieveReason = DcmtOpers.None;

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

@@ -0,0 +1,33 @@
+import React from 'react';
+import { TaskDescriptor, UserDescriptor } from '@topconsultnpm/sdk-ts';
+import { DcmtInfo, FormModes, TaskContext } from '../../../ts';
+export interface TMTaskFormProps {
+    id: number;
+    title: string;
+    isModal: boolean;
+    formMode: FormModes;
+    visualizedTasks: Array<TaskDescriptor>;
+    currentTask: TaskDescriptor | null;
+    setCurrentTask?: React.Dispatch<React.SetStateAction<TaskDescriptor | null>>;
+    selectedRowKeys: Array<number>;
+    handleFocusedRowKeyChange?: (row: TaskDescriptor | undefined) => void;
+    onStatusChanged?: () => void;
+    onSaved?: (newTask: TaskDescriptor) => void;
+    editTaskCallback?: (task: TaskDescriptor) => Promise<void>;
+    onClose?: () => void;
+    onCancel?: () => void;
+    handleNavigateToWGs?: (workGroupId: number) => void;
+    handleNavigateToDossiers?: (dossierId: number) => void;
+    taskContext?: TaskContext;
+    startDate?: Date;
+    endDate?: Date;
+    showBackButton?: boolean;
+    hasNavigation?: boolean;
+    width?: string;
+    height?: string;
+    usersList?: Array<UserDescriptor>;
+    onOpenS4TViewerRequest?: (dcmtInfo: Array<DcmtInfo>, onRefreshSearchAsync?: (() => Promise<void>)) => void;
+    s4TViewerDialogComponent?: React.ReactNode;
+}
+declare const TMTaskForm: (props: TMTaskFormProps) => import("react/jsx-runtime").JSX.Element;
+export default TMTaskForm;

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

@@ -0,0 +1,291 @@
+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 { areDifferentIDs, formatDate, getOriginLabel, getPriorityLocalizatorValue, getPriorityLocalizatorValues, getStatusLocalizatorValues, gotoPDGExtendedLabel, taskValidatorAsync } from './TMTasksUtils';
+import ScrollView from 'devextreme-react/cjs/scroll-view';
+import TMLayoutContainer from '../../base/TMLayout';
+import { FormModes } from '../../../ts';
+import { useWorkflowApprove } from '../../../hooks/useWorkflowApprove';
+import { SaveFormOptions, useSaveForm } from '../../../hooks/useForm';
+import { SDKUI_Localizator, calcIsModified, TMConditionalWrapper, getPdgsIconMap, DateDisplayTypes } from '../../../helper';
+import { TMExceptionBoxManager } from '../../base/TMPopUp';
+import TMSpinner from '../../base/TMSpinner';
+import TMTooltip from '../../base/TMTooltip';
+import TMUserChooser from '../../choosers/TMUserChooser';
+import TMDateBox from '../../editors/TMDateBox';
+import TMDropDown from '../../editors/TMDropDown';
+import TMTextArea from '../../editors/TMTextArea';
+import TMTextBox from '../../editors/TMTextBox';
+import TMSaveForm from '../../forms/TMSaveForm';
+import TMDcmtForm from '../documents/TMDcmtForm';
+const TMTaskForm = (props) => {
+    // Custom hook to manage workflow approval data
+    const { refreshWorkflowApprove } = useWorkflowApprove();
+    const validator = async (taskDescriptor) => { return await taskValidatorAsync(taskDescriptor); };
+    // Destructure the props object to extract individual properties
+    const { id, title, isModal, formMode, visualizedTasks, editTaskCallback, currentTask, setCurrentTask, selectedRowKeys, handleFocusedRowKeyChange, onStatusChanged, onSaved, onClose, onCancel, handleNavigateToWGs, handleNavigateToDossiers, taskContext, startDate, endDate, showBackButton = true, hasNavigation = true, width = "100%", height = "100%", usersList, onOpenS4TViewerRequest, s4TViewerDialogComponent } = props;
+    const sfo = new SaveFormOptions();
+    sfo.objClass = ObjectClasses.Task;
+    const customizeFormData = (task) => {
+        if (taskContext?.document && formMode === FormModes.Create) {
+            task.pdG = PdGs.DT;
+            task.iD1 = taskContext.document.tid;
+            task.iD2 = taskContext.document.did;
+        }
+        else if (taskContext?.workingGroup && formMode === FormModes.Create) {
+            task.pdG = PdGs.WG;
+            task.iD1 = taskContext.workingGroup.id;
+        }
+        else if (taskContext?.dossier && formMode === FormModes.Create) {
+            task.pdG = PdGs.CF;
+            task.iD1 = taskContext.dossier.id;
+            if (currentTask)
+                task.name = currentTask.name;
+        }
+        else if (taskContext?.workItem && formMode === FormModes.Create) {
+            task.pdG = PdGs.DT;
+            task.iD1 = taskContext.workItem.tid;
+            task.iD2 = taskContext.workItem.did;
+            task.toID = 0;
+        }
+        return task;
+    };
+    const { formData, setFormData, formDataOrig, validationItems, exception, saveDataAsync } = useSaveForm(formMode, id, sfo, validator, onSaved, onStatusChanged, customizeFormData);
+    const containerRef = useRef(null);
+    const [isMobile, setIsMobile] = useState(false);
+    const [showDcmtForm, setShowDcmtForm] = useState(false);
+    const mobileBreakpoint = 768;
+    const [users, setUsers] = useState([]); // State to store the users
+    // Initial state for the fields' editability (readonly)
+    const [fieldsReadOnly, setFieldsReadOnly] = useState({
+        name: false,
+        description: false,
+        fromID: false,
+        assignedTO: false,
+        status: false,
+        priority: false,
+        startDate: false,
+        endDate: false,
+        remTime: false
+    });
+    useEffect(() => {
+        const fetchUsers = async () => {
+            try {
+                // Show spinner while loading
+                TMSpinner.show({ description: `${SDKUI_Localizator.Loading} - ${SDK_Localizator.Users} ...` });
+                const userList = await UserListCacheService.GetAllAsync();
+                setUsers(userList); // Update state with the fetched users
+            }
+            catch (err) {
+                TMExceptionBoxManager.show({ exception: err });
+            }
+            finally {
+                TMSpinner.hide();
+            }
+        };
+        fetchUsers();
+    }, []);
+    useEffect(() => {
+        if (isModal)
+            setIsMobile(true);
+    }, [isModal]);
+    useEffect(() => {
+        if (formDataOrig && formMode === FormModes.Update) {
+            const isTaskAssignedByDifferentUser = areDifferentIDs(formDataOrig.fromID, SDK_Globals.tmSession?.SessionDescr?.userID);
+            setFieldsReadOnly({
+                name: isTaskAssignedByDifferentUser,
+                description: isTaskAssignedByDifferentUser,
+                fromID: isTaskAssignedByDifferentUser,
+                assignedTO: isTaskAssignedByDifferentUser,
+                status: false,
+                priority: isTaskAssignedByDifferentUser,
+                startDate: isTaskAssignedByDifferentUser,
+                endDate: isTaskAssignedByDifferentUser,
+                remTime: false
+            });
+            const newTaskDescriptor = new TaskDescriptor();
+            Object.assign(newTaskDescriptor, formDataOrig);
+            newTaskDescriptor.isNew = 0;
+            editTaskCallback?.(newTaskDescriptor);
+        }
+        else if (formDataOrig && formMode === FormModes.Create && taskContext?.dossier && currentTask) {
+            setFieldsReadOnly({
+                name: true,
+                description: false,
+                fromID: false,
+                assignedTO: false,
+                status: false,
+                priority: false,
+                startDate: false,
+                endDate: false,
+                remTime: false
+            });
+        }
+    }, [formDataOrig, formMode]);
+    useEffect(() => {
+        if (!isModal) {
+            // Function to handle resize events and update the mobile state based on container width.
+            const updateDimensions = (entries) => {
+                for (let entry of entries) {
+                    const { width } = entry.contentRect;
+                    setIsMobile(width <= mobileBreakpoint);
+                }
+            };
+            // Create a ResizeObserver to observe container size changes
+            const resizeObserver = new ResizeObserver(updateDimensions);
+            if (containerRef.current) {
+                resizeObserver.observe(containerRef.current);
+            }
+            // Cleanup: Stop observing when the component unmounts or the dependency changes.
+            return () => {
+                if (containerRef.current) {
+                    resizeObserver.unobserve(containerRef.current);
+                }
+            };
+        }
+        return undefined;
+    }, [containerRef, isModal]); // Dependency array ensures this effect runs when containerRef changes.
+    // Function to handle changes in the status value of a TM Drop Down
+    const onStatusValueChange = (e) => {
+        if (!e?.target?.value)
+            return;
+        setFormData({ ...formData ?? {}, state: e?.target?.value });
+    };
+    // Function to handle changes in the priority value of a TM Drop Down
+    const onPriorityValueChange = (e) => {
+        if (!e?.target?.value)
+            return;
+        setFormData({ ...formData ?? {}, priority: e?.target?.value });
+    };
+    // Function to handle the undo action
+    const onUndoCallback = () => {
+        setFormData(formDataOrig);
+    };
+    const canNext = () => {
+        if (currentTask === null)
+            return false;
+        if (visualizedTasks.length === 1)
+            return false;
+        let index = visualizedTasks.findIndex(item => item.id === currentTask.id);
+        if (index < visualizedTasks.length - 1) {
+            return true;
+        }
+        else {
+            return false;
+        }
+    };
+    const canPrev = () => {
+        if (currentTask === null)
+            return false;
+        if (visualizedTasks.length === 1)
+            return false;
+        let index = visualizedTasks.findIndex(item => item.id === currentTask.id);
+        if (index > 0) {
+            return true;
+        }
+        else {
+            return false;
+        }
+    };
+    const onNextCallback = () => {
+        if (currentTask === null)
+            return;
+        if (visualizedTasks.length === 0)
+            return;
+        let index = visualizedTasks.findIndex(item => item.id === currentTask.id);
+        const nextTask = visualizedTasks[index + 1];
+        if (nextTask) {
+            setCurrentTask?.(nextTask);
+            if (nextTask.id)
+                handleFocusedRowKeyChange?.(nextTask);
+        }
+    };
+    const onPrevCallback = () => {
+        if (currentTask === null)
+            return;
+        if (visualizedTasks.length === 0)
+            return;
+        let index = visualizedTasks.findIndex(item => item.id === currentTask.id);
+        const prevTask = visualizedTasks[index - 1];
+        if (prevTask) {
+            setCurrentTask?.(prevTask);
+            if (prevTask.id)
+                handleFocusedRowKeyChange?.(prevTask);
+        }
+    };
+    const gotoPDGExtendedLabelClickCallback = () => {
+        // Return early if formData is not defined
+        if (!formData)
+            return;
+        // Destructure needed properties from formData
+        const { pdG = PdGs.None, iD1, iD2, iD1Name } = formData;
+        // Check if pdG is None
+        if (pdG === PdGs.None)
+            return;
+        // If both id1 and id2 are present and pdg is of type DT, show the document form
+        if (iD1 && iD2 && pdG === PdGs.DT) {
+            setShowDcmtForm(true);
+            return; // Exit the function after showing the form
+        }
+        if (iD1 && pdG === PdGs.WG) {
+            // Working Group navigation
+            if (handleNavigateToWGs) {
+                handleNavigateToWGs(iD1);
+            }
+            return; // Exit the function after navigation
+        }
+        if (iD1 && pdG === PdGs.CF) {
+            // Dossier navigation
+            if (handleNavigateToDossiers) {
+                handleNavigateToDossiers(iD1);
+            }
+            return; // Exit the function after navigation
+        }
+        // Otherwise, alert the user with the provided information
+        alert(gotoPDGExtendedLabel(false, pdG, iD1Name));
+    };
+    const handleStartTimeContentReady = () => {
+        setTimeout(() => { if (startDate && !formData?.startTime && formMode === FormModes.Create) {
+            setFormData(prev => ({ ...prev, startTime: startDate }));
+        } }, 100);
+    };
+    const handleEndTimeContentReady = () => {
+        setTimeout(() => { if (endDate && !formData?.endTime && formMode === FormModes.Create) {
+            setFormData(prev => ({ ...prev, endTime: endDate }));
+        } }, 200);
+    };
+    const onCloseCallback = () => {
+        if (formData && formData.id) {
+            if (!selectedRowKeys.includes(formData.id)) {
+                handleFocusedRowKeyChange?.(formData);
+            }
+        }
+        onClose?.();
+    };
+    const onTaskCompleted = async (task) => {
+        await editTaskCallback?.(task);
+        onClose?.();
+    };
+    return (_jsx("div", { style: { width: "100%", height: "100%", overflow: "auto" }, ref: containerRef, children: _jsx(TMSaveForm, { width: width, height: height, id: id, title: title, isModal: isModal, formMode: formMode, onSaveAsync: saveDataAsync, onClose: onCloseCallback, onUndo: onUndoCallback, exception: exception, isModified: calcIsModified(formData, formDataOrig), validationItems: validationItems, showBackButton: showBackButton, hasNavigation: (hasNavigation && formMode !== FormModes.Create), canNext: canNext(), onNext: onNextCallback, canPrev: canPrev(), onPrev: onPrevCallback, showToolbar: !(showDcmtForm && formData?.iD1 && formData?.iD2), children: _jsxs(_Fragment, { children: [_jsx(ScrollView, { direction: "vertical", useNative: true, height: "calc(100% - 35px)", children: _jsx("div", { style: { marginRight: "5px" }, children: _jsxs(TMLayoutContainer, { direction: 'vertical', gap: 2, children: [(formMode === FormModes.Update && areDifferentIDs(formDataOrig?.fromID, SDK_Globals.tmSession?.SessionDescr?.userID)) && _jsx(TMConditionalWrapper, { condition: !isMobile, wrapper: children => _jsx("div", { style: { display: 'flex', flexDirection: 'row', width: '100%', gap: 10 }, children: children }), children: _jsxs("div", { style: { width: '100%', display: 'flex', alignItems: 'center', color: "#E29000" }, children: [_jsx("i", { className: "dx-icon-info", style: { fontSize: 20 } }), "\u00A0", _jsx("span", { children: SDKUI_Localizator.TaskAssignedMessage.replaceParams(formDataOrig?.fromName ?? '') })] }) }), taskContext?.workItem === undefined && (!areDifferentIDs(formData?.fromID, SDK_Globals.tmSession?.SessionDescr?.userID)
+                                        && !areDifferentIDs(formData?.toID, SDK_Globals.tmSession?.SessionDescr?.userID))
+                                        && _jsx(TMConditionalWrapper, { condition: !isMobile, wrapper: children => _jsx("div", { style: { display: 'flex', flexDirection: 'row', width: '100%', gap: 10 }, children: children }), children: _jsxs("div", { style: { width: '100%', display: 'flex', alignItems: 'center', color: "#2559A5" }, children: [_jsx("i", { className: "dx-icon-info", style: { fontSize: 20 } }), "\u00A0", _jsx("span", { children: SDKUI_Localizator.PersonalTaskAssignmentMessage })] }) }), (!areDifferentIDs(formData?.fromID, SDK_Globals.tmSession?.SessionDescr?.userID)
+                                        && areDifferentIDs(formData?.toID, SDK_Globals.tmSession?.SessionDescr?.userID))
+                                        && _jsx(TMConditionalWrapper, { condition: !isMobile, wrapper: children => _jsx("div", { style: { display: 'flex', flexDirection: 'row', width: '100%', gap: 10 }, children: children }), children: _jsxs("div", { style: { width: '100%', display: 'flex', alignItems: 'center', color: "#2559A5" }, children: [_jsx("i", { className: "dx-icon-info", style: { fontSize: 20 } }), "\u00A0", _jsx("span", { children: SDKUI_Localizator.TaskAssignedToUserMessage.replaceParams(users.find(user => user.id === formData?.toID)?.name ?? '-') })] }) }), (formMode === FormModes.Create && taskContext && taskContext.workingGroup && taskContext.workingGroup.id) && _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: "#000", marginTop: 10 }, children: _jsxs(TMTooltip, { content: getOriginLabel(PdGs.WG, taskContext.workingGroup.name), children: [_jsx("span", { children: getPdgsIconMap().get(PdGs.WG) }), "\u00A0", _jsx("span", { children: getOriginLabel(PdGs.WG, taskContext.workingGroup.name) })] }) }) }), (formMode === FormModes.Create && taskContext && taskContext.dossier && taskContext.dossier.id) && _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: "#000", marginTop: 10 }, children: _jsxs(TMTooltip, { content: getOriginLabel(PdGs.CF, taskContext.dossier.name), children: [_jsx("span", { children: getPdgsIconMap().get(PdGs.CF) }), "\u00A0", _jsx("span", { children: getOriginLabel(PdGs.CF, taskContext.dossier.name) })] }) }) }), (formMode === FormModes.Create && taskContext && taskContext.document && taskContext.document.tid && taskContext.document.did && taskContext.document.name) && _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: "#000", marginTop: 10 }, children: _jsxs(TMTooltip, { content: getOriginLabel(PdGs.DT, taskContext.document.name), children: [_jsx("span", { children: getPdgsIconMap().get(PdGs.DT) }), "\u00A0", _jsx("span", { children: getOriginLabel(PdGs.DT, taskContext.document.name) })] }) }) }), (formMode === FormModes.Create && taskContext && taskContext.workItem && taskContext.workItem.tid && taskContext.workItem.did && taskContext.workItem.name) && _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: "#000", marginTop: 10 }, children: _jsxs(TMTooltip, { content: getOriginLabel(PdGs.DT, taskContext.workItem.name), children: [_jsx("span", { children: getPdgsIconMap().get(PdGs.DT) }), "\u00A0", _jsx("span", { children: getOriginLabel(PdGs.DT, taskContext.workItem.name) })] }) }) }), (formMode === FormModes.Update && formData?.pdG && formData?.iD1Name) && _jsx(TMConditionalWrapper, { condition: !isMobile, wrapper: children => _jsx("div", { style: { display: 'flex', flexDirection: 'row', width: '100%', gap: 10 }, children: children }), children: _jsx("div", { style: { width: isMobile ? '100%' : '50%' }, children: _jsx("div", { style: { display: 'flex', alignItems: 'center', marginTop: 10 }, children: _jsx(TMTooltip, { content: formData?.pdG && formData?.pdG !== PdGs.None ? gotoPDGExtendedLabel(true, formData?.pdG, formData?.iD1Name) : '', children: _jsxs("span", { onClick: () => formData?.pdG && formData?.pdG !== PdGs.None ? gotoPDGExtendedLabelClickCallback() : null, style: {
+                                                            display: 'flex',
+                                                            alignItems: 'center',
+                                                            color: formData?.pdG && formData?.pdG !== PdGs.None ? '#1a0dab' : '#000',
+                                                            cursor: formData?.pdG && formData?.pdG !== PdGs.None ? 'pointer' : 'default',
+                                                            textDecoration: formData?.pdG && formData?.pdG !== PdGs.None ? 'underline' : 'none',
+                                                            fontWeight: 'bold',
+                                                            transition: 'color 0.2s ease-in-out'
+                                                        }, children: [_jsx("span", { children: getPdgsIconMap().get(formData?.pdG) }), "\u00A0", _jsx("span", { children: getOriginLabel(formData?.pdG, formData?.iD1Name) })] }) }) }) }) }), _jsx(TMConditionalWrapper, { condition: !isMobile, wrapper: children => _jsx("div", { style: { display: 'flex', flexDirection: 'row', width: '100%', gap: 10 }, children: children }), children: _jsx("div", { style: { width: isMobile ? '100%' : '50%' }, children: _jsx(TMTextBox, { label: SDKUI_Localizator.Name, value: formData?.name ?? '', readOnly: fieldsReadOnly.name, autoFocus: true, maxLength: 100, isModifiedWhen: formData?.name !== formDataOrig?.name, onValueChanged: (e) => { setFormData({ ...formData ?? {}, name: e.target.value }); }, validationItems: validationItems?.filter(o => o.PropertyName === SDKUI_Localizator.Name) }) }) }), _jsx("div", { style: { width: '100%' }, children: _jsx(TMTextArea, { label: SDKUI_Localizator.Description, value: formData?.description ?? '', maxLength: 200, readOnly: fieldsReadOnly.description, isModifiedWhen: formData?.description !== formDataOrig?.description, onValueChanged: (e) => { setFormData({ ...formData ?? {}, description: e.target.value }); }, validationItems: validationItems?.filter(o => o.PropertyName === SDKUI_Localizator.Description), resize: false }) }), _jsx(TMConditionalWrapper, { condition: !isMobile, wrapper: children => _jsx("div", { style: { display: 'flex', flexDirection: 'row', width: '100%', gap: 10 }, children: children }), children: (formMode === FormModes.Create || !areDifferentIDs(formDataOrig?.fromID, SDK_Globals.tmSession?.SessionDescr?.userID)) ?
+                                            _jsx("div", { id: "assignedToAnotherUserField", style: { width: isMobile ? '100%' : '50%' }, children: _jsx(TMUserChooser, { dataSource: usersList ?? undefined, allowMultipleSelection: false, label: SDKUI_Localizator.AssignedTo, readOnly: fieldsReadOnly.assignedTO, values: formData?.toID ? [formData?.toID] : [], isModifiedWhen: formData?.toID !== formDataOrig?.toID, validationItems: validationItems?.filter(o => o.PropertyName === SDKUI_Localizator.AssignedTo), onValueChanged: (newValue) => {
+                                                        if (newValue === undefined)
+                                                            return;
+                                                        setFormData({ ...formData ?? {}, toID: newValue[0] });
+                                                    } }) })
+                                            : formMode === FormModes.Update && _jsxs(_Fragment, { children: [areDifferentIDs(formDataOrig?.fromID, SDK_Globals.tmSession?.SessionDescr?.userID) && _jsx("div", { style: { width: isMobile ? '100%' : '50%' }, children: _jsx(TMTextBox, { label: SDKUI_Localizator.AssignedBy, value: formData?.fromName ?? '', readOnly: true }) }), areDifferentIDs(formDataOrig?.toID, SDK_Globals.tmSession?.SessionDescr?.userID) && _jsx("div", { style: { width: isMobile ? '100%' : '50%' }, children: _jsx(TMTextBox, { label: SDKUI_Localizator.AssignedTo, 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(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 })] }) }) }));
+};
+export default TMTaskForm;

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

@@ -0,0 +1,17 @@
+import React from "react";
+import { TaskDescriptor } from "@topconsultnpm/sdk-ts";
+import { FormModes } from "../../../ts";
+interface TMTasksAgendaProps {
+    id: string;
+    showId: boolean;
+    showSearch: boolean;
+    visualizedTasks: Array<TaskDescriptor>;
+    fromCell: boolean;
+    toCell: boolean;
+    currentAgendaDate: Date;
+    setCurrentAgendaDate: React.Dispatch<React.SetStateAction<Date>>;
+    openTaskForm: (formMode: FormModes, task?: TaskDescriptor) => void;
+    handleFocusedRowChange: (row: TaskDescriptor | undefined) => void;
+}
+declare const TMTasksAgenda: React.MemoExoticComponent<(props: TMTasksAgendaProps) => import("react/jsx-runtime").JSX.Element>;
+export default TMTasksAgenda;

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

@@ -0,0 +1,107 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import React, { useCallback, useEffect, useState } from "react";
+import ArrayStore from "devextreme/data/array_store";
+import Scheduler from "devextreme-react/cjs/scheduler";
+import { calculateNumberOfDays, highlightTaskText, priorityLegend, renderTaskIcons } from "./TMTasksUtilsView";
+import { Priorities, Task_States } from "@topconsultnpm/sdk-ts";
+import { checkIfNew, convertToSchedulerAppointments, findTasksBySearch, formatDate, getPriorityColor, getStatusLocalizatorValue } from "./TMTasksUtils";
+import ScrollView from "devextreme-react/cjs/scroll-view";
+import LoadIndicator from "devextreme-react/cjs/load-indicator";
+import { FormModes } from "../../../ts";
+import { SDKUI_Localizator } from "../../../helper";
+import TMCustomSearchBar from "../../../helper/TMCustomSearchBar";
+import TMTooltip from "../../base/TMTooltip";
+const TMTasksAgenda = React.memo((props) => {
+    const views = ['agenda'];
+    const { id, showId, showSearch, visualizedTasks, fromCell, toCell, currentAgendaDate, setCurrentAgendaDate, openTaskForm, handleFocusedRowChange } = props;
+    const [schedulerData, setSchedulerData] = useState([]);
+    const [loading, setLoading] = useState(false);
+    const [searchText, setSearchText] = useState('');
+    useEffect(() => {
+        setSchedulerData(convertToSchedulerAppointments(visualizedTasks));
+    }, [visualizedTasks]);
+    useEffect(() => {
+        let timeoutId;
+        if (searchText.length > 0) {
+            setLoading(true);
+            timeoutId = setTimeout(() => {
+                const filteredTasks = findTasksBySearch(visualizedTasks, searchText);
+                setSchedulerData(convertToSchedulerAppointments(filteredTasks));
+                setLoading(false);
+            }, 300);
+        }
+        else {
+            setSchedulerData(convertToSchedulerAppointments(visualizedTasks));
+            setLoading(false);
+        }
+        return () => {
+            clearTimeout(timeoutId);
+        };
+    }, [searchText]);
+    const appointmentRender = useCallback((params) => {
+        const currentTask = visualizedTasks.find(task => task.id !== undefined && task.id === params.appointmentData.id);
+        if (currentTask === undefined || currentTask.id === undefined)
+            return;
+        const startTime = currentTask.startTime;
+        const endTime = currentTask.endTime;
+        const remTime = currentTask.remTime;
+        const stateLabel = currentTask.state ?? Task_States.None;
+        const stateTooltipLabel = getStatusLocalizatorValue(stateLabel);
+        const pdg = currentTask.pdG ?? undefined;
+        const ID1Name = currentTask.iD1Name ?? '';
+        const isNew = checkIfNew(currentTask.fromID, currentTask.isNew);
+        const numberOfDays = calculateNumberOfDays(startTime, endTime);
+        const priority = currentTask.priority ?? Priorities.None;
+        let bgColor = 'transparent';
+        if (priority)
+            bgColor = getPriorityColor(priority);
+        return _jsx("div", { style: { width: "100%", height: "100%", display: 'flex', flexDirection: 'column', justifyContent: 'flex-start', alignItems: 'flex-end', backgroundColor: bgColor }, children: _jsx(ScrollView, { width: "100%", height: "100%", direction: "both", useNative: true, children: _jsxs("div", { style: { display: 'flex', justifyContent: 'space-between', width: '100%', fontWeight: isNew ? 'bold' : 'normal' }, children: [_jsxs("div", { style: { display: 'flex', flexDirection: 'column', alignItems: 'flex-start' }, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center' }, children: [showId && _jsxs("span", { children: [highlightTaskText(currentTask.id.toString(), searchText, currentTask.id), " - "] }), renderTaskIcons({ stateLabel, stateTooltipLabel, pdg, ID1Name, endTime, remTime, isNew, numberOfDays }), "\u00A0", _jsx("span", { style: { fontWeight: "bold" }, children: highlightTaskText(currentTask.name ?? '', searchText, currentTask.id) })] }), _jsxs("div", { children: [startTime !== undefined && (_jsxs("span", { children: [SDKUI_Localizator.StartDate, ": ", formatDate(startTime), " - \u00A0"] })), endTime !== undefined && (_jsxs("span", { children: [SDKUI_Localizator.Expiration, ": ", formatDate(endTime)] }))] })] }), fromCell && _jsxs("div", { style: { display: 'flex', alignItems: 'center', alignSelf: 'flex-end' }, children: [_jsxs("span", { children: [SDKUI_Localizator.AssignedBy, ":"] }), "\u00A0", _jsxs("div", { children: [highlightTaskText(currentTask.fromName ?? '', searchText, currentTask.id), (showId && currentTask.fromID) && _jsxs("span", { children: ["(", currentTask.fromID, ")"] })] })] }), toCell && _jsxs("div", { style: { display: 'flex', alignItems: 'center', alignSelf: 'flex-end' }, children: [_jsxs("span", { children: [SDKUI_Localizator.AssignedTo, ":"] }), "\u00A0", _jsxs("div", { children: [highlightTaskText(currentTask.toName ?? '', searchText, currentTask.id), (showId && currentTask.toID) && _jsxs("span", { children: ["(", currentTask.toID, ")"] })] })] })] }) }) });
+    }, [visualizedTasks, searchText]);
+    // handle appointment click handler
+    const handleAppointmentClick = useCallback((e) => {
+        if (e === undefined || e.event === undefined || e.appointmentData.id === undefined)
+            return;
+        e.event.preventDefault();
+        e.cancel = true;
+        const { id } = e.appointmentData;
+        // Update the state with the new set of selected appointments
+        const task = visualizedTasks.find(task => task.id === id);
+        if (task) {
+            handleFocusedRowChange(task);
+        }
+    }, [visualizedTasks]);
+    const onAppointmentContextMenu = useCallback((e) => {
+        if (e === undefined || e.event === undefined || e.appointmentData.id === undefined)
+            return;
+        e.event.preventDefault();
+        const { id } = e.appointmentData;
+        // Update the state with the new set of selected appointments
+        const task = visualizedTasks.find(task => task.id === id);
+        if (task) {
+            handleFocusedRowChange(task);
+        }
+    }, []);
+    const onCurrentDateChange = useCallback((value) => {
+        // Exit early if it's not a valid Date
+        if (!(value instanceof Date) || isNaN(value.getTime())) {
+            return;
+        }
+        setCurrentAgendaDate(value);
+        setSearchText('');
+    }, []);
+    // Double-click appointment handler
+    const handleAppointmentDblClick = useCallback((e) => {
+        if (e === undefined || e.event === undefined || e.appointmentData.id === undefined)
+            return;
+        e.event.preventDefault();
+        e.cancel = true;
+        const task = visualizedTasks.find(task => task.id === e.appointmentData.id);
+        if (task) {
+            handleFocusedRowChange(task);
+            openTaskForm(FormModes.Update, task);
+        }
+    }, [visualizedTasks]);
+    return _jsxs("div", { style: { height: "100%", width: "100%" }, children: [_jsxs("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', width: '100%', height: "48px" }, children: [_jsx("div", { style: { width: showSearch ? "160px" : "0", marginLeft: '10px' }, children: showSearch && (_jsx(TMCustomSearchBar, { initialValue: searchText, onSearchChange: (value) => setSearchText(value) })) }), _jsx("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: "default" }, children: _jsxs(TMTooltip, { content: priorityLegend(), children: [" ", SDKUI_Localizator.PriorityLegend] }) })] }), _jsx("div", { style: { height: "calc(100% - 48px)", width: "100%" }, children: loading ? _jsx("div", { style: { display: "flex", justifyContent: "center", alignItems: "center", height: "100%", width: "100%" }, children: _jsx(LoadIndicator, {}) })
+                    : _jsx("div", { id: `tasks-agenda-wrapper-${id}`, style: { width: "100%", height: "100%" }, onContextMenu: () => { handleFocusedRowChange(undefined); }, onClick: () => { handleFocusedRowChange(undefined); }, children: _jsx(Scheduler, { id: "tasks-agenda", defaultCurrentView: "agenda", dataSource: new ArrayStore({ key: `tasks-agenda-data`, data: schedulerData }), width: "100%", height: "100%", editing: false, views: views, currentDate: currentAgendaDate, appointmentRender: appointmentRender, onAppointmentDblClick: handleAppointmentDblClick, onCurrentDateChange: onCurrentDateChange, onAppointmentContextMenu: onAppointmentContextMenu, onAppointmentClick: handleAppointmentClick }) }) })] });
+});
+export default TMTasksAgenda;

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

@@ -0,0 +1,21 @@
+import React from 'react';
+import { TaskDescriptor } from "@topconsultnpm/sdk-ts";
+import { FormModes } from '../../../ts';
+interface TMTasksCalendarProps {
+    id: string;
+    visualizedTasks: Array<TaskDescriptor>;
+    showId: boolean;
+    showSearch: boolean;
+    fromCell: boolean;
+    toCell: boolean;
+    openTaskForm: (formMode: FormModes, task?: TaskDescriptor) => void;
+    onDeleteCallback: (rowIds: Array<number>) => void;
+    currentCalendarDate: Date;
+    setCurrentCalendarDate: React.Dispatch<React.SetStateAction<Date>>;
+    setCalendarStartDate: React.Dispatch<React.SetStateAction<Date | undefined>>;
+    setCalendarEndDate: React.Dispatch<React.SetStateAction<Date | undefined>>;
+    focusedRowKey: number | undefined;
+    handleFocusedRowChange: (row: TaskDescriptor | undefined) => void;
+}
+declare const TMTasksCalendar: (props: TMTasksCalendarProps) => import("react/jsx-runtime").JSX.Element;
+export default TMTasksCalendar;