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

wip

Browse Source
This commit is contained in:
Ahmed Bouhuolia
2025-10-18 13:27:05 +02:00
parent dd941f1f45
commit 54400b223f
10 changed files with 339 additions and 580 deletions
Download Patch File Download Diff File Expand all files Collapse all files

96
packages/webapp/src/components/Select/DisplayNameList.tsx
View File

@@ -1,50 +1,68 @@
// @ts-nocheck import React, { useMemo } from 'react';
import React from 'react';
import intl from 'react-intl-universal'; import intl from 'react-intl-universal';
import { ListSelect } from './ListSelect'; import { FSelect } from '../Forms';
import { useFormikContext } from 'formik';
export function DisplayNameList({ export type DisplayNameListItem = { label: string };
salutation,
firstName, export interface DisplayNameListProps
lastName, extends Omit<
company, React.ComponentProps<typeof FSelect>,
...restProps 'items' | 'valueAccessor' | 'textAccessor' | 'labelAccessor'
}) { > {}
const formats = [
{ export function DisplayNameList({ ...restProps }: DisplayNameListProps) {
format: '{1} {2} {3}', const {
values: [salutation, firstName, lastName], values: {
required: [1], first_name: firstName,
last_name: lastName,
company_name: companyName,
salutation,
}, },
{ format: '{1} {2}', values: [firstName, lastName], required: [] }, } = useFormikContext<any>();
{ format: '{1}, {2}', values: [firstName, lastName], required: [1, 2] },
{ format: '{1}', values: [company], required: [1] },
];
const formatOptions = formats const formats = useMemo(
.filter( () => [
(format) => {
!format.values.some((value, index) => { format: '{1} {2} {3}',
return !value && format.required.indexOf(index + 1) !== -1; values: [salutation, firstName, lastName],
required: [1],
},
{ format: '{1} {2}', values: [firstName, lastName], required: [] },
{ format: '{1}, {2}', values: [firstName, lastName], required: [1, 2] },
{ format: '{1}', values: [companyName], required: [1] },
],
[firstName, lastName, companyName, salutation],
);
const formatOptions: DisplayNameListItem[] = useMemo(
() =>
formats
.filter(
(format) =>
!format.values.some((value, index) => {
return !value && format.required.indexOf(index + 1) !== -1;
}),
)
.map((formatOption) => {
const { format, values } = formatOption;
let label = format;
values.forEach((value, index) => {
const replaceWith = value || '';
label = label.replace(`{${index + 1}}`, replaceWith).trim();
});
return { label: label.replace(/\s+/g, ' ') };
}), }),
) [formats],
.map((formatOption) => { );
const { format, values } = formatOption;
let label = format;
values.forEach((value, index) => {
const replaceWith = value || '';
label = label.replace(`{${index + 1}}`, replaceWith).trim();
});
return { label: label.replace(/\s+/g, ' ') };
});
return ( return (
<ListSelect <FSelect
items={formatOptions} items={formatOptions}
selectedItemProp={'label'} valueAccessor={'label'}
textProp={'label'} textAccessor={'label'}
defaultText={intl.get('select_display_name_as')} placeholder={intl.get('select_display_name_as')}
filterable={false} filterable={false}
{...restProps} {...restProps}
/> />

22
packages/webapp/src/components/Select/SalutationList.tsx
View File

@@ -1,10 +1,16 @@
// @ts-nocheck
import React from 'react'; import React from 'react';
import intl from 'react-intl-universal'; import intl from 'react-intl-universal';
import { FSelect } from '../Forms';
import { ListSelect } from './ListSelect'; export type SalutationItem = { key: string; label: string };
export function SalutationList({ ...restProps }) { export interface SalutationListProps
extends Omit<
React.ComponentProps<typeof FSelect>,
'items' | 'valueAccessor' | 'textAccessor' | 'labelAccessor'
> {}
export function SalutationList({ ...restProps }: SalutationListProps) {
const saluations = [ const saluations = [
intl.get('mr'), intl.get('mr'),
intl.get('mrs'), intl.get('mrs'),
@@ -12,17 +18,17 @@ export function SalutationList({ ...restProps }) {
intl.get('miss'), intl.get('miss'),
intl.get('dr'), intl.get('dr'),
]; ];
const items = saluations.map((saluation) => ({ const items: SalutationItem[] = saluations.map((saluation) => ({
key: saluation, key: saluation,
label: saluation, label: saluation,
})); }));
return ( return (
<ListSelect <FSelect
items={items} items={items}
selectedItemProp={'key'} valueAccessor={'key'}
textProp={'label'} textAccessor={'label'}
defaultText={intl.get('salutation')} placeholder={intl.get('salutation')}
filterable={false} filterable={false}
{...restProps} {...restProps}
/> />

286
packages/webapp/src/containers/Customers/CustomerForm/CustomerAddressTabs.tsx
View File

@@ -1,10 +1,12 @@
// @ts-nocheck // @ts-nocheck
import React from 'react'; import React from 'react';
import { FormGroup, InputGroup, TextArea } from '@blueprintjs/core';
import { Row, Col } from '@/components'; import { Row, Col } from '@/components';
import { FormattedMessage as T } from '@/components'; import {
import { FastField, ErrorMessage } from 'formik'; FormattedMessage as T,
import { inputIntent } from '@/utils'; FFormGroup,
FInputGroup,
FTextArea,
} from '@/components';
const CustomerBillingAddress = ({}) => { const CustomerBillingAddress = ({}) => {
return ( return (
@@ -15,105 +17,65 @@ const CustomerBillingAddress = ({}) => {
<T id={'billing_address'} /> <T id={'billing_address'} />
</h4> </h4>
{/*------------ Billing Address country -----------*/} {/*------------ Billing Address country -----------*/}
<FastField name={'billing_address_country'}> <FFormGroup
{({ field, field: { value }, meta: { error, touched } }) => ( name={'billing_address_country'}
<FormGroup inline={true}
className={'form-group--journal-number'} label={<T id={'country'} />}
intent={inputIntent({ error, touched })} >
inline={true} <FInputGroup name={'billing_address_country'} />
helperText={<ErrorMessage name="billing_address_country" />} </FFormGroup>
label={<T id={'country'} />}
>
<InputGroup {...field} />
</FormGroup>
)}
</FastField>
{/*------------ Billing Address 1 -----------*/} {/*------------ Billing Address 1 -----------*/}
<FastField name={'billing_address_1'}> <FFormGroup
{({ field, field: { value }, meta: { error, touched } }) => ( name={'billing_address_1'}
<FormGroup label={<T id={'address_line_1'} />}
label={<T id={'address_line_1'} />} inline={true}
className={'form-group--address_line_1'} >
intent={inputIntent({ error, touched })} <FTextArea name={'billing_address_1'} />
inline={true} </FFormGroup>
helperText={<ErrorMessage name="billing_address_1" />}
>
<TextArea {...field} />
</FormGroup>
)}
</FastField>
{/*------------ Billing Address 2 -----------*/} {/*------------ Billing Address 2 -----------*/}
<FastField name={'billing_address_2'}> <FFormGroup
{({ field, field: { value }, meta: { error, touched } }) => ( name={'billing_address_2'}
<FormGroup label={<T id={'address_line_2'} />}
label={<T id={'address_line_2'} />} inline={true}
className={'form-group--journal-number'} >
intent={inputIntent({ error, touched })} <FTextArea name={'billing_address_2'} />
inline={true} </FFormGroup>
helperText={<ErrorMessage name="billing_address_2" />}
>
<TextArea {...field} />
</FormGroup>
)}
</FastField>
{/*------------ Billing Address city -----------*/} {/*------------ Billing Address city -----------*/}
<FastField name={'billing_address_city'}> <FFormGroup
{({ field, field: { value }, meta: { error, touched } }) => ( name={'billing_address_city'}
<FormGroup label={<T id={'city_town'} />}
label={<T id={'city_town'} />} inline={true}
className={'form-group--journal-number'} >
intent={inputIntent({ error, touched })} <FInputGroup name={'billing_address_city'} />
inline={true} </FFormGroup>
helperText={<ErrorMessage name="billing_address_city" />}
>
<InputGroup {...field} />
</FormGroup>
)}
</FastField>
{/*------------ Billing Address state -----------*/} {/*------------ Billing Address state -----------*/}
<FastField name={'billing_address_state'}> <FFormGroup
{({ field, field: { value }, meta: { error, touched } }) => ( name={'billing_address_state'}
<FormGroup label={<T id={'state'} />}
label={<T id={'state'} />} inline={true}
className={'form-group--journal-number'} >
intent={inputIntent({ error, touched })} <FInputGroup name={'billing_address_state'} />
inline={true} </FFormGroup>
helperText={<ErrorMessage name="billing_address_state" />}
>
<InputGroup {...field} />
</FormGroup>
)}
</FastField>
{/*------------ Billing Address postcode -----------*/} {/*------------ Billing Address postcode -----------*/}
<FastField name={'billing_address_postcode'}> <FFormGroup
{({ field, field: { value }, meta: { error, touched } }) => ( name={'billing_address_postcode'}
<FormGroup label={<T id={'zip_code'} />}
label={<T id={'zip_code'} />} inline={true}
intent={inputIntent({ error, touched })} >
inline={true} <FInputGroup name={'billing_address_postcode'} />
helperText={<ErrorMessage name="billing_address_postcode" />} </FFormGroup>
>
<InputGroup {...field} />
</FormGroup>
)}
</FastField>
{/*------------ Billing Address phone -----------*/} {/*------------ Billing Address phone -----------*/}
<FastField name={'billing_address_phone'}> <FFormGroup
{({ field, field: { value }, meta: { error, touched } }) => ( name={'billing_address_phone'}
<FormGroup label={<T id={'phone'} />}
label={<T id={'phone'} />} inline={true}
intent={inputIntent({ error, touched })} >
inline={true} <FInputGroup name={'billing_address_phone'} />
helperText={<ErrorMessage name="billing_address_phone" />} </FFormGroup>
>
<InputGroup {...field} />
</FormGroup>
)}
</FastField>
</Col> </Col>
<Col xs={6}> <Col xs={6}>
@@ -121,107 +83,67 @@ const CustomerBillingAddress = ({}) => {
<T id={'shipping_address'} /> <T id={'shipping_address'} />
</h4> </h4>
{/*------------ Shipping Address country -----------*/} {/*------------ Shipping Address country -----------*/}
<FastField name={'shipping_address_country'}> <FFormGroup
{({ field, field: { value }, meta: { error, touched } }) => ( name={'shipping_address_country'}
<FormGroup label={<T id={'country'} />}
label={<T id={'country'} />} inline={true}
className={'form-group--journal-number'} >
intent={inputIntent({ error, touched })} <FInputGroup name={'shipping_address_country'} />
inline={true} </FFormGroup>
helperText={<ErrorMessage name="shipping_address_country" />}
>
<InputGroup {...field} />
</FormGroup>
)}
</FastField>
{/*------------ Shipping Address 1 -----------*/} {/*------------ Shipping Address 1 -----------*/}
<FastField name={'shipping_address_1'}> <FFormGroup
{({ field, field: { value }, meta: { error, touched } }) => ( name={'shipping_address_1'}
<FormGroup label={<T id={'address_line_1'} />}
label={<T id={'address_line_1'} />} inline={true}
className={'form-group--journal-number'} >
intent={inputIntent({ error, touched })} <FTextArea name={'shipping_address_1'} />
inline={true} </FFormGroup>
helperText={<ErrorMessage name="shipping_address_1" />}
>
<TextArea {...field} />
</FormGroup>
)}
</FastField>
{/*------------ Shipping Address 2 -----------*/} {/*------------ Shipping Address 2 -----------*/}
<FastField name={'shipping_address_2'}> <FFormGroup
{({ field, field: { value }, meta: { error, touched } }) => ( name={'shipping_address_2'}
<FormGroup label={<T id={'address_line_2'} />}
label={<T id={'address_line_2'} />} inline={true}
className={'form-group--journal-number'} >
intent={inputIntent({ error, touched })} <FTextArea name={'shipping_address_2'} />
inline={true} </FFormGroup>
helperText={<ErrorMessage name="shipping_address_2" />}
>
<TextArea {...field} />
</FormGroup>
)}
</FastField>
{/*------------ Shipping Address city -----------*/} {/*------------ Shipping Address city -----------*/}
<FastField name={'shipping_address_city'}> <FFormGroup
{({ field, field: { value }, meta: { error, touched } }) => ( name={'shipping_address_city'}
<FormGroup label={<T id={'city_town'} />}
label={<T id={'city_town'} />} inline={true}
className={'form-group--journal-number'} >
intent={inputIntent({ error, touched })} <FInputGroup name={'shipping_address_city'} />
inline={true} </FFormGroup>
helperText={<ErrorMessage name="shipping_address_city" />}
>
<InputGroup {...field} />
</FormGroup>
)}
</FastField>
{/*------------ Shipping Address state -----------*/} {/*------------ Shipping Address state -----------*/}
<FastField name={'shipping_address_state'}> <FFormGroup
{({ field, field: { value }, meta: { error, touched } }) => ( name={'shipping_address_state'}
<FormGroup label={<T id={'state'} />}
label={<T id={'state'} />} inline={true}
className={'form-group--journal-number'} >
intent={inputIntent({ error, touched })} <FInputGroup name={'shipping_address_state'} />
inline={true} </FFormGroup>
helperText={<ErrorMessage name="shipping_address_state" />}
>
<InputGroup {...field} />
</FormGroup>
)}
</FastField>
{/*------------ Shipping Address postcode -----------*/} {/*------------ Shipping Address postcode -----------*/}
<FastField name={'shipping_address_postcode'}> <FFormGroup
{({ field, field: { value }, meta: { error, touched } }) => ( name={'shipping_address_postcode'}
<FormGroup label={<T id={'zip_code'} />}
label={<T id={'zip_code'} />} inline={true}
intent={inputIntent({ error, touched })} >
inline={true} <FInputGroup name={'shipping_address_postcode'} />
helperText={<ErrorMessage name="shipping_address_postcode" />} </FFormGroup>
>
<InputGroup {...field} />
</FormGroup>
)}
</FastField>
{/*------------ Shipping Address phone -----------*/} {/*------------ Shipping Address phone -----------*/}
<FastField name={'shipping_address_phone'}> <FFormGroup
{({ field, field: { value }, meta: { error, touched } }) => ( name={'shipping_address_phone'}
<FormGroup label={<T id={'phone'} />}
label={<T id={'phone'} />} inline={true}
intent={inputIntent({ error, touched })} >
inline={true} <FInputGroup name={'shipping_address_phone'} />
helperText={<ErrorMessage name="shipping_address_phone" />} </FFormGroup>
>
<InputGroup {...field} />
</FormGroup>
)}
</FastField>
</Col> </Col>
</Row> </Row>
</div> </div>

74
packages/webapp/src/containers/Customers/CustomerForm/CustomerFormAfterPrimarySection.tsx
View File

@@ -1,72 +1,40 @@
// @ts-nocheck // @ts-nocheck
import React from 'react'; import React from 'react';
import intl from 'react-intl-universal'; import intl from 'react-intl-universal';
import { FormGroup, InputGroup, ControlGroup } from '@blueprintjs/core'; import { ControlGroup } from '@blueprintjs/core';
import { FastField, ErrorMessage } from 'formik'; import { FormattedMessage as T, FFormGroup, FInputGroup } from '@/components';
import { FormattedMessage as T } from '@/components';
import { inputIntent } from '@/utils';
export default function CustomerFormAfterPrimarySection({}) { export default function CustomerFormAfterPrimarySection({}) {
return ( return (
<div class="customer-form__after-primary-section-content"> <div className={'customer-form__after-primary-section-content'}>
{/*------------ Customer email -----------*/} {/*------------ Customer email -----------*/}
<FastField name={'email'}> <FFormGroup
{({ field, meta: { error, touched } }) => ( name={'email'}
<FormGroup label={<T id={'customer_email'} />}
intent={inputIntent({ error, touched })} inline={true}
helperText={<ErrorMessage name={'email'} />} >
className={'form-group--email'} <FInputGroup name={'email'} />
label={<T id={'customer_email'} />} </FFormGroup>
inline={true}
>
<InputGroup {...field} />
</FormGroup>
)}
</FastField>
{/*------------ Phone number -----------*/} {/*------------ Phone number -----------*/}
<FormGroup <FFormGroup
className={'form-group--phone-number'} name={'personal_phone'}
label={<T id={'phone_number'} />} label={<T id={'phone_number'} />}
inline={true} inline={true}
> >
<ControlGroup> <ControlGroup>
<FastField name={'personal_phone'}> <FInputGroup
{({ field, meta: { error, touched } }) => ( name={'personal_phone'}
<InputGroup placeholder={intl.get('personal')}
intent={inputIntent({ error, touched })} />
placeholder={intl.get('personal')} <FInputGroup name={'work_phone'} placeholder={intl.get('work')} />
{...field}
/>
)}
</FastField>
<FastField name={'work_phone'}>
{({ field, meta: { error, touched } }) => (
<InputGroup
intent={inputIntent({ error, touched })}
placeholder={intl.get('work')}
{...field}
/>
)}
</FastField>
</ControlGroup> </ControlGroup>
</FormGroup> </FFormGroup>
{/*------------ Customer website -----------*/} {/*------------ Customer website -----------*/}
<FastField name={'website'}> <FFormGroup name={'website'} label={<T id={'website'} />} inline={true}>
{({ field, meta: { error, touched } }) => ( <FInputGroup name={'website'} placeholder={'http://'} />
<FormGroup </FFormGroup>
intent={inputIntent({ error, touched })}
helperText={<ErrorMessage name={'website'} />}
className={'form-group--website'}
label={<T id={'website'} />}
inline={true}
>
<InputGroup placeholder={'http://'} {...field} />
</FormGroup>
)}
</FastField>
</div> </div>
); );
} }

123
packages/webapp/src/containers/Customers/CustomerForm/CustomerFormPrimarySection.tsx
View File

@@ -10,6 +10,8 @@ import {
SalutationList, SalutationList,
DisplayNameList, DisplayNameList,
FormattedMessage as T, FormattedMessage as T,
FInputGroup,
FFormGroup,
} from '@/components'; } from '@/components';
import CustomerTypeRadioField from './CustomerTypeRadioField'; import CustomerTypeRadioField from './CustomerTypeRadioField';
import { CLASSES } from '@/constants/classes'; import { CLASSES } from '@/constants/classes';
@@ -28,100 +30,51 @@ export default function CustomerFormPrimarySection({}) {
<CustomerTypeRadioField /> <CustomerTypeRadioField />
{/**----------- Contact name -----------*/} {/**----------- Contact name -----------*/}
<FormGroup <FFormGroup
className={classNames('form-group--contact_name')} name={'salutation'}
label={<T id={'contact_name'} />} label={<T id={'contact_name'} />}
inline={true} inline={true}
> >
<ControlGroup> <ControlGroup>
<FastField name={'salutation'}> <SalutationList
{({ form, field: { value }, meta: { error, touched } }) => ( name={'salutation'}
<SalutationList popoverProps={{ minimal: true }}
onItemSelect={(salutation) => { />
form.setFieldValue('salutation', salutation.label); <FInputGroup
}} name={'first_name'}
selectedItem={value} placeholder={intl.get('first_name')}
popoverProps={{ minimal: true }} inputRef={(ref) => (firstNameFieldRef.current = ref)}
className={classNames( />
CLASSES.FORM_GROUP_LIST_SELECT, <FInputGroup name={'last_name'} placeholder={intl.get('last_name')} />
CLASSES.FILL,
'input-group--salutation-list',
'select-list--fill-button',
)}
/>
)}
</FastField>
<FastField name={'first_name'}>
{({ field, meta: { error, touched } }) => (
<InputGroup
placeholder={intl.get('first_name')}
intent={inputIntent({ error, touched })}
className={classNames('input-group--first-name')}
inputRef={(ref) => (firstNameFieldRef.current = ref)}
{...field}
/>
)}
</FastField>
<FastField name={'last_name'}>
{({ field, meta: { error, touched } }) => (
<InputGroup
placeholder={intl.get('last_name')}
intent={inputIntent({ error, touched })}
className={classNames('input-group--last-name')}
{...field}
/>
)}
</FastField>
</ControlGroup> </ControlGroup>
</FormGroup> </FFormGroup>
{/*----------- Company Name -----------*/} {/*----------- Company Name -----------*/}
<FastField name={'company_name'}> <FFormGroup
{({ field, meta: { error, touched } }) => ( name={'company_name'}
<FormGroup label={<T id={'company_name'} />}
className={classNames('form-group--company_name')} inline={true}
label={<T id={'company_name'} />} >
intent={inputIntent({ error, touched })} <InputGroup name={'company_name'} />
helperText={<ErrorMessage name={'company_name'} />} </FFormGroup>
inline={true}
>
<InputGroup {...field} />
</FormGroup>
)}
</FastField>
{/*----------- Display Name -----------*/} {/*----------- Display Name -----------*/}
<Field name={'display_name'}> <FFormGroup
{({ form, field: { value }, meta: { error, touched } }) => ( name={'display_name'}
<FormGroup label={
helperText={<ErrorMessage name={'display_name'} />} <>
intent={inputIntent({ error, touched })} <T id={'display_name'} />
label={ <FieldRequiredHint />
<> <Hint />
<T id={'display_name'} /> </>
<FieldRequiredHint /> }
<Hint /> inline={true}
</> >
} <DisplayNameList
className={classNames(CLASSES.FORM_GROUP_LIST_SELECT, CLASSES.FILL)} name={'display_name'}
inline={true} popoverProps={{ minimal: true }}
> />
<DisplayNameList </FFormGroup>
firstName={form.values.first_name}
lastName={form.values.last_name}
company={form.values.company_name}
salutation={form.values.salutation}
onItemSelect={(displayName) => {
form.setFieldValue('display_name', displayName.label);
}}
selectedItem={value}
popoverProps={{ minimal: true }}
/>
</FormGroup>
)}
</Field>
</div> </div>
); );
} }

21
packages/webapp/src/containers/Customers/CustomerForm/CustomerNotePanel.tsx
View File

@@ -1,26 +1,15 @@
// @ts-nocheck // @ts-nocheck
import React from 'react'; import React from 'react';
import classNames from 'classnames'; import classNames from 'classnames';
import { FormGroup, TextArea, Classes } from '@blueprintjs/core'; import { Classes } from '@blueprintjs/core';
import { FastField, ErrorMessage } from 'formik'; import { FormattedMessage as T, FFormGroup, FTextArea } from '@/components';
import { FormattedMessage as T } from '@/components';
import { inputIntent } from '@/utils';
export default function CustomerNotePanel({ errors, touched, getFieldProps }) { export default function CustomerNotePanel({ errors, touched, getFieldProps }) {
return ( return (
<div className={'tab-panel--note'}> <div className={'tab-panel--note'}>
<FastField name={'note'}> <FFormGroup name={'note'} label={<T id={'note'} />} inline={false}>
{({ field, field: { value }, meta: { error, touched } }) => ( <FTextArea name={'note'} />
<FormGroup </FFormGroup>
label={<T id={'note'} />}
className={classNames('form-group--note', Classes.FILL)}
intent={inputIntent({ error, touched })}
helperText={<ErrorMessage name="payment_date" />}
>
<TextArea {...field} />
</FormGroup>
)}
</FastField>
</div> </div>
); );
} }

45
packages/webapp/src/containers/Customers/CustomerForm/CustomerTypeRadioField.tsx
View File

@@ -2,43 +2,26 @@
import React from 'react'; import React from 'react';
import intl from 'react-intl-universal'; import intl from 'react-intl-universal';
import classNames from 'classnames'; import classNames from 'classnames';
import { RadioGroup, Radio, FormGroup } from '@blueprintjs/core'; import { Radio } from '@blueprintjs/core';
import { FormattedMessage as T } from '@/components'; import { FormattedMessage as T, FFormGroup, FRadioGroup } from '@/components';
import { FastField } from 'formik';
import { handleStringChange, saveInvoke } from '@/utils'; import { handleStringChange, saveInvoke } from '@/utils';
/** /**
* Customer type radio field. * Customer type radio field.
*/ */
export default function RadioCustomer(props) { export default function RadioCustomer() {
const { onChange, ...rest } = props;
return ( return (
<FastField name={'customer_type'}> <FFormGroup
{({ form, field: { value }, meta: { error, touched } }) => ( name={'customer_type'}
<FormGroup label={<T id={'customer_type'} />}
inline={true} inline
label={<T id={'customer_type'} />} fastField
className={classNames('form-group--customer_type')} >
> <FRadioGroup name={'customer_type'} inline>
<RadioGroup <Radio label={intl.get('business')} value="business" />
inline={true} <Radio label={intl.get('individual')} value="individual" />
onChange={handleStringChange((value) => { </FRadioGroup>
saveInvoke(onChange, value); </FFormGroup>
form.setFieldValue('customer_type', value);
})}
selectedValue={value}
>
<Radio label={intl.get('business')} value="business" />
<Radio
label={intl.get('individual')}
value="individual"
/>
</RadioGroup>
</FormGroup>
)}
</FastField>
); );
} }

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

@@ -7,23 +7,25 @@ import {
Classes, Classes,
Radio, Radio,
Position, Position,
MenuItem,
} from '@blueprintjs/core'; } from '@blueprintjs/core';
import { ErrorMessage, FastField } from 'formik'; import { ErrorMessage, FastField } from 'formik';
import { CLASSES } from '@/constants/classes'; import { CLASSES } from '@/constants/classes';
import { import {
CategoriesSelectList,
Hint, Hint,
Col, Col,
Row, Row,
FieldRequiredHint, FieldRequiredHint,
FormattedMessage as T, FormattedMessage as T,
FormattedHTMLMessage, FormattedHTMLMessage,
FFormGroup,
FSelect,
} from '@/components'; } from '@/components';
import classNames from 'classnames'; import classNames from 'classnames';
import { useItemFormContext } from './ItemFormProvider'; import { useItemFormContext } from './ItemFormProvider';
import { handleStringChange, inputIntent } from '@/utils'; import { handleStringChange, inputIntent } from '@/utils';
import { categoriesFieldShouldUpdate } from './utils'; // import { categoriesFieldShouldUpdate } from './utils';
/** /**
* Item form primary section. * Item form primary section.
@@ -132,29 +134,20 @@ export default function ItemFormPrimarySection() {
</FastField> </FastField>
{/*----------- Item category ----------*/} {/*----------- Item category ----------*/}
<FastField <FFormGroup
name={'category_id'} name={'category_id'}
categories={itemsCategories} label={<T id={'category'} />}
shouldUpdate={categoriesFieldShouldUpdate} inline={true}
> >
{({ form, field: { value }, meta: { error, touched } }) => ( <FSelect
<FormGroup name={'category_id'}
label={<T id={'category'} />} items={itemsCategories}
inline={true} valueAccessor={'id'}
intent={inputIntent({ error, touched })} textAccessor={'name'}
helperText={<ErrorMessage name="category_id" />} placeholder={<T id={'select_category'} />}
className={classNames('form-group--category', Classes.FILL)} popoverProps={{ minimal: true, captureDismiss: true }}
> />
<CategoriesSelectList </FFormGroup>
categories={itemsCategories}
selecetedCategoryId={value}
onCategorySelected={(category) => {
form.setFieldValue('category_id', category.id);
}}
/>
</FormGroup>
)}
</FastField>
</Col> </Col>
<Col xs={3}> <Col xs={3}>

74
packages/webapp/src/containers/Vendors/VendorForm/VendorFormAfterPrimarySection.tsx
View File

@@ -1,76 +1,44 @@
// @ts-nocheck // @ts-nocheck
import React from 'react'; import React from 'react';
import intl from 'react-intl-universal'; import intl from 'react-intl-universal';
import { FormGroup, InputGroup, ControlGroup } from '@blueprintjs/core'; import { ControlGroup } from '@blueprintjs/core';
import { FastField, ErrorMessage } from 'formik'; import { FormattedMessage as T, FFormGroup, FInputGroup } from '@/components';
import { FormattedMessage as T } from '@/components';
import { inputIntent } from '@/utils';
/** /**
* Vendor form after primary section. * Vendor form after primary section.
*/ */
function VendorFormAfterPrimarySection() { function VendorFormAfterPrimarySection() {
return ( return (
<div class="customer-form__after-primary-section-content"> <div className={'customer-form__after-primary-section-content'}>
{/*------------ Vendor email -----------*/} {/*------------ Vendor email -----------*/}
<FastField name={'email'}> <FFormGroup
{({ field, meta: { error, touched } }) => ( name={'email'}
<FormGroup label={<T id={'vendor_email'} />}
intent={inputIntent({ error, touched })} inline={true}
helperText={<ErrorMessage name={'email'} />} >
className={'form-group--email'} <FInputGroup name={'email'} />
label={<T id={'vendor_email'} />} </FFormGroup>
inline={true}
>
<InputGroup {...field} />
</FormGroup>
)}
</FastField>
{/*------------ Phone number -----------*/} {/*------------ Phone number -----------*/}
<FormGroup <FFormGroup
name={'work_phone'}
className={'form-group--phone-number'} className={'form-group--phone-number'}
label={<T id={'phone_number'} />} label={<T id={'phone_number'} />}
inline={true} inline={true}
> >
<ControlGroup> <ControlGroup>
<FastField name={'work_phone'}> <FInputGroup name={'work_phone'} placeholder={intl.get('work')} />
{({ field, meta: { error, touched } }) => ( <FInputGroup
<InputGroup name={'personal_phone'}
intent={inputIntent({ error, touched })} placeholder={intl.get('mobile')}
placeholder={intl.get('work')} />
{...field}
/>
)}
</FastField>
<FastField name={'personal_phone'}>
{({ field, meta: { error, touched } }) => (
<InputGroup
intent={inputIntent({ error, touched })}
placeholder={intl.get('mobile')}
{...field}
/>
)}
</FastField>
</ControlGroup> </ControlGroup>
</FormGroup> </FFormGroup>
{/*------------ Vendor website -----------*/} {/*------------ Vendor website -----------*/}
<FastField name={'website'}> <FFormGroup name={'website'} label={<T id={'website'} />} inline={true}>
{({ field, meta: { error, touched } }) => ( <FInputGroup name={'website'} placeholder={'http://'} />
<FormGroup </FFormGroup>
intent={inputIntent({ error, touched })}
helperText={<ErrorMessage name={'website'} />}
className={'form-group--website'}
label={<T id={'website'} />}
inline={true}
>
<InputGroup placeholder={'http://'} {...field} />
</FormGroup>
)}
</FastField>
</div> </div>
); );
} }

139
packages/webapp/src/containers/Vendors/VendorForm/VendorFormPrimarySection.tsx
View File

@@ -2,18 +2,18 @@
import React from 'react'; import React from 'react';
import intl from 'react-intl-universal'; import intl from 'react-intl-universal';
import classNames from 'classnames'; import classNames from 'classnames';
import { FormGroup, InputGroup, ControlGroup } from '@blueprintjs/core'; import { ControlGroup } from '@blueprintjs/core';
import { FastField, Field, ErrorMessage } from 'formik';
import { FormattedMessage as T } from '@/components';
import { CLASSES } from '@/constants/classes';
import { inputIntent } from '@/utils';
import { useAutofocus } from '@/hooks';
import { import {
FormattedMessage as T,
FFormGroup,
FInputGroup,
Hint, Hint,
FieldRequiredHint, FieldRequiredHint,
SalutationList, SalutationList,
DisplayNameList, DisplayNameList,
} from '@/components'; } from '@/components';
import { CLASSES } from '@/constants/classes';
import { useAutofocus } from '@/hooks';
/** /**
* Vendor form primary section. * Vendor form primary section.
@@ -24,99 +24,58 @@ function VendorFormPrimarySection() {
return ( return (
<div className={'customer-form__primary-section-content'}> <div className={'customer-form__primary-section-content'}>
{/**----------- Vendor name -----------*/} {/**----------- Vendor name -----------*/}
<FormGroup <FFormGroup
name={'salutation'}
className={classNames('form-group--contact_name')} className={classNames('form-group--contact_name')}
label={<T id={'contact_name'} />} label={<T id={'contact_name'} />}
inline={true} inline={true}
> >
<ControlGroup> <ControlGroup>
<FastField name={'salutation'}> <SalutationList
{({ form, field: { value }, meta: { error, touched } }) => ( name={'salutation'}
<SalutationList popoverProps={{ minimal: true }}
onItemSelect={(salutation) => { />
form.setFieldValue('salutation', salutation.label); <FInputGroup
}} name={'first_name'}
selectedItem={value} placeholder={intl.get('first_name')}
popoverProps={{ minimal: true }} className={classNames('input-group--first-name')}
className={classNames( inputRef={(ref) => (firstNameFieldRef.current = ref)}
CLASSES.FORM_GROUP_LIST_SELECT, />
CLASSES.FILL, <FInputGroup
'input-group--salutation-list', name={'last_name'}
'select-list--fill-button', placeholder={intl.get('last_name')}
)} className={classNames('input-group--last-name')}
/> />
)}
</FastField>
<FastField name={'first_name'}>
{({ field, meta: { error, touched } }) => (
<InputGroup
placeholder={intl.get('first_name')}
intent={inputIntent({ error, touched })}
className={classNames('input-group--first-name')}
inputRef={(ref) => (firstNameFieldRef.current = ref)}
{...field}
/>
)}
</FastField>
<FastField name={'last_name'}>
{({ field, meta: { error, touched } }) => (
<InputGroup
placeholder={intl.get('last_name')}
intent={inputIntent({ error, touched })}
className={classNames('input-group--last-name')}
{...field}
/>
)}
</FastField>
</ControlGroup> </ControlGroup>
</FormGroup> </FFormGroup>
{/*----------- Company Name -----------*/} {/*----------- Company Name -----------*/}
<FastField name={'company_name'}> <FFormGroup
{({ field, meta: { error, touched } }) => ( name={'company_name'}
<FormGroup className={classNames('form-group--company_name')}
className={classNames('form-group--company_name')} label={<T id={'company_name'} />}
label={<T id={'company_name'} />} inline={true}
intent={inputIntent({ error, touched })} >
helperText={<ErrorMessage name={'company_name'} />} <FInputGroup name={'company_name'} />
inline={true} </FFormGroup>
>
<InputGroup {...field} />
</FormGroup>
)}
</FastField>
{/*----------- Display Name -----------*/} {/*----------- Display Name -----------*/}
<Field name={'display_name'}> <FFormGroup
{({ form, field: { value }, meta: { error, touched } }) => ( name={'display_name'}
<FormGroup label={
helperText={<ErrorMessage name={'display_name'} />} <>
intent={inputIntent({ error, touched })} <T id={'display_name'} />
label={ <FieldRequiredHint />
<> <Hint />
<T id={'display_name'} /> </>
<FieldRequiredHint /> }
<Hint /> className={classNames(CLASSES.FORM_GROUP_LIST_SELECT, CLASSES.FILL)}
</> inline={true}
} >
className={classNames(CLASSES.FORM_GROUP_LIST_SELECT, CLASSES.FILL)} <DisplayNameList
inline={true} name={'display_name'}
> popoverProps={{ minimal: true }}
<DisplayNameList />
firstName={form.values.first_name} </FFormGroup>
lastName={form.values.last_name}
company={form.values.company_name}
salutation={form.values.salutation}
onItemSelect={(displayName) => {
form.setFieldValue('display_name', displayName.label);
}}
selectedItem={value}
popoverProps={{ minimal: true }}
/>
</FormGroup>
)}
</Field>
</div> </div>
); );
} }