bodyshop/client/src/components/jobs-close-lines/jobs-close-lines.component.jsx

import { WarningOutlined } from "@ant-design/icons";
import { Form, Select, Space, Tooltip } from "antd";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { selectJobReadOnly } from "../../redux/application/application.selectors";
import { selectBodyshop } from "../../redux/user/user.selectors";
import LaborTypeFormItem from "../form-items-formatted/labor-type-form-item.component";
import PartTypeFormItem from "../form-items-formatted/part-type-form-item.component";
import ReadOnlyFormItem from "../form-items-formatted/read-only-form-item.component";
import "./jobs-close-lines.styles.scss";

const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop,
  jobRO: selectJobReadOnly
});
const mapDispatchToProps = () => ({
  //setUserLanguage: language => dispatch(setUserLanguage(language))
});

export function JobsCloseLines({ bodyshop, job, jobRO }) {
  const { t } = useTranslation();
  return (
    <div>
      <Form.List name={["joblines"]}>
        {(fields) => {
          return (
            <table className="jobs-close-table">
              <thead>
                <tr>
                  <th>{t("joblines.fields.line_desc")}</th>
                  <th>{t("joblines.fields.part_type")}</th>
                  <th>{t("joblines.fields.act_price")}</th>
                  <th>{t("joblines.fields.prt_dsmk_m")}</th>
                  <th>{t("joblines.fields.op_code_desc")}</th>
                  <th>{t("joblines.fields.mod_lbr_ty")}</th>
                  <th>{t("joblines.fields.mod_lb_hrs")}</th>
                  <th>{t("joblines.fields.profitcenter_part")}</th>
                  <th>{t("joblines.fields.profitcenter_labor")}</th>
                </tr>
              </thead>
              <tbody>
                {fields.map((field, index) => (
                  <tr key={field.key}>
                    <td>
                      {/* Hidden field to preserve jobline ID without injecting a div under <tr> */}
                      <Form.Item noStyle name={[field.name, "id"]}>
                        <input type="hidden" />
                      </Form.Item>
                      <Form.Item
                        //   label={t("joblines.fields.line_desc")}
                        key={`${index}line_desc`}
                        name={[field.name, "line_desc"]}
                      >
                        <ReadOnlyFormItem />
                      </Form.Item>
                    </td>
                    <td>
                      <Form.Item
                        span={2}
                        //  label={t("joblines.fields.part_type")}
                        key={`${index}part_type`}
                        name={[field.name, "part_type"]}
                      >
                        <PartTypeFormItem />
                      </Form.Item>
                    </td>
                    <td>
                      <Space>
                        <Form.Item
                          span={2}
                          //  label={t("joblines.fields.act_price")}
                          key={`${index}act_price`}
                          name={[field.name, "act_price"]}
                        >
                          <ReadOnlyFormItem type="currency" />
                        </Form.Item>
                        <Form.Item noStyle key={`${index}convertedtolbr`} name={[field.name, "convertedtolbr"]}>
                          <HasBeenConvertedTolabor />
                        </Form.Item>
                      </Space>
                    </td>
                    <td>
                      <Form.Item
                        span={2}
                        //  label={t("joblines.fields.prt_dsmk_m")}
                        key={`${index}prt_dsmk_m`}
                        name={[field.name, "prt_dsmk_m"]}
                      >
                        <ReadOnlyFormItem type="currency" />
                      </Form.Item>
                    </td>
                    <td>
                      <Form.Item
                        span={2}
                        //label={t("joblines.fields.op_code_desc")}
                        key={`${index}op_code_desc`}
                        name={[field.name, "op_code_desc"]}
                      >
                        <ReadOnlyFormItem />
                      </Form.Item>
                    </td>
                    <td>
                      <Form.Item
                        span={2}
                        //label={t("joblines.fields.mod_lbr_ty")}
                        key={`${index}mod_lbr_ty`}
                        name={[field.name, "mod_lbr_ty"]}
                      >
                        <LaborTypeFormItem />
                      </Form.Item>
                    </td>
                    <td>
                      <Form.Item
                        span={2}
                        //label={t("joblines.fields.mod_lb_hrs")}
                        key={`${index}mod_lb_hrs`}
                        name={[field.name, "mod_lb_hrs"]}
                      >
                        <ReadOnlyFormItem />
                      </Form.Item>
                    </td>
                    <td>
                      <Form.Item
                        label={t("joblines.fields.profitcenter_part")}
                        key={`${index}profitcenter_part`}
                        name={[field.name, "profitcenter_part"]}
                        labelCol={{ span: 0 }}
                        rules={[
                          {
                            required: !!job.joblines[index].act_price || !!job.joblines[index].prt_dsmk_m
                            //message: t("general.validation.required"),
                          }
                        ]}
                      >
                        <Select
                          allowClear
                          showSearch={{
                            optionFilterProp: "children",
                            filterOption: (input, option) =>
                              option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                          }}
                          disabled={jobRO}
                        >
                          {bodyshop.md_responsibility_centers.profits.map((p) => (
                            <Select.Option key={p.name} value={p.name}>
                              {p.name}
                            </Select.Option>
                          ))}
                        </Select>
                      </Form.Item>
                    </td>
                    <td>
                      <Form.Item
                        label={t("joblines.fields.profitcenter_labor")}
                        labelCol={{ span: 0 }}
                        key={`${index}profitcenter_labor`}
                        name={[field.name, "profitcenter_labor"]}
                        rules={[
                          {
                            required: !!job.joblines[index].mod_lbr_ty
                            //message: t("general.validation.required"),
                          }
                        ]}
                      >
                        <Select
                          allowClear
                          showSearch={{
                            optionFilterProp: "children",
                            filterOption: (input, option) =>
                              option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                          }}
                          disabled={jobRO}
                        >
                          {bodyshop.md_responsibility_centers.profits.map((p) => (
                            <Select.Option key={p.name} value={p.name}>
                              {p.name}
                            </Select.Option>
                          ))}
                        </Select>
                      </Form.Item>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          );
        }}
      </Form.List>
    </div>
  );
}

export default connect(mapStateToProps, mapDispatchToProps)(JobsCloseLines);

const HasBeenConvertedTolabor = ({ value }) => {
  const { t } = useTranslation();

  if (!value) return null;
  return (
    <Tooltip title={t("joblines.labels.convertedtolabor")}>
      <WarningOutlined style={{ color: "tomato" }} />
    </Tooltip>
  );
};