Added parts table for job close BOD-131

2020-05-19 17:59:02 -07:00
parent bdead5b4a0
commit 94777bf661
6 changed files with 141 additions and 26 deletions
--- a/client/src/components/jobs-close-allocation-button/jobs-close-allocation-button.component.jsx
+++ b/client/src/components/jobs-close-allocation-button/jobs-close-allocation-button.component.jsx
@@ -0,0 +1,97 @@
+import { PlusCircleFilled, CloseCircleFilled } from "@ant-design/icons";
+import { Button, InputNumber, Select } from "antd";
+import Dinero from "dinero.js";
+import React, { useState } from "react";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+import { useTranslation } from "react-i18next";
+
+const mapStateToProps = createStructuredSelector({
+  bodyshop: selectBodyshop,
+});
+
+const { Option } = Select;
+
+export function JobsCloseLabmatAllocationButton({
+  allocationKey,
+  allocation,
+  setAllocations,
+  bodyshop,
+}) {
+  const [visible, setVisible] = useState(false);
+  const [state, setState] = useState({ center: "", amount: 0 });
+  const { t } = useTranslation();
+  const handleAllocate = () => {
+    const existingIndex = allocation.allocations.findIndex(
+      (e) => e.center === state.center
+    );
+
+    const newAllocations = allocation.allocations.slice(0);
+    if (existingIndex > -1) {
+      newAllocations[existingIndex] = {
+        center: state.center,
+        amount: newAllocations[existingIndex].amount.add(
+          Dinero({ amount: state.amount * 100 })
+        ),
+      };
+    } else {
+      newAllocations.push({
+        center: state.center,
+        amount: Dinero({ amount: state.amount * 100 }),
+      });
+    }
+    setAllocations((labMatState) => {
+      return {
+        ...labMatState,
+        [allocationKey]: {
+          ...allocation,
+          allocations: newAllocations,
+        },
+      };
+    });
+
+    setState({ center: "", amount: 0 });
+  };
+  const showAllocation = allocation.total.getAmount() > 0;
+
+  if (!showAllocation) return null;
+  return (
+    <div style={{ display: "flex", alignItems: "center" }}>
+      <div style={{ display: visible ? "" : "none" }}>
+        <Select
+          style={{ width: "200px" }}
+          value={state.center}
+          onSelect={(val) => setState({ ...state, center: val })}
+        >
+          {bodyshop.md_responsibility_centers.profits.map((r, idx) => (
+            <Option key={idx} value={r.name}>
+              {r.name}
+            </Option>
+          ))}
+        </Select>
+        <InputNumber
+          precision={2}
+          min={0}
+          value={state.amount}
+          onChange={(val) => setState({ ...state, amount: val })}
+          max={allocation.total.getAmount() / 100}
+        />
+        <Button
+          onClick={handleAllocate}
+          disabled={state.amount === 0 || state.center === ""}
+        >
+          {t("jobs.actions.allocate")}
+        </Button>
+      </div>
+      <div>
+        {visible ? (
+          <CloseCircleFilled onClick={() => setVisible(false)} />
+        ) : (
+          <PlusCircleFilled onClick={() => setVisible(true)} />
+        )}
+      </div>
+    </div>
+  );
+}
+export default connect(mapStateToProps, null)(JobsCloseLabmatAllocationButton);