QT/bigcapital
1
0
Fork 0
mirror of https://github.com/bigcapitalhq/bigcapital.git synced 2026-02-15 04:10:32 +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 intl from 'react-intl-universal';
import { MenuItem, Button } from '@blueprintjs/core';
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
@@ -54,20 +36,12 @@ export function CurrencySelect({ currencies, ...rest }) {
return (
<FSelect
itemPredicate={currencyItemPredicate}
itemRenderer={currencyItemRenderer}
valueAccessor={'currency_code'}
textAccessor={'currency_name'}
labelAccessor={'currency_code'}
{...rest}
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 {
CurrencySelectList,
CustomerSelectField,
AccountsSelectList,
FFormGroup,
AccountsSelect,
FieldRequiredHint,
Hint,
} from '@/components';
@@ -54,37 +55,26 @@ export default function ExpenseFormHeader() {
)}
</FastField>
<FastField
<FFormGroup
name={'payment_account_id'}
accounts={accounts}
items={accounts}
label={<T id={'payment_account'} />}
labelInfo={<FieldRequiredHint />}
inline={true}
fastField={true}
shouldUpdate={accountsFieldShouldUpdate}
>
{({ form, field: { value }, meta: { error, touched } }) => (
<FormGroup
label={<T id={'payment_account'} />}
className={classNames(
'form-group--payment_account',
'form-group--select-list',
Classes.FILL,
)}
labelInfo={<FieldRequiredHint />}
intent={inputIntent({ error, touched })}
helperText={<ErrorMessage name={'payment_account_id'} />}
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>
<AccountsSelect
name={'payment_account_id'}
items={accounts}
placeholder={<T id={'select_payment_account'} />}
filterByParentTypes={[ACCOUNT_PARENT_TYPE.CURRENT_ASSET]}
allowCreate={true}
fastField={true}
shouldUpdate={accountsFieldShouldUpdate}
fill={true}
/>
</FFormGroup>
<FastField name={'currency_code'}>
{({ 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) => {
return (
newProps.accounts !== oldProps.accounts ||
newProps.items !== oldProps.items ||
defaultFastFieldShouldUpdate(newProps, oldProps)
);
};

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

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

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

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

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

@@ -119,7 +119,7 @@ export const handleDeleteErrors = (errors) => {
*/
export const accountsFieldShouldUpdate = (newProps, oldProps) => {
return (
newProps.accounts !== oldProps.accounts ||
newProps.items !== oldProps.items ||
defaultFastFieldShouldUpdate(newProps, oldProps)
);
};
@@ -149,7 +149,7 @@ export const sellPriceFieldShouldUpdate = (newProps, oldProps) => {
*/
export const sellAccountFieldShouldUpdate = (newProps, oldProps) => {
return (
newProps.accounts !== oldProps.accounts ||
newProps.items !== oldProps.items ||
newProps.sellable !== oldProps.sellable ||
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 {
FormattedMessage as T,
AccountsSelectList,
AccountsSelect,
FieldRequiredHint,
CardFooterActions,
FFormGroup,
} from '@/components';
import { handleStringChange, inputIntent } from '@/utils';
import { ACCOUNT_TYPE } from '@/constants/accountTypes';
import { ACCOUNT_PARENT_TYPE, ACCOUNT_TYPE } from '@/constants/accountTypes';
import { useAccountantFormContext } from './AccountantFormProvider';
@@ -28,6 +29,7 @@ import { useAccountantFormContext } from './AccountantFormProvider';
*/
export default function AccountantForm() {
const history = useHistory();
const { accounts } = useAccountantFormContext();
const { isSubmitting } = useFormikContext();
@@ -35,8 +37,6 @@ export default function AccountantForm() {
history.go(-1);
};
const { accounts } = useAccountantFormContext();
return (
<Form>
{/* ----------- Accounts ----------- */}
@@ -48,7 +48,7 @@ export default function AccountantForm() {
}
className={'accounts-checkbox'}
>
{/*------------ account code required -----------*/}
{/*------------ Account code (required) -----------*/}
<FastField name={'account_code_required'} type={'checkbox'}>
{({ field }) => (
<FormGroup inline={true}>
@@ -65,7 +65,8 @@ export default function AccountantForm() {
</FormGroup>
)}
</FastField>
{/*------------ account code unique -----------*/}
{/*------------ Account code (unique) -----------*/}
<FastField name={'account_code_unique'} type={'checkbox'}>
{({ field }) => (
<FormGroup inline={true}>
@@ -85,6 +86,7 @@ export default function AccountantForm() {
)}
</FastField>
</FormGroup>
{/* ----------- Accounting basis ----------- */}
<FastField name={'accounting_basis'}>
{({
@@ -116,120 +118,87 @@ export default function AccountantForm() {
</FastField>
{/* ----------- Deposit customer account ----------- */}
<FastField name={'preferred_deposit_account'}>
{({
form: { values, setFieldValue },
field: { value },
meta: { error, touched },
}) => (
<FormGroup
label={
<strong>
<T id={'deposit_customer_account'} />
</strong>
<FFormGroup
name={'preferred_deposit_account'}
label={
<strong>
<T id={'deposit_customer_account'} />
</strong>
}
helperText={
<T
id={
'select_a_preferred_account_to_deposit_into_it_after_customer_make_payment'
}
helperText={
<T
id={
'select_a_preferred_account_to_deposit_into_it_after_customer_make_payment'
}
/>
}
labelInfo={<FieldRequiredHint />}
intent={inputIntent({ error, touched })}
>
<AccountsSelectList
accounts={accounts}
onAccountSelected={({ id }) => {
setFieldValue('preferred_deposit_account', id);
}}
selectedAccountId={value}
defaultSelectText={<T id={'select_payment_account'} />}
filterByTypes={[
ACCOUNT_TYPE.CASH,
ACCOUNT_TYPE.BANK,
ACCOUNT_TYPE.OTHER_CURRENT_ASSET,
]}
/>
</FormGroup>
)}
</FastField>
/>
}
labelInfo={<FieldRequiredHint />}
>
<AccountsSelect
name={'preferred_deposit_account'}
items={accounts}
placeholder={<T id={'select_payment_account'} />}
filterByTypes={[
ACCOUNT_TYPE.CASH,
ACCOUNT_TYPE.BANK,
ACCOUNT_TYPE.OTHER_CURRENT_ASSET,
]}
/>
</FFormGroup>
{/* ----------- Withdrawal vendor account ----------- */}
<FastField name={'withdrawal_account'}>
{({
form: { values, setFieldValue },
field: { value },
meta: { error, touched },
}) => (
<FormGroup
label={
<strong>
<T id={'withdrawal_vendor_account'} />
</strong>
<FFormGroup
name={'withdrawal_account'}
label={
<strong>
<T id={'withdrawal_vendor_account'} />
</strong>
}
helperText={
<T
id={
'select_a_preferred_account_to_deposit_into_it_after_customer_make_payment'
}
helperText={
<T
id={
'select_a_preferred_account_to_deposit_into_it_after_customer_make_payment'
}
/>
}
labelInfo={<FieldRequiredHint />}
intent={inputIntent({ error, touched })}
>
<AccountsSelectList
accounts={accounts}
onAccountSelected={({ id }) => {
setFieldValue('withdrawal_account', id);
}}
selectedAccountId={value}
defaultSelectText={<T id={'select_payment_account'} />}
filterByTypes={[
ACCOUNT_TYPE.CASH,
ACCOUNT_TYPE.BANK,
ACCOUNT_TYPE.OTHER_CURRENT_ASSET,
]}
/>
</FormGroup>
)}
</FastField>
/>
}
labelInfo={<FieldRequiredHint />}
>
<AccountsSelect
name={'withdrawal_account'}
items={accounts}
placeholder={<T id={'select_payment_account'} />}
filterByTypes={[
ACCOUNT_TYPE.CASH,
ACCOUNT_TYPE.BANK,
ACCOUNT_TYPE.OTHER_CURRENT_ASSET,
]}
/>
</FFormGroup>
{/* ----------- Withdrawal customer account ----------- */}
<FastField name={'preferred_advance_deposit'}>
{({
form: { values, setFieldValue },
field: { value },
meta: { error, touched },
}) => (
<FormGroup
label={
<strong>
<T id={'customer_advance_deposit'} />
</strong>
<FFormGroup
name={'preferred_advance_deposit'}
label={
<strong>
<T id={'customer_advance_deposit'} />
</strong>
}
helperText={
<T
id={
'select_a_preferred_account_to_deposit_into_it_vendor_advanced_deposits'
}
helperText={
<T
id={
'select_a_preferred_account_to_deposit_into_it_vendor_advanced_deposits'
}
/>
}
labelInfo={<FieldRequiredHint />}
intent={inputIntent({ error, touched })}
>
<AccountsSelectList
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>
/>
}
labelInfo={<FieldRequiredHint />}
>
<AccountsSelect
name={'preferred_advance_deposit'}
items={accounts}
placeholder={<T id={'select_payment_account'} />}
filterByParentTypes={[ACCOUNT_PARENT_TYPE.CURRENT_ASSET]}
/>
</FFormGroup>
<CardFooterActions>
<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
import React from 'react';
import { Form, FastField, useFormikContext } from 'formik';
import { Form, useFormikContext } from 'formik';
import { FormGroup, Button, Intent } from '@blueprintjs/core';
import { useHistory } from 'react-router-dom';
import {
AccountsSelectList,
AccountsSelect,
FieldRequiredHint,
FormattedMessage as T,
CardFooterActions
FFormGroup,
CardFooterActions,
} from '@/components';
import { inputIntent } from '@/utils';
import { ACCOUNT_PARENT_TYPE, ACCOUNT_TYPE } from '@/constants/accountTypes';
import { useItemPreferencesFormContext } from './ItemPreferencesFormProvider';
@@ -29,113 +29,83 @@ export default function ItemForm() {
return (
<Form>
{/* ----------- preferred sell account ----------- */}
<FastField name={'preferred_sell_account'}>
{({
form: { values, setFieldValue },
field: { value },
meta: { error, touched },
}) => (
<FormGroup
label={
<strong>
<T id={'preferred_sell_account'} />
</strong>
{/* ----------- Preferred Sell Account ----------- */}
<FormGroup
name={'preferred_sell_account'}
label={
<strong>
<T id={'preferred_sell_account'} />
</strong>
}
helperText={
<T
id={
'select_a_preferred_account_to_deposit_into_it_after_customer_make_payment'
}
helperText={
<T
id={
'select_a_preferred_account_to_deposit_into_it_after_customer_make_payment'
}
/>
}
labelInfo={<FieldRequiredHint />}
intent={inputIntent({ error, touched })}
>
<AccountsSelectList
accounts={accounts}
onAccountSelected={({ id }) => {
setFieldValue('preferred_sell_account', id);
}}
selectedAccountId={value}
defaultSelectText={<T id={'select_payment_account'} />}
filterByParentTypes={[ACCOUNT_PARENT_TYPE.INCOME]}
/>
</FormGroup>
)}
</FastField>
/>
}
labelInfo={<FieldRequiredHint />}
fastField={true}
>
<AccountsSelect
name={'preferred_sell_account'}
items={accounts}
placeholder={<T id={'select_payment_account'} />}
filterByParentTypes={[ACCOUNT_PARENT_TYPE.INCOME]}
/>
</FormGroup>
{/* ----------- preferred cost account ----------- */}
<FastField name={'preferred_cost_account'}>
{({
form: { values, setFieldValue },
field: { value },
meta: { error, touched },
}) => (
<FormGroup
label={
<strong>
<T id={'preferred_cost_account'} />
</strong>
{/* ----------- Preferred Cost Account ----------- */}
<FFormGroup
name={'preferred_cost_account'}
label={
<strong>
<T id={'preferred_cost_account'} />
</strong>
}
helperText={
<T
id={
'select_a_preferred_account_to_deposit_into_it_after_customer_make_payment'
}
helperText={
<T
id={
'select_a_preferred_account_to_deposit_into_it_after_customer_make_payment'
}
/>
}
labelInfo={<FieldRequiredHint />}
intent={inputIntent({ error, touched })}
>
<AccountsSelectList
accounts={accounts}
onAccountSelected={({ id }) => {
setFieldValue('preferred_cost_account', id);
}}
selectedAccountId={value}
defaultSelectText={<T id={'select_payment_account'} />}
filterByParentTypes={[ACCOUNT_PARENT_TYPE.EXPENSE]}
/>
</FormGroup>
)}
</FastField>
/>
}
labelInfo={<FieldRequiredHint />}
fastField={true}
>
<AccountsSelect
name={'preferred_cost_account'}
items={accounts}
placeholder={<T id={'select_payment_account'} />}
filterByParentTypes={[ACCOUNT_PARENT_TYPE.EXPENSE]}
/>
</FFormGroup>
{/* ----------- preferred inventory account ----------- */}
<FastField name={'preferred_inventory_account'}>
{({
form: { values, setFieldValue },
field: { value },
meta: { error, touched },
}) => (
<FormGroup
label={
<strong>
<T id={'preferred_inventory_account'} />
</strong>
{/* ----------- Preferred Inventory Account ----------- */}
<FFormGroup
name={'preferred_inventory_account'}
label={
<strong>
<T id={'preferred_inventory_account'} />
</strong>
}
helperText={
<T
id={
'select_a_preferred_account_to_deposit_into_it_vendor_advanced_deposits'
}
helperText={
<T
id={
'select_a_preferred_account_to_deposit_into_it_vendor_advanced_deposits'
}
/>
}
labelInfo={<FieldRequiredHint />}
intent={inputIntent({ error, touched })}
>
<AccountsSelectList
accounts={accounts}
onAccountSelected={({ id }) => {
setFieldValue('preferred_inventory_account', id);
}}
selectedAccountId={value}
defaultSelectText={<T id={'select_payment_account'} />}
filterByTypes={[ACCOUNT_TYPE.INVENTORY]}
/>
</FormGroup>
)}
</FastField>
/>
}
labelInfo={<FieldRequiredHint />}
fastField={true}
>
<AccountsSelect
name={'preferred_inventory_account'}
items={accounts}
placeholder={<T id={'select_payment_account'} />}
filterByTypes={[ACCOUNT_TYPE.INVENTORY]}
/>
</FFormGroup>
<CardFooterActions>
<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 {
FFormGroup,
AccountsSelectList,
AccountsSelect,
VendorSelectField,
FieldRequiredHint,
InputPrependText,
@@ -211,41 +211,30 @@ function PaymentMadeFormHeaderFields({ organization: { base_currency } }) {
</FastField>
{/* ------------ Payment account ------------ */}
<FastField
<FFormGroup
name={'payment_account_id'}
accounts={accounts}
label={<T id={'payment_account'} />}
labelInfo={<FieldRequiredHint />}
items={accounts}
shouldUpdate={accountsFieldShouldUpdate}
inline={true}
fastField={true}
>
{({ form, field: { value }, meta: { error, touched } }) => (
<FormGroup
label={<T id={'payment_account'} />}
className={classNames(
'form-group--payment_account_id',
'form-group--select-list',
Classes.FILL,
)}
inline={true}
labelInfo={<FieldRequiredHint />}
intent={inputIntent({ error, touched })}
helperText={<ErrorMessage name={'payment_account_id'} />}
>
<AccountsSelectList
accounts={accounts}
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>
<AccountsSelect
name={'payment_account_id'}
items={accounts}
placeholder={<T id={'select_payment_account'} />}
labelInfo={<FieldRequiredHint />}
filterByTypes={[
ACCOUNT_TYPE.CASH,
ACCOUNT_TYPE.BANK,
ACCOUNT_TYPE.OTHER_CURRENT_ASSET,
]}
shouldUpdate={accountsFieldShouldUpdate}
fastField={true}
fill={true}
/>
</FFormGroup>
{/* ------------ 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) => {
return (
newProps.accounts !== oldProps.accounts ||
newProps.items !== oldProps.items ||
defaultFastFieldShouldUpdate(newProps, oldProps)
);
};

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

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

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

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

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

@@ -540,7 +540,7 @@
"statement": "Statement",
"deposit_account": "Deposit Account",
"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?",
"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.",
@@ -609,8 +609,8 @@
"new_payment_made": "New Payment Made",
"payment_made_list": "Payment Made List",
"payment_account": "Payment Account",
"select_vender_account": "Select Vender Account",
"select_payment_account": "Select Payment Account",
"select_vender_account": "Select Vender 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_created_successfully": "The payment made has been created successfully.",
"the_payment_made_has_been_deleted_successfully": "The payment made has been deleted successfully.",