Added parts table for job close BOD-131

client/src/components/job-totals-table/job-totals.utility.js

@@ -215,6 +215,7 @@ function CalculateRatesTotals(ratesList, shoprates) {
 function CalculatePartsTotals(jobLines) {
   const ret = jobLines.reduce(
     (acc, value) => {
+      console.log("Parts Calc", value.act_price, value.part_qty, value);
       switch (value.part_type) {
         case "PAA":
         case "PAC":
@@ -229,6 +230,24 @@ function CalculatePartsTotals(jobLines) {
             ...acc,
             parts: {
               ...acc.parts,
+              list: {
+                ...acc.parts.list,
+                [value.part_type]:
+                  acc.parts.list[value.part_type] &&
+                  acc.parts.list[value.part_type].total
+                    ? {
+                        total: acc.parts.list[value.part_type].total.add(
+                          Dinero({ amount: value.act_price * 100 }).multiply(
+                            value.part_qty
+                          )
+                        ),
+                      }
+                    : {
+                        total: Dinero({
+                          amount: (value.act_price || 0) * 100,
+                        }).multiply(value.part_qty),
+                      },
+              },
               subtotal: acc.parts.subtotal.add(
                 Dinero({ amount: value.act_price * 100 }).multiply(
                   value.part_qty
@@ -255,6 +274,7 @@ function CalculatePartsTotals(jobLines) {
     },
     {
       parts: {
+        list: {},
         subtotal: Dinero({ amount: 0 }),
         adjustments: Dinero({ amount: 0 }),
         total: Dinero({ amount: 0 }),

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

@@ -14,20 +14,20 @@ const mapStateToProps = createStructuredSelector({
 const { Option } = Select;
 
 export function JobsCloseLabmatAllocationButton({
-  labmatAllocationKey,
-  labmatAllocation,
-  setLabmatAllocations,
+  allocationKey,
+  allocation,
+  setAllocations,
   bodyshop,
 }) {
   const [visible, setVisible] = useState(false);
   const [state, setState] = useState({ center: "", amount: 0 });
   const { t } = useTranslation();
   const handleAllocate = () => {
-    const existingIndex = labmatAllocation.allocations.findIndex(
+    const existingIndex = allocation.allocations.findIndex(
       (e) => e.center === state.center
     );
 
-    const newAllocations = labmatAllocation.allocations.slice(0);
+    const newAllocations = allocation.allocations.slice(0);
     if (existingIndex > -1) {
       newAllocations[existingIndex] = {
         center: state.center,
@@ -41,17 +41,19 @@ export function JobsCloseLabmatAllocationButton({
         amount: Dinero({ amount: state.amount * 100 }),
       });
     }
-    setLabmatAllocations((labMatState) => {
+    setAllocations((labMatState) => {
       return {
         ...labMatState,
-        [labmatAllocationKey]: {
-          ...labmatAllocation,
+        [allocationKey]: {
+          ...allocation,
           allocations: newAllocations,
         },
       };
     });
+
+    setState({ center: "", amount: 0 });
   };
-  const showAllocation = labmatAllocation.total.getAmount() > 0;
+  const showAllocation = allocation.total.getAmount() > 0;
 
   if (!showAllocation) return null;
   return (
@@ -71,8 +73,9 @@ export function JobsCloseLabmatAllocationButton({
         <InputNumber
           precision={2}
           min={0}
+          value={state.amount}
           onChange={(val) => setState({ ...state, amount: val })}
-          max={labmatAllocation.total.getAmount() / 100}
+          max={allocation.total.getAmount() / 100}
         />
         <Button
           onClick={handleAllocate}

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

@@ -1,23 +1,23 @@
 import React from "react";
 import { Tag } from "antd";
 export default function JobsCloseLabMatAllocationTags({
-  labmatAllocationKey,
-  labmatAllocation,
-  setLabmatAllocations,
+  allocationKey,
+  allocation,
+  setAllocations,
 }) {
   return (
     <div>
-      {labmatAllocation.allocations.map((a, idx) => (
+      {allocation.allocations.map((a, idx) => (
         <Tag
           closable
           visible
           onClose={() => {
-            setLabmatAllocations((state) => {
+            setAllocations((state) => {
               return {
                 ...state,
-                [labmatAllocationKey]: {
-                  ...labmatAllocation,
-                  allocations: labmatAllocation.allocations.filter(
+                [allocationKey]: {
+                  ...allocation,
+                  allocations: allocation.allocations.filter(
                     (val, index) => index !== idx
                   ),
                 },

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

@@ -1,8 +1,9 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
-import AllocationButton from "./jobs-close-labmat-allocation.button.component";
+import AllocationButton from "../jobs-close-allocation-button/jobs-close-allocation-button.component";
 import Dinero from "dinero.js";
-import AllocationTags from "./jobs-close-labmat-allocation.allocation-tags.component";
+import AllocationTags from "../jobs-close-allocation-tags/jobs-close-allocation-tags.component";
+
 import { List } from "antd";
 
 export default function JobCloseLabMatAllocation({
@@ -61,16 +62,16 @@ export default function JobCloseLabMatAllocation({
                   </td>
                   <td>
                     <AllocationButton
-                      labmatAllocationKey={alloc}
-                      labmatAllocation={labmatAllocations[alloc]}
-                      setLabmatAllocations={setLabmatAllocations}
+                      allocationKey={alloc}
+                      allocation={labmatAllocations[alloc]}
+                      setAllocations={setLabmatAllocations}
                     />
                   </td>
                   <td>
                     <AllocationTags
-                      labmatAllocationKey={alloc}
-                      labmatAllocation={labmatAllocations[alloc]}
-                      setLabmatAllocations={setLabmatAllocations}
+                      allocationKey={alloc}
+                      allocation={labmatAllocations[alloc]}
+                      setAllocations={setLabmatAllocations}
                     />
                   </td>
                 </tr>

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

@@ -0,0 +1,78 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+import Dinero from "dinero.js";
+import AllocationButton from "../jobs-close-allocation-button/jobs-close-allocation-button.component";
+import AllocationTags from "../jobs-close-allocation-tags/jobs-close-allocation-tags.component";
+
+export default function JobsClosePartsAllocation({
+  partsAllocations,
+  setPartsAllocations,
+}) {
+  const { t } = useTranslation();
+
+  return (
+    <div>
+      {
+        <table>
+          <thead>
+            <tr>
+              <th>{t("jobs.labels.laborallocations")}</th>
+              <th>{t("jobs.labels.totals")}</th>
+              <th>{t("jobs.labels.available")}</th>
+              <th>{t("jobs.actions.allocate")}</th>
+              <th>{t("jobs.labels.allocations")}</th>
+            </tr>
+          </thead>
+          <tbody>
+            {Object.keys(partsAllocations).map((alloc, idx) => {
+              return (
+                <tr key={idx}>
+                  <td>{t(`jobs.fields.${alloc}`)}</td>
+                  <td>
+                    {partsAllocations[alloc].total &&
+                      partsAllocations[alloc].total.toFormat()}
+                  </td>
+                  <td>
+                    {partsAllocations[alloc].total
+                      .subtract(
+                        Dinero({
+                          amount: partsAllocations[alloc].allocations.reduce(
+                            (acc, val) => {
+                              return acc + val.amount.getAmount();
+                            },
+                            0
+                          ),
+                        })
+                      )
+                      .toFormat()}
+                  </td>
+                  <td>
+                    <AllocationButton
+                      allocationKey={alloc}
+                      allocation={partsAllocations[alloc]}
+                      setAllocations={setPartsAllocations}
+                    />
+                  </td>
+                  <td>
+                    <AllocationTags
+                      allocationKey={alloc}
+                      allocation={partsAllocations[alloc]}
+                      setAllocations={setPartsAllocations}
+                    />
+                  </td>
+                </tr>
+              );
+            })}
+            <tr>
+              <td></td>
+              <td></td>
+              <td></td>
+              <td></td>
+              <td></td>
+            </tr>
+          </tbody>
+        </table>
+      }
+    </div>
+  );
+}

client/src/pages/jobs-close/jobs-close.component.jsx

@@ -3,6 +3,7 @@ import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import JobsCloseLaborMaterialAllocation from "../../components/jobs-close-labmat-allocation/jobs-close-labmat-allocation.component";
 import { selectBodyshop } from "../../redux/user/user.selectors";
+import JobsClosePartsAllocation from "../../components/jobs-close-parts-allocation/jobs-close-parts-allocation.component";
 
 const mapStateToProps = createStructuredSelector({
   //currentUser: selectCurrentUser
@@ -20,12 +21,24 @@ export function JobsCloseComponent({ job, bodyshop, jobTotals }) {
     }, {})
   );
 
+  const [partsAllocations, setPartsAllocations] = useState(
+    Object.keys(jobTotals.parts.parts.list).reduce((acc, val) => {
+      acc[val] = { ...jobTotals.parts.parts.list[val], allocations: [] };
+
+      return acc;
+    }, {})
+  );
+
   return (
     <div>
       <JobsCloseLaborMaterialAllocation
         labmatAllocations={labmatAllocations}
         setLabmatAllocations={setLabmatAllocations}
       />
+      <JobsClosePartsAllocation
+        partsAllocations={partsAllocations}
+        setPartsAllocations={setPartsAllocations}
+      />
     </div>
   );
 }