IO-1533 Kanban Customizations

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

@@ -1,14 +1,13 @@
-import React from "react";
-import { Card, Row, Col, Dropdown } from "antd";
+import { EyeFilled, CalendarOutlined } from "@ant-design/icons";
+import { Card, Col, Row, Space, Typography } from "antd";
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Link } from "react-router-dom";
 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";
-import ProductionSubletsManageComponent from "../production-sublets-manage/production-sublets-manage.component";
 import ProductionListColumnProductionNote from "../production-list-columns/production-list-columns.productionnote.component";
+import ProductionSubletsManageComponent from "../production-sublets-manage/production-sublets-manage.component";
+import "./production-board-card.styles.scss";
 
 export default function ProductionBoardCard(
   technician,
@@ -17,13 +16,7 @@ export default function ProductionBoardCard(
   cardSettings
 ) {
   const { t } = useTranslation();
-  const menu = (
-    <div>
-      <Card title={t("general.labels.actions")}>
-        <ProductionRemoveButton jobId={card.id} />
-      </Card>
-    </div>
-  );
+  const [flipped, setFlipped] = useState(false);
   let employee_body, employee_prep, employee_refinish, employee_csr;
   if (card.employee_body) {
     employee_body = bodyshop.employees.find((e) => e.id === card.employee_body);
@@ -41,36 +34,62 @@ export default function ProductionBoardCard(
   }
 
   return (
-    <Dropdown overlay={menu} trigger={["contextMenu"]}>
-      <Card
-        className="react-kanban-card imex-kanban-card tight-antd-rows"
-        title={`${card.ro_number || t("general.labels.na")} - ${
-          card.v_model_yr
-        } ${card.v_make_desc || ""} ${card.v_model_desc || ""}`}
-      >
+    <Card
+      className="react-kanban-card imex-kanban-card tight-antd-rows"
+      onDoubleClick={() => setFlipped(!flipped)}
+    >
+      <div style={{ display: "flex" }}>
+        <span style={{ fontWeight: "bold", flex: 1 }}>
+          {card.ro_number || t("general.labels.na")}
+        </span>
+        <Space size="small" align="start">
+          {cardSettings && cardSettings.alert && (
+            <ProductionAlert record={card} key="alert" />
+          )}
+          {technician ? (
+            <Link to={`/tech/joblookup?selected=${card.id}`}>
+              <EyeFilled />
+            </Link>
+          ) : (
+            <Link to={`/manage/jobs/${card.id}`}>
+              <EyeFilled />
+            </Link>
+          )}
+        </Space>
+      </div>
+      {flipped ? (
         <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">
+          {cardSettings && cardSettings.clm_no === "back" && (
+            <Col span={cardSettings && cardSettings.compact ? 24 : 12}>
+              <div className="ellipses">{card.clm_no || ""}</div>
+            </Col>
+          )}
+          {cardSettings && cardSettings.ins_co_nm === "back" && (
+            <Col span={cardSettings && cardSettings.compact ? 24 : 12}>
+              <div className="ellipses">{card.ins_co_nm || ""}</div>
+            </Col>
+          )}
+          {cardSettings && cardSettings.laborhrs === "back" && (
+            <Col span={cardSettings && cardSettings.compact ? 24 : 12}>
+              <Space
+                size="small"
+                direction={
+                  cardSettings && cardSettings.compact
+                    ? "horizontal"
+                    : "vertical"
+                }
+              >
                 <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">
+              </Space>
+            </Col>
+          )}
+          {cardSettings && cardSettings.employeeassignments === "back" && (
+            <Col span={12}>
+              <Space
+                direction="vertical"
+                wrap={cardSettings && cardSettings.compact}
+              >
                 <div>{`B: ${
                   employee_body
                     ? `${employee_body.first_name} ${employee_body.last_name}`
@@ -91,35 +110,146 @@ export default function ProductionBoardCard(
                     ? `${employee_csr.first_name} ${employee_csr.last_name}`
                     : ""
                 }`}</div>
-              </div>
-            </div>
-          </Col>
-        </Row>
-        <Row>
-          <Col span={18}>
-            <DateTimeFormatter>{card.scheduled_completion}</DateTimeFormatter>
-          </Col>
-          <Col span={6}>
-            <div>{card.alt_transport || ""}</div>
-          </Col>
-        </Row>
-        <div>
-          <ProductionListColumnProductionNote record={card} />
-        </div>
-        <div className="imex-flex-row imex-flex-row__flex-space-around">
-          <ProductionAlert record={card} key="alert" />
-          <ProductionSubletsManageComponent subletJobLines={card.subletLines} />
-          {technician ? (
-            <Link to={`/tech/joblookup?selected=${card.id}`}>
-              <EyeFilled />
-            </Link>
-          ) : (
-            <Link to={`/manage/jobs/${card.id}`}>
-              <EyeFilled />
-            </Link>
+              </Space>
+            </Col>
           )}
-        </div>
-      </Card>
-    </Dropdown>
+          {cardSettings && cardSettings.scheduled_completion === "back" && (
+            <Col span={12}>
+              <Space>
+                <CalendarOutlined />
+                <DateTimeFormatter format="MM/DD">
+                  {card.scheduled_completion}
+                </DateTimeFormatter>
+              </Space>
+            </Col>
+          )}
+          {cardSettings && cardSettings.ats === "back" && (
+            <Col span={12}>
+              <Col span={cardSettings && cardSettings.compact ? 24 : 6}>
+                <div>{card.alt_transport || ""}</div>
+              </Col>
+            </Col>
+          )}
+
+          {cardSettings && cardSettings.sublets === "back" && (
+            <Col span={12}>
+              <ProductionSubletsManageComponent
+                subletJobLines={card.subletLines}
+              />
+            </Col>
+          )}
+          {cardSettings && cardSettings.production_note === "back" && (
+            <Col span={24}>
+              {cardSettings && cardSettings.production_note === "back" && (
+                <ProductionListColumnProductionNote record={card} />
+              )}
+            </Col>
+          )}
+        </Row>
+      ) : (
+        <Row>
+          <Col span={24}>
+            {cardSettings && cardSettings.compact ? (
+              <div className="ellipses">{`${card.ownr_ln || ""} ${
+                card.ownr_co_nm || ""
+              }`}</div>
+            ) : (
+              <div className="ellipses">{`${card.ownr_ln || ""}, ${
+                card.ownr_fn || ""
+              } ${card.ownr_co_nm || ""}`}</div>
+            )}
+          </Col>
+          <Col span={24}>
+            <div className="ellipses">{`${card.v_model_yr || ""} ${
+              card.v_make_desc || ""
+            } ${card.v_model_desc || ""}`}</div>
+          </Col>
+
+          {cardSettings && cardSettings.clm_no === "front" && (
+            <Col span={cardSettings && cardSettings.compact ? 24 : 12}>
+              <div className="ellipses">{card.clm_no || ""}</div>
+            </Col>
+          )}
+          {cardSettings && cardSettings.ins_co_nm === "front" && (
+            <Col span={cardSettings && cardSettings.compact ? 24 : 12}>
+              <div className="ellipses">{card.ins_co_nm || ""}</div>
+            </Col>
+          )}
+          {cardSettings && cardSettings.laborhrs === "front" && (
+            <Col span={cardSettings && cardSettings.compact ? 24 : 12}>
+              <Space
+                size="small"
+                direction={
+                  cardSettings && cardSettings.compact
+                    ? "horizontal"
+                    : "vertical"
+                }
+              >
+                <div>{`B: ${card.labhrs.aggregate.sum.mod_lb_hrs || "?"}`}</div>
+                <div>{`R: ${card.larhrs.aggregate.sum.mod_lb_hrs || "?"}`}</div>
+              </Space>
+            </Col>
+          )}
+          {cardSettings && cardSettings.employeeassignments === "front" && (
+            <Col span={24}>
+              <Space
+                direction="vertical"
+                wrap={cardSettings && cardSettings.compact}
+              >
+                <div>{`B: ${
+                  employee_body
+                    ? `${employee_body.first_name} ${employee_body.last_name}`
+                    : ""
+                }`}</div>
+                <div>{`P: ${
+                  employee_prep
+                    ? `${employee_prep.first_name} ${employee_prep.last_name}`
+                    : ""
+                }`}</div>
+                <div>{`R: ${
+                  employee_refinish
+                    ? `${employee_refinish.first_name} ${employee_refinish.last_name}`
+                    : ""
+                }`}</div>
+                <div>{`CSR: ${
+                  employee_csr
+                    ? `${employee_csr.first_name} ${employee_csr.last_name}`
+                    : ""
+                }`}</div>
+              </Space>
+            </Col>
+          )}
+          {cardSettings && cardSettings.scheduled_completion === "front" && (
+            <Col span={12}>
+              <Space>
+                <CalendarOutlined />
+                <DateTimeFormatter format="MM/DD">
+                  {card.scheduled_completion}
+                </DateTimeFormatter>
+              </Space>
+            </Col>
+          )}
+          {cardSettings && cardSettings.ats === "front" && (
+            <Col span={12}>
+              <div>{card.alt_transport || ""}</div>
+            </Col>
+          )}
+          {cardSettings && cardSettings.sublets === "front" && (
+            <Col span={12}>
+              <ProductionSubletsManageComponent
+                subletJobLines={card.subletLines}
+              />
+            </Col>
+          )}
+          {cardSettings && cardSettings.production_note === "front" && (
+            <Col span={24}>
+              {cardSettings && cardSettings.production_note === "front" && (
+                <ProductionListColumnProductionNote record={card} />
+              )}
+            </Col>
+          )}
+        </Row>
+      )}
+    </Card>
   );
 }