@topconsultnpm/sdkui-react 6.19.0-dev1.6 → 6.19.0-dev1.60

package/lib/components/features/search/TMSearchResultsMenuItems.d.ts

@@ -4,7 +4,7 @@ import { TMDataGridContextMenuItem } from '../../base/TMDataGrid';
 import { DcmtInfo, DcmtOperationTypes, DownloadModes, DownloadTypes, SearchResultContext } from '../../../ts';
 export declare const getSelectedDcmtsOrFocused: (selectedItems: Array<any>, focusedItem: any, fileFormat?: FileFormats) => DcmtInfo[];
 export declare const signatureInformationCallback: (isMobile: boolean, inputDcmts: DcmtInfo[] | undefined) => Promise<void>;
-export declare const getCommandsMenuItems: (isMobile: boolean, dtd: DcmtTypeDescriptor | undefined, selectedItems: Array<any>, focusedItem: any, context: SearchResultContext, showFloatingBar: boolean, workingGroupContext: WorkingGroupDescriptor | undefined, showSearch: boolean, setShowFloatingBar: React.Dispatch<React.SetStateAction<boolean>>, openFormHandler: (layoutMode: LayoutModes) => void, downloadDcmtsAsync: (inputDcmts: DcmtInfo[] | undefined, downloadType: DownloadTypes, downloadMode: DownloadModes, onFileDownloaded?: (dcmtFile: File | undefined) => void, confirmAttachments?: (list: FileDescriptor[]) => Promise<string[] | undefined>) => Promise<void>, runOperationAsync: (inputDcmts: DcmtInfo[] | undefined, dcmtOperationType: DcmtOperationTypes, actionAfterOperationAsync?: () => Promise<void>) => Promise<void>, onRefreshSearchAsync: (() => Promise<void>) | undefined, onRefreshDataRowsAsync: (() => Promise<void>) | undefined, onRefreshAfterAddDcmtToFavs: (() => void) | undefined, confirmFormat: () => Promise<FileFormats>, confirmAttachments: (list: FileDescriptor[]) => Promise<string[] | undefined>, openTaskFormHandler: () => void, openDetailDcmtsFormHandler: (value: boolean) => void, openMasterDcmtsFormHandler: (value: boolean) => void, openBatchUpdateFormHandler: (value: boolean) => void, openExportForm: () => void, handleToggleSearch: () => void, handleSignApprove: () => void, openWGsCopyMoveForm?: ((mode: "copyToWgDraft" | "copyToWgArchivedDoc", dcmtTypeDescriptor: DcmtTypeDescriptor, documents: Array<DcmtInfo>) => void), openCommentFormCallback?: ((documents: Array<DcmtInfo>) => void), openEditPdf?: ((documents: Array<DcmtInfo>) => void), openAddDocumentForm?: () => void, passToArchiveCallback?: (outputMids: Array<{
+export declare const getCommandsMenuItems: (isMobile: boolean, dtd: DcmtTypeDescriptor | undefined, selectedItems: Array<any>, focusedItem: any, context: SearchResultContext, showFloatingBar: boolean, workingGroupContext: WorkingGroupDescriptor | undefined, showSearch: boolean, setShowFloatingBar: React.Dispatch<React.SetStateAction<boolean>>, openFormHandler: (layoutMode: LayoutModes) => void, openSharedArchiveHandler: () => Promise<void>, showSharedDcmtsHandler: () => Promise<void>, downloadDcmtsAsync: (inputDcmts: DcmtInfo[] | undefined, downloadType: DownloadTypes, downloadMode: DownloadModes, onFileDownloaded?: (dcmtFile: File | undefined) => void, confirmAttachments?: (list: FileDescriptor[]) => Promise<string[] | undefined>) => Promise<void>, runOperationAsync: (inputDcmts: DcmtInfo[] | undefined, dcmtOperationType: DcmtOperationTypes, actionAfterOperationAsync?: () => Promise<void>) => Promise<void>, onRefreshSearchAsync: (() => Promise<void>) | undefined, onRefreshDataRowsAsync: (() => Promise<void>) | undefined, onRefreshAfterAddDcmtToFavs: (() => void) | undefined, confirmFormat: () => Promise<FileFormats>, confirmAttachments: (list: FileDescriptor[]) => Promise<string[] | undefined>, openTaskFormHandler: () => void, openDetailDcmtsFormHandler: (value: boolean) => void, openMasterDcmtsFormHandler: (value: boolean) => void, openBatchUpdateFormHandler: (value: boolean) => void, openExportForm: () => void, handleToggleSearch: () => void, handleSignApprove: () => void, openWGsCopyMoveForm?: ((mode: "copyToWgDraft" | "copyToWgArchivedDoc", dcmtTypeDescriptor: DcmtTypeDescriptor, documents: Array<DcmtInfo>) => void), openCommentFormCallback?: ((documents: Array<DcmtInfo>) => void), openEditPdf?: ((documents: Array<DcmtInfo>) => void), openAddDocumentForm?: () => void, passToArchiveCallback?: (outputMids: Array<{
     mid: number;
     value: string;
-}>) => void, archiveMasterDocuments?: (tid: number | undefined) => Promise<void>, archiveDetailDocuments?: (tid: number | undefined) => Promise<void>, hasMasterRelation?: boolean, hasDetailRelation?: boolean, canArchiveMasterRelation?: boolean, canArchiveDetailRelation?: boolean, pairManyToManyDocuments?: (isPairing: boolean) => Promise<void>) => Array<TMDataGridContextMenuItem>;
+}>, tid?: number) => void, archiveMasterDocuments?: (tid: number | undefined) => Promise<void>, archiveDetailDocuments?: (tid: number | undefined) => Promise<void>, hasMasterRelation?: boolean, hasDetailRelation?: boolean, canArchiveMasterRelation?: boolean, canArchiveDetailRelation?: boolean, pairManyToManyDocuments?: (isPairing: boolean) => Promise<void>, hasManyToManyRelation?: boolean) => Array<TMDataGridContextMenuItem>;

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

@@ -1,6 +1,6 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { AccessLevels, AccessLevelsEx, AppModules, FileFormats, LayoutModes, SDK_Globals, DcmtTypeListCacheService, LicenseModuleStatus } from '@topconsultnpm/sdk-ts';
-import { IconActivity, IconArchiveDoc, IconBatchUpdate, IconCheckFile, IconCheckIn, IconCircleInfo, IconCloseCircle, IconConvertFilePdf, IconDelete, IconDotsVerticalCircleOutline, IconDownload, IconEdit, IconExportTo, IconFileDots, IconHide, IconInfo, IconMenuCAArchive, IconPlatform, IconPreview, IconRelation, IconSearch, IconShow, IconStar, IconSubstFile, IconUndo, IconUserGroupOutline, SDKUI_Localizator, svgToString, searchResultToMetadataValues, IconSignaturePencil, IconArchiveMaster, IconArchiveDetail, IconDetailDcmts, isPdfEditorEnabled } from '../../../helper';
+import { IconActivity, IconArchiveDoc, IconBatchUpdate, IconCheckFile, IconCheckIn, IconCircleInfo, IconCloseCircle, IconConvertFilePdf, IconDelete, IconDotsVerticalCircleOutline, IconDownload, IconEdit, IconExportTo, IconFileDots, IconHide, IconInfo, IconMenuCAArchive, IconPlatform, IconPreview, IconRelation, IconSearch, IconShow, IconStar, IconSubstFile, IconUndo, IconUserGroupOutline, SDKUI_Localizator, svgToString, searchResultToMetadataValues, IconSignaturePencil, IconArchiveMaster, IconArchiveDetail, IconDetailDcmts, isPdfEditorEnabled, IconPair, IconUnpair, IconSharedDcmt } from '../../../helper';
 import ShowAlert from '../../base/TMAlert';
 import { TMMessageBoxManager, ButtonNames, TMExceptionBoxManager } from '../../base/TMPopUp';
 import TMSpinner from '../../base/TMSpinner';
@@ -75,7 +75,7 @@ export const signatureInformationCallback = async (isMobile, inputDcmts) => {
         TMExceptionBoxManager.show({ exception: error });
     }
 };
-export const getCommandsMenuItems = (isMobile, dtd, selectedItems, focusedItem, context, showFloatingBar, workingGroupContext, showSearch, setShowFloatingBar, openFormHandler, downloadDcmtsAsync, runOperationAsync, onRefreshSearchAsync, onRefreshDataRowsAsync, onRefreshAfterAddDcmtToFavs, confirmFormat, confirmAttachments, openTaskFormHandler, openDetailDcmtsFormHandler, openMasterDcmtsFormHandler, openBatchUpdateFormHandler, openExportForm, handleToggleSearch, handleSignApprove, openWGsCopyMoveForm, openCommentFormCallback, openEditPdf, openAddDocumentForm, passToArchiveCallback, archiveMasterDocuments, archiveDetailDocuments, hasMasterRelation, hasDetailRelation, canArchiveMasterRelation, canArchiveDetailRelation, pairManyToManyDocuments) => {
+export const getCommandsMenuItems = (isMobile, dtd, selectedItems, focusedItem, context, showFloatingBar, workingGroupContext, showSearch, setShowFloatingBar, openFormHandler, openSharedArchiveHandler, showSharedDcmtsHandler, downloadDcmtsAsync, runOperationAsync, onRefreshSearchAsync, onRefreshDataRowsAsync, onRefreshAfterAddDcmtToFavs, confirmFormat, confirmAttachments, openTaskFormHandler, openDetailDcmtsFormHandler, openMasterDcmtsFormHandler, openBatchUpdateFormHandler, openExportForm, handleToggleSearch, handleSignApprove, openWGsCopyMoveForm, openCommentFormCallback, openEditPdf, openAddDocumentForm, passToArchiveCallback, archiveMasterDocuments, archiveDetailDocuments, hasMasterRelation, hasDetailRelation, canArchiveMasterRelation, canArchiveDetailRelation, pairManyToManyDocuments, hasManyToManyRelation) => {
     const isPdfEditorLicensed = SDK_Globals?.license?.dcmtArchiveLicenses?.[0]?.siX_60007?.status === LicenseModuleStatus.Licensed;
     let pdfEditorAvailable = false;
     if (dtd && dtd.widgets && dtd.widgets.length > 0) {
@@ -235,7 +235,7 @@ export const getCommandsMenuItems = (isMobile, dtd, selectedItems, focusedItem,
                         ?.filter(md => md.mid && md.mid > 100 && md.value && md.value.length > 0)
                         .map(md => ({ mid: md.mid, value: md.value })) || [];
                     TMSpinner.hide();
-                    passToArchiveCallback?.(outputMids);
+                    passToArchiveCallback?.(outputMids, item.TID);
                 }
                 catch (error) {
                     TMSpinner.hide();
@@ -346,17 +346,17 @@ export const getCommandsMenuItems = (isMobile, dtd, selectedItems, focusedItem,
             disabled: disabledForMultiRow(selectedItems, focusedItem),
             items: [
                 {
-                    icon: svgToString(_jsx(IconRelation, {})),
+                    icon: svgToString(_jsx(IconPair, {})),
                     text: "Abbina documenti molti a molti",
                     operationType: 'multiRow',
-                    disabled: disabledForMultiRow(selectedItems, focusedItem),
+                    disabled: !hasManyToManyRelation || disabledForMultiRow(selectedItems, focusedItem),
                     onClick: async () => await pairManyToManyDocuments?.(true)
                 },
                 {
-                    icon: svgToString(_jsx(IconRelation, {})),
+                    icon: svgToString(_jsx(IconUnpair, {})),
                     text: "Disabbina documenti molti a molti",
                     operationType: 'multiRow',
-                    disabled: disabledForMultiRow(selectedItems, focusedItem),
+                    disabled: !hasManyToManyRelation || disabledForMultiRow(selectedItems, focusedItem),
                     onClick: async () => await pairManyToManyDocuments?.(false)
                 },
                 {
@@ -394,6 +394,30 @@ export const getCommandsMenuItems = (isMobile, dtd, selectedItems, focusedItem,
             ]
         };
     };
+    const sharedDcmtsMenuItem = () => {
+        return {
+            icon: svgToString(_jsx(IconSharedDcmt, {})),
+            text: 'Documenti condivisi',
+            operationType: 'multiRow',
+            disabled: disabledForMultiRow(selectedItems, focusedItem),
+            items: [
+                {
+                    icon: svgToString(_jsx(IconSharedDcmt, {})),
+                    text: "Archiviazione condivisa",
+                    operationType: 'singleRow',
+                    disabled: disabledForSingleRow(selectedItems, focusedItem),
+                    onClick: async () => { await openSharedArchiveHandler(); }
+                },
+                {
+                    icon: svgToString(_jsx(IconSharedDcmt, {})),
+                    text: "Mostra documenti condivisi",
+                    operationType: 'multiRow',
+                    disabled: disabledForMultiRow(selectedItems, focusedItem),
+                    onClick: async () => { await showSharedDcmtsHandler(); }
+                }
+            ]
+        };
+    };
     /* const shareMenuItem = (): TMDataGridContextMenuItem => {
         return {
             icon: svgToString(<IconShare />),
@@ -625,8 +649,9 @@ export const getCommandsMenuItems = (isMobile, dtd, selectedItems, focusedItem,
                 ]
             },
             signatureMenuItem(),
-            // checkinMenuItem(),
+            // checkinMenuItem(),\
             relationsMenuItem(),
+            sharedDcmtsMenuItem(),
             // shareMenuItem(),
             fullTextSearchMenuItem(),
             otherMenuItem(),

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

@@ -0,0 +1,37 @@
+import React from 'react';
+import { TaskDescriptor, UserDescriptor, HomeBlogPost } from '@topconsultnpm/sdk-ts';
+import { DcmtInfo, FormModes, TaskContext } from '../../../ts';
+export interface TMTaskFormProps {
+    allTasks: Array<TaskDescriptor>;
+    getAllTasks: () => Promise<void>;
+    deleteTaskByIdsCallback: (deletedTaskIds: Array<number>) => Promise<void>;
+    addTaskCallback: (task: TaskDescriptor) => Promise<void>;
+    editTaskCallback: (task: TaskDescriptor) => Promise<void>;
+    handleNavigateToWGs: (value: HomeBlogPost | number) => Promise<void>;
+    handleNavigateToDossiers: (value: HomeBlogPost | number) => Promise<void>;
+    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;
+    onClose?: () => void;
+    onCancel?: () => 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,338 @@
+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, 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';
+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';
+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();
+    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, taskContext, startDate, endDate, showBackButton = true, hasNavigation = true, width = "100%", height = "100%", usersList, onOpenS4TViewerRequest, s4TViewerDialogComponent, allTasks, getAllTasks, deleteTaskByIdsCallback, addTaskCallback, handleNavigateToWGs, handleNavigateToDossiers } = 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,
+        response: 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,
+                response: 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,
+                response: 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 });
+    };
+    const onAnswerChange = (e) => {
+        setFormData({ ...formData ?? {}, response: 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 }) }) }), (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/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;