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

IO-3166-Global-Notifications-Part-2 - Checkpoint

Browse Source
This commit is contained in:
Dave Richer
2025-03-05 11:07:28 -05:00
parent ec8a413ed1
commit f8ae6dc5af
12 changed files with 377 additions and 239 deletions
Download Patch File Download Diff File Expand all files Collapse all files

231
client/src/pages/jobs-detail/job-watcher-toggle.component.jsx
View File

@@ -1,231 +0,0 @@
import { useCallback, useMemo, useState } from "react";
import { useMutation, useQuery } from "@apollo/client";
import { EyeFilled, EyeOutlined, UserOutlined } from "@ant-design/icons";
import { ADD_JOB_WATCHER, GET_JOB_WATCHERS, REMOVE_JOB_WATCHER } from "../../graphql/jobs.queries.js";
import { Avatar, Button, Divider, List, Popover, Select, Tooltip, Typography } from "antd";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors.js";
import EmployeeSearchSelectComponent from "../../components/employee-search-select/employee-search-select.component.jsx";
import LoadingSpinner from "../../components/loading-spinner/loading-spinner.component.jsx";
import { useSplitTreatments } from "@splitsoftware/splitio-react";
const { Text } = Typography;
const mapStateToProps = createStructuredSelector({
bodyshop: selectBodyshop,
currentUser: selectCurrentUser
});
const JobWatcherToggle = ({ job, currentUser, bodyshop }) => {
const { t } = useTranslation();
const {
treatments: { Enhanced_Payroll }
} = useSplitTreatments({
attributes: {},
names: ["Enhanced_Payroll"],
splitKey: bodyshop && bodyshop.imexshopid
});
const userEmail = currentUser.email;
const jobid = job.id;
const [open, setOpen] = useState(false);
const [selectedWatcher, setSelectedWatcher] = useState(null);
const [selectedTeam, setSelectedTeam] = useState(null);
// Fetch current watchers
const { data: watcherData, loading: watcherLoading } = useQuery(GET_JOB_WATCHERS, { variables: { jobid } });
// Extract watchers list
const jobWatchers = useMemo(() => watcherData?.job_watchers || [], [watcherData]);
const isWatching = jobWatchers.some((w) => w.user_email === userEmail);
// Add watcher mutation with cache update
const [addWatcher, { loading: adding }] = useMutation(ADD_JOB_WATCHER, {
update(cache, { data: { insert_job_watchers_one } }) {
const existingData = cache.readQuery({
query: GET_JOB_WATCHERS,
variables: { jobid }
});
const updatedWatchers = [...(existingData?.job_watchers || []), insert_job_watchers_one];
cache.writeQuery({
query: GET_JOB_WATCHERS,
variables: { jobid },
data: {
...existingData,
job_watchers: updatedWatchers
}
});
}
});
// Remove watcher mutation with cache update
const [removeWatcher, { loading: removing }] = useMutation(REMOVE_JOB_WATCHER, {
update(cache, { data: { delete_job_watchers } }) {
const existingData = cache.readQuery({
query: GET_JOB_WATCHERS,
variables: { jobid }
});
const deletedWatcher = delete_job_watchers.returning[0]; // Safely assume one row deleted
const updatedWatchers = deletedWatcher
? (existingData?.job_watchers || []).filter((watcher) => watcher.user_email !== deletedWatcher.user_email)
: existingData?.job_watchers || []; // No change if nothing deleted
cache.writeQuery({
query: GET_JOB_WATCHERS,
variables: { jobid },
data: {
...existingData,
job_watchers: updatedWatchers
}
});
}
});
// Toggle watcher for self
const handleToggleSelf = useCallback(() => {
(isWatching
? removeWatcher({ variables: { jobid, userEmail } })
: addWatcher({ variables: { jobid, userEmail } })
).catch((err) => console.error(`Error updating job watcher: ${err.message}`));
}, [isWatching, addWatcher, removeWatcher, jobid, userEmail]);
// Handle removing a watcher
const handleRemoveWatcher = (userEmail) => {
removeWatcher({ variables: { jobid, userEmail } }).catch((err) =>
console.error(`Error removing job watcher: ${err.message}`)
);
};
const handleWatcherSelect = (selectedUser) => {
const employee = bodyshop.employees.find((e) => e.id === selectedUser);
if (!employee) return;
const isAlreadyWatching = jobWatchers.some((w) => w.user_email === employee.user_email);
if (isAlreadyWatching) {
handleRemoveWatcher(employee.user_email);
} else {
addWatcher({ variables: { jobid, userEmail: employee.user_email } }).catch((err) =>
console.error(`Error adding job watcher: ${err.message}`)
);
}
setSelectedWatcher(null);
};
const handleTeamSelect = (team) => {
const selectedTeamMembers = JSON.parse(team);
const newWatchers = selectedTeamMembers.filter(
(email) => !jobWatchers.some((watcher) => watcher.user_email === email)
);
newWatchers.forEach((email) => {
addWatcher({ variables: { jobid, userEmail: email } }).catch((err) =>
console.error(`Error adding job watcher: ${err.message}`)
);
});
setSelectedTeam(null);
};
const handleRenderItem = (watcher) => {
const employee = bodyshop.employees.find((e) => e.user_email === watcher.user_email);
const displayName = employee ? `${employee.first_name} ${employee.last_name}` : watcher.user_email;
return (
<List.Item
actions={[
<Button type="link" danger size="small" onClick={() => handleRemoveWatcher(watcher.user_email)}>
{t("notifications.actions.remove")}
</Button>
]}
>
<List.Item.Meta
avatar={<Avatar icon={<UserOutlined />} />}
title={<Text>{displayName}</Text>}
description={watcher.user_email}
/>
</List.Item>
);
};
const popoverContent = (
<div style={{ width: 600 }}>
<Button
block
type="text"
icon={isWatching ? <EyeOutlined /> : <EyeFilled />}
onClick={handleToggleSelf}
loading={adding || removing}
>
{isWatching ? t("notifications.tooltips.unwatch") : t("notifications.tooltips.watch")}
</Button>
<Text type="secondary" style={{ marginBottom: 8, display: "block" }}>
{t("notifications.labels.watching-issue")}
</Text>
{watcherLoading ? <LoadingSpinner /> : <List dataSource={jobWatchers} renderItem={handleRenderItem} />}
<Divider />
<Text type="secondary">{t("notifications.labels.add-watchers")}</Text>
<EmployeeSearchSelectComponent
style={{ minWidth: "100%" }}
options={bodyshop.employees.filter((e) => jobWatchers.every((w) => w.user_email !== e.user_email))}
placeholder={t("notifications.labels.employee-search")}
value={selectedWatcher}
onChange={(value) => {
setSelectedWatcher(value);
handleWatcherSelect(value);
}}
/>
{Enhanced_Payroll && bodyshop?.employee_teams?.length > 0 && (
<>
<Divider />
<Text type="secondary">{t("notifications.labels.add-watchers-team")}</Text>
<Select
showSearch
style={{ minWidth: "100%" }}
placeholder={t("notifications.labels.teams-search")}
value={selectedTeam}
onChange={handleTeamSelect}
options={bodyshop.employee_teams.map((team) => {
const teamMembers = team.employee_team_members
.map((member) => {
const employee = bodyshop.employees.find((e) => e.id === member.employeeid);
return employee ? employee.user_email : null;
})
.filter(Boolean);
return {
value: JSON.stringify(teamMembers),
label: team.name
};
})}
/>
</>
)}
</div>
);
return (
<Popover content={popoverContent} trigger="click" open={open} onOpenChange={setOpen}>
<Tooltip title={isWatching ? t("notifications.tooltips.unwatch") : t("notifications.tooltips.watch")}>
<Button
shape="circle"
type={isWatching ? "primary" : "default"}
icon={isWatching ? <EyeFilled /> : <EyeOutlined />}
loading={watcherLoading}
/>
</Tooltip>
</Popover>
);
};
export default connect(mapStateToProps)(JobWatcherToggle);

4
client/src/pages/jobs-detail/jobs-detail.page.component.jsx
View File

@@ -56,8 +56,8 @@ import { DateTimeFormat } from "../../utils/DateFormatter";
import dayjs from "../../utils/day";
import UndefinedToNull from "../../utils/undefinedtonull";
import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
import JobWatcherToggle from "./job-watcher-toggle.component.jsx";
import { useSocket } from "../../contexts/SocketIO/useSocket.jsx";
import JobWatcherToggleContainer from "../../components/job-watcher-toggle/job-watcher-toggle.container.jsx";
const mapStateToProps = createStructuredSelector({
bodyshop: selectBodyshop,
@@ -325,7 +325,7 @@ export function JobsDetailPage({
title={
<Space>
{scenarioNotificationsOn && <JobWatcherToggle job={job} />}
{scenarioNotificationsOn && <JobWatcherToggleContainer job={job} />}
{job.ro_number || t("general.labels.na")}
</Space>
}