Added bulk assignment. Added partial parts order line remarks capability.

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

@@ -1,13 +1,15 @@
+import { AutoComplete, DatePicker, Icon, Input, List, Radio } from "antd";
 import React, { useState } from "react";
-import { AutoComplete, Icon, DatePicker, Radio } from "antd";
 import { useTranslation } from "react-i18next";
 export default function PartsOrderModalComponent({
   vendorList,
   state,
-  sendTypeState
+  sendTypeState,
+  orderLinesState
 }) {
   const [partsOrder, setPartsOrder] = state;
   const [sendType, setSendType] = sendTypeState;
+  const orderLines = orderLinesState[0];
   const [vendorComplete, setVendorComplete] = useState(vendorList);
   const { t } = useTranslation();
 
@@ -22,8 +24,6 @@ export default function PartsOrderModalComponent({
   };
 
   const handleSelect = (value, option) => {
-    console.log("value", value);
-    console.log("option", option);
     setPartsOrder({ ...partsOrder, vendorid: option.key });
   };
 
@@ -52,6 +52,33 @@ export default function PartsOrderModalComponent({
         }}
       />
 
+      {t("parts_orders.labels.inthisorder")}
+
+      <List
+        itemLayout='horizontal'
+        dataSource={orderLines}
+        renderItem={item => (
+          <List.Item
+            actions={[
+              <Input placeholder={t("parts_orders.fields.lineremarks")} />
+              //TODO Editable table/adding line remarks to the order.
+            ]}>
+            {
+              // <List.Item.Meta
+              //   avatar={
+              //     <Avatar src='https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png' />
+              //   }
+              //   title={<a href='https://ant.design'>{item.name.last}</a>}
+              //   description='Ant Design, a design language for background applications, is refined by Ant UED Team'
+              // />
+            }
+            <div>{`${item.line_desc}${
+              item.oem_partno ? " | " + item.oem_partno : ""
+            }`}</div>
+          </List.Item>
+        )}
+      />
+
       <Radio.Group
         defaultValue={sendType}
         onChange={e => setSendType(e.target.value)}>

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

@@ -1,18 +1,18 @@
 import { Modal, notification } from "antd";
 import React, { useState } from "react";
-import { useQuery, useMutation } from "react-apollo";
+import { useMutation, useQuery } from "react-apollo";
+import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
-import { QUERY_ALL_VENDORS_FOR_ORDER } from "../../graphql/vendors.queries";
 import { INSERT_NEW_PARTS_ORDERS } from "../../graphql/parts-orders.queries";
+import { QUERY_ALL_VENDORS_FOR_ORDER } from "../../graphql/vendors.queries";
 import {
-  selectCurrentUser,
-  selectBodyshop
+  selectBodyshop,
+  selectCurrentUser
 } 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";
-import { useTranslation } from "react-i18next";
 
 const mapStateToProps = createStructuredSelector({
   currentUser: selectCurrentUser,
@@ -28,23 +28,40 @@ export default connect(
   currentUser,
   bodyshop
 }) {
-  const [modalVisible, setModalVisible] = partsOrderModalVisible;
-  const { loading, error, data } = useQuery(QUERY_ALL_VENDORS_FOR_ORDER, {
-    fetchPolicy: "network-only",
-    skip: !modalVisible
-  });
   const { t } = useTranslation();
-  const [insertPartOrder] = useMutation(INSERT_NEW_PARTS_ORDERS);
-  const sendTypeState = useState("e");
+  const [modalVisible, setModalVisible] = partsOrderModalVisible;
 
+  //set order lines to be a version of the incoming lines.
+  const orderLinesState = useState(
+    linesToOrder.reduce((acc, value) => {
+      acc.push({
+        line_desc: value.line_desc,
+        oem_partno: value.oem_partno,
+        db_price: value.db_price,
+        act_price: value.act_price,
+        line_remarks: "Alalala",
+        joblineid: value.joblineid,
+        status: bodyshop.md_order_statuses.default_ordered || "Ordered*"
+      });
+      return acc;
+    }, [])
+  );
+  const orderLines = orderLinesState[0];
+
+  const sendTypeState = useState("e");
   const partsOrderState = useState({
     vendorid: null,
     jobid: jobId,
     user_email: currentUser.email
   });
-
-  console.log("sendTypeState[0]", sendTypeState[0]);
   const partsOrder = partsOrderState[0];
+
+  const { loading, error, data } = useQuery(QUERY_ALL_VENDORS_FOR_ORDER, {
+    fetchPolicy: "network-only",
+    skip: !modalVisible
+  });
+  const [insertPartOrder] = useMutation(INSERT_NEW_PARTS_ORDERS);
+
   const handleOk = () => {
     insertPartOrder({
       variables: {
@@ -53,19 +70,7 @@ export default connect(
             ...partsOrder,
             status: bodyshop.md_order_statuses.default_ordered || "Ordered*",
             parts_order_lines: {
-              data: linesToOrder.reduce((acc, value) => {
-                acc.push({
-                  line_desc: value.line_desc,
-                  oem_partno: value.oem_partno,
-                  db_price: value.db_price,
-                  act_price: value.act_price,
-                  line_remarks: "Alalala",
-                  joblineid: value.joblineid,
-                  status:
-                    bodyshop.md_order_statuses.default_ordered || "Ordered*"
-                });
-                return acc;
-              }, [])
+              data: orderLines
             }
           }
         ]
@@ -96,6 +101,7 @@ export default connect(
           vendorList={(data && data.vendors) || []}
           state={partsOrderState}
           sendTypeState={sendTypeState}
+          orderLinesState={orderLinesState}
         />
       </LoadingSpinner>
     </Modal>