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

Merge remote-tracking branch 'origin/feature/exchange_rates'

Browse Source
This commit is contained in:
Ahmed Bouhuolia
2020-05-12 01:10:11 +02:00
parent e56a50c3ff 98edc66dd2
commit 4ab85eaf09
62 changed files with 2587 additions and 1155 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -8,12 +8,13 @@ import {
TextArea,
MenuItem,
Checkbox,
Position
Position,
} from '@blueprintjs/core';
import { Select } from '@blueprintjs/select';
import * as Yup from 'yup';
import { useFormik } from 'formik';
import { useIntl } from 'react-intl';
import { FormattedMessage as T, useIntl } from 'react-intl';
import { omit } from 'lodash';
import { useQuery, queryCache } from 'react-query';
@@ -27,7 +28,6 @@ import Icon from 'components/Icon';
import ErrorMessage from 'components/ErrorMessage';
import { fetchAccountTypes } from 'store/accounts/accounts.actions';
function AccountFormDialog({
name,
payload,
@@ -60,22 +60,26 @@ function AccountFormDialog({
description: Yup.string().trim()
});
const initialValues = useMemo(() => ({
account_type_id: null,
name: '',
description: '',
}), []);
const initialValues = useMemo(
() => ({
account_type_id: null,
name: '',
description: '',
}),
[]
);
const [selectedAccountType, setSelectedAccountType] = useState(null);
const [selectedSubaccount, setSelectedSubaccount] = useState(
payload.action === 'new_child' ?
accounts.find(a => a.id === payload.id) : null,
payload.action === 'new_child'
? accounts.find((a) => a.id === payload.id)
: null
);
const transformApiErrors = (errors) => {
const fields = {};
if (errors.find(e => e.type === 'NOT_UNIQUE_CODE')) {
fields.code = 'Account code is not unqiue.'
if (errors.find((e) => e.type === 'NOT_UNIQUE_CODE')) {
fields.code = 'Account code is not unqiue.';
}
return fields;
};
@@ -84,7 +88,7 @@ function AccountFormDialog({
const formik = useFormik({
enableReinitialize: true,
initialValues: {
...(payload.action === 'edit' && account) ? account : initialValues,
...(payload.action === 'edit' && account ? account : initialValues),
},
validationSchema: accountFormValidationSchema,
onSubmit: (values, { setSubmitting, setErrors }) => {
@@ -106,11 +110,6 @@ function AccountFormDialog({
}),
intent: Intent.SUCCESS,
});
setSubmitting(false);
queryCache.refetchQueries('accounts-table', { force: true });
}).catch((errors) => {
setSubmitting(false);
setErrors(transformApiErrors(errors));
});
} else {
requestSubmitAccount({ form: { ...omit(values, exclude) } }).then((response) => {
@@ -125,22 +124,18 @@ function AccountFormDialog({
intent: Intent.SUCCESS,
position: Position.BOTTOM,
});
setSubmitting(false);
queryCache.refetchQueries('accounts-table', { force: true });
}).catch((errors) => {
setSubmitting(false);
setErrors(transformApiErrors(errors));
});
}
}
},
});
const { errors, values, touched } = useMemo(() => (formik), [formik]);
const { errors, values, touched } = useMemo(() => formik, [formik]);
// Set default account type.
useEffect(() => {
if (account && account.account_type_id) {
const defaultType = accountsTypes.find((t) =>
t.id === account.account_type_id);
const defaultType = accountsTypes.find(
(t) => t.id === account.account_type_id
);
defaultType && setSelectedAccountType(defaultType);
}
@@ -166,44 +161,64 @@ function AccountFormDialog({
// 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} />
<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();
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;
}
}, []);
if (exactMatch) {
return normalizedTitle === normalizedQuery;
} else {
return (
`${account.code} ${normalizedTitle}`.indexOf(normalizedQuery) >= 0
);
}
},
[]
);
// Handles dialog close.
const handleClose = useCallback(() => { closeDialog(name); }, [closeDialog, name]);
const handleClose = useCallback(() => {
closeDialog(name);
}, [closeDialog, name]);
// Fetches accounts list.
const fetchAccountsList = useQuery('accounts-list',
() => requestFetchAccounts(), { manual: true });
const fetchAccountsList = useQuery(
'accounts-list',
() => requestFetchAccounts(),
{ manual: true }
);
// Fetches accounts types.
const fetchAccountsTypes = useQuery('accounts-types-list', async () => {
await requestFetchAccountTypes();
}, { manual: true });
const fetchAccountsTypes = useQuery(
'accounts-types-list',
async () => {
await requestFetchAccountTypes();
},
{ manual: true }
);
// Fetch the given account id on edit mode.
const fetchAccount = useQuery(
payload.action === 'edit' && ['account', payload.id],
(key, id) => requestFetchAccount(id),
{ manual: true });
{ manual: true }
);
const isFetching = (
fetchAccountsList.isFetching ||
fetchAccountTypes.isFetching ||
fetchAccount.isFetching);
const isFetching =
fetchAccountsList.isFetching ||
fetchAccountTypes.isFetching ||
fetchAccount.isFetching;
// Fetch requests on dialog opening.
const onDialogOpening = useCallback(() => {
@@ -212,16 +227,22 @@ function AccountFormDialog({
fetchAccount.refetch();
}, []);
const onChangeAccountType = useCallback((accountType) => {
setSelectedAccountType(accountType);
formik.setFieldValue('account_type_id', accountType.id);
}, [setSelectedAccountType, formik]);
const onChangeAccountType = useCallback(
(accountType) => {
setSelectedAccountType(accountType);
formik.setFieldValue('account_type_id', accountType.id);
},
[setSelectedAccountType, formik]
);
// Handles change sub-account.
const onChangeSubaccount = useCallback((account) => {
setSelectedSubaccount(account);
formik.setFieldValue('parent_account_id', account.id);
}, [setSelectedSubaccount, formik]);
const onChangeSubaccount = useCallback(
(account) => {
setSelectedSubaccount(account);
formik.setFieldValue('parent_account_id', account.id);
},
[setSelectedSubaccount, formik]
);
const onDialogClosed = useCallback(() => {
formik.resetForm();
@@ -229,21 +250,25 @@ function AccountFormDialog({
setSelectedAccountType(null);
}, [formik]);
const infoIcon = useMemo(() => (<Icon icon="info-circle" iconSize={12} />), []);
const infoIcon = useMemo(() => <Icon icon='info-circle' iconSize={12} />, []);
const subAccountLabel = useMemo(() => {
return (<span>{'Sub account?'} <Icon icon="info-circle" iconSize={12} /></span>);
return (
<span>
<T id={'sub_account'}/> <Icon icon='info-circle' iconSize={12} />
</span>
);
}, []);
const requiredSpan = useMemo(() => (<span class="required">*</span>), []);
const requiredSpan = useMemo(() => <span class='required'>*</span>, []);
return (
<Dialog
name={name}
title={payload.action === 'edit' ? 'Edit Account' : 'New Account'}
title={payload.action === 'edit' ? <T id={'edit_account'}/> : <T id={'new_account'}/>}
className={{
'dialog--loading': isFetching,
'dialog--account-form': true
'dialog--account-form': true,
}}
autoFocus={true}
canEscapeKeyClose={true}
@@ -256,15 +281,18 @@ function AccountFormDialog({
<form onSubmit={formik.handleSubmit}>
<div className={Classes.DIALOG_BODY}>
<FormGroup
label={'Account Type'}
label={<T id={'account_type'}/>}
labelInfo={requiredSpan}
className={classNames(
'form-group--account-type',
'form-group--select-list',
Classes.FILL)}
Classes.FILL
)}
inline={true}
helperText={<ErrorMessage name="account_type_id" {...formik} />}
intent={(errors.account_type_id && touched.account_type_id) && Intent.DANGER}
helperText={<ErrorMessage name='account_type_id' {...formik} />}
intent={
errors.account_type_id && touched.account_type_id && Intent.DANGER
}
>
<Select
items={accountsTypes}
@@ -275,40 +303,38 @@ function AccountFormDialog({
onItemSelect={onChangeAccountType}
>
<Button
rightIcon='caret-down'
text={selectedAccountType ?
selectedAccountType.name : 'Select account type'}
text={selectedAccountType ? selectedAccountType.name : <T id={'select_account_type'} />}
disabled={payload.action === 'edit'}
/>
</Select>
</FormGroup>
<FormGroup
label={'Account Name'}
label={<T id={'account_name'}/>}
labelInfo={requiredSpan}
className={'form-group--account-name'}
intent={(errors.name && touched.name) && Intent.DANGER}
helperText={<ErrorMessage name="name" {...formik} />}
intent={errors.name && touched.name && Intent.DANGER}
helperText={<ErrorMessage name='name' {...formik} />}
inline={true}
>
<InputGroup
medium={true}
intent={(errors.name && touched.name) && Intent.DANGER}
intent={errors.name && touched.name && Intent.DANGER}
{...formik.getFieldProps('name')}
/>
</FormGroup>
<FormGroup
label={'Account Code'}
label={<T id={'account_code'}/>}
className={'form-group--account-code'}
intent={(errors.code && touched.code) && Intent.DANGER}
helperText={<ErrorMessage name="code" {...formik} />}
intent={errors.code && touched.code && Intent.DANGER}
helperText={<ErrorMessage name='code' {...formik} />}
inline={true}
labelInfo={infoIcon}
>
<InputGroup
medium={true}
intent={(errors.code && touched.code) && Intent.DANGER}
intent={errors.code && touched.code && Intent.DANGER}
{...formik.getFieldProps('code')}
/>
</FormGroup>
@@ -327,11 +353,12 @@ function AccountFormDialog({
{values.subaccount && (
<FormGroup
label={'Parent Account'}
label={<T id={'parent_account'}/>}
className={classNames(
'form-group--parent-account',
'form-group--select-list',
Classes.FILL)}
Classes.FILL
)}
inline={true}
>
<Select
@@ -346,7 +373,9 @@ function AccountFormDialog({
<Button
rightIcon='caret-down'
text={
selectedSubaccount ? selectedSubaccount.name : 'Select Parent Account'
selectedSubaccount
? selectedSubaccount.name
: 'Select Parent Account'
}
/>
</Select>
@@ -354,7 +383,7 @@ function AccountFormDialog({
)}
<FormGroup
label={'Description'}
label={<T id={'description'}/>}
className={'form-group--description'}
intent={formik.errors.description && Intent.DANGER}
helperText={formik.errors.description && formik.errors.credential}
@@ -370,9 +399,13 @@ function AccountFormDialog({
<div className={Classes.DIALOG_FOOTER}>
<div className={Classes.DIALOG_FOOTER_ACTIONS}>
<Button onClick={handleClose}>Close</Button>
<Button intent={Intent.PRIMARY} disabled={formik.isSubmitting} type='submit'>
{payload.action === 'edit' ? 'Edit' : 'Submit'}
<Button onClick={handleClose}><T id={'close'}/></Button>
<Button
intent={Intent.PRIMARY}
disabled={formik.isSubmitting}
type='submit'
>
{payload.action === 'edit' ? <T id={'edit'}/> : <T id={'submit'}/>}
</Button>
</div>
</div>
@@ -381,6 +414,4 @@ function AccountFormDialog({
);
}
export default AccountFormDialogContainer(
AccountFormDialog,
);
export default AccountFormDialogContainer(AccountFormDialog);