Refactored capturing of resp. centers. + added auto allocate BOD-131

client/src/components/jobs-close-allocation-button/jobs-close-allocation-button.component.jsx

@@ -1,7 +1,7 @@
 import { PlusCircleFilled, CloseCircleFilled } from "@ant-design/icons";
 import { Button, InputNumber, Select } from "antd";
 import Dinero from "dinero.js";
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors";
@@ -14,6 +14,7 @@ const mapStateToProps = createStructuredSelector({
 const { Option } = Select;
 
 export function JobsCloseLabmatAllocationButton({
+  remainingAmount,
   allocationKey,
   allocation,
   setAllocations,
@@ -27,20 +28,19 @@ export function JobsCloseLabmatAllocationButton({
     const existingIndex = allocation.allocations.findIndex(
       (e) => e.center === state.center
     );
-    console.log("handleAllocate -> existingIndex", existingIndex);
 
     const newAllocations = allocation.allocations.slice(0);
     if (existingIndex > -1) {
       newAllocations[existingIndex] = {
         center: state.center,
         amount: newAllocations[existingIndex].amount.add(
-          Dinero({ amount: state.amount * 100 })
+          Dinero({ amount: (state.amount || 0) * 100 })
         ),
       };
     } else {
       newAllocations.push({
         center: state.center,
-        amount: Dinero({ amount: state.amount * 100 }),
+        amount: Dinero({ amount: (state.amount || 0) * 100 }),
       });
     }
 
@@ -56,7 +56,11 @@ export function JobsCloseLabmatAllocationButton({
 
     setState({ center: "", amount: 0 });
   };
+
   const showAllocation = allocation.total.getAmount() > 0;
+  useEffect(() => {
+    if (remainingAmount === 0) setVisible(false);
+  }, [remainingAmount, setVisible]);
 
   if (!showAllocation) return null;
   return (
@@ -78,11 +82,13 @@ export function JobsCloseLabmatAllocationButton({
           min={0}
           value={state.amount}
           onChange={(val) => setState({ ...state, amount: val })}
-          max={allocation.total.getAmount() / 100}
+          max={remainingAmount / 100}
         />
         <Button
           onClick={handleAllocate}
-          disabled={state.amount === 0 || state.center === ""}
+          disabled={
+            state.amount === 0 || state.center === "" || remainingAmount === 0
+          }
         >
           {t("jobs.actions.allocate")}
         </Button>