Added favorite vendor filtering on parts ordering BOD-244

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

@@ -286,7 +286,7 @@ export function JobLinesComponent({
       <Menu.Item key="PAS">{t("joblines.fields.part_types.PAS")}</Menu.Item>
     </Menu>
   );
-  console.log("state", state);
+
   return (
     <div>
       <PartsOrderModalContainer />

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

@@ -10,6 +10,7 @@ export default function PartsOrderModalComponent({
   vendorList,
   sendTypeState,
   isReturn,
+  preferredMake,
 }) {
   const [sendType, setSendType] = sendTypeState;
 
@@ -27,7 +28,11 @@ export default function PartsOrderModalComponent({
           },
         ]}
       >
-        <VendorSearchSelect options={vendorList} disabled={isReturn} />
+        <VendorSearchSelect
+          options={vendorList}
+          disabled={isReturn}
+          preferredMake={preferredMake}
+        />
       </Form.Item>
       <Form.Item
         name="deliver_by"

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

@@ -63,7 +63,9 @@ export function PartsOrderModalContainer({
 
   const { loading, error, data } = useQuery(QUERY_ALL_VENDORS_FOR_ORDER, {
     skip: !visible,
+    variables: { jobId: jobId },
   });
+
   const [insertPartOrder] = useMutation(INSERT_NEW_PARTS_ORDERS);
   const [updateJobLines] = useMutation(UPDATE_JOB_LINE_STATUS);
   const [insertInvoice] = useMutation(INSERT_NEW_INVOICE);
@@ -233,6 +235,7 @@ export function PartsOrderModalContainer({
             vendorList={(data && data.vendors) || []}
             sendTypeState={sendTypeState}
             isReturn={isReturn}
+            preferredMake={data && data.jobs[0] && data.jobs[0].v_make_desc}
           />
         </Form>
       </LoadingSpinner>

client/src/components/vendor-search-select/vendor-search-select.component.jsx

@@ -1,13 +1,15 @@
 import { Select, Tag } from "antd";
 import React, { useEffect, useState, forwardRef } from "react";
+import { HeartOutlined } from "@ant-design/icons";
 const { Option } = Select;
 
 //To be used as a form element only.
 
 const VendorSearchSelect = (
-  { value, onChange, options, onSelect, disabled },
+  { value, onChange, options, onSelect, disabled, preferredMake },
   ref
 ) => {
+  console.log("preferredMake", preferredMake, options);
   const [option, setOption] = useState(value);
 
   useEffect(() => {
@@ -16,6 +18,15 @@ const VendorSearchSelect = (
     }
   }, [value, option, onChange]);
 
+  const favorites =
+    preferredMake && options
+      ? options.filter(
+          (o) => o.favorite.filter((f) => f === preferredMake).length > 0
+        )
+      : [];
+
+  console.log("favorites", favorites);
+
   return (
     <Select
       ref={ref}
@@ -29,6 +40,22 @@ const VendorSearchSelect = (
       onSelect={onSelect}
       disabled={disabled || false}
     >
+      {favorites
+        ? favorites.map((o) => (
+            <Option
+              key={`favorite-${o.id}`}
+              value={o.id}
+              name={o.name}
+              discount={o.discount}
+            >
+              <div style={{ display: "flex" }}>
+                {o.name}
+                <Tag color="green">{`${o.discount * 100}%`}</Tag>
+                <HeartOutlined />
+              </div>
+            </Option>
+          ))
+        : null}
       {options
         ? options.map((o) => (
             <Option key={o.id} value={o.id} name={o.name} discount={o.discount}>

client/src/components/vendors-form/vendors-form.component.jsx

@@ -1,4 +1,4 @@
-import { Button, Form, Input, InputNumber, Switch, Select } from "antd";
+import { Button, Form, Input, InputNumber,  Select } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import FormItemEmail from "../form-items-formatted/email-form-item.component";
@@ -7,7 +7,7 @@ import { DeleteFilled } from "@ant-design/icons";
 export default function VendorsFormComponent({
   form,
   handleDelete,
-  responsibilityCenters
+  responsibilityCenters,
 }) {
   const { t } = useTranslation();
   const { getFieldValue } = form;
@@ -30,45 +30,17 @@ export default function VendorsFormComponent({
                     <Form.Item
                       label={t("vendors.fields.make")}
                       key={`${index}make`}
-                      name={[field.name, "make"]}
+                      name={[field.name]}
                       rules={[
                         {
                           required: true,
-                          message: t("general.validation.required")
-                        }
+                          message: t("general.validation.required"),
+                        },
                       ]}
                     >
                       <Input />
                     </Form.Item>
 
-                    <Form.Item key={`${field.key}types`}>
-                      <div style={{ display: "flex" }}>
-                        <Form.Item
-                          label={t("vendors.fields.oem")}
-                          key={`${index}oem`}
-                          name={[field.name, "type", "oem"]}
-                          valuePropName="checked"
-                        >
-                          <Switch />
-                        </Form.Item>
-                        <Form.Item
-                          label={t("vendors.fields.lkq")}
-                          key={`${index}lkq`}
-                          name={[field.name, "type", "lkq"]}
-                          valuePropName="checked"
-                        >
-                          <Switch />
-                        </Form.Item>
-                        <Form.Item
-                          label={t("vendors.fields.am")}
-                          key={`${index}am`}
-                          name={[field.name, "type", "am"]}
-                          valuePropName="checked"
-                        >
-                          <Switch />
-                        </Form.Item>
-                      </div>
-                    </Form.Item>
                     <DeleteFilled
                       onClick={() => {
                         remove(field.name);
@@ -125,8 +97,8 @@ export default function VendorsFormComponent({
         rules={[
           {
             type: "email",
-            message: t("general.validation.invalidemail")
-          }
+            message: t("general.validation.invalidemail"),
+          },
         ]}
         name="email"
       >
@@ -150,7 +122,7 @@ export default function VendorsFormComponent({
         name="cost_center"
       >
         <Select style={{ width: "150px" }}>
-          {responsibilityCenters.costs.map(item => (
+          {responsibilityCenters.costs.map((item) => (
             <Select.Option key={item.name}>{item.name}</Select.Option>
           ))}
         </Select>

client/src/graphql/vendors.queries.js

@@ -67,20 +67,23 @@ export const DELETE_VENDOR = gql`
 `;
 
 export const QUERY_ALL_VENDORS_FOR_ORDER = gql`
-  query QUERY_ALL_VENDORS_FOR_ORDER {
-    vendors(order_by: { favorite: desc }) {
+  query QUERY_ALL_VENDORS_FOR_ORDER($jobId: uuid) {
+    vendors(order_by: { name: asc }) {
       name
       cost_center
       id
       favorite
       discount
     }
+    jobs(where: { id: { _eq: $jobId } }) {
+      v_make_desc
+    }
   }
 `;
 
 export const SEARCH_VENDOR_AUTOCOMPLETE = gql`
   query SEARCH_VENDOR_AUTOCOMPLETE {
-    vendors {
+    vendors(order_by: { name: asc }) {
       name
       discount
       id