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

refactor(webapp): all services with new AccountSelect and AccountMultiSelect components.

Browse Source
This commit is contained in:
a.bouhuolia
2023-05-01 00:13:23 +02:00
parent c1d92b74f0
commit a7d29a31c8
16 changed files with 344 additions and 535 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
packages/webapp/src/components/Currencies/CurrencySelect.tsx
View File

@@ -2,7 +2,6 @@
import React from 'react'; import React from 'react';
import intl from 'react-intl-universal'; import intl from 'react-intl-universal';
import { MenuItem, Button } from '@blueprintjs/core';
import { FSelect } from '../Forms'; import { FSelect } from '../Forms';
/** /**
@@ -28,23 +27,6 @@ const currencyItemPredicate = (query, currency, _index, exactMatch) => {
} }
}; };
/**
* @param {*} currency
* @returns
*/
const currencyItemRenderer = (currency, { handleClick, modifiers, query }) => {
return (
<MenuItem
active={modifiers.active}
disabled={modifiers.disabled}
text={currency.currency_name}
label={currency.currency_code.toString()}
key={currency.id}
onClick={handleClick}
/>
);
};
/** /**
* *
* @param {*} currencies * @param {*} currencies
@@ -54,20 +36,12 @@ export function CurrencySelect({ currencies, ...rest }) {
return ( return (
<FSelect <FSelect
itemPredicate={currencyItemPredicate} itemPredicate={currencyItemPredicate}
itemRenderer={currencyItemRenderer}
valueAccessor={'currency_code'} valueAccessor={'currency_code'}
textAccessor={'currency_name'}
labelAccessor={'currency_code'} labelAccessor={'currency_code'}
{...rest} {...rest}
items={currencies} items={currencies}
input={CurrnecySelectButton} placeholder={intl.get('select_currency_code')}
/> />
); );
} }
/**
* @param {*} label
* @returns
*/
function CurrnecySelectButton({ label }) {
return <Button text={label ? label : intl.get('select_currency_code')} />;
}

48
packages/webapp/src/containers/Expenses/ExpenseForm/ExpenseFormHeaderFields.tsx
View File

@@ -16,7 +16,8 @@ import { customersFieldShouldUpdate, accountsFieldShouldUpdate } from './utils';
import { import {
CurrencySelectList, CurrencySelectList,
CustomerSelectField, CustomerSelectField,
AccountsSelectList, FFormGroup,
AccountsSelect,
FieldRequiredHint, FieldRequiredHint,
Hint, Hint,
} from '@/components'; } from '@/components';
@@ -54,37 +55,26 @@ export default function ExpenseFormHeader() {
)} )}
</FastField> </FastField>
<FastField <FFormGroup
name={'payment_account_id'} name={'payment_account_id'}
accounts={accounts} items={accounts}
label={<T id={'payment_account'} />}
labelInfo={<FieldRequiredHint />}
inline={true}
fastField={true}
shouldUpdate={accountsFieldShouldUpdate} shouldUpdate={accountsFieldShouldUpdate}
> >
{({ form, field: { value }, meta: { error, touched } }) => ( <AccountsSelect
<FormGroup name={'payment_account_id'}
label={<T id={'payment_account'} />} items={accounts}
className={classNames( placeholder={<T id={'select_payment_account'} />}
'form-group--payment_account', filterByParentTypes={[ACCOUNT_PARENT_TYPE.CURRENT_ASSET]}
'form-group--select-list', allowCreate={true}
Classes.FILL, fastField={true}
)} shouldUpdate={accountsFieldShouldUpdate}
labelInfo={<FieldRequiredHint />} fill={true}
intent={inputIntent({ error, touched })} />
helperText={<ErrorMessage name={'payment_account_id'} />} </FFormGroup>
inline={true}
>
<AccountsSelectList
accounts={accounts}
onAccountSelected={(account) => {
form.setFieldValue('payment_account_id', account.id);
}}
defaultSelectText={<T id={'select_payment_account'} />}
selectedAccountId={value}
filterByParentTypes={[ACCOUNT_PARENT_TYPE.CURRENT_ASSET]}
allowCreate={true}
/>
</FormGroup>
)}
</FastField>
<FastField name={'currency_code'}> <FastField name={'currency_code'}>
{({ form, field: { value }, meta: { error, touched } }) => ( {({ form, field: { value }, meta: { error, touched } }) => (

2
packages/webapp/src/containers/Expenses/ExpenseForm/utils.tsx
View File

@@ -114,7 +114,7 @@ export const customersFieldShouldUpdate = (newProps, oldProps) => {
*/ */
export const accountsFieldShouldUpdate = (newProps, oldProps) => { export const accountsFieldShouldUpdate = (newProps, oldProps) => {
return ( return (
newProps.accounts !== oldProps.accounts || newProps.items !== oldProps.items ||
defaultFastFieldShouldUpdate(newProps, oldProps) defaultFastFieldShouldUpdate(newProps, oldProps)
); );
}; };

106
packages/webapp/src/containers/Items/ItemFormBody.tsx
View File

@@ -9,15 +9,15 @@ import {
ControlGroup, ControlGroup,
} from '@blueprintjs/core'; } from '@blueprintjs/core';
import { import {
AccountsSelectList, AccountsSelect,
MoneyInputGroup, MoneyInputGroup,
Col, Col,
Row, Row,
Hint, Hint,
InputPrependText, InputPrependText,
FFormGroup,
} from '@/components'; } from '@/components';
import { FormattedMessage as T } from '@/components'; import { FormattedMessage as T } from '@/components';
import classNames from 'classnames';
import { useItemFormContext } from './ItemFormProvider'; import { useItemFormContext } from './ItemFormProvider';
import withCurrentOrganization from '@/containers/Organization/withCurrentOrganization'; import withCurrentOrganization from '@/containers/Organization/withCurrentOrganization';
@@ -91,42 +91,27 @@ function ItemFormBody({ organization: { base_currency } }) {
</FastField> </FastField>
{/*------------- Selling account ------------- */} {/*------------- Selling account ------------- */}
<FastField <FFormGroup
label={<T id={'account'} />}
name={'sell_account_id'} name={'sell_account_id'}
labelInfo={
<Hint content={<T id={'item.field.sell_account.hint'} />} />
}
inline={true}
items={accounts}
sellable={values.sellable} sellable={values.sellable}
accounts={accounts}
shouldUpdate={sellAccountFieldShouldUpdate} shouldUpdate={sellAccountFieldShouldUpdate}
> >
{({ form, field: { value }, meta: { error, touched } }) => ( <AccountsSelect
<FormGroup name={'sell_account_id'}
label={<T id={'account'} />} items={accounts}
labelInfo={ placeholder={<T id={'select_account'} />}
<Hint content={<T id={'item.field.sell_account.hint'} />} /> disabled={!values.sellable}
} filterByParentTypes={[ACCOUNT_PARENT_TYPE.INCOME]}
inline={true} fill={true}
intent={inputIntent({ error, touched })} allowCreate={true}
helperText={<ErrorMessage name="sell_account_id" />} />
className={classNames( </FFormGroup>
'form-group--sell-account',
'form-group--select-list',
Classes.FILL,
)}
>
<AccountsSelectList
accounts={accounts}
onAccountSelected={(account) => {
form.setFieldValue('sell_account_id', account.id);
}}
defaultSelectText={<T id={'select_account'} />}
selectedAccountId={value}
disabled={!form.values.sellable}
filterByParentTypes={[ACCOUNT_PARENT_TYPE.INCOME]}
popoverFill={true}
allowCreate={true}
/>
</FormGroup>
)}
</FastField>
<FastField <FastField
name={'sell_description'} name={'sell_description'}
@@ -200,42 +185,31 @@ function ItemFormBody({ organization: { base_currency } }) {
</FastField> </FastField>
{/*------------- Cost account ------------- */} {/*------------- Cost account ------------- */}
<FastField <FFormGroup
name={'cost_account_id'} name={'cost_account_id'}
purchasable={values.purchasable} purchasable={values.purchasable}
accounts={accounts} items={accounts}
shouldUpdate={costAccountFieldShouldUpdate} shouldUpdate={costAccountFieldShouldUpdate}
label={<T id={'account'} />}
labelInfo={
<Hint content={<T id={'item.field.cost_account.hint'} />} />
}
inline={true}
fastField={true}
> >
{({ form, field: { value }, meta: { error, touched } }) => ( <AccountsSelect
<FormGroup name={'cost_account_id'}
label={<T id={'account'} />} items={accounts}
labelInfo={ placeholder={<T id={'select_account'} />}
<Hint content={<T id={'item.field.cost_account.hint'} />} /> filterByParentTypes={[ACCOUNT_PARENT_TYPE.EXPENSE]}
} popoverFill={true}
inline={true} allowCreate={true}
intent={inputIntent({ error, touched })} fastField={true}
helperText={<ErrorMessage name="cost_account_id" />} disabled={!values.purchasable}
className={classNames( purchasable={values.purchasable}
'form-group--cost-account', shouldUpdate={costAccountFieldShouldUpdate}
'form-group--select-list', />
Classes.FILL, </FFormGroup>
)}
>
<AccountsSelectList
accounts={accounts}
onAccountSelected={(account) => {
form.setFieldValue('cost_account_id', account.id);
}}
defaultSelectText={<T id={'select_account'} />}
selectedAccountId={value}
disabled={!form.values.purchasable}
filterByParentTypes={[ACCOUNT_PARENT_TYPE.EXPENSE]}
popoverFill={true}
allowCreate={true}
/>
</FormGroup>
)}
</FastField>
<FastField <FastField
name={'purchase_description'} name={'purchase_description'}

53
packages/webapp/src/containers/Items/ItemFormInventorySection.tsx
View File

@@ -1,21 +1,18 @@
// @ts-nocheck // @ts-nocheck
import React from 'react'; import React from 'react';
import { FastField, ErrorMessage } from 'formik';
import { FormGroup } from '@blueprintjs/core';
import { CLASSES } from '@/constants/classes';
import { import {
AccountsSelectList, AccountsSelect,
FFormGroup,
FormattedMessage as T, FormattedMessage as T,
Col, Col,
Row, Row,
} from '@/components'; } from '@/components';
import classNames from 'classnames';
import withCurrentOrganization from '@/containers/Organization/withCurrentOrganization';
import withCurrentOrganization from '@/containers/Organization/withCurrentOrganization';
import { accountsFieldShouldUpdate } from './utils'; import { accountsFieldShouldUpdate } from './utils';
import { compose, inputIntent } from '@/utils';
import { ACCOUNT_TYPE } from '@/constants/accountTypes'; import { ACCOUNT_TYPE } from '@/constants/accountTypes';
import { useItemFormContext } from './ItemFormProvider'; import { useItemFormContext } from './ItemFormProvider';
import { compose } from '@/utils';
/** /**
* Item form inventory sections. * Item form inventory sections.
@@ -31,36 +28,24 @@ function ItemFormInventorySection({ organization: { base_currency } }) {
<Row> <Row>
<Col xs={6}> <Col xs={6}>
{/*------------- Inventory account ------------- */} {/*------------- Inventory Account ------------- */}
<FastField <FFormGroup
label={<T id={'inventory_account'} />}
name={'inventory_account_id'} name={'inventory_account_id'}
accounts={accounts} items={accounts}
fastField={true}
shouldUpdate={accountsFieldShouldUpdate} shouldUpdate={accountsFieldShouldUpdate}
inline={true}
> >
{({ form, field: { value }, meta: { touched, error } }) => ( <AccountsSelect
<FormGroup name={'inventory_account_id'}
label={<T id={'inventory_account'} />} items={accounts}
inline={true} placeholder={<T id={'select_account'} />}
intent={inputIntent({ error, touched })} filterByTypes={[ACCOUNT_TYPE.INVENTORY]}
helperText={<ErrorMessage name="inventory_account_id" />} fastField={true}
className={classNames( shouldUpdate={accountsFieldShouldUpdate}
'form-group--item-inventory_account', />
'form-group--select-list', </FFormGroup>
CLASSES.FILL,
)}
>
<AccountsSelectList
accounts={accounts}
onAccountSelected={(account) => {
form.setFieldValue('inventory_account_id', account.id);
}}
defaultSelectText={<T id={'select_account'} />}
selectedAccountId={value}
filterByTypes={[ACCOUNT_TYPE.INVENTORY]}
/>
</FormGroup>
)}
</FastField>
</Col> </Col>
</Row> </Row>
</div> </div>

4
packages/webapp/src/containers/Items/utils.tsx
View File

@@ -119,7 +119,7 @@ export const handleDeleteErrors = (errors) => {
*/ */
export const accountsFieldShouldUpdate = (newProps, oldProps) => { export const accountsFieldShouldUpdate = (newProps, oldProps) => {
return ( return (
newProps.accounts !== oldProps.accounts || newProps.items !== oldProps.items ||
defaultFastFieldShouldUpdate(newProps, oldProps) defaultFastFieldShouldUpdate(newProps, oldProps)
); );
}; };
@@ -149,7 +149,7 @@ export const sellPriceFieldShouldUpdate = (newProps, oldProps) => {
*/ */
export const sellAccountFieldShouldUpdate = (newProps, oldProps) => { export const sellAccountFieldShouldUpdate = (newProps, oldProps) => {
return ( return (
newProps.accounts !== oldProps.accounts || newProps.items !== oldProps.items ||
newProps.sellable !== oldProps.sellable || newProps.sellable !== oldProps.sellable ||
defaultFastFieldShouldUpdate(newProps, oldProps) defaultFastFieldShouldUpdate(newProps, oldProps)
); );

195
packages/webapp/src/containers/Preferences/Accountant/AccountantForm.tsx
View File

@@ -14,12 +14,13 @@ import { useHistory } from 'react-router-dom';
import { import {
FormattedMessage as T, FormattedMessage as T,
AccountsSelectList, AccountsSelect,
FieldRequiredHint, FieldRequiredHint,
CardFooterActions, CardFooterActions,
FFormGroup,
} from '@/components'; } from '@/components';
import { handleStringChange, inputIntent } from '@/utils'; import { handleStringChange, inputIntent } from '@/utils';
import { ACCOUNT_TYPE } from '@/constants/accountTypes'; import { ACCOUNT_PARENT_TYPE, ACCOUNT_TYPE } from '@/constants/accountTypes';
import { useAccountantFormContext } from './AccountantFormProvider'; import { useAccountantFormContext } from './AccountantFormProvider';
@@ -28,6 +29,7 @@ import { useAccountantFormContext } from './AccountantFormProvider';
*/ */
export default function AccountantForm() { export default function AccountantForm() {
const history = useHistory(); const history = useHistory();
const { accounts } = useAccountantFormContext();
const { isSubmitting } = useFormikContext(); const { isSubmitting } = useFormikContext();
@@ -35,8 +37,6 @@ export default function AccountantForm() {
history.go(-1); history.go(-1);
}; };
const { accounts } = useAccountantFormContext();
return ( return (
<Form> <Form>
{/* ----------- Accounts ----------- */} {/* ----------- Accounts ----------- */}
@@ -48,7 +48,7 @@ export default function AccountantForm() {
} }
className={'accounts-checkbox'} className={'accounts-checkbox'}
> >
{/*------------ account code required -----------*/} {/*------------ Account code (required) -----------*/}
<FastField name={'account_code_required'} type={'checkbox'}> <FastField name={'account_code_required'} type={'checkbox'}>
{({ field }) => ( {({ field }) => (
<FormGroup inline={true}> <FormGroup inline={true}>
@@ -65,7 +65,8 @@ export default function AccountantForm() {
</FormGroup> </FormGroup>
)} )}
</FastField> </FastField>
{/*------------ account code unique -----------*/}
{/*------------ Account code (unique) -----------*/}
<FastField name={'account_code_unique'} type={'checkbox'}> <FastField name={'account_code_unique'} type={'checkbox'}>
{({ field }) => ( {({ field }) => (
<FormGroup inline={true}> <FormGroup inline={true}>
@@ -85,6 +86,7 @@ export default function AccountantForm() {
)} )}
</FastField> </FastField>
</FormGroup> </FormGroup>
{/* ----------- Accounting basis ----------- */} {/* ----------- Accounting basis ----------- */}
<FastField name={'accounting_basis'}> <FastField name={'accounting_basis'}>
{({ {({
@@ -116,120 +118,87 @@ export default function AccountantForm() {
</FastField> </FastField>
{/* ----------- Deposit customer account ----------- */} {/* ----------- Deposit customer account ----------- */}
<FastField name={'preferred_deposit_account'}> <FFormGroup
{({ name={'preferred_deposit_account'}
form: { values, setFieldValue }, label={
field: { value }, <strong>
meta: { error, touched }, <T id={'deposit_customer_account'} />
}) => ( </strong>
<FormGroup }
label={ helperText={
<strong> <T
<T id={'deposit_customer_account'} /> id={
</strong> 'select_a_preferred_account_to_deposit_into_it_after_customer_make_payment'
} }
helperText={ />
<T }
id={ labelInfo={<FieldRequiredHint />}
'select_a_preferred_account_to_deposit_into_it_after_customer_make_payment' >
} <AccountsSelect
/> name={'preferred_deposit_account'}
} items={accounts}
labelInfo={<FieldRequiredHint />} placeholder={<T id={'select_payment_account'} />}
intent={inputIntent({ error, touched })} filterByTypes={[
> ACCOUNT_TYPE.CASH,
<AccountsSelectList ACCOUNT_TYPE.BANK,
accounts={accounts} ACCOUNT_TYPE.OTHER_CURRENT_ASSET,
onAccountSelected={({ id }) => { ]}
setFieldValue('preferred_deposit_account', id); />
}} </FFormGroup>
selectedAccountId={value}
defaultSelectText={<T id={'select_payment_account'} />}
filterByTypes={[
ACCOUNT_TYPE.CASH,
ACCOUNT_TYPE.BANK,
ACCOUNT_TYPE.OTHER_CURRENT_ASSET,
]}
/>
</FormGroup>
)}
</FastField>
{/* ----------- Withdrawal vendor account ----------- */} {/* ----------- Withdrawal vendor account ----------- */}
<FastField name={'withdrawal_account'}> <FFormGroup
{({ name={'withdrawal_account'}
form: { values, setFieldValue }, label={
field: { value }, <strong>
meta: { error, touched }, <T id={'withdrawal_vendor_account'} />
}) => ( </strong>
<FormGroup }
label={ helperText={
<strong> <T
<T id={'withdrawal_vendor_account'} /> id={
</strong> 'select_a_preferred_account_to_deposit_into_it_after_customer_make_payment'
} }
helperText={ />
<T }
id={ labelInfo={<FieldRequiredHint />}
'select_a_preferred_account_to_deposit_into_it_after_customer_make_payment' >
} <AccountsSelect
/> name={'withdrawal_account'}
} items={accounts}
labelInfo={<FieldRequiredHint />} placeholder={<T id={'select_payment_account'} />}
intent={inputIntent({ error, touched })} filterByTypes={[
> ACCOUNT_TYPE.CASH,
<AccountsSelectList ACCOUNT_TYPE.BANK,
accounts={accounts} ACCOUNT_TYPE.OTHER_CURRENT_ASSET,
onAccountSelected={({ id }) => { ]}
setFieldValue('withdrawal_account', id); />
}} </FFormGroup>
selectedAccountId={value}
defaultSelectText={<T id={'select_payment_account'} />}
filterByTypes={[
ACCOUNT_TYPE.CASH,
ACCOUNT_TYPE.BANK,
ACCOUNT_TYPE.OTHER_CURRENT_ASSET,
]}
/>
</FormGroup>
)}
</FastField>
{/* ----------- Withdrawal customer account ----------- */} {/* ----------- Withdrawal customer account ----------- */}
<FastField name={'preferred_advance_deposit'}> <FFormGroup
{({ name={'preferred_advance_deposit'}
form: { values, setFieldValue }, label={
field: { value }, <strong>
meta: { error, touched }, <T id={'customer_advance_deposit'} />
}) => ( </strong>
<FormGroup }
label={ helperText={
<strong> <T
<T id={'customer_advance_deposit'} /> id={
</strong> 'select_a_preferred_account_to_deposit_into_it_vendor_advanced_deposits'
} }
helperText={ />
<T }
id={ labelInfo={<FieldRequiredHint />}
'select_a_preferred_account_to_deposit_into_it_vendor_advanced_deposits' >
} <AccountsSelect
/> name={'preferred_advance_deposit'}
} items={accounts}
labelInfo={<FieldRequiredHint />} placeholder={<T id={'select_payment_account'} />}
intent={inputIntent({ error, touched })} filterByParentTypes={[ACCOUNT_PARENT_TYPE.CURRENT_ASSET]}
> />
<AccountsSelectList </FFormGroup>
accounts={accounts}
onAccountSelected={({ id }) => {
setFieldValue('preferred_advance_deposit', id);
}}
selectedAccountId={value}
defaultSelectText={<T id={'select_payment_account'} />}
// filterByParentTypes={[ACCOUNT_PARENT_TYPE.CURRENT_ASSET]}
/>
</FormGroup>
)}
</FastField>
<CardFooterActions> <CardFooterActions>
<Button intent={Intent.PRIMARY} loading={isSubmitting} type="submit"> <Button intent={Intent.PRIMARY} loading={isSubmitting} type="submit">

182
packages/webapp/src/containers/Preferences/Item/ItemPreferencesForm.tsx
View File

@@ -1,15 +1,15 @@
// @ts-nocheck // @ts-nocheck
import React from 'react'; import React from 'react';
import { Form, FastField, useFormikContext } from 'formik'; import { Form, useFormikContext } from 'formik';
import { FormGroup, Button, Intent } from '@blueprintjs/core'; import { FormGroup, Button, Intent } from '@blueprintjs/core';
import { useHistory } from 'react-router-dom'; import { useHistory } from 'react-router-dom';
import { import {
AccountsSelectList, AccountsSelect,
FieldRequiredHint, FieldRequiredHint,
FormattedMessage as T, FormattedMessage as T,
CardFooterActions FFormGroup,
CardFooterActions,
} from '@/components'; } from '@/components';
import { inputIntent } from '@/utils';
import { ACCOUNT_PARENT_TYPE, ACCOUNT_TYPE } from '@/constants/accountTypes'; import { ACCOUNT_PARENT_TYPE, ACCOUNT_TYPE } from '@/constants/accountTypes';
import { useItemPreferencesFormContext } from './ItemPreferencesFormProvider'; import { useItemPreferencesFormContext } from './ItemPreferencesFormProvider';
@@ -29,113 +29,83 @@ export default function ItemForm() {
return ( return (
<Form> <Form>
{/* ----------- preferred sell account ----------- */} {/* ----------- Preferred Sell Account ----------- */}
<FastField name={'preferred_sell_account'}> <FormGroup
{({ name={'preferred_sell_account'}
form: { values, setFieldValue }, label={
field: { value }, <strong>
meta: { error, touched }, <T id={'preferred_sell_account'} />
}) => ( </strong>
<FormGroup }
label={ helperText={
<strong> <T
<T id={'preferred_sell_account'} /> id={
</strong> 'select_a_preferred_account_to_deposit_into_it_after_customer_make_payment'
} }
helperText={ />
<T }
id={ labelInfo={<FieldRequiredHint />}
'select_a_preferred_account_to_deposit_into_it_after_customer_make_payment' fastField={true}
} >
/> <AccountsSelect
} name={'preferred_sell_account'}
labelInfo={<FieldRequiredHint />} items={accounts}
intent={inputIntent({ error, touched })} placeholder={<T id={'select_payment_account'} />}
> filterByParentTypes={[ACCOUNT_PARENT_TYPE.INCOME]}
<AccountsSelectList />
accounts={accounts} </FormGroup>
onAccountSelected={({ id }) => {
setFieldValue('preferred_sell_account', id);
}}
selectedAccountId={value}
defaultSelectText={<T id={'select_payment_account'} />}
filterByParentTypes={[ACCOUNT_PARENT_TYPE.INCOME]}
/>
</FormGroup>
)}
</FastField>
{/* ----------- preferred cost account ----------- */} {/* ----------- Preferred Cost Account ----------- */}
<FastField name={'preferred_cost_account'}> <FFormGroup
{({ name={'preferred_cost_account'}
form: { values, setFieldValue }, label={
field: { value }, <strong>
meta: { error, touched }, <T id={'preferred_cost_account'} />
}) => ( </strong>
<FormGroup }
label={ helperText={
<strong> <T
<T id={'preferred_cost_account'} /> id={
</strong> 'select_a_preferred_account_to_deposit_into_it_after_customer_make_payment'
} }
helperText={ />
<T }
id={ labelInfo={<FieldRequiredHint />}
'select_a_preferred_account_to_deposit_into_it_after_customer_make_payment' fastField={true}
} >
/> <AccountsSelect
} name={'preferred_cost_account'}
labelInfo={<FieldRequiredHint />} items={accounts}
intent={inputIntent({ error, touched })} placeholder={<T id={'select_payment_account'} />}
> filterByParentTypes={[ACCOUNT_PARENT_TYPE.EXPENSE]}
<AccountsSelectList />
accounts={accounts} </FFormGroup>
onAccountSelected={({ id }) => {
setFieldValue('preferred_cost_account', id);
}}
selectedAccountId={value}
defaultSelectText={<T id={'select_payment_account'} />}
filterByParentTypes={[ACCOUNT_PARENT_TYPE.EXPENSE]}
/>
</FormGroup>
)}
</FastField>
{/* ----------- preferred inventory account ----------- */} {/* ----------- Preferred Inventory Account ----------- */}
<FastField name={'preferred_inventory_account'}> <FFormGroup
{({ name={'preferred_inventory_account'}
form: { values, setFieldValue }, label={
field: { value }, <strong>
meta: { error, touched }, <T id={'preferred_inventory_account'} />
}) => ( </strong>
<FormGroup }
label={ helperText={
<strong> <T
<T id={'preferred_inventory_account'} /> id={
</strong> 'select_a_preferred_account_to_deposit_into_it_vendor_advanced_deposits'
} }
helperText={ />
<T }
id={ labelInfo={<FieldRequiredHint />}
'select_a_preferred_account_to_deposit_into_it_vendor_advanced_deposits' fastField={true}
} >
/> <AccountsSelect
} name={'preferred_inventory_account'}
labelInfo={<FieldRequiredHint />} items={accounts}
intent={inputIntent({ error, touched })} placeholder={<T id={'select_payment_account'} />}
> filterByTypes={[ACCOUNT_TYPE.INVENTORY]}
<AccountsSelectList />
accounts={accounts} </FFormGroup>
onAccountSelected={({ id }) => {
setFieldValue('preferred_inventory_account', id);
}}
selectedAccountId={value}
defaultSelectText={<T id={'select_payment_account'} />}
filterByTypes={[ACCOUNT_TYPE.INVENTORY]}
/>
</FormGroup>
)}
</FastField>
<CardFooterActions> <CardFooterActions>
<Button intent={Intent.PRIMARY} loading={isSubmitting} type="submit"> <Button intent={Intent.PRIMARY} loading={isSubmitting} type="submit">

55
packages/webapp/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFormHeaderFields.tsx
View File

@@ -18,7 +18,7 @@ import { CLASSES } from '@/constants/classes';
import { import {
FFormGroup, FFormGroup,
AccountsSelectList, AccountsSelect,
VendorSelectField, VendorSelectField,
FieldRequiredHint, FieldRequiredHint,
InputPrependText, InputPrependText,
@@ -211,41 +211,30 @@ function PaymentMadeFormHeaderFields({ organization: { base_currency } }) {
</FastField> </FastField>
{/* ------------ Payment account ------------ */} {/* ------------ Payment account ------------ */}
<FastField <FFormGroup
name={'payment_account_id'} name={'payment_account_id'}
accounts={accounts} label={<T id={'payment_account'} />}
labelInfo={<FieldRequiredHint />}
items={accounts}
shouldUpdate={accountsFieldShouldUpdate} shouldUpdate={accountsFieldShouldUpdate}
inline={true}
fastField={true}
> >
{({ form, field: { value }, meta: { error, touched } }) => ( <AccountsSelect
<FormGroup name={'payment_account_id'}
label={<T id={'payment_account'} />} items={accounts}
className={classNames( placeholder={<T id={'select_payment_account'} />}
'form-group--payment_account_id', labelInfo={<FieldRequiredHint />}
'form-group--select-list', filterByTypes={[
Classes.FILL, ACCOUNT_TYPE.CASH,
)} ACCOUNT_TYPE.BANK,
inline={true} ACCOUNT_TYPE.OTHER_CURRENT_ASSET,
labelInfo={<FieldRequiredHint />} ]}
intent={inputIntent({ error, touched })} shouldUpdate={accountsFieldShouldUpdate}
helperText={<ErrorMessage name={'payment_account_id'} />} fastField={true}
> fill={true}
<AccountsSelectList />
accounts={accounts} </FFormGroup>
labelInfo={<FieldRequiredHint />}
onAccountSelected={(account) => {
form.setFieldValue('payment_account_id', account.id);
}}
defaultSelectText={<T id={'select_payment_account'} />}
selectedAccountId={value}
filterByTypes={[
ACCOUNT_TYPE.CASH,
ACCOUNT_TYPE.BANK,
ACCOUNT_TYPE.OTHER_CURRENT_ASSET,
]}
/>
</FormGroup>
)}
</FastField>
{/* ------------ Reference ------------ */} {/* ------------ Reference ------------ */}
<FastField name={'reference'}> <FastField name={'reference'}>

2
packages/webapp/src/containers/Purchases/PaymentMades/PaymentForm/utils.tsx
View File

@@ -84,7 +84,7 @@ export const vendorsFieldShouldUpdate = (newProps, oldProps) => {
*/ */
export const accountsFieldShouldUpdate = (newProps, oldProps) => { export const accountsFieldShouldUpdate = (newProps, oldProps) => {
return ( return (
newProps.accounts !== oldProps.accounts || newProps.items !== oldProps.items ||
defaultFastFieldShouldUpdate(newProps, oldProps) defaultFastFieldShouldUpdate(newProps, oldProps)
); );
}; };

55
packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveHeaderFields.tsx
View File

@@ -27,7 +27,7 @@ import {
} from '@/utils'; } from '@/utils';
import { import {
FFormGroup, FFormGroup,
AccountsSelectList, AccountsSelect,
CustomerSelectField, CustomerSelectField,
FieldRequiredHint, FieldRequiredHint,
Icon, Icon,
@@ -285,41 +285,30 @@ function PaymentReceiveHeaderFields({
</FastField> </FastField>
{/* ------------ Deposit account ------------ */} {/* ------------ Deposit account ------------ */}
<FastField <FFormGroup
name={'deposit_account_id'} name={'deposit_account_id'}
accounts={accounts} label={<T id={'deposit_to'} />}
inline={true}
labelInfo={<FieldRequiredHint />}
items={accounts}
shouldUpdate={accountsFieldShouldUpdate} shouldUpdate={accountsFieldShouldUpdate}
fastField={true}
> >
{({ form, field: { value }, meta: { error, touched } }) => ( <AccountsSelect
<FormGroup name={'deposit_account_id'}
label={<T id={'deposit_to'} />} items={accounts}
className={classNames( labelInfo={<FieldRequiredHint />}
'form-group--deposit_account_id', placeholder={<T id={'select_deposit_account'} />}
'form-group--select-list', filterByTypes={[
CLASSES.FILL, ACCOUNT_TYPE.CASH,
)} ACCOUNT_TYPE.BANK,
inline={true} ACCOUNT_TYPE.OTHER_CURRENT_ASSET,
labelInfo={<FieldRequiredHint />} ]}
intent={inputIntent({ error, touched })} shouldUpdate={accountsFieldShouldUpdate}
helperText={<ErrorMessage name={'deposit_account_id'} />} fastField={true}
> fill={true}
<AccountsSelectList />
accounts={accounts} </FFormGroup>
labelInfo={<FieldRequiredHint />}
onAccountSelected={(account) => {
form.setFieldValue('deposit_account_id', account.id);
}}
defaultSelectText={<T id={'select_deposit_account'} />}
selectedAccountId={value}
filterByTypes={[
ACCOUNT_TYPE.CASH,
ACCOUNT_TYPE.BANK,
ACCOUNT_TYPE.OTHER_CURRENT_ASSET,
]}
/>
</FormGroup>
)}
</FastField>
{/* ------------ Reference No. ------------ */} {/* ------------ Reference No. ------------ */}
<FastField name={'reference_no'}> <FastField name={'reference_no'}>

2
packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveForm/utils.tsx
View File

@@ -150,7 +150,7 @@ export const customersFieldShouldUpdate = (newProps, oldProps) => {
*/ */
export const accountsFieldShouldUpdate = (newProps, oldProps) => { export const accountsFieldShouldUpdate = (newProps, oldProps) => {
return ( return (
newProps.accounts !== oldProps.accounts || newProps.items !== oldProps.items ||
defaultFastFieldShouldUpdate(newProps, oldProps) defaultFastFieldShouldUpdate(newProps, oldProps)
); );
}; };

49
packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormHeaderFields.tsx
View File

@@ -15,7 +15,7 @@ import { CLASSES } from '@/constants/classes';
import { import {
FFormGroup, FFormGroup,
AccountsSelectList, AccountsSelect,
CustomerSelectField, CustomerSelectField,
FieldRequiredHint, FieldRequiredHint,
Icon, Icon,
@@ -125,38 +125,27 @@ function ReceiptFormHeader({
/> />
{/* ----------- Deposit account ----------- */} {/* ----------- Deposit account ----------- */}
<FastField <FFormGroup
label={<T id={'deposit_account'} />}
inline={true}
labelInfo={<FieldRequiredHint />}
name={'deposit_account_id'} name={'deposit_account_id'}
accounts={accounts} items={accounts}
shouldUpdate={accountsFieldShouldUpdate} shouldUpdate={accountsFieldShouldUpdate}
> >
{({ form, field: { value }, meta: { error, touched } }) => ( <AccountsSelect
<FormGroup items={accounts}
label={<T id={'deposit_account'} />} name={'deposit_account_id'}
className={classNames('form-group--deposit-account', CLASSES.FILL)} placeholder={<T id={'select_deposit_account'} />}
inline={true} filterByTypes={[
labelInfo={<FieldRequiredHint />} ACCOUNT_TYPE.CASH,
intent={inputIntent({ error, touched })} ACCOUNT_TYPE.BANK,
helperText={<ErrorMessage name={'deposit_account_id'} />} ACCOUNT_TYPE.OTHER_CURRENT_ASSET,
> ]}
<AccountsSelectList allowCreate={true}
accounts={accounts} fill={true}
onAccountSelected={(account) => { />
form.setFieldValue('deposit_account_id', account.id); </FFormGroup>
}}
defaultSelectText={<T id={'select_deposit_account'} />}
selectedAccountId={value}
popoverFill={true}
filterByTypes={[
ACCOUNT_TYPE.CASH,
ACCOUNT_TYPE.BANK,
ACCOUNT_TYPE.OTHER_CURRENT_ASSET,
]}
allowCreate={true}
/>
</FormGroup>
)}
</FastField>
{/* ----------- Receipt date ----------- */} {/* ----------- Receipt date ----------- */}
<FastField name={'receipt_date'}> <FastField name={'receipt_date'}>

2
packages/webapp/src/containers/Sales/Receipts/ReceiptForm/utils.tsx
View File

@@ -101,7 +101,7 @@ export const entriesFieldShouldUpdate = (newProps, oldProps) => {
*/ */
export const accountsFieldShouldUpdate = (newProps, oldProps) => { export const accountsFieldShouldUpdate = (newProps, oldProps) => {
return ( return (
newProps.accounts !== oldProps.accounts || newProps.items !== oldProps.items ||
defaultFastFieldShouldUpdate(newProps, oldProps) defaultFastFieldShouldUpdate(newProps, oldProps)
); );
}; };

88
packages/webapp/src/containers/WarehouseTransfers/WarehouseTransferForm/WarehouseTransferFormHeaderFields.tsx
View File

@@ -8,13 +8,13 @@ import {
} from '@blueprintjs/core'; } from '@blueprintjs/core';
import { DateInput } from '@blueprintjs/datetime'; import { DateInput } from '@blueprintjs/datetime';
import { FastField, Field, ErrorMessage } from 'formik'; import { FastField, Field, ErrorMessage } from 'formik';
import { FormattedMessage as T } from '@/components'; import { FFormGroup, FormattedMessage as T } from '@/components';
import { momentFormatter, compose, tansformDateValue } from '@/utils'; import { momentFormatter, compose, tansformDateValue } from '@/utils';
import classNames from 'classnames'; import classNames from 'classnames';
import { CLASSES } from '@/constants/classes'; import { CLASSES } from '@/constants/classes';
import { import {
AccountsSelectList, AccountsSelect,
FieldRequiredHint, FieldRequiredHint,
Icon, Icon,
InputPrependButton, InputPrependButton,
@@ -91,6 +91,7 @@ function WarehouseTransferFormHeaderFields({
</FormGroup> </FormGroup>
)} )}
</FastField> </FastField>
{/* ----------- Transfer number ----------- */} {/* ----------- Transfer number ----------- */}
<Field name={'transaction_number'}> <Field name={'transaction_number'}>
{({ form, field, meta: { error, touched } }) => ( {({ form, field, meta: { error, touched } }) => (
@@ -130,60 +131,39 @@ function WarehouseTransferFormHeaderFields({
</FormGroup> </FormGroup>
)} )}
</Field> </Field>
{/* ----------- Form Warehouse ----------- */} {/* ----------- Form Warehouse ----------- */}
<FastField name={'from_warehouse_id'} accounts={warehouses}> <FFormGroup
{({ form, field: { value }, meta: { error, touched } }) => ( name={'from_warehouse_id'}
<FormGroup items={warehouses}
label={<T id={'warehouse_transfer.label.from_warehouse'} />} label={<T id={'warehouse_transfer.label.from_warehouse'} />}
className={classNames( inline={true}
'form-group--warehouse-transfer', labelInfo={<FieldRequiredHint />}
CLASSES.FILL, >
)} <AccountsSelect
inline={true} name={'from_warehouse_id'}
labelInfo={<FieldRequiredHint />} items={warehouses}
intent={inputIntent({ error, touched })} placeholder={<T id={'select_warehouse_transfer'} />}
helperText={<ErrorMessage name={'from_warehouse_id'} />} allowCreate={true}
> fill={true}
<AccountsSelectList />
accounts={warehouses} </FFormGroup>
onAccountSelected={(account) => {
form.setFieldValue('from_warehouse_id', account.id);
}}
defaultSelectText={<T id={'select_warehouse_transfer'} />}
selectedAccountId={value}
popoverFill={true}
allowCreate={true}
/>
</FormGroup>
)}
</FastField>
{/* ----------- To Warehouse ----------- */} {/* ----------- To Warehouse ----------- */}
<FastField name={'to_warehouse_id'} accounts={warehouses}> <FFormGroup
{({ form, field: { value }, meta: { error, touched } }) => ( name={'to_warehouse_id'}
<FormGroup label={<T id={'warehouse_transfer.label.to_warehouse'} />}
label={<T id={'warehouse_transfer.label.to_warehouse'} />} inline={true}
className={classNames( labelInfo={<FieldRequiredHint />}
'form-group--warehouse-transfer', >
CLASSES.FILL, <AccountsSelect
)} name={'to_warehouse_id'}
inline={true} items={warehouses}
labelInfo={<FieldRequiredHint />} placeholder={<T id={'select_warehouse_transfer'} />}
intent={inputIntent({ error, touched })} fill={true}
helperText={<ErrorMessage name={'to_warehouse_id'} />} allowCreate={true}
> />
<AccountsSelectList </FFormGroup>
accounts={warehouses}
onAccountSelected={(account) => {
form.setFieldValue('to_warehouse_id', account.id);
}}
defaultSelectText={<T id={'select_warehouse_transfer'} />}
selectedAccountId={value}
popoverFill={true}
allowCreate={true}
/>
</FormGroup>
)}
</FastField>
</div> </div>
); );
} }

6
packages/webapp/src/lang/en/index.json
View File

@@ -540,7 +540,7 @@
"statement": "Statement", "statement": "Statement",
"deposit_account": "Deposit Account", "deposit_account": "Deposit Account",
"send_to_email": "Send to email", "send_to_email": "Send to email",
"select_deposit_account": "Select Deposit Account", "select_deposit_account": "Select Deposit Account...",
"once_delete_this_receipt_you_will_able_to_restore_it": "Once you delete this receipt, you won't be able to restore it later. Are you sure you want to delete this receipt?", "once_delete_this_receipt_you_will_able_to_restore_it": "Once you delete this receipt, you won't be able to restore it later. Are you sure you want to delete this receipt?",
"the_receipt_has_been_created_successfully": "The receipt #{number} has been created successfully.", "the_receipt_has_been_created_successfully": "The receipt #{number} has been created successfully.",
"the_receipt_has_been_edited_successfully": "The receipt #{number} has been edited successfully.", "the_receipt_has_been_edited_successfully": "The receipt #{number} has been edited successfully.",
@@ -609,8 +609,8 @@
"new_payment_made": "New Payment Made", "new_payment_made": "New Payment Made",
"payment_made_list": "Payment Made List", "payment_made_list": "Payment Made List",
"payment_account": "Payment Account", "payment_account": "Payment Account",
"select_vender_account": "Select Vender Account", "select_vender_account": "Select Vender Account...",
"select_payment_account": "Select Payment Account", "select_payment_account": "Select Payment Account...",
"the_payment_made_has_been_edited_successfully": "The payment made has been edited successfully.", "the_payment_made_has_been_edited_successfully": "The payment made has been edited successfully.",
"the_payment_made_has_been_created_successfully": "The payment made has been created successfully.", "the_payment_made_has_been_created_successfully": "The payment made has been created successfully.",
"the_payment_made_has_been_deleted_successfully": "The payment made has been deleted successfully.", "the_payment_made_has_been_deleted_successfully": "The payment made has been deleted successfully.",