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

- feat: Filter expense and payment accounts on expense form.

Browse Source 
- feat: Make journal errors with receivable and payable accounts.
- fix: Handle database big numbers.
- fix: Indexing lines when add a new line on make journal form.
- fix: Abstruct accounts type component.
This commit is contained in:
Ahmed Bouhuolia
2020-07-06 21:22:27 +02:00
parent 3fc390652d
commit 282da55d08
40 changed files with 1031 additions and 747 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
client/src/components/AccountsSelectList.js
View File

@@ -5,11 +5,10 @@ import { FormattedMessage as T } from 'react-intl';
export default function AccountsSelectList({
accounts,
onAccountSelected,
error = [],
initialAccountId,
selectedAccountId,
defaultSelectText = 'Select account',
onAccountSelected,
}) {
// Find initial account object to set it as default account in initial render.
const initialAccount = useMemo(

46
client/src/components/AccountsTypesSelect.js Normal file
View File

@@ -0,0 +1,46 @@
import React, { useCallback } from 'react';
import {
ListSelect,
} from 'components';
export default function AccountsTypesSelect({
accountsTypes,
selectedTypeId,
defaultSelectText = 'Select account type',
onTypeSelected,
...restProps
}) {
// Filters accounts types items.
const filterAccountTypeItems = (query, accountType, _index, exactMatch) => {
const normalizedTitle = accountType.name.toLowerCase();
const normalizedQuery = query.toLowerCase();
if (exactMatch) {
return normalizedTitle === normalizedQuery;
} else {
return normalizedTitle.indexOf(normalizedQuery) >= 0;
}
};
// Handle item selected.
const handleItemSelected = (accountType) => {
onTypeSelected && onTypeSelected(accountType);
};
const items = accountsTypes.map((type) => ({
id: type.id, name: type.name,
}));
return (
<ListSelect
items={items}
selectedItemProp={'id'}
selectedItem={selectedTypeId}
labelProp={'name'}
defaultText={defaultSelectText}
onItemSelect={handleItemSelected}
itemPredicate={filterAccountTypeItems}
{...restProps}
/>
);
}

10
client/src/components/ContactsListField.js
View File

@@ -17,17 +17,9 @@ export default function ContactsListField({
initialContact || null
);
const contactTypeLabel = (contactType) => {
switch(contactType) {
case 'customer':
return 'Customer';
case 'vendor':
return 'Vendor';
}
};
// Contact item of select accounts field.
const contactItem = useCallback((item, { handleClick, modifiers, query }) => (
<MenuItem text={item.display_name} label={contactTypeLabel(item.contact_type)} key={item.id} onClick={handleClick} />
<MenuItem text={item.display_name} key={item.id} onClick={handleClick} />
), []);
const onContactSelect = useCallback((contact) => {

45
client/src/components/DataTableCells/AccountsListFieldCell.js
View File

@@ -1,44 +1,43 @@
import React, {useCallback, useMemo} from 'react';
import React, { useCallback, useMemo } from 'react';
import AccountsSelectList from 'components/AccountsSelectList';
import classNames from 'classnames';
import {
FormGroup,
Classes,
Intent,
} from '@blueprintjs/core';
import { FormGroup, Classes, Intent } from '@blueprintjs/core';
// Account cell renderer.
const AccountCellRenderer = ({
column: { id },
column: { id, accountsDataProp },
row: { index, original },
cell: { value: initialValue },
payload: { accounts, updateData, errors },
payload: { accounts: defaultAccounts, updateData, errors, ...restProps },
}) => {
const handleAccountSelected = useCallback((account) => {
updateData(index, id, account.id);
}, [updateData, index, id]);
const { account_id = false } = (errors[index] || {});
// const initialAccount = useMemo(() =>
// accounts.find(a => a.id === initialValue),
// [accounts, initialValue]);
const handleAccountSelected = useCallback(
(account) => {
updateData(index, id, account.id);
},
[updateData, index, id],
);
const error = errors?.[index]?.[id];
const accounts = useMemo(
() => restProps[accountsDataProp] || defaultAccounts,
[restProps, defaultAccounts, accountsDataProp],
);
return (
<FormGroup
intent={account_id ? Intent.DANGER : ''}
intent={error ? Intent.DANGER : null}
className={classNames(
'form-group--select-list',
'form-group--account',
Classes.FILL)}
>
Classes.FILL,
)}
>
<AccountsSelectList
accounts={accounts}
onAccountSelected={handleAccountSelected}
error={account_id}
selectedAccountId={initialValue} />
selectedAccountId={initialValue}
/>
</FormGroup>
);
};
export default AccountCellRenderer;
export default AccountCellRenderer;

6
client/src/components/DataTableCells/ContactsListFieldCell.js
View File

@@ -1,5 +1,5 @@
import React, { useCallback, useMemo } from 'react';
import { FormGroup, Classes } from "@blueprintjs/core";
import { FormGroup, Intent, Classes } from "@blueprintjs/core";
import classNames from 'classnames';
import ContactsListField from 'components/ContactsListField';
@@ -20,8 +20,11 @@ export default function ContactsListCellRenderer({
return contacts.find(c => c.id === initialValue);
}, [contacts, initialValue]);
const error = errors?.[index]?.[id];
return (
<FormGroup
intent={error ? Intent.DANGER : null}
className={classNames(
'form-group--select-list',
'form-group--contacts-list',
@@ -32,6 +35,7 @@ export default function ContactsListCellRenderer({
contacts={contacts}
onContactSelected={handleContactSelected}
initialContact={initialContact}
/>
</FormGroup>
)

40
client/src/components/DataTableCells/InputGroupCell.js
View File

@@ -1,31 +1,35 @@
import React, {useState, useEffect} from 'react';
import {
InputGroup
} from '@blueprintjs/core';
import React, { useState, useEffect } from 'react';
import classNames from 'classnames';
import { Classes, InputGroup, FormGroup } from '@blueprintjs/core';
const InputEditableCell = ({
row: { index },
column: { id, },
column: { id },
cell: { value: initialValue },
payload,
}) => {
const [value, setValue] = useState(initialValue)
const [value, setValue] = useState(initialValue);
const onChange = e => {
setValue(e.target.value)
}
const onChange = (e) => {
setValue(e.target.value);
};
const onBlur = () => {
payload.updateData(index, id, value)
}
payload.updateData(index, id, value);
};
useEffect(() => {
setValue(initialValue)
}, [initialValue])
setValue(initialValue);
}, [initialValue]);
return (<InputGroup
value={value}
onChange={onChange}
onBlur={onBlur}
fill={true} />);
return (
<FormGroup>
<InputGroup
value={value}
onChange={onChange}
onBlur={onBlur}
fill={true}
/>
</FormGroup>
);
};
export default InputEditableCell;

37
client/src/components/DataTableCells/MoneyFieldCell.js
View File

@@ -1,4 +1,5 @@
import React, { useCallback, useState, useEffect } from 'react';
import { FormGroup, Intent } from '@blueprintjs/core';
import MoneyInputGroup from 'components/MoneyInputGroup';
// Input form cell renderer.
@@ -6,7 +7,7 @@ const MoneyFieldCellRenderer = ({
row: { index },
column: { id },
cell: { value: initialValue },
payload
payload: { errors, updateData },
}) => {
const [value, setValue] = useState(initialValue);
@@ -15,26 +16,36 @@ const MoneyFieldCellRenderer = ({
}, []);
function isNumeric(data) {
return !isNaN(parseFloat(data)) && isFinite(data) && data.constructor !== Array;
return (
!isNaN(parseFloat(data)) && isFinite(data) && data.constructor !== Array
);
}
const onBlur = () => {
const updateValue = isNumeric(value) ? parseFloat(value) : value;
payload.updateData(index, id, updateValue);
updateData(index, id, updateValue);
};
useEffect(() => {
setValue(initialValue);
}, [initialValue])
}, [initialValue]);
return (<MoneyInputGroup
value={value}
prefix={'$'}
onChange={handleFieldChange}
inputGroupProps={{
fill: true,
onBlur,
}} />)
const error = errors?.[index]?.[id];
return (
<FormGroup
intent={error ? Intent.DANGER : null}>
<MoneyInputGroup
value={value}
prefix={'$'}
onChange={handleFieldChange}
inputGroupProps={{
fill: true,
onBlur,
}}
/>
</FormGroup>
);
};
export default MoneyFieldCellRenderer;
export default MoneyFieldCellRenderer;

2
client/src/components/ListSelect.js
View File

@@ -33,7 +33,7 @@ export default function ListSelect ({
('loading') : <MenuItem disabled={true} text={noResultsText} />;
const itemRenderer = (item, { handleClick, modifiers, query }) => {
return (<MenuItem text={item[labelProp]} key={item[selectedItemProp]} />);
return (<MenuItem text={item[labelProp]} key={item[selectedItemProp]} onClick={handleClick} />);
};
return (

2
client/src/components/index.js
View File

@@ -19,6 +19,7 @@ import Dialog from './Dialog';
import AppToaster from './AppToaster';
import DataTable from './DataTable';
import AccountsSelectList from './AccountsSelectList';
import AccountsTypesSelect from './AccountsTypesSelect';
const Hint = FieldHint;
@@ -45,4 +46,5 @@ export {
AppToaster,
DataTable,
AccountsSelectList,
AccountsTypesSelect,
};

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

@@ -10,7 +10,7 @@ import { useFormik } from 'formik';
import moment from 'moment';
import { Intent } from '@blueprintjs/core';
import { useIntl } from 'react-intl';
import { pick } from 'lodash';
import { pick, setWith } from 'lodash';
import MakeJournalEntriesHeader from './MakeJournalEntriesHeader';
import MakeJournalEntriesFooter from './MakeJournalEntriesFooter';
@@ -89,19 +89,23 @@ function MakeJournalEntriesForm({
const validationSchema = Yup.object().shape({
journal_number: Yup.string()
.required()
.min(1)
.max(255)
.label(formatMessage({ id: 'journal_number_' })),
journal_type: Yup.string()
.required()
.min(1)
.max(255)
.label(formatMessage({ id: 'journal_type' })),
date: Yup.date()
.required()
.label(formatMessage({ id: 'date' })),
reference: Yup.string(),
description: Yup.string(),
reference: Yup.string().min(1).max(255),
description: Yup.string().min(1).max(1024),
entries: Yup.array().of(
Yup.object().shape({
credit: Yup.number().nullable(),
debit: Yup.number().nullable(),
credit: Yup.number().decimalScale(13).nullable(),
debit: Yup.number().decimalScale(13).nullable(),
account_id: Yup.number()
.nullable()
.when(['credit', 'debit'], {
@@ -109,7 +113,7 @@ function MakeJournalEntriesForm({
then: Yup.number().required(),
}),
contact_id: Yup.number().nullable(),
note: Yup.string().nullable(),
note: Yup.string().max(255).nullable(),
}),
),
});
@@ -180,48 +184,66 @@ function MakeJournalEntriesForm({
}, [manualJournal]);
// Transform API errors in toasts messages.
const transformErrors = (errors, { setErrors }) => {
const hasError = (errorType) => errors.some((e) => e.type === errorType);
const transformErrors = (resErrors, { setErrors, errors }) => {
const getError = (errorType) => resErrors.find((e) => e.type === errorType);
const toastMessages = [];
let error;
let newErrors = { ...errors, entries: [] };
if (hasError(ERROR.CUSTOMERS_NOT_WITH_RECEVIABLE_ACC)) {
AppToaster.show({
message: formatMessage({
id: 'customers_should_assign_with_receivable_account_only',
}),
intent: Intent.DANGER,
const setEntriesErrors = (indexes, prop, message) =>
indexes.forEach((i) => {
const index = Math.max(i - 1, 0);
newErrors = setWith(newErrors, `entries.[${index}].${prop}`, message);
});
}
if (hasError(ERROR.PAYABLE_ENTRIES_HAS_NO_VENDORS)) {
AppToaster.show({
message: formatMessage({
id: 'vendors_should_assign_with_payable_account_only',
if ((error = getError(ERROR.PAYABLE_ENTRIES_HAS_NO_VENDORS))) {
toastMessages.push(
formatMessage({
id: 'vendors_should_selected_with_payable_account_only',
}),
intent: Intent.DANGER,
});
);
setEntriesErrors(error.indexes, 'contact_id', 'error');
}
if (hasError(ERROR.RECEIVABLE_ENTRIES_HAS_NO_CUSTOMERS)) {
AppToaster.show({
message: formatMessage({
id: 'entries_with_receivable_account_no_assigned_with_customers',
if ((error = getError(ERROR.RECEIVABLE_ENTRIES_HAS_NO_CUSTOMERS))) {
toastMessages.push(
formatMessage({
id: 'should_select_customers_with_entries_have_receivable_account',
}),
intent: Intent.DANGER,
});
);
setEntriesErrors(error.indexes, 'contact_id', 'error');
}
if (hasError(ERROR.PAYABLE_ENTRIES_HAS_NO_VENDORS)) {
AppToaster.show({
message: formatMessage({
id: 'entries_with_payable_account_no_assigned_with_vendors',
if ((error = getError(ERROR.CUSTOMERS_NOT_WITH_RECEVIABLE_ACC))) {
toastMessages.push(
formatMessage({
id: 'customers_should_selected_with_receivable_account_only',
}),
intent: Intent.DANGER,
});
);
setEntriesErrors(error.indexes, 'account_id', 'error');
}
if (hasError(ERROR.JOURNAL_NUMBER_ALREADY_EXISTS)) {
setErrors({
journal_number: formatMessage({
if ((error = getError(ERROR.VENDORS_NOT_WITH_PAYABLE_ACCOUNT))) {
toastMessages.push(
formatMessage({
id: 'vendors_should_selected_with_payable_account_only',
}),
);
setEntriesErrors(error.indexes, 'account_id', 'error');
}
if ((error = getError(ERROR.JOURNAL_NUMBER_ALREADY_EXISTS))) {
newErrors = setWith(
newErrors,
'journal_number',
formatMessage({
id: 'journal_number_is_already_used',
}),
});
);
}
setErrors({ ...newErrors });
AppToaster.show({
message: toastMessages.map((message) => {
return <div>- {message}</div>;
}),
intent: Intent.DANGER,
});
};
const formik = useFormik({
@@ -255,7 +277,7 @@ function MakeJournalEntriesForm({
} else if (totalCredit === 0 || totalDebit === 0) {
AppToaster.show({
message: formatMessage({
id: 'should_total_of_credit_and_debit_be_bigger_then_zero',
id: 'amount_cannot_be_zero_or_empty',
}),
intent: Intent.DANGER,
});
@@ -353,7 +375,10 @@ function MakeJournalEntriesForm({
// Handle click on add a new line/row.
const handleClickAddNewRow = () => {
formik.setFieldValue('entries', [...formik.values.entries, defaultEntry]);
formik.setFieldValue(
'entries',
reorderingEntriesIndex([...formik.values.entries, defaultEntry]),
);
};
// Handle click `Clear all lines` button.
@@ -370,13 +395,12 @@ function MakeJournalEntriesForm({
<MakeJournalEntriesHeader formik={formik} />
<MakeJournalEntriesTable
values={formik.values}
values={formik.values.entries}
formik={formik}
defaultRow={defaultEntry}
onClickClearAllLines={handleClickClearLines}
onClickAddNewRow={handleClickAddNewRow}
/>
<MakeJournalEntriesFooter
formik={formik}
onSubmitClick={handleSubmitClick}

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

@@ -109,7 +109,7 @@ function MakeJournalEntriesTable({
const { formatMessage } = useIntl();
useEffect(() => {
setRows([...values.entries.map((e) => ({ ...e, rowType: 'editor' }))]);
setRows([...values.map((e) => ({ ...e, rowType: 'editor' }))]);
}, [values, setRows]);
// Final table rows editor rows and total and final blank row.
@@ -217,6 +217,9 @@ function MakeJournalEntriesTable({
const handleRemoveRow = useCallback(
(rowIndex) => {
// Can't continue if there is just one row line or less.
if (rows.length <= 2) { return; }
const removeIndex = parseInt(rowIndex, 10);
const newRows = rows.filter((row, index) => index !== removeIndex);

4
client/src/containers/Accounting/ManualJournalsDataTable.js
View File

@@ -28,7 +28,7 @@ import withManualJournalsActions from 'containers/Accounting/withManualJournalsA
function StatusAccessor(row) {
return (
<Choose>
<Choose.When condition={row.status}>
<Choose.When condition={!!row.status}>
<Tag minimal={true}>
<T id={'published'} />
</Tag>
@@ -178,7 +178,7 @@ function ManualJournalsDataTable({
{
id: 'status',
Header: formatMessage({ id: 'status' }),
accessor: StatusAccessor,
accessor: row => StatusAccessor(row),
width: 95,
className: 'status',
},

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

@@ -306,7 +306,7 @@ function AccountsChart({
setBulkInactiveAccounts(false);
AppToaster.show({
message: formatMessage({
id: 'the_accounts_has_been_successfully_inactivated',
id: 'the_accounts_have_been_successfully_inactivated',
}),
intent: Intent.SUCCESS,
});

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

@@ -1,4 +1,4 @@
import React, { useCallback, useMemo } from 'react';
import React, { useCallback, useMemo, useEffect } from 'react';
import {
Button,
Classes,
@@ -6,24 +6,24 @@ import {
InputGroup,
Intent,
TextArea,
MenuItem,
Checkbox,
Position,
} from '@blueprintjs/core';
import * as Yup from 'yup';
import { useFormik } from 'formik';
import { FormattedMessage as T, useIntl } from 'react-intl';
import { If } from 'components';
import { omit, pick } from 'lodash';
import { pick } from 'lodash';
import { useQuery, queryCache } from 'react-query';
import classNames from 'classnames';
import Yup from 'services/yup';
import {
ListSelect,
If,
ErrorMessage,
Dialog,
AppToaster,
FieldRequiredHint,
Hint,
AccountsSelectList,
AccountsTypesSelect,
} from 'components';
import AccountFormDialogContainer from 'containers/Dialogs/AccountFormDialog.container';
@@ -53,33 +53,33 @@ function AccountFormDialog({
closeDialog,
}) {
const { formatMessage } = useIntl();
const accountFormValidationSchema = Yup.object().shape({
const validationSchema = Yup.object().shape({
name: Yup.string()
.required()
.min(3)
.max(255)
.label(formatMessage({ id: 'account_name_' })),
code: Yup.number(),
account_type_id: Yup.string()
.nullable()
code: Yup.string().digits().min(3).max(6),
account_type_id: Yup.number()
.required()
.label(formatMessage({ id: 'account_type_id' })),
description: Yup.string().nullable().trim(),
parent_account_id: Yup.string().nullable(),
description: Yup.string().min(3).max(512).nullable().trim(),
parent_account_id: Yup.number().nullable(),
});
const initialValues = useMemo(
() => ({
account_type_id: null,
name: '',
description: '',
code: '',
type: '',
description: '',
parent_account_id: null,
}),
[],
);
const transformApiErrors = (errors) => {
const fields = {};
if (errors.find((e) => e.type === 'NOT_UNIQUE_CODE')) {
fields.code = 'Account code is not unqiue.';
fields.code = formatMessage({ id: 'account_code_is_not_unique' });
}
return fields;
};
@@ -98,20 +98,33 @@ function AccountFormDialog({
enableReinitialize: true,
initialValues: {
...initialValues,
...(payload.action === 'edit' && pick(account, Object.keys(initialValues))),
...(payload.action === 'edit' &&
pick(account, Object.keys(initialValues))),
},
validationSchema: accountFormValidationSchema,
validationSchema,
onSubmit: (values, { setSubmitting, setErrors }) => {
const exclude = ['subaccount'];
const form = pick(values, Object.keys(initialValues));
const toastAccountName = values.code
? `${values.code} - ${values.name}`
: values.name;
const afterSubmit = () => {
closeDialog(dialogName);
queryCache.invalidateQueries('accounts-table');
queryCache.invalidateQueries('accounts-list');
};
const afterErrors = (errors) => {
const errorsTransformed = transformApiErrors(errors);
setErrors({ ...errorsTransformed });
setSubmitting(false);
};
if (payload.action === 'edit') {
requestEditAccount(payload.id, values)
requestEditAccount(payload.id, form)
.then((response) => {
closeDialog(dialogName);
queryCache.invalidateQueries('accounts-table');
afterSubmit(response);
AppToaster.show({
message: formatMessage(
@@ -124,19 +137,11 @@ function AccountFormDialog({
intent: Intent.SUCCESS,
});
})
.catch((errors) => {
const errorsTransformed = transformApiErrors(errors);
setErrors({ ...errorsTransformed });
setSubmitting(false);
});
.catch(afterErrors);
} else {
requestSubmitAccount({
payload: payload.parent_account_id,
form: { ...omit(values, exclude) },
})
requestSubmitAccount({ form })
.then((response) => {
closeDialog(dialogName);
queryCache.invalidateQueries('accounts-table', { force: true });
afterSubmit(response);
AppToaster.show({
message: formatMessage(
@@ -150,70 +155,28 @@ function AccountFormDialog({
position: Position.BOTTOM,
});
})
.catch((errors) => {
const errorsTransformed = transformApiErrors(errors);
setErrors({ ...errorsTransformed });
setSubmitting(false);
});
.catch(afterErrors);
}
},
});
useEffect(() => {
if (values.parent_account_id) {
setFieldValue('subaccount', true);
}
}, [values.parent_account_id]);
// Filtered accounts based on the given account type.
const filteredAccounts = useMemo(
() =>
accounts.filter(
(account) => account.account_type_id === values.account_type_id,
(account) =>
account.account_type_id === values.account_type_id ||
!values.account_type_id,
),
[accounts, values.account_type_id],
);
// Filters accounts types items.
const filterAccountTypeItems = (query, accountType, _index, exactMatch) => {
const normalizedTitle = accountType.name.toLowerCase();
const normalizedQuery = query.toLowerCase();
if (exactMatch) {
return normalizedTitle === normalizedQuery;
} else {
return normalizedTitle.indexOf(normalizedQuery) >= 0;
}
};
// Account type item of select filed.
const accountTypeItem = (item, { handleClick, modifiers, query }) => {
return <MenuItem text={item.name} key={item.id} onClick={handleClick} />;
};
// Account item of select accounts field.
const accountItem = (item, { handleClick, modifiers, query }) => {
return (
<MenuItem
text={item.name}
label={item.code}
key={item.id}
onClick={handleClick}
/>
);
};
// Filters accounts items.
const filterAccountsPredicater = useCallback(
(query, account, _index, exactMatch) => {
const normalizedTitle = account.name.toLowerCase();
const normalizedQuery = query.toLowerCase();
if (exactMatch) {
return normalizedTitle === normalizedQuery;
} else {
return (
`${account.code} ${normalizedTitle}`.indexOf(normalizedQuery) >= 0
);
}
},
[],
);
// Handles dialog close.
const handleClose = useCallback(() => {
closeDialog(dialogName);
@@ -256,12 +219,12 @@ function AccountFormDialog({
fetchAccount.refetch();
}
if (payload.action === 'new_child') {
setFieldValue('subaccount', true);
setFieldValue('parent_account_id', payload.parentAccountId);
setFieldValue('account_type_id', payload.accountTypeId);
}
}, [fetchAccount, fetchAccountsList, fetchAccountsTypes]);
}, [payload, fetchAccount, fetchAccountsList, fetchAccountsTypes]);
// Handle account type change.
const onChangeAccountType = useCallback(
(accountType) => {
setFieldValue('account_type_id', accountType.id);
@@ -277,21 +240,11 @@ function AccountFormDialog({
[setFieldValue],
);
// Handle dialog on closed.
const onDialogClosed = useCallback(() => {
resetForm();
}, [resetForm]);
const subAccountLabel = useMemo(() => {
return (
<span>
<T id={'sub_account'} />
<Hint />
</span>
);
}, []);
const requiredSpan = useMemo(() => <span class="required">*</span>, []);
return (
<Dialog
name={dialogName}
@@ -332,18 +285,13 @@ function AccountFormDialog({
errors.account_type_id && touched.account_type_id && Intent.DANGER
}
>
<ListSelect
items={accountsTypes}
noResults={<MenuItem disabled={true} text="No results." />}
itemRenderer={accountTypeItem}
itemPredicate={filterAccountTypeItems}
popoverProps={{ minimal: true }}
onItemSelect={onChangeAccountType}
selectedItem={values.account_type_id}
selectedItemProp={'id'}
defaultText={<T id={'select_account_type'} />}
labelProp={'name'}
<AccountsTypesSelect
accountsTypes={accountsTypes}
selectedTypeId={values.account_type_id}
defaultSelectText={<T id={'select_account_type'} />}
onTypeSelected={onChangeAccountType}
buttonProps={{ disabled: payload.action === 'edit' }}
popoverProps={{ minimal: true }}
/>
</FormGroup>
@@ -384,7 +332,12 @@ function AccountFormDialog({
>
<Checkbox
inline={true}
label={subAccountLabel}
label={
<>
<T id={'sub_account'} />
<Hint />
</>
}
{...getFieldProps('subaccount')}
checked={values.subaccount}
/>
@@ -400,17 +353,11 @@ function AccountFormDialog({
)}
inline={true}
>
<ListSelect
items={filteredAccounts}
noResults={<MenuItem disabled={true} text="No results." />}
itemRenderer={accountItem}
itemPredicate={filterAccountsPredicater}
popoverProps={{ minimal: true }}
onItemSelect={onChangeSubaccount}
selectedItem={values.parent_account_id}
selectedItemProp={'id'}
defaultText={<T id={'select_parent_account'} />}
labelProp={'name'}
<AccountsSelectList
accounts={filteredAccounts}
onAccountSelected={onChangeSubaccount}
defaultSelectText={<T id={'select_parent_account'} />}
selectedAccountId={values.parent_account_id}
/>
</FormGroup>
</If>
@@ -424,7 +371,7 @@ function AccountFormDialog({
>
<TextArea
growVertically={true}
large={true}
height={280}
{...getFieldProps('description')}
/>
</FormGroup>

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

@@ -154,7 +154,7 @@ function ExpensesDataTable({
{
id: 'payment_date',
Header: formatMessage({ id: 'payment_date' }),
accessor: () => moment().format('YYYY MMM DD'),
accessor: (r) => moment(r.payment_date).format('YYYY MMM DD'),
width: 140,
className: 'payment_date',
},

2
client/src/containers/Expenses/ExpenseFooter.js
View File

@@ -12,8 +12,8 @@ export default function ExpenseFloatingFooter({
return (
<div className={'form__floating-footer'}>
<Button
intent={Intent.PRIMARY}
disabled={isSubmitting}
intent={Intent.PRIMARY}
type="submit"
onClick={() => {
onSubmitClick({ publish: true, redirect: true });

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

@@ -28,6 +28,8 @@ import Dragzone from 'components/Dragzone';
import useMedia from 'hooks/useMedia';
import { compose, repeatValue } from 'utils';
const MIN_LINES_NUMBER = 4;
function ExpenseForm({
// #withMedia
requestSubmitMedia,
@@ -81,22 +83,26 @@ function ExpenseForm({
const validationSchema = Yup.object().shape({
beneficiary: Yup.string().label(formatMessage({ id: 'beneficiary' })),
payment_account_id: Yup.string()
payment_account_id: Yup.number()
.required()
.label(formatMessage({ id: 'payment_account_' })),
payment_date: Yup.date()
.required()
.label(formatMessage({ id: 'payment_date_' })),
reference_no: Yup.string(),
currency_code: Yup.string().label(formatMessage({ id: 'currency_code' })),
reference_no: Yup.string().min(1).max(255),
currency_code: Yup.string()
.nullable()
.label(formatMessage({ id: 'currency_code' })),
description: Yup.string()
.trim()
.min(1)
.max(1024)
.label(formatMessage({ id: 'description' })),
publish: Yup.boolean().label(formatMessage({ id: 'publish' })),
categories: Yup.array().of(
Yup.object().shape({
index: Yup.number().nullable(),
amount: Yup.number().nullable(),
index: Yup.number().min(1).max(1000).nullable(),
amount: Yup.number().decimalScale(13).nullable(),
expense_account_id: Yup.number()
.nullable()
.when(['amount'], {
@@ -134,9 +140,7 @@ function ExpenseForm({
description: '',
reference_no: '',
currency_code: '',
categories: [
...repeatValue(defaultCategory, 4),
],
categories: [...repeatValue(defaultCategory, MIN_LINES_NUMBER)],
}),
[defaultCategory],
);
@@ -153,9 +157,15 @@ function ExpenseForm({
...(expense
? {
...pick(expense, Object.keys(defaultInitialValues)),
categories: expense.categories.map((category) => ({
...pick(category, Object.keys(defaultCategory)),
})),
categories: [
...expense.categories.map((category) => ({
...pick(category, Object.keys(defaultCategory)),
})),
...repeatValue(
defaultCategory,
Math.max(MIN_LINES_NUMBER - expense.categories.length, 0),
),
],
}
: {
...defaultInitialValues,
@@ -184,6 +194,20 @@ function ExpenseForm({
...initialValues,
},
onSubmit: async (values, { setSubmitting, setErrors, resetForm }) => {
setSubmitting(true);
const totalAmount = values.categories.reduce((total, item) => {
return total + item.amount;
}, 0);
if (totalAmount <= 0) {
AppToaster.show({
message: formatMessage({
id: 'amount_cannot_be_zero_or_empty',
}),
intent: Intent.DANGER,
});
return;
}
const categories = values.categories.filter(
(category) =>
category.amount && category.index && category.expense_account_id,
@@ -193,7 +217,6 @@ function ExpenseForm({
publish: payload.publish,
categories,
};
const saveExpense = (mdeiaIds) =>
new Promise((resolve, reject) => {
const requestForm = { ...form, media_ids: mdeiaIds };
@@ -237,11 +260,9 @@ function ExpenseForm({
intent: Intent.SUCCESS,
});
setSubmitting(false);
formik.resetForm();
resetForm();
saveInvokeSubmit({ action: 'new', ...payload });
clearSavedMediaIds();
// resolve(response);
})
.catch((errors) => {
setSubmitting(false);
@@ -298,11 +319,9 @@ function ExpenseForm({
const handleClearAllLines = () => {
formik.setFieldValue(
'categories',
orderingCategoriesIndex([
...repeatValue(defaultCategory, 4),
]),
);
}
orderingCategoriesIndex([...repeatValue(defaultCategory, MIN_LINES_NUMBER)]),
);
};
return (
<div className={'expense-form'}>
@@ -324,7 +343,6 @@ function ExpenseForm({
>
<TextArea
growVertically={true}
large={true}
{...formik.getFieldProps('description')}
/>
</FormGroup>

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

@@ -61,36 +61,6 @@ function ExpenseFormHeader({
}
};
// Account item of select accounts field.
const accountItem = (item, { handleClick }) => {
return (
<MenuItem
key={item.id}
text={item.name}
label={item.code}
onClick={handleClick}
/>
);
};
// Filters accounts items.
// @filter accounts predicator resauble
const filterAccountsPredicater = useCallback(
(query, account, _index, exactMatch) => {
const normalizedTitle = account.name.toLowerCase();
const normalizedQuery = query.toLowerCase();
if (exactMatch) {
return normalizedTitle === normalizedQuery;
} else {
return (
`${account.code} ${normalizedTitle}`.indexOf(normalizedQuery) >= 0
);
}
},
[],
);
// Handles change account.
const onChangeAccount = useCallback(
(account) => {
@@ -112,6 +82,12 @@ function ExpenseFormHeader({
[setFieldValue, selectedItems],
);
// Filter payment accounts.
const paymentAccounts = useMemo(
() => accountsList.filter(a => a?.type?.key === 'current_asset'),
[accountsList],
);
return (
<div className={'dashboard__insider--expense-form__header'}>
<Row>
@@ -165,7 +141,7 @@ function ExpenseFormHeader({
}
>
<AccountsSelectList
accounts={accountsList}
accounts={paymentAccounts}
onAccountSelected={onChangeAccount}
defaultSelectText={<T id={'select_payment_account'} />}
selectedAccountId={values.payment_account_id}

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

@@ -14,7 +14,6 @@ import {
} from 'components/DataTableCells';
import withAccounts from 'containers/Accounts/withAccounts';
const ExpenseCategoryHeaderCell = () => {
return (
<>
@@ -22,10 +21,10 @@ const ExpenseCategoryHeaderCell = () => {
<Hint />
</>
);
}
};
// Actions cell renderer.
const ActionsCellRenderer = ({
// Actions cell renderer.
const ActionsCellRenderer = ({
row: { index },
column: { id },
cell: { value: initialValue },
@@ -101,16 +100,11 @@ function ExpenseTable({
const { formatMessage } = useIntl();
useEffect(() => {
setRows([
...categories.map((e) => ({ ...e, rowType: 'editor' })),
]);
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],
);
const tableRows = useMemo(() => [...rows, { rowType: 'total' }], [rows]);
// Memorized data table columns.
const columns = useMemo(
@@ -133,6 +127,7 @@ function ExpenseTable({
disableSortBy: true,
disableResizing: true,
width: 250,
accountsDataProp: 'expenseAccounts',
},
{
Header: formatMessage({ id: 'amount_currency' }, { currency: 'USD' }),
@@ -187,6 +182,11 @@ function ExpenseTable({
// Handles click remove datatable row.
const handleRemoveRow = useCallback(
(rowIndex) => {
// Can't continue if there is just one row line or less.
if (rows.length <= 1) {
return;
}
const removeIndex = parseInt(rowIndex, 10);
const newRows = rows.filter((row, index) => index !== removeIndex);
@@ -220,6 +220,12 @@ function ExpenseTable({
[rows],
);
// Filter expense accounts.
const expenseAccounts = useMemo(
() => accountsList.filter((a) => a?.type?.root_type === 'expense'),
[accountsList],
);
return (
<div className={'dashboard__insider--expense-form__table'}>
<DataTable
@@ -229,6 +235,7 @@ function ExpenseTable({
sticky={true}
payload={{
accounts: accountsList,
expenseAccounts,
errors: errors.categories || [],
updateData: handleUpdateData,
removeRow: handleRemoveRow,

3
client/src/containers/Expenses/ExpensesList.js
View File

@@ -109,7 +109,7 @@ function ExpensesList({
.then(() => {
AppToaster.show({
message: formatMessage(
{ id: 'the_expenses_has_been_successfully_deleted' },
{ id: 'the_expenses_have_been_successfully_deleted' },
{ count: selectedRowsCount },
),
intent: Intent.SUCCESS,
@@ -160,6 +160,7 @@ function ExpensesList({
requestPublishExpense(expense.id).then(() => {
AppToaster.show({
message: formatMessage({ id: 'the_expense_id_has_been_published' }),
intent: Intent.SUCCESS,
});
});
fetchExpenses.refetch();

2
client/src/containers/Expenses/withExpenseDetail.js
View File

@@ -5,7 +5,7 @@ export default () => {
const getExpenseById = getExpenseByIdFactory();
const mapStateToProps = (state, props) => ({
expenseDetail: getExpenseById(state, props),
expense: getExpenseById(state, props),
});
return connect(mapStateToProps);
};

14
client/src/lang/en/index.js
View File

@@ -436,11 +436,10 @@ export default {
'The expense #{number} has been successfully edited.',
the_expense_has_been_successfully_deleted:
'The expense has been successfully deleted',
the_expenses_has_been_successfully_deleted:
'The expenses has been successfully deleted',
the_expenses_have_been_successfully_deleted:
'The expenses #{number} have been successfully deleted',
once_delete_these_expenses_you_will_not_able_restore_them:
"Once you delete these expenses, you won't be able to retrieve them later. Are you sure you want to delete them?",
the_expense_id_has_been_published: 'The expense id has been published',
select_beneficiary_account: 'Select Beneficiary Account',
total_amount_equals_zero: 'Total amount equals zero',
@@ -529,4 +528,13 @@ export default {
logic_expression: 'logic expression',
assign_to_customer: 'Assign to Customer',
inactive: 'Inactive',
should_select_customers_with_entries_have_receivable_account: 'Should select customers with entries that have receivable account.',
should_select_vendors_with_entries_have_payable_account: 'Should select vendors with entries that have payable account.',
vendors_should_selected_with_payable_account_only: 'Vendors contacts should selected with payable account only.',
customers_should_selected_with_receivable_account_only: 'Customers contacts should selected with receivable account only.',
amount_cannot_be_zero_or_empty: 'Amount cannot be zero or empty.',
should_total_of_credit_and_debit_be_equal: 'Should total of credit and debit be equal.',
no_accounts: 'No Accounts',
the_accounts_have_been_successfully_inactivated: 'The accounts have been successfully inactivated.',
account_code_is_not_unique: 'Account code is not unqiue.'
};

23
client/src/services/yup.js Normal file
View File

@@ -0,0 +1,23 @@
import * as Yup from 'yup';
Yup.addMethod(Yup.string, 'digits', function () {
return this.test(
'is-digits',
'${path} should be digits only.',
value => /^(0|[1-9]\d*)$/.test(value),
);
});
Yup.addMethod(Yup.number, 'decimalScale', function(scale) {
return this.test(
'numeric-length',
'${path} should decimal length ',
(value) => {
const reg = new RegExp(/^(?:\d{1,13}|(?!.{15})\d+\.\d+)$/);
return reg.test(value);
},
);
})
export default Yup;

4
client/src/store/accounts/accounts.actions.js
View File

@@ -262,7 +262,9 @@ export const fetchAccount = ({ id }) => {
.then((response) => {
dispatch({
type: t.ACCOUNT_SET,
account: response.data.account,
payload: {
account: response.data.account,
}
});
resolve(response);
})

6
client/src/store/accounts/accounts.reducer.js
View File

@@ -51,7 +51,11 @@ const accountsReducer = createReducer(initialState, {
},
[t.ACCOUNT_SET]: (state, action) => {
state.accountsById[action.account.id] = action.account;
const { account } = action.payload;
state.items[account.id] = {
...(state.items[account.id] || {}),
...account,
};
},
[t.ACCOUNT_DELETE]: (state, action) => {

2
client/src/store/expenses/expenses.reducer.js
View File

@@ -8,7 +8,7 @@ const initialState = {
views: {},
loading: false,
tableQuery: {
page_size: 4,
page_size: 12,
page: 1,
},
currentViewId: -1,

3
client/src/style/objects/form.scss
View File

@@ -7,8 +7,7 @@ $form-check-input-indeterminate-bg-image: url("data:image/svg+xml,<svg xmlns='ht
&__floating-footer{
position: fixed;
bottom: 0;
left: 220px;
right: 0;
width: 100%;
background: #fff;
padding: 14px 18px;
border-top: 1px solid #ececec;

22
client/src/style/pages/accounts-chart.scss
View File

@@ -18,6 +18,7 @@
.account_name{
> div{
width: 100%;
font-weight: 500;
}
.bp3-popover-wrapper--inactive-semafro{
@@ -78,14 +79,14 @@
&.form-group--description{
.bp3-form-content{
width: 280px;
width: 280px;
}
textarea{
min-width: 100%;
max-width: 100%;
width: 100%;
max-height: 120px;
}
textarea{
min-width: 100%;
max-width: 100%;
width: 100%;
min-height: 60px;
}
}
}
@@ -105,6 +106,11 @@
top: -2px;
margin-left: 2px;
}
}
}
.form-group--description{
textarea{
padding: 6px;
}
}
}
}

6
client/src/style/pages/dashboard.scss
View File

@@ -6,7 +6,7 @@
&:before{
content: "";
height: 2px;
height: 1px;
background: #01194e;
position: fixed;
top: 0;
@@ -203,6 +203,7 @@
align-items: center;
margin-left: 1rem;
}
&__title{
align-items: center;;
display: flex;
@@ -243,6 +244,9 @@
&__subtitle{
}
&__insider{
margin-bottom: 40px;
}
&-content{
display: flex;

21
client/src/style/pages/expense-form.scss
View File

@@ -102,19 +102,16 @@
}
}
.tr {
.bp3-input,
.bp3-form-group .bp3-input,
.form-group--select-list .bp3-button {
border-color: #e5e5e5;
border-radius: 3px;
padding-left: 8px;
padding-right: 8px;
}
.form-group--select-list {
&.bp3-intent-danger {
.bp3-button:not(.bp3-minimal) {
border-color: #efa8a8;
}
}
.bp3-form-group:not(.bp3-intent-danger) .bp3-input,
.form-group--select-list:not(.bp3-intent-danger) .bp3-button {
border-color: #E5E5E5;
}
&:last-of-type {
@@ -155,6 +152,12 @@
.td {
border-bottom: 1px dotted #999;
&.description{
.bp3-form-group{
width: 100%;
}
}
}
.actions.td {
@@ -217,7 +220,7 @@
font-weight: 600;
}
.description{
.td.description{
.bp3-icon{
color: #666;
}

15
client/src/style/pages/make-journal-entries.scss
View File

@@ -1,6 +1,6 @@
.make-journal-entries{
padding-bottom: 80px;
padding-bottom: 20px;
display: flex;
flex-direction: column;
@@ -73,7 +73,7 @@
}
}
.tr{
.bp3-input,
.bp3-form-group:not(.bp3-intent-danger) .bp3-input,
.form-group--select-list .bp3-button{
border-color: #E5E5E5;
border-radius: 3px;
@@ -84,13 +84,12 @@
.form-group--select-list{
&.bp3-intent-danger{
.bp3-button:not(.bp3-minimal){
border-color: #efa8a8;
border-color: #db3737;
}
}
}
&:last-of-type{
.td{
border-bottom: transparent;
@@ -129,6 +128,14 @@
}
}
}
.td{
&.note{
.bp3-form-group{
width: 100%;
}
}
}
}
}
.th{