WIP Make journal entries.

client/src/containers/Dashboard/Accounting/MakeJournalEntriesTable.js

@@ -1,55 +1,88 @@
-import React, {useState, useMemo} from 'react';
+import React, {useState, useMemo, useCallback} from 'react';
 import DataTable from 'components/DataTable';
 import {
-  FormGroup,
-  InputGroup,
-  MenuItem,
   Button,
   Intent,
 } from '@blueprintjs/core';
-import {Select} from '@blueprintjs/select';
 import Icon from 'components/Icon';
 import AccountsConnect from 'connectors/Accounts.connector.js';
-import {compose} from 'utils';
+import {compose, formattedAmount} from 'utils';
+import {
+  AccountsListFieldCell,
+  MoneyFieldCell,
+  InputGroupCell,
+} from 'comp}onents/DataTableCells';
+
+// Actions cell renderer.
+const ActionsCellRenderer = ({
+  row: { index },
+  column: { id },
+  cell: { value: initialValue },
+  data,
+  payload,
+}) => {
+  if (data.length <= (index + 2)) {
+    return '';
+  }
+  const onClickRemoveRole = () => {
+    payload.removeRow(index);
+  };
+
+  return (
+    <Button 
+      icon={<Icon icon="times-circle" iconSize={14} />}
+      iconSize={14}
+      className="ml2"
+      minimal={true}
+      intent={Intent.DANGER}
+      onClick={onClickRemoveRole} />
+  );
+};
+
+// Total text cell renderer.
+const TotalAccountCellRenderer = (chainedComponent) => (props) => {
+  if (props.data.length === (props.row.index + 2)) {
+    return (<span>{ 'Total USD' }</span>);
+  }
+  return chainedComponent(props);
+};
+
+// Total credit/debit cell renderer.
+const TotalCreditDebitCellRenderer = (chainedComponent, type) => (props) => {
+  if (props.data.length === (props.row.index + 2)) {
+    const total = props.data.reduce((total, entry) => {
+      const amount = parseInt(entry[type], 10);
+      const computed = amount ? total + amount : total;
+
+      return computed;
+    }, 0);
+
+    return (<span>{ formattedAmount(total, 'USD') }</span>);
+  }
+  return chainedComponent(props);
+};
+
+const NoteCellRenderer = (chainedComponent) => (props) => {
+  if (props.data.length === (props.row.index + 2)) {
+    return '';
+  }
+  return chainedComponent(props);
+};
 
 function MakeJournalEntriesTable({
   formik,
   accounts,
+  onClickRemoveRow,
+  onClickAddNewRow,
+  defaultRow,
 }) {
-  const [selectAccountsState, setSelectedAccount] = useState(false);
-
-  // Account item of select accounts field.
-  const accountItem = (item, { handleClick, modifiers, query }) => {
-    return (<MenuItem text={item.name} label={item.code} key={item.id} onClick={handleClick} />)
-  };
-
-  // Filters accounts options by account name or code.
-  const filterAccountsPredicater = (query, account, _index, exactMatch) => {
-    const normalizedTitle = account.name.toLowerCase();
-    const normalizedQuery = query.toLowerCase();
-
-    if (exactMatch) {
-      return normalizedTitle === normalizedQuery;
-    } else {
-      return `${account.code} ${normalizedTitle}`.indexOf(normalizedQuery) >= 0;
-    }
-  };
-
-  // Handle account field change.
-  const onChangeAccount = (index) => (account) => {
-    setSelectedAccount({
-      ...selectAccountsState,
-      [index + 1]: account,
-    });
-    formik.setFieldValue(`entries[${index}].account_id`, account.id);
-  };
-
-  const [data, setData] = useState([
-    ...formik.values.entries,
+  const [rows, setRow] = useState([
+    ...formik.values.entries.map((e) => ({ ...e, rowType: 'editor'})),
   ]);
 
-  const updateData = (rowIndex, columnId, value) => {
-    setData((old) =>
+  // Handles update datatable data.
+  const handleUpdateData = useCallback((rowIndex, columnId, value) => {
+    setRow((old) =>
       old.map((row, index) => {
         if (index === rowIndex) {
           return {
@@ -60,51 +93,18 @@ function MakeJournalEntriesTable({
         return row
       })
     )
-  }
+  }, []);
 
-  const CellInputGroupRenderer = ({
-    row: { index },
-    column: { id },
-    cell: { value: initialValue },
-  }) => {
-    const [state, setState] = useState(initialValue);
+  // Handles click remove datatable row.
+  const handleRemoveRow = useCallback((rowIndex) => {
+    const removeIndex = parseInt(rowIndex, 10);
+    setRow([
+      ...rows.filter((row, index) => index !== removeIndex),
+    ]);
+    onClickRemoveRow && onClickRemoveRow(removeIndex);
+  }, [rows, onClickRemoveRow]);
 
-    return (
-     <InputGroup
-        fill={true}
-        value={state}
-        onChange={(event) => {
-          setState(event.target.value);
-        }}
-        onBlur={(event) => {
-          formik.setFieldValue(`entries[${index}].[${id}]`, event.target.value);
-          updateData(index, id, state);
-        }}
-      />);
-  }
-
-
-  const ActionsCellRenderer = ({
-    row: { index },
-    column: { id },
-    cell: { value: initialValue },
-  }) => {
-
-    const onClickRemoveRole = () => {
-
-    };
-
-    return (
-      <Button 
-        icon={<Icon icon="mines" />}
-        iconSize={14}
-        className="ml2"
-        minimal={true}
-        intent={Intent.DANGER}
-        onClick={onClickRemoveRole()} />
-    );
-  }
- 
+  // Memorized data table columns.
   const columns = useMemo(() => [
     {
       Header: '#',
@@ -112,89 +112,93 @@ function MakeJournalEntriesTable({
       Cell: ({ row: {index} }) => (
         <span>{ index + 1 }</span>
       ),
-      className: "actions",
+      className: "index",
+      width: 40,
+      disableResizing: true,
+      disableSortBy: true,
     },
     {
       Header: 'Account',
       accessor: 'account',
-      Cell: ({ row: { index } }) => (
-        <FormGroup
-          className="{'form-group--account'}"
-          inline={true}>
-          <Select
-            items={accounts}
-            noResults={<MenuItem disabled={true} text="No results." />}
-            itemRenderer={accountItem}
-            itemPredicate={filterAccountsPredicater}
-            popoverProps={{ minimal: true }}
-            onItemSelect={onChangeAccount(index)}>
- 
-            <Button
-              rightIcon="caret-down"
-              text={(selectAccountsState[(index + 1)])
-                ? selectAccountsState[(index + 1)].name : "Select Account"}
-            />
-          </Select>
-        </FormGroup>
-      ),
+      Cell: TotalAccountCellRenderer(AccountsListFieldCell),
       className: "account",
+      disableSortBy: true,
+      disableResizing: true,
+      width: 250,
+    },
+    {
+      Header: 'Credit (USD)',
+      accessor: 'credit',
+      Cell: TotalCreditDebitCellRenderer(MoneyFieldCell, 'credit'),
+      className: "credit",
+      disableSortBy: true,
+      disableResizing: true,
+      width: 150,
+    },
+    {
+      Header: 'Debit (USD)',
+      accessor: 'debit',
+      Cell: TotalCreditDebitCellRenderer(MoneyFieldCell, 'debit'),
+      className: "debit",
+      disableSortBy: true,
+      disableResizing: true,
+      width: 150,
     },
     {
       Header: 'Note', 
       accessor: 'note',
-      Cell: CellInputGroupRenderer,
+      Cell: NoteCellRenderer(InputGroupCell),
+      disableSortBy: true,
       className: "note",
     },
-    {
-      Header: 'Credit',
-      accessor: 'credit',
-      Cell: CellInputGroupRenderer,
-      className: "credit",
-    },
-    {
-      Header: 'Debit',
-      accessor: 'debit',
-      Cell: CellInputGroupRenderer,
-      className: "debit",
-    },
     {
       Header: '',
       accessor: 'action',
       Cell: ActionsCellRenderer,
       className: "actions",
+      disableSortBy: true,
+      disableResizing: true,
+      width: 45,
     }
-  ]);
+  ], []);
 
-  const onClickNewRow = () => {
-    setData([
-      ...data,
-      {
-        credit: 0,
-        debit: 0,
-        account_id: null,
-        note: '',
-      }
+  // Handles click new line.
+  const onClickNewRow = useCallback(() => {
+    setRow([
+      ...rows,
+      { ...defaultRow, rowType: 'editor' },
     ]);
-  }
+    onClickAddNewRow && onClickAddNewRow();
+  }, [defaultRow, rows, onClickAddNewRow]);
+
+  const rowClassNames = useCallback((row) => ({
+    'row--total': rows.length === (row.index + 2),
+  }), [rows]);
   return (
     <div class="make-journal-entries__table">
       <DataTable
         columns={columns}
-        data={data} />
+        data={rows}
+        rowClassNames={rowClassNames}
+        payload={{
+          accounts,
+          updateData: handleUpdateData,
+          removeRow: handleRemoveRow,
+        }}/>
 
       <div class="mt1">
         <Button
-          minimal={true}
-          intent={Intent.PRIMARY}
+          small={true}
+          className={'button--secondary button--new-line'}
           onClick={onClickNewRow}>
-          + New Entry
+          New lines
         </Button>
 
         <Button
-          minimal={true}
-          intent={Intent.PRIMARY}
+          small={true}
+          className={'button--secondary button--clear-lines ml1'}
           onClick={onClickNewRow}>
-          - Clear all entries
+          Clear all lines
         </Button>
       </div>
     </div>