QT/bigcapital
1
0
Fork 0
mirror of https://github.com/bigcapitalhq/bigcapital.git synced 2026-02-23 08:10: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

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

@@ -1,16 +1,28 @@
// @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 };
export interface DisplayNameListProps
extends Omit<
React.ComponentProps<typeof FSelect>,
'items' | 'valueAccessor' | 'textAccessor' | 'labelAccessor'
> {}
export function DisplayNameList({ ...restProps }: DisplayNameListProps) {
const {
values: {
first_name: firstName,
last_name: lastName,
company_name: companyName,
salutation, salutation,
firstName, },
lastName, } = useFormikContext<any>();
company,
...restProps const formats = useMemo(
}) { () => [
const formats = [
{ {
format: '{1} {2} {3}', format: '{1} {2} {3}',
values: [salutation, firstName, lastName], values: [salutation, firstName, lastName],
@@ -18,10 +30,14 @@ export function DisplayNameList({
}, },
{ format: '{1} {2}', values: [firstName, lastName], required: [] }, { format: '{1} {2}', values: [firstName, lastName], required: [] },
{ format: '{1}, {2}', values: [firstName, lastName], required: [1, 2] }, { format: '{1}, {2}', values: [firstName, lastName], required: [1, 2] },
{ format: '{1}', values: [company], required: [1] }, { format: '{1}', values: [companyName], required: [1] },
]; ],
[firstName, lastName, companyName, salutation],
);
const formatOptions = formats const formatOptions: DisplayNameListItem[] = useMemo(
() =>
formats
.filter( .filter(
(format) => (format) =>
!format.values.some((value, index) => { !format.values.some((value, index) => {
@@ -37,14 +53,16 @@ export function DisplayNameList({
label = label.replace(`{${index + 1}}`, replaceWith).trim(); label = label.replace(`{${index + 1}}`, replaceWith).trim();
}); });
return { label: label.replace(/\s+/g, ' ') }; return { label: label.replace(/\s+/g, ' ') };
}); }),
[formats],
);
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}
/> />

202
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
className={'form-group--journal-number'}
intent={inputIntent({ error, touched })}
inline={true} inline={true}
helperText={<ErrorMessage name="billing_address_country" />}
label={<T id={'country'} />} label={<T id={'country'} />}
> >
<InputGroup {...field} /> <FInputGroup name={'billing_address_country'} />
</FormGroup> </FFormGroup>
)}
</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'} />}
className={'form-group--address_line_1'}
intent={inputIntent({ error, touched })}
inline={true} inline={true}
helperText={<ErrorMessage name="billing_address_1" />}
> >
<TextArea {...field} /> <FTextArea name={'billing_address_1'} />
</FormGroup> </FFormGroup>
)}
</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'} />}
className={'form-group--journal-number'}
intent={inputIntent({ error, touched })}
inline={true} inline={true}
helperText={<ErrorMessage name="billing_address_2" />}
> >
<TextArea {...field} /> <FTextArea name={'billing_address_2'} />
</FormGroup> </FFormGroup>
)}
</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'} />}
className={'form-group--journal-number'}
intent={inputIntent({ error, touched })}
inline={true} inline={true}
helperText={<ErrorMessage name="billing_address_city" />}
> >
<InputGroup {...field} /> <FInputGroup name={'billing_address_city'} />
</FormGroup> </FFormGroup>
)}
</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'} />}
className={'form-group--journal-number'}
intent={inputIntent({ error, touched })}
inline={true} inline={true}
helperText={<ErrorMessage name="billing_address_state" />}
> >
<InputGroup {...field} /> <FInputGroup name={'billing_address_state'} />
</FormGroup> </FFormGroup>
)}
</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'} />}
intent={inputIntent({ error, touched })}
inline={true} inline={true}
helperText={<ErrorMessage name="billing_address_postcode" />}
> >
<InputGroup {...field} /> <FInputGroup name={'billing_address_postcode'} />
</FormGroup> </FFormGroup>
)}
</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'} />}
intent={inputIntent({ error, touched })}
inline={true} inline={true}
helperText={<ErrorMessage name="billing_address_phone" />}
> >
<InputGroup {...field} /> <FInputGroup name={'billing_address_phone'} />
</FormGroup> </FFormGroup>
)}
</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'} />}
className={'form-group--journal-number'}
intent={inputIntent({ error, touched })}
inline={true} inline={true}
helperText={<ErrorMessage name="shipping_address_country" />}
> >
<InputGroup {...field} /> <FInputGroup name={'shipping_address_country'} />
</FormGroup> </FFormGroup>
)}
</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'} />}
className={'form-group--journal-number'}
intent={inputIntent({ error, touched })}
inline={true} inline={true}
helperText={<ErrorMessage name="shipping_address_1" />}
> >
<TextArea {...field} /> <FTextArea name={'shipping_address_1'} />
</FormGroup> </FFormGroup>
)}
</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'} />}
className={'form-group--journal-number'}
intent={inputIntent({ error, touched })}
inline={true} inline={true}
helperText={<ErrorMessage name="shipping_address_2" />}
> >
<TextArea {...field} /> <FTextArea name={'shipping_address_2'} />
</FormGroup> </FFormGroup>
)}
</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'} />}
className={'form-group--journal-number'}
intent={inputIntent({ error, touched })}
inline={true} inline={true}
helperText={<ErrorMessage name="shipping_address_city" />}
> >
<InputGroup {...field} /> <FInputGroup name={'shipping_address_city'} />
</FormGroup> </FFormGroup>
)}
</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'} />}
className={'form-group--journal-number'}
intent={inputIntent({ error, touched })}
inline={true} inline={true}
helperText={<ErrorMessage name="shipping_address_state" />}
> >
<InputGroup {...field} /> <FInputGroup name={'shipping_address_state'} />
</FormGroup> </FFormGroup>
)}
</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'} />}
intent={inputIntent({ error, touched })}
inline={true} inline={true}
helperText={<ErrorMessage name="shipping_address_postcode" />}
> >
<InputGroup {...field} /> <FInputGroup name={'shipping_address_postcode'} />
</FormGroup> </FFormGroup>
)}
</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'} />}
intent={inputIntent({ error, touched })}
inline={true} inline={true}
helperText={<ErrorMessage name="shipping_address_phone" />}
> >
<InputGroup {...field} /> <FInputGroup name={'shipping_address_phone'} />
</FormGroup> </FFormGroup>
)}
</FastField>
</Col> </Col>
</Row> </Row>
</div> </div>

64
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
intent={inputIntent({ error, touched })}
helperText={<ErrorMessage name={'email'} />}
className={'form-group--email'}
label={<T id={'customer_email'} />} label={<T id={'customer_email'} />}
inline={true} inline={true}
> >
<InputGroup {...field} /> <FInputGroup name={'email'} />
</FormGroup> </FFormGroup>
)}
</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
intent={inputIntent({ error, touched })}
placeholder={intl.get('personal')} placeholder={intl.get('personal')}
{...field}
/> />
)} <FInputGroup name={'work_phone'} placeholder={intl.get('work')} />
</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>
); );
} }

81
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,76 +30,37 @@ 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'}>
{({ form, field: { value }, meta: { error, touched } }) => (
<SalutationList <SalutationList
onItemSelect={(salutation) => { name={'salutation'}
form.setFieldValue('salutation', salutation.label);
}}
selectedItem={value}
popoverProps={{ minimal: true }} popoverProps={{ minimal: true }}
className={classNames(
CLASSES.FORM_GROUP_LIST_SELECT,
CLASSES.FILL,
'input-group--salutation-list',
'select-list--fill-button',
)}
/> />
)} <FInputGroup
</FastField> name={'first_name'}
<FastField name={'first_name'}>
{({ field, meta: { error, touched } }) => (
<InputGroup
placeholder={intl.get('first_name')} placeholder={intl.get('first_name')}
intent={inputIntent({ error, touched })}
className={classNames('input-group--first-name')}
inputRef={(ref) => (firstNameFieldRef.current = ref)} inputRef={(ref) => (firstNameFieldRef.current = ref)}
{...field}
/> />
)} <FInputGroup name={'last_name'} placeholder={intl.get('last_name')} />
</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')}
label={<T id={'company_name'} />} label={<T id={'company_name'} />}
intent={inputIntent({ error, touched })}
helperText={<ErrorMessage name={'company_name'} />}
inline={true} inline={true}
> >
<InputGroup {...field} /> <InputGroup name={'company_name'} />
</FormGroup> </FFormGroup>
)}
</FastField>
{/*----------- Display Name -----------*/} {/*----------- Display Name -----------*/}
<Field name={'display_name'}> <FFormGroup
{({ form, field: { value }, meta: { error, touched } }) => ( name={'display_name'}
<FormGroup
helperText={<ErrorMessage name={'display_name'} />}
intent={inputIntent({ error, touched })}
label={ label={
<> <>
<T id={'display_name'} /> <T id={'display_name'} />
@@ -105,23 +68,13 @@ export default function CustomerFormPrimarySection({}) {
<Hint /> <Hint />
</> </>
} }
className={classNames(CLASSES.FORM_GROUP_LIST_SELECT, CLASSES.FILL)}
inline={true} inline={true}
> >
<DisplayNameList <DisplayNameList
firstName={form.values.first_name} name={'display_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 }} popoverProps={{ minimal: true }}
/> />
</FormGroup> </FFormGroup>
)}
</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>
); );
} }

39
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
inline={true}
label={<T id={'customer_type'} />} label={<T id={'customer_type'} />}
className={classNames('form-group--customer_type')} inline
> fastField
<RadioGroup
inline={true}
onChange={handleStringChange((value) => {
saveInvoke(onChange, value);
form.setFieldValue('customer_type', value);
})}
selectedValue={value}
> >
<FRadioGroup name={'customer_type'} inline>
<Radio label={intl.get('business')} value="business" /> <Radio label={intl.get('business')} value="business" />
<Radio <Radio label={intl.get('individual')} value="individual" />
label={intl.get('individual')} </FRadioGroup>
value="individual" </FFormGroup>
/>
</RadioGroup>
</FormGroup>
)}
</FastField>
); );
} }

33
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}
shouldUpdate={categoriesFieldShouldUpdate}
>
{({ form, field: { value }, meta: { error, touched } }) => (
<FormGroup
label={<T id={'category'} />} label={<T id={'category'} />}
inline={true} inline={true}
intent={inputIntent({ error, touched })}
helperText={<ErrorMessage name="category_id" />}
className={classNames('form-group--category', Classes.FILL)}
> >
<CategoriesSelectList <FSelect
categories={itemsCategories} name={'category_id'}
selecetedCategoryId={value} items={itemsCategories}
onCategorySelected={(category) => { valueAccessor={'id'}
form.setFieldValue('category_id', category.id); textAccessor={'name'}
}} placeholder={<T id={'select_category'} />}
popoverProps={{ minimal: true, captureDismiss: true }}
/> />
</FormGroup> </FFormGroup>
)}
</FastField>
</Col> </Col>
<Col xs={3}> <Col xs={3}>

64
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
intent={inputIntent({ error, touched })}
helperText={<ErrorMessage name={'email'} />}
className={'form-group--email'}
label={<T id={'vendor_email'} />} label={<T id={'vendor_email'} />}
inline={true} inline={true}
> >
<InputGroup {...field} /> <FInputGroup name={'email'} />
</FormGroup> </FFormGroup>
)}
</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('work')}
{...field}
/>
)}
</FastField>
<FastField name={'personal_phone'}>
{({ field, meta: { error, touched } }) => (
<InputGroup
intent={inputIntent({ error, touched })}
placeholder={intl.get('mobile')} 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>
); );
} }

85
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,75 +24,43 @@ 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'}>
{({ form, field: { value }, meta: { error, touched } }) => (
<SalutationList <SalutationList
onItemSelect={(salutation) => { name={'salutation'}
form.setFieldValue('salutation', salutation.label);
}}
selectedItem={value}
popoverProps={{ minimal: true }} popoverProps={{ minimal: true }}
className={classNames(
CLASSES.FORM_GROUP_LIST_SELECT,
CLASSES.FILL,
'input-group--salutation-list',
'select-list--fill-button',
)}
/> />
)} <FInputGroup
</FastField> name={'first_name'}
<FastField name={'first_name'}>
{({ field, meta: { error, touched } }) => (
<InputGroup
placeholder={intl.get('first_name')} placeholder={intl.get('first_name')}
intent={inputIntent({ error, touched })}
className={classNames('input-group--first-name')} className={classNames('input-group--first-name')}
inputRef={(ref) => (firstNameFieldRef.current = ref)} inputRef={(ref) => (firstNameFieldRef.current = ref)}
{...field}
/> />
)} <FInputGroup
</FastField> name={'last_name'}
<FastField name={'last_name'}>
{({ field, meta: { error, touched } }) => (
<InputGroup
placeholder={intl.get('last_name')} placeholder={intl.get('last_name')}
intent={inputIntent({ error, touched })}
className={classNames('input-group--last-name')} 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'} />}
intent={inputIntent({ error, touched })}
helperText={<ErrorMessage name={'company_name'} />}
inline={true} inline={true}
> >
<InputGroup {...field} /> <FInputGroup name={'company_name'} />
</FormGroup> </FFormGroup>
)}
</FastField>
{/*----------- Display Name -----------*/} {/*----------- Display Name -----------*/}
<Field name={'display_name'}> <FFormGroup
{({ form, field: { value }, meta: { error, touched } }) => ( name={'display_name'}
<FormGroup
helperText={<ErrorMessage name={'display_name'} />}
intent={inputIntent({ error, touched })}
label={ label={
<> <>
<T id={'display_name'} /> <T id={'display_name'} />
@@ -104,19 +72,10 @@ function VendorFormPrimarySection() {
inline={true} inline={true}
> >
<DisplayNameList <DisplayNameList
firstName={form.values.first_name} name={'display_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 }} popoverProps={{ minimal: true }}
/> />
</FormGroup> </FFormGroup>
)}
</Field>
</div> </div>
); );
} }