WIP Invoice Enter

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

@@ -1,8 +1,18 @@
-import { Button, DatePicker, Form, Input, Modal, Select, Switch } from "antd";
+import {
+  Button,
+  DatePicker,
+  Form,
+  Input,
+  Modal,
+  Select,
+  Switch,
+  Tag
+} from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import CurrencyInput from "../form-items-formatted/currency-form-item.component";
 import InvoiceEnterModalLinesComponent from "./invoice-enter-modal.lines.component";
+
 export default function InvoiceEnterModalComponent({
   visible,
   invoice,
@@ -15,15 +25,12 @@ export default function InvoiceEnterModalComponent({
   handleVendorSelect,
   vendorAutoCompleteOptions,
   lineData,
-  linesState,
-  vendor
+  vendor,
+  job
 }) {
   const { t } = useTranslation();
   const [form] = Form.useForm();
   const { resetFields } = form;
-  //Default Values to be set in form.
-  // {getFieldDecorator("retail", { initialValue: jobLine.act_price })(
-  //   initialValue: jobLine.act_price * (discount ? 1 - discount : 1)
 
   return (
     <Form onFinish={handleFinish} autoComplete={"off"} form={form}>
@@ -53,7 +60,11 @@ export default function InvoiceEnterModalComponent({
           >
             <Select
               showSearch
+              defaultValue={
+                job ? (job.ro_number ? job.ro_number : job.est_number) : null
+              }
               autoFocus
+              defaultOpen
               style={{ width: "300px" }}
               onSelect={handleRoSelect}
             >
@@ -91,12 +102,16 @@ export default function InvoiceEnterModalComponent({
               {vendorAutoCompleteOptions
                 ? vendorAutoCompleteOptions.map(o => (
                     <Select.Option key={o.id} value={o.name}>
-                      {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>
@@ -105,8 +120,11 @@ export default function InvoiceEnterModalComponent({
           <Form.Item
             label={t("invoices.fields.invoice_number")}
             name="invoice_number"
-            rule={[
-              { required: true, message: t("general.validation.required") }
+            rules={[
+              {
+                required: true,
+                message: t("general.validation.required")
+              }
             ]}
           >
             <Input />
@@ -114,8 +132,11 @@ export default function InvoiceEnterModalComponent({
           <Form.Item
             label={t("invoices.fields.date")}
             name="date"
-            rule={[
-              { required: true, message: t("general.validation.required") }
+            rules={[
+              {
+                required: true,
+                message: t("general.validation.required")
+              }
             ]}
           >
             <DatePicker />
@@ -130,8 +151,11 @@ export default function InvoiceEnterModalComponent({
           <Form.Item
             label={t("invoices.fields.total")}
             name="total"
-            rule={[
-              { required: true, message: t("general.validation.required") }
+            rules={[
+              {
+                required: true,
+                message: t("general.validation.required")
+              }
             ]}
           >
             <CurrencyInput />
@@ -142,6 +166,7 @@ export default function InvoiceEnterModalComponent({
           discount={vendor && vendor.discount}
           form={form}
         />
+
         <Button onClick={() => console.log(form.getFieldsValue())}>
           Field Values
         </Button>