Baseline Parts Order modal functioning.

client/src/components/job-detail-lines/job-lines.component.jsx

@@ -14,7 +14,8 @@ export default function JobLinesComponent({
   setSearchText,
   selectedLines,
   setSelectedLines,
-  partsOrderModalVisible
+  partsOrderModalVisible,
+  jobId
 }) {
   const [state, setState] = useState({
     sortedInfo: {}
@@ -167,6 +168,7 @@ export default function JobLinesComponent({
       <PartsOrderModalContainer
         partsOrderModalVisible={partsOrderModalVisible}
         linesToOrder={selectedLines}
+        jobId={jobId}
       />
 
       <Table

client/src/components/job-detail-lines/job-lines.container.jsx

@@ -16,7 +16,7 @@ export default function JobLinesContainer({ jobId }) {
   const [searchText, setSearchText] = useState("");
   const [selectedLines, setSelectedLines] = useState([]);
   const partsOrderModalVisible = useState(false);
-  if (error) return <AlertComponent message={error.message} type="error" />;
+  if (error) return <AlertComponent message={error.message} type='error' />;
 
   return (
     <JobLinesComponent
@@ -57,6 +57,7 @@ export default function JobLinesContainer({ jobId }) {
       selectedLines={selectedLines}
       setSelectedLines={setSelectedLines}
       partsOrderModalVisible={partsOrderModalVisible}
+      jobId={jobId}
     />
   );
 }

client/src/components/parts-order-modal/parts-order-modal.component.jsx

@@ -1,9 +1,11 @@
 import React, { useState } from "react";
 import { AutoComplete, Icon } from "antd";
 import { useTranslation } from "react-i18next";
-export default function PartsOrderModalComponent({ vendorList }) {
+export default function PartsOrderModalComponent({ vendorList, state }) {
+  const [partsOrder, setPartsOrder] = state;
   const [vendorComplete, setVendorComplete] = useState(vendorList);
   const { t } = useTranslation();
+
   const handleSearch = value => {
     if (value === "") setVendorComplete(vendorList);
     else
@@ -14,15 +16,25 @@ export default function PartsOrderModalComponent({ vendorList }) {
       );
   };
 
+  const handleSelect = (value, option) => {
+    console.log("option", option);
+    setPartsOrder({ ...partsOrder, vendorid: value });
+  };
+
   return (
     <div>
+    TODO Not sure why name is not populating. 
       <AutoComplete
         onSearch={handleSearch}
+        onSelect={handleSelect}
+        optionLabelProp='id'
+        backfill
+        dataSource={vendorComplete}
         placeholder={t("vendors.labels.search")}>
         {vendorComplete.map(v => (
           <AutoComplete.Option key={v.id}>
-            {v.name}
-            {v.favorite ? <Icon type='heart' /> : null}
+            <div>{v.name}</div>
+            <div> {v.favorite ? <Icon type='heart' /> : null}</div>
           </AutoComplete.Option>
         ))}
       </AutoComplete>

client/src/components/parts-order-modal/parts-order-modal.container.jsx

@@ -1,14 +1,31 @@
-import React from "react";
 import { Modal } from "antd";
-import PartsOrderModalComponent from "./parts-order-modal.component";
+import React, { useState } from "react";
+import { useQuery, useMutation } from "react-apollo";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
 import { QUERY_ALL_VENDORS_FOR_ORDER } from "../../graphql/vendors.queries";
-import { useQuery } from "react-apollo";
-import LoadingSpinner from "../loading-spinner/loading-spinner.component";
+import { INSERT_NEW_PARTS_ORDERS } from "../../graphql/parts-orders.queries";
+import {
+  selectCurrentUser,
+  selectBodyshop
+} from "../../redux/user/user.selectors";
 import AlertComponent from "../alert/alert.component";
+import LoadingSpinner from "../loading-spinner/loading-spinner.component";
+import PartsOrderModalComponent from "./parts-order-modal.component";
 
-export default function PartsOrderModalContainer({
+const mapStateToProps = createStructuredSelector({
+  currentUser: selectCurrentUser,
+  bodyshop: selectBodyshop
+});
+export default connect(
+  mapStateToProps,
+  null
+)(function PartsOrderModalContainer({
   partsOrderModalVisible,
-  linesToOrder
+  linesToOrder,
+  jobId,
+  currentUser,
+  bodyshop
 }) {
   const [modalVisible, setModalVisible] = partsOrderModalVisible;
   const { loading, error, data } = useQuery(QUERY_ALL_VENDORS_FOR_ORDER, {
@@ -16,13 +33,50 @@ export default function PartsOrderModalContainer({
     skip: !modalVisible
   });
 
+  const [insertPartOrder] = useMutation(INSERT_NEW_PARTS_ORDERS);
+
+  const partsOrderState = useState({
+    vendorid: null,
+    jobid: jobId,
+    user_email: currentUser.email
+  });
+
+  const [partsOrder, setPartsOrder] = partsOrderState;
+  const handleOk = () => {
+    insertPartOrder({
+      variables: {
+        po: [
+          {
+            ...partsOrder,
+            status: bodyshop.md_order_statuses.default_ordered || "Ordered*",
+            parts_order_lines: {
+              data: linesToOrder.reduce((acc, value) => {
+                acc.push({
+                  line_desc: value.line_desc,
+                  joblineid: value.joblineid
+                });
+                return acc;
+              }, [])
+            }
+          }
+        ]
+      }
+    });
+    setModalVisible(false);
+  };
+
   return (
-    <Modal visible={modalVisible} onCancel={() => setModalVisible(false)}>
+    <Modal
+      visible={modalVisible}
+      onCancel={() => setModalVisible(false)}
+      onOk={handleOk}>
       {error ? <AlertComponent message={error.message} type='error' /> : null}
       <LoadingSpinner loading={loading}>
-        {JSON.stringify(linesToOrder)}
-        <PartsOrderModalComponent vendorList={(data && data.vendors) || []} />
+        <PartsOrderModalComponent
+          vendorList={(data && data.vendors) || []}
+          state={partsOrderState}
+        />
       </LoadingSpinner>
     </Modal>
   );
-}
+});

client/src/graphql/bodyshop.queries.js

@@ -14,6 +14,7 @@ export const QUERY_BODYSHOP = gql`
       insurance_vendor_id
       logo_img_path
       md_ro_statuses
+      md_order_statuses 
       shopname
       state
       state_tax_id

client/src/graphql/parts-orders.queries.js

@@ -0,0 +1,11 @@
+import { gql } from "apollo-boost";
+
+export const INSERT_NEW_PARTS_ORDERS = gql`
+  mutation INSERT_NEW_PARTS_ORDERS($po: [parts_orders_insert_input!]!) {
+    insert_parts_orders(objects: $po) {
+      returning {
+        id
+      }
+    }
+  }
+`;