diff --git a/client/src/components/production-board-kanban-card/production-board-kanban-card.component.jsx b/client/src/components/production-board-kanban-card/production-board-kanban-card.component.jsx index 4febb86c0..ab732ca90 100644 --- a/client/src/components/production-board-kanban-card/production-board-kanban-card.component.jsx +++ b/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 = (
- ({ ) }); -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