Fix EntriesItemTable & FloatingActions

client/src/components/DataTableCells/ItemsListCell.js

@@ -1,15 +1,16 @@
 import React, { useCallback, useMemo } from 'react';
-import EstimateListField from 'components/EstimateListField';
+import ItemListField from 'components/ItemListField';
 import classNames from 'classnames';
 import { FormGroup, Classes, Intent } from '@blueprintjs/core';
 
-function EstimatesListFieldCell({
+
+function ItemsListCell({
   column: { id },
   row: { index },
   cell: { value: initialValue },
-  payload: { products, updateData, errors },
+  payload: { items, updateData, errors },
 }) {
-  const handleProductSelected = useCallback(
+  const handleItemSelected = useCallback(
     (item) => {
       updateData(index, id, item.id);
     },
@@ -21,18 +22,15 @@ function EstimatesListFieldCell({
   return (
     <FormGroup
       intent={error ? Intent.DANGER : null}
-      className={classNames(
-        'form-group--select-list',
-        Classes.FILL,
-      )}
+      className={classNames('form-group--select-list', Classes.FILL)}
     >
-      <EstimateListField
-        products={products}
-        onProductSelected={handleProductSelected}
-        selectedProductId={initialValue}
+      <ItemListField
+        items={items}
+        onItemSelected={handleItemSelected}
+        selectedItemId={initialValue}
       />
     </FormGroup>
   );
 }
 
-export default EstimatesListFieldCell;
+export default ItemsListCell;

client/src/components/DataTableCells/index.js

@@ -2,15 +2,15 @@ import AccountsListFieldCell from './AccountsListFieldCell';
 import MoneyFieldCell from './MoneyFieldCell';
 import InputGroupCell from './InputGroupCell';
 import ContactsListFieldCell from './ContactsListFieldCell';
-import EstimatesListFieldCell from './EstimatesListFieldCell';
+import ItemsListCell from './ItemsListCell';
 import PercentFieldCell from './PercentFieldCell';
-import { DivFieldCell,EmptyDiv } from './DivFieldCell';
+import { DivFieldCell, EmptyDiv } from './DivFieldCell';
 export {
   AccountsListFieldCell,
   MoneyFieldCell,
   InputGroupCell,
   ContactsListFieldCell,
-  EstimatesListFieldCell,
+  ItemsListCell,
   PercentFieldCell,
   DivFieldCell,
   EmptyDiv,

client/src/components/EstimateListField.js

@@ -1,72 +0,0 @@
-import React, { useCallback, useMemo, useEffect, useState } from 'react';
-import { MenuItem } from '@blueprintjs/core';
-import ListSelect from 'components/ListSelect';
-
-function EstimateListField({
-  products,
-  initialProductId,
-  selectedProductId,
-  defautlSelectText = 'Click to select an item.',
-  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 }) => (
-      <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={selectedProduct ? selectedProduct.name : defautlSelectText}
-    />
-  );
-}
-
-export default EstimateListField;

client/src/components/ItemListField.js

@@ -0,0 +1,69 @@
+import React, { useCallback, useMemo, useEffect, useState } from 'react';
+import { MenuItem } from '@blueprintjs/core';
+import ListSelect from 'components/ListSelect';
+
+function ItemListField({
+  items,
+  initialItemId,
+  selectedItemId,
+  defautlSelectText = 'Click to select an item.',
+  onItemSelected,
+}) {
+  const initialItem = useMemo(() => items.find((a) => a.id === initialItemId), [
+    initialItemId,
+  ]);
+
+  const [selectedItem, setSelectedItem] = useState(initialItem || null);
+
+  useEffect(() => {
+    if (typeof selectedItemId !== 'undefined') {
+      const item = selectedItemId
+        ? items.find((a) => a.id === selectedItemId)
+        : null;
+      setSelectedItem(item);
+    }
+  }, [selectedItemId, items, setSelectedItem]);
+
+  const onItemSelect = useCallback(
+    (item) => {
+      setSelectedItem({ ...item });
+      onItemSelected && onItemSelected(item);
+    },
+    [onItemSelected],
+  );
+
+  const itemRenderer = useCallback(
+    (item, { handleClick }) => (
+      <MenuItem key={item.id} text={item.name} onClick={handleClick} />
+    ),
+    [],
+  );
+
+  const filterItem = useCallback((query, item, _index, exactMatch) => {
+    const normalizedTitle = item.name.toLowerCase();
+    const normalizedQuery = query.toLowerCase();
+
+    if (exactMatch) {
+      return normalizedTitle === normalizedQuery;
+    } else {
+      return normalizedTitle.indexOf(normalizedQuery) >= 0;
+    }
+  }, []);
+
+  return (
+    <ListSelect
+      items={items}
+      noResults={<MenuItem disabled={true} text="No results." />}
+      itemRenderer={itemRenderer}
+      itemPredicate={filterItem}
+      popoverProps={{ minimal: true }}
+      onItemSelect={onItemSelect}
+      selectedItem={`${selectedItemId}`}
+      selectedItemProp={'id'}
+      labelProp={'name'}
+      defaultText={selectedItem ? selectedItem.name : defautlSelectText}
+    />
+  );
+}
+
+export default ItemListField;