IO-233 WIP CDK

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

@@ -1,17 +1,21 @@
-import { Button, Table } from "antd";
-import React, { useState } from "react";
+import { Button, Table, Typography } from "antd";
+import React, { useState, useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import Dinero from "dinero.js";
+import { SyncOutlined } from "@ant-design/icons";
+
 const mapStateToProps = createStructuredSelector({
   //currentUser: selectCurrentUser
   bodyshop: selectBodyshop,
 });
+
 const mapDispatchToProps = (dispatch) => ({
   //setUserLanguage: language => dispatch(setUserLanguage(language))
 });
+
 export default connect(
   mapStateToProps,
   mapDispatchToProps
@@ -20,6 +24,15 @@ export default connect(
 export function DmsAllocationsSummary({ socket, bodyshop, jobId }) {
   const { t } = useTranslation();
   const [allocationsSummary, setAllocationsSummary] = useState([]);
+
+  useEffect(() => {
+    if (socket.connected) {
+      socket.emit("cdk-calculate-allocations", jobId, (ack) =>
+        setAllocationsSummary(ack)
+      );
+    }
+  }, [socket, socket.connected, jobId]);
+
   const columns = [
     {
       title: t("jobs.fields.dms.center"),
@@ -71,13 +84,45 @@ export function DmsAllocationsSummary({ socket, bodyshop, jobId }) {
             );
           }}
         >
-          Get
+          <SyncOutlined />
         </Button>
       )}
       pagination={{ position: "top", defaultPageSize: 50 }}
       columns={columns}
       rowKey="center"
       dataSource={allocationsSummary}
+      summary={() => {
+        const totals = allocationsSummary.reduce(
+          (acc, val) => {
+            return {
+              totalSale: acc.totalSale.add(Dinero(val.sale)),
+              totalCost: acc.totalCost.add(Dinero(val.cost)),
+            };
+          },
+          {
+            totalSale: Dinero(),
+            totalCost: Dinero(),
+          }
+        );
+
+        return (
+          <Table.Summary.Row>
+            <Table.Summary.Cell>
+              <Typography.Title level={4}>
+                {t("general.labels.totals")}
+              </Typography.Title>
+            </Table.Summary.Cell>
+            <Table.Summary.Cell>
+              {totals.totalSale.toFormat()}
+            </Table.Summary.Cell>
+            <Table.Summary.Cell>
+              {totals.totalCost.toFormat()}
+            </Table.Summary.Cell>
+            <Table.Summary.Cell></Table.Summary.Cell>
+            <Table.Summary.Cell></Table.Summary.Cell>
+          </Table.Summary.Row>
+        );
+      }}
     />
   );
 }