IO-1454 Production List Visual Indicators.

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}
+    />
+  );
+};