From 12c914affd2baa6dc7fd3d3674888ef1aeee8a04 Mon Sep 17 00:00:00 2001
From: Patrick Fic <pfic@outlook.com>
Date: Fri, 14 Feb 2020 08:37:25 -0800
Subject: [PATCH] Updates on part order modal

---
 bodyshop_translations.babel                   | 21 ++++++++++++
 .../parts-order-modal.component.jsx           | 32 +++++++++++++++++--
 .../parts-order-modal.container.jsx           | 18 +++++++++--
 client/src/graphql/vendors.queries.js         | 11 +++++++
 client/src/translations/en_us/common.json     |  3 +-
 client/src/translations/es/common.json        |  3 +-
 client/src/translations/fr/common.json        |  3 +-
 7 files changed, 82 insertions(+), 9 deletions(-)

diff --git a/bodyshop_translations.babel b/bodyshop_translations.babel
index 182d703ce..66b822e5e 100644
--- a/bodyshop_translations.babel
+++ b/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>
diff --git a/client/src/components/parts-order-modal/parts-order-modal.component.jsx b/client/src/components/parts-order-modal/parts-order-modal.component.jsx
index 82c2a2362..16fff404b 100644
--- a/client/src/components/parts-order-modal/parts-order-modal.component.jsx
+++ b/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>
+  );
 }
diff --git a/client/src/components/parts-order-modal/parts-order-modal.container.jsx b/client/src/components/parts-order-modal/parts-order-modal.container.jsx
index f6a695535..da651488f 100644
--- a/client/src/components/parts-order-modal/parts-order-modal.container.jsx
+++ b/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>
   );
 }
diff --git a/client/src/graphql/vendors.queries.js b/client/src/graphql/vendors.queries.js
index ac662a46a..c3aa48a1e 100644
--- a/client/src/graphql/vendors.queries.js
+++ b/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
+    }
+  }
+`;
diff --git a/client/src/translations/en_us/common.json b/client/src/translations/en_us/common.json
index f8316bc7c..04690f799 100644
--- a/client/src/translations/en_us/common.json
+++ b/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. ",
diff --git a/client/src/translations/es/common.json b/client/src/translations/es/common.json
index e378a2e8d..2fc0364b2 100644
--- a/client/src/translations/es/common.json
+++ b/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.",
diff --git a/client/src/translations/fr/common.json b/client/src/translations/fr/common.json
index 013c4b356..8700dc49b 100644
--- a/client/src/translations/fr/common.json
+++ b/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é.",