BOD-61 Fixed invoice enter modal to simplify + follow new modal pattern.

client/src/components/invoice-enter-modal/invoice-enter-modal.component.jsx

@@ -1,176 +1,116 @@
-import {
-  Button,
-  DatePicker,
-  Form,
-  Input,
-  Modal,
-  Select,
-  Switch,
-  Tag
-} from "antd";
-import React from "react";
+import { DatePicker, Form, Input, Switch } from "antd";
+import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import CurrencyInput from "../form-items-formatted/currency-form-item.component";
+import JobSearchSelect from "../job-search-select/job-search-select.component";
+import VendorSearchSelect from "../vendor-search-select/vendor-search-select.component";
 import InvoiceEnterModalLinesComponent from "./invoice-enter-modal.lines.component";
 
 export default function InvoiceEnterModalComponent({
-  visible,
-  invoice,
-  handleCancel,
-  handleFinish,
-  handleRoSelect,
+  form,
   roAutoCompleteOptions,
-  handleVendorSelect,
   vendorAutoCompleteOptions,
   lineData,
-  vendor,
-  job,
-  responsibilityCenters
+  responsibilityCenters,
+  loadLines
 }) {
   const { t } = useTranslation();
-  const [form] = Form.useForm();
-  const { resetFields } = form;
+
+  const [discount, setDiscount] = useState(0);
+
+  const handleVendorSelect = (props, opt) => {
+    setDiscount(opt.discount);
+  };
 
   return (
-    <Form onFinish={handleFinish} autoComplete={"off"} form={form}>
-      <Modal
-        title={
-          invoice && invoice.id
-            ? t("invoices.labels.edit")
-            : t("invoices.labels.new")
-        }
-        width={"90%"}
-        visible={visible}
-        okText={t("general.actions.save")}
-        onOk={() => form.submit()}
-        okButtonProps={{ htmlType: "submit" }}
-        onCancel={handleCancel}
-      >
-        <div style={{ display: "flex" }}>
-          <Form.Item
-            name="jobid"
-            label={t("invoices.fields.ro_number")}
-            rules={[
-              {
-                required: true,
-                message: t("general.validation.required")
+    <div>
+      <div style={{ display: "flex" }}>
+        <Form.Item
+          name="jobid"
+          label={t("invoices.fields.ro_number")}
+          rules={[
+            {
+              required: true,
+              message: t("general.validation.required")
+            }
+          ]}
+        >
+          <JobSearchSelect
+            options={roAutoCompleteOptions}
+            onBlur={() => {
+              if (form.getFieldValue("jobid") !== null) {
+                loadLines({ variables: { id: form.getFieldValue("jobid") } });
               }
-            ]}
-          >
-            <Select
-              showSearch
-              defaultValue={
-                job ? (job.ro_number ? job.ro_number : job.est_number) : null
-              }
-              autoFocus
-              defaultOpen
-              style={{ width: "300px" }}
-              onSelect={handleRoSelect}
-            >
-              {roAutoCompleteOptions
-                ? roAutoCompleteOptions.map(o => (
-                    <Select.Option
-                      key={o.id}
-                      value={o.ro_number ? o.ro_number : o.est_number}
-                    >
-                      {`${
-                        o.ro_number ? o.ro_number : o.est_number
-                      } | ${o.ownr_ln || ""} ${o.ownr_fn ||
-                        ""} | ${o.v_model_yr || ""} ${o.v_make_desc ||
-                        ""} ${o.v_model_desc || ""}`}
-                    </Select.Option>
-                  ))
-                : null}
-            </Select>
-          </Form.Item>
-          <Form.Item
-            label={t("invoices.fields.vendor")}
-            name="vendorid"
-            rules={[
-              {
-                required: true,
-                message: t("general.validation.required")
-              }
-            ]}
-          >
-            <Select
-              showSearch
-              onSelect={handleVendorSelect}
-              style={{ width: "300px" }}
-            >
-              {vendorAutoCompleteOptions
-                ? vendorAutoCompleteOptions.map(o => (
-                    <Select.Option key={o.id} value={o.name}>
-                      <div style={{ display: "flex" }}>
-                        {o.name}
-                        <Tag color="green">{`${o.discount * 100}%`}</Tag>
-                      </div>
-                    </Select.Option>
-                  ))
-                : null}
-            </Select>
-          </Form.Item>
-
-          <Button onClick={() => resetFields()}>
-            {t("general.actions.reset")}
-          </Button>
-        </div>
-        <div style={{ display: "flex" }}>
-          <Form.Item
-            label={t("invoices.fields.invoice_number")}
-            name="invoice_number"
-            rules={[
-              {
-                required: true,
-                message: t("general.validation.required")
-              }
-            ]}
-          >
-            <Input />
-          </Form.Item>
-          <Form.Item
-            label={t("invoices.fields.date")}
-            name="date"
-            rules={[
-              {
-                required: true,
-                message: t("general.validation.required")
-              }
-            ]}
-          >
-            <DatePicker />
-          </Form.Item>
-          <Form.Item
-            label={t("invoices.fields.is_credit_memo")}
-            name="is_credit_memo"
-            valuePropName="checked"
-          >
-            <Switch />
-          </Form.Item>
-          <Form.Item
-            label={t("invoices.fields.total")}
-            name="total"
-            rules={[
-              {
-                required: true,
-                message: t("general.validation.required")
-              }
-            ]}
-          >
-            <CurrencyInput />
-          </Form.Item>
-        </div>
-        <InvoiceEnterModalLinesComponent
-          lineData={lineData}
-          discount={vendor && vendor.discount}
-          form={form}
-          responsibilityCenters={responsibilityCenters}
-        />
-
-        <Button onClick={() => console.log(form.getFieldsValue())}>
-          Field Values
-        </Button>
-      </Modal>
-    </Form>
+            }}
+          />
+        </Form.Item>
+        <Form.Item
+          label={t("invoices.fields.vendor")}
+          name="vendorid"
+          rules={[
+            {
+              required: true,
+              message: t("general.validation.required")
+            }
+          ]}
+        >
+          <VendorSearchSelect
+            options={vendorAutoCompleteOptions}
+            onSelect={handleVendorSelect}
+          />
+        </Form.Item>
+      </div>
+      <div style={{ display: "flex" }}>
+        <Form.Item
+          label={t("invoices.fields.invoice_number")}
+          name="invoice_number"
+          rules={[
+            {
+              required: true,
+              message: t("general.validation.required")
+            }
+          ]}
+        >
+          <Input />
+        </Form.Item>
+        <Form.Item
+          label={t("invoices.fields.date")}
+          name="date"
+          rules={[
+            {
+              required: true,
+              message: t("general.validation.required")
+            }
+          ]}
+        >
+          <DatePicker />
+        </Form.Item>
+        <Form.Item
+          label={t("invoices.fields.is_credit_memo")}
+          name="is_credit_memo"
+          valuePropName="checked"
+        >
+          <Switch />
+        </Form.Item>
+        <Form.Item
+          label={t("invoices.fields.total")}
+          name="total"
+          rules={[
+            {
+              required: true,
+              message: t("general.validation.required")
+            }
+          ]}
+        >
+          <CurrencyInput />
+        </Form.Item>
+      </div>
+      <InvoiceEnterModalLinesComponent
+        lineData={lineData}
+        discount={discount}
+        form={form}
+        responsibilityCenters={responsibilityCenters}
+      />
+    </div>
   );
 }

client/src/components/invoice-enter-modal/invoice-enter-modal.container.jsx

@@ -1,8 +1,10 @@
+import { useLazyQuery, useMutation, useQuery } from "@apollo/react-hooks";
+import { Form, Modal, notification } from "antd";
 import React, { useState } from "react";
-import { notification } from "antd";
-import { useLazyQuery, useQuery, useMutation } from "@apollo/react-hooks";
+import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
+import { INSERT_NEW_INVOICE } from "../../graphql/invoices.queries";
 import { GET_JOB_LINES_TO_ENTER_INVOICE } from "../../graphql/jobs-lines.queries";
 import { ACTIVE_JOBS_FOR_AUTOCOMPLETE } from "../../graphql/jobs.queries";
 import { SEARCH_VENDOR_AUTOCOMPLETE } from "../../graphql/vendors.queries";
@@ -10,8 +12,6 @@ import { toggleModalVisible } from "../../redux/modals/modals.actions";
 import { selectInvoiceEnterModal } from "../../redux/modals/modals.selectors";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import InvoiceEnterModalComponent from "./invoice-enter-modal.component";
-import { INSERT_NEW_INVOICE } from "../../graphql/invoices.queries";
-import { useTranslation } from "react-i18next";
 
 const mapStateToProps = createStructuredSelector({
   invoiceEnterModal: selectInvoiceEnterModal,
@@ -26,10 +26,9 @@ function InvoiceEnterModalContainer({
   toggleModalVisible,
   bodyshop
 }) {
+  const [form] = Form.useForm();
   const { t } = useTranslation();
   const linesState = useState([]);
-  const roSearchState = useState({ text: "", selectedId: null });
-  const [roSearch, setRoSearch] = roSearchState;
 
   const [insertInvoice] = useMutation(INSERT_NEW_INVOICE);
 
@@ -39,11 +38,6 @@ function InvoiceEnterModalContainer({
     skip: !invoiceEnterModal.visible
   });
 
-  const vendorSearchState = useState({
-    text: "",
-    selectedId: null
-  });
-  const [vendorSearch, setVendorSearch] = vendorSearchState;
   const { data: VendorAutoCompleteData } = useQuery(
     SEARCH_VENDOR_AUTOCOMPLETE,
     {
@@ -52,53 +46,33 @@ function InvoiceEnterModalContainer({
     }
   );
 
-  const [loadLines, { called, data: lineData }] = useLazyQuery(
+  const [loadLines, { data: lineData }] = useLazyQuery(
     GET_JOB_LINES_TO_ENTER_INVOICE,
     {
-      fetchPolicy: "network-only",
-      variables: { id: roSearch.selectedId }
+      fetchPolicy: "network-only"
     }
   );
 
-  if (roSearch.selectedId) {
-    if (!called) loadLines();
-  }
-  const handleRoSelect = (value, obj) => {
-    setRoSearch({ ...roSearch, selectedId: obj.key });
-  };
-
-  const handleVendorSelect = (value, obj) => {
-    setVendorSearch({ ...vendorSearch, selectedId: obj.key });
-  };
-
   const handleFinish = values => {
     insertInvoice({
       variables: {
         invoice: [
-          Object.assign(
-            {},
-            values,
-            { jobid: roSearch.selectedId },
-            { vendorid: vendorSearch.selectedId },
-            { invoicelines: { data: values.invoicelines } }
-          )
+          Object.assign({}, values, {
+            invoicelines: { data: values.invoicelines }
+          })
         ]
       }
     })
       .then(r => {
-        // if (jobLineEditModal.actions.refetch)
-        //   jobLineEditModal.actions.refetch();
-        // toggleModalVisible();
         notification["success"]({
           message: t("invoices.successes.created")
         });
+        toggleModalVisible();
       })
       .catch(error => {
-        console.log("error", error);
-
         notification["error"]({
           message: t("invoices.errors.creating", {
-            message: error.message
+            message: JSON.stringify(error)
           })
         });
       });
@@ -109,30 +83,33 @@ function InvoiceEnterModalContainer({
   };
 
   return (
-    <InvoiceEnterModalComponent
+    <Modal
+      title={
+        invoiceEnterModal.context && invoiceEnterModal.context.id
+          ? t("invoices.labels.edit")
+          : t("invoices.labels.new")
+      }
+      width={"90%"}
       visible={invoiceEnterModal.visible}
-      invoice={invoiceEnterModal.context}
-      handleFinish={handleFinish}
-      handleCancel={handleCancel}
-      handleRoSelect={handleRoSelect}
-      roAutoCompleteOptions={RoAutoCompleteData && RoAutoCompleteData.jobs}
-      handleVendorSelect={handleVendorSelect}
-      vendorAutoCompleteOptions={
-        VendorAutoCompleteData && VendorAutoCompleteData.vendors
-      }
-      linesState={linesState}
-      lineData={lineData ? lineData.joblines : null}
-      vendor={
-        vendorSearch.selectedId
-          ? VendorAutoCompleteData &&
-            VendorAutoCompleteData.vendors.filter(
-              v => v.id === vendorSearch.selectedId
-            )[0]
-          : null
-      }
-      job={invoiceEnterModal.context.job || null}
-      responsibilityCenters={bodyshop.md_responsibility_centers || null}
-    />
+      okText={t("general.actions.save")}
+      onOk={() => form.submit()}
+      onCancel={handleCancel}
+      destroyOnClose
+    >
+      <Form onFinish={handleFinish} autoComplete={"off"} form={form}>
+        <InvoiceEnterModalComponent
+          form={form}
+          roAutoCompleteOptions={RoAutoCompleteData && RoAutoCompleteData.jobs}
+          vendorAutoCompleteOptions={
+            VendorAutoCompleteData && VendorAutoCompleteData.vendors
+          }
+          loadLines={loadLines}
+          linesState={linesState}
+          lineData={lineData ? lineData.joblines : null}
+          responsibilityCenters={bodyshop.md_responsibility_centers || null}
+        />
+      </Form>
+    </Modal>
   );
 }
 

client/src/components/invoice-enter-modal/invoice-enter-modal.lines.component.jsx

@@ -16,6 +16,19 @@ export default function InvoiceEnterModalLinesComponent({
 
   const [amounts, setAmounts] = useState({ invoiceTotal: 0, enteredAmount: 0 });
 
+  const calculateTotals = () => {
+    setAmounts({
+      invoiceTotal: getFieldsValue().total,
+      enteredTotal: getFieldsValue("invoicelines").invoicelines
+        ? getFieldsValue("invoicelines").invoicelines.reduce(
+            (acc, value) =>
+              acc + (value && value.actual_cost ? value.actual_cost : 0),
+            0
+          )
+        : 0
+    });
+  };
+
   return (
     <div>
       <Form.List name="invoicelines">
@@ -28,7 +41,6 @@ export default function InvoiceEnterModalLinesComponent({
                     <Form.Item
                       label={t("invoicelines.fields.line_desc")}
                       key={`${index}joblinename`}
-                      name={[field.name, "joblinename"]}
                       rules={[
                         {
                           required: true,
@@ -110,6 +122,13 @@ export default function InvoiceEnterModalLinesComponent({
                         label={t("invoicelines.fields.line_desc")}
                         key={`${index}line_desc`}
                         name={[field.name, "line_desc"]}
+                        rules={[
+                          {
+                            required: !getFieldsValue("invoicelines")
+                              .invoicelines[index].joblineid,
+                            message: t("general.validation.required")
+                          }
+                        ]}
                       >
                         <Input />
                       </Form.Item>
@@ -135,8 +154,10 @@ export default function InvoiceEnterModalLinesComponent({
                               if (idx === index) {
                                 return {
                                   ...item,
-                                  actual_cost:
-                                    parseFloat(e.target.value) * (1 - discount)
+                                  actual_cost: !!item.actual_cost
+                                    ? item.actual_cost
+                                    : parseFloat(e.target.value) *
+                                      (1 - discount)
                                 };
                               }
                               return item;
@@ -156,26 +177,7 @@ export default function InvoiceEnterModalLinesComponent({
                         }
                       ]}
                     >
-                      <CurrencyInput
-                        onBlur={() =>
-                          setAmounts({
-                            invoiceTotal: getFieldsValue().total,
-                            enteredTotal: getFieldsValue("invoicelines")
-                              .invoicelines
-                              ? getFieldsValue(
-                                  "invoicelines"
-                                ).invoicelines.reduce(
-                                  (acc, value) =>
-                                    acc +
-                                    (value && value.actual_cost
-                                      ? value.actual_cost
-                                      : 0),
-                                  0
-                                )
-                              : 0
-                          })
-                        }
-                      />
+                      <CurrencyInput onBlur={() => calculateTotals()} />
                     </Form.Item>
                     <Form.Item
                       label={t("invoicelines.fields.cost_center")}
@@ -198,6 +200,7 @@ export default function InvoiceEnterModalLinesComponent({
                     <DeleteFilled
                       onClick={() => {
                         remove(field.name);
+                        calculateTotals();
                       }}
                     />
                   </div>

client/src/components/job-search-select/job-search-select.component.jsx

@@ -0,0 +1,40 @@
+import { Select } from "antd";
+import React, { useEffect, useState } from "react";
+const { Option } = Select;
+
+//To be used as a form element only.
+
+const JobSearchSelect = ({ value, onChange, options, onBlur }) => {
+  const [option, setOption] = useState(value);
+
+  useEffect(() => {
+    if (onChange) {
+      onChange(option);
+    }
+  }, [option, onChange]);
+
+  return (
+    <Select
+      showSearch
+      autoFocus
+      value={option}
+      style={{
+        width: 300
+      }}
+      onChange={setOption}
+      optionFilterProp="children"
+      onBlur={onBlur}
+    >
+      {options
+        ? options.map(o => (
+            <Option key={o.id} value={o.id}>
+              {`${o.ro_number ? o.ro_number : o.est_number} | ${o.ownr_ln ||
+                ""} ${o.ownr_fn || ""} | ${o.v_model_yr ||
+                ""} ${o.v_make_desc || ""} ${o.v_model_desc || ""}`}
+            </Option>
+          ))
+        : null}
+    </Select>
+  );
+};
+export default JobSearchSelect;

client/src/components/vendor-search-select/vendor-search-select.component.jsx

@@ -0,0 +1,40 @@
+import { Select, Tag } from "antd";
+import React, { useEffect, useState } from "react";
+const { Option } = Select;
+
+//To be used as a form element only.
+
+const VendorSearchSelect = ({ value, onChange, options, onSelect }) => {
+  const [option, setOption] = useState(value);
+
+  useEffect(() => {
+    if (onChange) {
+      onChange(option);
+    }
+  }, [option, onChange]);
+
+  return (
+    <Select
+      showSearch
+      value={option}
+      style={{
+        width: 300
+      }}
+      onChange={setOption}
+      optionFilterProp="children"
+      onSelect={onSelect}
+    >
+      {options
+        ? options.map(o => (
+            <Option key={o.id} value={o.id} discount={o.discount}>
+              <div style={{ display: "flex" }}>
+                {o.name}
+                <Tag color="green">{`${o.discount * 100}%`}</Tag>
+              </div>
+            </Option>
+          ))
+        : null}
+    </Select>
+  );
+};
+export default VendorSearchSelect;

client/src/pages/contract-detail/contract-detail.page.component.jsx

@@ -1,4 +1,4 @@
-import { Button, Typography } from "antd";
+import { Button, Typography, Row, Col } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
@@ -22,28 +22,38 @@ export function ContractDetailPage({
   const { t } = useTranslation();
   return (
     <div>
-      <Typography.Title>{`Agreement ${(contract && contract.agreementnumber) ||
-        ""}`}</Typography.Title>
-      <Button type="primary" htmlType="submit">
-        {t("general.actions.save")}
-      </Button>
-      <Button
-        disabled={contract && contract.status !== "contracts.status.out"}
-        onClick={() => {
-          setCourtesyCarReturnModalContext({
-            actions: { refetch },
-            context: {
-              contractId: contract.id,
-              courtesyCarId: courtesyCar.id
-            }
-          });
-        }}
-      >
-        {t("courtesycars.actions.return")}
-      </Button>
-      <ContractJobBlock job={job} />
-      <ContractCourtesyCarBlock courtesyCar={courtesyCar} />
-      <ContractFormComponent />
+      <Row align="middle">
+        <Typography.Title>{`Agreement ${(contract &&
+          contract.agreementnumber) ||
+          ""} - ${t((contract && contract.status) || "")}`}</Typography.Title>
+        <Button type="primary" htmlType="submit">
+          {t("general.actions.save")}
+        </Button>
+        <Button
+          disabled={contract && contract.status !== "contracts.status.out"}
+          onClick={() => {
+            setCourtesyCarReturnModalContext({
+              actions: { refetch },
+              context: {
+                contractId: contract.id,
+                courtesyCarId: courtesyCar.id
+              }
+            });
+          }}
+        >
+          {t("courtesycars.actions.return")}
+        </Button>
+      </Row>
+
+      <Row>
+        <Col span={4} offset={1}>
+          <ContractJobBlock job={job} />
+          <ContractCourtesyCarBlock courtesyCar={courtesyCar} />
+        </Col>
+        <Col span={18} offset={1}>
+          <ContractFormComponent />
+        </Col>
+      </Row>
     </div>
   );
 }