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

Merge pull request #707 from bigcapitalhq/refactor-date-field

Browse Source 
refactor: invoice, estimate, receipt, credit note and payment received date input fields
This commit is contained in:
Ahmed Bouhuolia
2024-10-13 18:03:36 +02:00
committed by GitHub
parent 3300a6a499 28ac9b2d90
commit 5b5ab9fe1e
5 changed files with 160 additions and 227 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormHeaderFields.tsx
View File

@@ -17,18 +17,13 @@ import {
FFormGroup, FFormGroup,
CustomersSelect, CustomersSelect,
Stack, Stack,
FDateInput,
} from '@/components'; } from '@/components';
import { customerNameFieldShouldUpdate } from './utils'; import { customerNameFieldShouldUpdate } from './utils';
import { useCreditNoteFormContext } from './CreditNoteFormProvider'; import { useCreditNoteFormContext } from './CreditNoteFormProvider';
import { CreditNoteExchangeRateInputField } from './components'; import { CreditNoteExchangeRateInputField } from './components';
import { CreditNoteTransactionNoField } from './CreditNoteTransactionNoField'; import { CreditNoteTransactionNoField } from './CreditNoteTransactionNoField';
import {
momentFormatter,
tansformDateValue,
inputIntent,
handleDateChange,
} from '@/utils';
import { useCustomerUpdateExRate } from '@/containers/Entries/withExRateItemEntriesPriceRecalc'; import { useCustomerUpdateExRate } from '@/containers/Entries/withExRateItemEntriesPriceRecalc';
const getCreditNoteFieldsStyle = (theme: Theme) => css` const getCreditNoteFieldsStyle = (theme: Theme) => css`
@@ -63,30 +58,26 @@ export default function CreditNoteFormHeaderFields() {
<CreditNoteExchangeRateInputField /> <CreditNoteExchangeRateInputField />
{/* ----------- Credit note date ----------- */} {/* ----------- Credit note date ----------- */}
<FastField name={'credit_note_date'}> <FFormGroup
{({ form, field: { value }, meta: { error, touched } }) => ( name={'credit_note_date'}
<FormGroup
label={<T id={'credit_note.label_credit_note_date'} />} label={<T id={'credit_note.label_credit_note_date'} />}
inline={true}
labelInfo={<FieldRequiredHint />} labelInfo={<FieldRequiredHint />}
className={classNames('form-group--credit_note_date', CLASSES.FILL)} inline
intent={inputIntent({ error, touched })} fastField
helperText={<ErrorMessage name="credit_note_date" />}
> >
<DateInput <FDateInput
{...momentFormatter('YYYY/MM/DD')} name={'credit_note_date'}
value={tansformDateValue(value)} formatDate={(date) => date.toLocaleDateString()}
onChange={handleDateChange((formattedDate) => { parseDate={(str) => new Date(str)}
form.setFieldValue('credit_note_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'} />,
fill: true
}} }}
fill
fastField
/> />
</FormGroup> </FFormGroup>
)}
</FastField>
{/* ----------- Credit note # ----------- */} {/* ----------- Credit note # ----------- */}
<CreditNoteTransactionNoField /> <CreditNoteTransactionNoField />

78
packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateFormHeaderFields.tsx
View File

@@ -1,9 +1,8 @@
// @ts-nocheck // @ts-nocheck
import styled from 'styled-components'; import styled from 'styled-components';
import classNames from 'classnames'; import classNames from 'classnames';
import { FormGroup, Position, Classes } from '@blueprintjs/core'; import { Position, Classes } from '@blueprintjs/core';
import { DateInput } from '@blueprintjs/datetime'; import { useFormikContext } from 'formik';
import { FastField, ErrorMessage, useFormikContext } from 'formik';
import { css } from '@emotion/css'; import { css } from '@emotion/css';
import { import {
FeatureCan, FeatureCan,
@@ -15,15 +14,9 @@ import {
CustomersSelect, CustomersSelect,
FInputGroup, FInputGroup,
Stack, Stack,
FDateInput,
} from '@/components'; } from '@/components';
import {
momentFormatter,
tansformDateValue,
inputIntent,
handleDateChange,
} from '@/utils';
import { customersFieldShouldUpdate } from './utils'; import { customersFieldShouldUpdate } from './utils';
import { CLASSES } from '@/constants/classes';
import { Features } from '@/constants'; import { Features } from '@/constants';
import { ProjectsSelect } from '@/containers/Projects/components'; import { ProjectsSelect } from '@/containers/Projects/components';
import { import {
@@ -70,60 +63,47 @@ export default function EstimateFormHeader() {
<EstimateExchangeRateInputField /> <EstimateExchangeRateInputField />
{/* ----------- Estimate Date ----------- */} {/* ----------- Estimate Date ----------- */}
<FastField name={'estimate_date'}> <FFormGroup
{({ form, field: { value }, meta: { error, touched } }) => ( name={'estimate_date'}
<FormGroup
label={<T id={'estimate_date'} />} label={<T id={'estimate_date'} />}
inline={true}
labelInfo={<FieldRequiredHint />} labelInfo={<FieldRequiredHint />}
className={classNames(CLASSES.FILL, 'form-group--estimate-date')} inline
intent={inputIntent({ error, touched })} fastField
helperText={<ErrorMessage name="estimate_date" />}
> >
<DateInput <FDateInput
{...momentFormatter('YYYY/MM/DD')} name={'estimate_date'}
value={tansformDateValue(value)} formatDate={(date) => date.toLocaleDateString()}
onChange={handleDateChange((formattedDate) => { parseDate={(str) => new Date(str)}
form.setFieldValue('estimate_date', formattedDate); popoverProps={{ position: Position.BOTTOM_LEFT, minimal: true }}
})}
popoverProps={{ position: Position.BOTTOM, minimal: true }}
inputProps={{ inputProps={{
leftIcon: <Icon icon={'date-range'} />, leftIcon: <Icon icon={'date-range'} />,
fill: true,
}} }}
fill
fastField
/> />
</FormGroup> </FFormGroup>
)}
</FastField>
{/* ----------- Expiration date ----------- */} {/* ----------- Expiration date ----------- */}
<FastField name={'expiration_date'}> <FFormGroup
{({ form, field: { value }, meta: { error, touched } }) => ( name={'expiration_date'}
<FormGroup
label={<T id={'expiration_date'} />} label={<T id={'expiration_date'} />}
labelInfo={<FieldRequiredHint />} inline
inline={true} fastField
className={classNames(
CLASSES.FORM_GROUP_LIST_SELECT,
CLASSES.FILL,
'form-group--expiration-date',
)}
intent={inputIntent({ error, touched })}
helperText={<ErrorMessage name="expiration_date" />}
> >
<DateInput <FDateInput
{...momentFormatter('YYYY/MM/DD')} name={'expiration_date'}
value={tansformDateValue(value)} formatDate={(date) => date.toLocaleDateString()}
onChange={handleDateChange((formattedDate) => { parseDate={(str) => new Date(str)}
form.setFieldValue('expiration_date', formattedDate); popoverProps={{ position: Position.BOTTOM_LEFT, minimal: true }}
})}
popoverProps={{ position: Position.BOTTOM, minimal: true }}
inputProps={{ inputProps={{
leftIcon: <Icon icon={'date-range'} />, leftIcon: <Icon icon={'date-range'} />,
fill: true,
}} }}
fill
fastField
/> />
</FormGroup> </FFormGroup>
)}
</FastField>
{/* ----------- Estimate number ----------- */} {/* ----------- Estimate number ----------- */}
<EstimateFormEstimateNumberField /> <EstimateFormEstimateNumberField />

73
packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormHeaderFields.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 { FormGroup, Position, Classes } from '@blueprintjs/core'; import { Position, Classes } from '@blueprintjs/core';
import { DateInput } from '@blueprintjs/datetime'; import { useFormikContext } from 'formik';
import { FastField, ErrorMessage, useFormikContext } from 'formik';
import { css } from '@emotion/css'; import { css } from '@emotion/css';
import { Theme, useTheme } from '@emotion/react'; import { Theme, useTheme } from '@emotion/react';
@@ -16,20 +15,14 @@ import {
FeatureCan, FeatureCan,
CustomersSelect, CustomersSelect,
Stack, Stack,
Group,
FInputGroup, FInputGroup,
Icon, Icon,
FDateInput,
} from '@/components'; } from '@/components';
import {
momentFormatter,
tansformDateValue,
inputIntent,
handleDateChange,
} from '@/utils';
import { CLASSES } from '@/constants/classes';
import { customerNameFieldShouldUpdate } from './utils'; import { customerNameFieldShouldUpdate } from './utils';
import { useInvoiceFormContext } from './InvoiceFormProvider'; import { useInvoiceFormContext } from './InvoiceFormProvider';
import { useCustomerUpdateExRate } from '@/containers/Entries/withExRateItemEntriesPriceRecalc';
import { import {
InvoiceExchangeRateInputField, InvoiceExchangeRateInputField,
InvoiceProjectSelectButton, InvoiceProjectSelectButton,
@@ -40,7 +33,6 @@ import {
ProjectBillableEntriesLink, ProjectBillableEntriesLink,
} from '@/containers/Projects/components'; } from '@/containers/Projects/components';
import { Features } from '@/constants'; import { Features } from '@/constants';
import { useCustomerUpdateExRate } from '@/containers/Entries/withExRateItemEntriesPriceRecalc';
const getInvoiceFieldsStyle = (theme: Theme) => css` const getInvoiceFieldsStyle = (theme: Theme) => css`
.${theme.bpPrefix}-form-group { .${theme.bpPrefix}-form-group {
@@ -77,62 +69,55 @@ export default function InvoiceFormHeaderFields() {
<InvoiceExchangeRateInputField /> <InvoiceExchangeRateInputField />
{/* ----------- Invoice date ----------- */} {/* ----------- Invoice date ----------- */}
<FastField name={'invoice_date'}> <FFormGroup
{({ form, field: { value }, meta: { error, touched } }) => ( name={'invoice_date'}
<FormGroup
label={<T id={'invoice_date'} />} label={<T id={'invoice_date'} />}
inline={true}
labelInfo={<FieldRequiredHint />} labelInfo={<FieldRequiredHint />}
className={classNames(CLASSES.FILL)} inline
intent={inputIntent({ error, touched })} fastField
helperText={<ErrorMessage name="invoice_date" />}
> >
<DateInput <FDateInput
{...momentFormatter('YYYY/MM/DD')} name={'invoice_date'}
value={tansformDateValue(value)} formatDate={(date) => date.toLocaleDateString()}
onChange={handleDateChange((formattedDate) => { parseDate={(str) => new Date(str)}
form.setFieldValue('invoice_date', formattedDate);
})}
popoverProps={{ popoverProps={{
position: Position.BOTTOM_LEFT, position: Position.BOTTOM_LEFT,
minimal: true, minimal: true,
fill: true,
}} }}
inputProps={{ inputProps={{
leftIcon: <Icon icon={'date-range'} />, 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'} />}
labelInfo={<FieldRequiredHint />} labelInfo={<FieldRequiredHint />}
inline={true} inline
className={classNames(CLASSES.FILL)} fastField
intent={inputIntent({ error, touched })}
helperText={<ErrorMessage name="due_date" />}
> >
<DateInput <FDateInput
{...momentFormatter('YYYY/MM/DD')} name={'due_date'}
value={tansformDateValue(value)} formatDate={(date) => date.toLocaleDateString()}
onChange={handleDateChange((formattedDate) => { parseDate={(str) => new Date(str)}
form.setFieldValue('due_date', formattedDate);
})}
popoverProps={{ popoverProps={{
position: Position.BOTTOM_LEFT, position: Position.BOTTOM_LEFT,
minimal: true, minimal: true,
fill: true,
}} }}
inputProps={{ inputProps={{
leftIcon: <Icon icon={'date-range'} />, leftIcon: <Icon icon={'date-range'} />,
fill: true,
}} }}
fill
fastField
/> />
</FormGroup> </FFormGroup>
)}
</FastField>
{/* ----------- Invoice number ----------- */} {/* ----------- Invoice number ----------- */}
<InvoiceFormInvoiceNumberField /> <InvoiceFormInvoiceNumberField />

46
packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceiveForm/PaymentReceiveHeaderFields.tsx
View File

@@ -3,16 +3,14 @@ import React, { useMemo } from 'react';
import classNames from 'classnames'; import classNames from 'classnames';
import styled from 'styled-components'; import styled from 'styled-components';
import { import {
FormGroup,
InputGroup, InputGroup,
Position, Position,
Classes, Classes,
ControlGroup, ControlGroup,
Button, Button,
} from '@blueprintjs/core'; } from '@blueprintjs/core';
import { DateInput } from '@blueprintjs/datetime';
import { isEmpty, toSafeInteger } from 'lodash'; import { isEmpty, toSafeInteger } from 'lodash';
import { FastField, useFormikContext, ErrorMessage } from 'formik'; import { useFormikContext } from 'formik';
import { css } from '@emotion/css'; import { css } from '@emotion/css';
import { Theme, useTheme } from '@emotion/react'; import { Theme, useTheme } from '@emotion/react';
@@ -22,15 +20,9 @@ import {
FormattedMessage as T, FormattedMessage as T,
FMoneyInputGroup, FMoneyInputGroup,
Stack, Stack,
FDateInput,
} from '@/components'; } from '@/components';
import { CLASSES } from '@/constants/classes'; import { safeSumBy } from '@/utils';
import {
safeSumBy,
momentFormatter,
tansformDateValue,
handleDateChange,
inputIntent,
} from '@/utils';
import { import {
FFormGroup, FFormGroup,
AccountsSelect, AccountsSelect,
@@ -58,7 +50,6 @@ import {
import { Features } from '@/constants'; import { Features } from '@/constants';
import { PaymentReceivePaymentNoField } from './PaymentReceivePaymentNoField'; import { PaymentReceivePaymentNoField } from './PaymentReceivePaymentNoField';
const getHeaderFieldsStyle = (theme: Theme) => css` const getHeaderFieldsStyle = (theme: Theme) => css`
.${theme.bpPrefix}-form-group { .${theme.bpPrefix}-form-group {
margin-bottom: 0; margin-bottom: 0;
@@ -120,31 +111,28 @@ export default function PaymentReceiveHeaderFields() {
name={'exchange_rate'} name={'exchange_rate'}
formGroupProps={{ label: ' ', inline: true }} formGroupProps={{ label: ' ', inline: true }}
/> />
{/* ------------- 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'} />}
inline={true}
labelInfo={<FieldRequiredHint />} labelInfo={<FieldRequiredHint />}
className={classNames('form-group--select-list', CLASSES.FILL)} inline
intent={inputIntent({ error, touched })} fastField
helperText={<ErrorMessage name="payment_date" />}
> >
<DateInput <FDateInput
{...momentFormatter('YYYY/MM/DD')} name={'payment_date'}
value={tansformDateValue(value)} formatDate={(date) => date.toLocaleDateString()}
onChange={handleDateChange((formattedDate) => { parseDate={(str) => new Date(str)}
form.setFieldValue('payment_date', formattedDate); popoverProps={{ position: Position.BOTTOM_LEFT, minimal: true }}
})}
popoverProps={{ position: Position.BOTTOM, minimal: true }}
inputProps={{ inputProps={{
leftIcon: <Icon icon={'date-range'} />, leftIcon: <Icon icon={'date-range'} />,
fill: true,
}} }}
fill
fastField
/> />
</FormGroup> </FFormGroup>
)}
</FastField>
{/* ------------ Full amount ------------ */} {/* ------------ Full amount ------------ */}
<FFormGroup <FFormGroup

43
packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormHeaderFields.tsx
View File

@@ -2,13 +2,11 @@
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, Position, Classes } from '@blueprintjs/core'; import { Position, Classes } from '@blueprintjs/core';
import { DateInput } from '@blueprintjs/datetime';
import { css } from '@emotion/css'; import { css } from '@emotion/css';
import { Theme, useTheme } from '@emotion/react'; import { Theme, useTheme } from '@emotion/react';
import { CLASSES } from '@/constants/classes';
import { ACCOUNT_TYPE } from '@/constants/accountTypes'; import { ACCOUNT_TYPE } from '@/constants/accountTypes';
import { Features } from '@/constants'; import { Features } from '@/constants';
import { import {
@@ -22,14 +20,9 @@ import {
FeatureCan, FeatureCan,
FInputGroup, FInputGroup,
Stack, Stack,
FDateInput,
} from '@/components'; } from '@/components';
import { ProjectsSelect } from '@/containers/Projects/components'; import { ProjectsSelect } from '@/containers/Projects/components';
import {
momentFormatter,
tansformDateValue,
handleDateChange,
inputIntent,
} from '@/utils';
import { useReceiptFormContext } from './ReceiptFormProvider'; import { useReceiptFormContext } from './ReceiptFormProvider';
import { accountsFieldShouldUpdate, customersFieldShouldUpdate } from './utils'; import { accountsFieldShouldUpdate, customersFieldShouldUpdate } from './utils';
import { import {
@@ -99,29 +92,25 @@ export default function ReceiptFormHeader() {
</FFormGroup> </FFormGroup>
{/* ----------- Receipt date ----------- */} {/* ----------- Receipt date ----------- */}
<FastField name={'receipt_date'}> <FFormGroup
{({ form, field: { value }, meta: { error, touched } }) => ( name={'receipt_date'}
<FormGroup
label={<T id={'receipt_date'} />} label={<T id={'receipt_date'} />}
inline={true} inline
className={classNames(CLASSES.FILL)} fastField
intent={inputIntent({ error, touched })}
helperText={<ErrorMessage name="receipt_date" />}
> >
<DateInput <FDateInput
{...momentFormatter('YYYY/MM/DD')} name={'receipt_date'}
value={tansformDateValue(value)} formatDate={(date) => date.toLocaleDateString()}
onChange={handleDateChange((formattedDate) => { parseDate={(str) => new Date(str)}
form.setFieldValue('receipt_date', formattedDate); popoverProps={{ position: Position.BOTTOM_LEFT, minimal: true }}
})}
popoverProps={{ position: Position.BOTTOM, minimal: true }}
inputProps={{ inputProps={{
leftIcon: <Icon icon={'date-range'} />, leftIcon: <Icon icon={'date-range'} />,
fill: true,
}} }}
fill
fastField
/> />
</FormGroup> </FFormGroup>
)}
</FastField>
{/* ----------- Receipt number ----------- */} {/* ----------- Receipt number ----------- */}
<ReceiptFormReceiptNumberField /> <ReceiptFormReceiptNumberField />