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

refactor(webapp): bound Formik fields

Browse Source
This commit is contained in:
Ahmed Bouhuolia
2025-12-22 23:25:43 +02:00
parent 37f0f4e227
commit 6fea7779da
12 changed files with 492 additions and 696 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
packages/webapp/src/components/Forms/FMoneyInputGroup.tsx
View File

@@ -1,7 +1,7 @@
// @ts-nocheck // @ts-nocheck
import React from 'react'; import React from 'react';
import { Intent } from '@blueprintjs/core'; import { Intent } from '@blueprintjs/core';
import { Field, getIn } from 'formik'; import { Field, FastField, getIn } from 'formik';
import { CurrencyInput } from './MoneyInputGroup'; import { CurrencyInput } from './MoneyInputGroup';
const fieldToMoneyInputGroup = ({ const fieldToMoneyInputGroup = ({
@@ -32,6 +32,7 @@ function FieldToMoneyInputGroup({ ...props }) {
return <CurrencyInput {...fieldToMoneyInputGroup(props)} />; return <CurrencyInput {...fieldToMoneyInputGroup(props)} />;
} }
export function FMoneyInputGroup({ ...props }) { export function FMoneyInputGroup({ fastField, ...props }) {
return <Field {...props} component={FieldToMoneyInputGroup} />; const FieldComponent = fastField ? FastField : Field;
return <FieldComponent {...props} component={FieldToMoneyInputGroup} />;
} }

109
packages/webapp/src/containers/Dialogs/InventoryAdjustmentFormDialog/IncrementAdjustmentFields.tsx
View File

@@ -1,35 +1,38 @@
// @ts-nocheck // @ts-nocheck
import React from 'react'; import React from 'react';
import { Field, FastField, ErrorMessage } from 'formik'; import { useFormikContext } from 'formik';
import { FormGroup, InputGroup } from '@blueprintjs/core';
import { useAutofocus } from '@/hooks'; import { useAutofocus } from '@/hooks';
import { Row, Col, MoneyInputGroup, FormattedMessage as T } from '@/components'; import {
import { inputIntent, toSafeNumber } from '@/utils'; Row,
Col,
FMoneyInputGroup,
FormattedMessage as T,
FFormGroup,
FInputGroup,
} from '@/components';
import { toSafeNumber } from '@/utils';
import { decrementQuantity, incrementQuantity } from './utils'; import { decrementQuantity, incrementQuantity } from './utils';
export default function IncrementAdjustmentFields() { export default function IncrementAdjustmentFields() {
const incrementFieldRef = useAutofocus(); const incrementFieldRef = useAutofocus();
const { values, setFieldValue } = useFormikContext();
return ( return (
<Row> <Row>
{/*------------ Quantity on hand -----------*/} {/*------------ Quantity on hand -----------*/}
<Col className={'col--quantity-on-hand'}> <Col className={'col--quantity-on-hand'}>
<FastField name={'quantity_on_hand'}> <FFormGroup
{({ field, meta: { error, touched } }) => ( name={'quantity_on_hand'}
<FormGroup
label={<T id={'qty_on_hand'} />} label={<T id={'qty_on_hand'} />}
intent={inputIntent({ error, touched })} fastField
helperText={<ErrorMessage name="quantity_on_hand" />}
> >
<InputGroup <FInputGroup
name={'quantity_on_hand'}
disabled={true} disabled={true}
medium={'true'} medium={'true'}
intent={inputIntent({ error, touched })} fastField
{...field}
/> />
</FormGroup> </FFormGroup>
)}
</FastField>
</Col> </Col>
{/*------------ Sign -----------*/} {/*------------ Sign -----------*/}
@@ -39,26 +42,17 @@ export default function IncrementAdjustmentFields() {
{/*------------ Increment -----------*/} {/*------------ Increment -----------*/}
<Col className={'col--quantity'}> <Col className={'col--quantity'}>
<Field name={'quantity'}> <FFormGroup
{({ name={'quantity'}
form: { values, setFieldValue },
field,
meta: { error, touched },
}) => (
<FormGroup
label={<T id={'increment'} />} label={<T id={'increment'} />}
intent={inputIntent({ error, touched })} fill
helperText={<ErrorMessage name="quantity" />} fastField
fill={true}
> >
<MoneyInputGroup <FMoneyInputGroup
value={field.value} name={'quantity'}
allowDecimals={false} allowDecimals={false}
allowNegativeValue={true} allowNegativeValue={true}
inputRef={(ref) => (incrementFieldRef.current = ref)} inputRef={(ref) => (incrementFieldRef.current = ref)}
onChange={(value) => {
setFieldValue('quantity', value);
}}
onBlurValue={(value) => { onBlurValue={(value) => {
setFieldValue( setFieldValue(
'new_quantity', 'new_quantity',
@@ -68,36 +62,16 @@ export default function IncrementAdjustmentFields() {
), ),
); );
}} }}
intent={inputIntent({ error, touched })} fastField
/> />
</FormGroup> </FFormGroup>
)}
</Field>
</Col> </Col>
{/*------------ Cost -----------*/} {/*------------ Cost -----------*/}
<Col className={'col--cost'}> <Col className={'col--cost'}>
<FastField name={'cost'}> <FFormGroup name={'cost'} label={<T id={'cost'} />} fastField>
{({ <FMoneyInputGroup name={'cost'} fastField />
form: { setFieldValue }, </FFormGroup>
field: { value },
meta: { error, touched },
}) => (
<FormGroup
label={<T id={'cost'} />}
intent={inputIntent({ error, touched })}
helperText={<ErrorMessage name="cost" />}
>
<MoneyInputGroup
value={value}
onChange={(value) => {
setFieldValue('cost', value);
}}
intent={inputIntent({ error, touched })}
/>
</FormGroup>
)}
</FastField>
</Col> </Col>
{/*------------ Sign -----------*/} {/*------------ Sign -----------*/}
@@ -107,24 +81,15 @@ export default function IncrementAdjustmentFields() {
{/*------------ New quantity -----------*/} {/*------------ New quantity -----------*/}
<Col className={'col--quantity-on-hand'}> <Col className={'col--quantity-on-hand'}>
<Field name={'new_quantity'}> <FFormGroup
{({ name={'new_quantity'}
form: { values, setFieldValue },
field,
meta: { error, touched },
}) => (
<FormGroup
label={<T id={'new_quantity'} />} label={<T id={'new_quantity'} />}
intent={inputIntent({ error, touched })} fastField
helperText={<ErrorMessage name="new_quantity" />}
> >
<MoneyInputGroup <FMoneyInputGroup
value={field.value} name={'new_quantity'}
allowDecimals={false} allowDecimals={false}
allowNegativeValue={true} allowNegativeValue={true}
onChange={(value) => {
setFieldValue('new_quantity', value);
}}
onBlurValue={(value) => { onBlurValue={(value) => {
setFieldValue( setFieldValue(
'quantity', 'quantity',
@@ -134,11 +99,9 @@ export default function IncrementAdjustmentFields() {
), ),
); );
}} }}
intent={inputIntent({ error, touched })} fastField
/> />
</FormGroup> </FFormGroup>
)}
</Field>
</Col> </Col>
</Row> </Row>
); );

54
packages/webapp/src/containers/Dialogs/ItemCategoryDialog/ItemCategoryFormFields.tsx
View File

@@ -1,11 +1,15 @@
// @ts-nocheck // @ts-nocheck
import React from 'react'; import React from 'react';
import { Classes, FormGroup, InputGroup, TextArea } from '@blueprintjs/core'; import { Classes } from '@blueprintjs/core';
import { FormattedMessage as T, FieldRequiredHint } from '@/components'; import {
import { ErrorMessage, FastField } from 'formik'; FormattedMessage as T,
FieldRequiredHint,
FFormGroup,
FInputGroup,
FTextArea,
} from '@/components';
import { useAutofocus } from '@/hooks'; import { useAutofocus } from '@/hooks';
import { inputIntent } from '@/utils';
/** /**
* Item category form fields. * Item category form fields.
@@ -16,45 +20,35 @@ export default function ItemCategoryFormFields() {
return ( return (
<div className={Classes.DIALOG_BODY}> <div className={Classes.DIALOG_BODY}>
{/* ----------- Category name ----------- */} {/* ----------- Category name ----------- */}
<FastField name={'name'}> <FFormGroup
{({ field, field: { value }, meta: { error, touched } }) => ( name={'name'}
<FormGroup
label={<T id={'category_name'} />} label={<T id={'category_name'} />}
labelInfo={<FieldRequiredHint />} labelInfo={<FieldRequiredHint />}
className={'form-group--category-name'} inline
intent={inputIntent({ error, touched })} fastField
helperText={<ErrorMessage name="name" />}
inline={true}
> >
<InputGroup <FInputGroup
name={'name'}
medium={true} medium={true}
inputRef={(ref) => (categoryNameFieldRef.current = ref)} inputRef={(ref) => (categoryNameFieldRef.current = ref)}
intent={inputIntent({ error, touched })} fastField
{...field}
/> />
</FormGroup> </FFormGroup>
)}
</FastField>
{/* ----------- Description ----------- */} {/* ----------- Description ----------- */}
<FastField name={'description'}> <FFormGroup
{({ field, field: { value }, meta: { error, touched } }) => ( name={'description'}
<FormGroup
label={<T id={'description'} />} label={<T id={'description'} />}
className={'form-group--description'} inline
intent={inputIntent({ error, touched })} fastField
helperText={<ErrorMessage name="description" />}
inline={true}
> >
<TextArea <FTextArea
name={'description'}
growVertically={true} growVertically={true}
large={true} large={true}
intent={inputIntent({ error, touched })} fastField
{...field}
/> />
</FormGroup> </FFormGroup>
)}
</FastField>
</div> </div>
); );
} }

34
packages/webapp/src/containers/Dialogs/LockingTransactionsDialog/LockingTransactionsFormFields.tsx
View File

@@ -1,8 +1,6 @@
// @ts-nocheck // @ts-nocheck
import React from 'react'; import React from 'react';
import { FastField, ErrorMessage } from 'formik'; import { Classes, Position } from '@blueprintjs/core';
import { Classes, FormGroup, Position } from '@blueprintjs/core';
import { DateInput } from '@blueprintjs/datetime';
import classNames from 'classnames'; import classNames from 'classnames';
import { CLASSES } from '@/constants/classes'; import { CLASSES } from '@/constants/classes';
import { import {
@@ -10,14 +8,10 @@ import {
FormattedMessage as T, FormattedMessage as T,
FFormGroup, FFormGroup,
FTextArea, FTextArea,
FDateInput,
} from '@/components'; } from '@/components';
import { useAutofocus } from '@/hooks'; import { useAutofocus } from '@/hooks';
import { import { momentFormatter } from '@/utils';
inputIntent,
momentFormatter,
tansformDateValue,
handleDateChange,
} from '@/utils';
/** /**
* locking Transactions form fields. * locking Transactions form fields.
@@ -28,31 +22,24 @@ export default function LockingTransactionsFormFields() {
return ( return (
<div className={Classes.DIALOG_BODY}> <div className={Classes.DIALOG_BODY}>
{/*------------ Locking Date -----------*/} {/*------------ Locking Date -----------*/}
<FastField name={'lock_to_date'}> <FFormGroup
{({ form, field: { value }, meta: { error, touched } }) => ( name={'lock_to_date'}
<FormGroup
label={<T id={'locking_transactions.dialog.locking_date'} />} label={<T id={'locking_transactions.dialog.locking_date'} />}
labelInfo={<FieldRequiredHint />} labelInfo={<FieldRequiredHint />}
intent={inputIntent({ error, touched })}
helperText={<ErrorMessage name="lock_to_date" />}
minimal={true} minimal={true}
className={classNames(CLASSES.FILL, 'form-group--date')} className={classNames(CLASSES.FILL, 'form-group--date')}
fastField
> >
<DateInput <FDateInput
name={'lock_to_date'}
{...momentFormatter('YYYY/MM/DD')} {...momentFormatter('YYYY/MM/DD')}
onChange={handleDateChange((formattedDate) => {
form.setFieldValue('lock_to_date', formattedDate);
})}
value={tansformDateValue(value)}
popoverProps={{ popoverProps={{
position: Position.BOTTOM, position: Position.BOTTOM,
minimal: true, minimal: true,
}} }}
intent={inputIntent({ error, touched })} fastField
/> />
</FormGroup> </FFormGroup>
)}
</FastField>
{/*------------ Locking Reason -----------*/} {/*------------ Locking Reason -----------*/}
<FFormGroup <FFormGroup
@@ -66,6 +53,7 @@ export default function LockingTransactionsFormFields() {
growVertically={true} growVertically={true}
large={true} large={true}
inputRef={(ref) => (reasonFieldRef.current = ref)} inputRef={(ref) => (reasonFieldRef.current = ref)}
fill
fastField fastField
/> />
</FFormGroup> </FFormGroup>

107
packages/webapp/src/containers/Dialogs/RefundVendorCreditDialog/RefundVendorCreditFormFields.tsx
View File

@@ -2,18 +2,10 @@
import React from 'react'; import React from 'react';
import intl from 'react-intl-universal'; import intl from 'react-intl-universal';
import styled from 'styled-components'; import styled from 'styled-components';
import { FastField, ErrorMessage, useFormikContext } from 'formik'; import { useFormikContext } from 'formik';
import { import { Classes, Position, ControlGroup } from '@blueprintjs/core';
Classes,
FormGroup,
InputGroup,
TextArea,
Position,
ControlGroup,
} from '@blueprintjs/core';
import classNames from 'classnames'; import classNames from 'classnames';
import { CLASSES } from '@/constants/classes'; import { CLASSES } from '@/constants/classes';
import { DateInput } from '@blueprintjs/datetime';
import { isEqual } from 'lodash'; import { isEqual } from 'lodash';
import { import {
Icon, Icon,
@@ -23,20 +15,18 @@ import {
FieldRequiredHint, FieldRequiredHint,
FAccountsSuggestField, FAccountsSuggestField,
InputPrependText, InputPrependText,
MoneyInputGroup, FMoneyInputGroup,
FormattedMessage as T, FormattedMessage as T,
ExchangeRateMutedField, ExchangeRateMutedField,
BranchSelect, BranchSelect,
BranchSelectButton, BranchSelectButton,
FeatureCan, FeatureCan,
FFormGroup,
FDateInput,
FInputGroup,
FTextArea,
} from '@/components'; } from '@/components';
import { import { momentFormatter, compose } from '@/utils';
inputIntent,
momentFormatter,
tansformDateValue,
handleDateChange,
compose,
} from '@/utils';
import { useAutofocus } from '@/hooks'; import { useAutofocus } from '@/hooks';
import { Features, ACCOUNT_TYPE } from '@/constants'; import { Features, ACCOUNT_TYPE } from '@/constants';
import { useSetPrimaryBranchToForm } from './utils'; import { useSetPrimaryBranchToForm } from './utils';
@@ -63,46 +53,39 @@ function RefundVendorCreditFormFields({
<FeatureCan feature={Features.Branches}> <FeatureCan feature={Features.Branches}>
<Row> <Row>
<Col xs={5}> <Col xs={5}>
<FormGroup <FFormGroup name={'branch_id'} label={<T id={'branch'} />} fill>
label={<T id={'branch'} />}
className={classNames('form-group--select-list', Classes.FILL)}
>
<BranchSelect <BranchSelect
name={'branch_id'} name={'branch_id'}
branches={branches} branches={branches}
input={BranchSelectButton} input={BranchSelectButton}
popoverProps={{ minimal: true }} popoverProps={{ minimal: true }}
/> />
</FormGroup> </FFormGroup>
</Col> </Col>
</Row> </Row>
<BranchRowDivider /> <BranchRowDivider />
</FeatureCan> </FeatureCan>
<Row> <Row>
<Col xs={5}> <Col xs={5}>
{/* ------------- Refund date ------------- */} {/* ------------- Refund date ------------- */}
<FastField name={'refund_date'}>
{({ form, field: { value }, meta: { error, touched } }) => (
<FFormGroup <FFormGroup
name={'refund_date'} name={'refund_date'}
label={<T id={'refund_vendor_credit.dialog.refund_date'} />} label={<T id={'refund_vendor_credit.dialog.refund_date'} />}
labelInfo={<FieldRequiredHint />} labelInfo={<FieldRequiredHint />}
fill fill
fastField
> >
<DateInput <FDateInput
name={'refund_date'}
{...momentFormatter('YYYY/MM/DD')} {...momentFormatter('YYYY/MM/DD')}
value={tansformDateValue(value)}
onChange={handleDateChange((formattedDate) => {
form.setFieldValue('refund_date', formattedDate);
})}
popoverProps={{ position: Position.BOTTOM, minimal: true }} popoverProps={{ position: Position.BOTTOM, minimal: true }}
inputProps={{ inputProps={{
leftIcon: <Icon icon={'date-range'} />, leftIcon: <Icon icon={'date-range'} />,
}} }}
fastField
/> />
</FFormGroup> </FFormGroup>
)}
</FastField>
</Col> </Col>
<Col xs={5}> <Col xs={5}>
@@ -130,34 +113,23 @@ function RefundVendorCreditFormFields({
</Row> </Row>
{/* ------------- Amount ------------- */} {/* ------------- Amount ------------- */}
<FastField name={'amount'}> <FFormGroup
{({ name={'amount'}
form: { values, setFieldValue },
field: { value },
meta: { error, touched },
}) => (
<FormGroup
label={<T id={'refund_vendor_credit.dialog.amount'} />} label={<T id={'refund_vendor_credit.dialog.amount'} />}
labelInfo={<FieldRequiredHint />} labelInfo={<FieldRequiredHint />}
className={classNames('form-group--amount', CLASSES.FILL)} fill
intent={inputIntent({ error, touched })} fastField
helperText={<ErrorMessage name="amount" />}
> >
<ControlGroup> <ControlGroup>
<InputPrependText text={values.currency_code} /> <InputPrependText text={values.currency_code} />
<MoneyInputGroup <FMoneyInputGroup
value={value} name={'amount'}
minimal={true} minimal={true}
onChange={(amount) => {
setFieldValue('amount', amount);
}}
intent={inputIntent({ error, touched })}
inputRef={(ref) => (amountFieldRef.current = ref)} inputRef={(ref) => (amountFieldRef.current = ref)}
fastField
/> />
</ControlGroup> </ControlGroup>
</FormGroup> </FFormGroup>
)}
</FastField>
<If condition={!isEqual(base_currency, values.currency_code)}> <If condition={!isEqual(base_currency, values.currency_code)}>
{/*------------ exchange rate -----------*/} {/*------------ exchange rate -----------*/}
@@ -172,34 +144,19 @@ function RefundVendorCreditFormFields({
</If> </If>
{/* ------------ Reference No. ------------ */} {/* ------------ Reference No. ------------ */}
<FastField name={'reference_no'}> <FFormGroup
{({ form, field, meta: { error, touched } }) => ( name={'reference_no'}
<FormGroup
label={<T id={'reference_no'} />} label={<T id={'reference_no'} />}
className={classNames('form-group--reference', CLASSES.FILL)} fill
intent={inputIntent({ error, touched })} fastField
helperText={<ErrorMessage name="reference" />}
> >
<InputGroup <FInputGroup name={'reference_no'} minimal={true} fastField />
intent={inputIntent({ error, touched })} </FFormGroup>
minimal={true}
{...field}
/>
</FormGroup>
)}
</FastField>
{/* --------- Statement --------- */} {/* --------- Statement --------- */}
<FastField name={'description'}> <FFormGroup name={'description'} fill fastField>
{({ form, field, meta: { error, touched } }) => ( <FTextArea name={'description'} growVertically={true} fastField />
<FormGroup </FFormGroup>
label={<T id={'refund_vendor_credit.dialog.description'} />}
className={'form-group--description'}
>
<TextArea growVertically={true} {...field} />
</FormGroup>
)}
</FastField>
</div> </div>
); );
} }

92
packages/webapp/src/containers/Dialogs/UnlockingPartialTransactionsDialog/UnlockingPartialTransactionsFormFields.tsx
View File

@@ -1,8 +1,6 @@
// @ts-nocheck // @ts-nocheck
import React from 'react'; import React from 'react';
import { FastField, ErrorMessage } from 'formik'; import { Classes, Position } from '@blueprintjs/core';
import { Classes, FormGroup, TextArea, Position } from '@blueprintjs/core';
import { DateInput } from '@blueprintjs/datetime';
import classNames from 'classnames'; import classNames from 'classnames';
import { CLASSES } from '@/constants/classes'; import { CLASSES } from '@/constants/classes';
import { import {
@@ -10,13 +8,11 @@ import {
Col, Col,
Row, Row,
FormattedMessage as T, FormattedMessage as T,
FFormGroup,
FDateInput,
FTextArea,
} from '@/components'; } from '@/components';
import { import { momentFormatter } from '@/utils';
inputIntent,
momentFormatter,
tansformDateValue,
handleDateChange,
} from '@/utils';
import { useAutofocus } from '@/hooks'; import { useAutofocus } from '@/hooks';
/** /**
@@ -30,87 +26,65 @@ export default function UnlockingPartialTransactionsFormFields() {
<Row> <Row>
<Col xs={6}> <Col xs={6}>
{/*------------ Unlocking from date -----------*/} {/*------------ Unlocking from date -----------*/}
<FastField name={'unlock_from_date'}> <FFormGroup
{({ form, field: { value }, meta: { error, touched } }) => ( name={'unlock_from_date'}
<FormGroup label={<T id={'unlocking_partial_transactions.dialog.from_date'} />}
label={
<T id={'unlocking_partial_transactions.dialog.from_date'} />
}
labelInfo={<FieldRequiredHint />} labelInfo={<FieldRequiredHint />}
intent={inputIntent({ error, touched })} fill
helperText={<ErrorMessage name="unlock_from_date" />} minimal
minimal={true} fastField
className={classNames(CLASSES.FILL, 'form-group--date')}
> >
<DateInput <FDateInput
name={'unlock_from_date'}
{...momentFormatter('YYYY/MM/DD')} {...momentFormatter('YYYY/MM/DD')}
onChange={handleDateChange((formattedDate) => {
form.setFieldValue('unlock_from_date', formattedDate);
})}
value={tansformDateValue(value)}
popoverProps={{ popoverProps={{
position: Position.BOTTOM, position: Position.BOTTOM,
minimal: true, minimal: true,
}} }}
intent={inputIntent({ error, touched })} fastField
/> />
</FormGroup> </FFormGroup>
)}
</FastField>
</Col> </Col>
<Col xs={6}> <Col xs={6}>
{/*------------ Unlocking from date -----------*/} {/*------------ Unlocking to date -----------*/}
<FastField name={'unlock_to_date'}> <FFormGroup
{({ form, field: { value }, meta: { error, touched } }) => ( name={'unlock_to_date'}
<FormGroup label={<T id={'unlocking_partial_transactions.dialog.to_date'} />}
label={
<T id={'unlocking_partial_transactions.dialog.to_date'} />
}
labelInfo={<FieldRequiredHint />} labelInfo={<FieldRequiredHint />}
intent={inputIntent({ error, touched })}
helperText={<ErrorMessage name="unlock_to_date" />}
minimal={true} minimal={true}
className={classNames(CLASSES.FILL, 'form-group--date')} fill
fastField
> >
<DateInput <FDateInput
name={'unlock_to_date'}
{...momentFormatter('YYYY/MM/DD')} {...momentFormatter('YYYY/MM/DD')}
onChange={handleDateChange((formattedDate) => {
form.setFieldValue('unlock_to_date', formattedDate);
})}
value={tansformDateValue(value)}
popoverProps={{ popoverProps={{
position: Position.BOTTOM, position: Position.BOTTOM,
minimal: true, minimal: true,
}} }}
intent={inputIntent({ error, touched })} fastField
/> />
</FormGroup> </FFormGroup>
)}
</FastField>
</Col> </Col>
</Row> </Row>
{/*------------ unLocking reason -----------*/} {/*------------ unLocking reason -----------*/}
<FastField name={'reason'}> <FFormGroup
{({ field, meta: { error, touched } }) => ( name={'reason'}
<FormGroup
label={<T id={'unlocking_partial_transactions.dialog.reason'} />} label={<T id={'unlocking_partial_transactions.dialog.reason'} />}
labelInfo={<FieldRequiredHint />} labelInfo={<FieldRequiredHint />}
className={'form-group--reason'} fastField
intent={inputIntent({ error, touched })}
helperText={<ErrorMessage name={'reason'} />}
> >
<TextArea <FTextArea
name={'reason'}
growVertically={true} growVertically={true}
large={true} large={true}
intent={inputIntent({ error, touched })}
inputRef={(ref) => (reasonFieldRef.current = ref)} inputRef={(ref) => (reasonFieldRef.current = ref)}
{...field} fill
fastField
/> />
</FormGroup> </FFormGroup>
)}
</FastField>
</div> </div>
); );
} }

52
packages/webapp/src/containers/FinancialStatements/CustomersBalanceSummary/CustomersBalanceSummaryGeneralPanelContent.tsx
View File

@@ -1,7 +1,5 @@
// @ts-nocheck // @ts-nocheck
import { FastField } from 'formik'; import { Position } from '@blueprintjs/core';
import { DateInput } from '@blueprintjs/datetime';
import { FormGroup, Position, Checkbox } from '@blueprintjs/core';
import { import {
FormattedMessage as T, FormattedMessage as T,
Row, Row,
@@ -9,13 +7,10 @@ import {
FieldHint, FieldHint,
CustomersMultiSelect, CustomersMultiSelect,
FFormGroup, FFormGroup,
FDateInput,
FCheckbox,
} from '@/components'; } from '@/components';
import { import { momentFormatter } from '@/utils';
momentFormatter,
tansformDateValue,
inputIntent,
handleDateChange,
} from '@/utils';
import { filterCustomersOptions } from '../constants'; import { filterCustomersOptions } from '../constants';
import { useCustomersBalanceSummaryGeneralContext } from './CustomersBalanceSummaryGeneralProvider'; import { useCustomersBalanceSummaryGeneralContext } from './CustomersBalanceSummaryGeneralProvider';
import FinancialStatementsFilter from '../FinancialStatementsFilter'; import FinancialStatementsFilter from '../FinancialStatementsFilter';
@@ -30,45 +25,40 @@ export default function CustomersBalanceSummaryGeneralPanelContent() {
<div> <div>
<Row> <Row>
<Col xs={5}> <Col xs={5}>
<FastField name={'asDate'}> <FFormGroup
{({ form, field: { value }, meta: { error } }) => ( name={'asDate'}
<FormGroup
label={<T id={'as_date'} />} label={<T id={'as_date'} />}
labelInfo={<FieldHint />} labelInfo={<FieldHint />}
fill={true} fill
intent={inputIntent({ error })} fastField
> >
<DateInput <FDateInput
name={'asDate'}
{...momentFormatter('YYYY/MM/DD')} {...momentFormatter('YYYY/MM/DD')}
value={tansformDateValue(value)}
onChange={handleDateChange((selectedDate) => {
form.setFieldValue('asDate', selectedDate);
})}
popoverProps={{ position: Position.BOTTOM, minimal: true }} popoverProps={{ position: Position.BOTTOM, minimal: true }}
minimal={true} minimal={true}
fill={true} fill={true}
fastField
/> />
</FormGroup> </FFormGroup>
)}
</FastField>
</Col> </Col>
</Row> </Row>
<Row> <Row>
<Col xs={5}> <Col xs={5}>
<FastField name={'percentage_column'} type={'checkbox'}> <FFormGroup
{({ field }) => ( name={'percentage_column'}
<FormGroup labelInfo={<FieldHint />}> labelInfo={<FieldHint />}
<Checkbox fastField
>
<FCheckbox
name={'percentage_column'}
inline={true} inline={true}
name={'percentage'}
small={true} small={true}
label={<T id={'percentage_of_column'} />} label={<T id={'percentage_of_column'} />}
{...field} fastField
/> />
</FormGroup> </FFormGroup>
)}
</FastField>
</Col> </Col>
</Row> </Row>

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

@@ -5,6 +5,7 @@ import { FormGroup, Classes, Checkbox, ControlGroup } from '@blueprintjs/core';
import { import {
AccountsSelect, AccountsSelect,
MoneyInputGroup, MoneyInputGroup,
FMoneyInputGroup,
Col, Col,
Row, Row,
Hint, Hint,
@@ -59,33 +60,24 @@ function ItemFormBody({ organization: { base_currency } }) {
</FastField> </FastField>
{/*------------- Selling price ------------- */} {/*------------- Selling price ------------- */}
<FastField <FFormGroup
name={'sell_price'} name={'sell_price'}
sellable={values.sellable}
shouldUpdate={sellPriceFieldShouldUpdate}
>
{({ form, field: { value }, meta: { error, touched } }) => (
<FormGroup
label={<T id={'selling_price'} />} label={<T id={'selling_price'} />}
className={'form-group--sell_price'} inline
intent={inputIntent({ error, touched })} fastField
helperText={<ErrorMessage name={'sell_price'} />}
inline={true}
> >
<ControlGroup> <ControlGroup>
<InputPrependText text={base_currency} /> <InputPrependText text={base_currency} />
<MoneyInputGroup <FMoneyInputGroup
value={value} name={'sell_price'}
shouldUpdate={sellPriceFieldShouldUpdate}
sellable={values.sellable}
inputGroupProps={{ fill: true }} inputGroupProps={{ fill: true }}
disabled={!form.values.sellable} disabled={!values.sellable}
onChange={(unformattedValue) => { fastField
form.setFieldValue('sell_price', unformattedValue);
}}
/> />
</ControlGroup> </ControlGroup>
</FormGroup> </FFormGroup>
)}
</FastField>
{/*------------- Selling account ------------- */} {/*------------- Selling account ------------- */}
<FFormGroup <FFormGroup
@@ -138,6 +130,7 @@ function ItemFormBody({ organization: { base_currency } }) {
growVertically={true} growVertically={true}
height={280} height={280}
disabled={!values.sellable} disabled={!values.sellable}
fill
fastField fastField
/> />
</FFormGroup> </FFormGroup>
@@ -162,33 +155,25 @@ function ItemFormBody({ organization: { base_currency } }) {
</FastField> </FastField>
{/*------------- Cost price ------------- */} {/*------------- Cost price ------------- */}
<FastField <FFormGroup
name={'cost_price'} name={'cost_price'}
purchasable={values.purchasable}
shouldUpdate={costPriceFieldShouldUpdate}
>
{({ field, form, field: { value }, meta: { error, touched } }) => (
<FormGroup
label={<T id={'cost_price'} />} label={<T id={'cost_price'} />}
className={'form-group--item-cost-price'} inline
intent={inputIntent({ error, touched })} fastField
helperText={<ErrorMessage name="cost_price" />}
inline={true}
> >
<ControlGroup> <ControlGroup>
<InputPrependText text={base_currency} /> <InputPrependText text={base_currency} />
<MoneyInputGroup
value={value} <FMoneyInputGroup
name={'cost_price'}
shouldUpdate={costPriceFieldShouldUpdate}
purchasable={values.purchasable}
inputGroupProps={{ medium: true }} inputGroupProps={{ medium: true }}
disabled={!form.values.purchasable} disabled={!values.purchasable}
onChange={(unformattedValue) => { fastField
form.setFieldValue('cost_price', unformattedValue);
}}
/> />
</ControlGroup> </ControlGroup>
</FormGroup> </FFormGroup>
)}
</FastField>
{/*------------- Cost account ------------- */} {/*------------- Cost account ------------- */}
<FFormGroup <FFormGroup
@@ -249,6 +234,7 @@ function ItemFormBody({ organization: { base_currency } }) {
growVertically={true} growVertically={true}
height={280} height={280}
disabled={!values.purchasable} disabled={!values.purchasable}
fill
/> />
</FFormGroup> </FFormGroup>
</Col> </Col>

80
packages/webapp/src/containers/JournalNumber/ReferenceNumberFormContent.tsx
View File

@@ -1,10 +1,16 @@
// @ts-nocheck // @ts-nocheck
import React from 'react'; import React from 'react';
import { FastField, useFormikContext } from 'formik'; import { useFormikContext } from 'formik';
import { FormGroup, InputGroup, Radio } from '@blueprintjs/core'; import { Radio } from '@blueprintjs/core';
import { FormattedMessage as T, Row, Col, ErrorMessage } from '@/components'; import {
import { inputIntent } from '@/utils'; FormattedMessage as T,
Row,
Col,
FFormGroup,
FInputGroup,
FRadioGroup,
} from '@/components';
/** /**
* Reference number form content. * Reference number form content.
@@ -13,33 +19,21 @@ export default function ReferenceNumberFormContent() {
return ( return (
<> <>
{/* ------------- Auto increment mode ------------- */} {/* ------------- Auto increment mode ------------- */}
<FastField name={'incrementMode'}> <FRadioGroup name={'incrementMode'} fastField>
{({ form, field, meta: { error, touched } }) => (
<Radio <Radio
label={<T id={'auto_increment.field.auto'} />} label={<T id={'auto_increment.field.auto'} />}
value="auto-increment" value="auto"
onChange={() => {
form.setFieldValue('incrementMode', 'auto');
}}
checked={field.value === 'auto'}
/> />
)} </FRadioGroup>
</FastField>
<ReferenceNumberAutoIncrement /> <ReferenceNumberAutoIncrement />
{/* ------------- Manual increment mode ------------- */} {/* ------------- Manual increment mode ------------- */}
<FastField name={'incrementMode'}> <FRadioGroup name={'incrementMode'} fastField>
{({ form, field, meta: { error, touched } }) => (
<Radio <Radio
label={<T id={'auto_increment.field.manually'} />} label={<T id={'auto_increment.field.manually'} />}
value="manual" value="manual"
onChange={() => {
form.setFieldValue('incrementMode', 'manual');
}}
checked={field.value === 'manual'}
/> />
)} </FRadioGroup>
</FastField>
{/* ------------- Transaction manual increment mode ------------- */} {/* ------------- Transaction manual increment mode ------------- */}
<ReferenceNumberManualOnce /> <ReferenceNumberManualOnce />
@@ -49,40 +43,32 @@ export default function ReferenceNumberFormContent() {
function ReferenceNumberAutoIncrement() { function ReferenceNumberAutoIncrement() {
const { values } = useFormikContext(); const { values } = useFormikContext();
if (!values.incrementMode === 'auto') return null; if (values.incrementMode !== 'auto') return null;
return ( return (
<Row> <Row>
{/* ------------- Prefix ------------- */} {/* ------------- Prefix ------------- */}
<Col xs={4}> <Col xs={4}>
<FastField name={'numberPrefix'}> <FFormGroup
{({ form, field, meta: { error, touched } }) => ( name={'numberPrefix'}
<FormGroup
label={<T id={'prefix'} />} label={<T id={'prefix'} />}
className={'form-group--'} className={'form-group--'}
intent={inputIntent({ error, touched })} fastField
helperText={<ErrorMessage name={'numberPrefix'} />}
> >
<InputGroup intent={inputIntent({ error, touched })} {...field} /> <FInputGroup name={'numberPrefix'} fastField />
</FormGroup> </FFormGroup>
)}
</FastField>
</Col> </Col>
{/* ------------- Next number ------------- */} {/* ------------- Next number ------------- */}
<Col xs={6}> <Col xs={6}>
<FastField name={'nextNumber'}> <FFormGroup
{({ form, field, meta: { error, touched } }) => ( name={'nextNumber'}
<FormGroup
label={<T id={'next_number'} />} label={<T id={'next_number'} />}
className={'form-group--next-number'} className={'form-group--next-number'}
intent={inputIntent({ error, touched })} fastField
helperText={<ErrorMessage name={'nextNumber'} />}
> >
<InputGroup intent={inputIntent({ error, touched })} {...field} /> <FInputGroup name={'nextNumber'} fastField />
</FormGroup> </FFormGroup>
)}
</FastField>
</Col> </Col>
</Row> </Row>
); );
@@ -95,17 +81,13 @@ function ReferenceNumberManualOnce() {
if (!values.onceManualNumber) return null; if (!values.onceManualNumber) return null;
return ( return (
<FastField name={'incrementMode'}> <FFormGroup name={'incrementMode'} fastField>
{({ form, field, meta: { error, touched } }) => ( <FRadioGroup name={'incrementMode'} fastField>
<Radio <Radio
label={<T id={'auto_increment.field.manual_this_transaction'} />} label={<T id={'auto_increment.field.manual_this_transaction'} />}
value="manual" value="manual-transaction"
onChange={() => {
form.setFieldValue('incrementMode', 'manual-transaction');
}}
checked={field.value === 'manual-transaction'}
/> />
)} </FRadioGroup>
</FastField> </FFormGroup>
); );
} }

48
packages/webapp/src/containers/Preferences/Users/Roles/RolesForm/RoleFormHeader.tsx
View File

@@ -1,10 +1,6 @@
// @ts-nocheck // @ts-nocheck
import React from 'react'; import React from 'react';
import { ErrorMessage, FastField } from 'formik'; import { FormattedMessage as T, FieldRequiredHint, Card, FFormGroup, FInputGroup, FTextArea } from '@/components';
import { FormGroup, InputGroup, TextArea } from '@blueprintjs/core';
import { inputIntent } from '@/utils';
import { FormattedMessage as T, FieldRequiredHint, Card } from '@/components';
import { useAutofocus } from '@/hooks'; import { useAutofocus } from '@/hooks';
/** /**
@@ -17,48 +13,42 @@ export function RoleFormHeader() {
return ( return (
<Card> <Card>
{/* ---------- Name ---------- */} {/* ---------- Name ---------- */}
<FastField name={'role_name'}> <FFormGroup
{({ field, meta: { error, touched } }) => ( name={'role_name'}
<FormGroup
label={ label={
<strong> <strong>
<T id={'roles.label.role_name'} /> <T id={'roles.label.role_name'} />
</strong> </strong>
} }
labelInfo={<FieldRequiredHint />} labelInfo={<FieldRequiredHint />}
className={'form-group--name'} inline
intent={inputIntent({ error, touched })} fastField
helperText={<ErrorMessage name="role_name" />}
inline={true}
> >
<InputGroup <FInputGroup
name={'role_name'}
medium={true} medium={true}
inputRef={(ref) => (roleNameFieldRef.current = ref)} inputRef={(ref) => (roleNameFieldRef.current = ref)}
{...field} fill
fastField
/> />
</FormGroup> </FFormGroup>
)}
</FastField>
{/* ---------- Description ---------- */} {/* ---------- Description ---------- */}
<FastField name={'role_description'}> <FFormGroup
{({ field, meta: { error, touched } }) => ( name={'role_description'}
<FormGroup
label={<T id={'description'} />} label={<T id={'description'} />}
className={'form-group--description'} inline
intent={inputIntent({ error, touched })} fastField
helperText={<ErrorMessage name={'role_description'} />}
inline={true}
> >
<TextArea <FTextArea
name={'role_description'}
growVertically={true} growVertically={true}
height={280} height={280}
{...field}
placeholder="Max. 500 characters" placeholder="Max. 500 characters"
fill
fastField
/> />
</FormGroup> </FFormGroup>
)}
</FastField>
</Card> </Card>
); );
} }

62
packages/webapp/src/containers/Purchases/Bills/BillForm/BillFormHeaderFields.tsx
View File

@@ -2,9 +2,8 @@
import React from 'react'; import React from 'react';
import styled from 'styled-components'; import styled from 'styled-components';
import classNames from 'classnames'; import classNames from 'classnames';
import { FastField, ErrorMessage, useFormikContext } from 'formik'; import { useFormikContext } from 'formik';
import { FormGroup, InputGroup, Classes, Position } from '@blueprintjs/core'; import { Classes, Position } from '@blueprintjs/core';
import { DateInput } from '@blueprintjs/datetime';
import { css } from '@emotion/css'; import { css } from '@emotion/css';
import { FeatureCan, Stack, FormattedMessage as T } from '@/components'; import { FeatureCan, Stack, FormattedMessage as T } from '@/components';
@@ -15,6 +14,8 @@ import {
Icon, Icon,
VendorDrawerLink, VendorDrawerLink,
VendorsSelect, VendorsSelect,
FDateInput,
FInputGroup,
} from '@/components'; } from '@/components';
import { useBillFormContext } from './BillFormProvider'; import { useBillFormContext } from './BillFormProvider';
@@ -28,9 +29,6 @@ import withDialogActions from '@/containers/Dialog/withDialogActions';
import { import {
momentFormatter, momentFormatter,
compose, compose,
tansformDateValue,
handleDateChange,
inputIntent,
} from '@/utils'; } from '@/utils';
import { Features } from '@/constants'; import { Features } from '@/constants';
import { useTheme } from '@emotion/react'; import { useTheme } from '@emotion/react';
@@ -74,57 +72,43 @@ function BillFormHeader() {
/> />
{/* ------- Bill date ------- */} {/* ------- Bill date ------- */}
<FastField name={'bill_date'}> <FFormGroup
{({ form, field: { value }, meta: { error, touched } }) => ( name={'bill_date'}
<FormGroup
label={<T id={'bill_date'} />} label={<T id={'bill_date'} />}
inline={true} inline
labelInfo={<FieldRequiredHint />} labelInfo={<FieldRequiredHint />}
className={classNames(CLASSES.FILL)} className={classNames(CLASSES.FILL)}
intent={inputIntent({ error, touched })} fastField
helperText={<ErrorMessage name="bill_date" />}
> >
<DateInput <FDateInput
name={'bill_date'}
{...momentFormatter('YYYY/MM/DD')} {...momentFormatter('YYYY/MM/DD')}
value={tansformDateValue(value)}
onChange={handleDateChange((formattedDate) => {
form.setFieldValue('bill_date', formattedDate);
})}
popoverProps={{ position: Position.BOTTOM, minimal: true }} popoverProps={{ position: Position.BOTTOM, minimal: true }}
inputProps={{ leftIcon: <Icon icon={'date-range'} /> }} inputProps={{ leftIcon: <Icon icon={'date-range'} /> }}
fill
fastField
/> />
</FormGroup> </FFormGroup>
)}
</FastField>
{/* ------- Due date ------- */} {/* ------- Due date ------- */}
<FastField name={'due_date'}> <FFormGroup
{({ form, field: { value }, meta: { error, touched } }) => ( name={'due_date'}
<FormGroup
label={<T id={'due_date'} />} label={<T id={'due_date'} />}
inline={true} inline
className={classNames( fill
'form-group--due-date', fastField
'form-group--select-list',
CLASSES.FILL,
)}
intent={inputIntent({ error, touched })}
helperText={<ErrorMessage name="due_date" />}
> >
<DateInput <FDateInput
name={'due_date'}
{...momentFormatter('YYYY/MM/DD')} {...momentFormatter('YYYY/MM/DD')}
value={tansformDateValue(value)}
onChange={handleDateChange((formattedDate) => {
form.setFieldValue('due_date', formattedDate);
})}
popoverProps={{ position: Position.BOTTOM, minimal: true }} popoverProps={{ position: Position.BOTTOM, minimal: true }}
inputProps={{ inputProps={{
leftIcon: <Icon icon={'date-range'} />, leftIcon: <Icon icon={'date-range'} />,
}} }}
fill
fastField
/> />
</FormGroup> </FFormGroup>
)}
</FastField>
{/* ------- Bill number ------- */} {/* ------- Bill number ------- */}
<FFormGroup <FFormGroup

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

@@ -1,24 +1,19 @@
// @ts-nocheck // @ts-nocheck
import React from 'react'; import React from 'react';
import { import { Position, ControlGroup } from '@blueprintjs/core';
FormGroup, import { useFormikContext } from 'formik';
InputGroup,
Position,
ControlGroup,
} from '@blueprintjs/core';
import { FastField, Field, ErrorMessage } from 'formik';
import { DateInput } from '@blueprintjs/datetime';
import { import {
FFormGroup, FFormGroup,
FormattedMessage as T, FormattedMessage as T,
WarehouseSelect, WarehouseSelect,
FDateInput,
FInputGroup,
} from '@/components'; } from '@/components';
import { momentFormatter, compose, tansformDateValue } from '@/utils'; import { momentFormatter, compose } from '@/utils';
import classNames from 'classnames'; import classNames from 'classnames';
import { CLASSES } from '@/constants/classes'; import { CLASSES } from '@/constants/classes';
import { FieldRequiredHint, Icon, InputPrependButton } from '@/components'; import { FieldRequiredHint, Icon, InputPrependButton } from '@/components';
import { inputIntent, handleDateChange } from '@/utils';
import { useWarehouseTransferFormContext } from './WarehouseTransferFormProvider'; import { useWarehouseTransferFormContext } from './WarehouseTransferFormProvider';
import { useObserveTransferNoSettings } from './utils'; import { useObserveTransferNoSettings } from './utils';
import withSettings from '@/containers/Settings/withSettings'; import withSettings from '@/containers/Settings/withSettings';
@@ -37,6 +32,7 @@ function WarehouseTransferFormHeaderFields({
warehouseTransferNumberPrefix, warehouseTransferNumberPrefix,
}) { }) {
const { warehouses } = useWarehouseTransferFormContext(); const { warehouses } = useWarehouseTransferFormContext();
const { values } = useFormikContext();
// Handle warehouse transfer number changing. // Handle warehouse transfer number changing.
const handleTransferNumberChange = () => { const handleTransferNumberChange = () => {
@@ -44,10 +40,13 @@ function WarehouseTransferFormHeaderFields({
}; };
// Handle transfer no. field blur. // Handle transfer no. field blur.
const handleTransferNoBlur = (form, field) => (event) => { const handleTransferNoBlur = (event) => {
const newValue = event.target.value; const newValue = event.target.value;
if (field.value !== newValue && warehouseTransferAutoIncrement) { if (
values.transaction_number !== newValue &&
warehouseTransferAutoIncrement
) {
openDialog('warehouse-transfer-no-form', { openDialog('warehouse-transfer-no-form', {
initialFormValues: { initialFormValues: {
manualTransactionNo: newValue, manualTransactionNo: newValue,
@@ -66,48 +65,38 @@ function WarehouseTransferFormHeaderFields({
return ( return (
<div className={classNames(CLASSES.PAGE_FORM_HEADER_FIELDS)}> <div className={classNames(CLASSES.PAGE_FORM_HEADER_FIELDS)}>
{/* ----------- Date ----------- */} {/* ----------- Date ----------- */}
<FastField name={'date'}> <FFormGroup
{({ form, field: { value }, meta: { error, touched } }) => ( name={'date'}
<FormGroup
label={<T id={'date'} />} label={<T id={'date'} />}
inline={true} inline
labelInfo={<FieldRequiredHint />} labelInfo={<FieldRequiredHint />}
className={classNames('form-group--date', CLASSES.FILL)} fill
intent={inputIntent({ error, touched })} fastField
helperText={<ErrorMessage name="date" />}
> >
<DateInput <FDateInput
name={'date'}
{...momentFormatter('YYYY/MM/DD')} {...momentFormatter('YYYY/MM/DD')}
value={tansformDateValue(value)}
onChange={handleDateChange((formattedDate) => {
form.setFieldValue('date', formattedDate);
})}
popoverProps={{ position: Position.BOTTOM_LEFT, minimal: true }} popoverProps={{ position: Position.BOTTOM_LEFT, minimal: true }}
inputProps={{ inputProps={{
leftIcon: <Icon icon={'date-range'} />, leftIcon: <Icon icon={'date-range'} />,
}} }}
fastField
/> />
</FormGroup> </FFormGroup>
)}
</FastField>
{/* ----------- Transfer number ----------- */} {/* ----------- Transfer number ----------- */}
<Field name={'transaction_number'}> <FFormGroup
{({ form, field, meta: { error, touched } }) => ( name={'transaction_number'}
<FormGroup
label={<T id={'warehouse_transfer.label.transfer_no'} />} label={<T id={'warehouse_transfer.label.transfer_no'} />}
// labelInfo={<FieldRequiredHint />} inline
inline={true} fill
className={classNames('form-group--transfer-no', CLASSES.FILL)}
intent={inputIntent({ error, touched })}
helperText={<ErrorMessage name="transfer_number" />}
> >
<ControlGroup fill={true}> <ControlGroup fill={true}>
<InputGroup <FInputGroup
name={'transaction_number'}
minimal={true} minimal={true}
value={field.value}
asyncControl={true} asyncControl={true}
onBlur={handleTransferNoBlur(form, field)} onBlur={handleTransferNoBlur}
/> />
<InputPrependButton <InputPrependButton
buttonProps={{ buttonProps={{
@@ -127,9 +116,7 @@ function WarehouseTransferFormHeaderFields({
}} }}
/> />
</ControlGroup> </ControlGroup>
</FormGroup> </FFormGroup>
)}
</Field>
{/* ----------- Form Warehouse ----------- */} {/* ----------- Form Warehouse ----------- */}
<FFormGroup <FFormGroup