feature/IO-3096-GlobalNotifications - Checkpoint - Notification Center

2025-02-24 16:02:55 -05:00
parent 0f067fc503
commit b395839b37
9 changed files with 476 additions and 24 deletions
--- a/client/src/components/header/header.component.jsx
+++ b/client/src/components/header/header.component.jsx
@@ -27,7 +27,7 @@ import Icon, {
  UserOutlined
 } from "@ant-design/icons";
 import { useSplitTreatments } from "@splitsoftware/splitio-react";
-import { Layout, Menu, Space } from "antd";
+import { Badge, Layout, Menu, Space } from "antd";
 import { useTranslation } from "react-i18next";
 import { BsKanban } from "react-icons/bs";
 import { FaCalendarAlt, FaCarCrash, FaCreditCard, FaFileInvoiceDollar, FaTasks } from "react-icons/fa";
@@ -47,6 +47,9 @@ import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
 import LockWrapper from "../lock-wrapper/lock-wrapper.component";
 import { useState, useEffect } from "react";
 import { debounce } from "lodash";
+import { useQuery } from "@apollo/client";
+import { GET_UNREAD_COUNT } from "../../graphql/notifications.queries.js";
+import { NotificationCenterContainer } from "../notification-center/notification-center.container.jsx";

 // Used to Determine if the Header is in Mobile Mode, and to toggle the multiple menus
 const HEADER_MOBILE_BREAKPOINT = 576;
@@ -132,6 +135,19 @@ function Header({
    setIsMobile(effectiveWidth <= HEADER_MOBILE_BREAKPOINT);
  }, 200);

+  const [notificationVisible, setNotificationVisible] = useState(false);
+
+  const { data: unreadData } = useQuery(GET_UNREAD_COUNT, {
+    fetchPolicy: "cache-and-network"
+  });
+
+  const unreadCount = unreadData?.notifications_aggregate?.aggregate?.count || 0;
+
+  const handleNotificationClick = (e) => {
+    setNotificationVisible(!notificationVisible);
+    if (handleMenuClick) handleMenuClick(e);
+  };
+
  useEffect(() => {
    window.addEventListener("resize", handleResize);
    window.addEventListener("orientationchange", handleResize);
@@ -652,8 +668,13 @@ function Header({
    // Right-aligned items on desktop, merged on mobile
    {
      key: "notifications",
-      icon: <BellFilled />,
-      id: "header-notifications"
+      icon: (
+        <Badge count={unreadCount} offset={[10, 0]}>
+          <BellFilled />
+        </Badge>
+      ),
+      id: "header-notifications",
+      onClick: handleNotificationClick
    },
    {
      key: "recent",
@@ -774,6 +795,7 @@ function Header({
              overflow: "visible"
            }}
          />
+          <NotificationCenterContainer visible={notificationVisible} onClose={() => setNotificationVisible(false)} />
        </div>
      )}
    </Layout.Header>
--- a/client/src/components/jobs-detail-header/jobs-detail-header.component.jsx
+++ b/client/src/components/jobs-detail-header/jobs-detail-header.component.jsx
@@ -51,7 +51,6 @@ const colSpan = {
 };

 export function JobsDetailHeader({ job, bodyshop, disabled }) {
-  console.dir({ job });
  const { t } = useTranslation();
  const [notesClamped, setNotesClamped] = useState(true);
  const vehicleTitle = `${job.v_model_yr || ""} ${job.v_color || ""}
--- a/client/src/components/notification-center/notification-center.component.jsx
+++ b/client/src/components/notification-center/notification-center.component.jsx
@@ -0,0 +1,81 @@
+import React from "react";
+import { Virtuoso } from "react-virtuoso";
+import { Button, Checkbox, List, Badge, Typography, Alert } from "antd";
+import { useTranslation } from "react-i18next";
+import "./notification-center.styles.scss";
+
+const { Text } = Typography;
+
+const NotificationCenterComponent = ({
+  visible,
+  onClose,
+  notifications,
+  loading,
+  error,
+  showUnreadOnly,
+  toggleUnreadOnly,
+  markAllRead
+}) => {
+  const { t } = useTranslation();
+
+  const renderNotification = (index, notification) => {
+    console.log(`Rendering notification ${index}:`, {
+      id: notification.id,
+      scenarioTextLength: notification.scenarioText.length,
+      key: `${notification.id}-${index}`
+    });
+    return (
+      <List.Item
+        key={`${notification.id}-${index}`} // Ensure unique key per render
+        className={notification.read ? "notification-read" : "notification-unread"}
+      >
+        <Badge dot={!notification.read}>
+          <div>
+            <Text strong={!notification.read}>
+              <ul>
+                {notification.scenarioText.map((text, idx) => (
+                  <li key={`${notification.id}-${idx}`}>{text}</li>
+                ))}
+              </ul>
+            </Text>
+            <Text type="secondary">{new Date(notification.created_at).toLocaleString()}</Text>
+          </div>
+        </Badge>
+      </List.Item>
+    );
+  };
+
+  console.log("Rendering NotificationCenter with notifications:", {
+    count: notifications.length,
+    ids: notifications.map((n) => n.id),
+    totalCount: notifications.length
+  });
+
+  return (
+    <div className={`notification-center ${visible ? "visible" : ""}`}>
+      <div className="notification-header">
+        <h3>{t("notifications.title", "Notifications")}</h3>
+        <div className="notification-controls">
+          <Checkbox checked={showUnreadOnly} onChange={(e) => toggleUnreadOnly(e.target.checked)}>
+            {t("notifications.showUnreadOnly", "Show Unread Only")}
+          </Checkbox>
+          <Button type="link" onClick={markAllRead} disabled={!notifications.some((n) => !n.read)}>
+            {t("notifications.markAllRead", "Mark All Read")}
+          </Button>
+        </div>
+      </div>
+      {error && <Alert message="Error" description={error} type="error" closable onClose={() => onClose()} />}
+      <Virtuoso
+        style={{ height: "400px", width: "100%", overflow: "auto" }} // Default Virtuoso styling
+        data={notifications}
+        totalCount={notifications.length}
+        overscan={20}
+        increaseViewportBy={200}
+        itemContent={renderNotification}
+      />
+      {loading && !error && <div>{t("notifications.loading", "Loading...")}</div>}
+    </div>
+  );
+};
+
+export default NotificationCenterComponent;
--- a/client/src/components/notification-center/notification-center.container.jsx
+++ b/client/src/components/notification-center/notification-center.container.jsx
@@ -0,0 +1,143 @@
+import React, { useState, useEffect } from "react";
+import { useQuery, useMutation } from "@apollo/client";
+import { connect } from "react-redux";
+import NotificationCenterComponent from "./notification-center.component";
+import { GET_NOTIFICATIONS, MARK_ALL_NOTIFICATIONS_READ } from "../../graphql/notifications.queries";
+
+export function NotificationCenterContainer({ visible, onClose }) {
+  const [showUnreadOnly, setShowUnreadOnly] = useState(false);
+  const [notifications, setNotifications] = useState([]);
+  const [error, setError] = useState(null);
+
+  const {
+    data,
+    fetchMore,
+    loading,
+    error: queryError,
+    refetch
+  } = useQuery(GET_NOTIFICATIONS, {
+    variables: {
+      limit: 20,
+      offset: 0,
+      where: showUnreadOnly ? { read: { _is_null: true } } : {}
+    },
+    fetchPolicy: "cache-and-network",
+    notifyOnNetworkStatusChange: true,
+    onError: (err) => {
+      setError(err.message);
+      setTimeout(() => refetch(), 2000);
+    }
+  });
+
+  const [markAllReadMutation, { error: mutationError }] = useMutation(MARK_ALL_NOTIFICATIONS_READ, {
+    update: (cache) => {
+      cache.modify({
+        fields: {
+          notifications(existing = []) {
+            return existing.map((notif) => ({
+              ...notif,
+              read: notif.read || new Date().toISOString()
+            }));
+          },
+          notifications_aggregate() {
+            return { aggregate: { count: 0 } };
+          }
+        }
+      });
+    },
+    onError: (err) => setError(err.message)
+  });
+
+  useEffect(() => {
+    if (data?.notifications) {
+      const processedNotifications = data.notifications.map((notif) => {
+        let scenarioText;
+        try {
+          scenarioText =
+            typeof notif.scenario_text === "string" ? JSON.parse(notif.scenario_text) : notif.scenario_text || [];
+        } catch (e) {
+          console.error("Error parsing JSON for notification:", notif.id, e);
+          scenarioText = [notif.fcm_text || "Invalid notification data"];
+        }
+
+        if (!Array.isArray(scenarioText)) scenarioText = [scenarioText];
+
+        return {
+          id: notif.id,
+          jobid: notif.jobid,
+          associationid: notif.associationid,
+          scenarioText,
+          created_at: notif.created_at,
+          read: notif.read,
+          __typename: notif.__typename
+        };
+      });
+
+      console.log("Processed Notifications:", processedNotifications);
+      console.log("Number of notifications to render:", processedNotifications.length);
+      setNotifications(processedNotifications);
+      setError(null);
+    } else {
+      console.log("No data yet or error in data:", data, queryError);
+    }
+  }, [data]);
+
+  useEffect(() => {
+    if (queryError || mutationError) {
+      setError(queryError?.message || mutationError?.message);
+    }
+  }, [queryError, mutationError]);
+
+  const loadMore = () => {
+    if (!loading && data?.notifications.length) {
+      fetchMore({
+        variables: { offset: data.notifications.length },
+        updateQuery: (prev, { fetchMoreResult }) => {
+          if (!fetchMoreResult) return prev;
+          return {
+            notifications: [...prev.notifications, ...fetchMoreResult.notifications]
+          };
+        }
+      }).catch((err) => setError(err.message));
+    }
+  };
+
+  const handleToggleUnreadOnly = (value) => {
+    setShowUnreadOnly(value);
+  };
+
+  const handleMarkAllRead = () => {
+    markAllReadMutation();
+  };
+
+  useEffect(() => {
+    if (visible) {
+      const virtuosoRef = { current: null };
+      virtuosoRef.current?.scrollTo({ top: 0 });
+      const handleScroll = () => {
+        if (virtuosoRef.current && virtuosoRef.current.scrollTop + 400 >= virtuosoRef.current.scrollHeight) {
+          loadMore();
+        }
+      };
+      window.addEventListener("scroll", handleScroll);
+      return () => window.removeEventListener("scroll", handleScroll);
+    }
+  }, [visible, loading, data]);
+
+  console.log("Rendering NotificationCenter with notifications:", notifications.length, notifications);
+
+  return (
+    <NotificationCenterComponent
+      visible={visible}
+      onClose={onClose}
+      notifications={notifications}
+      loading={loading}
+      error={error}
+      showUnreadOnly={showUnreadOnly}
+      toggleUnreadOnly={handleToggleUnreadOnly}
+      markAllRead={handleMarkAllRead}
+    />
+  );
+}
+
+export default connect(null, null)(NotificationCenterContainer);
--- a/client/src/components/notification-center/notification-center.styles.scss
+++ b/client/src/components/notification-center/notification-center.styles.scss
@@ -0,0 +1,94 @@
+.notification-center {
+  position: absolute;
+  top: 64px;
+  right: 0;
+  width: 400px;
+  background: #2a2d34;
+  color: #d9d9d9;
+  border: 1px solid #434343;
+  border-radius: 4px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+  z-index: 1000;
+  display: none;
+
+  &.visible {
+    display: block;
+  }
+
+  .notification-header {
+    padding: 16px;
+    border-bottom: 1px solid #434343;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background: #1f2229;
+
+    h3 {
+      margin: 0;
+      font-size: 16px;
+      color: #ffffff;
+    }
+
+    .notification-controls {
+      display: flex;
+      align-items: center;
+      gap: 16px;
+
+      .ant-checkbox-wrapper {
+        color: #d9d9d9;
+      }
+
+      .ant-btn-link {
+        color: #40c4ff;
+        &:hover { color: #80deea; }
+        &:disabled { color: #616161; }
+      }
+    }
+  }
+
+  .notification-read {
+    background: #2a2d34;
+    color: #b0b0b0;
+  }
+  .notification-unread {
+    background: #353942;
+    color: #ffffff;
+  }
+
+  .ant-list {
+    overflow: auto; // Match Virtuoso’s default scrolling behavior
+    max-height: 100%; // Allow full height, let Virtuoso handle virtualization
+  }
+
+  .ant-list-item {
+    padding: 12px 16px;
+    border-bottom: 1px solid #434343;
+    display: block; // Ensure visibility
+    overflow: visible; // Prevent clipping within items
+    min-height: 80px; // Minimum height to ensure visibility of multi-line content
+
+    .ant-typography { color: inherit; }
+    .ant-typography-secondary { font-size: 12px; color: #b0b0b0; }
+    .ant-badge-dot { background: #ff4d4f; }
+
+    ul {
+      margin: 0;
+      padding-left: 20px; // Standard list padding
+      list-style-type: disc; // Ensure bullet points
+    }
+
+    li {
+      margin-bottom: 4px; // Space between list items
+    }
+  }
+
+  .ant-alert {
+    margin: 8px;
+    background: #ff4d4f;
+    color: #fff;
+    border: none;
+
+    .ant-alert-message { color: #fff; }
+    .ant-alert-description { color: #ffebee; }
+  }
+}
--- a/client/src/components/production-board-kanban/production-board-kanban.component.jsx
+++ b/client/src/components/production-board-kanban/production-board-kanban.component.jsx
@@ -4,7 +4,7 @@ import { useApolloClient } from "@apollo/client";
 import { Button, Skeleton, Space } from "antd";
 import cloneDeep from "lodash/cloneDeep";
 import isEqual from "lodash/isEqual";
-import React, { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";