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: date input field

Browse Source
This commit is contained in:
Ahmed Bouhuolia
2025-12-21 23:34:11 +02:00
parent 62ae49941b
commit b294a72a26
16 changed files with 414 additions and 640 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -25,7 +25,6 @@ import {
FTextArea, FTextArea,
FMoneyInputGroup, FMoneyInputGroup,
} from '@/components'; } from '@/components';
import { DateInput } from '@blueprintjs/datetime';
import { CLASSES, ACCOUNT_TYPE, Features } from '@/constants'; import { CLASSES, ACCOUNT_TYPE, Features } from '@/constants';
import { import {
@@ -73,29 +72,22 @@ export default function OtherIncomeFormFields() {
<Row> <Row>
<Col xs={5}> <Col xs={5}>
{/*------------ Date -----------*/} {/*------------ Date -----------*/}
<FastField name={'date'}> <FFormGroup
{({ form, field: { value }, meta: { error, touched } }) => ( name={'date'}
<FFormGroup label={<T id={'date'} />}
name={'date'} labelInfo={<FieldRequiredHint />}
label={<T id={'date'} />} fill
labelInfo={<FieldRequiredHint />} >
fill <FDateInput
> name={'date'}
<DateInput {...momentFormatter('YYYY/MM/DD')}
{...momentFormatter('YYYY/MM/DD')} popoverProps={{ position: Position.BOTTOM_LEFT, minimal: true }}
onChange={handleDateChange((formattedDate) => { inputProps={{
form.setFieldValue('date', formattedDate); fill: true,
})} leftIcon: <Icon icon={'date-range'} />,
value={tansformDateValue(value)} }}
popoverProps={{ />
position: Position.BOTTOM, </FFormGroup>
minimal: true,
}}
intent={inputIntent({ error, touched })}
/>
</FFormGroup>
)}
</FastField>
</Col> </Col>
<Col xs={5}> <Col xs={5}>
@@ -134,10 +126,7 @@ export default function OtherIncomeFormFields() {
<FAccountsSuggestField <FAccountsSuggestField
name={'credit_account_id'} name={'credit_account_id'}
items={accounts} items={accounts}
filterByTypes={[ filterByTypes={[ACCOUNT_TYPE.INCOME, ACCOUNT_TYPE.OTHER_INCOME]}
ACCOUNT_TYPE.INCOME,
ACCOUNT_TYPE.OTHER_INCOME,
]}
/> />
</FFormGroup> </FFormGroup>
</Col> </Col>

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

@@ -3,7 +3,6 @@ import React from 'react';
import { FastField, ErrorMessage } from 'formik'; import { FastField, ErrorMessage } from 'formik';
import { Position, ControlGroup } from '@blueprintjs/core'; import { Position, ControlGroup } from '@blueprintjs/core';
import classNames from 'classnames'; import classNames from 'classnames';
import { DateInput } from '@blueprintjs/datetime';
import { import {
FormattedMessage as T, FormattedMessage as T,
FAccountsSuggestField, FAccountsSuggestField,
@@ -14,11 +13,11 @@ import {
BranchSelect, BranchSelect,
BranchSelectButton, BranchSelectButton,
FeatureCan, FeatureCan,
FFormGroup, FFormGroup,
FMoneyInputGroup, FMoneyInputGroup,
FTextArea, FTextArea,
FInputGroup, FInputGroup,
FDateInput,
} from '@/components'; } from '@/components';
import { ACCOUNT_TYPE, CLASSES, Features } from '@/constants'; import { ACCOUNT_TYPE, CLASSES, Features } from '@/constants';
import { import {
@@ -69,29 +68,25 @@ export default function OwnerContributionFormFields() {
<Row> <Row>
<Col xs={5}> <Col xs={5}>
{/*------------ Date -----------*/} {/*------------ Date -----------*/}
<FastField name={'date'}> <FFormGroup
{({ form, field: { value }, meta: { error, touched } }) => ( name={'date'}
<FFormGroup label={<T id={'date'} />}
name={'date'} labelInfo={<FieldRequiredHint />}
label={<T id={'date'} />} fill
labelInfo={<FieldRequiredHint />} >
fill <FDateInput
> name={'date'}
<DateInput {...momentFormatter('YYYY/MM/DD')}
{...momentFormatter('YYYY/MM/DD')} popoverProps={{
onChange={handleDateChange((formattedDate) => { position: Position.BOTTOM_LEFT,
form.setFieldValue('date', formattedDate); minimal: true,
})} }}
value={tansformDateValue(value)} inputProps={{
popoverProps={{ fill: true,
position: Position.BOTTOM, leftIcon: <Icon icon={'date-range'} />,
minimal: true, }}
}} />
intent={inputIntent({ error, touched })} </FFormGroup>
/>
</FFormGroup>
)}
</FastField>
</Col> </Col>
<Col xs={5}> <Col xs={5}>
{/*------------ Transaction number -----------*/} {/*------------ Transaction number -----------*/}

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

@@ -1,7 +1,5 @@
// @ts-nocheck // @ts-nocheck
import React from 'react'; import React from 'react';
import { FastField, ErrorMessage } from 'formik';
import { DateInput } from '@blueprintjs/datetime';
import { FormGroup, Position, ControlGroup } from '@blueprintjs/core'; import { FormGroup, Position, ControlGroup } from '@blueprintjs/core';
import classNames from 'classnames'; import classNames from 'classnames';
import { import {
@@ -17,16 +15,13 @@ import {
FMoneyInputGroup, FMoneyInputGroup,
FFormGroup, FFormGroup,
FTextArea, FTextArea,
FDateInput,
FInputGroup,
} from '@/components'; } from '@/components';
import { MoneyInOutTransactionNoField } from '../../_components'; import { MoneyInOutTransactionNoField } from '../../_components';
import { MoneyInExchangeRateField } from '../MoneyInExchangeRateField'; import { MoneyInExchangeRateField } from '../MoneyInExchangeRateField';
import { CLASSES, ACCOUNT_TYPE, Features } from '@/constants'; import { CLASSES, ACCOUNT_TYPE, Features } from '@/constants';
import { import { momentFormatter } from '@/utils';
inputIntent,
momentFormatter,
tansformDateValue,
handleDateChange,
} from '@/utils';
import { useMoneyInDailogContext } from '../MoneyInDialogProvider'; import { useMoneyInDailogContext } from '../MoneyInDialogProvider';
import { useMoneyInFieldsContext } from '../MoneyInFieldsProvider'; import { useMoneyInFieldsContext } from '../MoneyInFieldsProvider';
import { import {
@@ -66,29 +61,21 @@ export default function TransferFromAccountFormFields() {
<Row> <Row>
<Col xs={5}> <Col xs={5}>
{/*------------ Date -----------*/} {/*------------ Date -----------*/}
<FastField name={'date'}> <FFormGroup
{({ form, field: { value }, meta: { error, touched } }) => ( name={'date'}
<FFormGroup label={<T id={'date'} />}
name={'date'} labelInfo={<FieldRequiredHint />}
label={<T id={'date'} />} fill
labelInfo={<FieldRequiredHint />} >
fill <FDateInput
> name={'date'}
<DateInput {...momentFormatter('YYYY/MM/DD')}
{...momentFormatter('YYYY/MM/DD')} popoverProps={{
onChange={handleDateChange((formattedDate) => { position: Position.BOTTOM_LEFT,
form.setFieldValue('date', formattedDate); minimal: true,
})} }}
value={tansformDateValue(value)} />
popoverProps={{ </FFormGroup>
position: Position.BOTTOM,
minimal: true,
}}
intent={inputIntent({ error, touched })}
/>
</FFormGroup>
)}
</FastField>
</Col> </Col>
<Col xs={5}> <Col xs={5}>
{/*------------ Transaction number -----------*/} {/*------------ Transaction number -----------*/}

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

@@ -1,6 +1,5 @@
// @ts-nocheck // @ts-nocheck
import React from 'react'; import React from 'react';
import { FastField, ErrorMessage } from 'formik';
import { FormGroup, Position, ControlGroup } from '@blueprintjs/core'; import { FormGroup, Position, ControlGroup } from '@blueprintjs/core';
import classNames from 'classnames'; import classNames from 'classnames';
import { import {
@@ -17,15 +16,10 @@ import {
FFormGroup, FFormGroup,
FInputGroup, FInputGroup,
FMoneyInputGroup, FMoneyInputGroup,
FDateInput,
} from '@/components'; } from '@/components';
import { DateInput } from '@blueprintjs/datetime';
import { Features, ACCOUNT_TYPE } from '@/constants'; import { Features, ACCOUNT_TYPE } from '@/constants';
import { import { momentFormatter } from '@/utils';
inputIntent,
momentFormatter,
tansformDateValue,
handleDateChange,
} from '@/utils';
import { CLASSES } from '@/constants/classes'; import { CLASSES } from '@/constants/classes';
import { useMoneyOutDialogContext } from '../MoneyOutDialogProvider'; import { useMoneyOutDialogContext } from '../MoneyOutDialogProvider';
import { useSetPrimaryBranchToForm, BranchRowDivider } from '../utils'; import { useSetPrimaryBranchToForm, BranchRowDivider } from '../utils';
@@ -65,29 +59,23 @@ export default function OtherExpnseFormFields() {
<Row> <Row>
<Col xs={5}> <Col xs={5}>
{/*------------ Date -----------*/} {/*------------ Date -----------*/}
<FastField name={'date'}> <FFormGroup
{({ form, field: { value }, meta: { error, touched } }) => ( name={'date'}
<FFormGroup label={<T id={'date'} />}
name={'date'} labelInfo={<FieldRequiredHint />}
label={<T id={'date'} />} fill
labelInfo={<FieldRequiredHint />} fastField
fill >
> <FDateInput
<DateInput name={'date'}
{...momentFormatter('YYYY/MM/DD')} {...momentFormatter('YYYY/MM/DD')}
onChange={handleDateChange((formattedDate) => { popoverProps={{
form.setFieldValue('date', formattedDate); position: Position.BOTTOM_LEFT,
})} minimal: true,
value={tansformDateValue(value)} }}
popoverProps={{ fastField
position: Position.BOTTOM, />
minimal: true, </FFormGroup>
}}
intent={inputIntent({ error, touched })}
/>
</FFormGroup>
)}
</FastField>
</Col> </Col>
<Col xs={5}> <Col xs={5}>
{/*------------ Transaction number -----------*/} {/*------------ Transaction number -----------*/}

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

@@ -1,7 +1,5 @@
// @ts-nocheck // @ts-nocheck
import React from 'react'; import React from 'react';
import { FastField, ErrorMessage } from 'formik';
import { DateInput } from '@blueprintjs/datetime';
import { FormGroup, Position, ControlGroup } from '@blueprintjs/core'; import { FormGroup, Position, ControlGroup } from '@blueprintjs/core';
import classNames from 'classnames'; import classNames from 'classnames';
import { import {
@@ -18,14 +16,10 @@ import {
FTextArea, FTextArea,
FInputGroup, FInputGroup,
FMoneyInputGroup, FMoneyInputGroup,
FDateInput,
} from '@/components'; } from '@/components';
import { CLASSES, Features, ACCOUNT_TYPE } from '@/constants'; import { CLASSES, Features, ACCOUNT_TYPE } from '@/constants';
import { import { momentFormatter } from '@/utils';
inputIntent,
momentFormatter,
tansformDateValue,
handleDateChange,
} from '@/utils';
import { useMoneyOutDialogContext } from '../MoneyOutDialogProvider'; import { useMoneyOutDialogContext } from '../MoneyOutDialogProvider';
import { import {
useSetPrimaryBranchToForm, useSetPrimaryBranchToForm,
@@ -67,29 +61,21 @@ export default function OwnerDrawingsFormFields() {
<Row> <Row>
<Col xs={5}> <Col xs={5}>
{/*------------ Date -----------*/} {/*------------ Date -----------*/}
<FastField name={'date'}> <FFormGroup
{({ form, field: { value }, meta: { error, touched } }) => ( name={'date'}
<FFormGroup label={<T id={'date'} />}
name={'date'} labelInfo={<FieldRequiredHint />}
label={<T id={'date'} />} fill
labelInfo={<FieldRequiredHint />} >
fill <FDateInput
> name={'date'}
<DateInput {...momentFormatter('YYYY/MM/DD')}
{...momentFormatter('YYYY/MM/DD')} popoverProps={{
onChange={handleDateChange((formattedDate) => { position: Position.BOTTOM_LEFT,
form.setFieldValue('date', formattedDate); minimal: true,
})} }}
value={tansformDateValue(value)} />
popoverProps={{ </FFormGroup>
position: Position.BOTTOM,
minimal: true,
}}
intent={inputIntent({ error, touched })}
/>
</FFormGroup>
)}
</FastField>
</Col> </Col>
<Col xs={5}> <Col xs={5}>
{/*------------ Transaction number -----------*/} {/*------------ Transaction number -----------*/}

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

@@ -1,6 +1,6 @@
// @ts-nocheck // @ts-nocheck
import React from 'react'; import React from 'react';
import { FastField, ErrorMessage } from 'formik'; import { ErrorMessage } from 'formik';
import { FormGroup, Position, ControlGroup } from '@blueprintjs/core'; import { FormGroup, Position, ControlGroup } from '@blueprintjs/core';
import classNames from 'classnames'; import classNames from 'classnames';
import { import {
@@ -17,14 +17,12 @@ import {
FTextArea, FTextArea,
FMoneyInputGroup, FMoneyInputGroup,
FInputGroup, FInputGroup,
FDateInput,
} from '@/components'; } from '@/components';
import { DateInput } from '@blueprintjs/datetime';
import { ACCOUNT_TYPE } from '@/constants/accountTypes'; import { ACCOUNT_TYPE } from '@/constants/accountTypes';
import { import {
inputIntent, inputIntent,
momentFormatter, momentFormatter,
tansformDateValue,
handleDateChange,
} from '@/utils'; } from '@/utils';
import { Features } from '@/constants'; import { Features } from '@/constants';
import { CLASSES } from '@/constants/classes'; import { CLASSES } from '@/constants/classes';
@@ -66,31 +64,23 @@ export default function TransferToAccountFormFields() {
<Row> <Row>
<Col xs={5}> <Col xs={5}>
{/*------------ Date -----------*/} {/*------------ Date -----------*/}
<FastField name={'date'}> <FFormGroup
{({ form, field: { value }, meta: { error, touched } }) => ( name={'date'}
<FormGroup label={<T id={'date'} />}
label={<T id={'date'} />} labelInfo={<FieldRequiredHint />}
labelInfo={<FieldRequiredHint />} fill
intent={inputIntent({ error, touched })} fastField
helperText={<ErrorMessage name="date" />} >
minimal={true} <FDateInput
className={classNames(CLASSES.FILL, 'form-group--date')} name={'date'}
> {...momentFormatter('YYYY/MM/DD')}
<DateInput popoverProps={{
{...momentFormatter('YYYY/MM/DD')} position: Position.BOTTOM_LEFT,
onChange={handleDateChange((formattedDate) => { minimal: true,
form.setFieldValue('date', formattedDate); }}
})} fastField
value={tansformDateValue(value)} />
popoverProps={{ </FFormGroup>
position: Position.BOTTOM,
minimal: true,
}}
intent={inputIntent({ error, touched })}
/>
</FormGroup>
)}
</FastField>
</Col> </Col>
<Col xs={5}> <Col xs={5}>

110
packages/webapp/src/containers/Dialogs/InventoryAdjustmentFormDialog/InventoryAdjustmentFormDialogFields.tsx
View File

@@ -4,15 +4,14 @@ import intl from 'react-intl-universal';
import styled from 'styled-components'; import styled from 'styled-components';
import classNames from 'classnames'; import classNames from 'classnames';
import { FastField, ErrorMessage, Field } from 'formik'; import { FastField, ErrorMessage, Field } from 'formik';
import { Classes, FormGroup, Position } from '@blueprintjs/core';
import { import {
Classes, FFormGroup,
FormGroup, FormattedMessage as T,
InputGroup, FDateInput,
TextArea, FInputGroup,
Position, FTextArea,
} from '@blueprintjs/core'; } from '@/components';
import { FFormGroup, FormattedMessage as T } from '@/components';
import { DateInput } from '@blueprintjs/datetime';
import { useAutofocus } from '@/hooks'; import { useAutofocus } from '@/hooks';
import { import {
ListSelect, ListSelect,
@@ -25,13 +24,7 @@ import {
BranchSelectButton, BranchSelectButton,
FAccountsSuggestField, FAccountsSuggestField,
} from '@/components'; } from '@/components';
import { import { inputIntent, momentFormatter, toSafeNumber } from '@/utils';
inputIntent,
momentFormatter,
tansformDateValue,
handleDateChange,
toSafeNumber,
} from '@/utils';
import { Features, CLASSES } from '@/constants'; import { Features, CLASSES } from '@/constants';
import { useInventoryAdjContext } from './InventoryAdjustmentFormProvider'; import { useInventoryAdjContext } from './InventoryAdjustmentFormProvider';
@@ -107,30 +100,24 @@ export default function InventoryAdjustmentFormDialogFields() {
<Row> <Row>
<Col xs={5}> <Col xs={5}>
{/*------------ Date -----------*/} {/*------------ Date -----------*/}
<FastField name={'date'}> <FFormGroup
{({ form, field: { value }, meta: { error, touched } }) => ( name={'date'}
<FFormGroup label={<T id={'date'} />}
name={'date'} labelInfo={<FieldRequiredHint />}
label={<T id={'date'} />} fill
labelInfo={<FieldRequiredHint />} fastField
fill >
> <FDateInput
<DateInput name={'date'}
{...momentFormatter('YYYY/MM/DD')} {...momentFormatter('YYYY/MM/DD')}
onChange={handleDateChange((formattedDate) => { popoverProps={{
form.setFieldValue('date', formattedDate); position: Position.BOTTOM,
})} minimal: true,
value={tansformDateValue(value)} }}
popoverProps={{ inputRef={(ref) => (dateFieldRef.current = ref)}
position: Position.BOTTOM, fastField
minimal: true, />
}} </FFormGroup>
intent={inputIntent({ error, touched })}
inputRef={(ref) => (dateFieldRef.current = ref)}
/>
</FFormGroup>
)}
</FastField>
</Col> </Col>
<Col xs={5}> <Col xs={5}>
@@ -190,38 +177,23 @@ export default function InventoryAdjustmentFormDialogFields() {
</FFormGroup> </FFormGroup>
{/*------------ Reference -----------*/} {/*------------ Reference -----------*/}
<FastField name={'reference_no'}> <FFormGroup
{({ form, field, meta: { error, touched } }) => ( name={'reference_no'}
<FormGroup label={<T id={'reference_no'} />}
label={<T id={'reference_no'} />} fastField
intent={inputIntent({ error, touched })} >
helperText={<ErrorMessage name="reference_no" />} <FInputGroup name={'reference_no'} fastField />
className={'form-group--reference-no'} </FFormGroup>
>
<InputGroup intent={inputIntent({ error, touched })} {...field} />
</FormGroup>
)}
</FastField>
{/*------------ Adjustment reasons -----------*/} {/*------------ Adjustment reasons -----------*/}
<FastField name={'reason'}> <FFormGroup
{({ field, meta: { error, touched } }) => ( name={'reason'}
<FormGroup label={<T id={'adjustment_reasons'} />}
label={<T id={'adjustment_reasons'} />} labelInfo={<FieldRequiredHint />}
labelInfo={<FieldRequiredHint />} fastField
className={'form-group--adjustment-reasons'} >
intent={inputIntent({ error, touched })} <FTextArea name={'reason'} growVertically large fastField />
helperText={<ErrorMessage name={'reason'} />} </FFormGroup>
>
<TextArea
growVertically={true}
large={true}
intent={inputIntent({ error, touched })}
{...field}
/>
</FormGroup>
)}
</FastField>
</div> </div>
); );
} }

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

@@ -1,11 +1,16 @@
// @ts-nocheck // @ts-nocheck
import React from 'react'; import React from 'react';
import { FastField, ErrorMessage } from 'formik'; import { FastField, ErrorMessage } from 'formik';
import { Classes, FormGroup, TextArea, Position } from '@blueprintjs/core'; import { Classes, FormGroup, Position } from '@blueprintjs/core';
import { DateInput } from '@blueprintjs/datetime'; import { DateInput } from '@blueprintjs/datetime';
import classNames from 'classnames'; import classNames from 'classnames';
import { CLASSES } from '@/constants/classes'; import { CLASSES } from '@/constants/classes';
import { FieldRequiredHint, FormattedMessage as T } from '@/components'; import {
FieldRequiredHint,
FormattedMessage as T,
FFormGroup,
FTextArea,
} from '@/components';
import { useAutofocus } from '@/hooks'; import { useAutofocus } from '@/hooks';
import { import {
inputIntent, inputIntent,
@@ -50,25 +55,20 @@ export default function LockingTransactionsFormFields() {
</FastField> </FastField>
{/*------------ Locking Reason -----------*/} {/*------------ Locking Reason -----------*/}
<FastField name={'reason'}> <FFormGroup
{({ field, meta: { error, touched } }) => ( name={'reason'}
<FormGroup label={<T id={'locking_transactions.dialog.reason'} />}
label={<T id={'locking_transactions.dialog.reason'} />} labelInfo={<FieldRequiredHint />}
labelInfo={<FieldRequiredHint />} fastField
className={'form-group--reason'} >
intent={inputIntent({ error, touched })} <FTextArea
helperText={<ErrorMessage name={'reason'} />} name={'reason'}
> growVertically={true}
<TextArea large={true}
growVertically={true} inputRef={(ref) => (reasonFieldRef.current = ref)}
large={true} fastField
intent={inputIntent({ error, touched })} />
inputRef={(ref) => (reasonFieldRef.current = ref)} </FFormGroup>
{...field}
/>
</FormGroup>
)}
</FastField>
</div> </div>
); );
} }

86
packages/webapp/src/containers/FinancialStatements/APAgingSummary/APAgingSummaryHeaderGeneralContent.tsx
View File

@@ -1,8 +1,6 @@
// @ts-nocheck // @ts-nocheck
import React from 'react'; import React from 'react';
import { FastField } from 'formik'; import { Position } from '@blueprintjs/core';
import { Intent, FormGroup, InputGroup, Position } from '@blueprintjs/core';
import { DateInput } from '@blueprintjs/datetime';
import { import {
FormattedMessage as T, FormattedMessage as T,
Row, Row,
@@ -10,16 +8,13 @@ import {
FieldHint, FieldHint,
FFormGroup, FFormGroup,
VendorsMultiSelect, VendorsMultiSelect,
FDateInput,
FInputGroup,
} from '@/components'; } from '@/components';
import { useAPAgingSummaryGeneralContext } from './APAgingSummaryGeneralProvider'; import { useAPAgingSummaryGeneralContext } from './APAgingSummaryGeneralProvider';
import FinancialStatementsFilter from '../FinancialStatementsFilter'; import FinancialStatementsFilter from '../FinancialStatementsFilter';
import { filterVendorsOptions } from './constants'; import { filterVendorsOptions } from './constants';
import { import { momentFormatter } from '@/utils';
momentFormatter,
tansformDateValue,
inputIntent,
handleDateChange,
} from '@/utils';
/** /**
* AP Aging Summary - Drawer Header - General panel - Content. * AP Aging Summary - Drawer Header - General panel - Content.
@@ -31,59 +26,46 @@ export default function APAgingSummaryHeaderGeneralContent() {
<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
fill={true} fastField
intent={inputIntent({ error })} >
> <FDateInput
<DateInput name={'asDate'}
{...momentFormatter('YYYY/MM/DD')} {...momentFormatter('YYYY/MM/DD')}
value={tansformDateValue(value)} popoverProps={{ position: Position.BOTTOM_LEFT, minimal: true }}
onChange={handleDateChange((selectedDate) => { minimal
form.setFieldValue('asDate', selectedDate); fill
})} fastField
popoverProps={{ position: Position.BOTTOM, minimal: true }} />
minimal={true} </FFormGroup>
fill={true}
/>
</FormGroup>
)}
</FastField>
</Col> </Col>
</Row> </Row>
<Row> <Row>
<Col xs={5}> <Col xs={5}>
<FastField name={'agingDaysBefore'}> <FFormGroup
{({ field, meta: { error } }) => ( name={'agingDaysBefore'}
<FormGroup label={<T id={'aging_before_days'} />}
label={<T id={'aging_before_days'} />} labelInfo={<FieldHint />}
labelInfo={<FieldHint />} >
intent={inputIntent({ error })} <FInputGroup name={'agingDaysBefore'} />
> </FFormGroup>
<InputGroup intent={error && Intent.DANGER} {...field} />
</FormGroup>
)}
</FastField>
</Col> </Col>
</Row> </Row>
<Row> <Row>
<Col xs={5}> <Col xs={5}>
<FastField name={'agingPeriods'}> <FFormGroup
{({ field, meta: { error } }) => ( name={'agingPeriods'}
<FormGroup label={<T id={'aging_periods'} />}
label={<T id={'aging_periods'} />} labelInfo={<FieldHint />}
labelInfo={<FieldHint />} >
intent={inputIntent({ error })} <FInputGroup name={'agingPeriods'} />
> </FFormGroup>
<InputGroup intent={error && Intent.DANGER} {...field} />
</FormGroup>
)}
</FastField>
</Col> </Col>
</Row> </Row>

66
packages/webapp/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryHeaderGeneralContent.tsx
View File

@@ -1,8 +1,6 @@
// @ts-nocheck // @ts-nocheck
import React from 'react'; import React from 'react';
import { FastField, Field } from 'formik'; import { Position } from '@blueprintjs/core';
import { DateInput } from '@blueprintjs/datetime';
import { Intent, FormGroup, InputGroup, Position } from '@blueprintjs/core';
import FinancialStatementsFilter from '../FinancialStatementsFilter'; import FinancialStatementsFilter from '../FinancialStatementsFilter';
import { import {
FormattedMessage as T, FormattedMessage as T,
@@ -12,6 +10,7 @@ import {
FInputGroup, FInputGroup,
FFormGroup, FFormGroup,
CustomersMultiSelect, CustomersMultiSelect,
FDateInput,
} from '@/components'; } from '@/components';
import { momentFormatter } from '@/utils'; import { momentFormatter } from '@/utils';
import { useARAgingSummaryGeneralContext } from './ARAgingSummaryGeneralProvider'; import { useARAgingSummaryGeneralContext } from './ARAgingSummaryGeneralProvider';
@@ -28,48 +27,35 @@ export default function ARAgingSummaryHeaderGeneralContent() {
<div> <div>
<Row> <Row>
<Col xs={5}> <Col xs={5}>
<FastField name={'asDate'}> <FFormGroup
{({ form, field: { value }, meta: { error, touched } }) => ( name={'asDate'}
<FormGroup label={<T id={'as_date'} />}
label={<T id={'as_date'} />} labelInfo={<FieldHint />}
labelInfo={<FieldHint />} fill
fill={true} fastField
intent={error && Intent.DANGER} >
> <FDateInput
<DateInput name={'asDate'}
{...momentFormatter('YYYY/MM/DD')} {...momentFormatter('YYYY/MM/DD')}
value={value} popoverProps={{ position: Position.BOTTOM_LEFT, minimal: true }}
onChange={(selectedDate) => { minimal
form.setFieldValue('asDate', selectedDate); fill
}} fastField
popoverProps={{ position: Position.BOTTOM, minimal: true }} />
minimal={true} </FFormGroup>
fill={true}
/>
</FormGroup>
)}
</FastField>
</Col> </Col>
</Row> </Row>
<Row> <Row>
<Col xs={5}> <Col xs={5}>
<FastField name={'agingDaysBefore'}> <FFormGroup
{({ field, meta: { error, touched } }) => ( name={'agingDaysBefore'}
<FormGroup label={<T id={'aging_before_days'} />}
label={<T id={'aging_before_days'} />} labelInfo={<FieldHint />}
labelInfo={<FieldHint />} fastField
className={'form-group--aging-before-days'} >
intent={error && Intent.DANGER} <FInputGroup name={'agingDaysBefore'} medium={true} fastField />
> </FFormGroup>
<InputGroup
medium={true}
intent={error && Intent.DANGER}
{...field}
/>
</FormGroup>
)}
</FastField>
</Col> </Col>
</Row> </Row>

96
packages/webapp/src/containers/FinancialStatements/FinancialStatementDateRange.tsx
View File

@@ -3,10 +3,9 @@ import React, { useMemo } from 'react';
import intl from 'react-intl-universal'; import intl from 'react-intl-universal';
import moment from 'moment'; import moment from 'moment';
import { FastField, ErrorMessage } from 'formik'; import { FastField, ErrorMessage } from 'formik';
import { HTMLSelect, FormGroup, Intent, Position } from '@blueprintjs/core'; import { HTMLSelect, FormGroup, Position } from '@blueprintjs/core';
import { DateInput } from '@blueprintjs/datetime';
import { Row, Col, Hint } from '@/components'; import { Row, Col, Hint, FDateInput, FFormGroup } from '@/components';
import { momentFormatter, parseDateRangeQuery } from '@/utils'; import { momentFormatter, parseDateRangeQuery } from '@/utils';
import { dateRangeOptions } from './constants'; import { dateRangeOptions } from './constants';
@@ -60,66 +59,43 @@ export default function FinancialStatementDateRange() {
<Row> <Row>
<Col xs={4}> <Col xs={4}>
<FastField name={'fromDate'}> <FFormGroup
{({ name={'fromDate'}
form: { setFieldValue }, label={intl.get('from_date')}
field: { value }, labelInfo={<Hint />}
meta: { error, touched }, fill
}) => ( fastField
<FormGroup >
label={intl.get('from_date')} <FDateInput
labelInfo={<Hint />} name={'fromDate'}
fill={true} {...momentFormatter('YYYY-MM-DD')}
intent={error && Intent.DANGER} popoverProps={{ minimal: true, position: Position.BOTTOM_LEFT }}
helperText={<ErrorMessage name={'fromDate'} />} maxDate={FINANCIAL_REPORT_MAX_DATE}
> canClearSelection={false}
<DateInput minimal
{...momentFormatter('YYYY-MM-DD')} fill
value={value} />
onChange={(selectedDate) => { </FFormGroup>
setFieldValue('fromDate', selectedDate);
}}
popoverProps={{ minimal: true, position: Position.BOTTOM }}
canClearSelection={false}
minimal={true}
fill={true}
maxDate={FINANCIAL_REPORT_MAX_DATE}
/>
</FormGroup>
)}
</FastField>
</Col> </Col>
<Col xs={4}> <Col xs={4}>
<FastField name={'toDate'}> <FFormGroup
{({ name={'toDate'}
form: { setFieldValue }, label={intl.get('to_date')}
field: { value }, labelInfo={<Hint />}
meta: { error }, fill
}) => ( fastField
<FormGroup >
label={intl.get('to_date')} <FDateInput
labelInfo={<Hint />} name={'toDate'}
fill={true} {...momentFormatter('YYYY-MM-DD')}
intent={error && Intent.DANGER} popoverProps={{ minimal: true, position: Position.BOTTOM }}
helperText={<ErrorMessage name={'toDate'} />} canClearSelection={false}
> fill
<DateInput minimal
{...momentFormatter('YYYY-MM-DD')} maxDate={FINANCIAL_REPORT_MAX_DATE}
value={value} />
onChange={(selectedDate) => { </FFormGroup>
setFieldValue('toDate', selectedDate);
}}
popoverProps={{ minimal: true, position: Position.BOTTOM }}
canClearSelection={false}
fill={true}
minimal={true}
intent={error && Intent.DANGER}
maxDate={FINANCIAL_REPORT_MAX_DATE}
/>
</FormGroup>
)}
</FastField>
</Col> </Col>
</Row> </Row>
</> </>

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

@@ -1,13 +1,7 @@
// @ts-nocheck // @ts-nocheck
import React from 'react'; import React from 'react';
import { useFormikContext, FastField, ErrorMessage } from 'formik'; import { useFormikContext, FastField, ErrorMessage } from 'formik';
import { import { FormGroup, Classes, Checkbox, ControlGroup } from '@blueprintjs/core';
FormGroup,
Classes,
TextArea,
Checkbox,
ControlGroup,
} from '@blueprintjs/core';
import { import {
AccountsSelect, AccountsSelect,
MoneyInputGroup, MoneyInputGroup,
@@ -16,6 +10,7 @@ import {
Hint, Hint,
InputPrependText, InputPrependText,
FFormGroup, FFormGroup,
FTextArea,
} from '@/components'; } from '@/components';
import { FormattedMessage as T } from '@/components'; import { FormattedMessage as T } from '@/components';
@@ -130,28 +125,22 @@ function ItemFormBody({ organization: { base_currency } }) {
/> />
</FFormGroup> </FFormGroup>
<FastField <FFormGroup
name={'sell_description'} name={'sell_description'}
label={<T id={'description'} />}
inline={true}
sellable={values.sellable} sellable={values.sellable}
shouldUpdate={sellDescriptionFieldShouldUpdate} shouldUpdate={sellDescriptionFieldShouldUpdate}
fastField
> >
{({ form: { values }, field, meta: { error, touched } }) => ( <FTextArea
<FormGroup name={'sell_description'}
label={<T id={'description'} />} growVertically={true}
className={'form-group--sell-description'} height={280}
intent={inputIntent({ error, touched })} disabled={!values.sellable}
helperText={<ErrorMessage name={'description'} />} fastField
inline={true} />
> </FFormGroup>
<TextArea
growVertically={true}
height={280}
{...field}
disabled={!values.sellable}
/>
</FormGroup>
)}
</FastField>
</Col> </Col>
<Col xs={6}> <Col xs={6}>
@@ -246,28 +235,22 @@ function ItemFormBody({ organization: { base_currency } }) {
/> />
</FFormGroup> </FFormGroup>
<FastField <FFormGroup
name={'purchase_description'} name={'purchase_description'}
label={<T id={'description'} />}
className={'form-group--purchase-description'}
helperText={<ErrorMessage name={'description'} />}
inline={true}
purchasable={values.purchasable} purchasable={values.purchasable}
shouldUpdate={purchaseDescFieldShouldUpdate} shouldUpdate={purchaseDescFieldShouldUpdate}
> >
{({ form: { values }, field, meta: { error, touched } }) => ( <FTextArea
<FormGroup name={'purchase_description'}
label={<T id={'description'} />} growVertically={true}
className={'form-group--purchase-description'} height={280}
intent={inputIntent({ error, touched })} disabled={!values.purchasable}
helperText={<ErrorMessage name={'description'} />} />
inline={true} </FFormGroup>
>
<TextArea
growVertically={true}
height={280}
{...field}
disabled={!values.purchasable}
/>
</FormGroup>
)}
</FastField>
</Col> </Col>
</Row> </Row>
</div> </div>

60
packages/webapp/src/containers/Items/ItemFormPrimarySection.tsx
View File

@@ -2,7 +2,6 @@
import React, { useEffect, useRef } from 'react'; import React, { useEffect, useRef } from 'react';
import { import {
FormGroup, FormGroup,
InputGroup,
RadioGroup, RadioGroup,
Classes, Classes,
Radio, Radio,
@@ -20,6 +19,7 @@ import {
FormattedHTMLMessage, FormattedHTMLMessage,
FFormGroup, FFormGroup,
FSelect, FSelect,
FInputGroup,
} from '@/components'; } from '@/components';
import classNames from 'classnames'; import classNames from 'classnames';
@@ -94,44 +94,30 @@ export default function ItemFormPrimarySection() {
<Row> <Row>
<Col xs={7}> <Col xs={7}>
{/*----------- Item name ----------*/} {/*----------- Item name ----------*/}
<FastField name={'name'}> <FFormGroup
{({ field, meta: { error, touched } }) => ( name={'name'}
<FormGroup label={<T id={'item_name'} />}
label={<T id={'item_name'} />} labelInfo={<FieldRequiredHint />}
labelInfo={<FieldRequiredHint />} inline={true}
className={'form-group--item-name'} fastField
intent={inputIntent({ error, touched })} >
helperText={<ErrorMessage name={'name'} />} <FInputGroup
inline={true} name={'name'}
> medium={true}
<InputGroup inputRef={(ref) => (nameFieldRef.current = ref)}
medium={true} fastField
{...field} />
intent={inputIntent({ error, touched })} </FFormGroup>
inputRef={(ref) => (nameFieldRef.current = ref)}
/>
</FormGroup>
)}
</FastField>
{/*----------- SKU ----------*/} {/*----------- SKU ----------*/}
<FastField name={'code'}> <FFormGroup
{({ field, meta: { error, touched } }) => ( name={'code'}
<FormGroup label={<T id={'item_code'} />}
label={<T id={'item_code'} />} inline={true}
className={'form-group--item_code'} fastField
intent={inputIntent({ error, touched })} >
helperText={<ErrorMessage name={'code'} />} <FInputGroup name={'code'} medium={true} fastField />
inline={true} </FFormGroup>
>
<InputGroup
medium={true}
intent={inputIntent({ error, touched })}
{...field}
/>
</FormGroup>
)}
</FastField>
{/*----------- Item category ----------*/} {/*----------- Item category ----------*/}
<FFormGroup <FFormGroup

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

@@ -127,34 +127,26 @@ function BillFormHeader() {
</FastField> </FastField>
{/* ------- Bill number ------- */} {/* ------- Bill number ------- */}
<FastField name={'bill_number'}> <FFormGroup
{({ field, meta: { error, touched } }) => ( name={'bill_number'}
<FormGroup label={<T id={'bill_number'} />}
label={<T id={'bill_number'} />} inline
inline={true} fill
className={('form-group--bill_number', CLASSES.FILL)} fastField
intent={inputIntent({ error, touched })} >
helperText={<ErrorMessage name="bill_number" />} <FInputGroup name={'bill_number'} minimal={true} fastField />
> </FFormGroup>
<InputGroup minimal={true} {...field} />
</FormGroup>
)}
</FastField>
{/* ------- Reference ------- */} {/* ------- Reference ------- */}
<FastField name={'reference_no'}> <FFormGroup
{({ field, meta: { error, touched } }) => ( name={'reference_no'}
<FormGroup label={<T id={'reference'} />}
label={<T id={'reference'} />} inline={true}
inline={true} fill
className={classNames('form-group--reference', CLASSES.FILL)} fastField
intent={inputIntent({ error, touched })} >
helperText={<ErrorMessage name="reference" />} <FInputGroup name={'reference_no'} minimal={true} fastField />
> </FFormGroup>
<InputGroup minimal={true} {...field} />
</FormGroup>
)}
</FastField>
{/*------------ Project name -----------*/} {/*------------ Project name -----------*/}
<FeatureCan feature={Features.Projects}> <FeatureCan feature={Features.Projects}>

130
packages/webapp/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormHeaderFields.tsx
View File

@@ -23,6 +23,7 @@ import {
VendorDrawerLink, VendorDrawerLink,
VendorsSelect, VendorsSelect,
Stack, Stack,
FDateInput,
} from '@/components'; } from '@/components';
import { import {
vendorsFieldShouldUpdate, vendorsFieldShouldUpdate,
@@ -108,86 +109,63 @@ function VendorCreditNoteFormHeaderFields({
name={'exchange_rate'} name={'exchange_rate'}
formGroupProps={{ label: ' ', inline: true }} formGroupProps={{ label: ' ', inline: true }}
/> />
{/* ------- Vendor Credit date ------- */} {/* ------- Vendor Credit date ------- */}
<FastField name={'vendor_credit_date'}> <FFormGroup
{({ form, field: { value }, meta: { error, touched } }) => ( name={'vendor_credit_date'}
<FormGroup label={<T id={'credit_note.label_credit_note_date'} />}
label={<T id={'credit_note.label_credit_note_date'} />} inline
inline={true} labelInfo={<FieldRequiredHint />}
labelInfo={<FieldRequiredHint />} fill
className={classNames( fastField
'form-group--vendor_credit_date', >
CLASSES.FILL, <FDateInput
)} name={'vendor_credit_date'}
intent={inputIntent({ error, touched })} {...momentFormatter('YYYY/MM/DD')}
helperText={<ErrorMessage name="vendor_credit_date" />} popoverProps={{ position: Position.BOTTOM_LEFT, minimal: true }}
> inputProps={{ leftIcon: <Icon icon={'date-range'} />, fill: true }}
<DateInput fill
{...momentFormatter('YYYY/MM/DD')} fastField
value={tansformDateValue(value)} />
onChange={handleDateChange((formattedDate) => { </FFormGroup>
form.setFieldValue('vendor_credit_date', formattedDate);
})}
popoverProps={{ position: Position.BOTTOM_LEFT, minimal: true }}
inputProps={{
leftIcon: <Icon icon={'date-range'} />,
}}
/>
</FormGroup>
)}
</FastField>
{/* ----------- Vendor Credit No # ----------- */} {/* ----------- Vendor Credit No # ----------- */}
<FastField name={'vendor_credit_number'}>
{({ form, field, meta: { error, touched } }) => ( <FFormGroup
<FormGroup name={'vendor_credit_number'}
label={<T id={'credit_note.label_credit_note'} />} label={<T id={'credit_note.label_credit_note'} />}
inline={true} inline={true}
labelInfo={<FieldRequiredHint />} labelInfo={<FieldRequiredHint />}
className={('form-group--vendor_credit_number', CLASSES.FILL)} fastField
intent={inputIntent({ error, touched })} >
helperText={<ErrorMessage name="vendor_credit_number" />} <ControlGroup fill={true}>
> <FInputGroup
<ControlGroup fill={true}> name={'vendor_credit_number'}
<InputGroup minimal={true}
minimal={true} asyncControl={true}
value={field.value} onBlur={handleVendorCreditNoBlur}
asyncControl={true} fastField
onBlur={handleVendorCreditNoBlur(form, field)} />
/> <InputPrependButton
<InputPrependButton buttonProps={{
buttonProps={{ onClick: handleVendorCreditNumberChange,
onClick: handleVendorCreditNumberChange, icon: <Icon icon={'settings-18'} />,
icon: <Icon icon={'settings-18'} />, }}
}} tooltip={true}
tooltip={true} tooltipProps={{
tooltipProps={{ content: (
content: ( <T id={'setting_your_auto_generated_vendor_credit_number'} />
<T ),
id={'setting_your_auto_generated_vendor_credit_number'} position: Position.BOTTOM_LEFT,
/> }}
), />
position: Position.BOTTOM_LEFT, </ControlGroup>
}} </FFormGroup>
/>
</ControlGroup>
</FormGroup>
)}
</FastField>
{/* ----------- Reference ----------- */} {/* ----------- Reference ----------- */}
<FastField name={'reference_no'}> <FFormGroup label={<T id={'reference_no'} />} inline={true} fastField>
{({ field, meta: { error, touched } }) => ( <FInputGroup name={'reference_no'} minimal={true} fastField />
<FormGroup </FFormGroup>
label={<T id={'reference_no'} />}
inline={true}
className={classNames('form-group--reference', CLASSES.FILL)}
intent={inputIntent({ error, touched })}
helperText={<ErrorMessage name="reference_no" />}
>
<InputGroup minimal={true} {...field} />
</FormGroup>
)}
</FastField>
</Stack> </Stack>
); );
} }

66
packages/webapp/src/containers/Purchases/PaymentsMade/PaymentForm/PaymentMadeFormHeaderFields.tsx
View File

@@ -17,6 +17,7 @@ import { css } from '@emotion/css';
import { Theme, useTheme } from '@emotion/react'; import { Theme, useTheme } from '@emotion/react';
import { import {
FDateInput,
FInputGroup, FInputGroup,
FMoneyInputGroup, FMoneyInputGroup,
Stack, Stack,
@@ -117,30 +118,22 @@ function PaymentMadeFormHeaderFields({ organization: { base_currency } }) {
/> />
{/* ------------ Payment date ------------ */} {/* ------------ Payment date ------------ */}
<FastField name={'payment_date'}> <FFormGroup
{({ form, field: { value }, meta: { error, touched } }) => ( name={'payment_date'}
<FormGroup label={<T id={'payment_date'} />}
label={<T id={'payment_date'} />} labelInfo={<FieldRequiredHint />}
inline={true} inline
labelInfo={<FieldRequiredHint />} fill
className={classNames('form-group--select-list', Classes.FILL)} fastField
intent={inputIntent({ error, touched })} >
helperText={<ErrorMessage name="payment_date" />} <FDateInput
> name={'payment_date'}
<DateInput {...momentFormatter('YYYY/MM/DD')}
{...momentFormatter('YYYY/MM/DD')} popoverProps={{ position: Position.BOTTOM, minimal: true }}
value={tansformDateValue(value)} inputProps={{ leftIcon: <Icon icon={'date-range'} />, fill: true }}
onChange={handleDateChange((formattedDate) => { fastField
form.setFieldValue('payment_date', formattedDate); />
})} </FFormGroup>
popoverProps={{ position: Position.BOTTOM, minimal: true }}
inputProps={{
leftIcon: <Icon icon={'date-range'} />,
}}
/>
</FormGroup>
)}
</FastField>
{/* ------------ Full amount ------------ */} {/* ------------ Full amount ------------ */}
<FFormGroup <FFormGroup
@@ -173,23 +166,14 @@ function PaymentMadeFormHeaderFields({ organization: { base_currency } }) {
</FFormGroup> </FFormGroup>
{/* ------------ Payment number ------------ */} {/* ------------ Payment number ------------ */}
<FastField name={'payment_number'}> <FFormGroup
{({ form, field, meta: { error, touched } }) => ( name={'payment_number'}
<FormGroup label={<T id={'payment_no'} />}
label={<T id={'payment_no'} />} inline={true}
inline={true} fastField
className={('form-group--payment_number', Classes.FILL)} >
intent={inputIntent({ error, touched })} <FInputGroup name={'payment_number'} minimal={true} fastField />
helperText={<ErrorMessage name="payment_number" />} </FFormGroup>
>
<InputGroup
intent={inputIntent({ error, touched })}
minimal={true}
{...field}
/>
</FormGroup>
)}
</FastField>
{/* ------------ Payment account ------------ */} {/* ------------ Payment account ------------ */}
<FFormGroup <FFormGroup