Added Backordered parts eta to parts order list BOD-215

client/src/components/parts-order-line-backorder-button/parts-order-line-backorder-button.component.jsx

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Button, notification } from "antd";
+import { Button, notification, DatePicker, Popover } from "antd";
 import { useMutation } from "@apollo/react-hooks";
 import { MUTATION_BACKORDER_PART_LINE } from "../../graphql/parts-orders.queries";
 import { selectBodyshop } from "../../redux/user/user.selectors";
@@ -18,6 +18,8 @@ export function PartsOrderLineBackorderButton({
   jobLineId,
   bodyshop,
 }) {
+  const [visibility, setVisibility] = useState(false);
+  const [eta, setEta] = useState(null);
   const [loading, setLoading] = useState(false);
   const [backorderLine] = useMutation(MUTATION_BACKORDER_PART_LINE);
   const { t } = useTranslation();
@@ -25,17 +27,26 @@ export function PartsOrderLineBackorderButton({
   const isAlreadyBackordered =
     bodyshop.md_order_statuses.default_bo === partsOrderStatus;
 
-  const handleOnClick = async () => {
+  const handleSave = async () => {
     setLoading(true);
     logImEXEvent("job_parts_backorder");
 
+    const partsOrder = {
+      status: isAlreadyBackordered
+        ? bodyshop.md_order_statuses.default_received || "Received*"
+        : bodyshop.md_order_statuses.default_bo || "Backordered*",
+    };
+    if (!isAlreadyBackordered) {
+      partsOrder.backordered_on = new Date();
+      partsOrder.backordered_eta = eta;
+    }
+
     const result = await backorderLine({
       variables: {
         jobLineId,
         partsLineId,
-        status: isAlreadyBackordered
-          ? bodyshop.md_order_statuses.default_received || "Received*"
-          : bodyshop.md_order_statuses.default_bo || "Backordered*",
+        partsOrder: partsOrder,
+        status: partsOrder.status,
       },
     });
 
@@ -46,16 +57,39 @@ export function PartsOrderLineBackorderButton({
         }),
       });
     }
-
+    setEta(null);
+    setVisibility(false);
     setLoading(false);
   };
 
+  const handlePopover = (e) => {
+    if (isAlreadyBackordered) {
+      handleSave();
+      //Receive the part.
+    } else {
+      //Show the date selector to back order the part.
+      setVisibility(true);
+    }
+  };
+
+  const popContent = (
+    <div>
+      <DatePicker onChange={(e) => setEta(e)} />
+      <Button type="primary" disabled={eta === null} onClick={handleSave}>
+        {t("parts_orders.actions.backordered")}
+      </Button>
+      <Button onClick={() => setVisibility(false)}>Close</Button>
+    </div>
+  );
+
   return (
-    <Button loading={loading} onClick={handleOnClick}>
-      {isAlreadyBackordered
-        ? t("parts_orders.actions.receive")
-        : t("parts_orders.actions.backordered")}
-    </Button>
+    <Popover destroyTooltipOnHide content={popContent} visible={visibility}>
+      <Button loading={loading} onClick={handlePopover}>
+        {isAlreadyBackordered
+          ? t("parts_orders.actions.receive")
+          : t("parts_orders.actions.backordered")}
+      </Button>
+    </Popover>
   );
 }
 

client/src/components/parts-order-list-table/parts-order-list-table.component.jsx

@@ -128,6 +128,18 @@ export function PartsOrderListTableComponent({
         dataIndex: "status",
         key: "status",
       },
+      {
+        title: t("parts_orders.fields.backordered_on"),
+        dataIndex: "backordered_on",
+        key: "backordered_on",
+        render: (text, record) => <DateFormatter>{text}</DateFormatter>,
+      },
+      {
+        title: t("parts_orders.fields.backordered_eta"),
+        dataIndex: "backordered_eta",
+        key: "backordered_eta",
+        render: (text, record) => <DateFormatter>{text}</DateFormatter>,
+      },
       {
         title: t("general.labels.actions"),
         dataIndex: "actions",
@@ -147,11 +159,11 @@ export function PartsOrderListTableComponent({
     return (
       <div>
         <Table
-          size='small'
+          size="small"
           scroll={{ x: "50%", y: "40rem" }}
           pagination={{ position: "top", defaultPageSize: 25 }}
           columns={columns}
-          rowKey='id'
+          rowKey="id"
           dataSource={record.parts_order_lines}
         />
       </div>
@@ -165,14 +177,14 @@ export function PartsOrderListTableComponent({
       </Typography.Title>
       <Table
         loading={loading}
-        size='small'
+        size="small"
         title={() => (
-          <div className='imex-table-header'>
+          <div className="imex-table-header">
             <Button onClick={() => refetch()}>
               <SyncOutlined />
             </Button>
 
-            <div className='imex-table-header__search'>
+            <div className="imex-table-header__search">
               <Input.Search
                 placeholder={t("general.labels.search")}
                 onChange={(e) => {
@@ -186,7 +198,7 @@ export function PartsOrderListTableComponent({
         expandedRowRender={rowExpander}
         pagination={{ position: "top", defaultPageSize: 25 }}
         columns={columns}
-        rowKey='id'
+        rowKey="id"
         dataSource={parts_orders}
         onChange={handleTableChange}
         expandable={{