feat: Control selected account from selectedAccountId prop.

feat: Allow to reset form of manual journal and expense.

client/src/components/AccountsSelectList.js

@@ -1,17 +1,35 @@
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useState, useEffect, useMemo } from 'react';
 import { MenuItem, Button } from '@blueprintjs/core';
 import { Select } from '@blueprintjs/select';
+import { FormattedMessage as T } from 'react-intl';
 
 export default function AccountsSelectList({
   accounts,
   onAccountSelected,
   error = [],
-  initialAccount,
+  initialAccountId,
-  defautlSelectText = 'Select account',
+  selectedAccountId,
+  defaultSelectText = 'Select account',
 }) {
+  // Find initial account object to set it as default account in initial render.
+  const initialAccount = useMemo(
+    () => accounts.find((a) => a.id === initialAccountId),
+    [initialAccountId],
+  );
+
   const [selectedAccount, setSelectedAccount] = useState(
     initialAccount || null,
   );
+
+  useEffect(() => {
+    if (typeof selectedAccountId !== 'undefined') {
+      const account = selectedAccountId
+        ? accounts.find((a) => a.id === selectedAccountId)
+        : null;
+      setSelectedAccount(account);
+    }
+  }, [selectedAccountId, accounts, setSelectedAccount]);
+
   // Account item of select accounts field.
   const accountItem = useCallback((item, { handleClick, modifiers, query }) => {
     return (
@@ -52,7 +70,7 @@ export default function AccountsSelectList({
   return (
     <Select
       items={accounts}
-      noResults={<MenuItem disabled={true} text="No results." />}
+      noResults={<MenuItem disabled={true} text={<T id={'no_accounts'} />} />}
       itemRenderer={accountItem}
       itemPredicate={filterAccountsPredicater}
       popoverProps={{ minimal: true }}
@@ -60,7 +78,7 @@ export default function AccountsSelectList({
       onItemSelect={onAccountSelect}
     >
       <Button
-        text={selectedAccount ? selectedAccount.name : defautlSelectText}
+        text={selectedAccount ? selectedAccount.name : defaultSelectText}
       />
     </Select>
   );

client/src/components/DataTableCells/AccountsListFieldCell.js

@@ -9,7 +9,7 @@ import {
 
 // Account cell renderer.
 const AccountCellRenderer = ({
-  column: { id, value },
+  column: { id },
   row: { index, original },
   cell: { value: initialValue },
   payload: { accounts, updateData, errors },
@@ -20,9 +20,9 @@ const AccountCellRenderer = ({
 
   const { account_id = false } = (errors[index] || {});
 
-  const initialAccount = useMemo(() => 
+  // const initialAccount = useMemo(() => 
-    accounts.find(a => a.id === initialValue),
+  //   accounts.find(a => a.id === initialValue),
-    [accounts, initialValue]);
+  //   [accounts, initialValue]);
 
   return (
     <FormGroup
@@ -36,7 +36,7 @@ const AccountCellRenderer = ({
         accounts={accounts}
         onAccountSelected={handleAccountSelected}
         error={account_id}
-        initialAccount={initialAccount} />
+        selectedAccountId={initialValue} />
     </FormGroup>
   );
 };

client/src/components/index.js

@@ -18,6 +18,7 @@ import FieldRequiredHint from './FieldRequiredHint';
 import Dialog from './Dialog';
 import AppToaster from './AppToaster';
 import DataTable from './DataTable';
+import AccountsSelectList from './AccountsSelectList';
 
 const Hint = FieldHint;
 
@@ -43,4 +44,5 @@ export {
   Dialog,
   AppToaster,
   DataTable,
+  AccountsSelectList,
 };

client/src/containers/Accounting/MakeJournalEntriesForm.js

@@ -26,7 +26,15 @@ import Dragzone from 'components/Dragzone';
 import withMediaActions from 'containers/Media/withMediaActions';
 
 import useMedia from 'hooks/useMedia';
-import { compose } from 'utils';
+import { compose, repeatValue } from 'utils';
+
+const ERROR = {
+  JOURNAL_NUMBER_ALREADY_EXISTS: 'JOURNAL.NUMBER.ALREADY.EXISTS',
+  CUSTOMERS_NOT_WITH_RECEVIABLE_ACC: 'CUSTOMERS.NOT.WITH.RECEIVABLE.ACCOUNT',
+  VENDORS_NOT_WITH_PAYABLE_ACCOUNT: 'VENDORS.NOT.WITH.PAYABLE.ACCOUNT',
+  PAYABLE_ENTRIES_HAS_NO_VENDORS: 'PAYABLE.ENTRIES.HAS.NO.VENDORS',
+  RECEIVABLE_ENTRIES_HAS_NO_CUSTOMERS: 'RECEIVABLE.ENTRIES.HAS.NO.CUSTOMERS',
+};
 
 /**
  * Journal entries form.
@@ -139,7 +147,7 @@ function MakeJournalEntriesForm({
       date: moment(new Date()).format('YYYY-MM-DD'),
       description: '',
       reference: '',
-      entries: [defaultEntry, defaultEntry, defaultEntry, defaultEntry],
+      entries: [...repeatValue(defaultEntry, 4)],
     }),
     [defaultEntry],
   );
@@ -171,44 +179,50 @@ function MakeJournalEntriesForm({
       : [];
   }, [manualJournal]);
 
+  // Transform API errors in toasts messages.
   const transformErrors = (errors, { setErrors }) => {
     const hasError = (errorType) => errors.some((e) => e.type === errorType);
 
-    if (hasError('CUSTOMERS.NOT.WITH.RECEIVABLE.ACCOUNT')) {
+    if (hasError(ERROR.CUSTOMERS_NOT_WITH_RECEVIABLE_ACC)) {
       AppToaster.show({
-        message:
+        message: formatMessage({
-          'customers_should_assign_with_receivable_account_only',
+          id: 'customers_should_assign_with_receivable_account_only',
+        }),
         intent: Intent.DANGER,
       });
     }
-    if (hasError('VENDORS.NOT.WITH.PAYABLE.ACCOUNT')) {
+    if (hasError(ERROR.PAYABLE_ENTRIES_HAS_NO_VENDORS)) {
       AppToaster.show({
-        message: 'vendors_should_assign_with_payable_account_only',
+        message: formatMessage({
+          id: 'vendors_should_assign_with_payable_account_only',
+        }),
         intent: Intent.DANGER,
       });
     }
-    if (hasError('RECEIVABLE.ENTRIES.HAS.NO.CUSTOMERS')) {
+    if (hasError(ERROR.RECEIVABLE_ENTRIES_HAS_NO_CUSTOMERS)) {
       AppToaster.show({
-        message:
+        message: formatMessage({
-          'entries_with_receivable_account_no_assigned_with_customers',
+          id: 'entries_with_receivable_account_no_assigned_with_customers',
+        }),
         intent: Intent.DANGER,
       });
     }
-    if (hasError('PAYABLE.ENTRIES.HAS.NO.VENDORS')) {
+    if (hasError(ERROR.PAYABLE_ENTRIES_HAS_NO_VENDORS)) {
       AppToaster.show({
-        message:
+        message: formatMessage({
-          'entries_with_payable_account_no_assigned_with_vendors',
+          id: 'entries_with_payable_account_no_assigned_with_vendors',
+        }),
         intent: Intent.DANGER,
       });
     }
-    if (hasError('JOURNAL.NUMBER.ALREADY.EXISTS')) {
+    if (hasError(ERROR.JOURNAL_NUMBER_ALREADY_EXISTS)) {
       setErrors({
         journal_number: formatMessage({
           id: 'journal_number_is_already_used',
         }),
       });
     }
-  }
+  };
 
   const formik = useFormik({
     enableReinitialize: true,
@@ -313,6 +327,7 @@ function MakeJournalEntriesForm({
   const handleSubmitClick = useCallback(
     (payload) => {
       setPayload(payload);
+      // formik.resetForm();
       formik.handleSubmit();
     },
     [setPayload, formik],
@@ -336,15 +351,30 @@ function MakeJournalEntriesForm({
     [setDeletedFiles, deletedFiles],
   );
 
+  // Handle click on add a new line/row.
+  const handleClickAddNewRow = () => {
+    formik.setFieldValue('entries', [...formik.values.entries, defaultEntry]);
+  };
+
+  // Handle click `Clear all lines` button.
+  const handleClickClearLines = () => {
+    formik.setFieldValue(
+      'entries',
+      reorderingEntriesIndex([...repeatValue(defaultEntry, 4)]),
+    );
+  };
+
   return (
     <div class="make-journal-entries">
       <form onSubmit={formik.handleSubmit}>
         <MakeJournalEntriesHeader formik={formik} />
 
         <MakeJournalEntriesTable
-          initialValues={initialValues}
+          values={formik.values}
           formik={formik}
           defaultRow={defaultEntry}
+          onClickClearAllLines={handleClickClearLines}
+          onClickAddNewRow={handleClickAddNewRow}
         />
 
         <MakeJournalEntriesFooter

client/src/containers/Accounting/MakeJournalEntriesHeader.js

@@ -11,7 +11,7 @@ import { FormattedMessage as T } from 'react-intl';
 import { Row, Col } from 'react-grid-system';
 import moment from 'moment';
 import classNames from 'classnames';
-import { momentFormatter } from 'utils';
+import { momentFormatter, tansformDateValue } from 'utils';
 import {
   CurrenciesSelectList,
   ErrorMessage,
@@ -20,6 +20,7 @@ import {
   FieldRequiredHint,
 } from 'components';
 
+
 export default function MakeJournalEntriesHeader({
   formik: { errors, touched, values, setFieldValue, getFieldProps },
 }) {
@@ -72,8 +73,8 @@ export default function MakeJournalEntriesHeader({
           >
             <DateInput
               {...momentFormatter('YYYY/MM/DD')}
-              defaultValue={new Date()}
               onChange={handleDateChange}
+              value={tansformDateValue(values.date)}
               popoverProps={{
                 position: Position.BOTTOM,
                 minimal: true,

client/src/containers/Accounting/MakeJournalEntriesTable.js

@@ -6,7 +6,7 @@ import { omit } from 'lodash';
 import DataTable from 'components/DataTable';
 import Icon from 'components/Icon';
 import { Hint } from 'components';
-import { compose, formattedAmount } from 'utils';
+import { compose, formattedAmount, transformUpdatedRows } from 'utils';
 import {
   AccountsListFieldCell,
   MoneyFieldCell,
@@ -16,6 +16,19 @@ import {
 import withAccounts from 'containers/Accounts/withAccounts';
 import withCustomers from 'containers/Customers/withCustomers';
 
+// Contact header cell.
+function ContactHeaderCell() {
+  return (
+    <>
+      <T id={'contact'} />
+      <Hint
+        content={<T id={'contact_column_hint'} />}
+        position={Position.LEFT_BOTTOM}
+      />
+    </>
+  );
+}
+
 // Actions cell renderer.
 const ActionsCellRenderer = ({
   row: { index },
@@ -87,64 +100,22 @@ function MakeJournalEntriesTable({
   // #ownPorps
   onClickRemoveRow,
   onClickAddNewRow,
+  onClickClearAllLines,
   defaultRow,
-  initialValues,
+  values,
-  formik: { errors, values, setFieldValue },
+  formik: { errors, setFieldValue },
 }) {
-  const [rows, setRow] = useState([]);
+  const [rows, setRows] = useState([]);
   const { formatMessage } = useIntl();
+
   useEffect(() => {
-    setRow([
+    setRows([...values.entries.map((e) => ({ ...e, rowType: 'editor' }))]);
-      ...initialValues.entries.map((e) => ({ ...e, rowType: 'editor' })),
+  }, [values, setRows]);
-      defaultRow,
-      defaultRow,
-    ]);
-  }, [initialValues, defaultRow]);
 
-  // Handles update datatable data.
+  // Final table rows editor rows and total and final blank row.
-  const handleUpdateData = useCallback(
+  const tableRows = useMemo(
-    (rowIndex, columnIdOrBulk, value) => {
+    () => [...rows, { rowType: 'total' }, { rowType: 'final_space' }],
-      const columnId = typeof columnIdOrBulk !== 'object' 
+    [rows],
-        ? columnIdOrBulk : null;
-
-      const updateTable = typeof columnIdOrBulk === 'object'
-        ? columnIdOrBulk : null;
-
-      const newData = updateTable ? updateTable : { [columnId]: value };
-
-      const newRows = rows.map((row, index) => {
-        if (index === rowIndex) {
-          return { ...rows[rowIndex], ...newData };
-        }
-        return { ...row };
-      });
-      setRow(newRows);
-      setFieldValue(
-        'entries',
-        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(
-        'entries',
-        newRows
-          .filter((row) => row.rowType === 'editor')
-          .map((row) => ({ ...omit(row, ['rowType']) })),
-      );
-      onClickRemoveRow && onClickRemoveRow(removeIndex);
-    },
-    [rows, setFieldValue, onClickRemoveRow],
   );
 
   // Memorized data table columns.
@@ -189,15 +160,7 @@ function MakeJournalEntriesTable({
         width: 150,
       },
       {
-        Header: (
+        Header: ContactHeaderCell,
-          <>
-            <T id={'contact'} />
-            <Hint
-              content={<T id={'contact_column_hint'} />}
-              position={Position.LEFT_BOTTOM}
-            />
-          </>
-        ),
         id: 'contact_id',
         accessor: 'contact_id',
         Cell: NoteCellRenderer(ContactsListFieldCell),
@@ -228,10 +191,47 @@ function MakeJournalEntriesTable({
 
   // Handles click new line.
   const onClickNewRow = useCallback(() => {
-    setRow([...rows, { ...defaultRow, rowType: 'editor' }]);
     onClickAddNewRow && onClickAddNewRow();
   }, [defaultRow, rows, onClickAddNewRow]);
 
+  // Handles update datatable data.
+  const handleUpdateData = useCallback(
+    (rowIndex, columnIdOrObj, value) => {
+      const newRows = transformUpdatedRows(
+        rows,
+        rowIndex,
+        columnIdOrObj,
+        value,
+      );
+      setFieldValue(
+        'entries',
+        newRows
+          .filter((row) => row.rowType === 'editor')
+          .map((row) => ({
+            ...omit(row, ['rowType']),
+          })),
+      );
+    },
+    [rows, setFieldValue],
+  );
+
+  const handleRemoveRow = useCallback(
+    (rowIndex) => {
+      const removeIndex = parseInt(rowIndex, 10);
+      const newRows = rows.filter((row, index) => index !== removeIndex);
+
+      setFieldValue(
+        'entries',
+        newRows
+          .filter((row) => row.rowType === 'editor')
+          .map((row) => ({ ...omit(row, ['rowType']) })),
+      );
+      onClickRemoveRow && onClickRemoveRow(removeIndex);
+    },
+    [rows, setFieldValue, onClickRemoveRow],
+  );
+
+  // Rows class names callback.
   const rowClassNames = useCallback(
     (row) => ({
       'row--total': rows.length === row.index + 2,
@@ -239,11 +239,15 @@ function MakeJournalEntriesTable({
     [rows],
   );
 
+  const handleClickClearAllLines = () => {
+    onClickClearAllLines && onClickClearAllLines();
+  };
+
   return (
     <div class="make-journal-entries__table">
       <DataTable
         columns={columns}
-        data={rows}
+        data={tableRows}
         rowClassNames={rowClassNames}
         sticky={true}
         payload={{
@@ -272,7 +276,7 @@ function MakeJournalEntriesTable({
         <Button
           small={true}
           className={'button--secondary button--clear-lines ml1'}
-          onClick={onClickNewRow}
+          onClick={handleClickClearAllLines}
         >
           <T id={'clear_all_lines'} />
         </Button>

client/src/containers/Accounts/AccountsChart.js

@@ -106,6 +106,7 @@ function AccountsChart({
         message: formatMessage({
           id: 'cannot_delete_account_has_associated_transactions',
         }),
+        intent: Intent.DANGER,
       });
     }
   };

client/src/containers/Dialogs/AccountFormDialog.js

@@ -63,7 +63,7 @@ function AccountFormDialog({
       .required()
       .label(formatMessage({ id: 'account_type_id' })),
     description: Yup.string().nullable().trim(),
-    // parent_account_id: Yup.string().nullable(),
+    parent_account_id: Yup.string().nullable(),
   });
   const initialValues = useMemo(
     () => ({
@@ -97,11 +97,8 @@ function AccountFormDialog({
   } = useFormik({
     enableReinitialize: true,
     initialValues: {
-      // ...initialValues,
+      ...initialValues,
-      // ...(payload.action === 'edit' && account ? account : initialValues),
+      ...(payload.action === 'edit' && pick(account, Object.keys(initialValues))),
-
-      ...(payload.action === 'edit' &&
-        pick(account, Object.keys(initialValues))),
     },
     validationSchema: accountFormValidationSchema,
     onSubmit: (values, { setSubmitting, setErrors }) => {
@@ -114,7 +111,7 @@ function AccountFormDialog({
         requestEditAccount(payload.id, values)
           .then((response) => {
             closeDialog(dialogName);
-            queryCache.invalidateQueries('accounts-table', { force: true });
+            queryCache.invalidateQueries('accounts-table');
 
             AppToaster.show({
               message: formatMessage(
@@ -154,7 +151,6 @@ function AccountFormDialog({
             });
           })
           .catch((errors) => {
-            debugger;
             const errorsTransformed = transformApiErrors(errors);
             setErrors({ ...errorsTransformed });
             setSubmitting(false);

client/src/containers/Expenses/ExpenseDataTable.js

@@ -155,21 +155,13 @@ function ExpensesDataTable({
         id: 'payment_date',
         Header: formatMessage({ id: 'payment_date' }),
         accessor: () => moment().format('YYYY MMM DD'),
-        width: 150,
+        width: 140,
         className: 'payment_date',
       },
-      {
-        id: 'beneficiary',
-        Header: formatMessage({ id: 'beneficiary' }),
-        // accessor: 'beneficiary',
-        width: 150,
-        className: 'beneficiary',
-      },
       {
         id: 'total_amount',
         Header: formatMessage({ id: 'full_amount' }),
         accessor: (r) => <Money amount={r.total_amount} currency={'USD'} />,
-        disableResizing: true,
         className: 'total_amount',
         width: 150,
       },
@@ -184,7 +176,7 @@ function ExpensesDataTable({
         id: 'expense_account_id',
         Header: formatMessage({ id: 'expense_account' }),
         accessor: expenseAccountAccessor,
-        width: 150,
+        width: 160,
         className: 'expense_account',
       },
       {
@@ -201,7 +193,6 @@ function ExpensesDataTable({
             </Tag>
           );
         },
-        disableResizing: true,
         width: 100,
         className: 'publish',
       },
@@ -237,6 +228,7 @@ function ExpensesDataTable({
         ),
         className: 'actions',
         width: 50,
+        disableResizing: true,
       },
     ],
     [actionMenuList, formatMessage],

client/src/containers/Expenses/ExpenseForm.js

@@ -267,7 +267,7 @@ function ExpenseForm({
   const handleSubmitClick = useCallback(
     (payload) => {
       setPayload(payload);
-      formik.handleSubmit();
+      formik.resetForm();
     },
     [setPayload, formik],
   );
@@ -290,13 +290,30 @@ function ExpenseForm({
     [setDeletedFiles, deletedFiles],
   );
 
+  // Handle click on add a new line/row.
+  const handleClickAddNewRow = () => {
+    formik.setFieldValue(
+      'categories',
+      orderingCategoriesIndex([...formik.values.categories, defaultCategory]),
+    );
+  };
+
+  const handleClearAllLines = () => {
+    formik.setFieldValue(
+      'categories',
+      orderingCategoriesIndex([defaultCategory, defaultCategory, defaultCategory, defaultCategory]),
+    );  
+  }
+
   return (
-    <div className={'dashboard__insider--expense-form'}>
+    <div className={'expense-form'}>
       <form onSubmit={formik.handleSubmit}>
         <ExpenseFormHeader formik={formik} />
 
         <ExpenseTable
-          initialValues={initialValues}
+          categories={formik.values.categories}
+          onClickAddNewRow={handleClickAddNewRow}
+          onClickClearAllLines={handleClearAllLines}
           formik={formik}
           defaultRow={defaultCategory}
         />

client/src/containers/Expenses/ExpenseFormHeader.js

@@ -11,13 +11,12 @@ import { DateInput } from '@blueprintjs/datetime';
 import { FormattedMessage as T } from 'react-intl';
 import { Row, Col } from 'react-grid-system';
 import moment from 'moment';
-import { momentFormatter, compose } from 'utils';
+import { momentFormatter, compose, tansformDateValue } from 'utils';
-
 import classNames from 'classnames';
 import {
   ListSelect,
   ErrorMessage,
-  Icon,
+  AccountsSelectList,
   FieldRequiredHint,
   Hint,
 } from 'components';
@@ -118,12 +117,15 @@ function ExpenseFormHeader({
       <Row>
         <Col width={300}>
           <FormGroup
-            label={<T id={'beneficiary'} />}
+            label={<T id={'assign_to_customer'} />}
             className={classNames('form-group--select-list', Classes.FILL)}
             labelInfo={<Hint />}
             intent={errors.beneficiary && touched.beneficiary && Intent.DANGER}
             helperText={
-              <ErrorMessage name={'beneficiary'} {...{ errors, touched }} />
+              <ErrorMessage
+                name={'assign_to_customer'}
+                {...{ errors, touched }}
+              />
             }
           >
             <ListSelect
@@ -162,17 +164,11 @@ function ExpenseFormHeader({
               />
             }
           >
-            <ListSelect
+            <AccountsSelectList
-              items={accounts}
+              accounts={accounts}
-              noResults={<MenuItem disabled={true} text="No results." />}
+              onAccountSelected={onChangeAccount}
-              itemRenderer={accountItem}
+              defaultSelectText={<T id={'select_payment_account'} />}
-              itemPredicate={filterAccountsPredicater}
+              selectedAccountId={values.payment_account_id}
-              popoverProps={{ minimal: true }}
-              onItemSelect={onChangeAccount}
-              selectedItem={values.payment_account_id}
-              selectedItemProp={'id'}
-              defaultText={<T id={'select_payment_account'} />}
-              labelProp={'name'}
             />
           </FormGroup>
         </Col>
@@ -193,7 +189,7 @@ function ExpenseFormHeader({
           >
             <DateInput
               {...momentFormatter('YYYY/MM/DD')}
-              defaultValue={new Date()}
+              value={tansformDateValue(values.payment_date)}
               onChange={handleDateChange}
               popoverProps={{ position: Position.BOTTOM, minimal: true }}
             />

client/src/containers/Expenses/ExpenseTable.js

@@ -1,95 +1,28 @@
 import React, { useState, useMemo, useEffect, useCallback } from 'react';
 import { Button, Intent, Position, Tooltip } from '@blueprintjs/core';
 import { FormattedMessage as T, useIntl } from 'react-intl';
+import { omit } from 'lodash';
 
 import DataTable from 'components/DataTable';
 import Icon from 'components/Icon';
 import { Hint } from 'components';
-import { compose, formattedAmount } from 'utils';
+import { compose, formattedAmount, transformUpdatedRows } from 'utils';
 import {
   AccountsListFieldCell,
   MoneyFieldCell,
   InputGroupCell,
 } from 'components/DataTableCells';
-import { omit } from 'lodash';
 import withAccounts from 'containers/Accounts/withAccounts';
 
-function ExpenseTable({
-  // #withAccounts
-  accounts,
 
-  // #ownPorps
+const ExpenseCategoryHeaderCell = () => {
-  onClickRemoveRow,
+  return (
-  onClickAddNewRow,
+    <>
-  defaultRow,
+      <T id={'expense_category'} />
-  initialValues,
+      <Hint />
-  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, index) => ({
-          ...omit(row, ['rowType']),
-          index: index + 1,
-        })),
-      );
-    },
-    [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, index) => ({
-            ...omit(row, ['rowType']),
-            index: index + 1,
-          })),
-      );
-      // 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 = ({
@@ -124,7 +57,7 @@ function ExpenseTable({
   if (props.data.length <= props.row.index + 1) {
     return (
       <span>
-          {formatMessage({ id: 'total_currency' }, { currency: 'USD' })}
+        <T id={'total_currency'} values={{ currency: 'USD' }} />
       </span>
     );
   }
@@ -152,6 +85,34 @@ function ExpenseTable({
   return chainedComponent(props);
 };
 
+function ExpenseTable({
+  // #withAccounts
+  accounts,
+
+  // #ownPorps
+  onClickRemoveRow,
+  onClickAddNewRow,
+  onClickClearAllLines,
+  defaultRow,
+  categories,
+  formik: { errors, setFieldValue, resetForm },
+}) {
+  const [rows, setRows] = useState([]);
+  const { formatMessage } = useIntl();
+
+  useEffect(() => {
+    setRows([
+      ...categories.map((e) => ({ ...e, rowType: 'editor' })),
+    ]);
+  }, [categories]);
+
+  // Final table rows editor rows and total and final blank row.
+  const tableRows = useMemo(
+    () => [...rows, { rowType: 'total' }],
+    [rows],
+  );
+
+  // Memorized data table columns.
   const columns = useMemo(
     () => [
       {
@@ -164,12 +125,7 @@ function ExpenseTable({
         disableSortBy: true,
       },
       {
-        Header: (
+        Header: ExpenseCategoryHeaderCell,
-          <>
-            {formatMessage({ id: 'expense_category' })}
-            <Hint />
-          </>
-        ),
         id: 'expense_account_id',
         accessor: 'expense_account_id',
         Cell: TotalExpenseCellRenderer(AccountsListFieldCell),
@@ -184,7 +140,7 @@ function ExpenseTable({
         Cell: TotalAmountCellRenderer(MoneyFieldCell, 'amount'),
         disableSortBy: true,
         disableResizing: true,
-        width: 150,
+        width: 180,
         className: 'amount',
       },
       {
@@ -207,12 +163,56 @@ function ExpenseTable({
     [formatMessage],
   );
 
-  // Handles click new line.
+  // Handles update datatable data.
-  const onClickNewRow = useCallback(() => {
+  const handleUpdateData = useCallback(
-    setRow([...rows, { ...defaultRow, rowType: 'editor' }]);
+    (rowIndex, columnIdOrObj, value) => {
-    onClickAddNewRow && onClickAddNewRow();
+      const newRows = transformUpdatedRows(
-  }, [defaultRow, rows, onClickAddNewRow]);
+        rows,
+        rowIndex,
+        columnIdOrObj,
+        value,
+      );
+      setFieldValue(
+        'categories',
+        newRows
+          .filter((row) => row.rowType === 'editor')
+          .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);
+
+      setFieldValue(
+        'categories',
+        newRows
+          .filter((row) => row.rowType === 'editor')
+          .map((row, index) => ({
+            ...omit(row, ['rowType']),
+            index: index + 1,
+          })),
+      );
+      onClickRemoveRow && onClickRemoveRow(removeIndex);
+    },
+    [rows, setFieldValue, onClickRemoveRow],
+  );
+
+  // Invoke when click on add new line button.
+  const onClickNewRow = () => {
+    onClickAddNewRow && onClickAddNewRow();
+  };
+  // Invoke when click on clear all lines button.
+  const handleClickClearAllLines = () => {
+    onClickClearAllLines && onClickClearAllLines();
+  };
+  // Rows classnames callback.
   const rowClassNames = useCallback(
     (row) => ({
       'row--total': rows.length === row.index + 1,
@@ -224,7 +224,7 @@ function ExpenseTable({
     <div className={'dashboard__insider--expense-form__table'}>
       <DataTable
         columns={columns}
-        data={rows}
+        data={tableRows}
         rowClassNames={rowClassNames}
         sticky={true}
         payload={{
@@ -246,7 +246,7 @@ function ExpenseTable({
         <Button
           small={true}
           className={'button--secondary button--clear-lines ml1'}
-          onClick={onClickNewRow}
+          onClick={handleClickClearAllLines}
         >
           <T id={'clear_all_lines'} />
         </Button>

client/src/lang/en/index.js

@@ -181,7 +181,7 @@ export default {
   you_could_not_delete_predefined_accounts:
     "You could't delete predefined accounts.",
   cannot_delete_account_has_associated_transactions:
-    "you could't not delete account that has associated transactions.",
+    "You could't not delete account that has associated transactions.",
   the_account_has_been_successfully_inactivated:
     'The account has been successfully inactivated.',
   the_account_has_been_successfully_activated:
@@ -527,4 +527,5 @@ export default {
   account_code_hint:
     'A unique code/number for this account (limited to 10 characters)',
   logic_expression: 'logic expression',
+  assign_to_customer: 'Assign to Customer',
 };

client/src/store/accounts/accounts.actions.js

@@ -168,7 +168,6 @@ export const editAccount = (id, form) => {
         .catch((error) => {
           const { response } = error;
           const { data } = response;
-          // const { errors } = data;
 
           dispatch({ type: t.CLEAR_ACCOUNT_FORM_ERRORS });
           if (error) {

client/src/utils.js

@@ -189,3 +189,33 @@ export const uniqueMultiProps = (items, props) => {
     return JSON.stringify(_.pick(item, props));
   });
 }
+
+
+export const transformUpdatedRows = (rows, rowIndex, columnIdOrObj, value) => {
+  const columnId =
+    typeof columnIdOrObj !== 'object' ? columnIdOrObj : null;
+
+  const updateTable =
+    typeof columnIdOrObj === 'object' ? columnIdOrObj : null;
+
+  const newData = updateTable ? updateTable : { [columnId]: value };
+
+  return rows.map((row, index) => {
+    if (index === rowIndex) {
+      return { ...rows[rowIndex], ...newData };
+    }
+    return { ...row };
+  });
+}
+
+export const tansformDateValue = (date) => {
+  return moment(date).toDate() || new Date();
+};
+
+export const repeatValue = (value, len) => {
+  var arr = [];
+  for (var i = 0; i < len; i++) {
+    arr.push(value);
+  }
+  return arr;
+};

server/src/http/controllers/Accounts.js

@@ -175,7 +175,7 @@ export default {
       }
 
       if (errorReasons.length > 0) {
-        return res.status(400).send({ error: errorReasons });
+        return res.status(400).send({ errors: errorReasons });
       }
       // Update the account on the storage.
       const updatedAccount = await Account.query().patchAndFetchById(account.id, { ...form });