WIP for manual job creation

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

@@ -0,0 +1,16 @@
+import React from "react";
+import { Row, Col, Typography } from "antd";
+export default function JobsCreateOwnerInfoComponent({ loading, owners }) {
+  return (
+    <div>
+      <Row>
+        <Typography.Title>XX</Typography.Title>
+      </Row>
+      <Row>
+        <Col span={16}></Col>
+
+        <Col span={8}></Col>
+      </Row>
+    </div>
+  );
+}

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

@@ -0,0 +1,22 @@
+import React, { useContext } from "react";
+import JobsCreateOwnerInfoComponent from "./jobs-create-owner-info.component";
+import JobCreateContext from "../../pages/jobs-create/jobs-create.context";
+import { QUERY_SEARCH_OWNER_BY_IDX } from "../../graphql/owners.queries";
+import { useQuery } from "react-apollo";
+import AlertComponent from "../alert/alert.component";
+
+export default function JobsCreateOwnerContainer() {
+  const [state] = useContext(JobCreateContext);
+  const { loading, error, data } = useQuery(QUERY_SEARCH_OWNER_BY_IDX, {
+    variables: { search: `%${state.owner.search}%` },
+    skip: !state.vehicle.search
+  });
+
+  if (error) return <AlertComponent message={error.message} type='error' />;
+  return (
+    <JobsCreateOwnerInfoComponent
+      loading={loading}
+      owners={data ? data.owners : null}
+    />
+  );
+}

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

@@ -0,0 +1,117 @@
+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 JobsCreateOwnerInfoSearchComponent({
+  loading,
+  owners
+}) {
+  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
+
+  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-create-vehicle-info/jobs-create-vehicle-info.container.jsx

@@ -1,15 +1,17 @@
 import React, { useContext } from "react";
 import JobsCreateVehicleInfoComponent from "./jobs-create-vehicle-info.component";
 import JobCreateContext from "../../pages/jobs-create/jobs-create.context";
-
+import AlertComponent from "../alert/alert.component";
 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 [state] = useContext(JobCreateContext);
   const { loading, error, data } = useQuery(SEARCH_VEHICLE_BY_VIN, {
     variables: { vin: `%${state.vehicle.search}%` },
     skip: !state.vehicle.search
   });
+  if (error) return <AlertComponent message={error.message} type='error' />;
   return (
     <JobsCreateVehicleInfoComponent
       loading={loading}

client/src/pages/jobs-create/jobs-create.component.jsx

@@ -2,18 +2,19 @@ import { Button, message, Steps } from "antd";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import JobsCreateVehicleInfoContainer from "../../components/jobs-create-vehicle-info/jobs-create-vehicle-info.container";
+import JobsCreateOwnerInfoContainer from "../../components/jobs-create-owner-info/jobs-create-owner-info.container";
 
-export default function JobsCreateComponent({ form }) {
+export default function JobsCreateComponent() {
   const [pageIndex, setPageIndex] = useState(0);
   const { t } = useTranslation();
   const steps = [
     {
       title: t("jobs.labels.create.vehicleinfo"),
-      content: <JobsCreateVehicleInfoContainer form={form} />
+      content: <JobsCreateVehicleInfoContainer />
     },
     {
       title: t("jobs.labels.create.ownerinfo"),
-      content: "Second-content"
+      content: <JobsCreateOwnerInfoContainer />
     },
     {
       title: t("jobs.labels.create.jobinfo"),
@@ -50,23 +51,22 @@ export default function JobsCreateComponent({ form }) {
         </div>
       ))}
 
-      <div className="steps-action">
+      <div className='steps-action'>
         {pageIndex > 0 && (
           <Button style={{ margin: 8 }} onClick={() => prev()}>
             Previous
           </Button>
         )}
         {pageIndex < steps.length - 1 && (
-          <Button type="primary" onClick={() => next()}>
+          <Button type='primary' onClick={() => next()}>
             Next
           </Button>
         )}
         {pageIndex === steps.length - 1 && (
           <Button
-            type="primary"
+            type='primary'
-            htmlType="submit"
+            htmlType='submit'
-            onClick={() => message.success("Processing complete!")}
+            onClick={() => message.success("Processing complete!")}>
-          >
             Done
           </Button>
         )}

client/src/pages/jobs-create/jobs-create.container.jsx

@@ -7,11 +7,11 @@ export default function JobsCreateContainer() {
 
   const contextState = useState({
     vehicle: { new: false, search: "", selectedid: null },
-    owner: { new: false },
+    owner: { new: false, search: "", selectedid: null },
     job: null
   });
 
-  const [state, setState] = contextState;
+  const [state] = contextState;
 
   const handleFinish = values => {
     console.log("Form Values", values);