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

51
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'} />} labelInfo={<FieldRequiredHint />}
inline={true} inline
labelInfo={<FieldRequiredHint />} fastField
className={classNames('form-group--credit_note_date', CLASSES.FILL)} >
intent={inputIntent({ error, touched })} <FDateInput
helperText={<ErrorMessage name="credit_note_date" />} name={'credit_note_date'}
> formatDate={(date) => date.toLocaleDateString()}
<DateInput parseDate={(str) => new Date(str)}
{...momentFormatter('YYYY/MM/DD')} popoverProps={{ position: Position.BOTTOM_LEFT, minimal: true }}
value={tansformDateValue(value)} inputProps={{
onChange={handleDateChange((formattedDate) => { leftIcon: <Icon icon={'date-range'} />,
form.setFieldValue('credit_note_date', formattedDate); fill: true
})} }}
popoverProps={{ position: Position.BOTTOM_LEFT, minimal: true }} fill
inputProps={{ fastField
leftIcon: <Icon icon={'date-range'} />, />
}} </FFormGroup>
/>
</FormGroup>
)}
</FastField>
{/* ----------- Credit note # ----------- */} {/* ----------- Credit note # ----------- */}
<CreditNoteTransactionNoField /> <CreditNoteTransactionNoField />

104
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'} />} labelInfo={<FieldRequiredHint />}
inline={true} inline
labelInfo={<FieldRequiredHint />} fastField
className={classNames(CLASSES.FILL, 'form-group--estimate-date')} >
intent={inputIntent({ error, touched })} <FDateInput
helperText={<ErrorMessage name="estimate_date" />} name={'estimate_date'}
> formatDate={(date) => date.toLocaleDateString()}
<DateInput parseDate={(str) => new Date(str)}
{...momentFormatter('YYYY/MM/DD')} popoverProps={{ position: Position.BOTTOM_LEFT, minimal: true }}
value={tansformDateValue(value)} inputProps={{
onChange={handleDateChange((formattedDate) => { leftIcon: <Icon icon={'date-range'} />,
form.setFieldValue('estimate_date', formattedDate); fill: true,
})} }}
popoverProps={{ position: Position.BOTTOM, minimal: true }} fill
inputProps={{ fastField
leftIcon: <Icon icon={'date-range'} />, />
}} </FFormGroup>
/>
</FormGroup>
)}
</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'} />} inline
labelInfo={<FieldRequiredHint />} fastField
inline={true} >
className={classNames( <FDateInput
CLASSES.FORM_GROUP_LIST_SELECT, name={'expiration_date'}
CLASSES.FILL, formatDate={(date) => date.toLocaleDateString()}
'form-group--expiration-date', parseDate={(str) => new Date(str)}
)} popoverProps={{ position: Position.BOTTOM_LEFT, minimal: true }}
intent={inputIntent({ error, touched })} inputProps={{
helperText={<ErrorMessage name="expiration_date" />} leftIcon: <Icon icon={'date-range'} />,
> fill: true,
<DateInput }}
{...momentFormatter('YYYY/MM/DD')} fill
value={tansformDateValue(value)} fastField
onChange={handleDateChange((formattedDate) => { />
form.setFieldValue('expiration_date', formattedDate); </FFormGroup>
})}
popoverProps={{ position: Position.BOTTOM, minimal: true }}
inputProps={{
leftIcon: <Icon icon={'date-range'} />,
}}
/>
</FormGroup>
)}
</FastField>
{/* ----------- Estimate number ----------- */} {/* ----------- Estimate number ----------- */}
<EstimateFormEstimateNumberField /> <EstimateFormEstimateNumberField />

117
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'} />} labelInfo={<FieldRequiredHint />}
inline={true} inline
labelInfo={<FieldRequiredHint />} fastField
className={classNames(CLASSES.FILL)} >
intent={inputIntent({ error, touched })} <FDateInput
helperText={<ErrorMessage name="invoice_date" />} name={'invoice_date'}
> formatDate={(date) => date.toLocaleDateString()}
<DateInput parseDate={(str) => new Date(str)}
{...momentFormatter('YYYY/MM/DD')} popoverProps={{
value={tansformDateValue(value)} position: Position.BOTTOM_LEFT,
onChange={handleDateChange((formattedDate) => { minimal: true,
form.setFieldValue('invoice_date', formattedDate); fill: true,
})} }}
popoverProps={{ inputProps={{
position: Position.BOTTOM_LEFT, leftIcon: <Icon icon={'date-range'} />,
minimal: true, }}
}} fill
inputProps={{ fastField
leftIcon: <Icon icon={'date-range'} />, />
}} </FFormGroup>
/>
</FormGroup>
)}
</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
inline={true} fastField
className={classNames(CLASSES.FILL)} >
intent={inputIntent({ error, touched })} <FDateInput
helperText={<ErrorMessage name="due_date" />} name={'due_date'}
> formatDate={(date) => date.toLocaleDateString()}
<DateInput parseDate={(str) => new Date(str)}
{...momentFormatter('YYYY/MM/DD')} popoverProps={{
value={tansformDateValue(value)} position: Position.BOTTOM_LEFT,
onChange={handleDateChange((formattedDate) => { minimal: true,
form.setFieldValue('due_date', formattedDate); fill: true,
})} }}
popoverProps={{ inputProps={{
position: Position.BOTTOM_LEFT, leftIcon: <Icon icon={'date-range'} />,
minimal: true, fill: true,
}} }}
inputProps={{ fill
leftIcon: <Icon icon={'date-range'} />, fastField
}} />
/> </FFormGroup>
</FormGroup>
)}
</FastField>
{/* ----------- Invoice number ----------- */} {/* ----------- Invoice number ----------- */}
<InvoiceFormInvoiceNumberField /> <InvoiceFormInvoiceNumberField />

60
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'} />} labelInfo={<FieldRequiredHint />}
inline={true} inline
labelInfo={<FieldRequiredHint />} fastField
className={classNames('form-group--select-list', CLASSES.FILL)} >
intent={inputIntent({ error, touched })} <FDateInput
helperText={<ErrorMessage name="payment_date" />} name={'payment_date'}
> formatDate={(date) => date.toLocaleDateString()}
<DateInput parseDate={(str) => new Date(str)}
{...momentFormatter('YYYY/MM/DD')} popoverProps={{ position: Position.BOTTOM_LEFT, minimal: true }}
value={tansformDateValue(value)} inputProps={{
onChange={handleDateChange((formattedDate) => { leftIcon: <Icon icon={'date-range'} />,
form.setFieldValue('payment_date', formattedDate); fill: true,
})} }}
popoverProps={{ position: Position.BOTTOM, minimal: true }} fill
inputProps={{ fastField
leftIcon: <Icon icon={'date-range'} />, />
}} </FFormGroup>
/>
</FormGroup>
)}
</FastField>
{/* ------------ Full amount ------------ */} {/* ------------ Full amount ------------ */}
<FFormGroup <FFormGroup

55
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
inline={true} fastField
className={classNames(CLASSES.FILL)} >
intent={inputIntent({ error, touched })} <FDateInput
helperText={<ErrorMessage name="receipt_date" />} name={'receipt_date'}
> formatDate={(date) => date.toLocaleDateString()}
<DateInput parseDate={(str) => new Date(str)}
{...momentFormatter('YYYY/MM/DD')} popoverProps={{ position: Position.BOTTOM_LEFT, minimal: true }}
value={tansformDateValue(value)} inputProps={{
onChange={handleDateChange((formattedDate) => { leftIcon: <Icon icon={'date-range'} />,
form.setFieldValue('receipt_date', formattedDate); fill: true,
})} }}
popoverProps={{ position: Position.BOTTOM, minimal: true }} fill
inputProps={{ fastField
leftIcon: <Icon icon={'date-range'} />, />
}} </FFormGroup>
/>
</FormGroup>
)}
</FastField>
{/* ----------- Receipt number ----------- */} {/* ----------- Receipt number ----------- */}
<ReceiptFormReceiptNumberField /> <ReceiptFormReceiptNumberField />