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

feat: form header fields

Browse Source
This commit is contained in:
Ahmed Bouhuolia
2024-10-13 13:56:13 +02:00
parent ddea7be24a
commit 68a0db91ee
10 changed files with 263 additions and 171 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/webapp/src/components/App.tsx
View File

@@ -40,7 +40,7 @@ const PaymentPortalPage = lazy(
const theme = { const theme = {
...defaultTheme, ...defaultTheme,
// Customize your theme here bpPrefix: 'bp4',
} }
/** /**

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

@@ -5,6 +5,8 @@ import styled from 'styled-components';
import { FormGroup, InputGroup, Position } from '@blueprintjs/core'; import { FormGroup, InputGroup, Position } from '@blueprintjs/core';
import { DateInput } from '@blueprintjs/datetime'; import { DateInput } from '@blueprintjs/datetime';
import { FastField, ErrorMessage, useFormikContext } from 'formik'; import { FastField, ErrorMessage, useFormikContext } from 'formik';
import { css } from '@emotion/css';
import { useTheme } from '@emotion/react';
import { CLASSES } from '@/constants/classes'; import { CLASSES } from '@/constants/classes';
import { import {
@@ -14,6 +16,7 @@ import {
CustomerDrawerLink, CustomerDrawerLink,
FFormGroup, FFormGroup,
CustomersSelect, CustomersSelect,
Stack,
} from '@/components'; } from '@/components';
import { customerNameFieldShouldUpdate } from './utils'; import { customerNameFieldShouldUpdate } from './utils';
@@ -28,12 +31,31 @@ import {
} from '@/utils'; } from '@/utils';
import { useCustomerUpdateExRate } from '@/containers/Entries/withExRateItemEntriesPriceRecalc'; import { useCustomerUpdateExRate } from '@/containers/Entries/withExRateItemEntriesPriceRecalc';
const getCreditNoteFieldsStyle = (theme: Theme) => css`
.${theme.bpPrefix}-form-group {
margin-bottom: 0;
&.${theme.bpPrefix}-inline {
max-width: 450px;
}
.${theme.bpPrefix}-label {
min-width: 150px;
}
.${theme.bpPrefix}-form-content {
width: 100%;
}
}
`;
/** /**
* Credit note form header fields. * Credit note form header fields.
*/ */
export default function CreditNoteFormHeaderFields({}) { export default function CreditNoteFormHeaderFields() {
const theme = useTheme();
const styleClassName = getCreditNoteFieldsStyle(theme);
return ( return (
<div className={classNames(CLASSES.PAGE_FORM_HEADER_FIELDS)}> <Stack spacing={18} flex={1} className={styleClassName}>
{/* ----------- Customer name ----------- */} {/* ----------- Customer name ----------- */}
<CreditNoteCustomersSelect /> <CreditNoteCustomersSelect />
@@ -65,24 +87,15 @@ export default function CreditNoteFormHeaderFields({}) {
</FormGroup> </FormGroup>
)} )}
</FastField> </FastField>
{/* ----------- Credit note # ----------- */} {/* ----------- Credit note # ----------- */}
<CreditNoteTransactionNoField /> <CreditNoteTransactionNoField />
{/* ----------- Reference ----------- */} {/* ----------- Reference ----------- */}
<FastField name={'reference_no'}> <FormGroup label={<T id={'reference_no'} />} name={'reference_no'} inline>
{({ field, meta: { error, touched } }) => ( <InputGroup name={'reference_no'} minimal />
<FormGroup </FormGroup>
label={<T id={'reference_no'} />} </Stack>
inline={true}
className={classNames('form-group--reference', CLASSES.FILL)}
intent={inputIntent({ error, touched })}
helperText={<ErrorMessage name="reference_no" />}
>
<InputGroup minimal={true} {...field} />
</FormGroup>
)}
</FastField>
</div>
); );
} }

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

@@ -1,10 +1,10 @@
// @ts-nocheck // @ts-nocheck
import styled from 'styled-components'; import styled from 'styled-components';
import classNames from 'classnames'; import classNames from 'classnames';
import { FormGroup, InputGroup, Position, Classes } from '@blueprintjs/core'; import { FormGroup, Position, Classes } from '@blueprintjs/core';
import { DateInput } from '@blueprintjs/datetime'; import { DateInput } from '@blueprintjs/datetime';
import { FastField, ErrorMessage, useFormikContext } from 'formik'; import { FastField, ErrorMessage, useFormikContext } from 'formik';
import { css } from '@emotion/css';
import { import {
FeatureCan, FeatureCan,
FFormGroup, FFormGroup,
@@ -13,6 +13,8 @@ import {
Icon, Icon,
CustomerDrawerLink, CustomerDrawerLink,
CustomersSelect, CustomersSelect,
FInputGroup,
Stack,
} from '@/components'; } from '@/components';
import { import {
momentFormatter, momentFormatter,
@@ -31,15 +33,36 @@ import {
import { EstimateFormEstimateNumberField } from './EstimateFormEstimateNumberField'; import { EstimateFormEstimateNumberField } from './EstimateFormEstimateNumberField';
import { useEstimateFormContext } from './EstimateFormProvider'; import { useEstimateFormContext } from './EstimateFormProvider';
import { useCustomerUpdateExRate } from '@/containers/Entries/withExRateItemEntriesPriceRecalc'; import { useCustomerUpdateExRate } from '@/containers/Entries/withExRateItemEntriesPriceRecalc';
import { useTheme } from '@emotion/react';
import { Theme } from '@xstyled/emotion';
const getEstimateFieldsStyle = (theme: Theme) => css`
.${theme.bpPrefix}-form-group {
margin-bottom: 0;
&.${theme.bpPrefix}-inline {
max-width: 470px;
}
.${theme.bpPrefix}-label {
min-width: 160px;
font-weight: 500;
}
.${theme.bpPrefix}-form-content {
width: 100%;
}
}
`;
/** /**
* Estimate form header. * Estimate form header.
*/ */
export default function EstimateFormHeader() { export default function EstimateFormHeader() {
const theme = useTheme();
const { projects } = useEstimateFormContext(); const { projects } = useEstimateFormContext();
const styleClassName = getEstimateFieldsStyle(theme);
return ( return (
<div className={classNames(CLASSES.PAGE_FORM_HEADER_FIELDS)}> <Stack spacing={18} flex={1} className={styleClassName}>
{/* ----------- Customer name ----------- */} {/* ----------- Customer name ----------- */}
<EstimateFormCustomerSelect /> <EstimateFormCustomerSelect />
@@ -106,19 +129,9 @@ export default function EstimateFormHeader() {
<EstimateFormEstimateNumberField /> <EstimateFormEstimateNumberField />
{/* ----------- Reference ----------- */} {/* ----------- Reference ----------- */}
<FastField name={'reference'}> <FFormGroup name={'reference'} label={<T id={'reference'} />} inline fill>
{({ form, field, meta: { error, touched } }) => ( <FInputGroup name={'reference'} minimal={true} />
<FormGroup </FFormGroup>
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>
{/*------------ Project name -----------*/} {/*------------ Project name -----------*/}
<FeatureCan feature={Features.Projects}> <FeatureCan feature={Features.Projects}>
@@ -136,7 +149,7 @@ export default function EstimateFormHeader() {
/> />
</FFormGroup> </FFormGroup>
</FeatureCan> </FeatureCan>
</div> </Stack>
); );
} }

11
packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceForm.tsx
View File

@@ -22,7 +22,7 @@ import withDashboardActions from '@/containers/Dashboard/withDashboardActions';
import withSettings from '@/containers/Settings/withSettings'; import withSettings from '@/containers/Settings/withSettings';
import withCurrentOrganization from '@/containers/Organization/withCurrentOrganization'; import withCurrentOrganization from '@/containers/Organization/withCurrentOrganization';
import { AppToaster } from '@/components'; import { AppToaster, Box } from '@/components';
import { compose, orderingLinesIndexes, transactionNumber } from '@/utils'; import { compose, orderingLinesIndexes, transactionNumber } from '@/utils';
import { useInvoiceFormContext } from './InvoiceFormProvider'; import { useInvoiceFormContext } from './InvoiceFormProvider';
import { InvoiceFormActions } from './InvoiceFormActions'; import { InvoiceFormActions } from './InvoiceFormActions';
@@ -171,15 +171,18 @@ function InvoiceFormRoot({
overflow: 'hidden', overflow: 'hidden',
display: 'flex', display: 'flex',
flexDirection: 'column', flexDirection: 'column',
flex: 1 flex: 1,
})} })}
> >
<PageForm flex={1}> <PageForm flex={1}>
<PageForm.Body> <PageForm.Body>
<InvoiceFormTopBar /> <InvoiceFormTopBar />
<InvoiceFormHeader /> <InvoiceFormHeader />
<InvoiceFormActions />
<InvoiceItemsEntriesEditorField /> <Box p="18px 32px 0">
<InvoiceFormActions />
<InvoiceItemsEntriesEditorField />
</Box>
<InvoiceFormFooter /> <InvoiceFormFooter />
</PageForm.Body> </PageForm.Body>

161
packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormHeaderFields.tsx
View File

@@ -2,20 +2,23 @@
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, InputGroup, Position, Classes } from '@blueprintjs/core'; import { FormGroup, Position, Classes } from '@blueprintjs/core';
import { DateInput } from '@blueprintjs/datetime'; import { DateInput } from '@blueprintjs/datetime';
import { FastField, ErrorMessage, useFormikContext } from 'formik'; import { FastField, ErrorMessage, useFormikContext } from 'formik';
import { css } from '@emotion/css';
import { Theme, useTheme } from '@emotion/react';
import { import {
FFormGroup, FFormGroup,
FormattedMessage as T, FormattedMessage as T,
Col,
Row,
CustomerDrawerLink, CustomerDrawerLink,
FieldRequiredHint, FieldRequiredHint,
FeatureCan, FeatureCan,
CustomersSelect, CustomersSelect,
Stack Stack,
Group,
FInputGroup,
Icon,
} from '@/components'; } from '@/components';
import { import {
momentFormatter, momentFormatter,
@@ -39,97 +42,105 @@ import {
import { Features } from '@/constants'; import { Features } from '@/constants';
import { useCustomerUpdateExRate } from '@/containers/Entries/withExRateItemEntriesPriceRecalc'; import { useCustomerUpdateExRate } from '@/containers/Entries/withExRateItemEntriesPriceRecalc';
const getInvoiceFieldsStyle = (theme: Theme) => css`
.${theme.bpPrefix}-form-group {
margin-bottom: 0;
&.${theme.bpPrefix}-inline {
max-width: 450px;
}
.${theme.bpPrefix}-label {
min-width: 150px;
font-weight: 500;
}
.${theme.bpPrefix}-form-content {
width: 100%;
}
}
`;
/** /**
* Invoice form header fields. * Invoice form header fields.
*/ */
export default function InvoiceFormHeaderFields() { export default function InvoiceFormHeaderFields() {
// Invoice form context. const theme = useTheme();
const { projects } = useInvoiceFormContext(); const { projects } = useInvoiceFormContext();
const { values } = useFormikContext(); const { values } = useFormikContext();
const invoiceFieldsClassName = getInvoiceFieldsStyle(theme);
return ( return (
<Stack spacing={0}> <Stack spacing={18} flex={1} className={invoiceFieldsClassName}>
{/* ----------- Customer name ----------- */} {/* ----------- Customer name ----------- */}
<InvoiceFormCustomerSelect /> <InvoiceFormCustomerSelect />
{/* ----------- Exchange rate ----------- */} {/* ----------- Exchange rate ----------- */}
<InvoiceExchangeRateInputField /> <InvoiceExchangeRateInputField />
<Row> {/* ----------- Invoice date ----------- */}
<Col xs={6}> <FastField name={'invoice_date'}>
{/* ----------- Invoice date ----------- */} {({ form, field: { value }, meta: { error, touched } }) => (
<FastField name={'invoice_date'}> <FormGroup
{({ form, field: { value }, meta: { error, touched } }) => ( label={<T id={'invoice_date'} />}
<FormGroup inline={true}
label={<T id={'invoice_date'} />} labelInfo={<FieldRequiredHint />}
inline={true} className={classNames(CLASSES.FILL)}
labelInfo={<FieldRequiredHint />} intent={inputIntent({ error, touched })}
className={classNames('form-group--invoice-date', CLASSES.FILL)} helperText={<ErrorMessage name="invoice_date" />}
intent={inputIntent({ error, touched })} >
helperText={<ErrorMessage name="invoice_date" />} <DateInput
> {...momentFormatter('YYYY/MM/DD')}
<DateInput value={tansformDateValue(value)}
{...momentFormatter('YYYY/MM/DD')} onChange={handleDateChange((formattedDate) => {
value={tansformDateValue(value)} form.setFieldValue('invoice_date', formattedDate);
onChange={handleDateChange((formattedDate) => { })}
form.setFieldValue('invoice_date', formattedDate); popoverProps={{
})} position: Position.BOTTOM_LEFT,
popoverProps={{ minimal: true,
position: Position.BOTTOM_LEFT, }}
minimal: true, inputProps={{
}} leftIcon: <Icon icon={'date-range'} />,
/> }}
</FormGroup> />
)} </FormGroup>
</FastField> )}
</Col> </FastField>
<Col xs={6}> {/* ----------- Due date ----------- */}
{/* ----------- Due date ----------- */} <FastField name={'due_date'}>
<FastField name={'due_date'}> {({ form, field: { value }, meta: { error, touched } }) => (
{({ form, field: { value }, meta: { error, touched } }) => ( <FormGroup
<FormGroup label={<T id={'due_date'} />}
label={<T id={'due_date'} />} labelInfo={<FieldRequiredHint />}
labelInfo={<FieldRequiredHint />} inline={true}
inline={true} className={classNames(CLASSES.FILL)}
className={classNames('form-group--due-date', CLASSES.FILL)} intent={inputIntent({ error, touched })}
intent={inputIntent({ error, touched })} helperText={<ErrorMessage name="due_date" />}
helperText={<ErrorMessage name="due_date" />} >
> <DateInput
<DateInput {...momentFormatter('YYYY/MM/DD')}
{...momentFormatter('YYYY/MM/DD')} value={tansformDateValue(value)}
value={tansformDateValue(value)} onChange={handleDateChange((formattedDate) => {
onChange={handleDateChange((formattedDate) => { form.setFieldValue('due_date', formattedDate);
form.setFieldValue('due_date', formattedDate); })}
})} popoverProps={{
popoverProps={{ position: Position.BOTTOM_LEFT,
position: Position.BOTTOM_LEFT, minimal: true,
minimal: true, }}
}} inputProps={{
/> leftIcon: <Icon icon={'date-range'} />,
</FormGroup> }}
)} />
</FastField> </FormGroup>
</Col> )}
</Row> </FastField>
{/* ----------- Invoice number ----------- */} {/* ----------- Invoice number ----------- */}
<InvoiceFormInvoiceNumberField /> <InvoiceFormInvoiceNumberField />
{/* ----------- Reference ----------- */} {/* ----------- Reference ----------- */}
<FastField name={'reference_no'}> <FFormGroup name={'reference_no'} label={<T id={'reference'} />} inline>
{({ field, meta: { error, touched } }) => ( <FInputGroup name={'reference_no'} minimal={true} />
<FormGroup </FFormGroup>
label={<T id={'reference'} />}
inline={true}
className={classNames('form-group--reference', CLASSES.FILL)}
intent={inputIntent({ error, touched })}
helperText={<ErrorMessage name="reference_no" />}
>
<InputGroup minimal={true} {...field} />
</FormGroup>
)}
</FastField>
{/*------------ Project name -----------*/} {/*------------ Project name -----------*/}
<FeatureCan feature={Features.Projects}> <FeatureCan feature={Features.Projects}>

56
packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceItemsEntriesEditorField.tsx
View File

@@ -15,35 +15,31 @@ export default function InvoiceItemsEntriesEditorField() {
const { items, taxRates } = useInvoiceFormContext(); const { items, taxRates } = useInvoiceFormContext();
return ( return (
<x.div p="18px 32px 0"> <FastField
<FastField name={'entries'}
name={'entries'} items={items}
items={items} taxRates={taxRates}
taxRates={taxRates} shouldUpdate={entriesFieldShouldUpdate}
shouldUpdate={entriesFieldShouldUpdate} >
> {({
{({ form: { values, setFieldValue },
form: { values, setFieldValue }, field: { value },
field: { value }, meta: { error, touched },
meta: { error, touched }, }) => (
}) => ( <ItemsEntriesTable
<ItemsEntriesTable value={value}
value={value} onChange={(entries) => {
onChange={(entries) => { setFieldValue('entries', entries);
setFieldValue('entries', entries); }}
}} items={items}
items={items} taxRates={taxRates}
taxRates={taxRates} itemType={ITEM_TYPE.SELLABLE}
itemType={ITEM_TYPE.SELLABLE} errors={error}
errors={error} linesNumber={4}
linesNumber={4} currencyCode={values.currency_code}
currencyCode={values.currency_code} isInclusiveTax={values.inclusive_exclusive_tax === TaxType.Inclusive}
isInclusiveTax={ />
values.inclusive_exclusive_tax === TaxType.Inclusive )}
} </FastField>
/>
)}
</FastField>
</x.div>
); );
} }

3
packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceiveForm/PaymentReceiveFormHeader.tsx
View File

@@ -1,7 +1,6 @@
// @ts-nocheck // @ts-nocheck
import React, { useMemo } from 'react'; import React from 'react';
import classNames from 'classnames'; import classNames from 'classnames';
import { sumBy } from 'lodash';
import { useFormikContext } from 'formik'; import { useFormikContext } from 'formik';
import { Group, Money } from '@/components'; import { Group, Money } from '@/components';
import { FormattedMessage as T } from '@/components'; import { FormattedMessage as T } from '@/components';

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

@@ -13,12 +13,15 @@ import {
import { DateInput } from '@blueprintjs/datetime'; import { DateInput } from '@blueprintjs/datetime';
import { isEmpty, toSafeInteger } from 'lodash'; import { isEmpty, toSafeInteger } from 'lodash';
import { FastField, useFormikContext, ErrorMessage } from 'formik'; import { FastField, useFormikContext, ErrorMessage } from 'formik';
import { css } from '@emotion/css';
import { Theme, useTheme } from '@emotion/react';
import { import {
FeatureCan, FeatureCan,
CustomersSelect, CustomersSelect,
FormattedMessage as T, FormattedMessage as T,
FMoneyInputGroup, FMoneyInputGroup,
Stack,
} from '@/components'; } from '@/components';
import { CLASSES } from '@/constants/classes'; import { CLASSES } from '@/constants/classes';
import { import {
@@ -55,10 +58,30 @@ import {
import { Features } from '@/constants'; import { Features } from '@/constants';
import { PaymentReceivePaymentNoField } from './PaymentReceivePaymentNoField'; import { PaymentReceivePaymentNoField } from './PaymentReceivePaymentNoField';
const getHeaderFieldsStyle = (theme: Theme) => css`
.${theme.bpPrefix}-form-group {
margin-bottom: 0;
&.${theme.bpPrefix}-inline {
max-width: 470px;
}
.${theme.bpPrefix}-label {
min-width: 160px;
}
.${theme.bpPrefix}-form-content {
width: 100%;
}
}
`;
/** /**
* Payment receive header fields. * Payment receive header fields.
*/ */
export default function PaymentReceiveHeaderFields() { export default function PaymentReceiveHeaderFields() {
const theme = useTheme();
const styleClassName = getHeaderFieldsStyle(theme);
// Payment receive form context. // Payment receive form context.
const { accounts, projects } = usePaymentReceiveFormContext(); const { accounts, projects } = usePaymentReceiveFormContext();
@@ -88,7 +111,7 @@ export default function PaymentReceiveHeaderFields() {
}; };
return ( return (
<div className={classNames(CLASSES.PAGE_FORM_HEADER_FIELDS)}> <Stack spacing={18} flex={1} className={styleClassName}>
{/* ------------- Customer name ------------- */} {/* ------------- Customer name ------------- */}
<PaymentReceiveCustomerSelect /> <PaymentReceiveCustomerSelect />
@@ -143,9 +166,25 @@ export default function PaymentReceiveHeaderFields() {
{!isEmpty(entries) && ( {!isEmpty(entries) && (
<Button <Button
onClick={handleReceiveFullAmountClick} onClick={handleReceiveFullAmountClick}
className={'receive-full-amount'} className={css`
small={true} &:not([class*='${theme.bpPrefix}-intent-']) {
minimal={true} &.${theme.bpPrefix}-minimal {
width: auto;
padding: 0;
min-height: auto;
font-size: 12px;
margin-top: 4px;
background-color: transparent;
color: #0052cc;
&:hover {
text-decoration: underline;
}
}
}
`}
small
minimal
> >
<T id={'receive_full_amount'} /> ( <T id={'receive_full_amount'} /> (
<Money amount={totalDueAmount} currency={currency_code} />) <Money amount={totalDueAmount} currency={currency_code} />)
@@ -186,10 +225,10 @@ export default function PaymentReceiveHeaderFields() {
<FFormGroup <FFormGroup
name={'reference_no'} name={'reference_no'}
label={<T id={'reference'} />} label={<T id={'reference'} />}
inline={true} inline
fastField fastField
> >
<InputGroup name={'reference_no'} minimal={true} fastField /> <InputGroup name={'reference_no'} minimal fastField />
</FFormGroup> </FFormGroup>
{/*------------ Project name -----------*/} {/*------------ Project name -----------*/}
@@ -208,7 +247,7 @@ export default function PaymentReceiveHeaderFields() {
/> />
</FFormGroup> </FFormGroup>
</FeatureCan> </FeatureCan>
</div> </Stack>
); );
} }

1
packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormHeader.tsx
View File

@@ -20,6 +20,7 @@ function ReceiptFormHeader({
display="flex" display="flex"
bg="white" bg="white"
p="25px 32px" p="25px 32px"
borderBottom="1px solid #d2dce2"
> >
<ReceiptFormHeaderFields <ReceiptFormHeaderFields
onReceiptNumberChanged={onReceiptNumberChanged} onReceiptNumberChanged={onReceiptNumberChanged}

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

@@ -1,10 +1,12 @@
// @ts-nocheck // @ts-nocheck
import React, { useCallback } 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, InputGroup, Position, Classes } from '@blueprintjs/core';
import { DateInput } from '@blueprintjs/datetime';
import { FastField, ErrorMessage, useFormikContext } from 'formik'; import { FastField, ErrorMessage, useFormikContext } from 'formik';
import { FormGroup, Position, Classes } from '@blueprintjs/core';
import { DateInput } from '@blueprintjs/datetime';
import { css } from '@emotion/css';
import { Theme, useTheme } from '@emotion/react';
import { CLASSES } from '@/constants/classes'; import { CLASSES } from '@/constants/classes';
import { ACCOUNT_TYPE } from '@/constants/accountTypes'; import { ACCOUNT_TYPE } from '@/constants/accountTypes';
@@ -18,6 +20,8 @@ import {
CustomerDrawerLink, CustomerDrawerLink,
FormattedMessage as T, FormattedMessage as T,
FeatureCan, FeatureCan,
FInputGroup,
Stack,
} from '@/components'; } from '@/components';
import { ProjectsSelect } from '@/containers/Projects/components'; import { ProjectsSelect } from '@/containers/Projects/components';
import { import {
@@ -35,14 +39,33 @@ import {
import { ReceiptFormReceiptNumberField } from './ReceiptFormReceiptNumberField'; import { ReceiptFormReceiptNumberField } from './ReceiptFormReceiptNumberField';
import { useCustomerUpdateExRate } from '@/containers/Entries/withExRateItemEntriesPriceRecalc'; import { useCustomerUpdateExRate } from '@/containers/Entries/withExRateItemEntriesPriceRecalc';
const getEstimateFieldsStyle = (theme: Theme) => css`
.${theme.bpPrefix}-form-group {
margin-bottom: 0;
&.${theme.bpPrefix}-inline {
max-width: 450px;
}
.${theme.bpPrefix}-label {
min-width: 150px;
font-weight: 500;
}
.${theme.bpPrefix}-form-content {
width: 100%;
}
}
`;
/** /**
* Receipt form header fields. * Receipt form header fields.
*/ */
export default function ReceiptFormHeader() { export default function ReceiptFormHeader() {
const theme = useTheme();
const receiptFieldsClassName = getEstimateFieldsStyle(theme);
const { accounts, projects } = useReceiptFormContext(); const { accounts, projects } = useReceiptFormContext();
return ( return (
<div className={classNames(CLASSES.PAGE_FORM_HEADER_FIELDS)}> <Stack spacing={18} flex={1} className={receiptFieldsClassName}>
{/* ----------- Customer name ----------- */} {/* ----------- Customer name ----------- */}
<ReceiptFormCustomerSelect /> <ReceiptFormCustomerSelect />
@@ -104,19 +127,13 @@ export default function ReceiptFormHeader() {
<ReceiptFormReceiptNumberField /> <ReceiptFormReceiptNumberField />
{/* ----------- Reference ----------- */} {/* ----------- Reference ----------- */}
<FastField name={'reference_no'}> <FFormGroup
{({ field, meta: { error, touched } }) => ( label={<T id={'reference'} />}
<FormGroup inline={true}
label={<T id={'reference'} />} name={'reference_no'}
inline={true} >
className={classNames('form-group--reference', CLASSES.FILL)} <FInputGroup minimal={true} name={'reference_no'} />
intent={inputIntent({ error, touched })} </FFormGroup>
helperText={<ErrorMessage name="reference_no" />}
>
<InputGroup minimal={true} {...field} />
</FormGroup>
)}
</FastField>
{/*------------ Project name -----------*/} {/*------------ Project name -----------*/}
<FeatureCan feature={Features.Projects}> <FeatureCan feature={Features.Projects}>
@@ -134,7 +151,7 @@ export default function ReceiptFormHeader() {
/> />
</FFormGroup> </FFormGroup>
</FeatureCan> </FeatureCan>
</div> </Stack>
); );
} }