QT/bigcapital
1
0
Fork 0
mirror of https://github.com/bigcapitalhq/bigcapital.git synced 2026-02-18 05:40:31 +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

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>
</>