diff --git a/src/common/cashflowOptions.js b/src/common/cashflowOptions.js index 6ff7401f5..480b71162 100644 --- a/src/common/cashflowOptions.js +++ b/src/common/cashflowOptions.js @@ -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', }, ]; diff --git a/src/components/Dashboard/GlobalHotkeys.js b/src/components/Dashboard/GlobalHotkeys.js index 3ca7a2b0b..2bf734b9e 100644 --- a/src/components/Dashboard/GlobalHotkeys.js +++ b/src/components/Dashboard/GlobalHotkeys.js @@ -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
; } -export default compose(withDashboardActions)(GlobalHotkeys); +export default compose(withDashboardActions, withDialogActions)(GlobalHotkeys); diff --git a/src/containers/CashFlow/AccountTransactions/AccountTransactionsActionsBar.js b/src/containers/CashFlow/AccountTransactions/AccountTransactionsActionsBar.js index 27fab2255..34d322fc6 100644 --- a/src/containers/CashFlow/AccountTransactions/AccountTransactionsActionsBar.js +++ b/src/containers/CashFlow/AccountTransactions/AccountTransactionsActionsBar.js @@ -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, }); }; diff --git a/src/containers/Dialogs/MoneyInDialog/MoneyInContentFields.js b/src/containers/Dialogs/MoneyInDialog/MoneyInContentFields.js new file mode 100644 index 000000000..838c173aa --- /dev/null +++ b/src/containers/Dialogs/MoneyInDialog/MoneyInContentFields.js @@ -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 ; + + case 'other_income': + return ; + + case 'transfer_from_account': + return ; + default: + break; + } + }; + + return {handleTransactionType()}; +} diff --git a/src/containers/Dialogs/MoneyInDialog/MoneyInDialogContent.js b/src/containers/Dialogs/MoneyInDialog/MoneyInDialogContent.js index 959490ded..7eee4f501 100644 --- a/src/containers/Dialogs/MoneyInDialog/MoneyInDialogContent.js +++ b/src/containers/Dialogs/MoneyInDialog/MoneyInDialogContent.js @@ -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 ( - - + + ); } diff --git a/src/containers/Dialogs/MoneyInDialog/MoneyInDialogForm.js b/src/containers/Dialogs/MoneyInDialog/MoneyInDialogForm.js deleted file mode 100644 index 6ea90e77a..000000000 --- a/src/containers/Dialogs/MoneyInDialog/MoneyInDialogForm.js +++ /dev/null @@ -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 ; - - case 'OTHER_INCOME': - return ; - - case 'TRANSFER_FROM_ACCOUNT': - return ; - default: - break; - } - }; - - return {handleFromTransaction()}; -} diff --git a/src/containers/Dialogs/MoneyInDialog/MoneyInDialogProvider.js b/src/containers/Dialogs/MoneyInDialog/MoneyInDialogProvider.js index 0525c8edf..8d365451d 100644 --- a/src/containers/Dialogs/MoneyInDialog/MoneyInDialogProvider.js +++ b/src/containers/Dialogs/MoneyInDialog/MoneyInDialogProvider.js @@ -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 ( - + ); diff --git a/src/containers/Dialogs/MoneyInDialog/OtherIncome/OtherIncomeForm.js b/src/containers/Dialogs/MoneyInDialog/MoneyInForm.js similarity index 77% rename from src/containers/Dialogs/MoneyInDialog/OtherIncome/OtherIncomeForm.js rename to src/containers/Dialogs/MoneyInDialog/MoneyInForm.js index 3f47fc31b..dfe4ab7fe 100644 --- a/src/containers/Dialogs/MoneyInDialog/OtherIncome/OtherIncomeForm.js +++ b/src/containers/Dialogs/MoneyInDialog/MoneyInForm.js @@ -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 ( - - - +
+ + + +
); } export default compose( withDialogActions, withCurrentOrganization(), -)(OtherIncomeForm); +)(MoneyInForm); diff --git a/src/containers/Dialogs/MoneyOutDialog/TransferToAccount/TransferToAccountForm.schema.js b/src/containers/Dialogs/MoneyInDialog/MoneyInForm.schema.js similarity index 80% rename from src/containers/Dialogs/MoneyOutDialog/TransferToAccount/TransferToAccountForm.schema.js rename to src/containers/Dialogs/MoneyInDialog/MoneyInForm.schema.js index 39b71ab31..63711f142 100644 --- a/src/containers/Dialogs/MoneyOutDialog/TransferToAccount/TransferToAccountForm.schema.js +++ b/src/containers/Dialogs/MoneyInDialog/MoneyInForm.schema.js @@ -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; diff --git a/src/containers/Dialogs/MoneyInDialog/MoneyInFormContent.js b/src/containers/Dialogs/MoneyInDialog/MoneyInFormContent.js new file mode 100644 index 000000000..c3e01b84e --- /dev/null +++ b/src/containers/Dialogs/MoneyInDialog/MoneyInFormContent.js @@ -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 ( +
+ + + + ); +} diff --git a/src/containers/Dialogs/MoneyInDialog/MoneyInFormFields.js b/src/containers/Dialogs/MoneyInDialog/MoneyInFormFields.js new file mode 100644 index 000000000..08fcab957 --- /dev/null +++ b/src/containers/Dialogs/MoneyInDialog/MoneyInFormFields.js @@ -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 ( +
+ + + + +
+ ); +} + +export default MoneyInFormFields; diff --git a/src/containers/Dialogs/MoneyInDialog/OtherIncome/OtherIncomeFormContent.js b/src/containers/Dialogs/MoneyInDialog/OtherIncome/OtherIncomeFormContent.js deleted file mode 100644 index e05f48788..000000000 --- a/src/containers/Dialogs/MoneyInDialog/OtherIncome/OtherIncomeFormContent.js +++ /dev/null @@ -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 ( -
- - - - ); -} diff --git a/src/containers/Dialogs/MoneyInDialog/OtherIncome/OtherIncomeFormFields.js b/src/containers/Dialogs/MoneyInDialog/OtherIncome/OtherIncomeFormFields.js index 0a2544b96..f0e10f72a 100644 --- a/src/containers/Dialogs/MoneyInDialog/OtherIncome/OtherIncomeFormFields.js +++ b/src/containers/Dialogs/MoneyInDialog/OtherIncome/OtherIncomeFormFields.js @@ -41,7 +41,7 @@ function OtherIncomeFormFields() { const amountFieldRef = useAutofocus(); return ( -
+ {/*------------ Date -----------*/} @@ -187,7 +187,7 @@ function OtherIncomeFormFields() { )} -
+ ); } diff --git a/src/containers/Dialogs/MoneyInDialog/OwnerContribution/OwnerContributionForm.js b/src/containers/Dialogs/MoneyInDialog/OwnerContribution/OwnerContributionForm.js deleted file mode 100644 index e7ff7bfaf..000000000 --- a/src/containers/Dialogs/MoneyInDialog/OwnerContribution/OwnerContributionForm.js +++ /dev/null @@ -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 ( - - - - ); -} - -export default compose( - withDialogActions, - withCurrentOrganization(), -)(OwnerContributionForm); diff --git a/src/containers/Dialogs/MoneyInDialog/OwnerContribution/OwnerContributionForm.schema.js b/src/containers/Dialogs/MoneyInDialog/OwnerContribution/OwnerContributionForm.schema.js deleted file mode 100644 index b877c0e26..000000000 --- a/src/containers/Dialogs/MoneyInDialog/OwnerContribution/OwnerContributionForm.schema.js +++ /dev/null @@ -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; diff --git a/src/containers/Dialogs/MoneyInDialog/OwnerContribution/OwnerContributionFormContent.js b/src/containers/Dialogs/MoneyInDialog/OwnerContribution/OwnerContributionFormContent.js deleted file mode 100644 index 27932fc3b..000000000 --- a/src/containers/Dialogs/MoneyInDialog/OwnerContribution/OwnerContributionFormContent.js +++ /dev/null @@ -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 ( -
- - - - ); -} diff --git a/src/containers/Dialogs/MoneyInDialog/OwnerContribution/OwnerContributionFormFields.js b/src/containers/Dialogs/MoneyInDialog/OwnerContribution/OwnerContributionFormFields.js index 6bcea0830..203e5387f 100644 --- a/src/containers/Dialogs/MoneyInDialog/OwnerContribution/OwnerContributionFormFields.js +++ b/src/containers/Dialogs/MoneyInDialog/OwnerContribution/OwnerContributionFormFields.js @@ -39,7 +39,7 @@ function OwnerContributionFormFields() { const amountFieldRef = useAutofocus(); return ( -
+ {/*------------ Date -----------*/} @@ -183,7 +183,7 @@ function OwnerContributionFormFields() { )} -
+ ); } diff --git a/src/containers/Dialogs/MoneyInDialog/TransactionTypeFields.js b/src/containers/Dialogs/MoneyInDialog/TransactionTypeFields.js new file mode 100644 index 000000000..ecc3b0bb0 --- /dev/null +++ b/src/containers/Dialogs/MoneyInDialog/TransactionTypeFields.js @@ -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 ( +
+ + + {/*------------ Current account -----------*/} + + {({ form, field: { value }, meta: { error, touched } }) => ( + } + labelInfo={} + intent={inputIntent({ error, touched })} + helperText={} + minimal={true} + className={classNames( + CLASSES.FILL, + 'form-group--cashflow_account_id', + )} + > + + form.setFieldValue('cashflow_account_id', id) + } + inputProps={{ + intent: inputIntent({ error, touched }), + }} + /> + + )} + + {/*------------ Transaction type -----------*/} + + + + {({ + form: { values, setFieldValue }, + field: { value }, + meta: { error, touched }, + }) => ( + } + labelInfo={} + helperText={} + intent={inputIntent({ error, touched })} + className={classNames( + CLASSES.FILL, + 'form-group--transaction_type', + )} + > + { + setFieldValue('transaction_type', type.value); + }} + filterable={false} + selectedItem={value} + selectedItemProp={'value'} + textProp={'name'} + popoverProps={{ minimal: true }} + /> + + )} + + + +
+ ); +} diff --git a/src/containers/Dialogs/MoneyInDialog/TransferFromAccount/TransferFromAccountForm.js b/src/containers/Dialogs/MoneyInDialog/TransferFromAccount/TransferFromAccountForm.js deleted file mode 100644 index 17636469a..000000000 --- a/src/containers/Dialogs/MoneyInDialog/TransferFromAccount/TransferFromAccountForm.js +++ /dev/null @@ -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 ( - - - - ); -} - -export default compose( - withDialogActions, - withCurrentOrganization(), -)(TransferFromAccountForm); diff --git a/src/containers/Dialogs/MoneyInDialog/TransferFromAccount/TransferFromAccountForm.schema.js b/src/containers/Dialogs/MoneyInDialog/TransferFromAccount/TransferFromAccountForm.schema.js deleted file mode 100644 index 3e1786695..000000000 --- a/src/containers/Dialogs/MoneyInDialog/TransferFromAccount/TransferFromAccountForm.schema.js +++ /dev/null @@ -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; diff --git a/src/containers/Dialogs/MoneyInDialog/TransferFromAccount/TransferFromAccountFormContent.js b/src/containers/Dialogs/MoneyInDialog/TransferFromAccount/TransferFromAccountFormContent.js deleted file mode 100644 index 073a893e2..000000000 --- a/src/containers/Dialogs/MoneyInDialog/TransferFromAccount/TransferFromAccountFormContent.js +++ /dev/null @@ -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 ( -
- - - - ); -} diff --git a/src/containers/Dialogs/MoneyInDialog/TransferFromAccount/TransferFromAccountFormFields.js b/src/containers/Dialogs/MoneyInDialog/TransferFromAccount/TransferFromAccountFormFields.js index 118f71e0c..7925e3c48 100644 --- a/src/containers/Dialogs/MoneyInDialog/TransferFromAccount/TransferFromAccountFormFields.js +++ b/src/containers/Dialogs/MoneyInDialog/TransferFromAccount/TransferFromAccountFormFields.js @@ -41,7 +41,7 @@ function TransferFromAccountFormFields() { const amountFieldRef = useAutofocus(); return ( -
+ {/*------------ Date -----------*/} @@ -190,7 +190,7 @@ function TransferFromAccountFormFields() { )} -
+ ); } diff --git a/src/containers/Dialogs/MoneyInDialog/index.js b/src/containers/Dialogs/MoneyInDialog/index.js index a751b3934..d5098a413 100644 --- a/src/containers/Dialogs/MoneyInDialog/index.js +++ b/src/containers/Dialogs/MoneyInDialog/index.js @@ -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 ( } + 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({ diff --git a/src/containers/Dialogs/MoneyOutDialog/MoneyOutContentFields.js b/src/containers/Dialogs/MoneyOutDialog/MoneyOutContentFields.js new file mode 100644 index 000000000..536af6d0c --- /dev/null +++ b/src/containers/Dialogs/MoneyOutDialog/MoneyOutContentFields.js @@ -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 ; + + case 'other_expense': + return ; + + case 'transfer_to_account': + return ; + default: + break; + } + }; + + return {handleTransactionType()}; +} + +export default MoneyOutContentFields; diff --git a/src/containers/Dialogs/MoneyOutDialog/MoneyOutDialogContent.js b/src/containers/Dialogs/MoneyOutDialog/MoneyOutDialogContent.js index 3c8ad3ac8..70ec9424e 100644 --- a/src/containers/Dialogs/MoneyOutDialog/MoneyOutDialogContent.js +++ b/src/containers/Dialogs/MoneyOutDialog/MoneyOutDialogContent.js @@ -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 ( - - + + ); } diff --git a/src/containers/Dialogs/MoneyOutDialog/MoneyOutDialogForm.js b/src/containers/Dialogs/MoneyOutDialog/MoneyOutDialogForm.js deleted file mode 100644 index 11880eacd..000000000 --- a/src/containers/Dialogs/MoneyOutDialog/MoneyOutDialogForm.js +++ /dev/null @@ -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 ; - - case 'OTHER_EXPENSE': - return ; - - case 'TRANSFER_TO_ACCOUNT': - return ; - default: - break; - } - }; - - return {handleFromTransaction()}; -} diff --git a/src/containers/Dialogs/MoneyOutDialog/MoneyOutProvider.js b/src/containers/Dialogs/MoneyOutDialog/MoneyOutDialogProvider.js similarity index 60% rename from src/containers/Dialogs/MoneyOutDialog/MoneyOutProvider.js rename to src/containers/Dialogs/MoneyOutDialog/MoneyOutDialogProvider.js index e0564ab5a..fb11f772a 100644 --- a/src/containers/Dialogs/MoneyOutDialog/MoneyOutProvider.js +++ b/src/containers/Dialogs/MoneyOutDialog/MoneyOutDialogProvider.js @@ -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 ( - + ); diff --git a/src/containers/Dialogs/MoneyOutDialog/OwnerDrawings/OwnerDrawingsFloatingActions.js b/src/containers/Dialogs/MoneyOutDialog/MoneyOutFloatingActions.js similarity index 86% rename from src/containers/Dialogs/MoneyOutDialog/OwnerDrawings/OwnerDrawingsFloatingActions.js rename to src/containers/Dialogs/MoneyOutDialog/MoneyOutFloatingActions.js index b8ed31d47..cd7b987e7 100644 --- a/src/containers/Dialogs/MoneyOutDialog/OwnerDrawings/OwnerDrawingsFloatingActions.js +++ b/src/containers/Dialogs/MoneyOutDialog/MoneyOutFloatingActions.js @@ -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); diff --git a/src/containers/Dialogs/MoneyOutDialog/OtherExpense/OtherExpenseForm.js b/src/containers/Dialogs/MoneyOutDialog/MoneyOutForm.js similarity index 77% rename from src/containers/Dialogs/MoneyOutDialog/OtherExpense/OtherExpenseForm.js rename to src/containers/Dialogs/MoneyOutDialog/MoneyOutForm.js index 13513022e..6a5c08dcb 100644 --- a/src/containers/Dialogs/MoneyOutDialog/OtherExpense/OtherExpenseForm.js +++ b/src/containers/Dialogs/MoneyOutDialog/MoneyOutForm.js @@ -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 ( - - - +
+ + + +
); } export default compose( withDialogActions, withCurrentOrganization(), -)(OtherExpenseForm); +)(MoneyOutForm); diff --git a/src/containers/Dialogs/MoneyInDialog/OtherIncome/OtherIncomeForm.schema.js b/src/containers/Dialogs/MoneyOutDialog/MoneyOutForm.schema.js similarity index 79% rename from src/containers/Dialogs/MoneyInDialog/OtherIncome/OtherIncomeForm.schema.js rename to src/containers/Dialogs/MoneyOutDialog/MoneyOutForm.schema.js index 300f98511..08228e2b6 100644 --- a/src/containers/Dialogs/MoneyInDialog/OtherIncome/OtherIncomeForm.schema.js +++ b/src/containers/Dialogs/MoneyOutDialog/MoneyOutForm.schema.js @@ -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; diff --git a/src/containers/Dialogs/MoneyOutDialog/MoneyOutFormContent.js b/src/containers/Dialogs/MoneyOutDialog/MoneyOutFormContent.js new file mode 100644 index 000000000..b44581433 --- /dev/null +++ b/src/containers/Dialogs/MoneyOutDialog/MoneyOutFormContent.js @@ -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 ( +
+ + + + ); +} diff --git a/src/containers/Dialogs/MoneyOutDialog/MoneyOutFormFields.js b/src/containers/Dialogs/MoneyOutDialog/MoneyOutFormFields.js new file mode 100644 index 000000000..f3a97913a --- /dev/null +++ b/src/containers/Dialogs/MoneyOutDialog/MoneyOutFormFields.js @@ -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 ( +
+ + + + +
+ ); +} + +export default MoneyOutFormFields; diff --git a/src/containers/Dialogs/MoneyOutDialog/OtherExpense/OtherExpenseFloatingActions.js b/src/containers/Dialogs/MoneyOutDialog/OtherExpense/OtherExpenseFloatingActions.js deleted file mode 100644 index acd9877e9..000000000 --- a/src/containers/Dialogs/MoneyOutDialog/OtherExpense/OtherExpenseFloatingActions.js +++ /dev/null @@ -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 ( -
-
- - - - -
-
- ); -} - -export default compose(withDialogActions)(OtherExpenseFloatingActions); diff --git a/src/containers/Dialogs/MoneyOutDialog/OtherExpense/OtherExpenseForm.schema.js b/src/containers/Dialogs/MoneyOutDialog/OtherExpense/OtherExpenseForm.schema.js deleted file mode 100644 index fc4d58460..000000000 --- a/src/containers/Dialogs/MoneyOutDialog/OtherExpense/OtherExpenseForm.schema.js +++ /dev/null @@ -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; diff --git a/src/containers/Dialogs/MoneyOutDialog/OtherExpense/OtherExpenseFormContent.js b/src/containers/Dialogs/MoneyOutDialog/OtherExpense/OtherExpenseFormContent.js deleted file mode 100644 index 4f578485a..000000000 --- a/src/containers/Dialogs/MoneyOutDialog/OtherExpense/OtherExpenseFormContent.js +++ /dev/null @@ -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 ( -
- - - - ); -} diff --git a/src/containers/Dialogs/MoneyOutDialog/OtherExpense/OtherExpnseFormFields.js b/src/containers/Dialogs/MoneyOutDialog/OtherExpense/OtherExpnseFormFields.js index 93cabd62d..39833ff96 100644 --- a/src/containers/Dialogs/MoneyOutDialog/OtherExpense/OtherExpnseFormFields.js +++ b/src/containers/Dialogs/MoneyOutDialog/OtherExpense/OtherExpnseFormFields.js @@ -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 ( -
+ {/*------------ Date -----------*/} @@ -188,7 +188,7 @@ function OtherExpnseFormFields() { )} -
+ ); } diff --git a/src/containers/Dialogs/MoneyOutDialog/OwnerDrawings/OwnerDrawingsForm.js b/src/containers/Dialogs/MoneyOutDialog/OwnerDrawings/OwnerDrawingsForm.js deleted file mode 100644 index 267ad4284..000000000 --- a/src/containers/Dialogs/MoneyOutDialog/OwnerDrawings/OwnerDrawingsForm.js +++ /dev/null @@ -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 ( - - - - ); -} - -export default compose( - withDialogActions, - withCurrentOrganization(), -)(OwnerDrawingsForm); diff --git a/src/containers/Dialogs/MoneyOutDialog/OwnerDrawings/OwnerDrawingsForm.schema.js b/src/containers/Dialogs/MoneyOutDialog/OwnerDrawings/OwnerDrawingsForm.schema.js deleted file mode 100644 index dfc02dc6e..000000000 --- a/src/containers/Dialogs/MoneyOutDialog/OwnerDrawings/OwnerDrawingsForm.schema.js +++ /dev/null @@ -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; diff --git a/src/containers/Dialogs/MoneyOutDialog/OwnerDrawings/OwnerDrawingsFormContent.js b/src/containers/Dialogs/MoneyOutDialog/OwnerDrawings/OwnerDrawingsFormContent.js deleted file mode 100644 index cab946864..000000000 --- a/src/containers/Dialogs/MoneyOutDialog/OwnerDrawings/OwnerDrawingsFormContent.js +++ /dev/null @@ -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 ( -
- - - - ); -} diff --git a/src/containers/Dialogs/MoneyOutDialog/OwnerDrawings/OwnerDrawingsFormFields.js b/src/containers/Dialogs/MoneyOutDialog/OwnerDrawings/OwnerDrawingsFormFields.js index b3e08aedc..d38611321 100644 --- a/src/containers/Dialogs/MoneyOutDialog/OwnerDrawings/OwnerDrawingsFormFields.js +++ b/src/containers/Dialogs/MoneyOutDialog/OwnerDrawings/OwnerDrawingsFormFields.js @@ -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 ( -
+ {/*------------ 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() { )} -
+ ); } diff --git a/src/containers/Dialogs/MoneyOutDialog/TransactionTypeFields.js b/src/containers/Dialogs/MoneyOutDialog/TransactionTypeFields.js new file mode 100644 index 000000000..e00d7e512 --- /dev/null +++ b/src/containers/Dialogs/MoneyOutDialog/TransactionTypeFields.js @@ -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 ( +
+ + + {/*------------ Current account -----------*/} + + {({ form, field: { value }, meta: { error, touched } }) => ( + } + labelInfo={} + intent={inputIntent({ error, touched })} + helperText={} + minimal={true} + className={classNames( + CLASSES.FILL, + 'form-group--cashflow_account_id', + )} + > + + form.setFieldValue('cashflow_account_id', id) + } + inputProps={{ + intent: inputIntent({ error, touched }), + }} + /> + + )} + + {/*------------ Transaction type -----------*/} + + + + {({ + form: { values, setFieldValue }, + field: { value }, + meta: { error, touched }, + }) => ( + } + labelInfo={} + helperText={} + intent={inputIntent({ error, touched })} + className={classNames( + CLASSES.FILL, + 'form-group--transaction_type', + )} + > + { + setFieldValue('transaction_type', type.value); + }} + filterable={false} + selectedItem={value} + selectedItemProp={'value'} + textProp={'name'} + popoverProps={{ minimal: true }} + /> + + )} + + + +
+ ); +} + +export default TransactionTypeFields; diff --git a/src/containers/Dialogs/MoneyOutDialog/TransferToAccount/TransferToAccountFloatingActions.js b/src/containers/Dialogs/MoneyOutDialog/TransferToAccount/TransferToAccountFloatingActions.js deleted file mode 100644 index ce428f017..000000000 --- a/src/containers/Dialogs/MoneyOutDialog/TransferToAccount/TransferToAccountFloatingActions.js +++ /dev/null @@ -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 ( -
-
- - - - -
-
- ); -} - -export default compose(withDialogActions)(TransferToAccountFloatingActions); diff --git a/src/containers/Dialogs/MoneyOutDialog/TransferToAccount/TransferToAccountForm.js b/src/containers/Dialogs/MoneyOutDialog/TransferToAccount/TransferToAccountForm.js deleted file mode 100644 index d2b4b16e3..000000000 --- a/src/containers/Dialogs/MoneyOutDialog/TransferToAccount/TransferToAccountForm.js +++ /dev/null @@ -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 ( - - - - ); -} - -export default compose( - withDialogActions, - withCurrentOrganization(), -)(TransferToAccountForm); diff --git a/src/containers/Dialogs/MoneyOutDialog/TransferToAccount/TransferToAccountFormFields.js b/src/containers/Dialogs/MoneyOutDialog/TransferToAccount/TransferToAccountFormFields.js index 5bf120c87..7863a0637 100644 --- a/src/containers/Dialogs/MoneyOutDialog/TransferToAccount/TransferToAccountFormFields.js +++ b/src/containers/Dialogs/MoneyOutDialog/TransferToAccount/TransferToAccountFormFields.js @@ -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 ( -
+ {/*------------ Date -----------*/} @@ -190,7 +190,7 @@ function TransferToAccountFormFields() { )} -
+ ); } diff --git a/src/containers/Dialogs/MoneyOutDialog/TransferToAccount/TransferToAccountFromContent.js b/src/containers/Dialogs/MoneyOutDialog/TransferToAccount/TransferToAccountFromContent.js deleted file mode 100644 index 508f0b330..000000000 --- a/src/containers/Dialogs/MoneyOutDialog/TransferToAccount/TransferToAccountFromContent.js +++ /dev/null @@ -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 ( -
- - - - ); -} diff --git a/src/containers/Dialogs/MoneyOutDialog/index.js b/src/containers/Dialogs/MoneyOutDialog/index.js index d7fd6e5d0..2cf31320e 100644 --- a/src/containers/Dialogs/MoneyOutDialog/index.js +++ b/src/containers/Dialogs/MoneyOutDialog/index.js @@ -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 ( } + 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({ diff --git a/src/lang/en/index.json b/src/lang/en/index.json index f2333197a..41a8cc2b6 100644 --- a/src/lang/en/index.json +++ b/src/lang/en/index.json @@ -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" } diff --git a/src/style/pages/CashFlow/CashflowTransactionForm.scss b/src/style/pages/CashFlow/CashflowTransactionForm.scss index 81c9c1671..db852724d 100644 --- a/src/style/pages/CashFlow/CashflowTransactionForm.scss +++ b/src/style/pages/CashFlow/CashflowTransactionForm.scss @@ -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; }