Implemented jobline upsert modal. Updated allocations display on jobline edit to include removal.

client/src/components/job-lines-upsert-modal/job-lines-upsert-modal.component.jsx

@@ -1,6 +1,7 @@
-import { Modal, Form } from "antd";
+import { Modal, Form, Input, InputNumber } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
+import ResetForm from "../form-items-formatted/reset-form-item.component";
 
 export default function JobLinesUpsertModalComponent({
   visible,
@@ -11,8 +12,8 @@ export default function JobLinesUpsertModalComponent({
   form
 }) {
   const { t } = useTranslation();
-  //const { getFieldDecorator, isFieldsTouched, resetFields } = form;
-  console.log("jobLine", jobLine);
+  const { getFieldDecorator, isFieldsTouched, resetFields } = form;
+
   return (
     <Modal
       title={
@@ -22,11 +23,46 @@ export default function JobLinesUpsertModalComponent({
       }
       visible={visible}
       okText={t("general.labels.save")}
-      onOk={handleOk}
+      onOk={handleSubmit}
       onCancel={handleCancel}
     >
+      {isFieldsTouched() ? <ResetForm resetFields={resetFields} /> : null}
       <Form onSubmit={handleSubmit} autoComplete={"off"}>
-        {JSON.stringify(jobLine)}
+        <Form.Item label={t("joblines.fields.line_desc")}>
+          {getFieldDecorator("line_desc", {
+            initialValue: jobLine.line_desc
+          })(<Input name="line_desc" />)}
+        </Form.Item>
+        <Form.Item label={t("joblines.fields.oem_partno")}>
+          {getFieldDecorator("oem_partno", {
+            initialValue: jobLine.oem_partno
+          })(<Input name="oem_partno" />)}
+        </Form.Item>
+        <Form.Item label={t("joblines.fields.part_type")}>
+          {getFieldDecorator("part_type", {
+            initialValue: jobLine.part_type
+          })(<Input name="part_type" />)}
+        </Form.Item>
+        <Form.Item label={t("joblines.fields.mod_lbr_ty")}>
+          {getFieldDecorator("mod_lbr_ty", {
+            initialValue: jobLine.mod_lbr_ty
+          })(<Input name="mod_lbr_ty" />)}
+        </Form.Item>
+        <Form.Item label={t("joblines.fields.op_code_desc")}>
+          {getFieldDecorator("op_code_desc", {
+            initialValue: jobLine.op_code_desc
+          })(<Input name="op_code_desc" />)}
+        </Form.Item>
+        <Form.Item label={t("joblines.fields.mod_lb_hrs")}>
+          {getFieldDecorator("mod_lb_hrs", {
+            initialValue: jobLine.mod_lb_hrs
+          })(<InputNumber name="mod_lb_hrs" />)}
+        </Form.Item>
+        <Form.Item label={t("joblines.fields.act_price")}>
+          {getFieldDecorator("act_price", {
+            initialValue: jobLine.act_price
+          })(<InputNumber name="act_price" />)}
+        </Form.Item>
       </Form>
     </Modal>
   );

client/src/components/job-lines-upsert-modal/job-lines-upsert-modal.container.jsx

@@ -39,34 +39,46 @@ function JobLinesUpsertModalContainer({
         });
       }
       if (!err) {
-        if (true) {
+        if (!jobLineEditModal.context.id) {
           insertJobLine({
             variables: {
-              //lineInput: [{ ...lineState, jobid: jobId }]
+              lineInput: [{ jobid: jobLineEditModal.context.jobid, ...values }]
             }
-          }).then(r => {
-            if (jobLineEditModal.actions.refetch)
-              jobLineEditModal.actions.refetch();
-            toggleModalVisible();
-            notification["success"]({
-              message: t("joblines.successes.create")
+          })
+            .then(r => {
+              if (jobLineEditModal.actions.refetch)
+                jobLineEditModal.actions.refetch();
+              toggleModalVisible();
+              notification["success"]({
+                message: t("joblines.successes.created")
+              });
+            })
+            .catch(error => {
+              notification["error"]({
+                message: t("joblines.errors.creating", {
+                  message: error.message
+                })
+              });
             });
-          });
-        }
-
-        if (false) {
-          //Required, otherwise unable to spread in new note prop.
-          //delete lineState.__typename;
+        } else {
           updateJobLine({
             variables: {
-              //lineId: lineState.id,
-              //line: lineState
+              lineId: jobLineEditModal.context.id,
+              line: values
             }
-          }).then(r => {
-            notification["success"]({
-              message: t("joblines.successes.updated")
+          })
+            .then(r => {
+              notification["success"]({
+                message: t("joblines.successes.updated")
+              });
+            })
+            .catch(error => {
+              notification["success"]({
+                message: t("joblines.errors.updating", {
+                  message: error.message
+                })
+              });
             });
-          });
           if (jobLineEditModal.actions.refetch)
             jobLineEditModal.actions.refetch();
           toggleModalVisible();
@@ -75,9 +87,6 @@ function JobLinesUpsertModalContainer({
     });
   };
 
-  const handleOk = () => {
-    //lineState.id ? updateExistingLine() : insertNewLine();
-  };
   const handleCancel = () => {
     toggleModalVisible();
   };
@@ -87,7 +96,6 @@ function JobLinesUpsertModalContainer({
       visible={jobLineEditModal.visible}
       jobLine={jobLineEditModal.context}
       handleSubmit={handleSubmit}
-      handleOk={handleOk}
       handleCancel={handleCancel}
       form={form}
     />