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

2020-02-24 13:49:39 -08:00
parent c21f3c0098
commit 13faf47044
16 changed files with 495 additions and 49 deletions
--- a/client/src/components/allocations-assignment/allocations-assignment.container.jsx
+++ b/client/src/components/allocations-assignment/allocations-assignment.container.jsx
@@ -20,13 +20,19 @@ export default function AllocationsAssignmentContainer({
  const [insertAllocation] = useMutation(INSERT_ALLOCATION);

  const handleAssignment = () => {
-    insertAllocation({ variables: { alloc: { ...assignment } } }).then(r => {
-      notification["success"]({
-        message: t("employees.successes.save")
+    insertAllocation({ variables: { alloc: { ...assignment } } })
+      .then(r => {
+        notification["success"]({
+          message: t("allocations.successes.save")
+        });
+        visibilityState[1](false);
+        if (refetch) refetch();
+      })
+      .catch(error => {
+        notification["error"]({
+          message: t("employees.errors.saving", { message: error.message })
+        });
      });
-      visibilityState[1](false);
-      if (refetch) refetch();
-    });
  };

  return (
--- a/client/src/components/allocations-employee-label/allocations-employee-label.component.jsx
+++ b/client/src/components/allocations-employee-label/allocations-employee-label.component.jsx
@@ -0,0 +1,19 @@
+import { Icon } from "antd";
+import React from "react";
+import { MdRemoveCircleOutline } from "react-icons/md";
+
+export default function AllocationsLabelComponent({ allocation, handleClick }) {
+  return (
+    <div style={{ display: "flex" }}>
+      <span>
+        {`${allocation.employee.first_name || ""} ${allocation.employee
+          .last_name || ""} (${allocation.hours || ""})`}
+      </span>
+      <Icon
+        style={{ color: "red", padding: "0px 4px" }}
+        component={MdRemoveCircleOutline}
+        onClick={handleClick}
+      />
+    </div>
+  );
+}
--- a/client/src/components/allocations-employee-label/allocations-employee-label.container.jsx
+++ b/client/src/components/allocations-employee-label/allocations-employee-label.container.jsx
@@ -0,0 +1,29 @@
+import React from "react";
+import { useMutation } from "react-apollo";
+import { DELETE_ALLOCATION } from "../../graphql/allocations.queries";
+import AllocationsLabelComponent from "./allocations-employee-label.component";
+import { notification } from "antd";
+import { useTranslation } from "react-i18next";
+export default function AllocationsLabelContainer({ allocation, refetch }) {
+  const [deleteAllocation] = useMutation(DELETE_ALLOCATION);
+  const { t } = useTranslation();
+  const handleClick = e => {
+    e.preventDefault();
+    deleteAllocation({ variables: { id: allocation.id } })
+      .then(r => {
+        notification["success"]({
+          message: t("allocations.successes.deleted")
+        });
+        if (refetch) refetch();
+      })
+      .catch(error => {
+        notification["error"]({ message: t("allocations.errors.deleting") });
+      });
+  };
+  return (
+    <AllocationsLabelComponent
+      allocation={allocation}
+      handleClick={handleClick}
+    />
+  );
+}
--- a/client/src/components/form-items-formatted/reset-form-item.component.jsx
+++ b/client/src/components/form-items-formatted/reset-form-item.component.jsx
@@ -10,7 +10,7 @@ export default function ResetForm({ resetFields }) {
      message={
        <div>
          {t("general.messages.unsavedchanges")}
-          <Button onClick={() => resetFields()}>
+          <Button style={{ marginLeft: "20px" }} onClick={() => resetFields()}>
            {t("general.actions.reset")}
          </Button>
        </div>
--- a/client/src/components/job-detail-lines/job-lines.component.jsx
+++ b/client/src/components/job-detail-lines/job-lines.component.jsx
@@ -6,6 +6,7 @@ import CurrencyFormatter from "../../utils/CurrencyFormatter";
 import { alphaSort } from "../../utils/sorters";
 import AllocationsAssignmentContainer from "../allocations-assignment/allocations-assignment.container";
 import AllocationsBulkAssignmentContainer from "../allocations-bulk-assignment/allocations-bulk-assignment.container";
+import AllocationsEmployeeLabelContainer from "../allocations-employee-label/allocations-employee-label.container";
 import PartsOrderModalContainer from "../parts-order-modal/parts-order-modal.container";

 export default function JobLinesComponent({
@@ -135,16 +136,26 @@ export default function JobLinesComponent({
      dataIndex: "employee",
      key: "employee",
      width: "10%",
-      sorter: (a, b) => a.act_price - b.act_price, //TODO Fix employee sorting.
+      sorter: (a, b) =>
+        alphaSort(
+          a.allocations[0] &&
+            a.allocations[0].employee.first_name +
+              a.allocations[0].employee.last_name,
+          b.allocations[0] &&
+            b.allocations[0].employee.first_name +
+              b.allocations[0].employee.last_name
+        ),
      sortOrder:
        state.sortedInfo.columnKey === "employee" && state.sortedInfo.order,
      render: (text, record) => (
        <span>
          {record.allocations && record.allocations.length > 0
            ? record.allocations.map(item => (
-                <div
+                <AllocationsEmployeeLabelContainer
                  key={item.id}
-                >{`${item.employee.first_name} ${item.employee.last_name} (${item.hours})`}</div>
+                  refetch={refetch}
+                  allocation={item}
+                />
              ))
            : null}
          <AllocationsAssignmentContainer
@@ -168,8 +179,6 @@ export default function JobLinesComponent({
                actions: { refetch: refetch },
                context: record
              });
-              //lineToEdit[1](record);
-              //editLineModalVisible[1](true);
            }}
          >
            {t("general.actions.edit")}
@@ -224,6 +233,16 @@ export default function JobLinesComponent({
                jobLines={selectedLines}
                refetch={refetch}
              />
+              <Button
+                onClick={() => {
+                  setJobLineEditContext({
+                    actions: { refetch: refetch },
+                    context: { jobid: jobId }
+                  });
+                }}
+              >
+                {t("joblines.actions.new")}
+              </Button>
            </div>
          );
        }}
--- a/client/src/components/job-lines-upsert-modal/job-lines-upsert-modal.component.jsx
+++ b/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>
  );
--- a/client/src/components/job-lines-upsert-modal/job-lines-upsert-modal.container.jsx
+++ b/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}
    />