@topconsultnpm/sdkui-react 6.17.0-test9

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

@@ -0,0 +1,140 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from "react";
+import { PdGs, Priorities, SDK_Globals, Task_States } from '@topconsultnpm/sdk-ts';
+import { Extended_Task_States, FilterCategoryId, filterTreeTask, gotoPDGExtendedLabel, prioritiesResourceData, taskIsExpiringSoon } from "./TMTasksUtils";
+import { getPdgsIconMap, SDKUI_Localizator, TMConditionalWrapper } from "../../../helper";
+import { FormModes } from "../../../ts";
+import TMTooltip from "../../base/TMTooltip";
+const taskStateIconClassMap = () => {
+    return new Map([
+        [Task_States.None, "dx-icon-isblank"],
+        [Task_States.NotStarted, "dx-icon-isblank"],
+        [Task_States.InProgress, "dx-icon-refresh"],
+        [Task_States.Completed, "dx-icon-check"],
+        [Task_States.Waiting, "dx-icon-taskstop"],
+        [Task_States.Deferred, "dx-icon-clock"],
+    ]);
+};
+export const taskStateIconMap = (fontSize = 20) => {
+    return new Map([
+        [Task_States.None, _jsx("i", { style: { fontSize }, className: taskStateIconClassMap().get(Task_States.None) }, "Task_States-None")],
+        [Task_States.NotStarted, _jsx("i", { style: { fontSize }, className: taskStateIconClassMap().get(Task_States.NotStarted) }, "Task_States-NotStarted")],
+        [Task_States.InProgress, _jsx("i", { style: { fontSize }, className: taskStateIconClassMap().get(Task_States.InProgress) }, "Task_States-InProgress")],
+        [Task_States.Completed, _jsx("i", { style: { fontSize }, className: taskStateIconClassMap().get(Task_States.Completed) }, "Task_States-Completed")],
+        [Task_States.Waiting, _jsx("i", { style: { fontSize }, className: taskStateIconClassMap().get(Task_States.Waiting) }, "Task_States-Waiting")],
+        [Task_States.Deferred, _jsx("i", { style: { fontSize }, className: taskStateIconClassMap().get(Task_States.Deferred) }, "Task_States-Deferred")]
+    ]);
+};
+export const calculateNumberOfDays = (startTime, endTime) => {
+    if (startTime && endTime) {
+        const diffTime = Math.abs(endTime.getTime() - startTime.getTime()); // Get the time difference in milliseconds
+        const diffDays = Math.ceil(diffTime / (1000 * 3600 * 24)); // Convert milliseconds to days
+        return diffDays;
+    }
+    return 0; // Return 0 if either startTime or endTime is missing
+};
+export const renderTaskIcons = (taskData) => {
+    const { stateLabel, stateTooltipLabel, pdg, ID1Name, endTime, remTime, isNew, numberOfDays } = taskData;
+    return (_jsxs("div", { style: { display: "flex", alignItems: "center", gap: "4px" }, children: [_jsx(TMTooltip, { content: stateTooltipLabel, children: _jsx("div", { className: "task-icon", children: taskStateIconMap().get(stateLabel) }) }), (stateLabel !== Task_States.Completed && endTime && taskIsExpiringSoon(endTime, remTime)) &&
+                _jsx(TMTooltip, { content: SDKUI_Localizator.Expiring, children: _jsx("i", { className: "dx-icon-warning task-icon" }) }), _jsx(TMTooltip, { content: gotoPDGExtendedLabel(false, pdg ?? PdGs.None, ID1Name), children: _jsx("div", { className: "task-icon", style: {
+                        marginLeft: pdg === PdGs.CF || pdg === PdGs.WG ? "-4px" : undefined,
+                        marginRight: pdg === PdGs.CF || pdg === PdGs.WG ? "-4px" : undefined,
+                    }, children: getPdgsIconMap().get(pdg) }) }), numberOfDays > 1 &&
+                _jsx(TMTooltip, { content: SDKUI_Localizator.ActivityOverMultipleDays.replaceParams(numberOfDays), children: _jsx("div", { className: "task-icon", style: {
+                            display: "inline-flex",
+                            alignItems: "center",
+                            justifyContent: "center",
+                            minWidth: "20px",
+                            height: "20px",
+                            padding: "0 4px",
+                            borderRadius: "12px",
+                            border: "1px solid #0078d4",
+                            backgroundColor: "rgba(0, 120, 212, 0.08)",
+                            color: "#0078d4",
+                            fontSize: "11px",
+                            fontWeight: 600,
+                            lineHeight: 1,
+                            boxSizing: "border-box"
+                        }, children: numberOfDays > 99 ? "99+" : numberOfDays }) }), isNew &&
+                _jsx(TMTooltip, { content: SDKUI_Localizator.NewAssignedActivity, children: _jsx("i", { className: "dx-icon-bell task-icon" }) })] }));
+};
+export const TMActionCalendar = (props) => {
+    const { currentTask, openTaskForm, onDeleteCallback } = props;
+    const [editButtonColor, setEditButtonColor] = useState('#ffc107');
+    const [deleteButtonColor, setDeleteButtonColor] = useState('#dc3545');
+    const handleMouseEnter = (colorSetter, hoverColor) => {
+        colorSetter(hoverColor);
+    };
+    const handleMouseLeave = (colorSetter, originalColor) => {
+        colorSetter(originalColor);
+    };
+    const showDeleteButton = currentTask.fromID === SDK_Globals.tmSession?.SessionDescr?.userID;
+    const renderButton = (color, setColor, hoverColor, originalColor, iconClass, onClickHandler) => (_jsx("div", { style: {
+            fontSize: '3rem',
+            color: '#fff',
+            padding: '10px',
+            backgroundColor: color,
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            width: '50px',
+            height: '50px',
+            transition: 'background-color 0.3s',
+            cursor: 'pointer'
+        }, onClick: (e) => { e.stopPropagation(); onClickHandler(); }, onMouseEnter: () => handleMouseEnter(setColor, hoverColor), onMouseLeave: () => handleMouseLeave(setColor, originalColor), children: _jsx("i", { className: iconClass }) }));
+    const onDeleteBtnCallback = (currentTask) => {
+        if (currentTask && currentTask.id) {
+            onDeleteCallback([currentTask.id]);
+        }
+    };
+    return (_jsxs("div", { style: { width: '30%', display: 'flex', justifyContent: 'center', alignItems: 'center', cursor: 'default' }, children: [renderButton(editButtonColor, setEditButtonColor, '#e0a800', '#ffc107', 'dx-icon-edit', () => openTaskForm(FormModes.Update, currentTask)), showDeleteButton && (renderButton(deleteButtonColor, setDeleteButtonColor, '#c82333', '#dc3545', 'dx-icon-trash', () => onDeleteBtnCallback(currentTask)))] }));
+};
+export const priorityLegend = () => _jsx("div", { style: { display: 'flex', alignItems: 'center', gap: '10px' }, children: prioritiesResourceData.map((priority) => (_jsxs("div", { style: { display: 'flex', alignItems: 'center' }, children: [_jsx("span", { style: { backgroundColor: priority.color, width: '12px', height: '12px', display: 'inline-block', marginRight: '5px', borderRadius: '50%' } }), _jsx("span", { style: { fontSize: '14px' }, children: priority.text })] }, priority.text))) });
+export const highlightTaskText = (text, search, taskId) => {
+    if (!search)
+        return text;
+    const escapedSearchText = search.trim().replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+    const regex = new RegExp(`(${escapedSearchText})`, 'gi');
+    const parts = text.split(regex);
+    return parts.map((part, index) => part.toLowerCase() === search.toLowerCase() ? (_jsx("span", { style: { color: "#fff", backgroundColor: '#0f6cbd' }, children: part }, taskId + "-" + index)) : (part));
+};
+export const treeFilterDataSource = (allTasks) => {
+    const allStatesLength = filterTreeTask(allTasks, [FilterCategoryId.AllStates]).length ?? 0;
+    const allPrioritiesLength = filterTreeTask(allTasks, [FilterCategoryId.AllPriorities]).length ?? 0;
+    const expiringLength = filterTreeTask(allTasks, [FilterCategoryId.Expiring]).length ?? 0;
+    const newAssignedLength = filterTreeTask(allTasks, [FilterCategoryId.NewAssignedActivities]).length ?? 0;
+    const newNotStartedLength = filterTreeTask(allTasks, [FilterCategoryId.New]).length ?? 0;
+    const inProgressLength = filterTreeTask(allTasks, [FilterCategoryId.InProgress]).length ?? 0;
+    const completedLength = filterTreeTask(allTasks, [FilterCategoryId.Completed]).length ?? 0;
+    const pendingLength = filterTreeTask(allTasks, [FilterCategoryId.Pending]).length ?? 0;
+    const postponedLength = filterTreeTask(allTasks, [FilterCategoryId.Postponed]).length ?? 0;
+    const lowLength = filterTreeTask(allTasks, [FilterCategoryId.Low]).length ?? 0;
+    const highLength = filterTreeTask(allTasks, [FilterCategoryId.High]).length ?? 0;
+    return [
+        { id: FilterCategoryId.AllStates, label: SDKUI_Localizator.AllStates + " (" + allStatesLength + ")", value: SDKUI_Localizator.AllStates, expanded: true },
+        { id: FilterCategoryId.AllPriorities, label: SDKUI_Localizator.AllPriorities + " (" + allPrioritiesLength + ")", value: SDKUI_Localizator.AllPriorities, expanded: true },
+        {
+            id: FilterCategoryId.Expiring, label: SDKUI_Localizator.Expiring + " (" + expiringLength + ")", value: Extended_Task_States.Expiring, categoryId: 1, tooltipContent: (_jsxs(_Fragment, { children: [_jsx("div", { style: { textAlign: "center" }, children: SDKUI_Localizator.ViewExpiringTasks }), _jsx("hr", {}), _jsxs("div", { style: { textAlign: "left" }, children: [SDKUI_Localizator.TaskConsideredExpiring, ":", _jsxs("ul", { children: [_jsxs("li", { children: ["- ", SDKUI_Localizator.EndDateMatchesToday] }), _jsxs("li", { children: ["- ", SDKUI_Localizator.EndDateSetForTomorrow] }), _jsxs("li", { children: ["- ", SDKUI_Localizator.ReminderSetForToday] })] })] })] }))
+        },
+        { id: FilterCategoryId.NewAssignedActivities, label: SDKUI_Localizator.NewAssignedActivities + " (" + newAssignedLength + ")", value: Extended_Task_States.NewAssignedActivities, categoryId: FilterCategoryId.AllStates },
+        { id: FilterCategoryId.New, label: SDKUI_Localizator.NewFemale + " (" + newNotStartedLength + ")", value: Task_States.NotStarted, categoryId: FilterCategoryId.AllStates },
+        { id: FilterCategoryId.InProgress, label: SDKUI_Localizator.InProgress + " (" + inProgressLength + ")", value: Task_States.InProgress, categoryId: FilterCategoryId.AllStates },
+        { id: FilterCategoryId.Completed, label: SDKUI_Localizator.Completed + " (" + completedLength + ")", value: Task_States.Completed, categoryId: FilterCategoryId.AllStates },
+        { id: FilterCategoryId.Pending, label: SDKUI_Localizator.Pending + " (" + pendingLength + ")", value: Task_States.Waiting, categoryId: FilterCategoryId.AllStates },
+        { id: FilterCategoryId.Postponed, label: SDKUI_Localizator.Postponed + " (" + postponedLength + ")", value: Task_States.Deferred, categoryId: FilterCategoryId.AllStates },
+        // Low = Low + Normal for backwards compatibility with version 5
+        { id: FilterCategoryId.Low, label: SDKUI_Localizator.Low + " (" + lowLength + ")", value: Priorities.Low, categoryId: FilterCategoryId.AllPriorities },
+        { id: FilterCategoryId.High, label: SDKUI_Localizator.High + " (" + highLength + ")", value: Priorities.High, categoryId: FilterCategoryId.AllPriorities },
+    ];
+};
+export const renderContextBlock = ({ condition, pdg, label, isMobile }) => {
+    if (!condition || !label)
+        return null;
+    return (_jsx(TMConditionalWrapper, { condition: !isMobile, wrapper: (children) => (_jsx("div", { style: { display: 'flex', flexDirection: 'row', width: '100%', gap: 10 }, children: children })), children: _jsx("div", { style: {
+                width: isMobile ? '100%' : '50%',
+                display: 'flex',
+                alignItems: 'center',
+                color: "#2559A5",
+                marginTop: 10
+            }, children: _jsxs(TMTooltip, { content: label, children: [_jsx("span", { children: getPdgsIconMap().get(pdg) }), "\u00A0", _jsx("span", { children: label })] }) }) }));
+};

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

@@ -0,0 +1,40 @@
+import React from "react";
+import { AssignedTab, TaskViewType } from "./TMTasksUtils";
+import { HomeBlogPost, TaskDescriptor, UserDescriptor } from "@topconsultnpm/sdk-ts";
+import { DcmtInfo, FormModes, TaskContext } from "../../../ts";
+interface TMTasksViewProps {
+    id: string;
+    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>;
+    visualizedTasks: Array<TaskDescriptor>;
+    activeComponent: TaskViewType;
+    activeTabIndex: AssignedTab;
+    setActiveTabIndex: React.Dispatch<React.SetStateAction<AssignedTab>>;
+    currentTask: TaskDescriptor | null;
+    setCurrentTask: React.Dispatch<React.SetStateAction<TaskDescriptor | null>>;
+    assignedToMeCount: number;
+    assignedByMeCount: number;
+    allTasksFilteredCount: number;
+    showId: boolean;
+    setShowId: React.Dispatch<React.SetStateAction<boolean>>;
+    showSearch: boolean;
+    setShowSearch: React.Dispatch<React.SetStateAction<boolean>>;
+    showContextualWG: boolean;
+    setShowContextualWG: React.Dispatch<React.SetStateAction<boolean>>;
+    showContextualDossier: boolean;
+    setShowContextualDossier: React.Dispatch<React.SetStateAction<boolean>>;
+    showContextualDocument: boolean;
+    setShowContextualDocument: React.Dispatch<React.SetStateAction<boolean>>;
+    taskContext?: TaskContext;
+    usersList?: Array<UserDescriptor>;
+    onOpenS4TViewerRequest?: (dcmtInfo: Array<DcmtInfo>, onRefreshSearchAsync?: (() => Promise<void>)) => void;
+    s4TViewerDialogComponent?: React.ReactNode;
+    afterTaskSaved?: (task: TaskDescriptor | undefined, formMode: FormModes | undefined, forceRefresh?: boolean) => Promise<void>;
+}
+declare const TMTasksView: (props: TMTasksViewProps) => import("react/jsx-runtime").JSX.Element;
+export default TMTasksView;