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-10 10:12:50 -04:00
parent 4a30a5bc64
commit 79e379b61a
3 changed files with 149 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -13,7 +13,7 @@ import {
} from "@ant-design/icons";
const TaskCenterComponent = forwardRef(
({ visible, tasks, loading, onTaskClick, onLoadMore, totalTasks, createNewTask }, ref) => {
({ visible, tasks, loading, error, onTaskClick, onLoadMore, hasMore, createNewTask }, ref) => {
const { t } = useTranslation();
const virtuosoRef = useRef(null);
@@ -24,8 +24,8 @@ const TaskCenterComponent = forwardRef(
[t("tasks.labels.no_due_date")]: <QuestionCircleOutlined style={{ marginRight: 8 }} />
};
const groupedItems = useMemo(() => {
const now = day("2025-07-09"); // Set to current date
const groups = useMemo(() => {
const now = day();
const today = now.startOf("day");
const overdue = tasks.filter((t) => t.due_date && day(t.due_date).isBefore(today));
@@ -35,62 +35,79 @@ const TaskCenterComponent = forwardRef(
);
const noDueDate = tasks.filter((t) => !t.due_date);
const makeGroup = (label, data) => (data.length ? [{ type: "section", label, tasks: data }] : []);
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)
];
{ label: t("tasks.labels.overdue"), tasks: overdue },
{ label: t("tasks.labels.due_today"), tasks: dueToday },
{ label: t("tasks.labels.upcoming"), tasks: upcoming },
{ label: t("tasks.labels.no_due_date"), tasks: noDueDate }
].filter((group) => group.tasks.length > 0);
}, [tasks, t]);
const getPriorityColor = (priority) => {
switch (priority) {
case 1:
return "red";
case 2:
return "orange";
case 3:
return "green";
default:
return null;
}
const groupCounts = useMemo(() => groups.map((group) => group.tasks.length), [groups]);
const flatTasks = useMemo(() => groups.flatMap((group) => group.tasks), [groups]);
const priorityColors = {
1: "red",
2: "orange",
3: "green"
};
const renderSection = (section, index) => (
<div key={`section-${index}`} className="task-section">
const getPriorityColor = (priority) => priorityColors[priority] || null;
const groupContent = (groupIndex) => {
const { label } = groups[groupIndex];
return (
<div className="section-title">
{sectionIcons[section.label]}
{section.label} ({section.tasks.length})
{sectionIcons[label]}
{label} ({groups[groupIndex].tasks.length})
</div>
<table className="task-table">
<tbody>
{section.tasks.map((task) => {
const priorityColor = getPriorityColor(task.priority);
return (
<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>
<div className="task-ro-number">
{t("notifications.labels.ro-number", {
ro_number: task.job?.ro_number || t("general.labels.na")
})}
</div>
</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>
</tr>
);
})}
</tbody>
</table>
</div>
);
);
};
const itemContent = (index) => {
const task = flatTasks[index];
const priorityColor = getPriorityColor(task.priority);
return (
<div
className="task-row"
onClick={() => onTaskClick(task.id)}
role="button"
tabIndex={0}
onKeyDown={(e) => {
if (e.key === "Enter" || e.key === " ") {
onTaskClick(task.id);
}
}}
>
<div className="task-title-cell">
<div className="task-row-container">
<div className="task-title">{task.title}</div>
<div className="task-ro-number">
{t("notifications.labels.ro-number", {
ro_number: task.job?.ro_number || t("general.labels.na")
})}
</div>
</div>
</div>
<div className="task-due-cell">
{task.due_date && <span>{day(task.due_date).fromNow()}</span>}
{!!priorityColor && <Badge color={priorityColor} dot style={{ marginLeft: 6 }} />}
</div>
</div>
);
};
if (error) {
return (
<div className={`task-center ${visible ? "visible" : ""}`} ref={ref}>
<div className="task-header">
<h3>{t("tasks.labels.my_tasks_center")}</h3>
</div>
<div className="error-message">{t("errors.tasks_load_failed")}</div>
</div>
);
}
return (
<div className={`task-center ${visible ? "visible" : ""}`} ref={ref}>
@@ -104,17 +121,25 @@ const TaskCenterComponent = forwardRef(
</div>
</div>
<Virtuoso
ref={virtuosoRef}
style={{ height: "550px", width: "100%" }}
data={groupedItems}
itemContent={(index, section) => renderSection(section, index)}
/>
{tasks.length < totalTasks && (
<button onClick={onLoadMore} disabled={loading}>
{t("general.labels.load_more")}
</button>
{tasks.length === 0 && !loading ? (
<div className="no-tasks-message">{t("tasks.labels.no_tasks")}</div>
) : (
<Virtuoso
ref={virtuosoRef}
style={{ height: "550px", width: "100%" }}
groupCounts={groupCounts}
groupContent={groupContent}
itemContent={itemContent}
endReached={hasMore && !loading ? onLoadMore : undefined}
components={{
Footer: () =>
loading ? (
<div className="loading-footer">
<Spin />
</div>
) : null
}}
/>
)}
</div>
);