WIP / Features / Sate

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/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,41 @@
+import React, { useCallback, useMemo, useEffect, useState } from 'react';
+import { MenuItem, Button } from '@blueprintjs/core';
+import ListSelect from 'components/ListSelect';
+import { FormattedMessage as T } from 'react-intl';
+
+function EstimateListField({
+  products,
+  selectedProductId,
+  onProductSelected,
+  defautlSelectText = <T id={'select_product'} />,
+}) {
+  const onProductSelect = useCallback(
+    (product) => {
+      onProductSelected && onProductSelected(product);
+    },
+    [onProductSelected],
+  );
+
+  const productRenderer = useCallback(
+    (item, { handleClick, modifiers, query }) => (
+      <MenuItem text={item.name} key={item.id} onClick={handleClick} />
+    ),
+    [],
+  );
+
+  return (
+    <ListSelect
+      items={products}
+      noResults={<MenuItem disabled={true} text="No results." />}
+      itemRenderer={productRenderer}
+      popoverProps={{ minimal: true }}
+      onItemSelect={onProductSelect}
+      selectedItem={`${selectedProductId}`}
+      selectedItemProp={'id'}
+      labelProp={'name'}
+      defaultText={defautlSelectText}
+    />
+  );
+}
+
+export default EstimateListField;