feature/IO-3291-Tasks-Notifications: Checkpoint
This commit is contained in:
Dave Richer
190
client/src/components/header/buildAccountingChildren.jsx
Normal file
190
client/src/components/header/buildAccountingChildren.jsx
Normal file
@@ -0,0 +1,190 @@
|
|||||||
|
import { Link } from "react-router-dom";
|
||||||
|
import { FaCreditCard, FaFileInvoiceDollar } from "react-icons/fa";
|
||||||
|
import { GiPayMoney, GiPlayerTime } from "react-icons/gi";
|
||||||
|
import { BankFilled, ExportOutlined, FieldTimeOutlined } from "@ant-design/icons";
|
||||||
|
import LockWrapper from "../../components/lock-wrapper/lock-wrapper.component.jsx";
|
||||||
|
import { HasFeatureAccess } from "../../components/feature-wrapper/feature-wrapper.component";
|
||||||
|
|
||||||
|
// --- Menu Item Builders ---
|
||||||
|
const buildAccountingChildren = ({
|
||||||
|
t,
|
||||||
|
bodyshop,
|
||||||
|
currentUser,
|
||||||
|
setBillEnterContext,
|
||||||
|
setPaymentContext,
|
||||||
|
setCardPaymentContext,
|
||||||
|
setTimeTicketContext,
|
||||||
|
ImEXPay,
|
||||||
|
DmsAp,
|
||||||
|
Simple_Inventory
|
||||||
|
}) => [
|
||||||
|
{
|
||||||
|
key: "bills",
|
||||||
|
id: "header-accounting-bills",
|
||||||
|
icon: <FaFileInvoiceDollar />,
|
||||||
|
label: (
|
||||||
|
<Link to="/manage/bills">
|
||||||
|
<LockWrapper featureName="bills" bodyshop={bodyshop}>
|
||||||
|
{t("menus.header.bills")}
|
||||||
|
</LockWrapper>
|
||||||
|
</Link>
|
||||||
|
)
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: "enterbills",
|
||||||
|
id: "header-accounting-enterbills",
|
||||||
|
icon: <GiPayMoney />,
|
||||||
|
label: (
|
||||||
|
<LockWrapper featureName="bills" bodyshop={bodyshop}>
|
||||||
|
{t("menus.header.enterbills")}
|
||||||
|
</LockWrapper>
|
||||||
|
),
|
||||||
|
onClick: () =>
|
||||||
|
HasFeatureAccess({ featureName: "bills", bodyshop }) && setBillEnterContext({ actions: {}, context: {} })
|
||||||
|
},
|
||||||
|
...(Simple_Inventory.treatment === "on"
|
||||||
|
? [
|
||||||
|
{ type: "divider" },
|
||||||
|
{
|
||||||
|
key: "inventory",
|
||||||
|
id: "header-accounting-inventory",
|
||||||
|
icon: <FaFileInvoiceDollar />,
|
||||||
|
label: <Link to="/manage/inventory">{t("menus.header.inventory")}</Link>
|
||||||
|
}
|
||||||
|
]
|
||||||
|
: []),
|
||||||
|
{ type: "divider" },
|
||||||
|
{
|
||||||
|
key: "allpayments",
|
||||||
|
id: "header-accounting-allpayments",
|
||||||
|
icon: <BankFilled />,
|
||||||
|
label: <Link to="/manage/payments">{t("menus.header.allpayments")}</Link>
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: "enterpayments",
|
||||||
|
id: "header-accounting-enterpayments",
|
||||||
|
icon: <FaCreditCard />,
|
||||||
|
label: t("menus.header.enterpayment"),
|
||||||
|
onClick: () => setPaymentContext({ actions: {}, context: null })
|
||||||
|
},
|
||||||
|
...(ImEXPay.treatment === "on"
|
||||||
|
? [
|
||||||
|
{
|
||||||
|
key: "entercardpayments",
|
||||||
|
id: "header-accounting-entercardpayments",
|
||||||
|
icon: <FaCreditCard />,
|
||||||
|
label: t("menus.header.entercardpayment"),
|
||||||
|
onClick: () => setCardPaymentContext({ actions: {}, context: {} })
|
||||||
|
}
|
||||||
|
]
|
||||||
|
: []),
|
||||||
|
{ type: "divider" },
|
||||||
|
{
|
||||||
|
key: "timetickets",
|
||||||
|
id: "header-accounting-timetickets",
|
||||||
|
icon: <FieldTimeOutlined />,
|
||||||
|
label: (
|
||||||
|
<Link to="/manage/timetickets">
|
||||||
|
<LockWrapper featureName="timetickets" bodyshop={bodyshop}>
|
||||||
|
{t("menus.header.timetickets")}
|
||||||
|
</LockWrapper>
|
||||||
|
</Link>
|
||||||
|
)
|
||||||
|
},
|
||||||
|
...(bodyshop?.md_tasks_presets?.use_approvals
|
||||||
|
? [
|
||||||
|
{
|
||||||
|
key: "ttapprovals",
|
||||||
|
id: "header-accounting-ttapprovals",
|
||||||
|
icon: <FieldTimeOutlined />,
|
||||||
|
label: <Link to="/manage/ttapprovals">{t("menus.header.ttapprovals")}</Link>
|
||||||
|
}
|
||||||
|
]
|
||||||
|
: []),
|
||||||
|
{
|
||||||
|
key: "entertimetickets",
|
||||||
|
id: "header-accounting-entertimetickets",
|
||||||
|
icon: <GiPlayerTime />,
|
||||||
|
label: (
|
||||||
|
<LockWrapper featureName="timetickets" bodyshop={bodyshop}>
|
||||||
|
{t("menus.header.entertimeticket")}
|
||||||
|
</LockWrapper>
|
||||||
|
),
|
||||||
|
onClick: () =>
|
||||||
|
HasFeatureAccess({ featureName: "timetickets", bodyshop }) &&
|
||||||
|
setTimeTicketContext({
|
||||||
|
actions: {},
|
||||||
|
context: {
|
||||||
|
created_by: currentUser.displayName ? `${currentUser.email} | ${currentUser.displayName}` : currentUser.email
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
{ type: "divider" },
|
||||||
|
{
|
||||||
|
key: "accountingexport",
|
||||||
|
id: "header-accounting-export",
|
||||||
|
icon: <ExportOutlined />,
|
||||||
|
label: (
|
||||||
|
<LockWrapper featureName="export" bodyshop={bodyshop}>
|
||||||
|
{t("menus.header.export")}
|
||||||
|
</LockWrapper>
|
||||||
|
),
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
key: "receivables",
|
||||||
|
id: "header-accounting-receivables",
|
||||||
|
label: (
|
||||||
|
<Link to="/manage/accounting/receivables">
|
||||||
|
<LockWrapper featureName="export" bodyshop={bodyshop}>
|
||||||
|
{t("menus.header.accounting-receivables")}
|
||||||
|
</LockWrapper>
|
||||||
|
</Link>
|
||||||
|
)
|
||||||
|
},
|
||||||
|
...(!((bodyshop && bodyshop.cdk_dealerid) || (bodyshop && bodyshop.pbs_serialnumber)) || DmsAp.treatment === "on"
|
||||||
|
? [
|
||||||
|
{
|
||||||
|
key: "payables",
|
||||||
|
id: "header-accounting-payables",
|
||||||
|
label: (
|
||||||
|
<Link to="/manage/accounting/payables">
|
||||||
|
<LockWrapper featureName="export" bodyshop={bodyshop}>
|
||||||
|
{t("menus.header.accounting-payables")}
|
||||||
|
</LockWrapper>
|
||||||
|
</Link>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
]
|
||||||
|
: []),
|
||||||
|
...(!((bodyshop && bodyshop.cdk_dealerid) || (bodyshop && bodyshop.pbs_serialnumber))
|
||||||
|
? [
|
||||||
|
{
|
||||||
|
key: "payments",
|
||||||
|
id: "header-accounting-payments",
|
||||||
|
label: (
|
||||||
|
<Link to="/manage/accounting/payments">
|
||||||
|
<LockWrapper featureName="export" bodyshop={bodyshop}>
|
||||||
|
{t("menus.header.accounting-payments")}
|
||||||
|
</LockWrapper>
|
||||||
|
</Link>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
]
|
||||||
|
: []),
|
||||||
|
{ type: "divider" },
|
||||||
|
{
|
||||||
|
key: "exportlogs",
|
||||||
|
id: "header-accounting-exportlogs",
|
||||||
|
label: (
|
||||||
|
<Link to="/manage/accounting/exportlogs">
|
||||||
|
<LockWrapper featureName="export" bodyshop={bodyshop}>
|
||||||
|
{t("menus.header.export-logs")}
|
||||||
|
</LockWrapper>
|
||||||
|
</Link>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
export default buildAccountingChildren;
|
||||||
File diff suppressed because it is too large
Load Diff
94
client/src/components/task-center/task-center.component.jsx
Normal file
94
client/src/components/task-center/task-center.component.jsx
Normal file
@@ -0,0 +1,94 @@
|
|||||||
|
// client/src/components/task-center/task-center.component.jsx
|
||||||
|
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 { useTranslation } from "react-i18next";
|
||||||
|
import { forwardRef, useEffect, useRef } from "react";
|
||||||
|
import { DateTimeFormat } from "../../utils/DateFormatter.jsx";
|
||||||
|
import day from "../../utils/day.js";
|
||||||
|
import "./task-center.styles.scss"; // You can clone this from notification styles for now
|
||||||
|
|
||||||
|
const { Text, Title } = Typography;
|
||||||
|
|
||||||
|
const TaskCenterComponent = forwardRef(
|
||||||
|
({ visible, onClose, tasks, loading, showIncompleteOnly, toggleIncomplete, markAllComplete, onTaskClick }, ref) => {
|
||||||
|
const { t } = useTranslation();
|
||||||
|
const virtuosoRef = useRef(null);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (virtuosoRef.current) {
|
||||||
|
virtuosoRef.current.scrollToIndex({ index: 0, behavior: "smooth" });
|
||||||
|
}
|
||||||
|
}, [showIncompleteOnly]);
|
||||||
|
|
||||||
|
const renderTask = (index, task) => {
|
||||||
|
const handleClick = () => {
|
||||||
|
onTaskClick(task.id);
|
||||||
|
};
|
||||||
|
|
||||||
|
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>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
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>
|
||||||
|
</div>
|
||||||
|
<Virtuoso
|
||||||
|
ref={virtuosoRef}
|
||||||
|
style={{ height: "400px", width: "100%" }}
|
||||||
|
data={tasks}
|
||||||
|
totalCount={tasks.length}
|
||||||
|
itemContent={renderTask}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
TaskCenterComponent.displayName = "TaskCenterComponent";
|
||||||
|
|
||||||
|
export default TaskCenterComponent;
|
||||||
116
client/src/components/task-center/task-center.container.jsx
Normal file
116
client/src/components/task-center/task-center.container.jsx
Normal file
@@ -0,0 +1,116 @@
|
|||||||
|
// client/src/components/task-center/task-center.container.jsx
|
||||||
|
import { useCallback, useEffect, useMemo, useState } from "react";
|
||||||
|
import { useMutation, useQuery } from "@apollo/client";
|
||||||
|
import { connect } from "react-redux";
|
||||||
|
import { createStructuredSelector } from "reselect";
|
||||||
|
import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors";
|
||||||
|
import { useSocket } from "../../contexts/SocketIO/useSocket";
|
||||||
|
import { useIsEmployee } from "../../utils/useIsEmployee";
|
||||||
|
import { useNotification } from "../../contexts/Notifications/notificationContext";
|
||||||
|
import { MUTATION_TOGGLE_TASK_COMPLETED, QUERY_MY_TASKS_PAGINATED } from "../../graphql/tasks.queries";
|
||||||
|
import TaskCenterComponent from "./task-center.component";
|
||||||
|
import dayjs from "../../utils/day";
|
||||||
|
|
||||||
|
const POLL_INTERVAL = 60; // seconds
|
||||||
|
|
||||||
|
const mapStateToProps = createStructuredSelector({
|
||||||
|
bodyshop: selectBodyshop,
|
||||||
|
currentUser: selectCurrentUser
|
||||||
|
});
|
||||||
|
|
||||||
|
const TaskCenterContainer = ({ visible, onClose, bodyshop, currentUser }) => {
|
||||||
|
const [tasks, setTasks] = useState([]);
|
||||||
|
const [showIncompleteOnly, setShowIncompleteOnly] = useState(true);
|
||||||
|
const [loading, setLoading] = useState(false);
|
||||||
|
const { isConnected } = useSocket();
|
||||||
|
const isEmployee = useIsEmployee(bodyshop, currentUser);
|
||||||
|
const notification = useNotification();
|
||||||
|
const assignedToId = bodyshop?.employees?.find((e) => e.user_email === currentUser.email)?.id;
|
||||||
|
|
||||||
|
const where = useMemo(() => {
|
||||||
|
return {
|
||||||
|
assigned_to: { _eq: assignedToId },
|
||||||
|
deleted: { _eq: false },
|
||||||
|
...(showIncompleteOnly ? { completed: { _eq: false } } : {})
|
||||||
|
};
|
||||||
|
}, [assignedToId, showIncompleteOnly]);
|
||||||
|
|
||||||
|
const {
|
||||||
|
data,
|
||||||
|
loading: queryLoading,
|
||||||
|
refetch
|
||||||
|
} = useQuery(QUERY_MY_TASKS_PAGINATED, {
|
||||||
|
variables: {
|
||||||
|
bodyshop: bodyshop?.id,
|
||||||
|
assigned_to: assignedToId,
|
||||||
|
where,
|
||||||
|
offset: 0,
|
||||||
|
limit: 50,
|
||||||
|
order: [{ created_at: "desc" }]
|
||||||
|
},
|
||||||
|
skip: !bodyshop?.id || !assignedToId || !isEmployee,
|
||||||
|
fetchPolicy: "cache-and-network",
|
||||||
|
pollInterval: isConnected ? 0 : dayjs.duration(POLL_INTERVAL, "seconds").asMilliseconds()
|
||||||
|
});
|
||||||
|
|
||||||
|
const [toggleTaskCompleted] = useMutation(MUTATION_TOGGLE_TASK_COMPLETED);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (data?.tasks) {
|
||||||
|
setTasks(data.tasks);
|
||||||
|
}
|
||||||
|
}, [data]);
|
||||||
|
|
||||||
|
const handleToggleIncomplete = (val) => {
|
||||||
|
setShowIncompleteOnly(val);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleMarkAllComplete = async () => {
|
||||||
|
setLoading(true);
|
||||||
|
try {
|
||||||
|
const incompleteTasks = tasks.filter((t) => !t.completed);
|
||||||
|
await Promise.all(
|
||||||
|
incompleteTasks.map((task) =>
|
||||||
|
toggleTaskCompleted({
|
||||||
|
variables: {
|
||||||
|
id: task.id,
|
||||||
|
completed: true,
|
||||||
|
completed_at: dayjs().toISOString()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
)
|
||||||
|
);
|
||||||
|
notification.success({ message: "Tasks marked complete" });
|
||||||
|
refetch();
|
||||||
|
} catch (err) {
|
||||||
|
notification.error({ message: "Failed to mark tasks complete" });
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleTaskClick = useCallback(
|
||||||
|
(id) => {
|
||||||
|
const task = tasks.find((t) => t.id === id);
|
||||||
|
if (task) {
|
||||||
|
window.location.href = `/manage/jobs/${task.jobid}`;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
[tasks]
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<TaskCenterComponent
|
||||||
|
visible={visible}
|
||||||
|
onClose={onClose}
|
||||||
|
tasks={tasks}
|
||||||
|
loading={loading || queryLoading}
|
||||||
|
showIncompleteOnly={showIncompleteOnly}
|
||||||
|
toggleIncomplete={handleToggleIncomplete}
|
||||||
|
markAllComplete={handleMarkAllComplete}
|
||||||
|
onTaskClick={handleTaskClick}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default connect(mapStateToProps)(TaskCenterContainer);
|
||||||
66
client/src/components/task-center/task-center.styles.scss
Normal file
66
client/src/components/task-center/task-center.styles.scss
Normal file
@@ -0,0 +1,66 @@
|
|||||||
|
.task-center {
|
||||||
|
position: absolute;
|
||||||
|
top: 64px;
|
||||||
|
right: 0;
|
||||||
|
z-index: 1000;
|
||||||
|
width: 400px;
|
||||||
|
max-height: 500px;
|
||||||
|
background: #fff;
|
||||||
|
border-left: 1px solid #ccc;
|
||||||
|
box-shadow: -2px 2px 8px rgba(0, 0, 0, 0.1);
|
||||||
|
overflow: hidden;
|
||||||
|
display: none;
|
||||||
|
|
||||||
|
&.visible {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.task-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 8px 12px;
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
border-bottom: 1px solid #ddd;
|
||||||
|
}
|
||||||
|
|
||||||
|
.task-toggle {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 4px;
|
||||||
|
|
||||||
|
.anticon {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.task-item {
|
||||||
|
padding: 12px;
|
||||||
|
border-bottom: 1px solid #f0f0f0;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background-color 0.2s;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: #fafafa;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.task-completed {
|
||||||
|
opacity: 0.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ro-number {
|
||||||
|
font-weight: bold;
|
||||||
|
margin-right: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.task-body {
|
||||||
|
display: block;
|
||||||
|
margin-top: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.relative-time {
|
||||||
|
float: right;
|
||||||
|
font-size: 0.8em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -381,3 +381,24 @@ export const MUTATION_UPDATE_TASK = gql`
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Query to get the count of my tasks
|
||||||
|
* @type {DocumentNode}
|
||||||
|
*/
|
||||||
|
export const QUERY_MY_TASKS_COUNT = gql`
|
||||||
|
query QUERY_MY_TASKS_COUNT($assigned_to: uuid!, $bodyshopid: uuid!) {
|
||||||
|
tasks_aggregate(
|
||||||
|
where: {
|
||||||
|
assigned_to: { _eq: $assigned_to }
|
||||||
|
bodyshopid: { _eq: $bodyshopid }
|
||||||
|
completed: { _eq: false }
|
||||||
|
deleted: { _eq: false }
|
||||||
|
}
|
||||||
|
) {
|
||||||
|
aggregate {
|
||||||
|
count
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|||||||
Reference in New Issue
Block a user