bodyshop/client/src/components/dms-allocations-summary-ap/dms-allocations-summary-ap.component.jsx

import { SyncOutlined } from "@ant-design/icons";
import { Button, Card, Form, Input, Table } from "antd";
import Dinero from "dinero.js";
import React, { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { selectBodyshop } from "../../redux/user/user.selectors";

const mapStateToProps = createStructuredSelector({
  //currentUser: selectCurrentUser
  bodyshop: selectBodyshop,
});

const mapDispatchToProps = (dispatch) => ({
  //setUserLanguage: language => dispatch(setUserLanguage(language))
});

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

export function DmsAllocationsSummaryAp({ socket, bodyshop, billids, title }) {
  const { t } = useTranslation();
  const [allocationsSummary, setAllocationsSummary] = useState([]);

  useEffect(() => {
    socket.on("ap-export-success", (billid) => {
      setAllocationsSummary((allocationsSummary) =>
        allocationsSummary.map((a) => {
          if (a.billid !== billid) return a;
          return { ...a, status: "Successful" };
        })
      );
    });
    socket.on("ap-export-failure", ({ billid, error }) => {
      allocationsSummary.map((a) => {
        if (a.billid !== billid) return a;
        return { ...a, status: error };
      });
    });

    if (socket.disconnected) socket.connect();
    return () => {
      socket.removeListener("ap-export-success");
      socket.removeListener("ap-export-failure");
      //socket.disconnect();
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  useEffect(() => {
    if (socket.connected) {
      socket.emit("pbs-calculate-allocations-ap", billids, (ack) => {
        setAllocationsSummary(ack);

        socket.allocationsSummary = ack;
      });
    }
  }, [socket, socket.connected, billids]);
  console.log(allocationsSummary);
  const columns = [
    {
      title: t("general.labels.status"),
      dataIndex: "status",
      key: "status",
    },
    {
      title: t("jobs.fields.ro_number"),
      dataIndex: ["Posting", "Reference"],
      key: "reference",
    },

    {
      title: t("jobs.fields.dms.lines"),
      dataIndex: "Lines",
      key: "Lines",
      render: (text, record) => (
        <table style={{ tableLayout: "auto", width: "100%" }}>
          <tr>
            <th>{t("bills.fields.invoice_number")}</th>
            <th>{t("bodyshop.fields.dms.dms_acctnumber")}</th>
            <th>{t("jobs.fields.dms.amount")}</th>
          </tr>
          {record.Posting.Lines.map((l, idx) => (
            <tr key={idx}>
              <td>{l.InvoiceNumber}</td>
              <td>{l.Account}</td>
              <td>{l.Amount}</td>
            </tr>
          ))}
        </table>
      ),
    },
  ];

  const handleFinish = async (values) => {
    socket.emit(`pbs-export-ap`, {
      billids,
      txEnvelope: values,
    });
  };

  return (
    <Card
      title={title}
      extra={
        <Button
          onClick={() => {
            socket.emit("pbs-calculate-allocations-ap", billids, (ack) =>
              setAllocationsSummary(ack)
            );
          }}
        >
          <SyncOutlined />
        </Button>
      }
    >
      <Table
        pagination={{ position: "top", defaultPageSize: 50 }}
        columns={columns}
        rowKey={(record) => `${record.InvoiceNumber}${record.Account}`}
        dataSource={allocationsSummary}
        locale={{ emptyText: t("dms.labels.refreshallocations") }}
      />
      <Form layout="vertical" onFinish={handleFinish}>
        <Form.Item
          name="journal"
          label={t("jobs.fields.dms.journal")}
          initialValue={
            bodyshop.cdk_configuration &&
            bodyshop.cdk_configuration.default_journal
          }
          rules={[
            {
              required: true,
              //message: t("general.validation.required"),
            },
          ]}
        >
          <Input />
        </Form.Item>
        <Button disabled={!socket.allocationsSummary} htmlType="submit">
          {t("jobs.actions.dms.post")}
        </Button>
      </Form>
    </Card>
  );
}