}
+ label={}
className={classNames('form-group--select-list', Classes.FILL)}
labelInfo={}
intent={errors.beneficiary && touched.beneficiary && Intent.DANGER}
helperText={
-
+
}
>
}
>
- }
- itemRenderer={accountItem}
- itemPredicate={filterAccountsPredicater}
- popoverProps={{ minimal: true }}
- onItemSelect={onChangeAccount}
- selectedItem={values.payment_account_id}
- selectedItemProp={'id'}
- defaultText={}
- labelProp={'name'}
+ }
+ selectedAccountId={values.payment_account_id}
/>
@@ -193,7 +189,7 @@ function ExpenseFormHeader({
>
diff --git a/client/src/containers/Expenses/ExpenseTable.js b/client/src/containers/Expenses/ExpenseTable.js
index 162dfb9f3..51dee5071 100644
--- a/client/src/containers/Expenses/ExpenseTable.js
+++ b/client/src/containers/Expenses/ExpenseTable.js
@@ -1,19 +1,90 @@
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';
+
+const ExpenseCategoryHeaderCell = () => {
+ return (
+ <>
+
+
+
+ );
+}
+
+ // Actions cell renderer.
+ const ActionsCellRenderer = ({
+ row: { index },
+ column: { id },
+ cell: { value: initialValue },
+ data,
+ payload,
+}) => {
+ if (data.length <= index + 1) {
+ return '';
+ }
+ const onClickRemoveRole = () => {
+ payload.removeRow(index);
+ };
+ return (
+ } position={Position.LEFT}>
+ }
+ 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 + 1) {
+ return (
+
+
+
+ );
+ }
+ return chainedComponent(props);
+};
+
+const NoteCellRenderer = (chainedComponent) => (props) => {
+ if (props.data.length === props.row.index + 1) {
+ return '';
+ }
+ return chainedComponent(props);
+};
+
+const TotalAmountCellRenderer = (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 {formattedAmount(total, 'USD')};
+ }
+ return chainedComponent(props);
+};
+
function ExpenseTable({
// #withAccounts
accounts,
@@ -21,137 +92,27 @@ function ExpenseTable({
// #ownPorps
onClickRemoveRow,
onClickAddNewRow,
+ onClickClearAllLines,
defaultRow,
- initialValues,
- formik: { errors, values, setFieldValue },
+ categories,
+ formik: { errors, setFieldValue, resetForm },
}) {
- const [rows, setRow] = useState([]);
+ const [rows, setRows] = useState([]);
const { formatMessage } = useIntl();
useEffect(() => {
- setRow([
- ...initialValues.categories.map((e) => ({ ...e, rowType: 'editor' })),
- defaultRow,
- defaultRow,
+ setRows([
+ ...categories.map((e) => ({ ...e, rowType: 'editor' })),
]);
- }, [initialValues, defaultRow]);
+ }, [categories]);
- // 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],
+ // Final table rows editor rows and total and final blank row.
+ const tableRows = useMemo(
+ () => [...rows, { rowType: 'total' }],
+ [rows],
);
- // 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 = ({
- row: { index },
- column: { id },
- cell: { value: initialValue },
- data,
- payload,
- }) => {
- if (data.length <= index + 1) {
- return '';
- }
- const onClickRemoveRole = () => {
- payload.removeRow(index);
- };
- return (
- } position={Position.LEFT}>
- }
- 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 + 1) {
- return (
-
- {formatMessage({ id: 'total_currency' }, { currency: 'USD' })}
-
- );
- }
- return chainedComponent(props);
- };
-
- const NoteCellRenderer = (chainedComponent) => (props) => {
- if (props.data.length === props.row.index + 1) {
- return '';
- }
- return chainedComponent(props);
- };
-
- const TotalAmountCellRenderer = (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 {formattedAmount(total, 'USD')};
- }
- return chainedComponent(props);
- };
-
+ // Memorized data table columns.
const columns = useMemo(
() => [
{
@@ -164,12 +125,7 @@ function ExpenseTable({
disableSortBy: true,
},
{
- Header: (
- <>
- {formatMessage({ id: 'expense_category' })}
-
-
- ),
+ Header: ExpenseCategoryHeaderCell,
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.
- 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(
+ '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({
diff --git a/client/src/lang/en/index.js b/client/src/lang/en/index.js
index 06e996664..ed97347c1 100644
--- a/client/src/lang/en/index.js
+++ b/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',
};
diff --git a/client/src/store/accounts/accounts.actions.js b/client/src/store/accounts/accounts.actions.js
index 65ff7f07d..2c8778cf8 100644
--- a/client/src/store/accounts/accounts.actions.js
+++ b/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) {
diff --git a/client/src/utils.js b/client/src/utils.js
index daf69213c..2135f7d15 100644
--- a/client/src/utils.js
+++ b/client/src/utils.js
@@ -188,4 +188,34 @@ export const uniqueMultiProps = (items, props) => {
return _.uniqBy(items, (item) => {
return JSON.stringify(_.pick(item, props));
});
-}
\ No newline at end of file
+}
+
+
+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;
+};
\ No newline at end of file
diff --git a/server/src/http/controllers/Accounts.js b/server/src/http/controllers/Accounts.js
index 5f127381c..c19539657 100644
--- a/server/src/http/controllers/Accounts.js
+++ b/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 });