IO-1454 Production List Visual Indicators.

client/src/components/jobs-detail-general/jobs-detail-general.component.jsx

@@ -6,7 +6,6 @@ import {
   InputNumber,
   Row,
   Select,
-  Space,
   Switch,
 } from "antd";
 import React from "react";

client/src/components/production-list-table/production-list-table.component.jsx

@@ -165,7 +165,6 @@ export function ProductionListTable({
   // };
 
   if (!!!columns) return <div>No columns found.</div>;
-  console.log(data);
 
   const totalHrs = data
     .reduce(
@@ -218,8 +217,25 @@ export function ProductionListTable({
         handleSelector=".prod-header-dropdown"
       >
         <Table
+          sticky
           pagination={false}
           size="small"
+          className="production-list-table"
+          onRow={(record, index) => {
+            if (!bodyshop.md_ro_statuses.production_colors) return null;
+
+            const color = bodyshop.md_ro_statuses.production_colors.find(
+              (x) => x.status === record.status
+            );
+
+            if (!color) return null;
+
+            return {
+              style: {
+                backgroundColor: `rgb(${color.color.r},${color.color.g},${color.color.b},${color.color.a})`,
+              },
+            };
+          }}
           components={{
             header: {
               cell: ResizeableTitle,

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

@@ -1,8 +1,12 @@
-import { Form, Select } from "antd";
+import { DeleteFilled } from "@ant-design/icons";
+import { Button, Form, Select, Space } from "antd";
 import React, { useState } from "react";
+import { ChromePicker } from "react-color";
 import { useTranslation } from "react-i18next";
 import styled from "styled-components";
+import FormListMoveArrows from "../form-list-move-arrows/form-list-move-arrows.component";
 import LayoutFormRow from "../layout-form-row/layout-form-row.component";
+
 const SelectorDiv = styled.div`
   .ant-form-item .ant-select {
     width: 200px;
@@ -257,6 +261,95 @@ export default function ShopInfoROStatusComponent({ form }) {
           </Select>
         </Form.Item>
       </LayoutFormRow>
+      <LayoutFormRow
+        grow
+        header={t("bodyshop.fields.statuses.production_colors")}
+      >
+        <Form.List name={["md_ro_statuses", "production_colors"]}>
+          {(fields, { add, remove, move }) => {
+            return (
+              <div>
+                <LayoutFormRow>
+                  {fields.map((field, index) => (
+                    <Form.Item key={field.key}>
+                      <Space direction="vertical">
+                        <div style={{ display: "flex" }}>
+                          <Form.Item
+                            style={{ flex: 1 }}
+                            label={t("jobs.fields.status")}
+                            key={`${index}status`}
+                            name={[field.name, "status"]}
+                            rules={[
+                              {
+                                required: true,
+                                //message: t("general.validation.required"),
+                              },
+                            ]}
+                          >
+                            <Select>
+                              {options.map((item, idx) => (
+                                <Select.Option key={idx} value={item}>
+                                  {item}
+                                </Select.Option>
+                              ))}
+                            </Select>
+                          </Form.Item>
+                          <DeleteFilled
+                            onClick={() => {
+                              remove(field.name);
+                            }}
+                          />
+                        </div>
+                        <Form.Item
+                          label={t("bodyshop.fields.statuses.color")}
+                          key={`${index}color`}
+                          name={[field.name, "color"]}
+                          rules={[
+                            {
+                              required: true,
+                              //message: t("general.validation.required"),
+                            },
+                          ]}
+                        >
+                          <ColorPicker />
+                        </Form.Item>
+                      </Space>
+                    </Form.Item>
+                  ))}
+                </LayoutFormRow>
+                <Form.Item>
+                  <Button
+                    type="dashed"
+                    onClick={() => {
+                      add();
+                    }}
+                    style={{ width: "100%" }}
+                  >
+                    {t("general.actions.add")}
+                  </Button>
+                </Form.Item>
+              </div>
+            );
+          }}
+        </Form.List>
+      </LayoutFormRow>
     </SelectorDiv>
   );
 }
+
+const ColorPicker = ({ value, onChange, style, ...restProps }) => {
+  const handleChange = (color) => {
+    console.log(
+      "🚀  ~ file: shop-info.rostatus.component.jsx  ~ line 345  ~ color",
+      color
+    );
+    if (onChange) onChange(color.rgb);
+  };
+  return (
+    <ChromePicker
+      {...restProps}
+      color={value}
+      onChangeComplete={handleChange}
+    />
+  );
+};