admin/bodyshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feature/IO-3291-Tasks-Notifications: Checkpoint

Browse Source
This commit is contained in:
Dave Richer
2025-07-08 13:52:59 -04:00
parent 9b53bd9b40
commit 2e3944099b
4 changed files with 133 additions and 185 deletions
Download Patch File Download Diff File Expand all files Collapse all files

141
client/src/components/task-center/task-center.component.jsx
View File

@@ -1,95 +1,88 @@
import { Virtuoso } from "react-virtuoso";
import { Badge, Button, Space, Spin, Switch, Tooltip, Typography } from "antd";
import { CheckCircleFilled, CheckCircleOutlined, EyeFilled, EyeOutlined } from "@ant-design/icons";
import { Badge, Spin, Typography } from "antd";
import { useTranslation } from "react-i18next";
import { forwardRef, useEffect, useRef } from "react";
import { forwardRef, useMemo, useRef } from "react";
import { DateTimeFormat } from "../../utils/DateFormatter.jsx";
import day from "../../utils/day.js";
import "./task-center.styles.scss";
const { Text, Title } = Typography;
const TaskCenterComponent = forwardRef(
({ visible, tasks, loading, showIncompleteOnly, toggleIncomplete, markAllComplete, onTaskClick }, ref) => {
const { t } = useTranslation();
const virtuosoRef = useRef(null);
const TaskCenterComponent = forwardRef(({ visible, tasks, loading, onTaskClick }, ref) => {
const { t } = useTranslation();
const virtuosoRef = useRef(null);
useEffect(() => {
if (virtuosoRef.current) {
virtuosoRef.current.scrollToIndex({ index: 0, behavior: "smooth" });
}
}, [showIncompleteOnly]);
// Organize tasks into sections
const sections = useMemo(() => {
const now = day();
const today = now.startOf("day");
// Filter tasks based on showIncompleteOnly
const filteredTasks = showIncompleteOnly ? tasks.filter((task) => !task.completed) : tasks;
const overdue = tasks.filter((task) => task.due_date && day(task.due_date).isBefore(today));
const dueToday = tasks.filter((task) => task.due_date && day(task.due_date).isSame(today, "day"));
const upcoming = tasks.filter((task) => task.due_date && day(task.due_date).isAfter(today));
const noDueDate = tasks.filter((task) => !task.due_date);
const renderTask = (index, task) => {
const handleClick = () => {
onTaskClick(task.id); // Use the prop handler
};
return [
{ title: t("tasks.labels.overdue"), data: overdue },
{ title: t("tasks.labels.due_today"), data: dueToday },
{ title: t("tasks.labels.upcoming"), data: upcoming },
{ title: t("tasks.labels.no_due_date"), data: noDueDate }
].filter((section) => section.data.length > 0);
}, [tasks, t]);
return (
<div
key={`${task.id}-${index}`}
className={`task-item ${task.completed ? "task-completed" : "task-incomplete"}`}
onClick={handleClick}
>
<Badge dot={!task.completed}>
<div className="task-content">
<Title level={5} className="task-title">
<span className="ro-number">
{t("notifications.labels.ro-number", {
ro_number: task.job?.ro_number || t("general.labels.na")
})}
</span>
<Text type="secondary" className="relative-time" title={DateTimeFormat(task.created_at)}>
{day(task.created_at).fromNow()}
</Text>
</Title>
<Text strong={!task.completed} className="task-body">
{task.title}
</Text>
</div>
</Badge>
</div>
);
const renderTask = (index, task) => {
const handleClick = () => {
onTaskClick(task.id);
};
return (
<div className={`task-center ${visible ? "visible" : ""}`} ref={ref}>
<div className="task-header">
<Space direction="horizontal">
<h3>{t("tasks.labels.my_tasks_center")}</h3>
{loading && <Spin spinning={loading} size="small" />}
</Space>
<div className="task-controls">
<Tooltip title={t("tasks.labels.show-incomplete-only")}>
<Space size={4} align="center" className="task-toggle">
{showIncompleteOnly ? <EyeFilled /> : <EyeOutlined />}
<Switch checked={showIncompleteOnly} onChange={(checked) => toggleIncomplete(checked)} size="small" />
</Space>
</Tooltip>
<Tooltip title={t("tasks.labels.mark-all-complete")}>
<Button
type="link"
icon={tasks.every((t) => t.completed) ? <CheckCircleFilled /> : <CheckCircleOutlined />}
onClick={markAllComplete}
disabled={!tasks.some((t) => !t.completed)}
/>
</Tooltip>
<div key={`${task.id}-${index}`} className="task-item task-incomplete" onClick={handleClick}>
<Badge dot>
<div className="task-content">
<Title level={5} className="task-title">
<span className="ro-number">
{t("notifications.labels.ro-number", {
ro_number: task.job?.ro_number || t("general.labels.na")
})}
</span>
<Text type="secondary" className="relative-time" title={DateTimeFormat(task.created_at)}>
{day(task.created_at).fromNow()}
</Text>
</Title>
<Text strong className="task-body">
{task.title}
</Text>
</div>
</div>
<Virtuoso
ref={virtuosoRef}
style={{ height: "400px", width: "100%" }}
data={filteredTasks}
totalCount={filteredTasks.length}
itemContent={renderTask}
/>
</Badge>
</div>
);
}
);
};
const renderSection = (section, sectionIndex) => (
<div key={`section-${sectionIndex}`} className="task-section">
<Title level={4} className="section-title">
{section.title}
</Title>
{section.data.map((task, index) => renderTask(`${sectionIndex}-${index}`, task))}
</div>
);
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={sections}
totalCount={sections.length}
itemContent={(index, section) => renderSection(section, index)}
/>
</div>
);
});
TaskCenterComponent.displayName = "TaskCenterComponent";