chrone: sperate client and server to different repos.

src/components/DataTableCells/AccountsListFieldCell.js

@@ -0,0 +1,72 @@
+import React, { useRef, useCallback, useMemo } from 'react';
+import classNames from 'classnames';
+import { useCellAutoFocus } from 'hooks';
+import intl from 'react-intl-universal';
+
+import AccountsSuggestField from 'components/AccountsSuggestField';
+
+// import AccountsSelectList from 'components/AccountsSelectList';
+import { FormGroup, Classes, Intent } from '@blueprintjs/core';
+
+/**
+ * Account cell renderer.
+ */
+export default function AccountCellRenderer({
+  column: {
+    id,
+    accountsDataProp,
+    filterAccountsByRootTypes,
+    filterAccountsByTypes,
+  },
+  row: { index, original },
+  cell: { value: initialValue },
+  payload: {
+    accounts: defaultAccounts,
+    updateData,
+    errors,
+    autoFocus,
+    ...restPayloadProps
+  },
+}) {
+  const accountRef = useRef();
+
+  useCellAutoFocus(accountRef, autoFocus, id, index);
+
+  const handleAccountSelected = useCallback(
+    (account) => {
+      updateData(index, id, account.id);
+    },
+    [updateData, index, id],
+  );
+  const error = errors?.[index]?.[id];
+
+  const accounts = useMemo(
+    () => restPayloadProps[accountsDataProp] || defaultAccounts,
+    [restPayloadProps, defaultAccounts, accountsDataProp],
+  );
+
+  return (
+    <FormGroup
+      intent={error ? Intent.DANGER : null}
+      className={classNames(
+        'form-group--select-list',
+        'form-group--account',
+        Classes.FILL,
+      )}
+    >
+      <AccountsSuggestField
+        accounts={accounts}
+        onAccountSelected={handleAccountSelected}
+        selectedAccountId={initialValue}
+        filterByRootTypes={filterAccountsByRootTypes}
+        filterByTypes={filterAccountsByTypes}
+        inputProps={{
+          inputRef: (ref) => (accountRef.current = ref),
+          placeholder: intl.get('search'),
+        }}
+        openOnKeyDown={true}
+        blurOnSelectClose={false}
+      />
+    </FormGroup>
+  );
+}

src/components/DataTableCells/CheckBoxFieldCell.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import classNames from 'classnames';
+import { get } from 'lodash';
+import { Classes, Checkbox, FormGroup, Intent } from '@blueprintjs/core';
+
+const CheckboxEditableCell = ({
+  row: { index, original },
+  column: { id, disabledAccessor, checkboxProps },
+  cell: { value: initialValue },
+  payload,
+}) => {
+  const [value, setValue] = React.useState(initialValue);
+
+  const onChange = (e) => {
+    const newValue = e.target.checked;
+
+    setValue(newValue);
+    payload.updateData(index, id, newValue);
+  };
+
+  React.useEffect(() => {
+    setValue(initialValue);
+  }, [initialValue]);
+
+  const error = payload.errors?.[index]?.[id];
+
+  // Detarmines whether the checkbox is disabled.
+  const disabled = disabledAccessor ? get(original, disabledAccessor) : false;
+
+  return (
+    <FormGroup
+      intent={error ? Intent.DANGER : null}
+      className={classNames(Classes.FILL)}
+    >
+      <Checkbox
+        value={value}
+        onChange={onChange}
+        checked={initialValue}
+        disabled={disabled}
+        minimal={true}
+        className="ml2"
+        {...checkboxProps}
+      />
+    </FormGroup>
+  );
+};
+
+export default CheckboxEditableCell;

src/components/DataTableCells/ContactsListFieldCell.js

@@ -0,0 +1,39 @@
+import React, { useCallback } from 'react';
+import { FormGroup, Intent, Classes } from '@blueprintjs/core';
+import classNames from 'classnames';
+import { ContactSelecetList } from 'components';
+import ContactsSuggestField from 'components/ContactsSuggestField';
+
+export default function ContactsListCellRenderer({
+  column: { id },
+  row: { index, original },
+  cell: { value },
+  payload: { contacts, updateData, errors },
+}) {
+  const handleContactSelected = useCallback(
+    (contact) => {
+      updateData(index, 'contact_id', contact.id);
+    },
+    [updateData, index, id],
+  );
+
+  const error = errors?.[index]?.[id];
+
+  return (
+    <FormGroup
+      intent={error ? Intent.DANGER : null}
+      className={classNames(
+        'form-group--select-list',
+        'form-group--contacts-list',
+        Classes.FILL,
+      )}
+    >
+      <ContactsSuggestField
+        contactsList={contacts}
+        onContactSelected={handleContactSelected}
+        selectedContactId={original?.contact_id}
+        selectedContactType={original?.contact_type}
+      />
+    </FormGroup>
+  );
+}

src/components/DataTableCells/DivFieldCell.js

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

src/components/DataTableCells/InputGroupCell.js

@@ -0,0 +1,40 @@
+import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+import { Classes, InputGroup, FormGroup, Intent } from '@blueprintjs/core';
+
+const InputEditableCell = ({
+  row: { index },
+  column: { id },
+  cell: { value: initialValue },
+  payload,
+}) => {
+  const [value, setValue] = useState(initialValue);
+
+  const onChange = (e) => {
+    setValue(e.target.value);
+  };
+  const onBlur = () => {
+    payload.updateData(index, id, value);
+  };
+  useEffect(() => {
+    setValue(initialValue);
+  }, [initialValue]);
+
+  const error = payload.errors?.[index]?.[id];
+
+  return (
+    <FormGroup
+      intent={error ? Intent.DANGER : null}
+      className={classNames(Classes.FILL)}
+    >
+      <InputGroup
+        value={value}
+        onChange={onChange}
+        onBlur={onBlur}
+        fill={true}
+      />
+    </FormGroup>
+  );
+};
+
+export default InputEditableCell;

src/components/DataTableCells/ItemsListCell.js

@@ -0,0 +1,51 @@
+import React, { useCallback, useRef } from 'react';
+// import ItemsListField from 'components/ItemsListField';
+import ItemsSuggestField from 'components/ItemsSuggestField';
+import classNames from 'classnames';
+
+import { FormGroup, Classes, Intent } from '@blueprintjs/core';
+import intl from 'react-intl-universal';
+
+import { useCellAutoFocus } from 'hooks';
+
+export default function ItemsListCell({
+  column: { id, filterSellable, filterPurchasable },
+  row: { index },
+  cell: { value: initialValue },
+  payload: { items, updateData, errors, autoFocus },
+}) {
+  const fieldRef = useRef();
+
+  // Auto-focus the items list input field.
+  useCellAutoFocus(fieldRef, autoFocus, id, index);
+
+  const handleItemSelected = 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)}
+    >
+      <ItemsSuggestField
+        items={items}
+        onItemSelected={handleItemSelected}
+        selectedItemId={initialValue}
+        sellable={filterSellable}
+        purchasable={filterPurchasable}
+        inputProps={{
+          inputRef: (ref) => (fieldRef.current = ref),
+          placeholder: intl.get('enter_an_item'),
+        }}
+        openOnKeyDown={true}
+        blurOnSelectClose={false}
+      />
+    </FormGroup>
+  );
+}

src/components/DataTableCells/MoneyFieldCell.js

@@ -0,0 +1,51 @@
+import React, { useCallback, useState, useEffect } from 'react';
+import { FormGroup, Intent } from '@blueprintjs/core';
+import { MoneyInputGroup } from 'components';
+import { CLASSES } from 'common/classes';
+
+// Input form cell renderer.
+const MoneyFieldCellRenderer = ({
+  row: { index, moneyInputGroupProps = {} },
+  column: { id },
+  cell: { value: initialValue },
+  payload: { errors, updateData },
+}) => {
+  const [value, setValue] = useState(initialValue);
+
+  const handleFieldChange = useCallback((value) => {
+    setValue(value);
+  }, [setValue]);
+
+  function isNumeric(data) {
+    return (
+      !isNaN(parseFloat(data)) && isFinite(data) && data.constructor !== Array
+    );
+  }
+
+  const handleFieldBlur = () => {
+    const updateValue = isNumeric(value) ? parseFloat(value) : value;
+    updateData(index, id, updateValue);
+  };
+
+  useEffect(() => {
+    setValue(initialValue);
+  }, [initialValue]);
+
+  const error = errors?.[index]?.[id];
+
+  return (
+    <FormGroup
+      intent={error ? Intent.DANGER : null}
+      className={CLASSES.FILL}>
+      <MoneyInputGroup
+        value={value}
+        // prefix={'$'}
+        onChange={handleFieldChange}
+        onBlur={handleFieldBlur}
+        {...moneyInputGroupProps}
+      />
+    </FormGroup>
+  );
+};
+
+export default MoneyFieldCellRenderer;

src/components/DataTableCells/NumericInputCell.js

@@ -0,0 +1,43 @@
+import React, { useState, useEffect } from 'react';
+import { FormGroup, NumericInput, Intent } from '@blueprintjs/core';
+import classNames from 'classnames';
+import { CLASSES } from 'common/classes';
+
+/**
+ * Numeric input table cell.
+ */
+export default function NumericInputCell({
+  row: { index },
+  column: { id },
+  cell: { value: initialValue },
+  payload,
+}) {
+  const [value, setValue] = useState(initialValue);
+
+  const handleValueChange = (newValue) => {
+    setValue(newValue);
+  };
+  const onBlur = () => {
+    payload.updateData(index, id, value);
+  };
+  useEffect(() => {
+    setValue(initialValue);
+  }, [initialValue]);
+
+  const error = payload.errors?.[index]?.[id];
+
+  return (
+    <FormGroup
+      intent={error ? Intent.DANGER : null}
+      className={classNames(CLASSES.FILL)}
+    >
+      <NumericInput
+        value={value}
+        onValueChange={handleValueChange}
+        onBlur={onBlur}
+        fill={true}
+        buttonPosition={"none"}
+      />
+    </FormGroup>
+  );
+}

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;

src/components/DataTableCells/PercentFieldCell.js

@@ -0,0 +1,41 @@
+import React, { useCallback, useState, useEffect } from 'react';
+import { FormGroup, Intent } from '@blueprintjs/core';
+import { MoneyInputGroup } from 'components';
+
+const PercentFieldCell = ({
+  cell: { value: initialValue },
+  row: { index },
+  column: { id },
+  payload: { errors, updateData },
+}) => {
+  const [value, setValue] = useState(initialValue);
+
+  const handleBlurChange = (newValue) => {
+    const parsedValue = newValue === '' || newValue === undefined
+      ? '' : parseInt(newValue, 10);
+    updateData(index, id, parsedValue);
+  };
+
+  const handleChange = useCallback((value) => {
+    setValue(value);
+  }, [setValue]);
+
+  useEffect(() => {
+    setValue(initialValue);
+  }, [initialValue]);
+
+  const error = errors?.[index]?.[id];
+
+  return (
+    <FormGroup intent={error ? Intent.DANGER : null}>
+      <MoneyInputGroup
+        prefix={'%'}
+        value={value}
+        onChange={handleChange}
+        onBlurValue={handleBlurChange}
+      />
+    </FormGroup>
+  );
+};
+
+export default PercentFieldCell;

src/components/DataTableCells/index.js

@@ -0,0 +1,22 @@
+import AccountsListFieldCell from './AccountsListFieldCell';
+import MoneyFieldCell from './MoneyFieldCell';
+import InputGroupCell from './InputGroupCell';
+import ContactsListFieldCell from './ContactsListFieldCell';
+import ItemsListCell from './ItemsListCell';
+import PercentFieldCell from './PercentFieldCell';
+import { DivFieldCell, EmptyDiv } from './DivFieldCell';
+import NumericInputCell from './NumericInputCell';
+import CheckBoxFieldCell from './CheckBoxFieldCell'
+
+export {
+  AccountsListFieldCell,
+  MoneyFieldCell,
+  InputGroupCell,
+  ContactsListFieldCell,
+  ItemsListCell,
+  PercentFieldCell,
+  DivFieldCell,
+  EmptyDiv,
+  NumericInputCell,
+  CheckBoxFieldCell
+};