QT/bigcapital
1
0
Fork 0
mirror of https://github.com/bigcapitalhq/bigcapital.git synced 2026-02-18 13:50:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: Control selected account from selectedAccountId prop.

Browse Source 
feat: Allow to reset form of manual journal and expense.
This commit is contained in:
Ahmed Bouhuolia
2020-07-02 02:50:57 +02:00
parent 2f2b71d24f
commit 985ac3f235
16 changed files with 366 additions and 279 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
client/src/containers/Accounting/MakeJournalEntriesForm.js
View File

@@ -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:
'customers_should_assign_with_receivable_account_only',
message: formatMessage({
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:
'entries_with_receivable_account_no_assigned_with_customers',
intent: Intent.DANGER,
});
}
if (hasError('PAYABLE.ENTRIES.HAS.NO.VENDORS')) {
AppToaster.show({
message:
'entries_with_payable_account_no_assigned_with_vendors',
message: formatMessage({
id: 'entries_with_receivable_account_no_assigned_with_customers',
}),
intent: Intent.DANGER,
});
}
if (hasError('JOURNAL.NUMBER.ALREADY.EXISTS')) {
if (hasError(ERROR.PAYABLE_ENTRIES_HAS_NO_VENDORS)) {
AppToaster.show({
message: formatMessage({
id: 'entries_with_payable_account_no_assigned_with_vendors',
}),
intent: Intent.DANGER,
});
}
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

5
client/src/containers/Accounting/MakeJournalEntriesHeader.js
View File

@@ -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,

136
client/src/containers/Accounting/MakeJournalEntriesTable.js
View File

@@ -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,
formik: { errors, values, setFieldValue },
values,
formik: { errors, setFieldValue },
}) {
const [rows, setRow] = useState([]);
const [rows, setRows] = useState([]);
const { formatMessage } = useIntl();
useEffect(() => {
setRow([
...initialValues.entries.map((e) => ({ ...e, rowType: 'editor' })),
defaultRow,
defaultRow,
]);
}, [initialValues, defaultRow]);
setRows([...values.entries.map((e) => ({ ...e, rowType: 'editor' }))]);
}, [values, setRows]);
// Handles update datatable data.
const handleUpdateData = useCallback(
(rowIndex, columnIdOrBulk, value) => {
const columnId = typeof columnIdOrBulk !== 'object'
? 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],
// Final table rows editor rows and total and final blank row.
const tableRows = useMemo(
() => [...rows, { rowType: 'total' }, { rowType: 'final_space' }],
[rows],
);
// Memorized data table columns.
@@ -189,15 +160,7 @@ function MakeJournalEntriesTable({
width: 150,
},
{
Header: (
<>
<T id={'contact'} />
<Hint
content={<T id={'contact_column_hint'} />}
position={Position.LEFT_BOTTOM}
/>
</>
),
Header: ContactHeaderCell,
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>

1
client/src/containers/Accounts/AccountsChart.js
View File

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

12
client/src/containers/Dialogs/AccountFormDialog.js
View File

@@ -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,
// ...(payload.action === 'edit' && account ? account : initialValues),
...(payload.action === 'edit' &&
pick(account, Object.keys(initialValues))),
...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);

14
client/src/containers/Expenses/ExpenseDataTable.js
View File

@@ -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],

23
client/src/containers/Expenses/ExpenseForm.js
View File

@@ -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}
/>

30
client/src/containers/Expenses/ExpenseFormHeader.js
View File

@@ -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
items={accounts}
noResults={<MenuItem disabled={true} text="No results." />}
itemRenderer={accountItem}
itemPredicate={filterAccountsPredicater}
popoverProps={{ minimal: true }}
onItemSelect={onChangeAccount}
selectedItem={values.payment_account_id}
selectedItemProp={'id'}
defaultText={<T id={'select_payment_account'} />}
labelProp={'name'}
<AccountsSelectList
accounts={accounts}
onAccountSelected={onChangeAccount}
defaultSelectText={<T id={'select_payment_account'} />}
selectedAccountId={values.payment_account_id}
/>
</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 }}
/>

276
client/src/containers/Expenses/ExpenseTable.js
View File

@@ -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 (
<>
<T id={'expense_category'} />
<Hint />
</>
);
}
// 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 (
<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.
const TotalExpenseCellRenderer = (chainedComponent) => (props) => {
if (props.data.length <= props.row.index + 1) {
return (
<span>
<T id={'total_currency'} values={{ currency: 'USD' }} />
</span>
);
}
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 <span>{formattedAmount(total, 'USD')}</span>;
}
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 (
<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.
const TotalExpenseCellRenderer = (chainedComponent) => (props) => {
if (props.data.length <= props.row.index + 1) {
return (
<span>
{formatMessage({ id: 'total_currency' }, { currency: 'USD' })}
</span>
);
}
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 <span>{formattedAmount(total, 'USD')}</span>;
}
return chainedComponent(props);
};
// Memorized data table columns.
const columns = useMemo(
() => [
{
@@ -164,12 +125,7 @@ function ExpenseTable({
disableSortBy: true,
},
{
Header: (
<>
{formatMessage({ id: 'expense_category' })}
<Hint />
</>
),
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({
<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>