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

Merge pull request #179 from bigcapitalhq/abouhuolia/big-29-no-currency-in-amount-field-on-money-inout-dialogs

Browse Source 
fix(webapp): No currency in amount field on money in/out dialogs
This commit is contained in:
Ahmed Bouhuolia
2023-06-28 12:27:12 +02:00
committed by GitHub
parent e552ff6449 215eb97762
commit 7fbe51ddf2
29 changed files with 526 additions and 764 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
packages/webapp/src/constants/sidebarMenu.tsx
View File

@@ -25,6 +25,7 @@ import {
CashflowAction,
PreferencesAbility,
} from '@/constants/abilityOption';
import { DialogsName } from './dialogs';
export const SidebarMenu = [
// ---------------
@@ -114,7 +115,7 @@ export const SidebarMenu = [
text: <T id={'sidebar.new_item_category'} />,
href: '/items/categories/new',
type: ISidebarMenuItemType.Dialog,
dialogName: 'item-category-form',
dialogName: DialogsName.ItemCategoryForm,
permission: {
subject: AbilitySubject.Item,
ability: ItemAction.Create,
@@ -458,7 +459,7 @@ export const SidebarMenu = [
text: <T id={'sidebar.add_money_in'} />,
href: '/cashflow-accounts',
type: ISidebarMenuItemType.Dialog,
dialogName: 'money-in',
dialogName: DialogsName.MoneyInForm,
permission: {
subject: AbilitySubject.Cashflow,
ability: CashflowAction.Create,
@@ -468,6 +469,7 @@ export const SidebarMenu = [
text: <T id={'sidebar.add_money_out'} />,
href: '/cashflow-accounts',
type: ISidebarMenuItemType.Dialog,
dialogName: DialogsName.MoneyOutForm,
permission: {
subject: AbilitySubject.Cashflow,
ability: CashflowAction.Create,
@@ -477,6 +479,7 @@ export const SidebarMenu = [
text: <T id={'sidebar.add_cash_account'} />,
href: '/cashflow-accounts',
type: ISidebarMenuItemType.Dialog,
dialogName: DialogsName.AccountForm,
permission: {
subject: AbilitySubject.Cashflow,
ability: CashflowAction.Create,
@@ -486,6 +489,7 @@ export const SidebarMenu = [
text: <T id={'sidebar.add_bank_account'} />,
href: '/cashflow-accounts',
type: ISidebarMenuItemType.Dialog,
dialogName: DialogsName.AccountForm,
permission: {
subject: AbilitySubject.Cashflow,
ability: CashflowAction.Create,

26
packages/webapp/src/containers/CashFlow/MoneyInDialog/MoneyInContentFields.tsx
View File

@@ -1,18 +1,22 @@
// @ts-nocheck
import React from 'react';
import React, { useMemo } from 'react';
import { useFormikContext } from 'formik';
import OwnerContributionFormFields from './OwnerContribution/OwnerContributionFormFields';
import OtherIncomeFormFields from './OtherIncome/OtherIncomeFormFields';
import TransferFromAccountFormFields from './TransferFromAccount/TransferFromAccountFormFields';
import { MoneyInFieldsProvider } from './MoneyInFieldsProvider';
/**
*
* @param param0
* @returns
* Money-in dialog content.
* Switches between fields based on the given transaction type.
* @returns {JSX.Element}
*/
export default function MoneyInContentFields({ accountType }) {
const handleTransactionType = () => {
switch (accountType) {
export default function MoneyInContentFields() {
const { values } = useFormikContext();
const transactionFields = useMemo(() => {
switch (values.transaction_type) {
case 'owner_contribution':
return <OwnerContributionFormFields />;
@@ -24,6 +28,10 @@ export default function MoneyInContentFields({ accountType }) {
default:
break;
}
};
return <React.Fragment>{handleTransactionType()}</React.Fragment>;
}, [values.transaction_type]);
// Cannot continue if transaction type or account is not selected.
if (!values.transaction_type || !values.cashflow_account_id) return null;
return <MoneyInFieldsProvider>{transactionFields}</MoneyInFieldsProvider>;
}

1
packages/webapp/src/containers/CashFlow/MoneyInDialog/MoneyInDialogContent.tsx
View File

@@ -1,6 +1,5 @@
// @ts-nocheck
import React from 'react';
import { MoneyInDialogProvider } from './MoneyInDialogProvider';
import MoneyInForm from './MoneyInForm';

25
packages/webapp/src/containers/CashFlow/MoneyInDialog/MoneyInDialogProvider.tsx
View File

@@ -1,11 +1,10 @@
// @ts-nocheck
import React from 'react';
import React, { useState } from 'react';
import { DialogContent } from '@/components';
import { Features } from '@/constants';
import { useFeatureCan } from '@/hooks/state';
import {
useCreateCashflowTransaction,
useAccount,
useAccounts,
useBranches,
useCashflowAccounts,
@@ -18,22 +17,21 @@ const MoneyInDialogContent = React.createContext();
* Money in dialog provider.
*/
function MoneyInDialogProvider({
accountId,
accountId: defaultAccountId,
accountType,
dialogName,
...props
}) {
// Holds the selected account id of the dialog.
const [accountId, setAccountId] = useState<number | null>(defaultAccountId);
// Detarmines whether the feature is enabled.
const { featureCan } = useFeatureCan();
const isBranchFeatureCan = featureCan(Features.Branches);
// Fetches accounts list.
const { isLoading: isAccountsLoading, data: accounts } = useAccounts();
// Fetches the specific account details.
const { data: account, isLoading: isAccountLoading } = useAccount(accountId, {
enabled: !!accountId,
});
// Fetches the branches list.
const {
data: branches,
@@ -41,10 +39,11 @@ function MoneyInDialogProvider({
isSuccess: isBranchesSuccess,
} = useBranches({}, { enabled: isBranchFeatureCan });
// Fetch cash flow list .
// Fetch cash flow list.
const { data: cashflowAccounts, isLoading: isCashFlowAccountsLoading } =
useCashflowAccounts({}, { keepPreviousData: true });
// Mutation create cashflow transaction.
const { mutateAsync: createCashflowTransactionMutate } =
useCreateCashflowTransaction();
@@ -57,9 +56,12 @@ function MoneyInDialogProvider({
// Provider data.
const provider = {
accounts,
account,
branches,
accountId,
defaultAccountId,
setAccountId,
accountType,
isAccountsLoading,
isBranchesSuccess,
@@ -77,8 +79,7 @@ function MoneyInDialogProvider({
isAccountsLoading ||
isCashFlowAccountsLoading ||
isBranchesLoading ||
isSettingsLoading ||
isAccountLoading;
isSettingsLoading;
return (
<DialogContent isLoading={isLoading}>

26
packages/webapp/src/containers/CashFlow/MoneyInDialog/MoneyInExchangeRateField.tsx Normal file
View File

@@ -0,0 +1,26 @@
// @ts-nocheck
import React from 'react';
import { ExchangeRateMutedField } from '@/components';
import { useForeignAccount } from './utils';
import { useFormikContext } from 'formik';
import { useMoneyInFieldsContext } from './MoneyInFieldsProvider';
export function MoneyInExchangeRateField() {
const { account } = useMoneyInFieldsContext();
const { values } = useFormikContext();
const isForeigAccount = useForeignAccount();
if (!isForeigAccount) return null;
return (
<ExchangeRateMutedField
name={'exchange_rate'}
fromCurrency={values.currency_code}
toCurrency={account.currency_code}
formGroupProps={{ label: '', inline: false }}
date={values.date}
exchangeRate={values.exchange_rate}
/>
);
}

34
packages/webapp/src/containers/CashFlow/MoneyInDialog/MoneyInFieldsProvider.tsx Normal file
View File

@@ -0,0 +1,34 @@
// @ts-nocheck
import React from 'react';
import { DialogContent } from '@/components';
import { useAccount } from '@/hooks/query';
import { useMoneyInDailogContext } from './MoneyInDialogProvider';
const MoneyInFieldsContext = React.createContext();
/**
* Money in dialog provider.
*/
function MoneyInFieldsProvider({ ...props }) {
const { accountId } = useMoneyInDailogContext();
// Fetches the specific account details.
const { data: account, isLoading: isAccountLoading } = useAccount(accountId, {
enabled: !!accountId,
});
// Provider data.
const provider = {
account,
};
const isLoading = isAccountLoading;
return (
<DialogContent isLoading={isLoading}>
<MoneyInFieldsContext.Provider value={provider} {...props} />
</DialogContent>
);
}
const useMoneyInFieldsContext = () => React.useContext(MoneyInFieldsContext);
export { MoneyInFieldsProvider, useMoneyInFieldsContext };

18
packages/webapp/src/containers/CashFlow/MoneyInDialog/MoneyInForm.tsx
View File

@@ -53,7 +53,6 @@ function MoneyInForm({
accountId,
accountType,
createCashflowTransactionMutate,
submitPayload,
} = useMoneyInDailogContext();
// transaction number.
@@ -61,7 +60,6 @@ function MoneyInForm({
transactionNumberPrefix,
transactionNextNumber,
);
// Initial form values.
const initialValues = {
...defaultInitialValues,
@@ -95,15 +93,13 @@ function MoneyInForm({
};
return (
<div>
<Formik
validationSchema={CreateMoneyInFormSchema}
initialValues={initialValues}
onSubmit={handleFormSubmit}
>
<MoneyInFormContent />
</Formik>
</div>
<Formik
validationSchema={CreateMoneyInFormSchema}
initialValues={initialValues}
onSubmit={handleFormSubmit}
>
<MoneyInFormContent />
</Formik>
);
}

10
packages/webapp/src/containers/CashFlow/MoneyInDialog/MoneyInFormFields.tsx
View File

@@ -12,17 +12,13 @@ import { useMoneyInDailogContext } from './MoneyInDialogProvider';
* Money in form fields.
*/
function MoneyInFormFields() {
const { values } = useFormikContext();
// Money in dialog context.
const { accountId } = useMoneyInDailogContext();
const { defaultAccountId } = useMoneyInDailogContext();
return (
<div className={Classes.DIALOG_BODY}>
<If condition={!accountId}>
<TransactionTypeFields />
</If>
<MoneyInContentFields accountType={values.transaction_type} />
{!defaultAccountId && <TransactionTypeFields />}
<MoneyInContentFields />
</div>
);
}

125
packages/webapp/src/containers/CashFlow/MoneyInDialog/OtherIncome/OtherIncomeFormFields.tsx
View File

@@ -1,10 +1,9 @@
// @ts-nocheck
import React from 'react';
import { FastField, Field, ErrorMessage, useFormikContext } from 'formik';
import { FastField, ErrorMessage } from 'formik';
import {
Classes,
FormGroup,
InputGroup,
TextArea,
Position,
ControlGroup,
@@ -18,14 +17,15 @@ import {
FieldRequiredHint,
Col,
Row,
If,
FeatureCan,
BranchSelect,
BranchSelectButton,
ExchangeRateMutedField,
FInputGroup,
FFormGroup,
FTextArea,
FMoneyInputGroup,
} from '@/components';
import { DateInput } from '@blueprintjs/datetime';
import { useAutofocus } from '@/hooks';
import { CLASSES, ACCOUNT_TYPE, Features } from '@/constants';
import {
@@ -36,22 +36,18 @@ import {
} from '@/utils';
import { useMoneyInDailogContext } from '../MoneyInDialogProvider';
import {
useSetPrimaryBranchToForm,
useForeignAccount,
BranchRowDivider,
} from '../utils';
import { useSetPrimaryBranchToForm, BranchRowDivider } from '../utils';
import { MoneyInOutTransactionNoField } from '../../_components';
import { useMoneyInFieldsContext } from '../MoneyInFieldsProvider';
import { MoneyInExchangeRateField } from '../MoneyInExchangeRateField';
/**
* Other income form fields.
*/
export default function OtherIncomeFormFields() {
// Money in dialog context.
const { accounts, account, branches } = useMoneyInDailogContext();
const { values } = useFormikContext();
const amountFieldRef = useAutofocus();
const isForeigAccount = useForeignAccount();
const { accounts, branches } = useMoneyInDailogContext();
const { account } = useMoneyInFieldsContext();
// Sets the primary branch to form.
useSetPrimaryBranchToForm();
@@ -61,17 +57,14 @@ export default function OtherIncomeFormFields() {
<FeatureCan feature={Features.Branches}>
<Row>
<Col xs={5}>
<FormGroup
label={<T id={'branch'} />}
className={classNames('form-group--select-list', Classes.FILL)}
>
<FFormGroup name={'amount'} label={<T id={'branch'} />}>
<BranchSelect
name={'branch_id'}
branches={branches}
input={BranchSelectButton}
popoverProps={{ minimal: true }}
/>
</FormGroup>
</FFormGroup>
</Col>
</Row>
<BranchRowDivider />
@@ -113,48 +106,25 @@ export default function OtherIncomeFormFields() {
</Col>
</Row>
{/*------------ amount -----------*/}
<FastField name={'amount'}>
{({
form: { values, setFieldValue },
field: { value },
meta: { error, touched },
}) => (
<FormGroup
{/*------------ Amount -----------*/}
<Row>
<Col xs={10}>
<FFormGroup
name={'amount'}
label={<T id={'amount'} />}
labelInfo={<FieldRequiredHint />}
intent={inputIntent({ error, touched })}
helperText={<ErrorMessage name="amount" />}
className={'form-group--amount'}
>
<ControlGroup>
<InputPrependText text={account.currency_code} />
<MoneyInputGroup
value={value}
minimal={true}
onChange={(amount) => {
setFieldValue('amount', amount);
}}
inputRef={(ref) => (amountFieldRef.current = ref)}
intent={inputIntent({ error, touched })}
/>
<FMoneyInputGroup name={'amount'} minimal={true} />
</ControlGroup>
</FormGroup>
)}
</FastField>
</FFormGroup>
</Col>
</Row>
{/*------------ Exchange rate -----------*/}
<MoneyInExchangeRateField />
<If condition={isForeigAccount}>
{/*------------ exchange rate -----------*/}
<ExchangeRateMutedField
name={'exchange_rate'}
fromCurrency={values.currency_code}
toCurrency={account.currency_code}
formGroupProps={{ label: '', inline: false }}
date={values.date}
exchangeRate={values.exchange_rate}
/>
</If>
<Row>
<Col xs={5}>
{/*------------ other income account -----------*/}
@@ -184,43 +154,24 @@ export default function OtherIncomeFormFields() {
)}
</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>
<FFormGroup label={<T id={'reference_no'} />} name={'reference_no'}>
<FInputGroup name={'reference_no'} />
</FFormGroup>
</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>
{/*------------ Description -----------*/}
<FFormGroup name={'description'} label={<T id={'description'} />}>
<FTextArea
name={'description'}
growVertically={true}
large={true}
fill={true}
/>
</FFormGroup>
</React.Fragment>
);
}

140
packages/webapp/src/containers/CashFlow/MoneyInDialog/OwnerContribution/OwnerContributionFormFields.tsx
View File

@@ -1,32 +1,24 @@
// @ts-nocheck
import React from 'react';
import { FastField, Field, ErrorMessage, useFormikContext } from 'formik';
import {
Classes,
FormGroup,
InputGroup,
TextArea,
Position,
ControlGroup,
} from '@blueprintjs/core';
import { FastField, ErrorMessage } from 'formik';
import { FormGroup, Position, ControlGroup } from '@blueprintjs/core';
import classNames from 'classnames';
import { DateInput } from '@blueprintjs/datetime';
import {
FormattedMessage as T,
AccountsSuggestField,
InputPrependText,
MoneyInputGroup,
FieldRequiredHint,
Col,
Row,
If,
ExchangeRateMutedField,
BranchSelect,
BranchSelectButton,
FeatureCan,
FFormGroup,
FMoneyInputGroup,
FTextArea,
FInputGroup,
} from '@/components';
import { DateInput } from '@blueprintjs/datetime';
import { useAutofocus } from '@/hooks';
import { ACCOUNT_TYPE, CLASSES, Features } from '@/constants';
import {
inputIntent,
@@ -37,10 +29,11 @@ import {
import { useMoneyInDailogContext } from '../MoneyInDialogProvider';
import {
useSetPrimaryBranchToForm,
useForeignAccount,
BranchRowDivider,
} from '../../MoneyInDialog/utils';
import { MoneyInOutTransactionNoField } from '../../_components';
import { useMoneyInFieldsContext } from '../MoneyInFieldsProvider';
import { MoneyInExchangeRateField } from '../MoneyInExchangeRateField';
/**
/**
@@ -48,13 +41,8 @@ import { MoneyInOutTransactionNoField } from '../../_components';
*/
export default function OwnerContributionFormFields() {
// Money in dialog context.
const { accounts, account, branches } = useMoneyInDailogContext();
const { values } = useFormikContext();
const amountFieldRef = useAutofocus();
const isForeigAccount = useForeignAccount();
const { accounts, branches } = useMoneyInDailogContext();
const { account } = useMoneyInFieldsContext();
// Sets the primary branch to form.
useSetPrimaryBranchToForm();
@@ -64,21 +52,19 @@ export default function OwnerContributionFormFields() {
<FeatureCan feature={Features.Branches}>
<Row>
<Col xs={5}>
<FormGroup
label={<T id={'branch'} />}
className={classNames('form-group--select-list', Classes.FILL)}
>
<FFormGroup name={'branch_id'} label={<T id={'branch'} />}>
<BranchSelect
name={'branch_id'}
branches={branches}
input={BranchSelectButton}
popoverProps={{ minimal: true }}
/>
</FormGroup>
</FFormGroup>
</Col>
</Row>
<BranchRowDivider />
</FeatureCan>
<Row>
<Col xs={5}>
{/*------------ Date -----------*/}
@@ -113,47 +99,26 @@ export default function OwnerContributionFormFields() {
<MoneyInOutTransactionNoField />
</Col>
</Row>
{/*------------ amount -----------*/}
<Field name={'amount'}>
{({
form: { values, setFieldValue },
field: { value },
meta: { error, touched },
}) => (
<FormGroup
{/*------------ Amount -----------*/}
<Row>
<Col xs={10}>
<FFormGroup
name={'amount'}
label={<T id={'amount'} />}
labelInfo={<FieldRequiredHint />}
intent={inputIntent({ error, touched })}
helperText={<ErrorMessage name="amount" />}
className={'form-group--amount'}
>
<ControlGroup>
<InputPrependText text={account?.currency_code} />
<MoneyInputGroup
value={value}
minimal={true}
onChange={(amount) => {
setFieldValue('amount', amount);
}}
inputRef={(ref) => (amountFieldRef.current = ref)}
intent={inputIntent({ error, touched })}
/>
<InputPrependText text={account?.currency_code || '--'} />
<FMoneyInputGroup name={'amount'} minimal={true} />
</ControlGroup>
</FormGroup>
)}
</Field>
<If condition={isForeigAccount}>
{/*------------ exchange rate -----------*/}
<ExchangeRateMutedField
name={'exchange_rate'}
fromCurrency={values.currency_code}
toCurrency={account.currency_code}
formGroupProps={{ label: '', inline: false }}
date={values.date}
exchangeRate={values.exchange_rate}
/>
</If>
</FFormGroup>
</Col>
</Row>
{/*------------ Exchange rate -----------*/}
<MoneyInExchangeRateField />
<Row>
<Col xs={5}>
{/*------------ equity account -----------*/}
@@ -181,43 +146,24 @@ export default function OwnerContributionFormFields() {
)}
</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>
<FFormGroup name={'reference_no'} label={<T id={'reference_no'} />}>
<FInputGroup name={'reference_no'} />
</FFormGroup>
</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>
{/*------------ Description -----------*/}
<FFormGroup name={'description'} label={<T id={'description'} />}>
<FTextArea
name={'description'}
growVertically={true}
large={true}
fill={true}
/>
</FFormGroup>
</React.Fragment>
);
}

61
packages/webapp/src/containers/CashFlow/MoneyInDialog/TransactionTypeFields.tsx
View File

@@ -10,6 +10,8 @@ import {
ListSelect,
Col,
Row,
FFormGroup,
FSelect,
} from '@/components';
import { inputIntent } from '@/utils';
import { CLASSES, getAddMoneyInOptions } from '@/constants';
@@ -21,7 +23,7 @@ import { useMoneyInDailogContext } from './MoneyInDialogProvider';
*/
export default function TransactionTypeFields() {
// Money in dialog context.
const { cashflowAccounts } = useMoneyInDailogContext();
const { cashflowAccounts, setAccountId } = useMoneyInDailogContext();
// Retrieves the add money in button options.
const addMoneyInOptions = useMemo(() => getAddMoneyInOptions(), []);
@@ -29,6 +31,23 @@ export default function TransactionTypeFields() {
return (
<div className="trasnaction-type-fileds">
<Row>
<Col xs={5}>
{/*------------ Transaction type -----------*/}
<FFormGroup
name={'transaction_type'}
label={<T id={'transaction_type'} />}
labelInfo={<FieldRequiredHint />}
>
<FSelect
name={'transaction_type'}
items={addMoneyInOptions}
popoverProps={{ minimal: true }}
valueAccessor={'value'}
textAccessor={'name'}
/>
</FFormGroup>
</Col>
<Col xs={5}>
{/*------------ Current account -----------*/}
<FastField name={'cashflow_account_id'}>
@@ -46,9 +65,10 @@ export default function TransactionTypeFields() {
>
<AccountsSuggestField
accounts={cashflowAccounts}
onAccountSelected={({ id }) =>
form.setFieldValue('cashflow_account_id', id)
}
onAccountSelected={({ id }) => {
form.setFieldValue('cashflow_account_id', id);
setAccountId(id);
}}
inputProps={{
intent: inputIntent({ error, touched }),
}}
@@ -56,39 +76,6 @@ export default function TransactionTypeFields() {
</FormGroup>
)}
</FastField>
{/*------------ Transaction type -----------*/}
</Col>
<Col xs={5}>
<Field name={'transaction_type'}>
{({
form: { values, setFieldValue },
field: { value },
meta: { error, touched },
}) => (
<FormGroup
label={<T id={'transaction_type'} />}
labelInfo={<FieldRequiredHint />}
helperText={<ErrorMessage name="transaction_type" />}
intent={inputIntent({ error, touched })}
className={classNames(
CLASSES.FILL,
'form-group--transaction_type',
)}
>
<ListSelect
items={addMoneyInOptions}
onItemSelect={(type) => {
setFieldValue('transaction_type', type.value);
}}
filterable={false}
selectedItem={value}
selectedItemProp={'value'}
textProp={'name'}
popoverProps={{ minimal: true }}
/>
</FormGroup>
)}
</Field>
</Col>
</Row>
</div>

135
packages/webapp/src/containers/CashFlow/MoneyInDialog/TransferFromAccount/TransferFromAccountFormFields.tsx
View File

@@ -1,33 +1,27 @@
// @ts-nocheck
import React from 'react';
import { FastField, Field, ErrorMessage, useFormikContext } from 'formik';
import { FastField, ErrorMessage } from 'formik';
import { DateInput } from '@blueprintjs/datetime';
import {
Classes,
FormGroup,
InputGroup,
TextArea,
Position,
ControlGroup,
} from '@blueprintjs/core';
import { FormGroup, Position, ControlGroup } from '@blueprintjs/core';
import classNames from 'classnames';
import {
FormattedMessage as T,
AccountsSuggestField,
InputPrependText,
MoneyInputGroup,
FieldRequiredHint,
Col,
Row,
If,
ExchangeRateMutedField,
FeatureCan,
BranchSelect,
BranchSelectButton,
FMoneyInputGroup,
FInputGroup,
FFormGroup,
FTextArea,
} from '@/components';
import { useAutofocus } from '@/hooks';
import { MoneyInOutTransactionNoField } from '../../_components';
import { MoneyInExchangeRateField } from '../MoneyInExchangeRateField';
import { CLASSES, ACCOUNT_TYPE, Features } from '@/constants';
import {
inputIntent,
momentFormatter,
@@ -35,25 +29,19 @@ import {
handleDateChange,
} from '@/utils';
import { useMoneyInDailogContext } from '../MoneyInDialogProvider';
import { useMoneyInFieldsContext } from '../MoneyInFieldsProvider';
import {
useSetPrimaryBranchToForm,
useForeignAccount,
BranchRowDivider,
} from '../../MoneyInDialog/utils';
import { MoneyInOutTransactionNoField } from '../../_components';
/**
* Transfer from account form fields.
*/
export default function TransferFromAccountFormFields() {
// Money in dialog context.
const { accounts, account, branches } = useMoneyInDailogContext();
const isForeigAccount = useForeignAccount();
const amountFieldRef = useAutofocus();
const { values } = useFormikContext();
const { accounts, branches } = useMoneyInDailogContext();
const { account } = useMoneyInFieldsContext();
// Sets the primary branch to form.
useSetPrimaryBranchToForm();
@@ -63,17 +51,14 @@ export default function TransferFromAccountFormFields() {
<FeatureCan feature={Features.Branches}>
<Row>
<Col xs={5}>
<FormGroup
label={<T id={'branch'} />}
className={classNames('form-group--select-list', Classes.FILL)}
>
<FFormGroup label={<T id={'branch'} />} name={'branch_id'}>
<BranchSelect
name={'branch_id'}
branches={branches}
input={BranchSelectButton}
popoverProps={{ minimal: true }}
/>
</FormGroup>
</FFormGroup>
</Col>
</Row>
<BranchRowDivider />
@@ -112,50 +97,27 @@ export default function TransferFromAccountFormFields() {
<MoneyInOutTransactionNoField />
</Col>
</Row>
{/*------------ amount -----------*/}
<FastField name={'amount'}>
{({
form: { values, setFieldValue },
field: { value },
meta: { error, touched },
}) => (
{/*------------ Amount -----------*/}
<Row>
<Col xs={10}>
<FormGroup
label={<T id={'amount'} />}
labelInfo={<FieldRequiredHint />}
intent={inputIntent({ error, touched })}
helperText={<ErrorMessage name="amount" />}
className={'form-group--amount'}
>
<ControlGroup>
<InputPrependText text={account.currency_code} />
<MoneyInputGroup
value={value}
minimal={true}
onChange={(amount) => {
setFieldValue('amount', amount);
}}
inputRef={(ref) => (amountFieldRef.current = ref)}
intent={inputIntent({ error, touched })}
/>
<InputPrependText text={account.currency_code || '--'} />
<FMoneyInputGroup name={'amount'} minimal={true} />
</ControlGroup>
</FormGroup>
)}
</FastField>
<If condition={isForeigAccount}>
{/*------------ exchange rate -----------*/}
<ExchangeRateMutedField
name={'exchange_rate'}
fromCurrency={values.currency_code}
toCurrency={account.currency_code}
formGroupProps={{ label: '', inline: false }}
date={values.date}
exchangeRate={values.exchange_rate}
/>
</If>
</Col>
</Row>
{/*------------ Exchange rate -----------*/}
<MoneyInExchangeRateField />
<Row>
<Col xs={5}>
{/*------------ transfer from account -----------*/}
{/*------------ Transfer from account -----------*/}
<FastField name={'credit_account_id'}>
{({ form, field, meta: { error, touched } }) => (
<FormGroup
@@ -185,43 +147,24 @@ export default function TransferFromAccountFormFields() {
)}
</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>
<FFormGroup name={'reference_no'} label={<T id={'reference_no'} />}>
<FInputGroup name={'reference_no'} />
</FFormGroup>
</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>
{/*------------ Description -----------*/}
<FormGroup name={'description'} label={<T id={'description'} />}>
<FTextArea
name={'description'}
growVertically={true}
large={true}
fill={true}
/>
</FormGroup>
</React.Fragment>
);
}

1
packages/webapp/src/containers/CashFlow/MoneyInDialog/index.tsx
View File

@@ -3,7 +3,6 @@ import React from 'react';
import intl from 'react-intl-universal';
import { Dialog, DialogSuspense } from '@/components';
import withDialogRedux from '@/components/DialogReduxConnect';
import { compose } from '@/utils';
const MoneyInDialogContent = React.lazy(() => import('./MoneyInDialogContent'));

3
packages/webapp/src/containers/CashFlow/MoneyInDialog/utils.tsx
View File

@@ -6,6 +6,7 @@ import { transactionNumber } from '@/utils';
import { isEqual, isNull, first } from 'lodash';
import { useMoneyInDailogContext } from './MoneyInDialogProvider';
import { useMoneyInFieldsContext } from './MoneyInFieldsProvider';
export const useObserveTransactionNoSettings = (prefix, nextNumber) => {
const { setFieldValue } = useFormikContext();
@@ -33,7 +34,7 @@ export const useSetPrimaryBranchToForm = () => {
export const useForeignAccount = () => {
const { values } = useFormikContext();
const { account } = useMoneyInDailogContext();
const { account } = useMoneyInFieldsContext();
return (
!isEqual(account.currency_code, values.currency_code) &&

25
packages/webapp/src/containers/CashFlow/MoneyOutDialog/MoneyOutContentFields.tsx
View File

@@ -1,13 +1,22 @@
// @ts-nocheck
import React from 'react';
import React, { useMemo } from 'react';
import { useFormikContext } from 'formik';
import OtherExpnseFormFields from './OtherExpense/OtherExpnseFormFields';
import OwnerDrawingsFormFields from './OwnerDrawings/OwnerDrawingsFormFields';
import TransferToAccountFormFields from './TransferToAccount/TransferToAccountFormFields';
import { MoneyOutFieldsProvider } from './MoneyOutFieldsProvider';
function MoneyOutContentFields({ accountType }) {
const handleTransactionType = () => {
switch (accountType) {
/**
* Money out content fields.
* Switches between form fields based on the given transaction type.
* @returns {JSX.Element}
*/
function MoneyOutContentFields() {
const { values } = useFormikContext();
const transactionType = useMemo(() => {
switch (values.transaction_type) {
case 'OwnerDrawing':
return <OwnerDrawingsFormFields />;
@@ -19,8 +28,12 @@ function MoneyOutContentFields({ accountType }) {
default:
break;
}
};
return <React.Fragment>{handleTransactionType()}</React.Fragment>;
}, [values.transaction_type]);
// Cannot continue if transaction type or account is not selected.
if (!values.transaction_type || !values.cashflow_account_id) return null;
return <MoneyOutFieldsProvider>{transactionType}</MoneyOutFieldsProvider>;
}
export default MoneyOutContentFields;

28
packages/webapp/src/containers/CashFlow/MoneyOutDialog/MoneyOutDialogProvider.tsx
View File

@@ -1,11 +1,10 @@
// @ts-nocheck
import React from 'react';
import React, { useState } from 'react';
import { DialogContent } from '@/components';
import { Features } from '@/constants';
import { useFeatureCan } from '@/hooks/state';
import {
useAccounts,
useAccount,
useBranches,
useCreateCashflowTransaction,
useCashflowAccounts,
@@ -17,7 +16,15 @@ const MoneyInDialogContent = React.createContext();
/**
* Money out dialog provider.
*/
function MoneyOutProvider({ accountId, accountType, dialogName, ...props }) {
function MoneyOutProvider({
accountId: defaultAccountId,
accountType,
dialogName,
...props
}) {
// Holds the selected account id of the dialog.
const [accountId, setAccountId] = useState<number | null>(defaultAccountId);
// Features guard.
const { featureCan } = useFeatureCan();
const isBranchFeatureCan = featureCan(Features.Branches);
@@ -25,11 +32,6 @@ function MoneyOutProvider({ accountId, accountType, dialogName, ...props }) {
// Fetches accounts list.
const { isLoading: isAccountsLoading, data: accounts } = useAccounts();
// Fetches the specific account details.
const { data: account, isLoading: isAccountLoading } = useAccount(accountId, {
enabled: !!accountId,
});
// Fetches the branches list.
const {
data: branches,
@@ -41,6 +43,7 @@ function MoneyOutProvider({ accountId, accountType, dialogName, ...props }) {
const { data: cashflowAccounts, isLoading: isCashFlowAccountsLoading } =
useCashflowAccounts({}, { keepPreviousData: true });
// Mutation to create a new cashflow account.
const { mutateAsync: createCashflowTransactionMutate } =
useCreateCashflowTransaction();
@@ -52,9 +55,11 @@ function MoneyOutProvider({ accountId, accountType, dialogName, ...props }) {
// Provider data.
const provider = {
accounts,
account,
accountId,
setAccountId,
defaultAccountId,
accounts,
accountType,
branches,
isAccountsLoading,
@@ -73,8 +78,7 @@ function MoneyOutProvider({ accountId, accountType, dialogName, ...props }) {
isAccountsLoading ||
isCashFlowAccountsLoading ||
isBranchesLoading ||
isSettingsLoading ||
isAccountLoading;
isSettingsLoading;
return (
<DialogContent isLoading={isLoading}>

31
packages/webapp/src/containers/CashFlow/MoneyOutDialog/MoneyOutExchangeRateField.tsx Normal file
View File

@@ -0,0 +1,31 @@
// @ts-nocheck
import React from 'react';
import { useFormikContext } from 'formik';
import { useForeignAccount } from './utils';
import { ExchangeRateMutedField } from '@/components';
import { useMoneyOutFieldsContext } from './MoneyOutFieldsProvider';
/**
* Money-out exchange rate field.
* @returns {JSX.Element}
*/
export function MoneyOutExchangeRateField() {
const { values } = useFormikContext();
const { account } = useMoneyOutFieldsContext();
const isForeigAccount = useForeignAccount();
// Cannot continue if the account is not foreign account.
if (!isForeigAccount) return null;
return (
<ExchangeRateMutedField
name={'exchange_rate'}
fromCurrency={values?.currency_code}
toCurrency={account?.currency_code}
formGroupProps={{ label: '', inline: false }}
date={values.date}
exchangeRate={values.exchange_rate}
/>
);
}

34
packages/webapp/src/containers/CashFlow/MoneyOutDialog/MoneyOutFieldsProvider.tsx Normal file
View File

@@ -0,0 +1,34 @@
// @ts-nocheck
import React from 'react';
import { DialogContent } from '@/components';
import { useAccount } from '@/hooks/query';
import { useMoneyOutDialogContext } from './MoneyOutDialogProvider';
const MoneyOutFieldsContext = React.createContext();
/**
* Money out fields dialog provider.
*/
function MoneyOutFieldsProvider({ ...props }) {
const { accountId } = useMoneyOutDialogContext();
// Fetches the specific account details.
const { data: account, isLoading: isAccountLoading } = useAccount(accountId, {
enabled: !!accountId,
});
// Provider data.
const provider = {
account,
};
const isLoading = isAccountLoading;
return (
<DialogContent isLoading={isLoading}>
<MoneyOutFieldsContext.Provider value={provider} {...props} />
</DialogContent>
);
}
const useMoneyOutFieldsContext = () => React.useContext(MoneyOutFieldsContext);
export { MoneyOutFieldsProvider, useMoneyOutFieldsContext };

10
packages/webapp/src/containers/CashFlow/MoneyOutDialog/MoneyOutFloatingActions.tsx
View File

@@ -24,18 +24,16 @@ function MoneyOutFloatingActions({
useMoneyOutDialogContext();
// handle submit as draft button click.
const handleSubmitDraftBtnClick = (event) => {
const handleSubmitDraftBtnClick = () => {
setSubmitPayload({ publish: false });
submitForm();
};
// Handle submit button click.
const handleSubmittBtnClick = (event) => {
const handleSubmittBtnClick = () => {
setSubmitPayload({ publish: true });
};
// Handle close button click.
const handleCloseBtnClick = (event) => {
const handleCloseBtnClick = () => {
closeDialog(dialogName);
};
@@ -49,7 +47,7 @@ function MoneyOutFloatingActions({
>
<T id={'close'} />
</Button>
<Button
intent={Intent.PRIMARY}
disabled={isSubmitting}

16
packages/webapp/src/containers/CashFlow/MoneyOutDialog/MoneyOutForm.tsx
View File

@@ -92,15 +92,13 @@ function MoneyOutForm({
});
};
return (
<div>
<Formik
validationSchema={CreateMoneyOutSchema}
initialValues={initialValues}
onSubmit={handleFormSubmit}
>
<MoneyOutFormContent />
</Formik>
</div>
<Formik
validationSchema={CreateMoneyOutSchema}
initialValues={initialValues}
onSubmit={handleFormSubmit}
>
<MoneyOutFormContent />
</Formik>
);
}

1
packages/webapp/src/containers/CashFlow/MoneyOutDialog/MoneyOutFormDialog.tsx
View File

@@ -17,6 +17,7 @@ export default function MoneyOutFormDialog() {
setFieldValue('transaction_number', incrementNumber || '');
setFieldValue('transaction_number_manually', manually);
};
return (
<React.Fragment>
<TransactionNumberDialog

14
packages/webapp/src/containers/CashFlow/MoneyOutDialog/MoneyOutFormFields.tsx
View File

@@ -1,28 +1,18 @@
// @ts-nocheck
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 (
<div className={Classes.DIALOG_BODY}>
<If condition={!accountId}>
<TransactionTypeFields />
</If>
<MoneyOutContentFields accountType={values.transaction_type} />
<TransactionTypeFields />
<MoneyOutContentFields />
</div>
);
}

137
packages/webapp/src/containers/CashFlow/MoneyOutDialog/OtherExpense/OtherExpnseFormFields.tsx
View File

@@ -1,33 +1,25 @@
// @ts-nocheck
import React from 'react';
import { FastField, Field, ErrorMessage, useFormikContext } from 'formik';
import {
Classes,
FormGroup,
InputGroup,
TextArea,
Position,
ControlGroup,
} from '@blueprintjs/core';
import { FastField, ErrorMessage } from 'formik';
import { FormGroup, Position, ControlGroup } from '@blueprintjs/core';
import classNames from 'classnames';
import {
FormattedMessage as T,
AccountsSuggestField,
InputPrependText,
MoneyInputGroup,
FieldRequiredHint,
Col,
Row,
If,
FeatureCan,
BranchSelect,
BranchSelectButton,
ExchangeRateMutedField,
FTextArea,
FFormGroup,
FInputGroup,
FMoneyInputGroup,
} from '@/components';
import { DateInput } from '@blueprintjs/datetime';
import { useAutofocus } from '@/hooks';
import { Features, ACCOUNT_TYPE } from '@/constants';
import {
inputIntent,
momentFormatter,
@@ -36,25 +28,18 @@ import {
} from '@/utils';
import { CLASSES } from '@/constants/classes';
import { useMoneyOutDialogContext } from '../MoneyOutDialogProvider';
import {
useSetPrimaryBranchToForm,
useForeignAccount,
BranchRowDivider,
} from '../utils';
import { useSetPrimaryBranchToForm, BranchRowDivider } from '../utils';
import { MoneyInOutTransactionNoField } from '../../_components';
import { MoneyOutExchangeRateField } from '../MoneyOutExchangeRateField';
import { useMoneyOutFieldsContext } from '../MoneyOutFieldsProvider';
/**
* Other expense form fields.
*/
export default function OtherExpnseFormFields() {
// Money in dialog context.
const { accounts, account, branches } = useMoneyOutDialogContext();
const isForeigAccount = useForeignAccount();
const { values } = useFormikContext();
const amountFieldRef = useAutofocus();
const { accounts, branches } = useMoneyOutDialogContext();
const { account } = useMoneyOutFieldsContext();
// Sets the primary branch to form.
useSetPrimaryBranchToForm();
@@ -64,21 +49,19 @@ export default function OtherExpnseFormFields() {
<FeatureCan feature={Features.Branches}>
<Row>
<Col xs={5}>
<FormGroup
label={<T id={'branch'} />}
className={classNames('form-group--select-list', Classes.FILL)}
>
<FFormGroup name={'branch_id'} label={<T id={'branch'} />}>
<BranchSelect
name={'branch_id'}
branches={branches}
input={BranchSelectButton}
popoverProps={{ minimal: true }}
/>
</FormGroup>
</FFormGroup>
</Col>
</Row>
<BranchRowDivider />
</FeatureCan>
<Row>
<Col xs={5}>
{/*------------ Date -----------*/}
@@ -113,47 +96,27 @@ export default function OtherExpnseFormFields() {
<MoneyInOutTransactionNoField />
</Col>
</Row>
{/*------------ amount -----------*/}
<FastField name={'amount'}>
{({
form: { values, setFieldValue },
field: { value },
meta: { error, touched },
}) => (
<FormGroup
<Row>
<Col xs={10}>
<FFormGroup
name={'amount'}
label={<T id={'amount'} />}
labelInfo={<FieldRequiredHint />}
intent={inputIntent({ error, touched })}
helperText={<ErrorMessage name="amount" />}
className={'form-group--amount'}
>
<ControlGroup>
<InputPrependText text={account.currency_code} />
<MoneyInputGroup
value={value}
minimal={true}
onChange={(amount) => {
setFieldValue('amount', amount);
}}
inputRef={(ref) => (amountFieldRef.current = ref)}
intent={inputIntent({ error, touched })}
/>
<FMoneyInputGroup name={'amount'} minimal={true} />
</ControlGroup>
</FormGroup>
)}
</FastField>
<If condition={isForeigAccount}>
{/*------------ exchange rate -----------*/}
<ExchangeRateMutedField
name={'exchange_rate'}
fromCurrency={values.currency_code}
toCurrency={account.currency_code}
formGroupProps={{ label: '', inline: false }}
date={values.date}
exchangeRate={values.exchange_rate}
/>
</If>
</FFormGroup>
</Col>
</Row>
{/*------------ Exchange rate -----------*/}
<MoneyOutExchangeRateField />
<Row>
<Col xs={5}>
{/*------------ other expense account -----------*/}
@@ -183,44 +146,24 @@ export default function OtherExpnseFormFields() {
)}
</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>
<FFormGroup name={'reference_no'} label={<T id={'reference_no'} />}>
<FInputGroup name={'reference_no'} />
</FFormGroup>
</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>
<FFormGroup name={'description'} label={<T id={'description'} />}>
<FTextArea
name={'description'}
growVertically={true}
large={true}
fill={true}
/>
</FFormGroup>
</React.Fragment>
);
}

126
packages/webapp/src/containers/CashFlow/MoneyOutDialog/OwnerDrawings/OwnerDrawingsFormFields.tsx
View File

@@ -1,31 +1,24 @@
// @ts-nocheck
import React from 'react';
import { FastField, Field, ErrorMessage, useFormikContext } from 'formik';
import { FastField, ErrorMessage } from 'formik';
import { DateInput } from '@blueprintjs/datetime';
import {
Classes,
FormGroup,
InputGroup,
TextArea,
Position,
ControlGroup,
} from '@blueprintjs/core';
import { FormGroup, Position, ControlGroup } from '@blueprintjs/core';
import classNames from 'classnames';
import {
FormattedMessage as T,
AccountsSuggestField,
InputPrependText,
MoneyInputGroup,
FieldRequiredHint,
If,
Col,
Row,
FeatureCan,
BranchSelect,
BranchSelectButton,
ExchangeRateMutedField,
FFormGroup,
FTextArea,
FInputGroup,
FMoneyInputGroup,
} from '@/components';
import { useAutofocus } from '@/hooks';
import { CLASSES, Features, ACCOUNT_TYPE } from '@/constants';
import {
inputIntent,
@@ -36,21 +29,19 @@ import {
import { useMoneyOutDialogContext } from '../MoneyOutDialogProvider';
import {
useSetPrimaryBranchToForm,
useForeignAccount,
BranchRowDivider,
} from '../../MoneyOutDialog/utils';
import { MoneyInOutTransactionNoField } from '../../_components';
import { useMoneyOutFieldsContext } from '../MoneyOutFieldsProvider';
import { MoneyOutExchangeRateField } from '../MoneyOutExchangeRateField';
/**
* Owner drawings form fields.
*/
export default function OwnerDrawingsFormFields() {
// Money out dialog context.
const { accounts, account, branches } = useMoneyOutDialogContext();
const { values } = useFormikContext();
const isForeigAccount = useForeignAccount();
const amountFieldRef = useAutofocus();
const { accounts, branches } = useMoneyOutDialogContext();
const { account } = useMoneyOutFieldsContext();
// Sets the primary branch to form.
useSetPrimaryBranchToForm();
@@ -60,21 +51,19 @@ export default function OwnerDrawingsFormFields() {
<FeatureCan feature={Features.Branches}>
<Row>
<Col xs={5}>
<FormGroup
label={<T id={'branch'} />}
className={classNames('form-group--select-list', Classes.FILL)}
>
<FFormGroup label={<T id={'branch'} />} name={'branch_id'}>
<BranchSelect
name={'branch_id'}
branches={branches}
input={BranchSelectButton}
popoverProps={{ minimal: true }}
/>
</FormGroup>
</FFormGroup>
</Col>
</Row>
<BranchRowDivider />
</FeatureCan>
<Row>
<Col xs={5}>
{/*------------ Date -----------*/}
@@ -109,48 +98,27 @@ export default function OwnerDrawingsFormFields() {
<MoneyInOutTransactionNoField />
</Col>
</Row>
{/*------------ amount -----------*/}
<Field name={'amount'}>
{({
form: { values, setFieldValue },
field: { value },
meta: { error, touched },
}) => (
{/*------------ Amount -----------*/}
<Row>
<Col xs={10}>
<FormGroup
name={'amount'}
label={<T id={'amount'} />}
labelInfo={<FieldRequiredHint />}
intent={inputIntent({ error, touched })}
helperText={<ErrorMessage name="amount" />}
className={'form-group--amount'}
>
<ControlGroup>
<InputPrependText text={account.currency_code} />
<MoneyInputGroup
value={value}
minimal={true}
onChange={(amount) => {
setFieldValue('amount', amount);
}}
inputRef={(ref) => (amountFieldRef.current = ref)}
intent={inputIntent({ error, touched })}
/>
<FMoneyInputGroup name={'amount'} minimal={true} />
</ControlGroup>
</FormGroup>
)}
</Field>
</Col>
</Row>
{/*------------ Exchange rate -----------*/}
<MoneyOutExchangeRateField />
<If condition={isForeigAccount}>
{/*------------ exchange rate -----------*/}
<ExchangeRateMutedField
name={'exchange_rate'}
fromCurrency={values?.currency_code}
toCurrency={account?.currency_code}
formGroupProps={{ label: '', inline: false }}
date={values.date}
exchangeRate={values.exchange_rate}
/>
</If>
<Row>
<Col xs={5}>
{/*------------ equitty account -----------*/}
@@ -177,44 +145,24 @@ export default function OwnerDrawingsFormFields() {
)}
</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>
<FFormGroup name={'reference_no'} label={<T id={'reference_no'} />}>
<FInputGroup name={'reference_no'} />
</FFormGroup>
</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>
<FFormGroup name={'description'} label={<T id={'description'} />}>
<FTextArea
name={'description'}
growVertically={true}
large={true}
fill={true}
/>
</FFormGroup>
</React.Fragment>
);
}

72
packages/webapp/src/containers/CashFlow/MoneyOutDialog/TransactionTypeFields.tsx
View File

@@ -1,22 +1,21 @@
// @ts-nocheck
import React, { useMemo } from 'react';
import { FastField, Field, ErrorMessage } from 'formik';
import { FastField, ErrorMessage } from 'formik';
import { FormGroup } from '@blueprintjs/core';
import classNames from 'classnames';
import {
FormattedMessage as T,
AccountsSuggestField,
FieldRequiredHint,
ListSelect,
Col,
Row,
FSelect,
FFormGroup,
} from '@/components';
import { inputIntent } from '@/utils';
import { CLASSES } from '@/constants/classes';
import { getAddMoneyOutOptions } from '@/constants/cashflowOptions';
import { useMoneyOutDialogContext } from './MoneyOutDialogProvider';
import { CLASSES } from '@/constants/classes';
/**
* Transaction type fields.
@@ -27,9 +26,32 @@ function TransactionTypeFields() {
const addMoneyOutOptions = useMemo(() => getAddMoneyOutOptions(), []);
// Money in dialog context.
const { defaultAccountId, setAccountId } = useMoneyOutDialogContext();
// Cannot continue if the default account id is defined.
if (defaultAccountId) return null;
return (
<div className="trasnaction-type-fileds">
<Row>
{/*------------ Transaction type -----------*/}
<Col xs={5}>
<FFormGroup
name={'transaction_type'}
label={<T id={'transaction_type'} />}
labelInfo={<FieldRequiredHint />}
>
<FSelect
name={'transaction_type'}
items={addMoneyOutOptions}
popoverProps={{ minimal: true }}
valueAccessor={'value'}
textAccessor={'name'}
/>
</FFormGroup>
</Col>
<Col xs={5}>
{/*------------ Current account -----------*/}
<FastField name={'cashflow_account_id'}>
@@ -47,9 +69,10 @@ function TransactionTypeFields() {
>
<AccountsSuggestField
accounts={cashflowAccounts}
onAccountSelected={({ id }) =>
form.setFieldValue('cashflow_account_id', id)
}
onAccountSelected={({ id }) => {
form.setFieldValue('cashflow_account_id', id);
setAccountId(id);
}}
inputProps={{
intent: inputIntent({ error, touched }),
}}
@@ -57,39 +80,6 @@ function TransactionTypeFields() {
</FormGroup>
)}
</FastField>
{/*------------ Transaction type -----------*/}
</Col>
<Col xs={5}>
<Field name={'transaction_type'}>
{({
form: { values, setFieldValue },
field: { value },
meta: { error, touched },
}) => (
<FormGroup
label={<T id={'transaction_type'} />}
labelInfo={<FieldRequiredHint />}
helperText={<ErrorMessage name="transaction_type" />}
intent={inputIntent({ error, touched })}
className={classNames(
CLASSES.FILL,
'form-group--transaction_type',
)}
>
<ListSelect
items={addMoneyOutOptions}
onItemSelect={(type) => {
setFieldValue('transaction_type', type.value);
}}
filterable={false}
selectedItem={value}
selectedItemProp={'value'}
textProp={'name'}
popoverProps={{ minimal: true }}
/>
</FormGroup>
)}
</Field>
</Col>
</Row>
</div>

146
packages/webapp/src/containers/CashFlow/MoneyOutDialog/TransferToAccount/TransferToAccountFormFields.tsx
View File

@@ -1,65 +1,46 @@
// @ts-nocheck
import React from 'react';
import { FastField, Field, ErrorMessage, useFormikContext } from 'formik';
import {
Classes,
FormGroup,
InputGroup,
TextArea,
Position,
ControlGroup,
} from '@blueprintjs/core';
import { FastField, ErrorMessage } from 'formik';
import { FormGroup, Position, ControlGroup } from '@blueprintjs/core';
import classNames from 'classnames';
import {
FormattedMessage as T,
AccountsSuggestField,
InputPrependText,
MoneyInputGroup,
FieldRequiredHint,
Icon,
Col,
Row,
If,
InputPrependButton,
FeatureCan,
BranchSelect,
BranchSelectButton,
ExchangeRateMutedField,
FFormGroup,
FTextArea,
FMoneyInputGroup,
FInputGroup,
} from '@/components';
import { DateInput } from '@blueprintjs/datetime';
import { useAutofocus } from '@/hooks';
import { ACCOUNT_TYPE } from '@/constants/accountTypes';
import {
inputIntent,
momentFormatter,
tansformDateValue,
handleDateChange,
compose,
} from '@/utils';
import { Features } from '@/constants';
import { CLASSES } from '@/constants/classes';
import { useMoneyOutDialogContext } from '../MoneyOutDialogProvider';
import {
useObserveTransactionNoSettings,
useSetPrimaryBranchToForm,
useForeignAccount,
BranchRowDivider,
} from '../utils';
import withSettings from '@/containers/Settings/withSettings';
import withDialogActions from '@/containers/Dialog/withDialogActions';
import { useSetPrimaryBranchToForm, BranchRowDivider } from '../utils';
import { MoneyInOutTransactionNoField } from '../../_components';
import { MoneyOutExchangeRateField } from '../MoneyOutExchangeRateField';
import { useMoneyOutFieldsContext } from '../MoneyOutFieldsProvider';
/**
* Transfer to account form fields.
*/
export default function TransferToAccountFormFields() {
// Money in dialog context.
const { accounts, account, branches } = useMoneyOutDialogContext();
const { values } = useFormikContext();
const isForeigAccount = useForeignAccount();
const accountRef = useAutofocus();
const { accounts, branches } = useMoneyOutDialogContext();
const { account } = useMoneyOutFieldsContext();
// Sets the primary branch to form.
useSetPrimaryBranchToForm();
@@ -69,21 +50,19 @@ export default function TransferToAccountFormFields() {
<FeatureCan feature={Features.Branches}>
<Row>
<Col xs={5}>
<FormGroup
label={<T id={'branch'} />}
className={classNames('form-group--select-list', Classes.FILL)}
>
<FFormGroup label={<T id={'branch'} />} name={'branch_id'}>
<BranchSelect
name={'branch_id'}
branches={branches}
input={BranchSelectButton}
popoverProps={{ minimal: true }}
/>
</FormGroup>
</FFormGroup>
</Col>
</Row>
<BranchRowDivider />
</FeatureCan>
<Row>
<Col xs={5}>
{/*------------ Date -----------*/}
@@ -113,52 +92,32 @@ export default function TransferToAccountFormFields() {
)}
</FastField>
</Col>
<Col xs={5}>
{/*------------ Transaction number -----------*/}
<MoneyInOutTransactionNoField />
</Col>
</Row>
{/*------------ amount -----------*/}
<FastField name={'amount'}>
{({
form: { values, setFieldValue },
field: { value },
meta: { error, touched },
}) => (
<FormGroup
{/*------------ Amount -----------*/}
<Row>
<Col xs={10}>
<FFormGroup
name={'amount'}
label={<T id={'amount'} />}
labelInfo={<FieldRequiredHint />}
intent={inputIntent({ error, touched })}
helperText={<ErrorMessage name="amount" />}
className={'form-group--amount'}
>
<ControlGroup>
<InputPrependText text={account.currency_code} />
<MoneyInputGroup
value={value}
minimal={true}
onChange={(amount) => {
setFieldValue('amount', amount);
}}
inputRef={accountRef}
intent={inputIntent({ error, touched })}
/>
<FMoneyInputGroup name={'amount'} minimal={true} />
</ControlGroup>
</FormGroup>
)}
</FastField>
<If condition={isForeigAccount}>
{/*------------ exchange rate -----------*/}
<ExchangeRateMutedField
name={'exchange_rate'}
fromCurrency={values?.currency_code}
toCurrency={account?.currency_code}
formGroupProps={{ label: '', inline: false }}
date={values.date}
exchangeRate={values.exchange_rate}
/>
</If>
</FFormGroup>
</Col>
</Row>
{/*------------ Exchange rate -----------*/}
<MoneyOutExchangeRateField />
<Row>
<Col xs={5}>
{/*------------ transfer from account -----------*/}
@@ -191,43 +150,24 @@ export default function TransferToAccountFormFields() {
)}
</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>
<FFormGroup name={'reference_no'} label={<T id={'reference_no'} />}>
<FInputGroup name={'reference_no'} />
</FFormGroup>
</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>
{/*------------ Description -----------*/}
<FFormGroup name={'description'} label={<T id={'description'} />}>
<FTextArea
name={'description'}
growVertically={true}
large={true}
fill={true}
/>
</FFormGroup>
</React.Fragment>
);
}

3
packages/webapp/src/containers/CashFlow/MoneyOutDialog/utils.tsx
View File

@@ -6,6 +6,7 @@ import { transactionNumber } from '@/utils';
import { first, isEqual, isNull } from 'lodash';
import { useMoneyOutDialogContext } from './MoneyOutDialogProvider';
import { useMoneyOutFieldsContext } from './MoneyOutFieldsProvider';
export const useObserveTransactionNoSettings = (prefix, nextNumber) => {
const { setFieldValue } = useFormikContext();
@@ -33,7 +34,7 @@ export const useSetPrimaryBranchToForm = () => {
export const useForeignAccount = () => {
const { values } = useFormikContext();
const { account } = useMoneyOutDialogContext();
const { account } = useMoneyOutFieldsContext();
return (
!isEqual(account.currency_code, values.currency_code) &&

4
packages/webapp/src/containers/CashFlow/_components.tsx
View File

@@ -38,11 +38,11 @@ export const MoneyInOutSyncIncrementSettingsToForm = R.compose(
// Do not update if the invoice auto-increment is disabled.
if (!transactionAutoIncrement) return null;
const transactionNumber = transactionNumber(
const newTransactionNumber = transactionNumber(
transactionNumberPrefix,
transactionNextNumber,
);
setFieldValue('transaction_number', transactionNumber);
setFieldValue('transaction_number', newTransactionNumber);
}, [setFieldValue, transactionNumberPrefix, transactionNextNumber]);
return null;

30
packages/webapp/src/style/pages/CashFlow/CashflowTransactionForm.scss
View File

@@ -1,34 +1,14 @@
.dialog--money-in,
.dialog--money-out {
.bp3-form-group {
margin-bottom: 15px;
label.bp3-label {
font-size: 13px;
margin-bottom: 3px;
}
}
.form-group {
&--description {
.bp3-form-content {
textarea {
width: 100%;
min-width: 100%;
font-size: 14px;
}
}
}
&--reference-no,
&--amount,
&--credit_account_id {
max-width: 380px;
}
}
.trasnaction-type-fileds {
margin-bottom: 18px;
padding: 16px 0px 12px 0px;
padding: 0 0px 16px 0px;
border-bottom: 2px solid #e9e9e9;
.bp3-form-group{
margin-bottom: 0;
}
}
.bp3-dialog-footer {