From 696781c8578d498b44bcbccba10ceabbc8af654e Mon Sep 17 00:00:00 2001
From: Patrick Fic <>
Date: Wed, 17 Nov 2021 21:47:05 -0800
Subject: [PATCH] IO-1533 Kanban Customizations

---
 ...production-board-kanban-card.component.jsx | 300 +++++++-----------
 ...n-board-kanban.card-settings.component.jsx |  89 +++---
 .../production-board-kanban.component.jsx     |  42 ++-
 3 files changed, 177 insertions(+), 254 deletions(-)

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 b48c09e22..ce5bd679e 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
@@ -1,4 +1,4 @@
-import { EyeFilled, CalendarOutlined } from "@ant-design/icons";
+import { EyeFilled, CalendarOutlined, ToolFilled } from "@ant-design/icons";
 import { Card, Col, Row, Space, Typography } from "antd";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -16,7 +16,7 @@ export default function ProductionBoardCard(
   cardSettings
 ) {
   const { t } = useTranslation();
-  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);
@@ -35,16 +35,24 @@ export default function ProductionBoardCard(
 
   return (
     <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" />
+      className="react-kanban-card imex-kanban-card"
+      size="small"
+      title={
+        <Space>
+          <ProductionAlert record={card} key="alert" />
+          <span style={{ fontWeight: "bolder" }}>
+            {card.ro_number || t("general.labels.na")}
+          </span>
+        </Space>
+      }
+      extra={
+        <Space>
+          {cardSettings && cardSettings.sublets && (
+            <Col span={12}>
+              <ProductionSubletsManageComponent
+                subletJobLines={card.subletLines}
+              />
+            </Col>
           )}
           {technician ? (
             <Link to={`/tech/joblookup?selected=${card.id}`}>
@@ -56,98 +64,10 @@ export default function ProductionBoardCard(
             </Link>
           )}
         </Space>
-      </div>
-      {flipped ? (
-        <Row>
-          {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>
-              </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}`
-                    : ""
-                }`}</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 === "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>
+      }
+    >
+      <Row>
+        {cardSettings && cardSettings.ownr_nm && (
           <Col span={24}>
             {cardSettings && cardSettings.compact ? (
               <div className="ellipses">{`${card.ownr_ln || ""} ${
@@ -159,97 +79,91 @@ export default function ProductionBoardCard(
               } ${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 span={24}>
+          <div className="ellipses">{`${card.v_model_yr || ""} ${
+            card.v_make_desc || ""
+          } ${card.v_model_desc || ""}`}</div>
+        </Col>
+        {cardSettings && cardSettings.ins_co_nm && (
+          <Col span={cardSettings && cardSettings.compact ? 24 : 12}>
+            <div className="ellipses">{card.ins_co_nm || ""}</div>
           </Col>
+        )}
+        {cardSettings && cardSettings.clm_no && (
+          <Col span={cardSettings && cardSettings.compact ? 24 : 12}>
+            <div className="ellipses">{card.clm_no || ""}</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>
-      )}
+        {cardSettings && cardSettings.employeeassignments && (
+          <Col span={24}>
+            <Row>
+              <Col span={cardSettings && cardSettings.compact ? 24 : 12}>{`B: ${
+                employee_body
+                  ? `${employee_body.first_name} ${employee_body.last_name}`
+                  : ""
+              }`}</Col>
+              <Col span={cardSettings && cardSettings.compact ? 24 : 12}>{`P: ${
+                employee_prep
+                  ? `${employee_prep.first_name} ${employee_prep.last_name}`
+                  : ""
+              }`}</Col>
+              <Col span={cardSettings && cardSettings.compact ? 24 : 12}>{`R: ${
+                employee_refinish
+                  ? `${employee_refinish.first_name} ${employee_refinish.last_name}`
+                  : ""
+              }`}</Col>
+              {/* <Col span={cardSettings && cardSettings.compact ? 24 : 12}>{`C: ${
+                employee_csr
+                  ? `${employee_csr.first_name} ${employee_csr.last_name}`
+                  : ""
+              }`}</Col> */}
+            </Row>
+          </Col>
+        )}
+        {cardSettings && cardSettings.laborhrs && (
+          <Col span={24}>
+            <Row>
+              <Col span={cardSettings && cardSettings.compact ? 24 : 12}>{`B: ${
+                card.labhrs.aggregate.sum.mod_lb_hrs || "?"
+              } hrs`}</Col>
+              <Col span={cardSettings && cardSettings.compact ? 24 : 12}>{`R: ${
+                card.larhrs.aggregate.sum.mod_lb_hrs || "?"
+              } hrs`}</Col>
+            </Row>
+          </Col>
+        )}
+        {cardSettings && cardSettings.scheduled_completion && (
+          <Col span={cardSettings && cardSettings.compact ? 24 : 12}>
+            <Space>
+              <CalendarOutlined />
+              <DateTimeFormatter format="MM/DD">
+                {card.scheduled_completion}
+              </DateTimeFormatter>
+            </Space>
+          </Col>
+        )}
+        {cardSettings && cardSettings.ats && (
+          <Col span={cardSettings && cardSettings.compact ? 24 : 12}>
+            <div>{card.alt_transport || ""}</div>
+          </Col>
+        )}
+        {cardSettings && cardSettings.sublets && (
+          <Col span={12}>
+            <ProductionSubletsManageComponent
+              subletJobLines={card.subletLines}
+            />
+          </Col>
+        )}
+        {cardSettings && cardSettings.production_note && (
+          <Col span={24}>
+            {cardSettings && cardSettings.production_note && (
+              <ProductionListColumnProductionNote record={card} />
+            )}
+          </Col>
+        )}
+      </Row>
     </Card>
   );
 }
diff --git a/client/src/components/production-board-kanban/production-board-kanban.card-settings.component.jsx b/client/src/components/production-board-kanban/production-board-kanban.card-settings.component.jsx
index 9ae6666a1..dba1230c6 100644
--- a/client/src/components/production-board-kanban/production-board-kanban.card-settings.component.jsx
+++ b/client/src/components/production-board-kanban/production-board-kanban.card-settings.component.jsx
@@ -63,85 +63,74 @@ export default function ProductionBoardKanbanCardSettings({
               >
                 <Switch />
               </Form.Item>
-              <Form.Item label={t("production.labels.clm_no")} name="clm_no">
-                <Radio.Group>
-                  <Radio value="front">Front</Radio>
-                  <Radio value="back">Back</Radio>
-                  <Radio value="off">Off</Radio>
-                </Radio.Group>
+              <Form.Item
+                valuePropName="checked"
+                label={t("production.labels.ownr_nm")}
+                name="ownr_nm"
+              >
+                <Switch />
               </Form.Item>
               <Form.Item
+                valuePropName="checked"
+                label={t("production.labels.clm_no")}
+                name="clm_no"
+              >
+                <Switch />
+              </Form.Item>
+              <Form.Item
+                valuePropName="checked"
                 label={t("production.labels.ins_co_nm")}
                 name="ins_co_nm"
               >
-                <Radio.Group>
-                  <Radio value="front">Front</Radio>
-                  <Radio value="back">Back</Radio>
-                  <Radio value="off">Off</Radio>
-                </Radio.Group>
+                <Switch />
               </Form.Item>
               <Form.Item
+                valuePropName="checked"
                 label={t("production.labels.laborhrs")}
                 name="laborhrs"
               >
-                <Radio.Group>
-                  <Radio value="front">Front</Radio>
-                  <Radio value="back">Back</Radio>
-                  <Radio value="off">Off</Radio>
-                </Radio.Group>
+                <Switch />
               </Form.Item>
               <Form.Item
+                valuePropName="checked"
                 label={t("production.labels.employeeassignments")}
                 name="employeeassignments"
               >
-                <Radio.Group>
-                  <Radio value="front">Front</Radio>
-                  <Radio value="back">Back</Radio>
-                  <Radio value="off">Off</Radio>
-                </Radio.Group>
+                <Switch />
               </Form.Item>
               <Form.Item
+                valuePropName="checked"
                 label={t("production.labels.scheduled_completion")}
                 name="scheduled_completion"
               >
-                <Radio.Group>
-                  <Radio value="front">Front</Radio>
-                  <Radio value="back">Back</Radio>
-                  <Radio value="off">Off</Radio>
-                </Radio.Group>
+                <Switch />
               </Form.Item>{" "}
             </Col>
             <Col span={12}>
-              <Form.Item label={t("production.labels.ats")} name="ats">
-                <Radio.Group>
-                  <Radio value="front">Front</Radio>
-                  <Radio value="back">Back</Radio>
-                  <Radio value="off">Off</Radio>
-                </Radio.Group>
+              <Form.Item
+                valuePropName="checked"
+                label={t("production.labels.ats")}
+                name="ats"
+              >
+                <Switch />
               </Form.Item>
               <Form.Item
+                valuePropName="checked"
                 label={t("production.labels.production_note")}
                 name="production_note"
               >
-                <Radio.Group>
-                  <Radio value="front">Front</Radio>
-                  <Radio value="back">Back</Radio>
-                  <Radio value="off">Off</Radio>
-                </Radio.Group>
+                <Switch />
               </Form.Item>
-              <Form.Item label={t("production.labels.alert")} name="alert">
-                <Radio.Group>
-                  <Radio value="front">Front</Radio>
-                  <Radio value="back">Back</Radio>
-                  <Radio value="off">Off</Radio>
-                </Radio.Group>
-              </Form.Item>
-              <Form.Item label={t("production.labels.sublets")} name="sublets">
-                <Radio.Group>
-                  <Radio value="front">Front</Radio>
-                  <Radio value="back">Back</Radio>
-                  <Radio value="off">Off</Radio>
-                </Radio.Group>
+              {/* <Form.Item
+              valuePropName='checked' label={t("production.labels.alert")} name="alert">
+                <Switch/>
+              </Form.Item> */}
+              <Form.Item
+                valuePropName="checked"
+                label={t("production.labels.sublets")}
+                name="sublets"
+              >
+                <Switch />
               </Form.Item>
             </Col>
           </Row>
diff --git a/client/src/components/production-board-kanban/production-board-kanban.component.jsx b/client/src/components/production-board-kanban/production-board-kanban.component.jsx
index 4423a23fe..1f3129eeb 100644
--- a/client/src/components/production-board-kanban/production-board-kanban.component.jsx
+++ b/client/src/components/production-board-kanban/production-board-kanban.component.jsx
@@ -2,7 +2,7 @@ import { useApolloClient } from "@apollo/client";
 import Board, { moveCard } from "@asseinfo/react-kanban";
 //import "@asseinfo/react-kanban/dist/styles.css";
 import "./production-board-kanban.styles.scss";
-import { notification, PageHeader, Space, Statistic } from "antd";
+import { Grid, notification, PageHeader, Space, Statistic } from "antd";
 import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
@@ -145,22 +145,42 @@ export function ProductionBoardKanbanComponent({
       0
     )
     .toFixed(1);
+  const selectedBreakpoint = Object.entries(Grid.useBreakpoint())
+    .filter((screen) => !!screen[1])
+    .slice(-1)[0];
+
+  const standardSizes = {
+    xs: "250",
+    sm: "250",
+    md: "250",
+    lg: "250",
+    xl: "250",
+    xxl: "250",
+  };
+  const compactSizes = {
+    xs: "150",
+    sm: "150",
+    md: "150",
+    lg: "150",
+    xl: "155",
+    xxl: "155",
+  };
+
+  const width = selectedBreakpoint
+    ? associationSettings &&
+      associationSettings.kanban_settings &&
+      associationSettings.kanban_settings.compact
+      ? compactSizes[selectedBreakpoint[0]]
+      : standardSizes[selectedBreakpoint[0]]
+    : "250";
 
   const Container = styled.div`
     .react-kanban-card-skeleton,
     .react-kanban-card,
     .react-kanban-card-adder-form {
       box-sizing: border-box;
-      max-width: ${associationSettings &&
-      associationSettings.kanban_settings &&
-      associationSettings.kanban_settings.compact
-        ? "145"
-        : "250"}px;
-      min-width: ${associationSettings &&
-      associationSettings.kanban_settings &&
-      associationSettings.kanban_settings.compact
-        ? "145"
-        : "250"}px;
+      max-width: ${width}px;
+      min-width: ${width}px;
     }
   `;