BOD-10 BOD-12 BOD-11 WIP for Manual Job Creation.

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

@@ -72,22 +72,6 @@ function InvoiceEnterModalContainer({
   };
 
   const handleFinish = values => {
-    console.log("values", values);
-    console.log(
-      "Assigned",
-      Object.assign(
-        {},
-        values,
-        { jobid: roSearch.selectedId },
-        { vendorid: vendorSearch.selectedId },
-        {
-          invoicelines: {
-            data: values.invoicelines.map(item => delete item.joblinename)
-          }
-        }
-      )
-    );
-
     insertInvoice({
       variables: {
         invoice: [

client/src/components/jobs-create-vehicle-info/jobs-create-vehicle-info.component.jsx

@@ -0,0 +1,43 @@
+import { Checkbox, Col, Row, Typography } from "antd";
+import React, { useContext } from "react";
+import JobCreateContext from "../../pages/jobs-create/jobs-create.context";
+import { useTranslation } from "react-i18next";
+import JobsCreateVehicleInfoNewComponent from "./jobs-create-vehicle-info.new.component";
+import JobsCreateVehicleInfoSearchComponent from "./jobs-create-vehicle-info.search.component";
+
+export default function JobsCreateVehicleInfoComponent({ loading, vehicles }) {
+  const [state, setState] = useContext(JobCreateContext);
+  const { t } = useTranslation();
+  return (
+    <div>
+      <Typography.Title>{t("jobs.labels.create.vehicleinfo")}</Typography.Title>
+      <Row>
+        <Col span={16}>
+          <JobsCreateVehicleInfoSearchComponent
+            loading={loading}
+            vehicles={vehicles}
+          />
+        </Col>
+        <Col span={8}>
+          <Checkbox
+            defaultChecked={state.vehicle.new}
+            checked={state.vehicle.new}
+            onChange={() => {
+              setState({
+                ...state,
+                vehicle: {
+                  ...state.vehicle,
+                  new: !state.vehicle.new,
+                  selectedid: null
+                }
+              });
+            }}
+          >
+            {t("jobs.labels.create.newvehicle")}
+          </Checkbox>
+          <JobsCreateVehicleInfoNewComponent />
+        </Col>
+      </Row>
+    </div>
+  );
+}

client/src/components/jobs-create-vehicle-info/jobs-create-vehicle-info.container.jsx

@@ -0,0 +1,19 @@
+import React, { useContext } from "react";
+import JobsCreateVehicleInfoComponent from "./jobs-create-vehicle-info.component";
+import JobCreateContext from "../../pages/jobs-create/jobs-create.context";
+
+import { SEARCH_VEHICLE_BY_VIN } from "../../graphql/vehicles.queries";
+import { useQuery } from "react-apollo";
+export default function JobsCreateVehicleInfoContainer({ form }) {
+  const [state, setState] = useContext(JobCreateContext);
+  const { loading, error, data } = useQuery(SEARCH_VEHICLE_BY_VIN, {
+    variables: { vin: `%${state.vehicle.search}%` },
+    skip: !state.vehicle.search
+  });
+  return (
+    <JobsCreateVehicleInfoComponent
+      loading={loading}
+      vehicles={data ? data.vehicles : null}
+    />
+  );
+}

client/src/components/jobs-create-vehicle-info/jobs-create-vehicle-info.new.component.jsx

@@ -0,0 +1,179 @@
+import { DatePicker, Form, Input } from "antd";
+import React, { useContext } from "react";
+import { useTranslation } from "react-i18next";
+import JobCreateContext from "../../pages/jobs-create/jobs-create.context";
+
+export default function JobsCreateVehicleInfoNewComponent() {
+  const [state] = useContext(JobCreateContext);
+
+  const { t } = useTranslation();
+  return (
+    <div>
+      <Form.Item
+        label={t("vehicles.fields.v_vin")}
+        name={["vehicle", "data", "v_vin"]}
+        rules={[
+          {
+            required: state.vehicle.new,
+            message: t("general.validation.required")
+          }
+        ]}
+      >
+        <Input disabled={!state.vehicle.new} />
+      </Form.Item>
+      <Form.Item
+        label={t("vehicles.fields.plate_no")}
+        name={["vehicle", "data", "plate_no"]}
+        rules={[
+          {
+            required: state.vehicle.new,
+            message: t("general.validation.required")
+          }
+        ]}
+      >
+        <Input disabled={!state.vehicle.new} />
+      </Form.Item>
+      <Form.Item
+        label={t("vehicles.fields.plate_st")}
+        name={["vehicle", "data", "plate_st"]}
+        rules={[
+          {
+            required: state.vehicle.new,
+            message: t("general.validation.required")
+          }
+        ]}
+      >
+        <Input disabled={!state.vehicle.new} />
+      </Form.Item>
+      <Form.Item
+        label={t("vehicles.fields.v_type")}
+        name={["vehicle", "data", "v_type"]}
+      >
+        <Input disabled={!state.vehicle.new} />
+      </Form.Item>
+      <Form.Item
+        label={t("vehicles.fields.v_trimcode")}
+        name={["vehicle", "data", "v_trimcode"]}
+      >
+        <Input disabled={!state.vehicle.new} />
+      </Form.Item>
+      <Form.Item
+        label={t("vehicles.fields.v_tone")}
+        name={["vehicle", "data", "v_tone"]}
+      >
+        <Input disabled={!state.vehicle.new} />
+      </Form.Item>
+      <Form.Item
+        label={t("vehicles.fields.v_bstyle")}
+        name={["vehicle", "data", "v_bstyle"]}
+      >
+        <Input disabled={!state.vehicle.new} />
+      </Form.Item>
+      <Form.Item
+        label={t("vehicles.fields.v_stage")}
+        name={["vehicle", "data", "v_stage"]}
+      >
+        <Input disabled={!state.vehicle.new} />
+      </Form.Item>
+      <Form.Item
+        label={t("vehicles.fields.v_prod_dt")}
+        name={["vehicle", "data", "v_prod_dt"]}
+      >
+        <DatePicker disabled={!state.vehicle.new} />
+      </Form.Item>
+      {
+        //TODO Add handling for paint code json
+      }
+      <Form.Item
+        label={t("vehicles.fields.v_paint_codes")}
+        name={["vehicle", "data", "v_paint_codes"]}
+      >
+        <Input disabled={!state.vehicle.new} />
+      </Form.Item>
+      <Form.Item
+        label={t("vehicles.fields.v_options")}
+        name={["vehicle", "data", "v_options"]}
+      >
+        <Input disabled={!state.vehicle.new} />
+      </Form.Item>
+      <Form.Item
+        label={t("vehicles.fields.v_model_yr")}
+        name={["vehicle", "data", "v_model_yr"]}
+        rules={[
+          {
+            required: state.vehicle.new,
+            message: t("general.validation.required")
+          }
+        ]}
+      >
+        <Input disabled={!state.vehicle.new} />
+      </Form.Item>
+      <Form.Item
+        label={t("vehicles.fields.v_model_desc")}
+        name={["vehicle", "data", "v_model_desc"]}
+        rules={[
+          {
+            required: state.vehicle.new,
+            message: t("general.validation.required")
+          }
+        ]}
+      >
+        <Input disabled={!state.vehicle.new} />
+      </Form.Item>
+      <Form.Item
+        label={t("vehicles.fields.trim_color")}
+        name={["vehicle", "data", "trim_color"]}
+      >
+        <Input disabled={!state.vehicle.new} />
+      </Form.Item>
+      <Form.Item
+        label={t("vehicles.fields.v_mldgcode")}
+        name={["vehicle", "data", "v_mldgcode"]}
+      >
+        <Input disabled={!state.vehicle.new} />
+      </Form.Item>
+      <Form.Item
+        label={t("vehicles.fields.v_makecode")}
+        name={["vehicle", "data", "v_makecode"]}
+      >
+        <Input disabled={!state.vehicle.new} />
+      </Form.Item>
+      <Form.Item
+        label={t("vehicles.fields.v_make_desc")}
+        name={["vehicle", "data", "v_make_desc"]}
+        rules={[
+          {
+            required: state.vehicle.new,
+            message: t("general.validation.required")
+          }
+        ]}
+      >
+        <Input disabled={!state.vehicle.new} />
+      </Form.Item>
+      <Form.Item
+        label={t("vehicles.fields.v_engine")}
+        name={["vehicle", "data", "v_engine"]}
+      >
+        <Input disabled={!state.vehicle.new} />
+      </Form.Item>
+      <Form.Item
+        label={t("vehicles.fields.v_cond")}
+        name={["vehicle", "data", "v_cond"]}
+      >
+        <Input disabled={!state.vehicle.new} />
+      </Form.Item>
+      <Form.Item
+        label={t("vehicles.fields.v_color")}
+        name={["vehicle", "data", "v_color"]}
+        rules={[
+          {
+            required: state.vehicle.new,
+            message: t("general.validation.required")
+          }
+        ]}
+      >
+        <Input disabled={!state.vehicle.new} />
+      </Form.Item>
+    </div>
+  );
+}

client/src/components/jobs-create-vehicle-info/jobs-create-vehicle-info.search.component.jsx

@@ -0,0 +1,118 @@
+import React, { useContext, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Table, Input } from "antd";
+import { Link } from "react-router-dom";
+import { alphaSort } from "../../utils/sorters";
+import JobCreateContext from "../../pages/jobs-create/jobs-create.context";
+
+export default function JobsCreateVehicleInfoSearchComponent({
+  loading,
+  vehicles
+}) {
+  const [state, setState] = useContext(JobCreateContext);
+  const [tableState, setTableState] = useState({
+    sortedInfo: {},
+    filteredInfo: { text: "" }
+  });
+
+  const { t } = useTranslation();
+
+  const columns = [
+    {
+      title: t("vehicles.fields.v_vin"),
+      dataIndex: "v_vin",
+      key: "v_vin",
+      sorter: (a, b) => alphaSort(a.v_vin, b.v_vin),
+      sortOrder:
+        tableState.sortedInfo.columnKey === "v_vin" &&
+        tableState.sortedInfo.order,
+      render: (text, record) => (
+        <Link to={"/manage/vehicles/" + record.id}>{record.v_vin}</Link>
+      )
+    },
+    {
+      title: t("vehicles.fields.description"),
+      dataIndex: "description",
+      key: "description",
+      render: (text, record) => {
+        return (
+          <span>{`${record.v_model_yr} ${record.v_make_desc} ${record.v_model_desc} ${record.v_color}`}</span>
+        );
+      }
+    },
+    {
+      title: t("vehicles.fields.plate_no"),
+      dataIndex: "plate",
+      key: "plate",
+      render: (text, record) => {
+        return <span>{`${record.plate_st} | ${record.plate_no}`}</span>;
+      }
+    }
+  ];
+
+  const handleTableChange = (pagination, filters, sorter) => {
+    setTableState({ ...tableState, filteredInfo: filters, sortedInfo: sorter });
+  };
+  //TODO Implement searching & pagination
+
+  console.log("vehicles", vehicles);
+  return (
+    <Table
+      loading={loading}
+      title={() => {
+        return (
+          <Input.Search
+            placeholder="Search..."
+            onSearch={value => {
+              setState({
+                ...state,
+                vehicle: { ...state.vehicle, search: value }
+              });
+            }}
+            enterButton
+          />
+        );
+      }}
+      size="small"
+      pagination={{ position: "top" }}
+      columns={columns.map(item => ({ ...item }))}
+      rowKey="id"
+      dataSource={vehicles}
+      onChange={handleTableChange}
+      rowSelection={{
+        onSelect: props => {
+          setState({
+            ...state,
+            vehicle: { ...state.vehicle, new: false, selectedid: props.id }
+          });
+        },
+        type: "radio",
+        selectedRowKeys: [state.vehicle.selectedid]
+      }}
+      onRow={(record, rowIndex) => {
+        return {
+          onClick: event => {
+            if (record) {
+              if (record.id) {
+                setState({
+                  ...state,
+                  vehicle: {
+                    ...state.vehicle,
+                    new: false,
+                    selectedid: record.id
+                  }
+                });
+                console.log("Should be clearing fields.");
+                return;
+              }
+            }
+            setState({
+              ...state,
+              vehicle: { ...state.vehicle, selectedid: null }
+            });
+          }
+        };
+      }}
+    />
+  );
+}

client/src/components/jobs-documents-gallery/jobs-documents-gallery.component.jsx

@@ -1,13 +1,13 @@
 import axios from "axios";
 import React, { useEffect, useState } from "react";
 import Gallery from "react-grid-gallery";
-import { Document, Page, pdfjs } from "react-pdf";
+//import { Document, Page, pdfjs } from "react-pdf";
 import DocumentsUploadContainer from "../documents-upload/documents-upload.container";
-import LoadingSpinner from "../loading-spinner/loading-spinner.component";
+//import LoadingSpinner from "../loading-spinner/loading-spinner.component";
 import { Collapse } from "antd";
 import { useTranslation } from "react-i18next";
 
-pdfjs.GlobalWorkerOptions.workerSrc = `https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.1.266/pdf.worker.min.js`;
+//pdfjs.GlobalWorkerOptions.workerSrc = `https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.1.266/pdf.worker.min.js`;
 
 function JobsDocumentsComponent({ data, jobId, refetch }) {
   const [galleryImages, setgalleryImages] = useState([]);
@@ -87,16 +87,18 @@ function JobsDocumentsComponent({ data, jobId, refetch }) {
             }}
           ></Gallery>
         </Collapse.Panel>
-        <Collapse.Panel
-          key="documents"
-          header={t("documents.labels.documents")}
-        >
-          {pdfDocuments.map((doc, idx) => (
-            <Document key={idx} loading={<LoadingSpinner />} file={doc.src}>
-              <Page pageIndex={0} />
-            </Document>
-          ))}
-        </Collapse.Panel>
+        {
+          //           <Collapse.Panel
+          //   key="documents"
+          //   header={t("documents.labels.documents")}
+          // >
+          //   {pdfDocuments.map((doc, idx) => (
+          //     <Document key={idx} loading={<LoadingSpinner />} file={doc.src}>
+          //       <Page pageIndex={0} />
+          //     </Document>
+          //   ))}
+          // </Collapse.Panel>
+        }
       </Collapse>
     </div>
   );