Updates on part order modal

bodyshop_translations.babel

@@ -7278,6 +7278,27 @@
                                             </translation>
                                         </translations>
                                     </concept_node>
+                                    <concept_node>
+                                        <name>search</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
                                 </children>
                             </folder_node>
                             <folder_node>

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

client/src/graphql/vendors.queries.js

@@ -66,3 +66,14 @@ export const DELETE_VENDOR = gql`
     }
   }
 `;
+
+export const QUERY_ALL_VENDORS_FOR_ORDER = gql`
+  query QUERY_ALL_VENDORS_FOR_ORDER {
+    vendors(order_by: { favorite: desc }) {
+      name
+      cost_center
+      id
+      favorite
+    }
+  }
+`;

client/src/translations/en_us/common.json

@@ -468,7 +468,8 @@
 				"zip": "Zip/Postal Code"
 			},
 			"labels": {
-				"noneselected": "No vendor is selected."
+				"noneselected": "No vendor is selected.",
+				"search": "Type a Vendor's Name"
 			},
 			"successes": {
 				"deleted": "Vendor deleted successfully. ",

client/src/translations/es/common.json

@@ -468,7 +468,8 @@
 				"zip": "código postal"
 			},
 			"labels": {
-				"noneselected": "Ningún vendedor está seleccionado."
+				"noneselected": "Ningún vendedor está seleccionado.",
+				"search": "Escriba el nombre de un proveedor"
 			},
 			"successes": {
 				"deleted": "Proveedor eliminado correctamente.",

client/src/translations/fr/common.json

@@ -468,7 +468,8 @@
 				"zip": "Zip / code postal"
 			},
 			"labels": {
-				"noneselected": "Aucun fournisseur n'est sélectionné."
+				"noneselected": "Aucun fournisseur n'est sélectionné.",
+				"search": "Tapez le nom d'un vendeur"
 			},
 			"successes": {
 				"deleted": "Le fournisseur a bien été supprimé.",