feat: expand sidebar once open form editor page.

feat: rounding money amount.
feat: optimize page form structure.
feat: refactoring make journal and expense form with FastField component.

client/src/containers/Accounting/components.js

@@ -1,13 +1,7 @@
 import React from 'react';
-import {
-  Intent,
-  Classes,
-  Tooltip,
-  Position,
-  Tag,
-} from '@blueprintjs/core';
+import { Intent, Classes, Tooltip, Position, Tag, Button } from '@blueprintjs/core';
 import { FormattedMessage as T } from 'react-intl';
-import { Choose, Money, If, Icon } from 'components';
+import { Choose, Money, If, Icon, Hint } from 'components';
 import withAccountDetails from 'containers/Accounts/withAccountDetail';
 import { compose } from 'utils';
 
@@ -99,4 +93,77 @@ export function NoteAccessor(row) {
       </Tooltip>
     </If>
   );
-}
+}
+
+// Contact header cell.
+export function ContactHeaderCell() {
+  return (
+    <>
+      <T id={'contact'} />
+      <Hint
+        content={<T id={'contact_column_hint'} />}
+        position={Position.LEFT_BOTTOM}
+      />
+    </>
+  );
+}
+
+// Actions cell renderer.
+export const ActionsCellRenderer = ({
+  row: { index },
+  column: { id },
+  cell: { value: initialValue },
+  data,
+  payload,
+}) => {
+  if (data.length <= index + 1) {
+    return '';
+  }
+  const onClickRemoveRole = () => {
+    payload.removeRow(index);
+  };
+  return (
+    <Tooltip content={<T id={'remove_the_line'} />} position={Position.LEFT}>
+      <Button
+        icon={<Icon icon="times-circle" iconSize={14} />}
+        iconSize={14}
+        className="ml2"
+        minimal={true}
+        intent={Intent.DANGER}
+        onClick={onClickRemoveRole}
+      />
+    </Tooltip>
+  );
+};
+
+// Total text cell renderer.
+export const TotalAccountCellRenderer = (chainedComponent) => (props) => {
+  if (props.data.length === props.row.index + 1) {
+    return <span>{'Total USD'}</span>;
+  }
+  return chainedComponent(props);
+};
+
+// Total credit/debit cell renderer.
+export const TotalCreditDebitCellRenderer = (chainedComponent, type) => (
+  props,
+) => {
+  if (props.data.length === props.row.index + 1) {
+    const total = props.data.reduce((total, entry) => {
+      const amount = parseInt(entry[type], 10);
+      const computed = amount ? total + amount : total;
+
+      return computed;
+    }, 0);
+
+    return <span><Money amount={total} currency={'USD'} /></span>;
+  }
+  return chainedComponent(props);
+};
+
+export const NoteCellRenderer = (chainedComponent) => (props) => {
+  if (props.data.length === props.row.index + 1) {
+    return '';
+  }
+  return chainedComponent(props);
+};