WIP/ Feature : Estimate & Receipt & Bill & Invoice

client/src/components/EstimateListField.js

@@ -1,39 +1,71 @@
 import React, { useCallback, useMemo, useEffect, useState } from 'react';
-import { MenuItem, Button } from '@blueprintjs/core';
+import { MenuItem } from '@blueprintjs/core';
 import ListSelect from 'components/ListSelect';
 import { FormattedMessage as T } from 'react-intl';
 
 function EstimateListField({
   products,
+  initialProductId,
   selectedProductId,
-  onProductSelected,
   defautlSelectText = <T id={'select_product'} />,
+  onProductSelected,
 }) {
+  const initialProduct = useMemo(
+    () => products.find((a) => a.id === initialProductId),
+    [initialProductId],
+  );
+
+  const [selectedProduct, setSelectedProduct] = useState(
+    initialProduct || null,
+  );
+
+  useEffect(() => {
+    if (typeof selectedProductId !== 'undefined') {
+      const product = selectedProductId
+        ? products.find((a) => a.id === selectedProductId)
+        : null;
+      setSelectedProduct(product);
+    }
+  }, [selectedProductId, products, setSelectedProduct]);
+
   const onProductSelect = useCallback(
     (product) => {
+      setSelectedProduct({ ...product });
       onProductSelected && onProductSelected(product);
     },
     [onProductSelected],
   );
 
   const productRenderer = useCallback(
-    (item, { handleClick, modifiers, query }) => (
-      <MenuItem text={item.name} key={item.id} onClick={handleClick} />
+    (item, { handleClick }) => (
+      <MenuItem key={item.id} text={item.name} onClick={handleClick} />
     ),
     [],
   );
 
+  const filterProduct = useCallback((query, product, _index, exactMatch) => {
+    const normalizedTitle = product.name.toLowerCase();
+    const normalizedQuery = query.toLowerCase();
+
+    if (exactMatch) {
+      return normalizedTitle === normalizedQuery;
+    } else {
+      return normalizedTitle.indexOf(normalizedQuery) >= 0;
+    }
+  }, []);
+
   return (
     <ListSelect
       items={products}
       noResults={<MenuItem disabled={true} text="No results." />}
       itemRenderer={productRenderer}
+      itemPredicate={filterProduct}
       popoverProps={{ minimal: true }}
       onItemSelect={onProductSelect}
       selectedItem={`${selectedProductId}`}
       selectedItemProp={'id'}
       labelProp={'name'}
-      defaultText={defautlSelectText}
+      defaultText={selectedProduct ? selectedProduct.name : defautlSelectText}
     />
   );
 }