mirror of
https://github.com/bigcapitalhq/bigcapital.git
synced 2026-02-16 12:50:38 +00:00
feat: Money in & out Dialog.
This commit is contained in:
elforjani13
20
src/containers/Dialogs/MoneyInDialog/MoneyInDialogContent.js
Normal file
20
src/containers/Dialogs/MoneyInDialog/MoneyInDialogContent.js
Normal file
@@ -0,0 +1,20 @@
|
||||
import React from 'react';
|
||||
|
||||
import { MoneyInDialogProvider } from './MoneyInDialogProvider';
|
||||
import MoneyInDialogForm from './MoneyInDialogForm';
|
||||
|
||||
/**
|
||||
* Money in dialog content.
|
||||
*/
|
||||
export default function MoneyInDialogContent({
|
||||
// #ownProps
|
||||
dialogName,
|
||||
accountId,
|
||||
accountType,
|
||||
}) {
|
||||
return (
|
||||
<MoneyInDialogProvider accountId={accountId} dialogName={dialogName}>
|
||||
<MoneyInDialogForm accountType={accountType} />
|
||||
</MoneyInDialogProvider>
|
||||
);
|
||||
}
|
||||
20
src/containers/Dialogs/MoneyInDialog/MoneyInDialogForm.js
Normal file
20
src/containers/Dialogs/MoneyInDialog/MoneyInDialogForm.js
Normal file
@@ -0,0 +1,20 @@
|
||||
import React from 'react';
|
||||
import OwnerContributionForm from './OwnerContribution/OwnerContributionForm';
|
||||
import OtherIncomeForm from './OtherIncome/OtherIncomeForm';
|
||||
|
||||
export default function MoneyInDialogForm({ accountType }) {
|
||||
// Handle from transaction.
|
||||
const handleFromTransaction = () => {
|
||||
switch (accountType) {
|
||||
case 'OWNERS':
|
||||
return <OwnerContributionForm />;
|
||||
|
||||
case 'EQUITY':
|
||||
return <OtherIncomeForm />;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
return <div>{handleFromTransaction()}</div>;
|
||||
}
|
||||
@@ -0,0 +1,42 @@
|
||||
import React from 'react';
|
||||
import { DialogContent } from 'components';
|
||||
import { useCreateCashflowTransaction, useAccounts } from 'hooks/query';
|
||||
|
||||
const MoneyInDialogContent = React.createContext();
|
||||
|
||||
/**
|
||||
* Money in dialog provider.
|
||||
*/
|
||||
function MoneyInDialogProvider({ accountId, dialogName, ...props }) {
|
||||
// Fetches accounts list.
|
||||
const { isFetching: isAccountsLoading, data: accounts } = useAccounts();
|
||||
|
||||
const { mutateAsync: createCashflowTransactionMutate } =
|
||||
useCreateCashflowTransaction();
|
||||
|
||||
// Submit payload.
|
||||
const [submitPayload, setSubmitPayload] = React.useState({});
|
||||
|
||||
// provider.
|
||||
const provider = {
|
||||
accounts,
|
||||
accountId,
|
||||
isAccountsLoading,
|
||||
|
||||
submitPayload,
|
||||
dialogName,
|
||||
|
||||
createCashflowTransactionMutate,
|
||||
setSubmitPayload,
|
||||
};
|
||||
|
||||
return (
|
||||
<DialogContent isLoading={isAccountsLoading}>
|
||||
<MoneyInDialogContent.Provider value={provider} {...props} />
|
||||
</DialogContent>
|
||||
);
|
||||
}
|
||||
|
||||
const useMoneyInDailogContext = () => React.useContext(MoneyInDialogContent);
|
||||
|
||||
export { MoneyInDialogProvider, useMoneyInDailogContext };
|
||||
@@ -0,0 +1,76 @@
|
||||
import React from 'react';
|
||||
import { Intent, Button, Classes } from '@blueprintjs/core';
|
||||
import { useFormikContext } from 'formik';
|
||||
import { FormattedMessage as T } from 'components';
|
||||
|
||||
import { useMoneyInDailogContext } from './MoneyInDialogProvider';
|
||||
|
||||
import withDialogActions from 'containers/Dialog/withDialogActions';
|
||||
import { compose } from 'utils';
|
||||
|
||||
/**
|
||||
* Money in floating actions.
|
||||
*/
|
||||
function MoneyInFloatingActions({
|
||||
// #withDialogActions
|
||||
closeDialog,
|
||||
}) {
|
||||
// Formik context.
|
||||
const { isSubmitting, submitForm } = useFormikContext();
|
||||
// money in dialog context.
|
||||
const { dialogName, setSubmitPayload, submitPayload } =
|
||||
useMoneyInDailogContext();
|
||||
|
||||
// handle submit as draft button click.
|
||||
const handleSubmitDraftBtnClick = (event) => {
|
||||
setSubmitPayload({ publish: false });
|
||||
submitForm();
|
||||
};
|
||||
|
||||
// Handle submit button click.
|
||||
const handleSubmittBtnClick = (event) => {
|
||||
setSubmitPayload({ publish: true });
|
||||
submitForm();
|
||||
};
|
||||
|
||||
// Handle close button click.
|
||||
const handleCloseBtnClick = (event) => {
|
||||
closeDialog(dialogName);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={Classes.DIALOG_FOOTER}>
|
||||
<div className={Classes.DIALOG_FOOTER_ACTIONS}>
|
||||
<Button
|
||||
disabled={isSubmitting}
|
||||
onClick={handleCloseBtnClick}
|
||||
style={{ minWidth: '75px' }}
|
||||
>
|
||||
<T id={'close'} />
|
||||
</Button>
|
||||
<Button
|
||||
disabled={isSubmitting}
|
||||
loading={isSubmitting && !submitPayload.publish}
|
||||
style={{ minWidth: '75px' }}
|
||||
type="submit"
|
||||
onClick={handleSubmitDraftBtnClick}
|
||||
>
|
||||
{<T id={'save_as_draft'} />}
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
intent={Intent.PRIMARY}
|
||||
disabled={isSubmitting}
|
||||
loading={isSubmitting && submitPayload.publish}
|
||||
style={{ minWidth: '75px' }}
|
||||
type="submit"
|
||||
onClick={handleSubmittBtnClick}
|
||||
>
|
||||
{<T id={'save_and_publish'} />}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default compose(withDialogActions)(MoneyInFloatingActions);
|
||||
@@ -0,0 +1,91 @@
|
||||
import React from 'react';
|
||||
import moment from 'moment';
|
||||
import { Intent } from '@blueprintjs/core';
|
||||
import { Formik } from 'formik';
|
||||
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 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: 'other_income',
|
||||
reference_no: '',
|
||||
cashflow_account_id: '',
|
||||
credit_account_id: '',
|
||||
description: '',
|
||||
published: '',
|
||||
};
|
||||
|
||||
/**
|
||||
* Other income form.
|
||||
*/
|
||||
function OtherIncomeForm({
|
||||
// #withDialogActions
|
||||
closeDialog,
|
||||
|
||||
// #withCurrentOrganization
|
||||
organization: { base_currency },
|
||||
}) {
|
||||
const {
|
||||
dialogName,
|
||||
accountId,
|
||||
createCashflowTransactionMutate,
|
||||
submitPayload,
|
||||
} = useMoneyInDailogContext();
|
||||
|
||||
// Initial form values.
|
||||
const initialValues = {
|
||||
...defaultInitialValues,
|
||||
currency_code: base_currency,
|
||||
credit_account_id: accountId,
|
||||
};
|
||||
|
||||
// Handles the form submit.
|
||||
const handleFormSubmit = (values, { setSubmitting, setErrors }) => {
|
||||
const form = {
|
||||
...values,
|
||||
published: submitPayload.publish,
|
||||
};
|
||||
setSubmitting(true);
|
||||
createCashflowTransactionMutate(form)
|
||||
.then(() => {
|
||||
closeDialog(dialogName);
|
||||
|
||||
AppToaster.show({
|
||||
message: intl.get('cash_flow_transaction_success_message'),
|
||||
intent: Intent.SUCCESS,
|
||||
});
|
||||
})
|
||||
.finally(() => {
|
||||
setSubmitting(true);
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<Formik
|
||||
validationSchema={CreateOtherIncomeFormSchema}
|
||||
initialValues={initialValues}
|
||||
onSubmit={handleFormSubmit}
|
||||
>
|
||||
<OtherIncomeFormContent />
|
||||
</Formik>
|
||||
);
|
||||
}
|
||||
|
||||
export default compose(
|
||||
withDialogActions,
|
||||
withCurrentOrganization(),
|
||||
)(OtherIncomeForm);
|
||||
@@ -0,0 +1,22 @@
|
||||
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().label(intl.get('transaction_type')),
|
||||
reference_no: Yup.string(),
|
||||
credit_account_id: Yup.number().required(),
|
||||
cashflow_account_id: Yup.string()
|
||||
.required()
|
||||
.label(intl.get('other_income_account')),
|
||||
description: Yup.string()
|
||||
.min(3)
|
||||
.max(DATATYPES_LENGTH.TEXT)
|
||||
.label(intl.get('description')),
|
||||
published: Yup.boolean(),
|
||||
});
|
||||
|
||||
export const CreateOtherIncomeFormSchema = Schema;
|
||||
@@ -0,0 +1,17 @@
|
||||
import React from 'react';
|
||||
import { Form } from 'formik';
|
||||
|
||||
import OtherIncomeFormFields from './OtherIncomeFormFields';
|
||||
import MoneyInFloatingActions from '../MoneyInFloatingActions';
|
||||
|
||||
/**
|
||||
* Other income form content.
|
||||
*/
|
||||
export default function OtherIncomeFormContent() {
|
||||
return (
|
||||
<Form>
|
||||
<OtherIncomeFormFields />
|
||||
<MoneyInFloatingActions />
|
||||
</Form>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,186 @@
|
||||
import React from 'react';
|
||||
import { FastField, ErrorMessage } from 'formik';
|
||||
import {
|
||||
Classes,
|
||||
FormGroup,
|
||||
InputGroup,
|
||||
TextArea,
|
||||
Position,
|
||||
ControlGroup,
|
||||
} from '@blueprintjs/core';
|
||||
import classNames from 'classnames';
|
||||
import {
|
||||
FormattedMessage as T,
|
||||
AccountsSuggestField,
|
||||
InputPrependText,
|
||||
MoneyInputGroup,
|
||||
} from 'components';
|
||||
import { DateInput } from '@blueprintjs/datetime';
|
||||
import { useAutofocus } from 'hooks';
|
||||
import { FieldRequiredHint, Col, Row } from 'components';
|
||||
import {
|
||||
inputIntent,
|
||||
momentFormatter,
|
||||
tansformDateValue,
|
||||
handleDateChange,
|
||||
} from 'utils';
|
||||
import { CLASSES } from 'common/classes';
|
||||
import { useMoneyInDailogContext } from '../MoneyInDialogProvider';
|
||||
|
||||
/**
|
||||
* Other income form fiedls.
|
||||
*/
|
||||
function OtherIncomeFormFields() {
|
||||
// Money in dialog context.
|
||||
const { accounts } = useMoneyInDailogContext();
|
||||
|
||||
const amountFieldRef = useAutofocus();
|
||||
|
||||
return (
|
||||
<div className={Classes.DIALOG_BODY}>
|
||||
<Row>
|
||||
<Col xs={5}>
|
||||
{/*------------ Date -----------*/}
|
||||
<FastField name={'date'}>
|
||||
{({ form, field: { value }, meta: { error, touched } }) => (
|
||||
<FormGroup
|
||||
label={<T id={'date'} />}
|
||||
labelInfo={<FieldRequiredHint />}
|
||||
intent={inputIntent({ error, touched })}
|
||||
helperText={<ErrorMessage name="date" />}
|
||||
minimal={true}
|
||||
className={classNames(CLASSES.FILL, 'form-group--date')}
|
||||
>
|
||||
<DateInput
|
||||
{...momentFormatter('YYYY/MM/DD')}
|
||||
onChange={handleDateChange((formattedDate) => {
|
||||
form.setFieldValue('date', formattedDate);
|
||||
})}
|
||||
value={tansformDateValue(value)}
|
||||
popoverProps={{
|
||||
position: Position.BOTTOM,
|
||||
minimal: true,
|
||||
}}
|
||||
intent={inputIntent({ error, touched })}
|
||||
/>
|
||||
</FormGroup>
|
||||
)}
|
||||
</FastField>
|
||||
</Col>
|
||||
<Col xs={5}>
|
||||
{/*------------ Transaction number -----------*/}
|
||||
<FastField name={'transaction_number'}>
|
||||
{({ form, field, meta: { error, touched } }) => (
|
||||
<FormGroup
|
||||
label={<T id={'transaction_number'} />}
|
||||
intent={inputIntent({ error, touched })}
|
||||
helperText={<ErrorMessage name="transaction_number" />}
|
||||
className={'form-group--transaction_number'}
|
||||
>
|
||||
<InputGroup
|
||||
intent={inputIntent({ error, touched })}
|
||||
{...field}
|
||||
/>
|
||||
</FormGroup>
|
||||
)}
|
||||
</FastField>
|
||||
</Col>
|
||||
</Row>
|
||||
{/*------------ amount -----------*/}
|
||||
<FastField name={'amount'}>
|
||||
{({
|
||||
form: { values, setFieldValue },
|
||||
field: { value },
|
||||
meta: { error, touched },
|
||||
}) => (
|
||||
<FormGroup
|
||||
label={<T id={'amount'} />}
|
||||
labelInfo={<FieldRequiredHint />}
|
||||
intent={inputIntent({ error, touched })}
|
||||
helperText={<ErrorMessage name="amount" />}
|
||||
className={'form-group--amount'}
|
||||
>
|
||||
<ControlGroup>
|
||||
<InputPrependText text={values.currency_code} />
|
||||
|
||||
<MoneyInputGroup
|
||||
value={value}
|
||||
minimal={true}
|
||||
onChange={(amount) => {
|
||||
setFieldValue('amount', amount);
|
||||
}}
|
||||
inputRef={(ref) => (amountFieldRef.current = ref)}
|
||||
intent={inputIntent({ error, touched })}
|
||||
/>
|
||||
</ControlGroup>
|
||||
</FormGroup>
|
||||
)}
|
||||
</FastField>
|
||||
|
||||
<Row>
|
||||
<Col xs={5}>
|
||||
{/*------------ other income account -----------*/}
|
||||
<FastField name={'cashflow_account_id'}>
|
||||
{({ form, field, meta: { error, touched } }) => (
|
||||
<FormGroup
|
||||
label={<T id={'cash_flow_transaction.outher_income_account'} />}
|
||||
labelInfo={<FieldRequiredHint />}
|
||||
intent={inputIntent({ error, touched })}
|
||||
helperText={<ErrorMessage name="cashflow_account_id" />}
|
||||
className={'form-group--cashflow_account_id'}
|
||||
>
|
||||
<AccountsSuggestField
|
||||
accounts={accounts}
|
||||
onAccountSelected={({ id }) =>
|
||||
form.setFieldValue('cashflow_account_id', id)
|
||||
}
|
||||
inputProps={{
|
||||
intent: inputIntent({ error, touched }),
|
||||
}}
|
||||
/>
|
||||
</FormGroup>
|
||||
)}
|
||||
</FastField>
|
||||
</Col>
|
||||
<Col xs={5}>
|
||||
{/*------------ Reference -----------*/}
|
||||
<FastField name={'reference_no'}>
|
||||
{({ form, field, meta: { error, touched } }) => (
|
||||
<FormGroup
|
||||
label={<T id={'reference_no'} />}
|
||||
intent={inputIntent({ error, touched })}
|
||||
helperText={<ErrorMessage name="reference_no" />}
|
||||
className={'form-group--reference-no'}
|
||||
>
|
||||
<InputGroup
|
||||
intent={inputIntent({ error, touched })}
|
||||
{...field}
|
||||
/>
|
||||
</FormGroup>
|
||||
)}
|
||||
</FastField>
|
||||
</Col>
|
||||
</Row>
|
||||
{/*------------ description -----------*/}
|
||||
<FastField name={'description'}>
|
||||
{({ field, meta: { error, touched } }) => (
|
||||
<FormGroup
|
||||
label={<T id={'description'} />}
|
||||
className={'form-group--description'}
|
||||
intent={inputIntent({ error, touched })}
|
||||
helperText={<ErrorMessage name={'description'} />}
|
||||
>
|
||||
<TextArea
|
||||
growVertically={true}
|
||||
large={true}
|
||||
intent={inputIntent({ error, touched })}
|
||||
{...field}
|
||||
/>
|
||||
</FormGroup>
|
||||
)}
|
||||
</FastField>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default OtherIncomeFormFields;
|
||||
@@ -0,0 +1,91 @@
|
||||
import React from 'react';
|
||||
import moment from 'moment';
|
||||
import { Intent } from '@blueprintjs/core';
|
||||
import { Formik } from 'formik';
|
||||
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,
|
||||
credit_account_id: accountId,
|
||||
};
|
||||
|
||||
// Handles the form submit.
|
||||
const handleFormSubmit = (values, { setSubmitting, setErrors }) => {
|
||||
const form = {
|
||||
...values,
|
||||
published: submitPayload.publish,
|
||||
};
|
||||
setSubmitting(true);
|
||||
createCashflowTransactionMutate(form)
|
||||
.then(() => {
|
||||
closeDialog(dialogName);
|
||||
|
||||
AppToaster.show({
|
||||
message: intl.get('cash_flow_transaction_success_message'),
|
||||
intent: Intent.SUCCESS,
|
||||
});
|
||||
})
|
||||
.finally(() => {
|
||||
setSubmitting(true);
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<Formik
|
||||
validationSchema={CreateOwnerContributionFormSchema}
|
||||
initialValues={initialValues}
|
||||
onSubmit={handleFormSubmit}
|
||||
>
|
||||
<OwnerContributionFormContent />
|
||||
</Formik>
|
||||
);
|
||||
}
|
||||
|
||||
export default compose(
|
||||
withDialogActions,
|
||||
withCurrentOrganization(),
|
||||
)(OwnerContributionForm);
|
||||
@@ -0,0 +1,22 @@
|
||||
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().label(intl.get('transaction_type')),
|
||||
reference_no: Yup.string(),
|
||||
credit_account_id: Yup.number().required(),
|
||||
cashflow_account_id: Yup.string()
|
||||
.required()
|
||||
.label(intl.get('cash_flow_transaction.label_equity_account')),
|
||||
description: Yup.string()
|
||||
.min(3)
|
||||
.max(DATATYPES_LENGTH.TEXT)
|
||||
.label(intl.get('description')),
|
||||
published: Yup.boolean(),
|
||||
});
|
||||
|
||||
export const CreateOwnerContributionFormSchema = Schema;
|
||||
@@ -0,0 +1,17 @@
|
||||
import React from 'react';
|
||||
import { Form } from 'formik';
|
||||
|
||||
import OwnerContributionFormFields from './OwnerContributionFormFields';
|
||||
import MoneyInFloatingActions from '../MoneyInFloatingActions';
|
||||
|
||||
/**
|
||||
* Owner contribution form content.
|
||||
*/
|
||||
export default function OwnerContributionFormContent() {
|
||||
return (
|
||||
<Form>
|
||||
<OwnerContributionFormFields />
|
||||
<MoneyInFloatingActions />
|
||||
</Form>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,186 @@
|
||||
import React from 'react';
|
||||
import { FastField, ErrorMessage } from 'formik';
|
||||
import {
|
||||
Classes,
|
||||
FormGroup,
|
||||
InputGroup,
|
||||
TextArea,
|
||||
Position,
|
||||
ControlGroup,
|
||||
} from '@blueprintjs/core';
|
||||
import classNames from 'classnames';
|
||||
import {
|
||||
FormattedMessage as T,
|
||||
AccountsSuggestField,
|
||||
InputPrependText,
|
||||
MoneyInputGroup,
|
||||
} from 'components';
|
||||
import { DateInput } from '@blueprintjs/datetime';
|
||||
import { useAutofocus } from 'hooks';
|
||||
import { FieldRequiredHint, Col, Row } from 'components';
|
||||
import {
|
||||
inputIntent,
|
||||
momentFormatter,
|
||||
tansformDateValue,
|
||||
handleDateChange,
|
||||
} from 'utils';
|
||||
import { CLASSES } from 'common/classes';
|
||||
import { useMoneyInDailogContext } from '../MoneyInDialogProvider';
|
||||
|
||||
/**
|
||||
* Owner contribution form fields.
|
||||
*/
|
||||
function OwnerContributionFormFields() {
|
||||
// Money in dialog context.
|
||||
const { accounts } = useMoneyInDailogContext();
|
||||
|
||||
const amountFieldRef = useAutofocus();
|
||||
return (
|
||||
<div className={Classes.DIALOG_BODY}>
|
||||
<Row>
|
||||
<Col xs={5}>
|
||||
{/*------------ Date -----------*/}
|
||||
<FastField name={'date'}>
|
||||
{({ form, field: { value }, meta: { error, touched } }) => (
|
||||
<FormGroup
|
||||
label={<T id={'date'} />}
|
||||
labelInfo={<FieldRequiredHint />}
|
||||
intent={inputIntent({ error, touched })}
|
||||
helperText={<ErrorMessage name="date" />}
|
||||
minimal={true}
|
||||
className={classNames(CLASSES.FILL, 'form-group--date')}
|
||||
>
|
||||
<DateInput
|
||||
{...momentFormatter('YYYY/MM/DD')}
|
||||
onChange={handleDateChange((formattedDate) => {
|
||||
form.setFieldValue('date', formattedDate);
|
||||
})}
|
||||
value={tansformDateValue(value)}
|
||||
popoverProps={{
|
||||
position: Position.BOTTOM,
|
||||
minimal: true,
|
||||
}}
|
||||
intent={inputIntent({ error, touched })}
|
||||
/>
|
||||
</FormGroup>
|
||||
)}
|
||||
</FastField>
|
||||
</Col>
|
||||
<Col xs={5}>
|
||||
{/*------------ Transaction number -----------*/}
|
||||
<FastField name={'transaction_number'}>
|
||||
{({ form, field, meta: { error, touched } }) => (
|
||||
<FormGroup
|
||||
label={<T id={'transaction_number'} />}
|
||||
intent={inputIntent({ error, touched })}
|
||||
helperText={<ErrorMessage name="transaction_number" />}
|
||||
className={'form-group--transaction_number'}
|
||||
>
|
||||
<InputGroup
|
||||
intent={inputIntent({ error, touched })}
|
||||
{...field}
|
||||
/>
|
||||
</FormGroup>
|
||||
)}
|
||||
</FastField>
|
||||
</Col>
|
||||
</Row>
|
||||
{/*------------ amount -----------*/}
|
||||
<FastField name={'amount'}>
|
||||
{({
|
||||
form: { values, setFieldValue },
|
||||
field: { value },
|
||||
meta: { error, touched },
|
||||
}) => (
|
||||
<FormGroup
|
||||
label={<T id={'amount'} />}
|
||||
labelInfo={<FieldRequiredHint />}
|
||||
intent={inputIntent({ error, touched })}
|
||||
helperText={<ErrorMessage name="amount" />}
|
||||
className={'form-group--amount'}
|
||||
>
|
||||
<ControlGroup>
|
||||
<InputPrependText text={values.currency_code} />
|
||||
|
||||
<MoneyInputGroup
|
||||
value={value}
|
||||
minimal={true}
|
||||
onChange={(amount) => {
|
||||
setFieldValue('amount', amount);
|
||||
}}
|
||||
inputRef={(ref) => (amountFieldRef.current = ref)}
|
||||
intent={inputIntent({ error, touched })}
|
||||
/>
|
||||
</ControlGroup>
|
||||
</FormGroup>
|
||||
)}
|
||||
</FastField>
|
||||
|
||||
<Row>
|
||||
<Col xs={5}>
|
||||
{/*------------ cash flow account -----------*/}
|
||||
<FastField name={'cashflow_account_id'}>
|
||||
{({ form, field, meta: { error, touched } }) => (
|
||||
<FormGroup
|
||||
label={<T id={'cash_flow_transaction.label_equity_account'} />}
|
||||
labelInfo={<FieldRequiredHint />}
|
||||
intent={inputIntent({ error, touched })}
|
||||
helperText={<ErrorMessage name="cashflow_account_id" />}
|
||||
className={'form-group--cashflow_account_id'}
|
||||
>
|
||||
<AccountsSuggestField
|
||||
accounts={accounts}
|
||||
onAccountSelected={({ id }) =>
|
||||
form.setFieldValue('cashflow_account_id', id)
|
||||
}
|
||||
inputProps={{
|
||||
intent: inputIntent({ error, touched }),
|
||||
}}
|
||||
/>
|
||||
</FormGroup>
|
||||
)}
|
||||
</FastField>
|
||||
</Col>
|
||||
<Col xs={5}>
|
||||
{/*------------ Reference -----------*/}
|
||||
<FastField name={'reference_no'}>
|
||||
{({ form, field, meta: { error, touched } }) => (
|
||||
<FormGroup
|
||||
label={<T id={'reference_no'} />}
|
||||
intent={inputIntent({ error, touched })}
|
||||
helperText={<ErrorMessage name="reference_no" />}
|
||||
className={'form-group--reference-no'}
|
||||
>
|
||||
<InputGroup
|
||||
intent={inputIntent({ error, touched })}
|
||||
{...field}
|
||||
/>
|
||||
</FormGroup>
|
||||
)}
|
||||
</FastField>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
{/*------------ description -----------*/}
|
||||
<FastField name={'description'}>
|
||||
{({ field, meta: { error, touched } }) => (
|
||||
<FormGroup
|
||||
label={<T id={'description'} />}
|
||||
className={'form-group--description'}
|
||||
intent={inputIntent({ error, touched })}
|
||||
helperText={<ErrorMessage name={'description'} />}
|
||||
>
|
||||
<TextArea
|
||||
growVertically={true}
|
||||
large={true}
|
||||
intent={inputIntent({ error, touched })}
|
||||
{...field}
|
||||
/>
|
||||
</FormGroup>
|
||||
)}
|
||||
</FastField>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default OwnerContributionFormFields;
|
||||
36
src/containers/Dialogs/MoneyInDialog/index.js
Normal file
36
src/containers/Dialogs/MoneyInDialog/index.js
Normal file
@@ -0,0 +1,36 @@
|
||||
import React from 'react';
|
||||
import { FormattedMessage as T } from 'components';
|
||||
import { Dialog, DialogSuspense } from 'components';
|
||||
import withDialogRedux from 'components/DialogReduxConnect';
|
||||
import { compose } from 'redux';
|
||||
|
||||
const MoneyInDialogContent = React.lazy(() => import('./MoneyInDialogContent'));
|
||||
|
||||
/**
|
||||
* Money In dialog.
|
||||
*/
|
||||
function MoneyInDialog({
|
||||
dialogName,
|
||||
payload = { action: '', account_type: null, account_id: null },
|
||||
isOpen,
|
||||
}) {
|
||||
return (
|
||||
<Dialog
|
||||
name={dialogName}
|
||||
title={<T id={'cash_flow_transaction.money_in'} />}
|
||||
isOpen={isOpen}
|
||||
canEscapeJeyClose={true}
|
||||
autoFocus={true}
|
||||
className={'dialog--money-in'}
|
||||
>
|
||||
<DialogSuspense>
|
||||
<MoneyInDialogContent
|
||||
dialogName={dialogName}
|
||||
accountId={payload.account_id}
|
||||
accountType={payload.account_type}
|
||||
/>
|
||||
</DialogSuspense>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
export default compose(withDialogRedux())(MoneyInDialog);
|
||||
Reference in New Issue
Block a user