bodyshop/client/src/components/bill-inventory-table/bill-inventory-table.component.jsx

import { Checkbox, Form, Skeleton, Typography } from "antd";
import React, { useEffect } from "react";
import { useTranslation } from "react-i18next";
import ReadOnlyFormItemComponent from "../form-items-formatted/read-only-form-item.component";
import "./bill-inventory-table.styles.scss";

import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { selectBodyshop } from "../../redux/user/user.selectors";
import { selectBillEnterModal } from "../../redux/modals/modals.selectors";

const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop,
  billEnterModal: selectBillEnterModal,
});
const mapDispatchToProps = (dispatch) => ({
  //setUserLanguage: language => dispatch(setUserLanguage(language))
});
export default connect(mapStateToProps, mapDispatchToProps)(BillInventoryTable);

export function BillInventoryTable({
  billEnterModal,
  bodyshop,
  form,
  billEdit,
  inventoryLoading,
  inventoryData,
}) {
  const { t } = useTranslation();

  useEffect(() => {
    if (inventoryData) {
      form.setFieldsValue({
        inventory: billEnterModal.context.consumeinventoryid
          ? inventoryData.inventory.map((i) => {
              if (i.id === billEnterModal.context.consumeinventoryid)
                i.consumefrominventory = true;
              return i;
            })
          : inventoryData.inventory,
      });
    }
  }, [inventoryData, form, billEnterModal.context.consumeinventoryid]);

  console.log(form.getFieldsValue());
  return (
    <Form.Item
      shouldUpdate={(prev, cur) => prev.vendorid !== cur.vendorid}
      noStyle
    >
      {() => {
        const is_inhouse =
          form.getFieldValue("vendorid") === bodyshop.inhousevendorid;

        if (!is_inhouse || billEdit) {
          return null;
        }

        if (inventoryLoading) return <Skeleton />;

        return (
          <Form.List name="inventory">
            {(fields, { add, remove, move }) => {
              return (
                <>
                  <Typography.Title level={4}>
                    {t("inventory.labels.inventory")}
                  </Typography.Title>
                  <table className="bill-inventory-table">
                    <thead>
                      <tr>
                        <th>{t("billlines.fields.line_desc")}</th>
                        <th>{t("vendors.fields.name")}</th>
                        <th>{t("billlines.fields.quantity")}</th>
                        <th>{t("billlines.fields.actual_price")}</th>
                        <th>{t("billlines.fields.actual_cost")}</th>
                        <th>{t("inventory.fields.comment")}</th>
                        <th>{t("inventory.actions.consumefrominventory")}</th>
                      </tr>
                    </thead>
                    <tbody>
                      {fields.map((field, index) => (
                        <tr key={field.key}>
                          <td>
                            <Form.Item
                              //   label={t("joblines.fields.line_desc")}
                              key={`${index}line_desc`}
                              name={[field.name, "line_desc"]}
                            >
                              <ReadOnlyFormItemComponent />
                            </Form.Item>
                          </td>

                          <td>
                            <Form.Item
                              span={2}
                              //label={t("joblines.fields.mod_lb_hrs")}
                              key={`${index}part_type`}
                              name={[
                                field.name,
                                "billline",
                                "bill",
                                "vendor",
                                "name",
                              ]}
                            >
                              <ReadOnlyFormItemComponent />
                            </Form.Item>
                          </td>
                          <td>
                            <Form.Item
                              span={2}
                              //label={t("joblines.fields.mod_lb_hrs")}
                              key={`${index}quantity`}
                              name={[field.name, "quantity"]}
                            >
                              <ReadOnlyFormItemComponent />
                            </Form.Item>
                          </td>
                          <td>
                            <Form.Item
                              span={2}
                              //label={t("joblines.fields.mod_lb_hrs")}
                              key={`${index}act_price`}
                              name={[field.name, "actual_price"]}
                            >
                              <ReadOnlyFormItemComponent type="currency" />
                            </Form.Item>
                          </td>
                          <td>
                            <Form.Item
                              span={2}
                              //label={t("joblines.fields.mod_lb_hrs")}
                              key={`${index}cost`}
                              name={[field.name, "actual_cost"]}
                            >
                              <ReadOnlyFormItemComponent type="currency" />
                            </Form.Item>
                          </td>
                          <td>
                            <Form.Item
                              span={2}
                              //label={t("joblines.fields.mod_lb_hrs")}
                              key={`${index}comment`}
                              name={[field.name, "comment"]}
                            >
                              <ReadOnlyFormItemComponent />
                            </Form.Item>
                          </td>

                          <td>
                            <Form.Item
                              span={2}
                              //label={t("joblines.fields.mod_lb_hrs")}
                              key={`${index}consumefrominventory`}
                              name={[field.name, "consumefrominventory"]}
                              valuePropName="checked"
                            >
                              <Checkbox />
                            </Form.Item>
                          </td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </>
              );
            }}
          </Form.List>
        );
      }}
    </Form.Item>
  );
}