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:43:05 -05:00
parent f8ae6dc5af
commit 059067bc61
9 changed files with 220 additions and 147 deletions
Download Patch File Download Diff File Expand all files Collapse all files

191
client/src/components/notification-center/notification-center.component.jsx
View File

@@ -2,106 +2,115 @@ import { Virtuoso } from "react-virtuoso";
import { Alert, Badge, Button, Space, Spin, Tooltip, Typography } from "antd";
import { CheckCircleFilled, CheckCircleOutlined, EyeFilled, EyeOutlined } from "@ant-design/icons";
import { useTranslation } from "react-i18next";
import { Link } from "react-router-dom";
import { useNavigate } from "react-router-dom";
import "./notification-center.styles.scss";
import day from "../../utils/day.js";
import { forwardRef } from "react";
const { Text, Title } = Typography;
const NotificationCenterComponent = ({
visible,
onClose,
notifications,
loading,
error,
showUnreadOnly,
toggleUnreadOnly,
markAllRead,
loadMore,
onNotificationClick,
unreadCount
}) => {
const { t } = useTranslation();
/**
* Notification Center Component
* @type {React.ForwardRefExoticComponent<React.PropsWithoutRef<{readonly visible?: *, readonly onClose?: *, readonly notifications?: *, readonly loading?: *, readonly error?: *, readonly showUnreadOnly?: *, readonly toggleUnreadOnly?: *, readonly markAllRead?: *, readonly loadMore?: *, readonly onNotificationClick?: *, readonly unreadCount?: *}> & React.RefAttributes<unknown>>}
*/
const NotificationCenterComponent = forwardRef(
(
{
visible,
onClose,
notifications,
loading,
error,
showUnreadOnly,
toggleUnreadOnly,
markAllRead,
loadMore,
onNotificationClick,
unreadCount
},
ref
) => {
const { t } = useTranslation();
const navigate = useNavigate();
const renderNotification = (index, notification) => {
return (
<div
key={`${notification.id}-${index}`}
className={`notification-item ${notification.read ? "notification-read" : "notification-unread"}`}
onClick={() => !notification.read && onNotificationClick(notification.id)}
>
<Badge dot={!notification.read}>
<div className="notification-content">
<Title level={5} className="notification-title">
<Link
to={`/manage/jobs/${notification.jobid}`}
onClick={(e) => {
e.stopPropagation();
if (!notification.read) {
onNotificationClick(notification.id);
}
}}
className="ro-number"
>
{t("notifications.labels.ro-number", { ro_number: notification.roNumber })}
</Link>
<Text
type="secondary"
className="relative-time"
title={day(notification.created_at).format("YYYY-MM-DD hh:mm A")}
>
{day(notification.created_at).fromNow()}
const renderNotification = (index, notification) => {
const handleClick = () => {
if (!notification.read) {
onNotificationClick(notification.id);
}
navigate(`/manage/jobs/${notification.jobid}`);
};
return (
<div
key={`${notification.id}-${index}`}
className={`notification-item ${notification.read ? "notification-read" : "notification-unread"}`}
onClick={handleClick}
>
<Badge dot={!notification.read}>
<div className="notification-content">
<Title level={5} className="notification-title">
<span className="ro-number">
{t("notifications.labels.ro-number", { ro_number: notification.roNumber })}
</span>
<Text
type="secondary"
className="relative-time"
title={day(notification.created_at).format("YYYY-MM-DD hh:mm A")}
>
{day(notification.created_at).fromNow()}
</Text>
</Title>
<Text strong={!notification.read} className="notification-body">
<ul>
{notification.scenarioText.map((text, idx) => (
<li key={`${notification.id}-${idx}`}>{text}</li>
))}
</ul>
</Text>
</Title>
<Text strong={!notification.read} className="notification-body">
<ul>
{notification.scenarioText.map((text, idx) => (
<li key={`${notification.id}-${idx}`}>{text}</li>
))}
</ul>
</Text>
</div>
</Badge>
</div>
);
};
return (
<div className={`notification-center ${visible ? "visible" : ""}`} ref={ref}>
<div className="notification-header">
<Space direction="horizontal">
<h3>{t("notifications.labels.notification-center")}</h3>
{loading && !error && <Spin spinning={loading} size="small"></Spin>}
</Space>
<div className="notification-controls">
<Tooltip title={t("notifications.labels.show-unread-only")}>
<Button
type="link"
icon={showUnreadOnly ? <EyeFilled /> : <EyeOutlined />}
onClick={() => toggleUnreadOnly(!showUnreadOnly)}
className={showUnreadOnly ? "active" : ""}
/>
</Tooltip>
<Tooltip title={t("notifications.labels.mark-all-read")}>
<Button
type="link"
icon={!unreadCount ? <CheckCircleFilled /> : <CheckCircleOutlined />}
onClick={markAllRead}
disabled={!unreadCount}
/>
</Tooltip>
</div>
</Badge>
</div>
{error && <Alert message={error} type="error" closable onClose={() => onClose()} />}
<Virtuoso
style={{ height: "400px", width: "100%" }}
data={notifications}
totalCount={notifications.length}
endReached={loadMore}
itemContent={renderNotification}
/>
</div>
);
};
return (
<div className={`notification-center ${visible ? "visible" : ""}`}>
<div className="notification-header">
<Space direction="horizontal">
<h3>{t("notifications.labels.notification-center")}</h3>
{loading && !error && <Spin spinning={loading} size="small"></Spin>}
</Space>
<div className="notification-controls">
<Tooltip title={t("notifications.labels.show-unread-only")}>
<Button
type="link"
icon={showUnreadOnly ? <EyeFilled /> : <EyeOutlined />}
onClick={() => toggleUnreadOnly(!showUnreadOnly)}
className={showUnreadOnly ? "active" : ""}
/>
</Tooltip>
<Tooltip title={t("notifications.labels.mark-all-read")}>
<Button
type="link"
icon={!unreadCount ? <CheckCircleFilled /> : <CheckCircleOutlined />}
onClick={markAllRead}
disabled={!unreadCount}
/>
</Tooltip>
</div>
</div>
{error && <Alert message={error} type="error" closable onClose={() => onClose()} />}
<Virtuoso
style={{ height: "400px", width: "100%" }}
data={notifications}
totalCount={notifications.length}
endReached={loadMore}
itemContent={renderNotification}
/>
</div>
);
};
}
);
export default NotificationCenterComponent;

30
client/src/components/notification-center/notification-center.container.jsx
View File

@@ -1,4 +1,4 @@
import { useCallback, useEffect, useMemo, useState } from "react";
import { useCallback, useEffect, useMemo, useRef, useState } from "react"; // Add useRef
import { useQuery } from "@apollo/client";
import { connect } from "react-redux";
import NotificationCenterComponent from "./notification-center.component";
@@ -11,11 +11,21 @@ import day from "../../utils/day.js";
// This will be used to poll for notifications when the socket is disconnected
const NOTIFICATION_POLL_INTERVAL_SECONDS = 60;
export function NotificationCenterContainer({ visible, onClose, bodyshop, unreadCount }) {
/**
* Notification Center Container
* @param visible
* @param onClose
* @param bodyshop
* @param unreadCount
* @returns {JSX.Element}
* @constructor
*/
const NotificationCenterContainer = ({ visible, onClose, bodyshop, unreadCount }) => {
const [showUnreadOnly, setShowUnreadOnly] = useState(false);
const [notifications, setNotifications] = useState([]);
const [error, setError] = useState(null);
const { isConnected, markNotificationRead, markAllNotificationsRead } = useSocket();
const notificationRef = useRef(null); // Add ref for the notification center
const userAssociationId = bodyshop?.associations?.[0]?.id;
@@ -50,6 +60,19 @@ export function NotificationCenterContainer({ visible, onClose, bodyshop, unread
}
});
// Handle click outside to close
useEffect(() => {
const handleClickOutside = (event) => {
if (visible && notificationRef.current && !notificationRef.current.contains(event.target)) {
onClose();
}
};
document.addEventListener("mousedown", handleClickOutside);
return () => {
document.removeEventListener("mousedown", handleClickOutside);
};
}, [visible, onClose]);
useEffect(() => {
if (data?.notifications) {
const processedNotifications = data.notifications
@@ -159,6 +182,7 @@ export function NotificationCenterContainer({ visible, onClose, bodyshop, unread
return (
<NotificationCenterComponent
ref={notificationRef}
visible={visible}
onClose={onClose}
notifications={notifications}
@@ -172,7 +196,7 @@ export function NotificationCenterContainer({ visible, onClose, bodyshop, unread
unreadCount={unreadCount}
/>
);
}
};
const mapStateToProps = createStructuredSelector({
bodyshop: selectBodyshop

11
client/src/components/notification-center/notification-center.styles.scss
View File

@@ -11,7 +11,7 @@
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08), 0 3px 6px rgba(0, 0, 0, 0.06);
z-index: 1000;
display: none;
overflow-x: hidden; /* Prevent horizontal overflow */
overflow-x: hidden;
&.visible {
display: block;
@@ -67,12 +67,17 @@
}
.notification-item {
padding: 8px 16px;
padding: 12px 16px; // Increased padding from 8px to 12px for more space
border-bottom: 1px solid #f0f0f0;
display: block;
overflow: visible;
width: 100%;
box-sizing: border-box;
cursor: pointer; // Add pointer cursor to indicate clickability
&:hover {
background: #fafafa; // Optional: Add hover effect for better UX
}
.notification-content {
width: 100%;
@@ -122,7 +127,7 @@
}
.ant-badge {
width: 100%; /* Ensure Badge takes full width to allow .notification-title to stretch properly */
width: 100%;
}
.ant-alert {

56
client/src/components/notification-settings/column-header-checkbox.component.jsx Normal file
View File

@@ -0,0 +1,56 @@
import { notificationScenarios } from "../../utils/jobNotificationScenarios.js";
import { Checkbox, Form } from "antd";
import { useTranslation } from "react-i18next";
import PropTypes from "prop-types";
/**
* ColumnHeaderCheckbox
* @param channel
* @param form
* @param disabled
* @param onHeaderChange
* @returns {JSX.Element}
* @constructor
*/
const ColumnHeaderCheckbox = ({ channel, form, disabled = false, onHeaderChange }) => {
const { t } = useTranslation();
// Subscribe to all form values so that this component re-renders on changes.
const formValues = Form.useWatch([], form) || {};
// Determine if all scenarios for this channel are checked.
const allChecked =
notificationScenarios.length > 0 && notificationScenarios.every((scenario) => formValues[scenario]?.[channel]);
const onChange = (e) => {
const checked = e.target.checked;
// Get current form values.
const currentValues = form.getFieldsValue();
// Update each scenario for this channel.
const newValues = { ...currentValues };
notificationScenarios.forEach((scenario) => {
newValues[scenario] = { ...newValues[scenario], [channel]: checked };
});
// Update form values.
form.setFieldsValue(newValues);
// Manually mark the form as dirty.
if (onHeaderChange) {
onHeaderChange();
}
};
return (
<Checkbox onChange={onChange} checked={allChecked} disabled={disabled}>
{t(`notifications.channels.${channel}`)}
</Checkbox>
);
};
ColumnHeaderCheckbox.propTypes = {
channel: PropTypes.oneOf(["app", "email", "fcm"]).isRequired,
form: PropTypes.object.isRequired,
disabled: PropTypes.bool,
onHeaderChange: PropTypes.func
};
export default ColumnHeaderCheckbox;

65
client/src/components/profile-my/notification-settings.component.jsx → client/src/components/notification-settings/notification-settings-form.component.jsx
View File

@@ -2,7 +2,6 @@ import { useMutation, useQuery } from "@apollo/client";
import { useEffect, useState } from "react";
import { Button, Card, Checkbox, Form, Space, Table } from "antd";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { selectCurrentUser } from "../../redux/user/user.selectors";
@@ -11,52 +10,21 @@ import { QUERY_NOTIFICATION_SETTINGS, UPDATE_NOTIFICATION_SETTINGS } from "../..
import { notificationScenarios } from "../../utils/jobNotificationScenarios.js";
import LoadingSpinner from "../loading-spinner/loading-spinner.component.jsx";
import PropTypes from "prop-types";
import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
import ColumnHeaderCheckbox from "../notification-settings/column-header-checkbox.component.jsx";
const ColumnHeaderCheckbox = ({ channel, form, disabled = false, onHeaderChange }) => {
const { t } = useTranslation();
// Subscribe to all form values so that this component re-renders on changes.
const formValues = Form.useWatch([], form) || {};
// Determine if all scenarios for this channel are checked.
const allChecked =
notificationScenarios.length > 0 && notificationScenarios.every((scenario) => formValues[scenario]?.[channel]);
const onChange = (e) => {
const checked = e.target.checked;
// Get current form values.
const currentValues = form.getFieldsValue();
// Update each scenario for this channel.
const newValues = { ...currentValues };
notificationScenarios.forEach((scenario) => {
newValues[scenario] = { ...newValues[scenario], [channel]: checked };
});
// Update form values.
form.setFieldsValue(newValues);
// Manually mark the form as dirty.
if (onHeaderChange) {
onHeaderChange();
}
};
return (
<Checkbox onChange={onChange} checked={allChecked} disabled={disabled}>
{t(`notifications.channels.${channel}`)}
</Checkbox>
);
};
ColumnHeaderCheckbox.propTypes = {
channel: PropTypes.oneOf(["app", "email", "fcm"]).isRequired,
form: PropTypes.object.isRequired,
disabled: PropTypes.bool,
onHeaderChange: PropTypes.func
};
function NotificationSettingsForm({ currentUser }) {
/**
* Notifications Settings Form
* @param currentUser
* @returns {JSX.Element}
* @constructor
*/
const NotificationSettingsForm = ({ currentUser }) => {
const { t } = useTranslation();
const [form] = Form.useForm();
const [initialValues, setInitialValues] = useState({});
const [isDirty, setIsDirty] = useState(false);
const notification = useNotification();
// Fetch notification settings.
const { loading, error, data } = useQuery(QUERY_NOTIFICATION_SETTINGS, {
@@ -88,9 +56,14 @@ function NotificationSettingsForm({ currentUser }) {
if (data?.associations?.length > 0) {
const userId = data.associations[0].id;
// Save the updated notification settings.
await updateNotificationSettings({ variables: { id: userId, ns: values } });
setInitialValues(values);
setIsDirty(false);
const result = await updateNotificationSettings({ variables: { id: userId, ns: values } });
if (!result?.errors) {
notification.success({ message: t("notifications.labels.notification-settings-success") });
setInitialValues(values);
setIsDirty(false);
} else {
notification.error({ message: t("notifications.labels.notification-settings-failure") });
}
}
};
@@ -180,7 +153,7 @@ function NotificationSettingsForm({ currentUser }) {
</Card>
</Form>
);
}
};
NotificationSettingsForm.propTypes = {
currentUser: PropTypes.shape({

2
client/src/components/profile-my/profile-my.component.jsx
View File

@@ -8,8 +8,8 @@ import { selectCurrentUser } from "../../redux/user/user.selectors";
import { logImEXEvent, updateCurrentPassword } from "../../firebase/firebase.utils";
import LayoutFormRow from "../layout-form-row/layout-form-row.component";
import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
import NotificationSettingsForm from "./notification-settings.component.jsx";
import { useSocket } from "../../contexts/SocketIO/useSocket.jsx";
import NotificationSettingsForm from "../notification-settings/notification-settings-form.component.jsx";
const mapStateToProps = createStructuredSelector({
currentUser: selectCurrentUser

4
client/src/translations/en_us/common.json
View File

@@ -3783,7 +3783,9 @@
"mark-all-read": "Mark Read",
"notification-popup-title": "Changes for Job #{{ro_number}}",
"ro-number": "RO #{{ro_number}}",
"no-watchers": "No Watchers"
"no-watchers": "No Watchers",
"notification-settings-success": "Notification Settings saved successfully.",
"notification-settings-failure": "Error saving Notification Settings. {{error}}"
},
"actions": {
"remove": "remove"

4
client/src/translations/es/common.json
View File

@@ -3783,7 +3783,9 @@
"mark-all-read": "",
"notification-popup-title": "",
"ro-number": "",
"no-watchers": ""
"no-watchers": "",
"notification-settings-success": "",
"notification-settings-failure": ""
},
"actions": {
"remove": ""

4
client/src/translations/fr/common.json
View File

@@ -3783,7 +3783,9 @@
"mark-all-read": "",
"notification-popup-title": "",
"ro-number": "",
"no-watchers": ""
"no-watchers": "",
"notification-settings-success": "",
"notification-settings-failure": ""
},
"actions": {
"remove": ""