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 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";
import {pageLimit} from "../../utils/config";

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("bills.fields.invoice_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: pageLimit}}
                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={!allocationsSummary || allocationsSummary.length === 0}
                    htmlType="submit"
                >
                    {t("jobs.actions.dms.post")}
                </Button>
            </Form>
        </Card>
    );
}