Updates on part order modal

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

@@ -1,5 +1,31 @@
-import React from "react";
+import React, { useState } from "react";
+import { AutoComplete, Icon } from "antd";
+import { useTranslation } from "react-i18next";
+export default function PartsOrderModalComponent({ vendorList }) {
+  const [vendorComplete, setVendorComplete] = useState(vendorList);
+  const { t } = useTranslation();
+  const handleSearch = value => {
+    if (value === "") setVendorComplete(vendorList);
+    else
+      setVendorComplete(
+        vendorList.filter(v =>
+          v.name.toLowerCase().includes(value.toLowerCase())
+        )
+      );
+  };
 
-export default function PartsOrderModalComponent() {
-  return <div>Component</div>;
+  return (
+    <div>
+      <AutoComplete
+        onSearch={handleSearch}
+        placeholder={t("vendors.labels.search")}>
+        {vendorComplete.map(v => (
+          <AutoComplete.Option key={v.id}>
+            {v.name}
+            {v.favorite ? <Icon type='heart' /> : null}
+          </AutoComplete.Option>
+        ))}
+      </AutoComplete>
+    </div>
+  );
 }

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

@@ -1,16 +1,28 @@
 import React from "react";
 import { Modal } from "antd";
 import PartsOrderModalComponent from "./parts-order-modal.component";
+import { QUERY_ALL_VENDORS_FOR_ORDER } from "../../graphql/vendors.queries";
+import { useQuery } from "react-apollo";
+import LoadingSpinner from "../loading-spinner/loading-spinner.component";
+import AlertComponent from "../alert/alert.component";
+
 export default function PartsOrderModalContainer({
   partsOrderModalVisible,
   linesToOrder
 }) {
-
   const [modalVisible, setModalVisible] = partsOrderModalVisible;
+  const { loading, error, data } = useQuery(QUERY_ALL_VENDORS_FOR_ORDER, {
+    fetchPolicy: "network-only",
+    skip: !modalVisible
+  });
+
   return (
     <Modal visible={modalVisible} onCancel={() => setModalVisible(false)}>
-      {JSON.stringify(linesToOrder)}
-      <PartsOrderModalComponent />
+      {error ? <AlertComponent message={error.message} type='error' /> : null}
+      <LoadingSpinner loading={loading}>
+        {JSON.stringify(linesToOrder)}
+        <PartsOrderModalComponent vendorList={(data && data.vendors) || []} />
+      </LoadingSpinner>
     </Modal>
   );
 }