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-09 16:41:55 -04:00
parent 2494399993
commit d4215b7aee
3 changed files with 145 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,109 +1,131 @@
import { Virtuoso } from "react-virtuoso"; import { Virtuoso } from "react-virtuoso";
import { Badge, Spin, Typography } from "antd"; import { Badge, Button, Spin, Tooltip, Typography } from "antd";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { forwardRef, useMemo, useRef } from "react"; import { forwardRef, useMemo, useRef } from "react";
import day from "../../utils/day.js"; import day from "../../utils/day.js";
import "./task-center.styles.scss"; import "./task-center.styles.scss";
import { ArrowRightOutlined, CalendarOutlined, ClockCircleOutlined, QuestionCircleOutlined } from "@ant-design/icons"; import {
ArrowRightOutlined,
CalendarOutlined,
ClockCircleOutlined,
PlusCircleOutlined,
QuestionCircleOutlined
} from "@ant-design/icons";
const { Title } = Typography; const { Title } = Typography;
const TaskCenterComponent = forwardRef(({ visible, tasks, loading, onTaskClick, onLoadMore, totalTasks }, ref) => { const TaskCenterComponent = forwardRef(
const { t } = useTranslation(); ({ visible, tasks, loading, onTaskClick, onLoadMore, totalTasks, createNewTask }, ref) => {
const virtuosoRef = useRef(null); const { t } = useTranslation();
const virtuosoRef = useRef(null);
const sectionIcons = { const sectionIcons = {
[t("tasks.labels.overdue")]: <ClockCircleOutlined style={{ marginRight: 8 }} />, [t("tasks.labels.overdue")]: <ClockCircleOutlined style={{ marginRight: 8 }} />,
[t("tasks.labels.due_today")]: <CalendarOutlined style={{ marginRight: 8 }} />, [t("tasks.labels.due_today")]: <CalendarOutlined style={{ marginRight: 8 }} />,
[t("tasks.labels.upcoming")]: <ArrowRightOutlined style={{ marginRight: 8 }} />, [t("tasks.labels.upcoming")]: <ArrowRightOutlined style={{ marginRight: 8 }} />,
[t("tasks.labels.no_due_date")]: <QuestionCircleOutlined style={{ marginRight: 8 }} /> [t("tasks.labels.no_due_date")]: <QuestionCircleOutlined style={{ marginRight: 8 }} />
}; };
const groupedItems = useMemo(() => { const groupedItems = useMemo(() => {
const now = day(); const now = day();
const today = now.startOf("day"); const today = now.startOf("day");
const overdue = tasks.filter((t) => t.due_date && day(t.due_date).isBefore(today)); 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 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 upcoming = tasks.filter((t) => t.due_date && day(t.due_date).isAfter(today));
const noDueDate = tasks.filter((t) => !t.due_date); const noDueDate = tasks.filter((t) => !t.due_date);
const makeGroup = (label, data) => (data.length ? [{ type: "section", label, tasks: data }] : []); const makeGroup = (label, data) => (data.length ? [{ type: "section", label, tasks: data }] : []);
return [ return [
...makeGroup(t("tasks.labels.overdue"), overdue), ...makeGroup(t("tasks.labels.overdue"), overdue),
...makeGroup(t("tasks.labels.due_today"), dueToday), ...makeGroup(t("tasks.labels.due_today"), dueToday),
...makeGroup(t("tasks.labels.upcoming"), upcoming), ...makeGroup(t("tasks.labels.upcoming"), upcoming),
...makeGroup(t("tasks.labels.no_due_date"), noDueDate) ...makeGroup(t("tasks.labels.no_due_date"), noDueDate)
]; ];
}, [tasks, t]); }, [tasks, t]);
const getPriorityColor = (priority) => { const getPriorityColor = (priority) => {
switch (priority) { switch (priority) {
case 1: case 1:
return "red"; return "red";
case 2: case 2:
return "orange"; return "orange";
case 3: case 3:
return "green"; return "green";
default: default:
return null; return null;
} }
}; };
const renderSection = (section, index) => ( const renderSection = (section, index) => (
<div key={`section-${index}`} className="task-section"> <div key={`section-${index}`} className="task-section">
<Title level={4} className="section-title"> <div className="section-title">
{sectionIcons[section.label]} {sectionIcons[section.label]}
{section.label} {section.label}
</Title> </div>
<table className="task-table"> <table className="task-table">
<tbody> <tbody>
{section.tasks.map((task) => { {section.tasks.map((task) => {
const priorityColor = getPriorityColor(task.priority); const priorityColor = getPriorityColor(task.priority);
return ( const rowContent = (
<tr key={task.id} className="task-row" onClick={() => onTaskClick(task.id)}> <tr key={task.id} className="task-row" onClick={() => onTaskClick(task.id)}>
<td className="task-title-cell"> <div className="task-row-container">
<div className="task-title">{task.title}</div> <td className="task-title-cell">
<div className="task-ro-number"> <div className="task-title">{task.title}</div>
{t("notifications.labels.ro-number", { <div className="task-ro-number">
ro_number: task.job?.ro_number || t("general.labels.na") {t("notifications.labels.ro-number", {
})} ro_number: task.job?.ro_number || t("general.labels.na")
})}
</div>
</td>
<td className="task-due-cell">
{task.due_date && <span>{day(task.due_date).fromNow()}</span>}
{!!priorityColor && <Badge color={priorityColor} dot style={{ marginLeft: 6 }} />}
</td>
</div> </div>
</td> </tr>
<td className="task-due-cell"> );
{task.due_date && <span>{day(task.due_date).fromNow()}</span>}
{!!priorityColor && <Badge color={priorityColor} dot style={{ marginLeft: 6 }} />}
</td>
</tr>
);
})}
</tbody>
</table>
</div>
);
return ( return task.description ? (
<div className={`task-center ${visible ? "visible" : ""}`} ref={ref}> <Tooltip key={task.id} title={task.description} placement="bottomLeft">
<div className="task-header"> {rowContent}
<h3>{t("tasks.labels.my_tasks_center")}</h3> </Tooltip>
{loading && <Spin spinning={loading} size="small" />} ) : (
rowContent
);
})}
</tbody>
</table>
</div> </div>
);
<Virtuoso return (
ref={virtuosoRef} <div className={`task-center ${visible ? "visible" : ""}`} ref={ref}>
style={{ height: "400px", width: "100%" }} <div className="task-header">
data={groupedItems} <h3>{t("tasks.labels.my_tasks_center")}</h3>
itemContent={(index, section) => renderSection(section, index)} <div className="task-header-actions">
/> <Button className="create-task-button" type="link" icon={<PlusCircleOutlined />} onClick={createNewTask} />
{tasks.length < totalTasks && ( {loading && <Spin spinning={loading} size="small" />}
<button onClick={onLoadMore} disabled={loading}> </div>
{t("general.labels.load_more")} </div>
</button>
)} <Virtuoso
</div> ref={virtuosoRef}
); style={{ height: "400px", width: "100%" }}
}); data={groupedItems}
itemContent={(index, section) => renderSection(section, index)}
/>
{tasks.length < totalTasks && (
<button onClick={onLoadMore} disabled={loading}>
{t("general.labels.load_more")}
</button>
)}
</div>
);
}
);
TaskCenterComponent.displayName = "TaskCenterComponent"; TaskCenterComponent.displayName = "TaskCenterComponent";
export default TaskCenterComponent; export default TaskCenterComponent;

5
client/src/components/task-center/task-center.container.jsx
View File

@@ -78,6 +78,10 @@ const TaskCenterContainer = ({ visible, onClose, bodyshop, currentUser, setTaskU
[tasks, setTaskUpsertContext] [tasks, setTaskUpsertContext]
); );
const createNewTask = () => {
setTaskUpsertContext({ actions: {}, context: {} });
};
return ( return (
<TaskCenterComponent <TaskCenterComponent
visible={visible} visible={visible}
@@ -87,6 +91,7 @@ const TaskCenterContainer = ({ visible, onClose, bodyshop, currentUser, setTaskU
onTaskClick={handleTaskClick} onTaskClick={handleTaskClick}
onLoadMore={handleLoadMore} onLoadMore={handleLoadMore}
totalTasks={data?.tasks_aggregate?.aggregate?.count || 0} totalTasks={data?.tasks_aggregate?.aggregate?.count || 0}
createNewTask={createNewTask}
/> />
); );
}; };

43
client/src/components/task-center/task-center.styles.scss
View File

@@ -2,8 +2,8 @@
position: absolute; position: absolute;
top: 64px; top: 64px;
right: 0; right: 0;
width: 400px; width: 500px;
max-width: 400px; max-width: 500px;
background: #fff; background: #fff;
color: rgba(0, 0, 0, 0.85); color: rgba(0, 0, 0, 0.85);
border: 1px solid #d9d9d9; border: 1px solid #d9d9d9;
@@ -26,8 +26,21 @@
background: #fafafa; background: #fafafa;
h3 { h3 {
font-size: 14px;
margin: 0; margin: 0;
font-size: 13px; }
.create-task-button {
border: none;
color: white;
padding: 4px 12px;
border-radius: 4px;
cursor: pointer;
font-weight: 500;
&:hover {
background-color: #40a9ff;
}
} }
} }
@@ -39,15 +52,20 @@
.section-title { .section-title {
padding: 3px 10px; padding: 3px 10px;
margin: 0; margin: 0;
font-size: 12px; //font-size: 12px;
background: #f5f5f5; background: #f5f5f5;
font-weight: 500; font-weight: 650;
border-bottom: 1px solid #e8e8e8; border-bottom: 1px solid #e8e8e8;
position: sticky; position: sticky;
top: 0; top: 0;
z-index: 1; z-index: 1;
} }
.task-row-container {
margin-top: 15px;
margin-bottom: 15px;
}
.task-table { .task-table {
width: 100%; width: 100%;
@@ -64,28 +82,29 @@
td { td {
padding: 6px 8px; padding: 6px 8px;
vertical-align: top; vertical-align: top;
font-size: 12px; //font-size: 12px;
line-height: 1.2; line-height: 1.2;
} }
.task-title-cell { .task-title-cell {
width: 100%; width: 100%;
max-width: 300px; // or whatever fits your layout max-width: 350px; // or whatever fits your layout
.task-title { .task-title {
font-weight: 500; font-size: 16px;
font-weight: 550;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
max-width: 100%; // Or a specific width if you want more control max-width: 100%; // Or a specific width if you want more control
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
} }
.task-ro-number { .task-ro-number {
margin-top: 5px; margin-top: 20px;
font-size: 11px; color: #1677ff;
color: rgba(0, 0, 0, 0.45);
} }
} }
@@ -104,7 +123,7 @@
color: white; color: white;
border: none; border: none;
border-radius: 4px; border-radius: 4px;
font-size: 12px; //font-size: 12px;
cursor: pointer; cursor: pointer;
&:hover { &:hover {