Merged in feature/IO-1722-job-size-color (pull request #746)

Feature/IO-1722 job size color

Approved-by: Patrick Fic

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

@@ -0,0 +1,39 @@
+import { Col, List, Space, Typography } from "antd";
+import React from "react";
+import { useTranslation } from "react-i18next";
+
+const CardColorLegend = ({ bodyshop, cardSettings }) => {
+  const { t } = useTranslation();
+  const data = bodyshop.ssbuckets.map((size) => ({
+    label: size.label,
+    color: size.color?.hex ?? "white",
+  }));
+
+  return (
+    <Col>
+      <Typography>{t("production.labels.legend")}</Typography>
+      <List
+        grid={{
+          gutter: 16,
+        }}
+        dataSource={data}
+        renderItem={(item) => (
+          <List.Item>
+            <Space>
+              <div
+                style={{
+                  width: "1.5rem",
+                  aspectRatio: "1/1",
+                  backgroundColor: item.color,
+                }}
+              ></div>
+              <div>{item.label}</div>
+            </Space>
+          </List.Item>
+        )}
+      />
+    </Col>
+  );
+};
+
+export default CardColorLegend;

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

@@ -18,6 +18,28 @@ import moment from "moment";
 import OwnerNameDisplay from "../owner-name-display/owner-name-display.component";
 import JobPartsQueueCount from "../job-parts-queue-count/job-parts-queue-count.component";
 
+const cardColor = (ssbuckets, totalHrs) => {
+  const bucket = ssbuckets.filter(
+    (bucket) =>
+      bucket.gte <= totalHrs && (!!bucket.lt ? bucket.lt > totalHrs : true)
+  )[0];
+
+  if (bucket.color) {
+    return bucket.color.hex;
+  }
+
+  return "";
+};
+
+function getContrastYIQ(hexColor) {
+  const r = parseInt(hexColor.substr(1, 2), 16);
+  const g = parseInt(hexColor.substr(3, 2), 16);
+  const b = parseInt(hexColor.substr(5, 2), 16);
+  const yiq = (r * 299 + g * 587 + b * 114) / 1000;
+
+  return yiq >= 128 ? "black" : "white";
+}
+
 export default function ProductionBoardCard(
   technician,
   card,
@@ -54,10 +76,19 @@ export default function ProductionBoardCard(
         .isSame(moment(card.scheduled_completion), "day") &&
         "production-completion-soon"));
 
+  const totalHrs =
+    card.labhrs.aggregate.sum.mod_lb_hrs + card.larhrs.aggregate.sum.mod_lb_hrs;
+  const bgColor = cardColor(bodyshop.ssbuckets, totalHrs);
+
   return (
     <Card
       className="react-kanban-card imex-kanban-card"
       size="small"
+      style={{
+        backgroundColor: cardSettings && cardSettings.cardcolor && bgColor,
+
+        color: getContrastYIQ(bgColor),
+      }}
       title={
         <Space>
           <ProductionAlert record={card} key="alert" />

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

@@ -104,6 +104,13 @@ export default function ProductionBoardKanbanCardSettings({
               >
                 <Switch />
               </Form.Item>
+              <Form.Item
+                valuePropName="checked"
+                label={t("production.labels.cardcolor")}
+                name="cardcolor"
+              >
+                <Switch />
+              </Form.Item>
             </Col>
             <Col span={12}>
               <Form.Item

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

@@ -22,6 +22,7 @@ import ProductionBoardKanbanCardSettings from "./production-board-kanban.card-se
 //import "@asseinfo/react-kanban/dist/styles.css";
 import "./production-board-kanban.styles.scss";
 import { createBoardData } from "./production-board-kanban.utils.js";
+import CardColorLegend from "../production-board-kanban-card/production-board-kanban-card-color-legend.component";
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
   technician: selectTechnician,
@@ -221,6 +222,7 @@ export function ProductionBoardKanbanComponent({
           employeeassignments: true,
           scheduled_completion: true,
           stickyheader: false,
+          cardcolor: false,
         };
 
   return (
@@ -256,6 +258,11 @@ export function ProductionBoardKanbanComponent({
           </Space>
         }
       />
+
+      {cardSettings.cardcolor && (
+        <CardColorLegend cardSettings={cardSettings} bodyshop={bodyshop} />
+      )}
+
       <ProductionListDetailComponent jobs={data} />
       <StickyContainer>
         <Board

client/src/components/shop-info/shop-info.scheduling.component.jsx

@@ -277,6 +277,15 @@ export default function ShopInfoSchedulingComponent({ form }) {
                       >
                         <InputNumber />
                       </Form.Item>
+
+                      <Form.Item
+                        label={t("bodyshop.fields.ssbuckets.color")}
+                        key={`${index}color`}
+                        name={[field.name, "color"]}
+                      >
+                        <ColorpickerFormItemComponent />
+                      </Form.Item>
+
                       <Space wrap>
                         <DeleteFilled
                           onClick={() => {

client/src/translations/en_us/common.json

@@ -508,7 +508,8 @@
 					"id": "ID",
 					"label": "Label",
 					"lt": "Less than (hrs)",
-					"target": "Target (count)"
+					"target": "Target (count)",
+					"color": "Job Color"
 				},
 				"state": "Province/State",
 				"state_tax_id": "Provincial/State Tax ID (PST,  QST)",
@@ -2385,7 +2386,9 @@
 				"sublets": "Sublets",
 				"totalhours": "Total Hrs ",
 				"touchtime": "T/T",
-				"viewname": "View Name"
+				"viewname": "View Name",
+				"legend": "Legend:",
+				"cardcolor": "Card Colors"
 			},
 			"successes": {
 				"removed": "Job removed from production."