Parts backorder form fix. IO-715

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

@@ -1,5 +1,5 @@
 import { useMutation } from "@apollo/client";
-import { Button, notification, Popover } from "antd";
+import { Button, Form, notification, Popover } from "antd";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
@@ -21,15 +21,15 @@ export function PartsOrderLineBackorderButton({
   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();
+  const [form] = Form.useForm();
 
   const isAlreadyBackordered =
     bodyshop.md_order_statuses.default_bo === partsOrderStatus;
 
-  const handleSave = async () => {
+  const handleFinish = async (values) => {
     setLoading(true);
     logImEXEvent("job_parts_backorder");
 
@@ -40,7 +40,7 @@ export function PartsOrderLineBackorderButton({
     };
     if (!isAlreadyBackordered) {
       partsOrder.backordered_on = new Date();
-      partsOrder.backordered_eta = eta;
+      partsOrder.backordered_eta = values.eta;
     }
 
     const result = await backorderLine({
@@ -59,14 +59,14 @@ export function PartsOrderLineBackorderButton({
         }),
       });
     }
-    setEta(null);
+
     setVisibility(false);
     setLoading(false);
   };
 
   const handlePopover = (e) => {
     if (isAlreadyBackordered) {
-      handleSave();
+      handleFinish();
       //Receive the part.
     } else {
       //Show the date selector to back order the part.
@@ -76,11 +76,15 @@ export function PartsOrderLineBackorderButton({
 
   const popContent = (
     <div>
-      <FormDatePicker onChange={(e) => setEta(e)} />
+      <Form form={form} onFinish={handleFinish}>
-      <Button type="primary" disabled={eta === null} onClick={handleSave}>
+        <Form.Item name="eta">
-        {t("parts_orders.actions.backordered")}
+          <FormDatePicker />
-      </Button>
+        </Form.Item>
-      <Button onClick={() => setVisibility(false)}>Close</Button>
+        <Button type="primary" onClick={() => form.submit()}>
+          {t("parts_orders.actions.backordered")}
+        </Button>
+        <Button onClick={() => setVisibility(false)}>Close</Button>
+      </Form>
     </div>
   );