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

feat : Cash flow transaction type.

Browse Source
This commit is contained in:
elforjani13
2021-10-17 18:00:40 +02:00
parent 2078b6bc99
commit c148e2976a
33 changed files with 1273 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/containers/Dialogs/MoneyOutDialog/MoneyOutDialogContent.js
View File

@@ -1,7 +1,6 @@
import React from 'react';
import { MoneyOutProvider } from './MoneyOutProvider';
import OwnerDrawingsForm from './OwnerDrawings/OwnerDrawingsForm';
import MoneyOutDialogForm from './MoneyOutDialogForm';
/**
* Money out dailog content.
@@ -14,7 +13,7 @@ export default function MoneyOutDialogContent({
}) {
return (
<MoneyOutProvider accountId={accountId} dialogName={dialogName}>
<OwnerDrawingsForm />
<MoneyOutDialogForm accountType={accountType} />
</MoneyOutProvider>
);
}

24
src/containers/Dialogs/MoneyOutDialog/MoneyOutDialogForm.js Normal file
View File

@@ -0,0 +1,24 @@
import React from 'react';
import OwnerDrawingsForm from './OwnerDrawings/OwnerDrawingsForm';
import OtherExpenseForm from './OtherExpense/OtherExpenseForm';
import TransferToAccountForm from './TransferToAccount/TransferToAccountForm';
export default function MoneyOutDialogForm({ accountType }) {
// Handle from transaction.
const handleFromTransaction = () => {
switch (accountType) {
case 'ONWERS_DRAWING':
return <OwnerDrawingsForm />;
case 'OTHER_EXPENSE':
return <OtherExpenseForm />;
case 'TRANSFER_TO_ACCOUNT':
return <TransferToAccountForm />;
default:
break;
}
};
return <React.Fragment>{handleFromTransaction()}</React.Fragment>;
}

12
src/containers/Dialogs/MoneyOutDialog/MoneyOutProvider.js
View File

@@ -1,6 +1,6 @@
import React from 'react';
import { DialogContent } from 'components';
import { useAccounts } from 'hooks/query';
import { useAccounts, useCreateCashflowTransaction } from 'hooks/query';
const MoneyInDialogContent = React.createContext();
@@ -9,7 +9,14 @@ const MoneyInDialogContent = React.createContext();
*/
function MoneyOutProvider({ accountId, dialogName, ...props }) {
// Fetches accounts list.
const { isFetching: isAccountsLoading, data: accounts } = useAccounts();
const {
isFetching: isAccountFetching,
isLoading: isAccountsLoading,
data: accounts,
} = useAccounts();
const { mutateAsync: createCashflowTransactionMutate } =
useCreateCashflowTransaction();
// Submit payload.
const [submitPayload, setSubmitPayload] = React.useState({});
@@ -23,6 +30,7 @@ function MoneyOutProvider({ accountId, dialogName, ...props }) {
submitPayload,
dialogName,
createCashflowTransactionMutate,
setSubmitPayload,
};

76
src/containers/Dialogs/MoneyOutDialog/OtherExpense/OtherExpenseFloatingActions.js Normal file
View File

@@ -0,0 +1,76 @@
import React from 'react';
import { Intent, Button, Classes } from '@blueprintjs/core';
import { useFormikContext } from 'formik';
import { FormattedMessage as T } from 'components';
import { useMoneyOutDialogContext } from '../MoneyOutProvider';
import withDialogActions from 'containers/Dialog/withDialogActions';
import { compose } from 'utils';
/**
* Other expense floating actions.
*/
function OtherExpenseFloatingActions({
// #withDialogActions
closeDialog,
}) {
// Formik context.
const { isSubmitting, submitForm } = useFormikContext();
// money in dialog context.
const { dialogName, setSubmitPayload, submitPayload } =
useMoneyOutDialogContext();
// handle submit as draft button click.
const handleSubmitDraftBtnClick = (event) => {
setSubmitPayload({ publish: false });
submitForm();
};
// Handle submit button click.
const handleSubmittBtnClick = (event) => {
setSubmitPayload({ publish: true });
submitForm();
};
// Handle close button click.
const handleCloseBtnClick = (event) => {
closeDialog(dialogName);
};
return (
<div className={Classes.DIALOG_FOOTER}>
<div className={Classes.DIALOG_FOOTER_ACTIONS}>
<Button
disabled={isSubmitting}
onClick={handleCloseBtnClick}
style={{ minWidth: '75px' }}
>
<T id={'close'} />
</Button>
<Button
disabled={isSubmitting}
loading={isSubmitting && !submitPayload.publish}
style={{ minWidth: '75px' }}
type="submit"
onClick={handleSubmitDraftBtnClick}
>
{<T id={'save_as_draft'} />}
</Button>
<Button
intent={Intent.PRIMARY}
disabled={isSubmitting}
loading={isSubmitting && submitPayload.publish}
style={{ minWidth: '75px' }}
type="submit"
onClick={handleSubmittBtnClick}
>
{<T id={'save_and_publish'} />}
</Button>
</div>
</div>
);
}
export default compose(withDialogActions)(OtherExpenseFloatingActions);

92
src/containers/Dialogs/MoneyOutDialog/OtherExpense/OtherExpenseForm.js Normal file
View File

@@ -0,0 +1,92 @@
import React from 'react';
import moment from 'moment';
import { Intent } from '@blueprintjs/core';
import { Formik } from 'formik';
import { omit } from 'lodash';
import intl from 'react-intl-universal';
import 'style/pages/CashFlow/CashflowTransactionForm.scss';
import { AppToaster } from 'components';
import { CreateOtherExpenseFormSchema } from './OtherExpenseForm.schema';
import OtherExpenseFormContent from './OtherExpenseFormContent';
import { useMoneyOutDialogContext } from '../MoneyOutProvider';
import withDialogActions from 'containers/Dialog/withDialogActions';
import withCurrentOrganization from 'containers/Organization/withCurrentOrganization';
import { compose } from 'utils';
const defaultInitialValues = {
date: moment(new Date()).format('YYYY-MM-DD'),
amount: '',
transaction_number: '',
transaction_type: 'other_expense',
reference_no: '',
cashflow_account_id: '',
credit_account_id: '',
description: '',
published: '',
};
/**
* Other expense form.
*/
function OtherExpenseForm({
// #withDialogActions
closeDialog,
// #withCurrentOrganization
organization: { base_currency },
}) {
const {
dialogName,
accountId,
createCashflowTransactionMutate,
submitPayload,
} = useMoneyOutDialogContext();
// Initial form values.
const initialValues = {
...defaultInitialValues,
currency_code: base_currency,
cashflow_account_id: accountId,
};
// Handles the form submit.
const handleFormSubmit = (values, { setSubmitting, setErrors }) => {
const form = {
...omit(values, ['currency_code']),
published: submitPayload.publish,
};
setSubmitting(true);
createCashflowTransactionMutate(form)
.then(() => {
closeDialog(dialogName);
AppToaster.show({
message: intl.get('cash_flow_transaction_success_message'),
intent: Intent.SUCCESS,
});
})
.finally(() => {
setSubmitting(true);
});
};
return (
<Formik
validationSchema={CreateOtherExpenseFormSchema}
initialValues={initialValues}
onSubmit={handleFormSubmit}
>
<OtherExpenseFormContent />
</Formik>
);
}
export default compose(
withDialogActions,
withCurrentOrganization(),
)(OtherExpenseForm);

22
src/containers/Dialogs/MoneyOutDialog/OtherExpense/OtherExpenseForm.schema.js Normal file
View File

@@ -0,0 +1,22 @@
import * as Yup from 'yup';
import intl from 'react-intl-universal';
import { DATATYPES_LENGTH } from 'common/dataTypes';
const Schema = Yup.object().shape({
date: Yup.date().required().label(intl.get('date')),
amount: Yup.number().required().label(intl.get('amount')),
transaction_number: Yup.string(),
transaction_type: Yup.string().required(),
reference_no: Yup.string(),
credit_account_id: Yup.number()
.required()
.label(intl.get('other_expense_account')),
cashflow_account_id: Yup.string().required(),
description: Yup.string()
.min(3)
.max(DATATYPES_LENGTH.TEXT)
.label(intl.get('description')),
published: Yup.boolean(),
});
export const CreateOtherExpenseFormSchema = Schema;

17
src/containers/Dialogs/MoneyOutDialog/OtherExpense/OtherExpenseFormContent.js Normal file
View File

@@ -0,0 +1,17 @@
import React from 'react';
import { Form } from 'formik';
import OtherExpnseFormFields from './OtherExpnseFormFields';
import OtherExpenseFloatingActions from './OtherExpenseFloatingActions';
/**
* Other expense form content.
*/
export default function OtherExpenseFormContent() {
return (
<Form>
<OtherExpnseFormFields />
<OtherExpenseFloatingActions />
</Form>
);
}

195
src/containers/Dialogs/MoneyOutDialog/OtherExpense/OtherExpnseFormFields.js Normal file
View File

@@ -0,0 +1,195 @@
import React from 'react';
import { FastField, ErrorMessage } from 'formik';
import {
Classes,
FormGroup,
InputGroup,
TextArea,
Position,
ControlGroup,
} from '@blueprintjs/core';
import classNames from 'classnames';
import {
FormattedMessage as T,
AccountsSuggestField,
InputPrependText,
MoneyInputGroup,
FieldRequiredHint,
Col,
Row,
} from 'components';
import { DateInput } from '@blueprintjs/datetime';
import { useAutofocus } from 'hooks';
import { ACCOUNT_TYPE } from 'common/accountTypes';
import {
inputIntent,
momentFormatter,
tansformDateValue,
handleDateChange,
} from 'utils';
import { CLASSES } from 'common/classes';
import { useMoneyOutDialogContext } from '../MoneyOutProvider';
/**
* Other expense form fields.
*/
function OtherExpnseFormFields() {
// Money in dialog context.
const { accounts } = useMoneyOutDialogContext();
const amountFieldRef = useAutofocus();
return (
<div className={Classes.DIALOG_BODY}>
<Row>
<Col xs={5}>
{/*------------ Date -----------*/}
<FastField name={'date'}>
{({ form, field: { value }, meta: { error, touched } }) => (
<FormGroup
label={<T id={'date'} />}
labelInfo={<FieldRequiredHint />}
intent={inputIntent({ error, touched })}
helperText={<ErrorMessage name="date" />}
minimal={true}
className={classNames(CLASSES.FILL, 'form-group--date')}
>
<DateInput
{...momentFormatter('YYYY/MM/DD')}
onChange={handleDateChange((formattedDate) => {
form.setFieldValue('date', formattedDate);
})}
value={tansformDateValue(value)}
popoverProps={{
position: Position.BOTTOM,
minimal: true,
}}
intent={inputIntent({ error, touched })}
/>
</FormGroup>
)}
</FastField>
</Col>
<Col xs={5}>
{/*------------ Transaction number -----------*/}
<FastField name={'transaction_number'}>
{({ form, field, meta: { error, touched } }) => (
<FormGroup
label={<T id={'transaction_number'} />}
intent={inputIntent({ error, touched })}
helperText={<ErrorMessage name="transaction_number" />}
className={'form-group--transaction_number'}
>
<InputGroup
intent={inputIntent({ error, touched })}
{...field}
/>
</FormGroup>
)}
</FastField>
</Col>
</Row>
{/*------------ amount -----------*/}
<FastField name={'amount'}>
{({
form: { values, setFieldValue },
field: { value },
meta: { error, touched },
}) => (
<FormGroup
label={<T id={'amount'} />}
labelInfo={<FieldRequiredHint />}
intent={inputIntent({ error, touched })}
helperText={<ErrorMessage name="amount" />}
className={'form-group--amount'}
>
<ControlGroup>
<InputPrependText text={values.currency_code} />
<MoneyInputGroup
value={value}
minimal={true}
onChange={(amount) => {
setFieldValue('amount', amount);
}}
inputRef={(ref) => (amountFieldRef.current = ref)}
intent={inputIntent({ error, touched })}
/>
</ControlGroup>
</FormGroup>
)}
</FastField>
<Row>
<Col xs={5}>
{/*------------ other expense account -----------*/}
<FastField name={'credit_account_id'}>
{({ form, field, meta: { error, touched } }) => (
<FormGroup
label={<T id={'cash_flow_transaction.label_expense_account'} />}
labelInfo={<FieldRequiredHint />}
intent={inputIntent({ error, touched })}
helperText={<ErrorMessage name="credit_account_id" />}
className={'form-group--credit_account_id'}
>
<AccountsSuggestField
accounts={accounts}
onAccountSelected={({ id }) =>
form.setFieldValue('credit_account_id', id)
}
filterByTypes={[
ACCOUNT_TYPE.EXPENSE,
ACCOUNT_TYPE.OTHER_EXPENSE,
]}
inputProps={{
intent: inputIntent({ error, touched }),
}}
/>
</FormGroup>
)}
</FastField>
</Col>
<Col xs={5}>
{/*------------ Reference -----------*/}
<FastField name={'reference_no'}>
{({ form, field, meta: { error, touched } }) => (
<FormGroup
label={<T id={'reference_no'} />}
intent={inputIntent({ error, touched })}
helperText={<ErrorMessage name="reference_no" />}
className={'form-group--reference-no'}
>
<InputGroup
intent={inputIntent({ error, touched })}
{...field}
/>
</FormGroup>
)}
</FastField>
</Col>
</Row>
{/*------------ description -----------*/}
<FastField name={'description'}>
{({ field, meta: { error, touched } }) => (
<FormGroup
label={<T id={'description'} />}
className={'form-group--description'}
intent={inputIntent({ error, touched })}
helperText={<ErrorMessage name={'description'} />}
>
<TextArea
growVertically={true}
large={true}
intent={inputIntent({ error, touched })}
{...field}
/>
</FormGroup>
)}
</FastField>
</div>
);
}
export default OtherExpnseFormFields;

2
src/containers/Dialogs/MoneyOutDialog/OwnerDrawings/OwnerDrawingsFloatingActions.js
View File

@@ -9,7 +9,7 @@ import withDialogActions from 'containers/Dialog/withDialogActions';
import { compose } from 'utils';
/**
* Owner drawingsfloating actions.
* Owner drawings floating actions.
*/
function OwnerDrawingsFloatingActions({
// #withDialogActions

31
src/containers/Dialogs/MoneyOutDialog/OwnerDrawings/OwnerDrawingsForm.js
View File

@@ -2,9 +2,10 @@ import React from 'react';
import moment from 'moment';
import { Intent } from '@blueprintjs/core';
import { Formik } from 'formik';
import { omit } from 'lodash';
import intl from 'react-intl-universal';
// styles
import 'style/pages/CashFlow/CashflowTransactionForm.scss';
import { AppToaster } from 'components';
import { CreateOwnerDrawingsFormSchema } from './OwnerDrawingsForm.schema';
@@ -21,9 +22,10 @@ const defaultInitialValues = {
date: moment(new Date()).format('YYYY-MM-DD'),
amount: '',
transaction_number: '',
transaction_type: 'onwers_drawing',
reference_no: '',
equity_account_id: '',
account_id: '',
cashflow_account_id: '',
credit_account_id: '',
description: '',
published: '',
};
@@ -38,21 +40,38 @@ function OwnerDrawingsForm({
// #withCurrentOrganization
organization: { base_currency },
}) {
const { accountId, submitPayload } = useMoneyOutDialogContext();
const {
dialogName,
accountId,
submitPayload,
createCashflowTransactionMutate,
} = useMoneyOutDialogContext();
// Initial form values.
const initialValues = {
...defaultInitialValues,
currency_code: base_currency,
account_id: accountId,
cashflow_account_id: accountId,
};
// Handles the form submit.
const handleFormSubmit = (values, { setSubmitting, setErrors }) => {
const form = {
...values,
...omit(values, ['currency_code']),
published: submitPayload.publish,
};
setSubmitting(true);
createCashflowTransactionMutate(form)
.then(() => {
closeDialog(dialogName);
AppToaster.show({
message: intl.get('cash_flow_transaction_success_message'),
intent: Intent.SUCCESS,
});
})
.finally(() => {
setSubmitting(true);
});
};
return (

5
src/containers/Dialogs/MoneyOutDialog/OwnerDrawings/OwnerDrawingsForm.schema.js
View File

@@ -6,11 +6,12 @@ const Schema = Yup.object().shape({
date: Yup.date().required().label(intl.get('date')),
amount: Yup.number().required().label(intl.get('amount')),
transaction_number: Yup.string(),
transaction_type: Yup.string().required(),
reference_no: Yup.string(),
account_id: Yup.number().required(),
equity_account_id: Yup.string()
credit_account_id: Yup.number()
.required()
.label(intl.get('cash_flow_transaction.label_equity_account')),
cashflow_account_id: Yup.string().required(),
description: Yup.string()
.min(3)
.max(DATATYPES_LENGTH.TEXT)

22
src/containers/Dialogs/MoneyOutDialog/OwnerDrawings/OwnerDrawingsFormFields.js
View File

@@ -1,5 +1,5 @@
import React from 'react';
import { FastField, ErrorMessage } from 'formik';
import { FastField, Field, ErrorMessage } from 'formik';
import {
Classes,
FormGroup,
@@ -14,11 +14,13 @@ import {
AccountsSuggestField,
InputPrependText,
MoneyInputGroup,
FieldRequiredHint,
Col,
Row,
} from 'components';
import { DateInput } from '@blueprintjs/datetime';
import { useAutofocus } from 'hooks';
import { FieldRequiredHint, Col, Row } from 'components';
import { ACCOUNT_TYPE } from 'common/accountTypes';
import {
inputIntent,
momentFormatter,
@@ -88,7 +90,7 @@ function OwnerDrawingsFormFields() {
</Col>
</Row>
{/*------------ amount -----------*/}
<FastField name={'amount'}>
<Field name={'amount'}>
{({
form: { values, setFieldValue },
field: { value },
@@ -110,31 +112,33 @@ function OwnerDrawingsFormFields() {
onChange={(amount) => {
setFieldValue('amount', amount);
}}
inputRef={(ref) => (amountFieldRef.current = ref)}
intent={inputIntent({ error, touched })}
/>
</ControlGroup>
</FormGroup>
)}
</FastField>
</Field>
<Row>
<Col xs={5}>
{/*------------ equitty account -----------*/}
<FastField name={'equity_account_id'}>
<FastField name={'credit_account_id'}>
{({ form, field, meta: { error, touched } }) => (
<FormGroup
label={<T id={'cash_flow_transaction.label_equity_account'} />}
labelInfo={<FieldRequiredHint />}
intent={inputIntent({ error, touched })}
helperText={<ErrorMessage name="equity_account_id" />}
className={'form-group--equity_account_id'}
helperText={<ErrorMessage name="credit_account_id" />}
className={'form-group--credit_account_id'}
>
<AccountsSuggestField
accounts={accounts}
onAccountSelected={({ id }) =>
form.setFieldValue('equity_account_id', id)
form.setFieldValue('credit_account_id', id)
}
filterByTypes={ACCOUNT_TYPE.EQUITY}
inputProps={{
intent: inputIntent({ error, touched }),
}}

73
src/containers/Dialogs/MoneyOutDialog/TransferToAccount/TransferToAccountFloatingActions.js Normal file
View File

@@ -0,0 +1,73 @@
import React from 'react';
import { Intent, Button, Classes } from '@blueprintjs/core';
import { useFormikContext } from 'formik';
import { FormattedMessage as T } from 'components';
import { useMoneyOutDialogContext } from '../MoneyOutProvider';
import withDialogActions from 'containers/Dialog/withDialogActions';
import { compose } from 'utils';
function TransferToAccountFloatingActions({
// #withDialogActions
closeDialog,
}) {
// Formik context.
const { isSubmitting, submitForm } = useFormikContext();
// money in dialog context.
const { dialogName, setSubmitPayload, submitPayload } =
useMoneyOutDialogContext();
// handle submit as draft button click.
const handleSubmitDraftBtnClick = (event) => {
setSubmitPayload({ publish: false });
submitForm();
};
// Handle submit button click.
const handleSubmittBtnClick = (event) => {
setSubmitPayload({ publish: true });
submitForm();
};
// Handle close button click.
const handleCloseBtnClick = (event) => {
closeDialog(dialogName);
};
return (
<div className={Classes.DIALOG_FOOTER}>
<div className={Classes.DIALOG_FOOTER_ACTIONS}>
<Button
disabled={isSubmitting}
onClick={handleCloseBtnClick}
style={{ minWidth: '75px' }}
>
<T id={'close'} />
</Button>
<Button
disabled={isSubmitting}
loading={isSubmitting && !submitPayload.publish}
style={{ minWidth: '75px' }}
type="submit"
onClick={handleSubmitDraftBtnClick}
>
{<T id={'save_as_draft'} />}
</Button>
<Button
intent={Intent.PRIMARY}
disabled={isSubmitting}
loading={isSubmitting && submitPayload.publish}
style={{ minWidth: '75px' }}
type="submit"
onClick={handleSubmittBtnClick}
>
{<T id={'save_and_publish'} />}
</Button>
</div>
</div>
);
}
export default compose(withDialogActions)(TransferToAccountFloatingActions);

92
src/containers/Dialogs/MoneyOutDialog/TransferToAccount/TransferToAccountForm.js Normal file
View File

@@ -0,0 +1,92 @@
import React from 'react';
import moment from 'moment';
import { Intent } from '@blueprintjs/core';
import { Formik } from 'formik';
import { omit } from 'lodash';
import intl from 'react-intl-universal';
import 'style/pages/CashFlow/CashflowTransactionForm.scss';
import { AppToaster } from 'components';
import { CreateTransferToAccountFormSchema } from './TransferToAccountForm.schema';
import TransferToAccountFromContent from './TransferToAccountFromContent';
import { useMoneyOutDialogContext } from '../MoneyOutProvider';
import withDialogActions from 'containers/Dialog/withDialogActions';
import withCurrentOrganization from 'containers/Organization/withCurrentOrganization';
import { compose } from 'utils';
const defaultInitialValues = {
date: moment(new Date()).format('YYYY-MM-DD'),
amount: '',
transaction_number: '',
transaction_type: 'transfer_from_account',
reference_no: '',
cashflow_account_id: '',
credit_account_id: '',
description: '',
published: '',
};
/**
* Transfer to account form.
*/
function TransferToAccountForm({
// #withDialogActions
closeDialog,
// #withCurrentOrganization
organization: { base_currency },
}) {
const {
dialogName,
accountId,
createCashflowTransactionMutate,
submitPayload,
} = useMoneyOutDialogContext();
// Initial form values.
const initialValues = {
...defaultInitialValues,
currency_code: base_currency,
cashflow_account_id: accountId,
};
// Handles the form submit.
const handleFormSubmit = (values, { setSubmitting, setErrors }) => {
const form = {
...omit(values, ['currency_code']),
published: submitPayload.publish,
};
setSubmitting(true);
createCashflowTransactionMutate(form)
.then(() => {
closeDialog(dialogName);
AppToaster.show({
message: intl.get('cash_flow_transaction_success_message'),
intent: Intent.SUCCESS,
});
})
.finally(() => {
setSubmitting(true);
});
};
return (
<Formik
validationSchema={CreateTransferToAccountFormSchema}
initialValues={initialValues}
onSubmit={handleFormSubmit}
>
<TransferToAccountFromContent />
</Formik>
);
}
export default compose(
withDialogActions,
withCurrentOrganization(),
)(TransferToAccountForm);

22
src/containers/Dialogs/MoneyOutDialog/TransferToAccount/TransferToAccountForm.schema.js Normal file
View File

@@ -0,0 +1,22 @@
import * as Yup from 'yup';
import intl from 'react-intl-universal';
import { DATATYPES_LENGTH } from 'common/dataTypes';
const Schema = Yup.object().shape({
date: Yup.date().required().label(intl.get('date')),
amount: Yup.number().required().label(intl.get('amount')),
transaction_number: Yup.string(),
transaction_type: Yup.string().required(),
reference_no: Yup.string(),
credit_account_id: Yup.number()
.required()
.label(intl.get('account')),
cashflow_account_id: Yup.string().required(),
description: Yup.string()
.min(3)
.max(DATATYPES_LENGTH.TEXT)
.label(intl.get('description')),
published: Yup.boolean(),
});
export const CreateTransferToAccountFormSchema = Schema;

198
src/containers/Dialogs/MoneyOutDialog/TransferToAccount/TransferToAccountFormFields.js Normal file
View File

@@ -0,0 +1,198 @@
import React from 'react';
import { FastField, ErrorMessage } from 'formik';
import {
Classes,
FormGroup,
InputGroup,
TextArea,
Position,
ControlGroup,
} from '@blueprintjs/core';
import classNames from 'classnames';
import {
FormattedMessage as T,
AccountsSuggestField,
InputPrependText,
MoneyInputGroup,
FieldRequiredHint,
Col,
Row,
} from 'components';
import { DateInput } from '@blueprintjs/datetime';
import { useAutofocus } from 'hooks';
import { ACCOUNT_TYPE } from 'common/accountTypes';
import {
inputIntent,
momentFormatter,
tansformDateValue,
handleDateChange,
} from 'utils';
import { CLASSES } from 'common/classes';
import { useMoneyOutDialogContext } from '../MoneyOutProvider';
/**
* Transfer to account form fields.
*/
function TransferToAccountFormFields() {
// Money in dialog context.
const { accounts } = useMoneyOutDialogContext();
const accountRef = useAutofocus();
return (
<div className={Classes.DIALOG_BODY}>
<Row>
<Col xs={5}>
{/*------------ Date -----------*/}
<FastField name={'date'}>
{({ form, field: { value }, meta: { error, touched } }) => (
<FormGroup
label={<T id={'date'} />}
labelInfo={<FieldRequiredHint />}
intent={inputIntent({ error, touched })}
helperText={<ErrorMessage name="date" />}
minimal={true}
className={classNames(CLASSES.FILL, 'form-group--date')}
>
<DateInput
{...momentFormatter('YYYY/MM/DD')}
onChange={handleDateChange((formattedDate) => {
form.setFieldValue('date', formattedDate);
})}
value={tansformDateValue(value)}
popoverProps={{
position: Position.BOTTOM,
minimal: true,
}}
intent={inputIntent({ error, touched })}
/>
</FormGroup>
)}
</FastField>
</Col>
<Col xs={5}>
{/*------------ Transaction number -----------*/}
<FastField name={'transaction_number'}>
{({ form, field, meta: { error, touched } }) => (
<FormGroup
label={<T id={'transaction_number'} />}
intent={inputIntent({ error, touched })}
helperText={<ErrorMessage name="transaction_number" />}
className={'form-group--transaction_number'}
>
<InputGroup
intent={inputIntent({ error, touched })}
{...field}
/>
</FormGroup>
)}
</FastField>
</Col>
</Row>
{/*------------ amount -----------*/}
<FastField name={'amount'}>
{({
form: { values, setFieldValue },
field: { value },
meta: { error, touched },
}) => (
<FormGroup
label={<T id={'amount'} />}
labelInfo={<FieldRequiredHint />}
intent={inputIntent({ error, touched })}
helperText={<ErrorMessage name="amount" />}
className={'form-group--amount'}
>
<ControlGroup>
<InputPrependText text={values.currency_code} />
<MoneyInputGroup
value={value}
minimal={true}
onChange={(amount) => {
setFieldValue('amount', amount);
}}
inputRef={accountRef}
intent={inputIntent({ error, touched })}
/>
</ControlGroup>
</FormGroup>
)}
</FastField>
<Row>
<Col xs={5}>
{/*------------ transfer from account -----------*/}
<FastField name={'credit_account_id'}>
{({ form, field, meta: { error, touched } }) => (
<FormGroup
label={
'Transfer account'
// <T id={'cash_flow_transaction.label_transfer_from_account'} />
}
labelInfo={<FieldRequiredHint />}
intent={inputIntent({ error, touched })}
helperText={<ErrorMessage name="credit_account_id" />}
className={'form-group--credit_account_id'}
>
<AccountsSuggestField
accounts={accounts}
onAccountSelected={({ id }) =>
form.setFieldValue('credit_account_id', id)
}
filterByTypes={[
ACCOUNT_TYPE.CASH,
ACCOUNT_TYPE.BANK,
ACCOUNT_TYPE.CREDIT_CARD,
]}
inputProps={{
intent: inputIntent({ error, touched }),
}}
/>
</FormGroup>
)}
</FastField>
</Col>
<Col xs={5}>
{/*------------ Reference -----------*/}
<FastField name={'reference_no'}>
{({ form, field, meta: { error, touched } }) => (
<FormGroup
label={<T id={'reference_no'} />}
intent={inputIntent({ error, touched })}
helperText={<ErrorMessage name="reference_no" />}
className={'form-group--reference-no'}
>
<InputGroup
intent={inputIntent({ error, touched })}
{...field}
/>
</FormGroup>
)}
</FastField>
</Col>
</Row>
{/*------------ description -----------*/}
<FastField name={'description'}>
{({ field, meta: { error, touched } }) => (
<FormGroup
label={<T id={'description'} />}
className={'form-group--description'}
intent={inputIntent({ error, touched })}
helperText={<ErrorMessage name={'description'} />}
>
<TextArea
growVertically={true}
large={true}
intent={inputIntent({ error, touched })}
{...field}
/>
</FormGroup>
)}
</FastField>
</div>
);
}
export default TransferToAccountFormFields;

14
src/containers/Dialogs/MoneyOutDialog/TransferToAccount/TransferToAccountFromContent.js Normal file
View File

@@ -0,0 +1,14 @@
import React from 'react';
import { Form } from 'formik';
import TransferToAccountFormFields from './TransferToAccountFormFields';
import TransferToAccountFloatingActions from './TransferToAccountFloatingActions';
export default function TransferToAccountFromContent() {
return (
<Form>
<TransferToAccountFormFields />
<TransferToAccountFloatingActions />
</Form>
);
}