From e94a386fe822e37593b6ddea468476a84079d379 Mon Sep 17 00:00:00 2001 From: elforjani13 <39470382+elforjani13@users.noreply.github.com> Date: Sun, 24 Oct 2021 20:01:51 +0200 Subject: [PATCH] feat: add auto increment/ money out. --- .../Dialogs/MoneyOutDialog/MoneyOutForm.js | 22 +++- .../MoneyOutDialog/MoneyOutFormContent.js | 3 +- .../MoneyOutDialog/MoneyOutFormDialog.js | 27 +++++ .../OtherExpense/OtherExpnseFormFields.js | 79 +++++++++++++- .../OwnerDrawings/OwnerDrawingsFormFields.js | 79 +++++++++++++- .../TransferToAccountFormFields.js | 80 ++++++++++++-- .../Dialogs/MoneyOutDialog/utils.js | 12 ++ .../TransactionNumberDialogContent.js | 103 ++++++++++++++++++ .../TransactionNumberDialogProvider.js | 26 +++++ .../Dialogs/TransactionNumberDialog/index.js | 42 +++++++ src/containers/Settings/withSettings.js | 2 +- src/hooks/query/settings.js | 21 +++- src/hooks/query/types.js | 1 + src/lang/en/index.json | 7 +- 14 files changed, 476 insertions(+), 28 deletions(-) create mode 100644 src/containers/Dialogs/MoneyOutDialog/MoneyOutFormDialog.js create mode 100644 src/containers/Dialogs/MoneyOutDialog/utils.js create mode 100644 src/containers/Dialogs/TransactionNumberDialog/TransactionNumberDialogContent.js create mode 100644 src/containers/Dialogs/TransactionNumberDialog/TransactionNumberDialogProvider.js create mode 100644 src/containers/Dialogs/TransactionNumberDialog/index.js diff --git a/src/containers/Dialogs/MoneyOutDialog/MoneyOutForm.js b/src/containers/Dialogs/MoneyOutDialog/MoneyOutForm.js index 6a5c08dcb..8b7f537c7 100644 --- a/src/containers/Dialogs/MoneyOutDialog/MoneyOutForm.js +++ b/src/containers/Dialogs/MoneyOutDialog/MoneyOutForm.js @@ -14,10 +14,11 @@ import { CreateMoneyOutSchema } from './MoneyOutForm.schema'; import { useMoneyOutDialogContext } from './MoneyOutDialogProvider'; +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 MoneyOutForm({ // #withCurrentOrganization organization: { base_currency }, + + // #withSettings + transactionNextNumber, + transactionNumberPrefix, + transactionIncrementMode, }) { const { dialogName, @@ -46,11 +52,20 @@ function MoneyOutForm({ submitPayload, } = useMoneyOutDialogContext(); + // 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, }; @@ -90,4 +105,9 @@ function MoneyOutForm({ export default compose( withDialogActions, withCurrentOrganization(), + withSettings(({ cashflowSetting }) => ({ + transactionNextNumber: cashflowSetting?.nextNumber, + transactionNumberPrefix: cashflowSetting?.numberPrefix, + transactionIncrementMode: cashflowSetting?.autoIncrement, + })), )(MoneyOutForm); diff --git a/src/containers/Dialogs/MoneyOutDialog/MoneyOutFormContent.js b/src/containers/Dialogs/MoneyOutDialog/MoneyOutFormContent.js index b44581433..98b9b545a 100644 --- a/src/containers/Dialogs/MoneyOutDialog/MoneyOutFormContent.js +++ b/src/containers/Dialogs/MoneyOutDialog/MoneyOutFormContent.js @@ -2,8 +2,8 @@ import React from 'react'; import { Form } from 'formik'; import MoneyOutFormFields from './MoneyOutFormFields'; +import MoneyOutFormDialog from './MoneyOutFormDialog' import MoneyOutFloatingActions from './MoneyOutFloatingActions'; - /** * Money out form content. */ @@ -11,6 +11,7 @@ export default function MoneyOutFormContent() { return (
+ ); diff --git a/src/containers/Dialogs/MoneyOutDialog/MoneyOutFormDialog.js b/src/containers/Dialogs/MoneyOutDialog/MoneyOutFormDialog.js new file mode 100644 index 000000000..6ce2d9b84 --- /dev/null +++ b/src/containers/Dialogs/MoneyOutDialog/MoneyOutFormDialog.js @@ -0,0 +1,27 @@ +import React from 'react'; +import { useFormikContext } from 'formik'; + +import TransactionNumberDialog from '../../Dialogs/TransactionNumberDialog'; + +/** + * Money out form dialog. + */ +export default function MoneyOutFormDialog() { + 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/MoneyOutDialog/OtherExpense/OtherExpnseFormFields.js b/src/containers/Dialogs/MoneyOutDialog/OtherExpense/OtherExpnseFormFields.js index 39833ff96..3366d5c6f 100644 --- a/src/containers/Dialogs/MoneyOutDialog/OtherExpense/OtherExpnseFormFields.js +++ b/src/containers/Dialogs/MoneyOutDialog/OtherExpense/OtherExpnseFormFields.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 { useMoneyOutDialogContext } from '../MoneyOutDialogProvider'; +import { useObserveTransactionNoSettings } from '../utils'; +import withSettings from 'containers/Settings/withSettings'; +import withDialogActions from 'containers/Dialog/withDialogActions'; /** * Other expense form fields. */ -function OtherExpnseFormFields() { +function OtherExpnseFormFields({ + // #withDialogActions + openDialog, + + // #withSettings + transactionAutoIncrement, + transactionNumberPrefix, + transactionNextNumber, +}) { // Money in dialog context. const { accounts } = useMoneyOutDialogContext(); 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 OtherExpnseFormFields() { helperText={} className={'form-group--transaction_number'} > - + + + , + }} + tooltip={true} + tooltipProps={{ + content: ( + + ), + position: Position.BOTTOM_LEFT, + }} + /> + )} @@ -192,4 +252,11 @@ function OtherExpnseFormFields() { ); } -export default OtherExpnseFormFields; +export default compose( + withDialogActions, + withSettings(({ cashflowSetting }) => ({ + transactionAutoIncrement: cashflowSetting?.autoIncrement, + transactionNextNumber: cashflowSetting?.nextNumber, + transactionNumberPrefix: cashflowSetting?.numberPrefix, + })), +)(OtherExpnseFormFields); diff --git a/src/containers/Dialogs/MoneyOutDialog/OwnerDrawings/OwnerDrawingsFormFields.js b/src/containers/Dialogs/MoneyOutDialog/OwnerDrawings/OwnerDrawingsFormFields.js index d38611321..bdf8a2d2c 100644 --- a/src/containers/Dialogs/MoneyOutDialog/OwnerDrawings/OwnerDrawingsFormFields.js +++ b/src/containers/Dialogs/MoneyOutDialog/OwnerDrawings/OwnerDrawingsFormFields.js @@ -15,6 +15,8 @@ import { InputPrependText, MoneyInputGroup, FieldRequiredHint, + InputPrependButton, + Icon, Col, Row, } from 'components'; @@ -26,19 +28,56 @@ import { momentFormatter, tansformDateValue, handleDateChange, + compose, } from 'utils'; import { CLASSES } from 'common/classes'; import { useMoneyOutDialogContext } from '../MoneyOutDialogProvider'; +import { useObserveTransactionNoSettings } from '../utils'; +import withSettings from 'containers/Settings/withSettings'; +import withDialogActions from 'containers/Dialog/withDialogActions'; /** * Owner drawings form fields. */ -function OwnerDrawingsFormFields() { +function OwnerDrawingsFormFields({ + // #withDialogActions + openDialog, + + // #withSettings + transactionAutoIncrement, + transactionNumberPrefix, + transactionNextNumber, +}) { // Money out dialog context. const { accounts } = useMoneyOutDialogContext(); 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 ( @@ -80,10 +119,31 @@ function OwnerDrawingsFormFields() { helperText={} className={'form-group--transaction_number'} > - + + + , + }} + tooltip={true} + tooltipProps={{ + content: ( + + ), + position: Position.BOTTOM_LEFT, + }} + /> + )} @@ -188,4 +248,11 @@ function OwnerDrawingsFormFields() { ); } -export default OwnerDrawingsFormFields; +export default compose( + withDialogActions, + withSettings(({ cashflowSetting }) => ({ + transactionAutoIncrement: cashflowSetting?.autoIncrement, + transactionNextNumber: cashflowSetting?.nextNumber, + transactionNumberPrefix: cashflowSetting?.numberPrefix, + })), +)(OwnerDrawingsFormFields); diff --git a/src/containers/Dialogs/MoneyOutDialog/TransferToAccount/TransferToAccountFormFields.js b/src/containers/Dialogs/MoneyOutDialog/TransferToAccount/TransferToAccountFormFields.js index 7863a0637..3f03027a5 100644 --- a/src/containers/Dialogs/MoneyOutDialog/TransferToAccount/TransferToAccountFormFields.js +++ b/src/containers/Dialogs/MoneyOutDialog/TransferToAccount/TransferToAccountFormFields.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 { useMoneyOutDialogContext } from '../MoneyOutDialogProvider'; +import { useObserveTransactionNoSettings } from '../utils'; +import withSettings from 'containers/Settings/withSettings'; +import withDialogActions from 'containers/Dialog/withDialogActions'; /** * Transfer to account form fields. */ -function TransferToAccountFormFields() { +function TransferToAccountFormFields({ + // #withDialogActions + openDialog, + + // #withSettings + transactionAutoIncrement, + transactionNumberPrefix, + transactionNextNumber, +}) { // Money in dialog context. const { accounts } = useMoneyOutDialogContext(); const accountRef = 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 TransferToAccountFormFields() { helperText={} className={'form-group--transaction_number'} > - + + + , + }} + tooltip={true} + tooltipProps={{ + content: ( + + ), + position: Position.BOTTOM_LEFT, + }} + /> + )} @@ -193,5 +253,11 @@ function TransferToAccountFormFields() { ); } - -export default TransferToAccountFormFields; +export default compose( + withDialogActions, + withSettings(({ cashflowSetting }) => ({ + transactionAutoIncrement: cashflowSetting?.autoIncrement, + transactionNextNumber: cashflowSetting?.nextNumber, + transactionNumberPrefix: cashflowSetting?.numberPrefix, + })), +)(TransferToAccountFormFields); diff --git a/src/containers/Dialogs/MoneyOutDialog/utils.js b/src/containers/Dialogs/MoneyOutDialog/utils.js new file mode 100644 index 000000000..5781d03d6 --- /dev/null +++ b/src/containers/Dialogs/MoneyOutDialog/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]); +}; diff --git a/src/containers/Dialogs/TransactionNumberDialog/TransactionNumberDialogContent.js b/src/containers/Dialogs/TransactionNumberDialog/TransactionNumberDialogContent.js new file mode 100644 index 000000000..9bd8ed353 --- /dev/null +++ b/src/containers/Dialogs/TransactionNumberDialog/TransactionNumberDialogContent.js @@ -0,0 +1,103 @@ +import React from 'react'; +import intl from 'react-intl-universal'; +import { useSaveSettings } from 'hooks/query'; + +import { TransactionNumberDialogProvider } from './TransactionNumberDialogProvider'; +import ReferenceNumberForm from 'containers/JournalNumber/ReferenceNumberForm'; + +import withDialogActions from 'containers/Dialog/withDialogActions'; +import withSettings from 'containers/Settings/withSettings'; +import withSettingsActions from 'containers/Settings/withSettingsActions'; +import { compose } from 'utils'; +import { + transformFormToSettings, + transformSettingsToForm, +} from 'containers/JournalNumber/utils'; + +/** + * Transaction number dialog content. + */ +function TransactionNumberDialogContent({ + // #ownProps + initialValues, + onConfirm, + + // #withSettings + nextNumber, + numberPrefix, + autoIncrement, + + // #withDialogActions + closeDialog, +}) { + const { mutateAsync: saveSettings } = useSaveSettings(); + const [referenceFormValues, setReferenceFormValues] = React.useState(null); + + // Handle the submit form. + const handleSubmitForm = (values, { setSubmitting }) => { + // Handle the form success. + const handleSuccess = () => { + setSubmitting(false); + closeDialog('transaction-number-form'); + onConfirm(values); + }; + // Handle the form errors. + const handleErrors = () => { + setSubmitting(false); + }; + if (values.incrementMode === 'manual-transaction') { + handleSuccess(); + return; + } + // Transformes the form values to settings to save it. + const options = transformFormToSettings(values, 'cashflow'); + + // Save the settings. + saveSettings({ options }).then(handleSuccess).catch(handleErrors); + }; + + // Description. + const description = + referenceFormValues?.incrementMode === 'auto' + ? intl.get('cash_flow.auto_increment.auto') + : intl.get('cash_flow.auto_increment.manually'); + + // Handle the dialog close. + const handleClose = () => { + closeDialog('transaction-number-form'); + }; + + // Handle form change. + const handleChange = (values) => { + setReferenceFormValues(values); + }; + + return ( + + + + ); +} + +export default compose( + withDialogActions, + withSettingsActions, + withSettings(({ cashflowSetting }) => ({ + nextNumber: cashflowSetting?.nextNumber, + numberPrefix: cashflowSetting?.numberPrefix, + autoIncrement: cashflowSetting?.autoIncrement, + })), +)(TransactionNumberDialogContent); diff --git a/src/containers/Dialogs/TransactionNumberDialog/TransactionNumberDialogProvider.js b/src/containers/Dialogs/TransactionNumberDialog/TransactionNumberDialogProvider.js new file mode 100644 index 000000000..e66da0e84 --- /dev/null +++ b/src/containers/Dialogs/TransactionNumberDialog/TransactionNumberDialogProvider.js @@ -0,0 +1,26 @@ +import React from 'react'; +import { DialogContent } from 'components'; +import { useSettingCashFlow } from 'hooks/query'; + +const TransactionNumberDialogContext = React.createContext(); + +/** + * Transaction number dialog provider. + */ +function TransactionNumberDialogProvider({ query, ...props }) { + const { isLoading: isSettingsLoading } = useSettingCashFlow(); + + // Provider payload. + const provider = { isSettingsLoading }; + + return ( + + + + ); +} + +const useTransactionNumberDialogContext = () => + React.useContext(TransactionNumberDialogContext); + +export { TransactionNumberDialogProvider, useTransactionNumberDialogContext }; diff --git a/src/containers/Dialogs/TransactionNumberDialog/index.js b/src/containers/Dialogs/TransactionNumberDialog/index.js new file mode 100644 index 000000000..019b235df --- /dev/null +++ b/src/containers/Dialogs/TransactionNumberDialog/index.js @@ -0,0 +1,42 @@ +import React from 'react'; +import { FormattedMessage as T } from 'components'; +import { Dialog, DialogSuspense } from 'components'; +import withDialogRedux from 'components/DialogReduxConnect'; +import { compose, saveInvoke } from 'utils'; + +const TransactionNumberDialogContent = React.lazy(() => + import('./TransactionNumberDialogContent'), +); + +/** + * Transaction number dialog. + */ +function TransctionNumberDialog({ + dialogName, + payload: { initialFormValues }, + isOpen, + onConfirm, +}) { + const handleConfirm = (values) => { + saveInvoke(onConfirm, values); + }; + + return ( + } + name={dialogName} + autoFocus={true} + canEscapeKeyClose={true} + isOpen={isOpen} + > + + + + + ); +} + +export default compose(withDialogRedux())(TransctionNumberDialog); diff --git a/src/containers/Settings/withSettings.js b/src/containers/Settings/withSettings.js index f9bc3ba26..77ec97cc8 100644 --- a/src/containers/Settings/withSettings.js +++ b/src/containers/Settings/withSettings.js @@ -18,7 +18,7 @@ export default (mapState) => { vendorsSettings: state.settings.data.vendors, cashflowSettings: state.settings.data.cashflowAccounts, cashflowTransactionsSettings: state.settings.data.cashflowTransactions, - + cashflowSetting: state.settings.data.cashflow, }; return mapState ? mapState(mapped, state, props) : mapped; }; diff --git a/src/hooks/query/settings.js b/src/hooks/query/settings.js index c9f95fb6d..22e25c72b 100644 --- a/src/hooks/query/settings.js +++ b/src/hooks/query/settings.js @@ -79,7 +79,7 @@ export function useSettingsPaymentReceives(props) { /** * Retrieve sale receipts settings. - * @param {*} props + * @param {*} props */ export function useSettingsReceipts(props) { return useSettingsQuery( @@ -91,7 +91,7 @@ export function useSettingsReceipts(props) { /** * Retrieve sale receipts settings. - * @param {*} props + * @param {*} props */ export function useSettingsManualJournals(props) { return useSettingsQuery( @@ -103,12 +103,23 @@ export function useSettingsManualJournals(props) { /** * Retrieve sale receipts settings. - * @param {*} props + * @param {*} props */ - export function useSettingsItems(props) { +export function useSettingsItems(props) { return useSettingsQuery( [t.SETTING, t.SETTING_ITEMS], { group: 'items' }, props, ); -} \ No newline at end of file +} + +/** + * Retrieve cashflow settings. + */ +export function useSettingCashFlow(props) { + return useSettingsQuery( + [t.SETTING, t.SETTING_CASHFLOW], + { group: 'cashflow' }, + props, + ); +} diff --git a/src/hooks/query/types.js b/src/hooks/query/types.js index 2764784f4..2c72013bd 100644 --- a/src/hooks/query/types.js +++ b/src/hooks/query/types.js @@ -100,6 +100,7 @@ const SETTING = { SETTING_PAYMENT_RECEIVES: 'SETTING_PAYMENT_RECEIVES', SETTING_MANUAL_JOURNALS: 'SETTING_MANUAL_JOURNALS', SETTING_ITEMS: 'SETTING_ITEMS', + SETTING_CASHFLOW: 'SETTING_CASHFLOW', }; const ORGANIZATIONS = { diff --git a/src/lang/en/index.json b/src/lang/en/index.json index 2d2636e07..bc0448582 100644 --- a/src/lang/en/index.json +++ b/src/lang/en/index.json @@ -641,6 +641,7 @@ "Estimate_number_settings": "Estimate Number Settings", "receipt_number_settings": "Receipt Number Settings", "invoice_number_settings": "Invoice Number Settings", + "transaction_number_settings": "Transaction Number Settings", "receipt_number": "Receipt Number", "estimate_number_is_not_unqiue": "Estimate number is not unqiue", "invoice_number_is_not_unqiue": "Invoice number is not unqiue", @@ -1393,7 +1394,11 @@ "cash_flow_transaction.label_transfer_to_account":"Transfer to account", "cash_flow_transaction.label_current_account":"Current account", "cash_flow_transaction.delete.alert_message":"The cashflow transaction has been deleted successfully", - "cash_flow_transaction_once_delete_this_transaction_you_will_able_to_restore_it": "Once you delete this transaction, you won't be able to restore it later. Are you sure you want to delete this transaction?" + "cash_flow_transaction_once_delete_this_transaction_you_will_able_to_restore_it": "Once you delete this transaction, you won't be able to restore it later. Are you sure you want to delete this transaction?", + "cash_flow.auto_increment.auto":"Your transaction numbers are set on auto-increment mode. Are you sure changing this setting?", + "cash_flow.auto_increment.manually":"Yor transaction numbers are set on manual mode. Are you sure chaning this settings?", + "cash_flow.setting_your_auto_generated_transaction_number": "Setting your auto-generated transaction number" + }