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

Merge branch 'feature/Cash-flow' of https://github.com/bigcapitalhq/client into feature/Cash-flow

Browse Source
This commit is contained in:
a.bouhuolia
2021-10-23 23:11:13 +02:00
parent 65e8d3f26a e29db07c32
commit 7bad9fc52c
48 changed files with 486 additions and 850 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/common/cashflowOptions.js
View File

@@ -3,29 +3,30 @@ import intl from 'react-intl-universal';
export const addMoneyIn = [
{
name: intl.get('cash_flow.option_owner_contribution'),
type: 'OWNER_CONTRIBUTION',
value: 'owner_contribution',
},
{
name: intl.get('cash_flow.option_other_income'),
type: 'OTHER_INCOME',
value: 'other_income',
},
{
name: intl.get('cash_flow.option_transfer_form_account'),
type: 'TRANSFER_FROM_ACCOUNT',
value: 'transfer_from_account',
},
];
export const addMoneyOut = [
{
name: intl.get('cash_flow.option_owner_drawings'),
type: 'ONWERS_DRAWING',
value: 'onwers_drawing',
},
{
name: intl.get('cash_flow.option_expenses'),
type: 'OTHER_EXPENSE',
value: 'other_expense',
},
{
name: intl.get('cash_flow.option_transfer_to_account'),
type: 'TRANSFER_TO_ACCOUNT',
value: 'transfer_to_account',
},
];

13
src/components/Dashboard/GlobalHotkeys.js
View File

@@ -3,11 +3,16 @@ import { useHotkeys } from 'react-hotkeys-hook';
import { useHistory } from 'react-router-dom';
import { getDashboardRoutes } from 'routes/dashboard';
import withDashboardActions from 'containers/Dashboard/withDashboardActions';
import withDialogActions from 'containers/Dialog/withDialogActions';
import { compose } from 'utils';
function GlobalHotkeys({
// #withDashboardActions
toggleSidebarExpend,
// #withDialogActions
openDialog,
}) {
const history = useHistory();
const routes = getDashboardRoutes();
@@ -16,8 +21,8 @@ function GlobalHotkeys({
.filter(({ hotkey }) => hotkey)
.map(({ hotkey }) => hotkey)
.toString();
const handleSidebarToggleBtn = () => {
const handleSidebarToggleBtn = () => {
toggleSidebarExpend();
};
useHotkeys(
@@ -32,7 +37,9 @@ function GlobalHotkeys({
[history],
);
useHotkeys('ctrl+/', (event, handle) => handleSidebarToggleBtn());
useHotkeys('shift+q', (event, handle) => openDialog('money-in', {}));
useHotkeys('shift+d', (event, handle) => openDialog('money-out', {}));
return <div></div>;
}
export default compose(withDashboardActions)(GlobalHotkeys);
export default compose(withDashboardActions, withDialogActions)(GlobalHotkeys);

8
src/containers/CashFlow/AccountTransactions/AccountTransactionsActionsBar.js
View File

@@ -40,17 +40,17 @@ function AccountTransactionsActionsBar({
const { accountId } = useAccountTransactionsContext();
// Handle money in form
const handleMoneyInFormTransaction = (value) => {
const handleMoneyInFormTransaction = (account) => {
openDialog('money-in', {
account_type: value.type,
account_type: account,
account_id: accountId,
});
};
// Handle money out form
const handlMoneyOutFormTransaction = (value) => {
const handlMoneyOutFormTransaction = (account) => {
openDialog('money-out', {
account_type: value.type,
account_type: account,
account_id: accountId,
});
};

23
src/containers/Dialogs/MoneyInDialog/MoneyInContentFields.js Normal file
View File

@@ -0,0 +1,23 @@
import React from 'react';
import OwnerContributionFormFields from './OwnerContribution/OwnerContributionFormFields';
import OtherIncomeFormFields from './OtherIncome/OtherIncomeFormFields';
import TransferFromAccountFormFields from './TransferFromAccount/TransferFromAccountFormFields';
export default function MoneyInContentFields({ accountType }) {
const handleTransactionType = () => {
switch (accountType) {
case 'owner_contribution':
return <OwnerContributionFormFields />;
case 'other_income':
return <OtherIncomeFormFields />;
case 'transfer_from_account':
return <TransferFromAccountFormFields />;
default:
break;
}
};
return <React.Fragment>{handleTransactionType()}</React.Fragment>;
}

10
src/containers/Dialogs/MoneyInDialog/MoneyInDialogContent.js
View File

@@ -1,7 +1,7 @@
import React from 'react';
import { MoneyInDialogProvider } from './MoneyInDialogProvider';
import MoneyInDialogForm from './MoneyInDialogForm';
import MoneyInForm from './MoneyInForm';
/**
* Money in dialog content.
@@ -13,8 +13,12 @@ export default function MoneyInDialogContent({
accountType,
}) {
return (
<MoneyInDialogProvider accountId={accountId} dialogName={dialogName}>
<MoneyInDialogForm accountType={accountType} />
<MoneyInDialogProvider
accountId={accountId}
accountType={accountType}
dialogName={dialogName}
>
<MoneyInForm />
</MoneyInDialogProvider>
);
}

24
src/containers/Dialogs/MoneyInDialog/MoneyInDialogForm.js
View File

@@ -1,24 +0,0 @@
import React from 'react';
import OwnerContributionForm from './OwnerContribution/OwnerContributionForm';
import OtherIncomeForm from './OtherIncome/OtherIncomeForm';
import TransferFromAccountForm from './TransferFromAccount/TransferFromAccountForm';
export default function MoneyInDialogForm({ accountType }) {
// Handle from transaction.
const handleFromTransaction = () => {
switch (accountType) {
case 'OWNER_CONTRIBUTION':
return <OwnerContributionForm />;
case 'OTHER_INCOME':
return <OtherIncomeForm />;
case 'TRANSFER_FROM_ACCOUNT':
return <TransferFromAccountForm />;
default:
break;
}
};
return <React.Fragment>{handleFromTransaction()}</React.Fragment>;
}

22
src/containers/Dialogs/MoneyInDialog/MoneyInDialogProvider.js
View File

@@ -1,16 +1,29 @@
import React from 'react';
import { DialogContent } from 'components';
import { useCreateCashflowTransaction, useAccounts } from 'hooks/query';
import {
useCreateCashflowTransaction,
useAccounts,
useCashflowAccounts,
} from 'hooks/query';
const MoneyInDialogContent = React.createContext();
/**
* Money in dialog provider.
*/
function MoneyInDialogProvider({ accountId, dialogName, ...props }) {
function MoneyInDialogProvider({
accountId,
accountType,
dialogName,
...props
}) {
// Fetches accounts list.
const { isFetching: isAccountsLoading, data: accounts } = useAccounts();
// Fetch cash flow list .
const { data: cashflowAccounts, isLoading: isCashFlowAccountsLoading } =
useCashflowAccounts({}, { keepPreviousData: true });
const { mutateAsync: createCashflowTransactionMutate } =
useCreateCashflowTransaction();
@@ -21,8 +34,11 @@ function MoneyInDialogProvider({ accountId, dialogName, ...props }) {
const provider = {
accounts,
accountId,
accountType,
isAccountsLoading,
cashflowAccounts,
submitPayload,
dialogName,
@@ -31,7 +47,7 @@ function MoneyInDialogProvider({ accountId, dialogName, ...props }) {
};
return (
<DialogContent isLoading={isAccountsLoading}>
<DialogContent isLoading={isAccountsLoading || isCashFlowAccountsLoading}>
<MoneyInDialogContent.Provider value={provider} {...props} />
</DialogContent>
);

34
src/containers/Dialogs/MoneyInDialog/OtherIncome/OtherIncomeForm.js → src/containers/Dialogs/MoneyInDialog/MoneyInForm.js
View File

@@ -8,10 +8,11 @@ import intl from 'react-intl-universal';
import 'style/pages/CashFlow/CashflowTransactionForm.scss';
import { AppToaster } from 'components';
import { CreateOtherIncomeFormSchema } from './OtherIncomeForm.schema';
import OtherIncomeFormContent from './OtherIncomeFormContent';
import { useMoneyInDailogContext } from '../MoneyInDialogProvider';
import MoneyInFormContent from './MoneyInFormContent';
import { CreateMoneyInFormSchema } from './MoneyInForm.schema';
import { useMoneyInDailogContext } from './MoneyInDialogProvider';
import withDialogActions from 'containers/Dialog/withDialogActions';
import withCurrentOrganization from 'containers/Organization/withCurrentOrganization';
@@ -22,7 +23,7 @@ const defaultInitialValues = {
date: moment(new Date()).format('YYYY-MM-DD'),
amount: '',
transaction_number: '',
transaction_type: 'other_income',
transaction_type: '',
reference_no: '',
cashflow_account_id: '',
credit_account_id: '',
@@ -30,10 +31,7 @@ const defaultInitialValues = {
published: '',
};
/**
* Other income form.
*/
function OtherIncomeForm({
function MoneyInForm({
// #withDialogActions
closeDialog,
@@ -43,6 +41,7 @@ function OtherIncomeForm({
const {
dialogName,
accountId,
accountType,
createCashflowTransactionMutate,
submitPayload,
} = useMoneyInDailogContext();
@@ -51,6 +50,7 @@ function OtherIncomeForm({
const initialValues = {
...defaultInitialValues,
currency_code: base_currency,
transaction_type: accountType,
cashflow_account_id: accountId,
};
@@ -76,17 +76,19 @@ function OtherIncomeForm({
};
return (
<Formik
validationSchema={CreateOtherIncomeFormSchema}
initialValues={initialValues}
onSubmit={handleFormSubmit}
>
<OtherIncomeFormContent />
</Formik>
<div>
<Formik
validationSchema={CreateMoneyInFormSchema}
initialValues={initialValues}
onSubmit={handleFormSubmit}
>
<MoneyInFormContent />
</Formik>
</div>
);
}
export default compose(
withDialogActions,
withCurrentOrganization(),
)(OtherIncomeForm);
)(MoneyInForm);

6
src/containers/Dialogs/MoneyOutDialog/TransferToAccount/TransferToAccountForm.schema.js → src/containers/Dialogs/MoneyInDialog/MoneyInForm.schema.js
View File

@@ -8,9 +8,7 @@ const Schema = Yup.object().shape({
transaction_number: Yup.string(),
transaction_type: Yup.string().required(),
reference_no: Yup.string(),
credit_account_id: Yup.number()
.required()
.label(intl.get('account')),
credit_account_id: Yup.number().required(),
cashflow_account_id: Yup.string().required(),
description: Yup.string()
.min(3)
@@ -19,4 +17,4 @@ const Schema = Yup.object().shape({
published: Yup.boolean(),
});
export const CreateTransferToAccountFormSchema = Schema;
export const CreateMoneyInFormSchema = Schema;

17
src/containers/Dialogs/MoneyInDialog/MoneyInFormContent.js Normal file
View File

@@ -0,0 +1,17 @@
import React from 'react';
import { Form } from 'formik';
import MoneyInFormFields from './MoneyInFormFields';
import MoneyInFloatingActions from './MoneyInFloatingActions';
/**
* Money In form content.
*/
export default function MoneyInFormContent() {
return (
<Form>
<MoneyInFormFields />
<MoneyInFloatingActions />
</Form>
);
}

30
src/containers/Dialogs/MoneyInDialog/MoneyInFormFields.js Normal file
View File

@@ -0,0 +1,30 @@
import React from 'react';
import { useFormikContext } from 'formik';
import { Classes } from '@blueprintjs/core';
import { If } from 'components';
import MoneyInContentFields from './MoneyInContentFields';
import TransactionTypeFields from './TransactionTypeFields';
import { useMoneyInDailogContext } from './MoneyInDialogProvider';
/**
* Money in form fields.
*/
function MoneyInFormFields() {
const { values } = useFormikContext();
// Money in dialog context.
const { accountId } = useMoneyInDailogContext();
return (
<div className={Classes.DIALOG_BODY}>
<If condition={!accountId}>
<TransactionTypeFields />
</If>
<MoneyInContentFields accountType={values.transaction_type} />
</div>
);
}
export default MoneyInFormFields;

17
src/containers/Dialogs/MoneyInDialog/OtherIncome/OtherIncomeFormContent.js
View File

@@ -1,17 +0,0 @@
import React from 'react';
import { Form } from 'formik';
import OtherIncomeFormFields from './OtherIncomeFormFields';
import MoneyInFloatingActions from '../MoneyInFloatingActions';
/**
* Other income form content.
*/
export default function OtherIncomeFormContent() {
return (
<Form>
<OtherIncomeFormFields />
<MoneyInFloatingActions />
</Form>
);
}

4
src/containers/Dialogs/MoneyInDialog/OtherIncome/OtherIncomeFormFields.js
View File

@@ -41,7 +41,7 @@ function OtherIncomeFormFields() {
const amountFieldRef = useAutofocus();
return (
<div className={Classes.DIALOG_BODY}>
<React.Fragment>
<Row>
<Col xs={5}>
{/*------------ Date -----------*/}
@@ -187,7 +187,7 @@ function OtherIncomeFormFields() {
</FormGroup>
)}
</FastField>
</div>
</React.Fragment>
);
}

92
src/containers/Dialogs/MoneyInDialog/OwnerContribution/OwnerContributionForm.js
View File

@@ -1,92 +0,0 @@
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 { CreateOwnerContributionFormSchema } from './OwnerContributionForm.schema';
import OwnerContributionFormContent from './OwnerContributionFormContent';
import { useMoneyInDailogContext } from '../MoneyInDialogProvider';
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: 'owner_contribution',
reference_no: '',
cashflow_account_id: '',
credit_account_id: '',
description: '',
published: '',
};
/**
* Owner contribution form
*/
function OwnerContributionForm({
// #withDialogActions
closeDialog,
// #withCurrentOrganization
organization: { base_currency },
}) {
const {
dialogName,
accountId,
submitPayload,
createCashflowTransactionMutate,
} = useMoneyInDailogContext();
// 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={CreateOwnerContributionFormSchema}
initialValues={initialValues}
onSubmit={handleFormSubmit}
>
<OwnerContributionFormContent />
</Formik>
);
}
export default compose(
withDialogActions,
withCurrentOrganization(),
)(OwnerContributionForm);

22
src/containers/Dialogs/MoneyInDialog/OwnerContribution/OwnerContributionForm.schema.js
View File

@@ -1,22 +0,0 @@
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('cash_flow_transaction.label_equity_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 CreateOwnerContributionFormSchema = Schema;

17
src/containers/Dialogs/MoneyInDialog/OwnerContribution/OwnerContributionFormContent.js
View File

@@ -1,17 +0,0 @@
import React from 'react';
import { Form } from 'formik';
import OwnerContributionFormFields from './OwnerContributionFormFields';
import MoneyInFloatingActions from '../MoneyInFloatingActions';
/**
* Owner contribution form content.
*/
export default function OwnerContributionFormContent() {
return (
<Form>
<OwnerContributionFormFields />
<MoneyInFloatingActions />
</Form>
);
}

4
src/containers/Dialogs/MoneyInDialog/OwnerContribution/OwnerContributionFormFields.js
View File

@@ -39,7 +39,7 @@ function OwnerContributionFormFields() {
const amountFieldRef = useAutofocus();
return (
<div className={Classes.DIALOG_BODY}>
<React.Fragment>
<Row>
<Col xs={5}>
{/*------------ Date -----------*/}
@@ -183,7 +183,7 @@ function OwnerContributionFormFields() {
</FormGroup>
)}
</FastField>
</div>
</React.Fragment>
);
}

94
src/containers/Dialogs/MoneyInDialog/TransactionTypeFields.js Normal file
View File

@@ -0,0 +1,94 @@
import React from 'react';
import { FastField, Field, ErrorMessage } from 'formik';
import { Classes, FormGroup } from '@blueprintjs/core';
import classNames from 'classnames';
import {
FormattedMessage as T,
AccountsSuggestField,
FieldRequiredHint,
ListSelect,
Col,
Row,
} from 'components';
import { inputIntent } from 'utils';
import { CLASSES } from 'common/classes';
import { addMoneyIn } from '../../../common/cashflowOptions';
import { useMoneyInDailogContext } from './MoneyInDialogProvider';
/**
* Transaction type fields.
*/
export default function TransactionTypeFields() {
// Money in dialog context.
const { cashflowAccounts } = useMoneyInDailogContext();
return (
<div className="trasnaction-type-fileds">
<Row>
<Col xs={5}>
{/*------------ Current account -----------*/}
<FastField name={'cashflow_account_id'}>
{({ form, field: { value }, meta: { error, touched } }) => (
<FormGroup
label={<T id={'cash_flow_transaction.label_current_account'} />}
labelInfo={<FieldRequiredHint />}
intent={inputIntent({ error, touched })}
helperText={<ErrorMessage name="cashflow_account_id" />}
minimal={true}
className={classNames(
CLASSES.FILL,
'form-group--cashflow_account_id',
)}
>
<AccountsSuggestField
accounts={cashflowAccounts}
onAccountSelected={({ id }) =>
form.setFieldValue('cashflow_account_id', id)
}
inputProps={{
intent: inputIntent({ error, touched }),
}}
/>
</FormGroup>
)}
</FastField>
{/*------------ Transaction type -----------*/}
</Col>
<Col xs={5}>
<Field name={'transaction_type'}>
{({
form: { values, setFieldValue },
field: { value },
meta: { error, touched },
}) => (
<FormGroup
label={<T id={'transaction_type'} />}
labelInfo={<FieldRequiredHint />}
helperText={<ErrorMessage name="transaction_type" />}
intent={inputIntent({ error, touched })}
className={classNames(
CLASSES.FILL,
'form-group--transaction_type',
)}
>
<ListSelect
items={addMoneyIn}
onItemSelect={(type) => {
setFieldValue('transaction_type', type.value);
}}
filterable={false}
selectedItem={value}
selectedItemProp={'value'}
textProp={'name'}
popoverProps={{ minimal: true }}
/>
</FormGroup>
)}
</Field>
</Col>
</Row>
</div>
);
}

92
src/containers/Dialogs/MoneyInDialog/TransferFromAccount/TransferFromAccountForm.js
View File

@@ -1,92 +0,0 @@
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 { CreateTransferFromAccountFormSchema } from './TransferFromAccountForm.schema';
import TransferFromAccountFormContent from './TransferFromAccountFormContent';
import { useMoneyInDailogContext } from '../MoneyInDialogProvider';
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 from account form.
*/
function TransferFromAccountForm({
// #withDialogActions
closeDialog,
// #withCurrentOrganization
organization: { base_currency },
}) {
const {
dialogName,
accountId,
createCashflowTransactionMutate,
submitPayload,
} = useMoneyInDailogContext();
// 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={CreateTransferFromAccountFormSchema}
initialValues={initialValues}
onSubmit={handleFormSubmit}
>
<TransferFromAccountFormContent />
</Formik>
);
}
export default compose(
withDialogActions,
withCurrentOrganization(),
)(TransferFromAccountForm);

22
src/containers/Dialogs/MoneyInDialog/TransferFromAccount/TransferFromAccountForm.schema.js
View File

@@ -1,22 +0,0 @@
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('cash_flow_transaction.label_transfer_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 CreateTransferFromAccountFormSchema = Schema;

14
src/containers/Dialogs/MoneyInDialog/TransferFromAccount/TransferFromAccountFormContent.js
View File

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

4
src/containers/Dialogs/MoneyInDialog/TransferFromAccount/TransferFromAccountFormFields.js
View File

@@ -41,7 +41,7 @@ function TransferFromAccountFormFields() {
const amountFieldRef = useAutofocus();
return (
<div className={Classes.DIALOG_BODY}>
<React.Fragment>
<Row>
<Col xs={5}>
{/*------------ Date -----------*/}
@@ -190,7 +190,7 @@ function TransferFromAccountFormFields() {
</FormGroup>
)}
</FastField>
</div>
</React.Fragment>
);
}

12
src/containers/Dialogs/MoneyInDialog/index.js
View File

@@ -1,7 +1,8 @@
import React from 'react';
import { FormattedMessage as T } from 'components';
import intl from 'react-intl-universal';
import { Dialog, DialogSuspense } from 'components';
import withDialogRedux from 'components/DialogReduxConnect';
import { compose } from 'redux';
const MoneyInDialogContent = React.lazy(() => import('./MoneyInDialogContent'));
@@ -11,13 +12,16 @@ const MoneyInDialogContent = React.lazy(() => import('./MoneyInDialogContent'));
*/
function MoneyInDialog({
dialogName,
payload = { action: '', account_type: null, account_id: null },
payload = { account_type: null, account_id: null },
isOpen,
}) {
return (
<Dialog
name={dialogName}
title={<T id={'cash_flow_transaction.money_in'} />}
title={intl.get('cash_flow_transaction.money_in', {
value: payload.account_type?.name,
})}
isOpen={isOpen}
canEscapeJeyClose={true}
autoFocus={true}
@@ -27,7 +31,7 @@ function MoneyInDialog({
<MoneyInDialogContent
dialogName={dialogName}
accountId={payload.account_id}
accountType={payload.account_type}
accountType={payload.account_type?.value}
/>
</DialogSuspense>
</Dialog>

26
src/containers/Dialogs/MoneyOutDialog/MoneyOutContentFields.js Normal file
View File

@@ -0,0 +1,26 @@
import React from 'react';
import OtherExpnseFormFields from './OtherExpense/OtherExpnseFormFields';
import OwnerDrawingsFormFields from './OwnerDrawings/OwnerDrawingsFormFields';
import TransferToAccountFormFields from './TransferToAccount/TransferToAccountFormFields';
function MoneyOutContentFields({ accountType }) {
const handleTransactionType = () => {
switch (accountType) {
case 'onwers_drawing':
return <OwnerDrawingsFormFields />;
case 'other_expense':
return <OtherExpnseFormFields />;
case 'transfer_to_account':
return <TransferToAccountFormFields />;
default:
break;
}
};
return <React.Fragment>{handleTransactionType()}</React.Fragment>;
}
export default MoneyOutContentFields;

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

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

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

@@ -1,24 +0,0 @@
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>;
}

23
src/containers/Dialogs/MoneyOutDialog/MoneyOutProvider.js → src/containers/Dialogs/MoneyOutDialog/MoneyOutDialogProvider.js
View File

@@ -1,19 +1,23 @@
import React from 'react';
import { DialogContent } from 'components';
import { useAccounts, useCreateCashflowTransaction } from 'hooks/query';
import {
useAccounts,
useCreateCashflowTransaction,
useCashflowAccounts,
} from 'hooks/query';
const MoneyInDialogContent = React.createContext();
/**
* Money out dialog provider.
*/
function MoneyOutProvider({ accountId, dialogName, ...props }) {
function MoneyOutProvider({ accountId, accountType, dialogName, ...props }) {
// Fetches accounts list.
const {
isFetching: isAccountFetching,
isLoading: isAccountsLoading,
data: accounts,
} = useAccounts();
const { isLoading: isAccountsLoading, data: accounts } = useAccounts();
// Fetch cash flow list .
const { data: cashflowAccounts, isLoading: isCashFlowAccountsLoading } =
useCashflowAccounts({}, { keepPreviousData: true });
const { mutateAsync: createCashflowTransactionMutate } =
useCreateCashflowTransaction();
@@ -25,8 +29,11 @@ function MoneyOutProvider({ accountId, dialogName, ...props }) {
const provider = {
accounts,
accountId,
accountType,
isAccountsLoading,
cashflowAccounts,
submitPayload,
dialogName,
@@ -35,7 +42,7 @@ function MoneyOutProvider({ accountId, dialogName, ...props }) {
};
return (
<DialogContent isLoading={isAccountsLoading}>
<DialogContent isLoading={isAccountsLoading || isCashFlowAccountsLoading}>
<MoneyInDialogContent.Provider value={provider} {...props} />
</DialogContent>
);

10
src/containers/Dialogs/MoneyOutDialog/OwnerDrawings/OwnerDrawingsFloatingActions.js → src/containers/Dialogs/MoneyOutDialog/MoneyOutFloatingActions.js
View File

@@ -3,15 +3,17 @@ import { Intent, Button, Classes } from '@blueprintjs/core';
import { useFormikContext } from 'formik';
import { FormattedMessage as T } from 'components';
import { useMoneyOutDialogContext } from '../MoneyOutProvider';
import { useMoneyOutDialogContext } from './MoneyOutDialogProvider';
import withDialogActions from 'containers/Dialog/withDialogActions';
import withCurrentOrganization from 'containers/Organization/withCurrentOrganization';
import { compose } from 'utils';
/**
* Owner drawings floating actions.
* Money out floating actions.
*/
function OwnerDrawingsFloatingActions({
function MoneyOutFloatingActions({
// #withDialogActions
closeDialog,
}) {
@@ -73,4 +75,4 @@ function OwnerDrawingsFloatingActions({
);
}
export default compose(withDialogActions)(OwnerDrawingsFloatingActions);
export default compose(withDialogActions)(MoneyOutFloatingActions);

35
src/containers/Dialogs/MoneyOutDialog/OtherExpense/OtherExpenseForm.js → src/containers/Dialogs/MoneyOutDialog/MoneyOutForm.js
View File

@@ -8,10 +8,11 @@ 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 MoneyOutFormContent from './MoneyOutFormContent';
import { CreateMoneyOutSchema } from './MoneyOutForm.schema';
import { useMoneyOutDialogContext } from './MoneyOutDialogProvider';
import withDialogActions from 'containers/Dialog/withDialogActions';
import withCurrentOrganization from 'containers/Organization/withCurrentOrganization';
@@ -22,7 +23,7 @@ const defaultInitialValues = {
date: moment(new Date()).format('YYYY-MM-DD'),
amount: '',
transaction_number: '',
transaction_type: 'other_expense',
transaction_type: '',
reference_no: '',
cashflow_account_id: '',
credit_account_id: '',
@@ -30,10 +31,7 @@ const defaultInitialValues = {
published: '',
};
/**
* Other expense form.
*/
function OtherExpenseForm({
function MoneyOutForm({
// #withDialogActions
closeDialog,
@@ -43,6 +41,7 @@ function OtherExpenseForm({
const {
dialogName,
accountId,
accountType,
createCashflowTransactionMutate,
submitPayload,
} = useMoneyOutDialogContext();
@@ -51,6 +50,7 @@ function OtherExpenseForm({
const initialValues = {
...defaultInitialValues,
currency_code: base_currency,
transaction_type: accountType,
cashflow_account_id: accountId,
};
@@ -74,19 +74,20 @@ function OtherExpenseForm({
setSubmitting(true);
});
};
return (
<Formik
validationSchema={CreateOtherExpenseFormSchema}
initialValues={initialValues}
onSubmit={handleFormSubmit}
>
<OtherExpenseFormContent />
</Formik>
<div>
<Formik
validationSchema={CreateMoneyOutSchema}
initialValues={initialValues}
onSubmit={handleFormSubmit}
>
<MoneyOutFormContent />
</Formik>
</div>
);
}
export default compose(
withDialogActions,
withCurrentOrganization(),
)(OtherExpenseForm);
)(MoneyOutForm);

6
src/containers/Dialogs/MoneyInDialog/OtherIncome/OtherIncomeForm.schema.js → src/containers/Dialogs/MoneyOutDialog/MoneyOutForm.schema.js
View File

@@ -8,9 +8,7 @@ const Schema = Yup.object().shape({
transaction_number: Yup.string(),
transaction_type: Yup.string().required(),
reference_no: Yup.string(),
credit_account_id: Yup.number()
.required()
.label(intl.get('other_income_account')),
credit_account_id: Yup.number().required(),
cashflow_account_id: Yup.string().required(),
description: Yup.string()
.min(3)
@@ -19,4 +17,4 @@ const Schema = Yup.object().shape({
published: Yup.boolean(),
});
export const CreateOtherIncomeFormSchema = Schema;
export const CreateMoneyOutSchema = Schema;

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

@@ -0,0 +1,17 @@
import React from 'react';
import { Form } from 'formik';
import MoneyOutFormFields from './MoneyOutFormFields';
import MoneyOutFloatingActions from './MoneyOutFloatingActions';
/**
* Money out form content.
*/
export default function MoneyOutFormContent() {
return (
<Form>
<MoneyOutFormFields />
<MoneyOutFloatingActions />
</Form>
);
}

29
src/containers/Dialogs/MoneyOutDialog/MoneyOutFormFields.js Normal file
View File

@@ -0,0 +1,29 @@
import React from 'react';
import { useFormikContext } from 'formik';
import { Classes } from '@blueprintjs/core';
import { If } from 'components';
import MoneyOutContentFields from './MoneyOutContentFields';
import TransactionTypeFields from './TransactionTypeFields';
import { useMoneyOutDialogContext } from './MoneyOutDialogProvider';
/**
* Money out form fields.
*/
function MoneyOutFormFields() {
// Money in dialog context.
const { accountId } = useMoneyOutDialogContext();
const { values } = useFormikContext();
return (
<div className={Classes.DIALOG_BODY}>
<If condition={!accountId}>
<TransactionTypeFields />
</If>
<MoneyOutContentFields accountType={values.transaction_type} />
</div>
);
}
export default MoneyOutFormFields;

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

@@ -1,76 +0,0 @@
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);

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

@@ -1,22 +0,0 @@
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
View File

@@ -1,17 +0,0 @@
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>
);
}

6
src/containers/Dialogs/MoneyOutDialog/OtherExpense/OtherExpnseFormFields.js
View File

@@ -29,7 +29,7 @@ import {
handleDateChange,
} from 'utils';
import { CLASSES } from 'common/classes';
import { useMoneyOutDialogContext } from '../MoneyOutProvider';
import { useMoneyOutDialogContext } from '../MoneyOutDialogProvider';
/**
* Other expense form fields.
@@ -41,7 +41,7 @@ function OtherExpnseFormFields() {
const amountFieldRef = useAutofocus();
return (
<div className={Classes.DIALOG_BODY}>
<React.Fragment>
<Row>
<Col xs={5}>
{/*------------ Date -----------*/}
@@ -188,7 +188,7 @@ function OtherExpnseFormFields() {
</FormGroup>
)}
</FastField>
</div>
</React.Fragment>
);
}

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

@@ -1,91 +0,0 @@
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 { CreateOwnerDrawingsFormSchema } from './OwnerDrawingsForm.schema';
import OwnerDrawingsFormContent from './OwnerDrawingsFormContent';
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: 'onwers_drawing',
reference_no: '',
cashflow_account_id: '',
credit_account_id: '',
description: '',
published: '',
};
/**
* Owner drawings form.
*/
function OwnerDrawingsForm({
// #withDialogActions
closeDialog,
// #withCurrentOrganization
organization: { base_currency },
}) {
const {
dialogName,
accountId,
submitPayload,
createCashflowTransactionMutate,
} = 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={CreateOwnerDrawingsFormSchema}
initialValues={initialValues}
onSubmit={handleFormSubmit}
>
<OwnerDrawingsFormContent />
</Formik>
);
}
export default compose(
withDialogActions,
withCurrentOrganization(),
)(OwnerDrawingsForm);

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

@@ -1,22 +0,0 @@
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('cash_flow_transaction.label_equity_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 CreateOwnerDrawingsFormSchema = Schema;

17
src/containers/Dialogs/MoneyOutDialog/OwnerDrawings/OwnerDrawingsFormContent.js
View File

@@ -1,17 +0,0 @@
import React from 'react';
import { Form } from 'formik';
import OwnerDrawingsFormFields from './OwnerDrawingsFormFields';
import OwnerDrawingsFloatingActions from './OwnerDrawingsFloatingActions';
/**
* Owner drawings form content.
*/
export default function OwnerDrawingsFormContent() {
return (
<Form>
<OwnerDrawingsFormFields />
<OwnerDrawingsFloatingActions />
</Form>
);
}

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

@@ -28,7 +28,7 @@ import {
handleDateChange,
} from 'utils';
import { CLASSES } from 'common/classes';
import { useMoneyOutDialogContext } from '../MoneyOutProvider';
import { useMoneyOutDialogContext } from '../MoneyOutDialogProvider';
/**
* Owner drawings form fields.
@@ -40,7 +40,7 @@ function OwnerDrawingsFormFields() {
const amountFieldRef = useAutofocus();
return (
<div className={Classes.DIALOG_BODY}>
<React.Fragment>
<Row>
<Col xs={5}>
{/*------------ Date -----------*/}
@@ -112,7 +112,6 @@ function OwnerDrawingsFormFields() {
onChange={(amount) => {
setFieldValue('amount', amount);
}}
inputRef={(ref) => (amountFieldRef.current = ref)}
intent={inputIntent({ error, touched })}
/>
@@ -185,7 +184,7 @@ function OwnerDrawingsFormFields() {
</FormGroup>
)}
</FastField>
</div>
</React.Fragment>
);
}

96
src/containers/Dialogs/MoneyOutDialog/TransactionTypeFields.js Normal file
View File

@@ -0,0 +1,96 @@
import React from 'react';
import { FastField, Field, ErrorMessage } from 'formik';
import { FormGroup } from '@blueprintjs/core';
import classNames from 'classnames';
import {
FormattedMessage as T,
AccountsSuggestField,
FieldRequiredHint,
ListSelect,
Col,
Row,
} from 'components';
import { inputIntent } from 'utils';
import { CLASSES } from 'common/classes';
import { addMoneyOut } from '../../../common/cashflowOptions';
import { useMoneyOutDialogContext } from './MoneyOutDialogProvider';
/**
* Transaction type fields.
*/
function TransactionTypeFields() {
// Money in dialog context.
const { cashflowAccounts } = useMoneyOutDialogContext();
return (
<div className="trasnaction-type-fileds">
<Row>
<Col xs={5}>
{/*------------ Current account -----------*/}
<FastField name={'cashflow_account_id'}>
{({ form, field: { value }, meta: { error, touched } }) => (
<FormGroup
label={<T id={'cash_flow_transaction.label_current_account'} />}
labelInfo={<FieldRequiredHint />}
intent={inputIntent({ error, touched })}
helperText={<ErrorMessage name="cashflow_account_id" />}
minimal={true}
className={classNames(
CLASSES.FILL,
'form-group--cashflow_account_id',
)}
>
<AccountsSuggestField
accounts={cashflowAccounts}
onAccountSelected={({ id }) =>
form.setFieldValue('cashflow_account_id', id)
}
inputProps={{
intent: inputIntent({ error, touched }),
}}
/>
</FormGroup>
)}
</FastField>
{/*------------ Transaction type -----------*/}
</Col>
<Col xs={5}>
<Field name={'transaction_type'}>
{({
form: { values, setFieldValue },
field: { value },
meta: { error, touched },
}) => (
<FormGroup
label={<T id={'transaction_type'} />}
labelInfo={<FieldRequiredHint />}
helperText={<ErrorMessage name="transaction_type" />}
intent={inputIntent({ error, touched })}
className={classNames(
CLASSES.FILL,
'form-group--transaction_type',
)}
>
<ListSelect
items={addMoneyOut}
onItemSelect={(type) => {
setFieldValue('transaction_type', type.value);
}}
filterable={false}
selectedItem={value}
selectedItemProp={'value'}
textProp={'name'}
popoverProps={{ minimal: true }}
/>
</FormGroup>
)}
</Field>
</Col>
</Row>
</div>
);
}
export default TransactionTypeFields;

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

@@ -1,73 +0,0 @@
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
View File

@@ -1,92 +0,0 @@
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);

6
src/containers/Dialogs/MoneyOutDialog/TransferToAccount/TransferToAccountFormFields.js
View File

@@ -29,7 +29,7 @@ import {
handleDateChange,
} from 'utils';
import { CLASSES } from 'common/classes';
import { useMoneyOutDialogContext } from '../MoneyOutProvider';
import { useMoneyOutDialogContext } from '../MoneyOutDialogProvider';
/**
* Transfer to account form fields.
@@ -41,7 +41,7 @@ function TransferToAccountFormFields() {
const accountRef = useAutofocus();
return (
<div className={Classes.DIALOG_BODY}>
<React.Fragment>
<Row>
<Col xs={5}>
{/*------------ Date -----------*/}
@@ -190,7 +190,7 @@ function TransferToAccountFormFields() {
</FormGroup>
)}
</FastField>
</div>
</React.Fragment>
);
}

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

@@ -1,14 +0,0 @@
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>
);
}

10
src/containers/Dialogs/MoneyOutDialog/index.js
View File

@@ -1,5 +1,5 @@
import React from 'react';
import { FormattedMessage as T } from 'components';
import intl from 'react-intl-universal';
import { Dialog, DialogSuspense } from 'components';
import withDialogRedux from 'components/DialogReduxConnect';
import { compose } from 'redux';
@@ -13,13 +13,15 @@ const MoneyOutDialogContent = React.lazy(() =>
*/
function MoneyOutDialog({
dialogName,
payload = { action: '', account_type: null, account_id: null },
payload = { account_type: null, account_id: null },
isOpen,
}) {
return (
<Dialog
name={dialogName}
title={<T id={'cash_flow_transaction.money_out'} />}
title={intl.get('cash_flow_transaction.money_out', {
value: payload.account_type?.name,
})}
isOpen={isOpen}
canEscapeJeyClose={true}
autoFocus={true}
@@ -29,7 +31,7 @@ function MoneyOutDialog({
<MoneyOutDialogContent
dialogName={dialogName}
accountId={payload.account_id}
accountType={payload.account_type}
accountType={payload.account_type?.value}
/>
</DialogSuspense>
</Dialog>

7
src/lang/en/index.json
View File

@@ -1382,13 +1382,14 @@
"cash_flow_transaction.label_equity_account":"Equity account",
"cash_flow_transaction.label_expense_account":"Expense account",
"cash_flow_transaction_success_message":" The cashflow transaction has been created successfully.",
"cash_flow_transaction.money_in":"Money In",
"cash_flow_transaction.money_out":"Money Out",
"cash_flow_transaction.money_in":"Money In {value}",
"cash_flow_transaction.money_out":"Money Out {value}",
"cash_flow_transaction.other_income_account":"Other income account",
"cash_flow_transaction.other_expense_account":"Other expense account",
"save_and_publish": "Save & Publish",
"cash_flow_transaction.label_transfer_from_account":"Transfer from account",
"cash_flow_transaction.label_transfer_to_account":"Transfer to account"
"cash_flow_transaction.label_transfer_to_account":"Transfer to account",
"cash_flow_transaction.label_current_account":"Current account"
}

6
src/style/pages/CashFlow/CashflowTransactionForm.scss
View File

@@ -25,6 +25,12 @@
}
}
.trasnaction-type-fileds {
margin-bottom: 18px;
padding: 16px 0px 12px 0px;
border-bottom: 2px solid #e9e9e9;
}
.bp3-dialog-footer {
padding-top: 10px;
}