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

feat: add auto increment/ money out.

Browse Source
This commit is contained in:
elforjani13
2021-10-24 20:01:51 +02:00
parent 9ecc7f58e7
commit e94a386fe8
14 changed files with 476 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/containers/Dialogs/MoneyOutDialog/MoneyOutForm.js
View File

@@ -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);

3
src/containers/Dialogs/MoneyOutDialog/MoneyOutFormContent.js
View File

@@ -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 (
<Form>
<MoneyOutFormFields />
<MoneyOutFormDialog/>
<MoneyOutFloatingActions />
</Form>
);

27
src/containers/Dialogs/MoneyOutDialog/MoneyOutFormDialog.js Normal file
View File

@@ -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 (
<React.Fragment>
<TransactionNumberDialog
dialogName={'transaction-number-form'}
onConfirm={handleTransactionNumberFormConfirm}
/>
</React.Fragment>
);
}

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

@@ -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 (
<React.Fragment>
<Row>
@@ -81,10 +120,31 @@ function OtherExpnseFormFields() {
helperText={<ErrorMessage name="transaction_number" />}
className={'form-group--transaction_number'}
>
<InputGroup
intent={inputIntent({ error, touched })}
{...field}
/>
<ControlGroup fill={true}>
<InputGroup
minimal={true}
value={field.value}
asyncControl={true}
onBlur={handleTransactionNoBlur(form, field)}
/>
<InputPrependButton
buttonProps={{
onClick: handleTransactionNumberChange,
icon: <Icon icon={'settings-18'} />,
}}
tooltip={true}
tooltipProps={{
content: (
<T
id={
'cash_flow.setting_your_auto_generated_transaction_number'
}
/>
),
position: Position.BOTTOM_LEFT,
}}
/>
</ControlGroup>
</FormGroup>
)}
</FastField>
@@ -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);

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

@@ -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 (
<React.Fragment>
<Row>
@@ -80,10 +119,31 @@ function OwnerDrawingsFormFields() {
helperText={<ErrorMessage name="transaction_number" />}
className={'form-group--transaction_number'}
>
<InputGroup
intent={inputIntent({ error, touched })}
{...field}
/>
<ControlGroup fill={true}>
<InputGroup
minimal={true}
value={field.value}
asyncControl={true}
onBlur={handleTransactionNoBlur(form, field)}
/>
<InputPrependButton
buttonProps={{
onClick: handleTransactionNumberChange,
icon: <Icon icon={'settings-18'} />,
}}
tooltip={true}
tooltipProps={{
content: (
<T
id={
'cash_flow.setting_your_auto_generated_transaction_number'
}
/>
),
position: Position.BOTTOM_LEFT,
}}
/>
</ControlGroup>
</FormGroup>
)}
</FastField>
@@ -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);

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

@@ -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 (
<React.Fragment>
<Row>
@@ -81,10 +120,31 @@ function TransferToAccountFormFields() {
helperText={<ErrorMessage name="transaction_number" />}
className={'form-group--transaction_number'}
>
<InputGroup
intent={inputIntent({ error, touched })}
{...field}
/>
<ControlGroup fill={true}>
<InputGroup
minimal={true}
value={field.value}
asyncControl={true}
onBlur={handleTransactionNoBlur(form, field)}
/>
<InputPrependButton
buttonProps={{
onClick: handleTransactionNumberChange,
icon: <Icon icon={'settings-18'} />,
}}
tooltip={true}
tooltipProps={{
content: (
<T
id={
'cash_flow.setting_your_auto_generated_transaction_number'
}
/>
),
position: Position.BOTTOM_LEFT,
}}
/>
</ControlGroup>
</FormGroup>
)}
</FastField>
@@ -193,5 +253,11 @@ function TransferToAccountFormFields() {
</React.Fragment>
);
}
export default TransferToAccountFormFields;
export default compose(
withDialogActions,
withSettings(({ cashflowSetting }) => ({
transactionAutoIncrement: cashflowSetting?.autoIncrement,
transactionNextNumber: cashflowSetting?.nextNumber,
transactionNumberPrefix: cashflowSetting?.numberPrefix,
})),
)(TransferToAccountFormFields);

12
src/containers/Dialogs/MoneyOutDialog/utils.js Normal file
View File

@@ -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]);
};