Added favorite vendor filtering on parts ordering BOD-244

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}>