feat: Merge sales branch

client/src/components/DataTableCells/DivFieldCell.js

@@ -0,0 +1,11 @@
+import React, { useState, useEffect } from 'react';
+
+export default function DivFieldCell({ cell: { value: initialValue } }) {
+  const [value, setValue] = useState(initialValue);
+
+  useEffect(() => {
+    setValue(initialValue);
+  }, [initialValue]);
+
+  return <div>${value}</div>;
+}

client/src/components/DataTableCells/EstimatesListFieldCell.js

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

client/src/components/DataTableCells/InputGroupCell.js

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import classNames from 'classnames';
-import { Classes, InputGroup, FormGroup } from '@blueprintjs/core';
+import { Classes, InputGroup, FormGroup, Intent } from '@blueprintjs/core';
 
 const InputEditableCell = ({
   row: { index },
@@ -20,8 +20,17 @@ const InputEditableCell = ({
     setValue(initialValue);
   }, [initialValue]);
 
+  const error = payload.errors?.[index]?.[id];
+
   return (
-    <FormGroup>
+    <FormGroup
+      intent={error ? Intent.DANGER : null}
+      className={classNames(
+        'form-group--select-list',
+        'form-group--account',
+        Classes.FILL,
+      )}
+    >
       <InputGroup
         value={value}
         onChange={onChange}

client/src/components/DataTableCells/PaymentReceiveListFieldCell.js

@@ -0,0 +1,35 @@
+import React, { useCallback } from 'react';
+import PaymentReceiveListField from 'components/PaymentReceiveListField';
+import classNames from 'classnames';
+import { FormGroup, Classes, Intent } from '@blueprintjs/core';
+
+function PaymentReceiveListFieldCell({
+  column: { id },
+  row: { index },
+  cell: { value: initialValue },
+  payload: { invoices, updateData, errors },
+}) {
+  const handleInvoicesSelected = useCallback(
+    (_item) => {
+      updateData(index, id, _item.id);
+    },
+    [updateData, index, id],
+  );
+
+  const error = errors?.[index]?.[id];
+
+  return (
+    <FormGroup
+      intent={error ? Intent.DANGER : null}
+      className={classNames('form-group--selcet-list', Classes.FILL)}
+    >
+      <PaymentReceiveListField
+        invoices={invoices}
+        onInvoiceSelected={handleInvoicesSelected}
+        selectedInvoiceId={initialValue}
+      />
+    </FormGroup>
+  );
+}
+
+export default PaymentReceiveListFieldCell;

client/src/components/DataTableCells/PercentFieldCell.js

@@ -0,0 +1,43 @@
+import React, { useCallback, useState, useEffect } from 'react';
+import { FormGroup, Intent } from '@blueprintjs/core';
+import MoneyInputGroup from 'components/MoneyInputGroup';
+
+const PercentFieldCell = ({
+  cell: { value: initialValue },
+  row: { index },
+  column: { id },
+  payload: { errors, updateData },
+}) => {
+  const [value, setValue] = useState(initialValue);
+
+  const onBlur = (e) => {
+    updateData(index, id, parseInt(e.target.value, 10));
+  };
+
+  const onChange = useCallback((e) => {
+    setValue(e.target.value);
+  }, []);
+
+
+  useEffect(() => {
+    setValue(initialValue);
+  }, [initialValue]);
+
+  const error = errors?.[index]?.[id];
+
+  return (
+    <FormGroup intent={error ? Intent.DANGER : null}>
+      <MoneyInputGroup
+        value={value}
+        suffix={'%'}
+        onChange={onChange}
+        inputGroupProps={{
+          fill: true,
+          onBlur,
+        }}
+      />
+    </FormGroup>
+  );
+};
+
+export default PercentFieldCell;

client/src/components/DataTableCells/index.js

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

client/src/components/EstimateListField.js

@@ -0,0 +1,73 @@
+import React, { useCallback, useMemo, useEffect, useState } from 'react';
+import { MenuItem } from '@blueprintjs/core';
+import ListSelect from 'components/ListSelect';
+import { FormattedMessage as T } from 'react-intl';
+
+function EstimateListField({
+  products,
+  initialProductId,
+  selectedProductId,
+  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 }) => (
+      <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/PaymentReceiveListField.js

@@ -0,0 +1,38 @@
+import React, { useCallback } from 'react';
+import { MenuItem } from '@blueprintjs/core';
+import ListSelect from 'components/ListSelect';
+import { FormattedMessage as T } from 'react-intl';
+
+function PaymentReceiveListField({
+  invoices,
+  selectedInvoiceId,
+  onInvoiceSelected,
+  defaultSelectText = <T id={'select_invoice'} />,
+}) {
+  const onInvoiceSelect = useCallback((_invoice) => {
+    onInvoiceSelected && onInvoiceSelected(_invoice);
+  });
+
+  const handleInvoiceRenderer = useCallback(
+    (item, { handleClick }) => (
+      <MenuItem id={item.id} name={item.name} onClick={handleClick} />
+    ),
+    [],
+  );
+
+  return (
+    <ListSelect
+      item={invoices}
+      noResults={<MenuItem disabled={true} text="No results." />}
+      itemRenderer={handleInvoiceRenderer}
+      popoverProps={{ minimal: true }}
+      onItemSelect={onInvoiceSelect}
+      selectedItem={`${selectedInvoiceId}`}
+      selectedItemProp={'id'}
+      labelProp={'name'}
+      defaultText={defaultSelectText}
+    />
+  );
+}
+
+export default PaymentReceiveListField;