From 9ecc7f58e76713b231cd867dc31c88e8a939ee05 Mon Sep 17 00:00:00 2001 From: elforjani13 <39470382+elforjani13@users.noreply.github.com> Date: Sun, 24 Oct 2021 20:01:10 +0200 Subject: [PATCH] feat: add auto increment/ money in. --- .../Dialogs/MoneyInDialog/MoneyInForm.js | 22 ++++- .../MoneyInDialog/MoneyInFormContent.js | 2 + .../MoneyInDialog/MoneyInFormDialog.js | 28 +++++++ .../OtherIncome/OtherIncomeFormFields.js | 79 ++++++++++++++++-- .../OwnerContributionFormFields.js | 81 +++++++++++++++++-- .../TransferFromAccountFormFields.js | 78 ++++++++++++++++-- src/containers/Dialogs/MoneyInDialog/utils.js | 12 +++ 7 files changed, 283 insertions(+), 19 deletions(-) create mode 100644 src/containers/Dialogs/MoneyInDialog/MoneyInFormDialog.js create mode 100644 src/containers/Dialogs/MoneyInDialog/utils.js diff --git a/src/containers/Dialogs/MoneyInDialog/MoneyInForm.js b/src/containers/Dialogs/MoneyInDialog/MoneyInForm.js index dfe4ab7fe..39dae9941 100644 --- a/src/containers/Dialogs/MoneyInDialog/MoneyInForm.js +++ b/src/containers/Dialogs/MoneyInDialog/MoneyInForm.js @@ -14,10 +14,11 @@ import { CreateMoneyInFormSchema } from './MoneyInForm.schema'; import { useMoneyInDailogContext } from './MoneyInDialogProvider'; +import withSettings from 'containers/Settings/withSettings'; import withDialogActions from 'containers/Dialog/withDialogActions'; import withCurrentOrganization from 'containers/Organization/withCurrentOrganization'; -import { compose } from 'utils'; +import { compose, transactionNumber } from 'utils'; const defaultInitialValues = { date: moment(new Date()).format('YYYY-MM-DD'), @@ -37,6 +38,11 @@ function MoneyInForm({ // #withCurrentOrganization organization: { base_currency }, + + // #withSettings + transactionNextNumber, + transactionNumberPrefix, + transactionIncrementMode, }) { const { dialogName, @@ -46,11 +52,20 @@ function MoneyInForm({ submitPayload, } = useMoneyInDailogContext(); + // transaction number. + const transactionNo = transactionNumber( + transactionNumberPrefix, + transactionNextNumber, + ); + // Initial form values. const initialValues = { ...defaultInitialValues, currency_code: base_currency, transaction_type: accountType, + ...(transactionIncrementMode && { + transaction_number: transactionNo, + }), cashflow_account_id: accountId, }; @@ -91,4 +106,9 @@ function MoneyInForm({ export default compose( withDialogActions, withCurrentOrganization(), + withSettings(({ cashflowSetting }) => ({ + transactionNextNumber: cashflowSetting?.nextNumber, + transactionNumberPrefix: cashflowSetting?.numberPrefix, + transactionIncrementMode: cashflowSetting?.autoIncrement, + })), )(MoneyInForm); diff --git a/src/containers/Dialogs/MoneyInDialog/MoneyInFormContent.js b/src/containers/Dialogs/MoneyInDialog/MoneyInFormContent.js index c3e01b84e..ee9e5b874 100644 --- a/src/containers/Dialogs/MoneyInDialog/MoneyInFormContent.js +++ b/src/containers/Dialogs/MoneyInDialog/MoneyInFormContent.js @@ -2,6 +2,7 @@ import React from 'react'; import { Form } from 'formik'; import MoneyInFormFields from './MoneyInFormFields'; +import MoneyInFormDialog from './MoneyInFormDialog'; import MoneyInFloatingActions from './MoneyInFloatingActions'; /** @@ -11,6 +12,7 @@ export default function MoneyInFormContent() { return (
+ ); diff --git a/src/containers/Dialogs/MoneyInDialog/MoneyInFormDialog.js b/src/containers/Dialogs/MoneyInDialog/MoneyInFormDialog.js new file mode 100644 index 000000000..26d2046ec --- /dev/null +++ b/src/containers/Dialogs/MoneyInDialog/MoneyInFormDialog.js @@ -0,0 +1,28 @@ +import React from 'react'; +import { useFormikContext } from 'formik'; + +import TransactionNumberDialog from '../../Dialogs/TransactionNumberDialog'; + +/** + * Moneny in / transaction number form dialog. + */ +export default function MoneyInFormDialog() { + const { setFieldValue } = useFormikContext(); + + // Update the form once the transaction number form submit confirm. + const handleTransactionNumberFormConfirm = ({ + incrementNumber, + manually, + }) => { + setFieldValue('transaction_number', incrementNumber || ''); + setFieldValue('transaction_number_manually', manually); + }; + return ( + + + + ); +} diff --git a/src/containers/Dialogs/MoneyInDialog/OtherIncome/OtherIncomeFormFields.js b/src/containers/Dialogs/MoneyInDialog/OtherIncome/OtherIncomeFormFields.js index f0e10f72a..a21c12e9e 100644 --- a/src/containers/Dialogs/MoneyInDialog/OtherIncome/OtherIncomeFormFields.js +++ b/src/containers/Dialogs/MoneyInDialog/OtherIncome/OtherIncomeFormFields.js @@ -15,8 +15,10 @@ import { InputPrependText, MoneyInputGroup, FieldRequiredHint, + Icon, Col, Row, + InputPrependButton, } from 'components'; import { DateInput } from '@blueprintjs/datetime'; import { useAutofocus } from 'hooks'; @@ -27,19 +29,56 @@ import { momentFormatter, tansformDateValue, handleDateChange, + compose, } from 'utils'; import { CLASSES } from 'common/classes'; import { useMoneyInDailogContext } from '../MoneyInDialogProvider'; +import { useObserveTransactionNoSettings } from '../utils'; +import withSettings from 'containers/Settings/withSettings'; +import withDialogActions from 'containers/Dialog/withDialogActions'; /** * Other income form fields. */ -function OtherIncomeFormFields() { +function OtherIncomeFormFields({ + // #withDialogActions + openDialog, + + // #withSettings + transactionAutoIncrement, + transactionNumberPrefix, + transactionNextNumber, +}) { // Money in dialog context. const { accounts } = useMoneyInDailogContext(); const amountFieldRef = useAutofocus(); + // Handle tranaction number changing. + const handleTransactionNumberChange = () => { + openDialog('transaction-number-form'); + }; + + // Handle transaction no. field blur. + const handleTransactionNoBlur = (form, field) => (event) => { + const newValue = event.target.value; + + if (field.value !== newValue && transactionAutoIncrement) { + openDialog('transaction-number-form', { + initialFormValues: { + manualTransactionNo: newValue, + incrementMode: 'manual-transaction', + }, + }); + } + }; + + // Syncs transaction number settings with form. + useObserveTransactionNoSettings( + transactionNumberPrefix, + transactionNextNumber, + ); + return ( @@ -81,10 +120,31 @@ function OtherIncomeFormFields() { helperText={} className={'form-group--transaction_number'} > - + + + , + }} + tooltip={true} + tooltipProps={{ + content: ( + + ), + position: Position.BOTTOM_LEFT, + }} + /> + )} @@ -191,4 +251,11 @@ function OtherIncomeFormFields() { ); } -export default OtherIncomeFormFields; +export default compose( + withDialogActions, + withSettings(({ cashflowSetting }) => ({ + transactionAutoIncrement: cashflowSetting?.autoIncrement, + transactionNextNumber: cashflowSetting?.nextNumber, + transactionNumberPrefix: cashflowSetting?.numberPrefix, + })), +)(OtherIncomeFormFields); diff --git a/src/containers/Dialogs/MoneyInDialog/OwnerContribution/OwnerContributionFormFields.js b/src/containers/Dialogs/MoneyInDialog/OwnerContribution/OwnerContributionFormFields.js index 203e5387f..edaead623 100644 --- a/src/containers/Dialogs/MoneyInDialog/OwnerContribution/OwnerContributionFormFields.js +++ b/src/containers/Dialogs/MoneyInDialog/OwnerContribution/OwnerContributionFormFields.js @@ -15,8 +15,10 @@ import { InputPrependText, MoneyInputGroup, FieldRequiredHint, + Icon, Col, Row, + InputPrependButton, } from 'components'; import { DateInput } from '@blueprintjs/datetime'; import { useAutofocus } from 'hooks'; @@ -26,18 +28,57 @@ import { momentFormatter, tansformDateValue, handleDateChange, + compose } from 'utils'; import { CLASSES } from 'common/classes'; import { useMoneyInDailogContext } from '../MoneyInDialogProvider'; +import { useObserveTransactionNoSettings } from '../utils'; +import withSettings from 'containers/Settings/withSettings'; +import withDialogActions from 'containers/Dialog/withDialogActions'; +/** /** * Owner contribution form fields. */ -function OwnerContributionFormFields() { +function OwnerContributionFormFields({ + // #withDialogActions + openDialog, + + // #withSettings + transactionAutoIncrement, + transactionNumberPrefix, + transactionNextNumber, +}) { // Money in dialog context. const { accounts } = useMoneyInDailogContext(); const amountFieldRef = useAutofocus(); + + // Handle tranaction number changing. + const handleTransactionNumberChange = () => { + openDialog('transaction-number-form'); + }; + + // Handle transaction no. field blur. + const handleTransactionNoBlur = (form, field) => (event) => { + const newValue = event.target.value; + + if (field.value !== newValue && transactionAutoIncrement) { + openDialog('transaction-number-form', { + initialFormValues: { + manualTransactionNo: newValue, + incrementMode: 'manual-transaction', + }, + }); + } + }; + + // Syncs transaction number settings with form. + useObserveTransactionNoSettings( + transactionNumberPrefix, + transactionNextNumber, + ); + return ( @@ -79,10 +120,31 @@ function OwnerContributionFormFields() { helperText={} className={'form-group--transaction_number'} > - + + + , + }} + tooltip={true} + tooltipProps={{ + content: ( + + ), + position: Position.BOTTOM_LEFT, + }} + /> + )} @@ -187,4 +249,11 @@ function OwnerContributionFormFields() { ); } -export default OwnerContributionFormFields; +export default compose( + withDialogActions, + withSettings(({ cashflowSetting }) => ({ + transactionAutoIncrement: cashflowSetting?.autoIncrement, + transactionNextNumber: cashflowSetting?.nextNumber, + transactionNumberPrefix: cashflowSetting?.numberPrefix, + })), +)(OwnerContributionFormFields); diff --git a/src/containers/Dialogs/MoneyInDialog/TransferFromAccount/TransferFromAccountFormFields.js b/src/containers/Dialogs/MoneyInDialog/TransferFromAccount/TransferFromAccountFormFields.js index 7925e3c48..61bcf810a 100644 --- a/src/containers/Dialogs/MoneyInDialog/TransferFromAccount/TransferFromAccountFormFields.js +++ b/src/containers/Dialogs/MoneyInDialog/TransferFromAccount/TransferFromAccountFormFields.js @@ -15,8 +15,10 @@ import { InputPrependText, MoneyInputGroup, FieldRequiredHint, + Icon, Col, Row, + InputPrependButton, } from 'components'; import { DateInput } from '@blueprintjs/datetime'; import { useAutofocus } from 'hooks'; @@ -27,19 +29,55 @@ import { momentFormatter, tansformDateValue, handleDateChange, + compose, } from 'utils'; import { CLASSES } from 'common/classes'; import { useMoneyInDailogContext } from '../MoneyInDialogProvider'; +import { useObserveTransactionNoSettings } from '../utils'; +import withSettings from 'containers/Settings/withSettings'; +import withDialogActions from 'containers/Dialog/withDialogActions'; /** * Transfer from account form fields. */ -function TransferFromAccountFormFields() { +function TransferFromAccountFormFields({ + // #withDialogActions + openDialog, + + // #withSettings + transactionAutoIncrement, + transactionNumberPrefix, + transactionNextNumber, +}) { // Money in dialog context. const { accounts } = useMoneyInDailogContext(); const amountFieldRef = useAutofocus(); + // Handle tranaction number changing. + const handleTransactionNumberChange = () => { + openDialog('transaction-number-form'); + }; + + // Handle transaction no. field blur. + const handleTransactionNoBlur = (form, field) => (event) => { + const newValue = event.target.value; + + if (field.value !== newValue && transactionAutoIncrement) { + openDialog('transaction-number-form', { + initialFormValues: { + manualTransactionNo: newValue, + incrementMode: 'manual-transaction', + }, + }); + } + }; + + // Syncs transaction number settings with form. + useObserveTransactionNoSettings( + transactionNumberPrefix, + transactionNextNumber, + ); return ( @@ -81,10 +119,31 @@ function TransferFromAccountFormFields() { helperText={} className={'form-group--transaction_number'} > - + + + , + }} + tooltip={true} + tooltipProps={{ + content: ( + + ), + position: Position.BOTTOM_LEFT, + }} + /> + )} @@ -194,4 +253,11 @@ function TransferFromAccountFormFields() { ); } -export default TransferFromAccountFormFields; +export default compose( + withDialogActions, + withSettings(({ cashflowSetting }) => ({ + transactionAutoIncrement: cashflowSetting?.autoIncrement, + transactionNextNumber: cashflowSetting?.nextNumber, + transactionNumberPrefix: cashflowSetting?.numberPrefix, + })), +)(TransferFromAccountFormFields); diff --git a/src/containers/Dialogs/MoneyInDialog/utils.js b/src/containers/Dialogs/MoneyInDialog/utils.js new file mode 100644 index 000000000..5781d03d6 --- /dev/null +++ b/src/containers/Dialogs/MoneyInDialog/utils.js @@ -0,0 +1,12 @@ +import React from 'react'; +import { useFormikContext } from 'formik'; +import { transactionNumber } from 'utils'; + +export const useObserveTransactionNoSettings = (prefix, nextNumber) => { + const { setFieldValue } = useFormikContext(); + + React.useEffect(() => { + const TransactionNo = transactionNumber(prefix, nextNumber); + setFieldValue('transacttion_numner', TransactionNo); + }, [setFieldValue, prefix, nextNumber]); +};