WIP feature/expenses

client/src/containers/Expenses/ExpenseTable.js

@@ -0,0 +1,239 @@
+import React, { useState, useMemo, useEffect, useCallback } from 'react';
+import { Button, Intent } from '@blueprintjs/core';
+import { FormattedMessage as T, useIntl } from 'react-intl';
+
+import DataTable from 'components/DataTable';
+import Icon from 'components/Icon';
+import { compose, formattedAmount } from 'utils';
+import {
+  AccountsListFieldCell,
+  MoneyFieldCell,
+  InputGroupCell,
+} from 'components/DataTableCells';
+import { omit } from 'lodash';
+import withAccounts from 'containers/Accounts/withAccounts';
+
+function ExpenseTable({
+  // #withAccounts
+  accounts,
+
+  // #ownPorps
+  onClickRemoveRow,
+  onClickAddNewRow,
+  defaultRow,
+  initialValues,
+  formik: { errors, values, setFieldValue },
+}) {
+  const [rows, setRow] = useState([]);
+  const { formatMessage } = useIntl();
+
+  useEffect(() => {
+    setRow([
+      ...initialValues.categories.map((e) => ({ ...e, rowType: 'editor' })),
+      defaultRow,
+      defaultRow,
+    ]);
+  }, [initialValues, defaultRow]);
+
+  // Handles update datatable data.
+  const handleUpdateData = useCallback(
+    (rowIndex, columnId, value) => {
+      const newRows = rows.map((row, index) => {
+        if (index === rowIndex) {
+          return { ...rows[rowIndex], [columnId]: value };
+        }
+        return { ...row };
+      });
+      setRow(newRows);
+      setFieldValue(
+        'categories',
+        newRows.map((row) => ({
+          ...omit(row, ['rowType']),
+        })),
+      );
+    },
+    [rows, setFieldValue],
+  );
+
+  // Handles click remove datatable row.
+  const handleRemoveRow = useCallback(
+    (rowIndex) => {
+      const removeIndex = parseInt(rowIndex, 10);
+      const newRows = rows.filter((row, index) => index !== removeIndex);
+
+      setRow([...newRows]);
+      setFieldValue(
+        'categories',
+        newRows
+          .filter((row) => row.rowType === 'editor')
+          .map((row) => ({ ...omit(row, ['rowType']) })),
+      );
+      onClickRemoveRow && onClickRemoveRow(removeIndex);
+    },
+    [rows, setFieldValue, onClickRemoveRow],
+  );
+
+  // 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 TotalExpenseCellRenderer = (chainedComponent) => (props) => {
+    if (props.data.length === props.row.index + 2) {
+      return (
+        <span>
+          {formatMessage({ id: 'total_currency' }, { currency: 'USD' })}
+        </span>
+      );
+    }
+    return chainedComponent(props);
+  };
+
+  const NoteCellRenderer = (chainedComponent) => (props) => {
+    if (props.data.length === props.row.index + 2) {
+      return '';
+    }
+    return chainedComponent(props);
+  };
+
+  const TotalAmountCellRenderer = (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 columns = useMemo(
+    () => [
+      {
+        Header: '#',
+        accessor: 'index',
+        Cell: ({ row: { index } }) => <span>{index + 1}</span>,
+        className: 'index',
+        width: 40,
+        disableResizing: true,
+        disableSortBy: true,
+      },
+      {
+        Header: formatMessage({ id: 'expense_category' }),
+        id: 'expense_account_id',
+        accessor: 'expense_account_id',
+        Cell: TotalExpenseCellRenderer(AccountsListFieldCell),
+        className: 'expense_account_id',
+        disableSortBy: true,
+        disableResizing: true,
+        width: 250,
+      },
+      {
+        Header: formatMessage({ id: 'amount_currency' }, { currency: 'USD' }),
+        accessor: 'amount',
+        Cell: TotalAmountCellRenderer(MoneyFieldCell, 'amount'),
+        disableSortBy: true,
+        disableResizing: true,
+        width: 150,
+      },
+
+      {
+        Header: formatMessage({ id: 'description' }),
+        accessor: 'description',
+        Cell: NoteCellRenderer(InputGroupCell),
+        disableSortBy: true,
+        className: 'description',
+      },
+      {
+        Header: '',
+        accessor: 'action',
+        Cell: ActionsCellRenderer,
+        className: 'actions',
+        disableSortBy: true,
+        disableResizing: true,
+        width: 45,
+      },
+    ],
+    [formatMessage],
+  );
+
+  // 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 className={'dashboard__insider--expense-form__table'}>
+      <DataTable
+        columns={columns}
+        data={rows}
+        rowClassNames={rowClassNames}
+        sticky={true}
+        payload={{
+          accounts,
+          errors: errors.categories || [],
+          updateData: handleUpdateData,
+          removeRow: handleRemoveRow,
+        }}
+      />
+      <div className={'mt1'}>
+        <Button
+          small={true}
+          className={'button--secondary button--new-line'}
+          onClick={onClickNewRow}
+        >
+          <T id={'new_lines'} />
+        </Button>
+
+        <Button
+          small={true}
+          className={'button--secondary button--clear-lines ml1'}
+          onClick={onClickNewRow}
+        >
+          <T id={'clear_all_lines'} />
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+export default compose(
+  withAccounts(({ accounts }) => ({
+    accounts,
+  })),
+  
+)(ExpenseTable);