Fix: Change Customer & Vendor List to ContactSelectList

client/src/components/ContactSelecetList.js

@@ -0,0 +1,63 @@
+import React, { useCallback, useState, useEffect, useMemo } from 'react';
+import { FormattedMessage as T } from 'react-intl';
+import { ListSelect } from 'components';
+import { MenuItem } from '@blueprintjs/core';
+
+export default function ContactSelecetList({
+  contactsList,
+  selectedContactId,
+  defaultSelectText = <T id={'select_contact'} />,
+  onContactSelected,
+  // disabled = false,
+  ...restProps
+}) {
+  const [selecetedContact, setSelectedContact] = useState(null);
+
+  // Filter Contact List
+  const FilterContacts = (query, contact, index, exactMatch) => {
+    const normalizedTitle = contact.display_name.toLowerCase();
+    const normalizedQuery = query.toLowerCase();
+    if (exactMatch) {
+      return normalizedTitle === normalizedQuery;
+    } else {
+      return (
+        `${contact.display_name} ${normalizedTitle}`.indexOf(normalizedQuery) >=
+        0
+      );
+    }
+  };
+ 
+  const onContactSelect = useCallback(
+    (contact) => {
+      setSelectedContact({ ...contact });
+      onContactSelected && onContactSelected(contact);
+    },
+    [setSelectedContact, onContactSelected],
+  );
+
+  const handleContactRenderer = useCallback(
+    (contact, { handleClick }) => (
+      <MenuItem
+        key={contact.id}
+        text={contact.display_name}
+        onClick={handleClick}
+      />
+    ),
+    [],
+  );
+
+  return (
+    <ListSelect
+      items={contactsList}
+      selectedItemProp={'id'}
+      selectedItem={selectedContactId}
+      labelProp={'display_name'}
+      defaultText={defaultSelectText}
+      onItemSelect={onContactSelect}
+      itemPredicate={FilterContacts}
+      itemRenderer={handleContactRenderer}
+      popoverProps={{ minimal: true }}
+      {...restProps}
+    />
+  );
+}

client/src/components/VendorSelecetList.js

@@ -1,58 +0,0 @@
-import React, { useCallback } from 'react';
-import { FormattedMessage as T } from 'react-intl';
-import { ListSelect } from 'components';
-import { MenuItem } from '@blueprintjs/core';
-
-export default function VendorSelecetList({
-  vendorsList,
-  selectedVendorId,
-  defaultSelectText = <T id={'select_vender_account'} />,
-  onVenderSelected,
-  // disabled = false,
-  ...restProps
-}) {
-  // Filter Vendors List
-  const FilterVendors = (query, vender, index, exactMatch) => {
-    const normalizedTitle = vender.display_name.toLowerCase();
-    const normalizedQuery = query.toLowerCase();
-    if (exactMatch) {
-      return normalizedTitle === normalizedQuery;
-    } else {
-      return (
-        `${vender.display_name} ${normalizedTitle}`.indexOf(normalizedQuery) >=
-        0
-      );
-    }
-  };
-
-  const handleVendorSelected = useCallback(
-    (Vendor) => onVenderSelected && onVenderSelected(Vendor),
-    [],
-  );
-
-  const handleVenderRenderer = useCallback(
-    (vender, { handleClick }) => (
-      <MenuItem
-        key={vender.id}
-        text={vender.display_name}
-        onClick={handleClick}
-      />
-    ),
-    [],
-  );
-
-  return (
-    <ListSelect
-      items={vendorsList}
-      selectedItemProp={'id'}
-      selectedItem={selectedVendorId}
-      labelProp={'display_name'}
-      defaultText={defaultSelectText}
-      onItemSelect={handleVendorSelected}
-      itemPredicate={FilterVendors}
-      itemRenderer={handleVenderRenderer}
-      popoverProps={{ minimal: true }}
-      {...restProps}
-    />
-  );
-}

client/src/components/index.js

@@ -30,7 +30,7 @@ import Row from './Grid/Row';
 import Col from './Grid/Col';
 import CloudLoadingIndicator from './CloudLoadingIndicator';
 import MoneyExchangeRate from './MoneyExchangeRate';
-import VendorSelecetList from './VendorSelecetList';
+import ContactSelecetList from './ContactSelecetList';
 
 const Hint = FieldHint;
 
@@ -68,5 +68,5 @@ export {
   Row,
   CloudLoadingIndicator,
   MoneyExchangeRate,
-  VendorSelecetList,
+  ContactSelecetList ,
 };