116 lines
3.6 KiB
JavaScript
116 lines
3.6 KiB
JavaScript
import { Virtuoso } from "react-virtuoso";
|
|
import { Badge, Spin, Typography } from "antd";
|
|
import { useTranslation } from "react-i18next";
|
|
import { forwardRef, useMemo, useRef } from "react";
|
|
import day from "../../utils/day.js";
|
|
import "./task-center.styles.scss";
|
|
|
|
const { Title } = Typography;
|
|
|
|
const TaskCenterComponent = forwardRef(({ visible, tasks, loading, onTaskClick, onLoadMore, totalTasks }, ref) => {
|
|
const { t } = useTranslation();
|
|
const virtuosoRef = useRef(null);
|
|
|
|
const groupedItems = useMemo(() => {
|
|
const now = day();
|
|
const today = now.startOf("day");
|
|
|
|
const overdue = tasks.filter((t) => t.due_date && day(t.due_date).isBefore(today));
|
|
const dueToday = tasks.filter((t) => t.due_date && day(t.due_date).isSame(today, "day"));
|
|
const upcoming = tasks.filter((t) => t.due_date && day(t.due_date).isAfter(today));
|
|
const noDueDate = tasks.filter((t) => !t.due_date);
|
|
|
|
const makeGroup = (label, data) =>
|
|
data.length ? [{ type: "header", label }, ...data.map((task) => ({ type: "task", task }))] : [];
|
|
|
|
return [
|
|
...makeGroup(t("tasks.labels.overdue"), overdue),
|
|
...makeGroup(t("tasks.labels.due_today"), dueToday),
|
|
...makeGroup(t("tasks.labels.upcoming"), upcoming),
|
|
...makeGroup(t("tasks.labels.no_due_date"), noDueDate)
|
|
];
|
|
}, [tasks, t]);
|
|
|
|
const renderTask = (index, task) => {
|
|
const handleClick = () => onTaskClick(task.id);
|
|
|
|
const getPriorityColor = (priority) => {
|
|
switch (priority) {
|
|
case 1:
|
|
return "red";
|
|
case 2:
|
|
return "orange";
|
|
case 3:
|
|
return "green";
|
|
default:
|
|
return null;
|
|
}
|
|
};
|
|
|
|
const priorityColor = getPriorityColor(task.priority);
|
|
|
|
return (
|
|
<div key={`${task.id}-${index}`} className="task-item" onClick={handleClick}>
|
|
<Badge color={priorityColor || undefined} dot={!!priorityColor} offset={[-4, 4]}>
|
|
<div className="task-content">
|
|
<div className="task-header-row">
|
|
<span className="task-title">{task.title}</span>
|
|
{task.due_date && (
|
|
<span className="task-due-date">
|
|
{t("tasks.labels.due")}: {day(task.due_date).fromNow()}
|
|
</span>
|
|
)}
|
|
</div>
|
|
|
|
{/*{task.description && <div className="task-description">{task.description}</div>}*/}
|
|
|
|
<div className="task-ro-number">
|
|
{t("notifications.labels.ro-number", {
|
|
ro_number: task.job?.ro_number || t("general.labels.na")
|
|
})}
|
|
</div>
|
|
</div>
|
|
</Badge>
|
|
</div>
|
|
);
|
|
};
|
|
const renderItem = (index, item) => {
|
|
if (item.type === "header") {
|
|
return (
|
|
<div key={`header-${index}`} className="task-section">
|
|
<Title level={4} className="section-title">
|
|
{item.label}
|
|
</Title>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return renderTask(index, item.task);
|
|
};
|
|
|
|
return (
|
|
<div className={`task-center ${visible ? "visible" : ""}`} ref={ref}>
|
|
<div className="task-header">
|
|
<h3>{t("tasks.labels.my_tasks_center")}</h3>
|
|
{loading && <Spin spinning={loading} size="small" />}
|
|
</div>
|
|
|
|
<Virtuoso
|
|
ref={virtuosoRef}
|
|
style={{ height: "400px", width: "100%" }}
|
|
data={groupedItems}
|
|
itemContent={renderItem}
|
|
/>
|
|
|
|
{tasks.length < totalTasks && (
|
|
<button onClick={onLoadMore} disabled={loading}>
|
|
{t("general.labels.load_more")}
|
|
</button>
|
|
)}
|
|
</div>
|
|
);
|
|
});
|
|
|
|
TaskCenterComponent.displayName = "TaskCenterComponent";
|
|
export default TaskCenterComponent;
|