Added remove from production button to kanban card. BOD-261

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

@@ -1,74 +1,87 @@
 import React from "react";
-import { Card, Row, Col } from "antd";
+import { Card, Row, Col, Dropdown } from "antd";
 import { DateTimeFormatter } from "../../utils/DateFormatter";
 import ProductionAlert from "../production-list-columns/production-list-columns.alert.component";
 import { EyeFilled } from "@ant-design/icons";
 import { Link } from "react-router-dom";
 import "./production-board-card.styles.scss";
+import ProductionRemoveButton from "../production-remove-button/production-remove-button.component";
+import { useTranslation } from "react-i18next";
 
 export default function ProductionBoardCard(card) {
+  const { t } = useTranslation();
+  const menu = (
+    <div>
+      <Card title={t("general.labels.actions")}>
+        <ProductionRemoveButton jobId={card.id} />
+      </Card>
+    </div>
+  );
+
   return (
-    <Card
-      className="react-kanban-card imex-kanban-card tight-antd-rows"
-      style={{ margin: ".2rem 0rem" }}
-      size="small"
-      title={`${card.ro_number || card.est_number} - ${card.v_model_yr} ${
-        card.v_make_desc || ""
-      } ${card.v_model_desc || ""}`}
-    >
-      <Row>
-        <Col span={24}>
-          <div className="ellipses">{`${card.ownr_fn || ""} ${
-            card.ownr_ln || ""
-          } ${card.ownr_co_nm || ""}`}</div>
-        </Col>
-      </Row>
-      <Row>
-        <Col span={12}>
-          <div className="ellipses">{card.clm_no || ""}</div>
-        </Col>
-        <Col span={12}>
-          <div className="ellipses">{card.ins_co_nm || ""}</div>
-        </Col>
-      </Row>
-      <Row>
-        <Col span={24}>
-          <div className="imex-flex-row imex-flex-row__flex-space-around">
-            <div className="mex-flex-row__margin">
-              <div>{`B: ${card.labhrs.aggregate.sum.mod_lb_hrs || "?"}`}</div>
-              <div>{`R: ${card.larhrs.aggregate.sum.mod_lb_hrs || "?"}`}</div>
+    <Dropdown overlay={menu} trigger={["contextMenu"]}>
+      <Card
+        className="react-kanban-card imex-kanban-card tight-antd-rows"
+        style={{ margin: ".2rem 0rem" }}
+        size="small"
+        title={`${card.ro_number || card.est_number} - ${card.v_model_yr} ${
+          card.v_make_desc || ""
+        } ${card.v_model_desc || ""}`}
+      >
+        <Row>
+          <Col span={24}>
+            <div className="ellipses">{`${card.ownr_fn || ""} ${
+              card.ownr_ln || ""
+            } ${card.ownr_co_nm || ""}`}</div>
+          </Col>
+        </Row>
+        <Row>
+          <Col span={12}>
+            <div className="ellipses">{card.clm_no || ""}</div>
+          </Col>
+          <Col span={12}>
+            <div className="ellipses">{card.ins_co_nm || ""}</div>
+          </Col>
+        </Row>
+        <Row>
+          <Col span={24}>
+            <div className="imex-flex-row imex-flex-row__flex-space-around">
+              <div className="mex-flex-row__margin">
+                <div>{`B: ${card.labhrs.aggregate.sum.mod_lb_hrs || "?"}`}</div>
+                <div>{`R: ${card.larhrs.aggregate.sum.mod_lb_hrs || "?"}`}</div>
+              </div>
+              <div className="mex-flex-row__margin">
+                <div>{`B: ${
+                  card.employee_body_rel
+                    ? `${card.employee_body_rel.first_name} ${card.employee_body_rel.last_name}`
+                    : ""
+                }`}</div>
+                <div>{`P: ${
+                  card.employee_prep_rel
+                    ? `${card.employee_prep_rel.first_name} ${card.employee_prep_rel.last_name}`
+                    : ""
+                }`}</div>
+                <div>{`R: ${
+                  card.employee_refinish_rel
+                    ? `${card.employee_refinish_rel.first_name} ${card.employee_refinish_rel.last_name}`
+                    : ""
+                }`}</div>
+              </div>
             </div>
-            <div className="mex-flex-row__margin">
-              <div>{`B: ${
-                card.employee_body_rel
-                  ? `${card.employee_body_rel.first_name} ${card.employee_body_rel.last_name}`
-                  : ""
-              }`}</div>
-              <div>{`P: ${
-                card.employee_prep_rel
-                  ? `${card.employee_prep_rel.first_name} ${card.employee_prep_rel.last_name}`
-                  : ""
-              }`}</div>
-              <div>{`R: ${
-                card.employee_refinish_rel
-                  ? `${card.employee_refinish_rel.first_name} ${card.employee_refinish_rel.last_name}`
-                  : ""
-              }`}</div>
-            </div>
-          </div>
-        </Col>
-      </Row>
-      <Row>
-        <Col span={24}>
-          <DateTimeFormatter>{card.scheduled_completion}</DateTimeFormatter>
-        </Col>
-      </Row>
-      <div className="imex-flex-row imex-flex-row__flex-space-around">
-        <ProductionAlert record={card} key="alert" />
-        <Link to={`/manage/jobs/${card.id}`}>
-          <EyeFilled key="setting" />
-        </Link>
-      </div>
-    </Card>
+          </Col>
+        </Row>
+        <Row>
+          <Col span={24}>
+            <DateTimeFormatter>{card.scheduled_completion}</DateTimeFormatter>
+          </Col>
+        </Row>
+        <div className="imex-flex-row imex-flex-row__flex-space-around">
+          <ProductionAlert record={card} key="alert" />
+          <Link to={`/manage/jobs/${card.id}`}>
+            <EyeFilled key="setting" />
+          </Link>
+        </div>
+      </Card>
+    </Dropdown>
   );
 }