IO-2869 Production Board Alert

Signed-off-by: Allan Carr <allan.carr@thinkimex.com>

client/src/components/production-board-kanban-card/production-board-kanban-card.component.jsx

@@ -6,20 +6,20 @@ import {
   PauseCircleOutlined
 } from "@ant-design/icons";
 import { Card, Col, Row, Space, Tooltip } from "antd";
+import Dinero from "dinero.js";
 import React, { useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 import { DateTimeFormatter } from "../../utils/DateFormatter";
-import Dinero from "dinero.js";
 
-import ProductionAlert from "../production-list-columns/production-list-columns.alert.component";
+import { ProductionListColumnAlertButton } from "../production-list-columns/production-list-columns.alert.component";
 import ProductionListColumnProductionNote from "../production-list-columns/production-list-columns.productionnote.component";
 import ProductionSubletsManageComponent from "../production-sublets-manage/production-sublets-manage.component";
 
 import dayjs from "../../utils/day";
 
-import OwnerNameDisplay from "../owner-name-display/owner-name-display.component";
 import JobPartsQueueCount from "../job-parts-queue-count/job-parts-queue-count.component";
+import OwnerNameDisplay from "../owner-name-display/owner-name-display.component";
 
 const cardColor = (ssbuckets, totalHrs) => {
   const bucket = ssbuckets.find((bucket) => bucket.gte <= totalHrs && (!bucket.lt || bucket.lt > totalHrs));
@@ -343,7 +343,7 @@ export default function ProductionBoardCard({ technician, card, bodyshop, cardSe
   const headerContent = (
     <div className="header-content-container">
       <div className="inner-container">
-        <ProductionAlert
+        <ProductionListColumnAlertButton
           record={{
             id: card.id,
             production_vars: card?.metadata.production_vars,

client/src/components/production-list-columns/production-list-columns.alert.component.jsx

@@ -1,7 +1,8 @@
 import { ExclamationCircleFilled } from "@ant-design/icons";
 import { useMutation } from "@apollo/client";
-import { Button } from "antd";
+import { Button, Dropdown } from "antd";
-import React, { useCallback } from "react";
+import React, { useCallback, useMemo } from "react";
+import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { logImEXEvent } from "../../firebase/firebase.utils";
@@ -22,8 +23,9 @@ const mapDispatchToProps = (dispatch) => ({
     )
 });
 
-const ProductionListColumnAlert = ({ record, insertAuditTrail }) => {
+const ProductionListColumnAlertBase = ({ record, insertAuditTrail }) => {
   const [updateAlert] = useMutation(UPDATE_JOB);
+  const { t } = useTranslation();
 
   const handleAlertToggle = useCallback(() => {
     logImEXEvent("production_toggle_alert");
@@ -53,9 +55,47 @@ const ProductionListColumnAlert = ({ record, insertAuditTrail }) => {
     if (record.refetch) record.refetch();
   }, [updateAlert, insertAuditTrail, record]);
 
+  const menuItems = useMemo(
+    () => [
+      {
+        key: "toggleAlert",
+        label:
+          record.production_vars && record.production_vars.alert
+            ? t("production.labels.alertoff")
+            : t("production.labels.alerton"),
+        onClick: handleAlertToggle
+      }
+    ],
+    [record.production_vars, t, handleAlertToggle]
+  );
+
+  return { handleAlertToggle, menuItems };
+};
+
+export const ProductionListColumnAlertButton = connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(({ record, insertAuditTrail }) => {
+  const { handleAlertToggle } = ProductionListColumnAlertBase({ record, insertAuditTrail });
+
   if (!record.production_vars?.alert) return null;
 
   return <Button className="production-alert" icon={<ExclamationCircleFilled />} onClick={handleAlertToggle} />;
-};
+});
 
-export default connect(mapStateToProps, mapDispatchToProps)(ProductionListColumnAlert);
+export const ProductionListColumnAlertMenu = connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(({ record, insertAuditTrail }) => {
+  const { menuItems } = ProductionListColumnAlertBase({ record, insertAuditTrail });
+
+  return (
+    <Dropdown menu={{ items: menuItems }} trigger={["contextMenu"]}>
+      <div style={{ height: "19px" }}>
+        {record.production_vars && record.production_vars.alert ? (
+          <ExclamationCircleFilled className="production-alert" />
+        ) : null}
+      </div>
+    </Dropdown>
+  );
+});

client/src/components/production-list-columns/production-list-columns.data.jsx

@@ -2,16 +2,19 @@ import { BranchesOutlined, PauseCircleOutlined } from "@ant-design/icons";
 import { Checkbox, Space, Tooltip } from "antd";
 import i18n from "i18next";
 import { Link } from "react-router-dom";
+import { setModalContext } from "../../redux/modals/modals.actions";
+import { store } from "../../redux/store";
 import CurrencyFormatter from "../../utils/CurrencyFormatter";
 import { TimeFormatter } from "../../utils/DateFormatter";
 import PhoneFormatter from "../../utils/PhoneFormatter";
 import { onlyUnique } from "../../utils/arrayHelper";
+import InstanceRenderManager from "../../utils/instanceRenderMgr";
 import { alphaSort, dateSort, statusSort } from "../../utils/sorters";
 import JobAltTransportChange from "../job-at-change/job-at-change.component";
 import JobPartsQueueCount from "../job-parts-queue-count/job-parts-queue-count.component";
 import OwnerNameDisplay, { OwnerNameDisplayFunction } from "../owner-name-display/owner-name-display.component";
 import ProductionSubletsManageComponent from "../production-sublets-manage/production-sublets-manage.component";
-import ProductionListColumnAlert from "./production-list-columns.alert.component";
+import { ProductionListColumnAlertMenu } from "./production-list-columns.alert.component";
 import ProductionListColumnBodyPriority from "./production-list-columns.bodypriority.component";
 import ProductionListColumnComment from "./production-list-columns.comment.component";
 import ProductionListDate from "./production-list-columns.date.component";
@@ -24,9 +27,6 @@ import ProductionListColumnNote from "./production-list-columns.productionnote.c
 import ProductionListColumnCategory from "./production-list-columns.status.category";
 import ProductionListColumnStatus from "./production-list-columns.status.component";
 import ProductionlistColumnTouchTime from "./prodution-list-columns.touchtime.component";
-import { store } from "../../redux/store";
-import { setModalContext } from "../../redux/modals/modals.actions";
-import InstanceRenderManager from "../../utils/instanceRenderMgr";
 
 const r = ({ technician, state, activeStatuses, data, bodyshop, refetch, treatments }) => {
   const { Enhanced_Payroll } = treatments;
@@ -349,7 +349,7 @@ const r = ({ technician, state, activeStatuses, data, bodyshop, refetch, treatme
       key: "alert",
       sorter: (a, b) => Number(a.production_vars?.alert || false) - Number(b.production_vars?.alert || false),
       sortOrder: state.sortedInfo.columnKey === "alert" && state.sortedInfo.order,
-      render: (text, record) => <ProductionListColumnAlert record={{ record }} />
+      render: (text, record) => <ProductionListColumnAlertMenu record={{ id: record.id, production_vars: record?.production_vars }} />
     },
     {
       title: i18n.t("production.labels.note"),