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

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

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

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

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

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

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

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

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

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

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

@@ -1,11 +1,16 @@
// @ts-nocheck
import React from 'react';
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 classNames from 'classnames';
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 {
inputIntent,
@@ -50,25 +55,20 @@ export default function LockingTransactionsFormFields() {
</FastField>
{/*------------ Locking Reason -----------*/}
<FastField name={'reason'}>
{({ field, meta: { error, touched } }) => (
<FormGroup
label={<T id={'locking_transactions.dialog.reason'} />}
labelInfo={<FieldRequiredHint />}
className={'form-group--reason'}
intent={inputIntent({ error, touched })}
helperText={<ErrorMessage name={'reason'} />}
>
<TextArea
growVertically={true}
large={true}
intent={inputIntent({ error, touched })}
inputRef={(ref) => (reasonFieldRef.current = ref)}
{...field}
/>
</FormGroup>
)}
</FastField>
<FFormGroup
name={'reason'}
label={<T id={'locking_transactions.dialog.reason'} />}
labelInfo={<FieldRequiredHint />}
fastField
>
<FTextArea
name={'reason'}
growVertically={true}
large={true}
inputRef={(ref) => (reasonFieldRef.current = ref)}
fastField
/>
</FFormGroup>
</div>
);
}

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

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

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

@@ -1,8 +1,6 @@
// @ts-nocheck
import React from 'react';
import { FastField, Field } from 'formik';
import { DateInput } from '@blueprintjs/datetime';
import { Intent, FormGroup, InputGroup, Position } from '@blueprintjs/core';
import { Position } from '@blueprintjs/core';
import FinancialStatementsFilter from '../FinancialStatementsFilter';
import {
FormattedMessage as T,
@@ -12,6 +10,7 @@ import {
FInputGroup,
FFormGroup,
CustomersMultiSelect,
FDateInput,
} from '@/components';
import { momentFormatter } from '@/utils';
import { useARAgingSummaryGeneralContext } from './ARAgingSummaryGeneralProvider';
@@ -28,48 +27,35 @@ export default function ARAgingSummaryHeaderGeneralContent() {
<div>
<Row>
<Col xs={5}>
<FastField name={'asDate'}>
{({ form, field: { value }, meta: { error, touched } }) => (
<FormGroup
label={<T id={'as_date'} />}
labelInfo={<FieldHint />}
fill={true}
intent={error && Intent.DANGER}
>
<DateInput
{...momentFormatter('YYYY/MM/DD')}
value={value}
onChange={(selectedDate) => {
form.setFieldValue('asDate', selectedDate);
}}
popoverProps={{ position: Position.BOTTOM, minimal: true }}
minimal={true}
fill={true}
/>
</FormGroup>
)}
</FastField>
<FFormGroup
name={'asDate'}
label={<T id={'as_date'} />}
labelInfo={<FieldHint />}
fill
fastField
>
<FDateInput
name={'asDate'}
{...momentFormatter('YYYY/MM/DD')}
popoverProps={{ position: Position.BOTTOM_LEFT, minimal: true }}
minimal
fill
fastField
/>
</FFormGroup>
</Col>
</Row>
<Row>
<Col xs={5}>
<FastField name={'agingDaysBefore'}>
{({ field, meta: { error, touched } }) => (
<FormGroup
label={<T id={'aging_before_days'} />}
labelInfo={<FieldHint />}
className={'form-group--aging-before-days'}
intent={error && Intent.DANGER}
>
<InputGroup
medium={true}
intent={error && Intent.DANGER}
{...field}
/>
</FormGroup>
)}
</FastField>
<FFormGroup
name={'agingDaysBefore'}
label={<T id={'aging_before_days'} />}
labelInfo={<FieldHint />}
fastField
>
<FInputGroup name={'agingDaysBefore'} medium={true} fastField />
</FFormGroup>
</Col>
</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 moment from 'moment';
import { FastField, ErrorMessage } from 'formik';
import { HTMLSelect, FormGroup, Intent, Position } from '@blueprintjs/core';
import { DateInput } from '@blueprintjs/datetime';
import { HTMLSelect, FormGroup, Position } from '@blueprintjs/core';
import { Row, Col, Hint } from '@/components';
import { Row, Col, Hint, FDateInput, FFormGroup } from '@/components';
import { momentFormatter, parseDateRangeQuery } from '@/utils';
import { dateRangeOptions } from './constants';
@@ -60,66 +59,43 @@ export default function FinancialStatementDateRange() {
<Row>
<Col xs={4}>
<FastField name={'fromDate'}>
{({
form: { setFieldValue },
field: { value },
meta: { error, touched },
}) => (
<FormGroup
label={intl.get('from_date')}
labelInfo={<Hint />}
fill={true}
intent={error && Intent.DANGER}
helperText={<ErrorMessage name={'fromDate'} />}
>
<DateInput
{...momentFormatter('YYYY-MM-DD')}
value={value}
onChange={(selectedDate) => {
setFieldValue('fromDate', selectedDate);
}}
popoverProps={{ minimal: true, position: Position.BOTTOM }}
canClearSelection={false}
minimal={true}
fill={true}
maxDate={FINANCIAL_REPORT_MAX_DATE}
/>
</FormGroup>
)}
</FastField>
<FFormGroup
name={'fromDate'}
label={intl.get('from_date')}
labelInfo={<Hint />}
fill
fastField
>
<FDateInput
name={'fromDate'}
{...momentFormatter('YYYY-MM-DD')}
popoverProps={{ minimal: true, position: Position.BOTTOM_LEFT }}
maxDate={FINANCIAL_REPORT_MAX_DATE}
canClearSelection={false}
minimal
fill
/>
</FFormGroup>
</Col>
<Col xs={4}>
<FastField name={'toDate'}>
{({
form: { setFieldValue },
field: { value },
meta: { error },
}) => (
<FormGroup
label={intl.get('to_date')}
labelInfo={<Hint />}
fill={true}
intent={error && Intent.DANGER}
helperText={<ErrorMessage name={'toDate'} />}
>
<DateInput
{...momentFormatter('YYYY-MM-DD')}
value={value}
onChange={(selectedDate) => {
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>
<FFormGroup
name={'toDate'}
label={intl.get('to_date')}
labelInfo={<Hint />}
fill
fastField
>
<FDateInput
name={'toDate'}
{...momentFormatter('YYYY-MM-DD')}
popoverProps={{ minimal: true, position: Position.BOTTOM }}
canClearSelection={false}
fill
minimal
maxDate={FINANCIAL_REPORT_MAX_DATE}
/>
</FFormGroup>
</Col>
</Row>
</>

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

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

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

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

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

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

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

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