@topconsultnpm/sdkui-react 6.19.0-dev1.54 → 6.19.0-dev1.56

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

@@ -59,7 +59,7 @@ const orderByName = (array) => {
         return 1;
     } return 0; });
 };
-const TMSearchResult = ({ context = SearchResultContext.METADATA_SEARCH, isVisible = true, allowRelations = true, openDcmtFormAsModal = false, searchResults = [], showSearchResultSidebar = true, showSelector = false, groupId, title, isClosable = false, allowFloatingBar = true, showToolbarHeader = true, showBackButton = true, selectedSearchResultTID, workingGroupContext = undefined, disableAccordionIfSingleCategory = false, floatingActionConfig, openInOffice, onRefreshAfterAddDcmtToFavs, onRefreshSearchAsync, onSelectedTIDChanged, onWFOperationCompleted, onClose, onFileOpened, onTaskCreateRequest, openWGsCopyMoveForm, openEditPdf, openCommentFormCallback, openAddDocumentForm, openS4TViewer = false, onOpenS4TViewerRequest, passToArchiveCallback, showTodoDcmtForm = false, onReferenceClick }) => {
+const TMSearchResult = ({ allTasks = [], getAllTasks, deleteTaskByIdsCallback, addTaskCallback, editTaskCallback, handleNavigateToWGs, handleNavigateToDossiers, context = SearchResultContext.METADATA_SEARCH, isVisible = true, allowRelations = true, openDcmtFormAsModal = false, searchResults = [], showSearchResultSidebar = true, showSelector = false, groupId, title, isClosable = false, allowFloatingBar = true, showToolbarHeader = true, showBackButton = true, selectedSearchResultTID, workingGroupContext = undefined, disableAccordionIfSingleCategory = false, floatingActionConfig, openInOffice, onRefreshAfterAddDcmtToFavs, onRefreshSearchAsync, onSelectedTIDChanged, onWFOperationCompleted, onClose, onFileOpened, onTaskCreateRequest, openWGsCopyMoveForm, openEditPdf, openCommentFormCallback, openAddDocumentForm, openS4TViewer = false, onOpenS4TViewerRequest, passToArchiveCallback, showTodoDcmtForm = false, onReferenceClick, }) => {
     const [id, setID] = useState('');
     const [showApprovePopup, setShowApprovePopup] = useState(false);
     const [showRejectPopup, setShowRejectPopup] = useState(false);
@@ -150,7 +150,10 @@ const TMSearchResult = ({ context = SearchResultContext.METADATA_SEARCH, isVisib
             fileExt: currentMetadataValues.find(o => o.mid == SystemMIDsAsNumber.FileExt)?.value
         });
     }, [currentMetadataValues]);
-    const openFormHandler = (layoutMode) => { setIsOpenDcmtForm(true); setDcmtFormLayoutMode(layoutMode); };
+    const openFormHandler = (layoutMode) => {
+        setIsOpenDcmtForm(true);
+        setDcmtFormLayoutMode(layoutMode);
+    };
     const openSharedArchiveHandler = async () => {
         const dcmts = getSelectedDcmtsOrFocused(selectedItems, focusedItem);
         if (dcmts.length === 0) {
@@ -526,16 +529,16 @@ const TMSearchResult = ({ context = SearchResultContext.METADATA_SEARCH, isVisib
                                     TMSpinner.hide();
                                 }
                             }, onClose: () => setShowManyToManyChooser(false), manageUseLocalizedName: false }), showPairDcmtsModal &&
-                        _jsx(TMModal, { title: (isPairingManyToMany ? "Abbina" : "Disabbina") + " documenti", onClose: () => setShowPairDcmtsModal(false), width: isMobile ? '90%' : '50%', height: isMobile ? '90%' : '70%', children: _jsx(TMSearchResult, { searchResults: pairedSearchResults, onRefreshAfterAddDcmtToFavs: onRefreshAfterAddDcmtToFavs, onRefreshSearchAsync: onRefreshSearchAsync, onFileOpened: onFileOpened, onTaskCreateRequest: onTaskCreateRequest, openWGsCopyMoveForm: openWGsCopyMoveForm, openEditPdf: openEditPdf, openS4TViewer: openS4TViewer, onOpenS4TViewerRequest: onOpenS4TViewerRequest, passToArchiveCallback: passToArchiveCallback, showTodoDcmtForm: showTodoDcmtForm, allowFloatingBar: false, floatingActionConfig: pairFloatingActionConfig, showBackButton: false }) }), showPairSearchModal &&
-                        _jsx(TMModal, { title: "Ricerca documenti", onClose: () => setShowPairSearchModal(false), width: isMobile ? '90%' : '50%', height: isMobile ? '90%' : '70%', children: _jsx(TMSearch, { onlyShowSearchQueryPanel: true, inputTID: pairSearchModalTargetTID, inputMids: pairSearchModalInputMids, floatingActionConfig: pairSearchModalFloatingActionConfig }) }), isOpenSharedArchive && _jsx(TMModal, { title: "Archiviazione condivisa", onClose: () => {
+                        _jsx(TMModal, { title: (isPairingManyToMany ? "Abbina" : "Disabbina") + " documenti", onClose: () => setShowPairDcmtsModal(false), width: isMobile ? '90%' : '50%', height: isMobile ? '90%' : '70%', children: _jsx(TMSearchResult, { searchResults: pairedSearchResults, onRefreshAfterAddDcmtToFavs: onRefreshAfterAddDcmtToFavs, onRefreshSearchAsync: onRefreshSearchAsync, onFileOpened: onFileOpened, onTaskCreateRequest: onTaskCreateRequest, openWGsCopyMoveForm: openWGsCopyMoveForm, openEditPdf: openEditPdf, openS4TViewer: openS4TViewer, onOpenS4TViewerRequest: onOpenS4TViewerRequest, passToArchiveCallback: passToArchiveCallback, showTodoDcmtForm: showTodoDcmtForm, allowFloatingBar: false, floatingActionConfig: pairFloatingActionConfig, showBackButton: false, allTasks: allTasks, getAllTasks: getAllTasks, deleteTaskByIdsCallback: deleteTaskByIdsCallback, addTaskCallback: addTaskCallback, editTaskCallback: editTaskCallback, handleNavigateToWGs: handleNavigateToWGs, handleNavigateToDossiers: handleNavigateToDossiers }) }), showPairSearchModal &&
+                        _jsx(TMModal, { title: "Ricerca documenti", onClose: () => setShowPairSearchModal(false), width: isMobile ? '90%' : '50%', height: isMobile ? '90%' : '70%', children: _jsx(TMSearch, { onlyShowSearchQueryPanel: true, inputTID: pairSearchModalTargetTID, inputMids: pairSearchModalInputMids, floatingActionConfig: pairSearchModalFloatingActionConfig, allTasks: allTasks, getAllTasks: getAllTasks, deleteTaskByIdsCallback: deleteTaskByIdsCallback, addTaskCallback: addTaskCallback, editTaskCallback: editTaskCallback, handleNavigateToWGs: handleNavigateToWGs, handleNavigateToDossiers: handleNavigateToDossiers }) }), isOpenSharedArchive && _jsx(TMModal, { title: "Archiviazione condivisa", onClose: () => {
                             setIsOpenSharedArchive(false);
                         }, width: isMobile ? '90%' : '60%', height: isMobile ? '90%' : '80%', children: _jsx(TMArchive, { inputDID: focusedItem?.DID, inputTID: focusedItem?.TID, inputMids: currentMetadataValues.filter(md => md.mid && md.mid > 100).map(md => ({ mid: md.mid, value: md.value ?? '' })), isSharedArchive: true, inputFile: sharedDcmtFile, onSavedAsyncCallback: async (tid, did) => {
                                 setIsOpenSharedArchive(false);
                                 await onRefreshSearchAsync?.();
-                            } }) }), sharedDcmtSearchResults.length > 0 &&
+                            }, allTasks: allTasks, getAllTasks: getAllTasks, deleteTaskByIdsCallback: deleteTaskByIdsCallback, addTaskCallback: addTaskCallback, editTaskCallback: editTaskCallback, handleNavigateToWGs: handleNavigateToWGs, handleNavigateToDossiers: handleNavigateToDossiers }) }), sharedDcmtSearchResults.length > 0 &&
                         _jsx(TMModal, { title: "Documenti condivisi", onClose: () => {
                                 setSharedDcmtSearchResults([]);
-                            }, width: isMobile ? '90%' : '60%', height: isMobile ? '90%' : '80%', children: _jsx(TMSearchResult, { searchResults: sharedDcmtSearchResults, allowFloatingBar: false, showSelector: true, showBackButton: false }) }), (floatingActionConfig && floatingActionConfig.isVisible) && _jsx(TMSearchResultFloatingActionButton, { selectedDcmtsOrFocused: getSelectedDcmtsOrFocused(selectedItems, focusedItem), config: floatingActionConfig })] }), [
+                            }, width: isMobile ? '90%' : '60%', height: isMobile ? '90%' : '80%', children: _jsx(TMSearchResult, { searchResults: sharedDcmtSearchResults, allowFloatingBar: false, showSelector: true, showBackButton: false, allTasks: allTasks, getAllTasks: getAllTasks, deleteTaskByIdsCallback: deleteTaskByIdsCallback, addTaskCallback: addTaskCallback, editTaskCallback: editTaskCallback, handleNavigateToWGs: handleNavigateToWGs, handleNavigateToDossiers: handleNavigateToDossiers }) }), (floatingActionConfig && floatingActionConfig.isVisible) && _jsx(TMSearchResultFloatingActionButton, { selectedDcmtsOrFocused: getSelectedDcmtsOrFocused(selectedItems, focusedItem), config: floatingActionConfig })] }), [
         searchResults,
         selectedSearchResult,
         lastUpdateSearchTime,
@@ -588,7 +591,7 @@ const TMSearchResult = ({ context = SearchResultContext.METADATA_SEARCH, isVisib
         sharedDcmtFile,
         onRefreshSearchAsync
     ]);
-    const tmBlog = useMemo(() => _jsx(TMDcmtBlog, { tid: focusedItem?.TID, did: focusedItem?.DID }), [focusedItem]);
+    const tmBlog = useMemo(() => _jsx(TMDcmtBlog, { tid: focusedItem?.TID, did: focusedItem?.DID, allTasks: allTasks, getAllTasks: getAllTasks, deleteTaskByIdsCallback: deleteTaskByIdsCallback, addTaskCallback: addTaskCallback, editTaskCallback: editTaskCallback, handleNavigateToWGs: handleNavigateToWGs, handleNavigateToDossiers: handleNavigateToDossiers }), [focusedItem, allTasks]);
     const tmSysMetadata = useMemo(() => _jsx(TMMetadataValues, { layoutMode: LayoutModes.Update, openChooserBySingleClick: true, TID: focusedItem?.TID, isReadOnly: true, deviceType: deviceType, metadataValues: currentMetadataValues.filter(o => (o.mid != undefined && o.mid <= 100)), metadataValuesOrig: currentMetadataValues.filter(o => (o.mid != undefined && o.mid <= 100)), validationItems: [] }), [focusedItem, currentMetadataValues, deviceType]);
     const tmDcmtPreview = useMemo(() => _jsx(TMDcmtPreviewWrapper, { currentDcmt: currentDcmt }), [currentDcmt]);
     const allInitialPanelVisibility = {
@@ -651,11 +654,11 @@ const TMSearchResult = ({ context = SearchResultContext.METADATA_SEARCH, isVisib
                 }, children: _jsx(TMLayoutWaitingContainer, { direction: 'vertical', showWaitPanel: showWaitPanel, showWaitPanelPrimary: showPrimary, showWaitPanelSecondary: showSecondary, waitPanelTitle: waitPanelTitle, waitPanelTextPrimary: waitPanelTextPrimary, waitPanelValuePrimary: waitPanelValuePrimary, waitPanelMaxValuePrimary: waitPanelMaxValuePrimary, waitPanelTextSecondary: waitPanelTextSecondary, waitPanelValueSecondary: waitPanelValueSecondary, waitPanelMaxValueSecondary: waitPanelMaxValueSecondary, isCancelable: true, abortController: abortController, children: (groupId && groupId.length > 0) ?
                         _jsx(TMPanelManagerContainer, { panels: initialPanels, direction: "horizontal", parentId: groupId, showToolbar: showSearchResultSidebar })
                         :
-                            _jsx(TMPanelManagerProvider, { panels: initialPanels, initialVisibility: allInitialPanelVisibility, defaultDimensions: initialPanelDimensions, initialDimensions: initialPanelDimensions, initialMobilePanelId: 'tmSearchResult', children: _jsx(TMPanelManagerContainer, { panels: initialPanels, direction: "horizontal", parentId: groupId, showToolbar: showSearchResultSidebar }) }) }) }), _jsx(StyledMultiViewPanel, { "$isVisible": isOpenDetails, children: isOpenDetails && _jsx(TMMasterDetailDcmts, { deviceType: deviceType, isForMaster: false, inputDcmts: getSelectionDcmtInfo(), allowNavigation: focusedItem && selectedItems.length <= 0, canNext: canNavigateHandler('next'), canPrev: canNavigateHandler('prev'), onNext: () => onNavigateHandler('next'), onPrev: () => onNavigateHandler('prev'), onBack: () => setIsOpenDetails(false) }) }), _jsxs(StyledMultiViewPanel, { "$isVisible": isOpenMaster, children: [isOpenMaster && _jsx(TMMasterDetailDcmts, { deviceType: deviceType, inputDcmts: getSelectionDcmtInfo(), isForMaster: true, allowNavigation: focusedItem && selectedItems.length <= 0, canNext: canNavigateHandler('next'), canPrev: canNavigateHandler('prev'), onNext: () => onNavigateHandler('next'), onPrev: () => onNavigateHandler('prev'), onBack: () => setIsOpenMaster(false), appendMasterDcmts: handleAddItem }), secondaryMasterDcmts.length > 0 && secondaryMasterDcmts.map((dcmt, index) => {
-                        return (_jsx(StyledModalContainer, { style: { backgroundColor: 'white' }, children: _jsx(TMMasterDetailDcmts, { deviceType: deviceType, inputDcmts: [dcmt], isForMaster: true, allowNavigation: false, onBack: () => handleRemoveItem(dcmt.TID, dcmt.DID), appendMasterDcmts: handleAddItem }) }, `${index}-${dcmt.DID}`));
+                            _jsx(TMPanelManagerProvider, { panels: initialPanels, initialVisibility: allInitialPanelVisibility, defaultDimensions: initialPanelDimensions, initialDimensions: initialPanelDimensions, initialMobilePanelId: 'tmSearchResult', children: _jsx(TMPanelManagerContainer, { panels: initialPanels, direction: "horizontal", parentId: groupId, showToolbar: showSearchResultSidebar }) }) }) }), _jsx(StyledMultiViewPanel, { "$isVisible": isOpenDetails, children: isOpenDetails && _jsx(TMMasterDetailDcmts, { deviceType: deviceType, isForMaster: false, inputDcmts: getSelectionDcmtInfo(), allowNavigation: focusedItem && selectedItems.length <= 0, canNext: canNavigateHandler('next'), canPrev: canNavigateHandler('prev'), onNext: () => onNavigateHandler('next'), onPrev: () => onNavigateHandler('prev'), onBack: () => setIsOpenDetails(false), allTasks: allTasks, getAllTasks: getAllTasks, deleteTaskByIdsCallback: deleteTaskByIdsCallback, addTaskCallback: addTaskCallback, editTaskCallback: editTaskCallback, handleNavigateToWGs: handleNavigateToWGs, handleNavigateToDossiers: handleNavigateToDossiers }) }), _jsxs(StyledMultiViewPanel, { "$isVisible": isOpenMaster, children: [isOpenMaster && _jsx(TMMasterDetailDcmts, { deviceType: deviceType, inputDcmts: getSelectionDcmtInfo(), isForMaster: true, allowNavigation: focusedItem && selectedItems.length <= 0, canNext: canNavigateHandler('next'), canPrev: canNavigateHandler('prev'), onNext: () => onNavigateHandler('next'), onPrev: () => onNavigateHandler('prev'), onBack: () => setIsOpenMaster(false), appendMasterDcmts: handleAddItem, allTasks: allTasks, getAllTasks: getAllTasks, deleteTaskByIdsCallback: deleteTaskByIdsCallback, addTaskCallback: addTaskCallback, editTaskCallback: editTaskCallback, handleNavigateToWGs: handleNavigateToWGs, handleNavigateToDossiers: handleNavigateToDossiers }), secondaryMasterDcmts.length > 0 && secondaryMasterDcmts.map((dcmt, index) => {
+                        return (_jsx(StyledModalContainer, { style: { backgroundColor: 'white' }, children: _jsx(TMMasterDetailDcmts, { deviceType: deviceType, inputDcmts: [dcmt], isForMaster: true, allowNavigation: false, onBack: () => handleRemoveItem(dcmt.TID, dcmt.DID), appendMasterDcmts: handleAddItem, allTasks: allTasks, getAllTasks: getAllTasks, deleteTaskByIdsCallback: deleteTaskByIdsCallback, addTaskCallback: addTaskCallback, editTaskCallback: editTaskCallback, handleNavigateToWGs: handleNavigateToWGs, handleNavigateToDossiers: handleNavigateToDossiers }) }, `${index}-${dcmt.DID}`));
                     })] }), _jsx(StyledMultiViewPanel, { "$isVisible": isOpenDcmtForm, children: isOpenDcmtForm && _jsx(TMDcmtForm, { isModal: openDcmtFormAsModal || (dcmtFormLayoutMode === LayoutModes.Ark && focusedItem?.DID), titleModal: fromDTD?.name ?? '', TID: focusedItem?.TID, DID: focusedItem?.DID, allowButtonsRefs: true, layoutMode: dcmtFormLayoutMode, count: visibleItems.length, itemIndex: visibleItems.findIndex(o => o.rowIndex === focusedItem?.rowIndex) + 1, canNext: canNavigateHandler('next'), canPrev: canNavigateHandler('prev'), onNext: () => onNavigateHandler('next'), onPrev: () => onNavigateHandler('prev'), onClose: () => { setIsOpenDcmtForm(false); }, onWFOperationCompleted: onWFOperationCompleted, onTaskCreateRequest: onTaskCreateRequest, onSavedAsyncCallback: async (tid, did, metadataResult) => {
                         await refreshFocusedDataRowAsync(tid, did, true, metadataResult);
-                    }, onOpenS4TViewerRequest: onOpenS4TViewerRequest, onReferenceClick: onReferenceClick }) }), isOpenArchiveRelationForm && _jsx(TMDcmtForm, { isModal: true, titleModal: SDKUI_Localizator.Archive + ' - ' + (archiveType === 'detail' ? SDKUI_Localizator.DcmtsDetail : SDKUI_Localizator.DcmtsMaster), TID: archiveRelatedDcmtFormTID, layoutMode: LayoutModes.Ark, inputMids: archiveRelatedDcmtFormMids, showBackButton: false, allowButtonsRefs: false, onClose: () => {
+                    }, onOpenS4TViewerRequest: onOpenS4TViewerRequest, onReferenceClick: onReferenceClick, allTasks: allTasks, getAllTasks: getAllTasks, deleteTaskByIdsCallback: deleteTaskByIdsCallback, addTaskCallback: addTaskCallback, editTaskCallback: editTaskCallback, handleNavigateToWGs: handleNavigateToWGs, handleNavigateToDossiers: handleNavigateToDossiers }) }), isOpenArchiveRelationForm && _jsx(TMDcmtForm, { isModal: true, titleModal: SDKUI_Localizator.Archive + ' - ' + (archiveType === 'detail' ? SDKUI_Localizator.DcmtsDetail : SDKUI_Localizator.DcmtsMaster), TID: archiveRelatedDcmtFormTID, layoutMode: LayoutModes.Ark, inputMids: archiveRelatedDcmtFormMids, showBackButton: false, allowButtonsRefs: false, onClose: () => {
                     setIsOpenArchiveRelationForm(false);
                     setArchiveType(undefined);
                     setArchiveRelatedDcmtFormTID(undefined);
@@ -666,7 +669,7 @@ const TMSearchResult = ({ context = SearchResultContext.METADATA_SEARCH, isVisib
                     setArchiveRelatedDcmtFormTID(undefined);
                     setArchiveRelatedDcmtFormMids([]);
                     await onRefreshSearchAsync?.();
-                } })] }));
+                }, allTasks: allTasks, getAllTasks: getAllTasks, deleteTaskByIdsCallback: deleteTaskByIdsCallback, addTaskCallback: addTaskCallback, editTaskCallback: editTaskCallback, handleNavigateToWGs: handleNavigateToWGs, handleNavigateToDossiers: handleNavigateToDossiers })] }));
 };
 export default TMSearchResult;
 const renderDcmtIcon = (cellData, onDownloadDcmtsAsync, openInOffice) => _jsx(TMDcmtIcon, { tid: cellData.data.TID, did: cellData.data.DID, fileExtension: cellData.data.FILEEXT, fileCount: cellData.data.FILECOUNT, isLexProt: cellData.data.IsLexProt, isMail: cellData.data.ISMAIL, isShared: cellData.data.ISSHARED, isSigned: cellData.data.ISSIGNED, downloadMode: 'openInNewWindow', onDownloadDcmtsAsync: onDownloadDcmtsAsync, openInOffice: openInOffice });

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

@@ -649,7 +649,7 @@ export const getCommandsMenuItems = (isMobile, dtd, selectedItems, focusedItem,
                 ]
             },
             signatureMenuItem(),
-            // checkinMenuItem(),
+            // checkinMenuItem(),\
             relationsMenuItem(),
             sharedDcmtsMenuItem(),
             // shareMenuItem(),

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,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, 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
+    });
+    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, 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;

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;