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

feat: optimize customer form performance.

Browse Source 
feat: optimize item category form performance.
This commit is contained in:
Ahmed Bouhuolia
2020-11-11 17:18:54 +02:00
parent dcc431b9a9
commit a1e8dbf1c7
16 changed files with 727 additions and 987 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
client/src/containers/Customers/Customer.js
View File

@@ -42,7 +42,7 @@ function Customer({
const handleFormSubmit = useCallback(
(payload) => {
payload.redirect && history.push('/customers');
},
[history],
);

521
client/src/containers/Customers/CustomerAddressTabs.js
View File

@@ -1,16 +1,11 @@
import React from 'react';
import { FormGroup, Intent, InputGroup, TextArea } from '@blueprintjs/core';
import { FormGroup, InputGroup, TextArea } from '@blueprintjs/core';
import { Row, Col } from 'components';
import { FormattedMessage as T } from 'react-intl';
import { FastField, ErrorMessage } from 'formik';
import { inputIntent } from 'utils';
import ErrorMessage from 'components/ErrorMessage';
const CustomerBillingAddress = ({
errors,
touched,
setFieldValue,
getFieldProps,
}) => {
const CustomerBillingAddress = ({}) => {
return (
<div className={'tab-panel--address'}>
<Row>
@@ -19,172 +14,105 @@ const CustomerBillingAddress = ({
<T id={'billing_address'} />
</h4>
{/*------------ Billing Address country -----------*/}
<FormGroup
className={'form-group--journal-number'}
intent={
errors.billing_address_country &&
touched.billing_address_country &&
Intent.DANGER
}
inline={true}
helperText={
<ErrorMessage
name="billing_address_country"
{...{ errors, touched }}
/>
}
label={<T id={'country'} />}
>
<InputGroup
intent={
errors.billing_address_country &&
touched.billing_address_country &&
Intent.DANGER
}
{...getFieldProps('billing_address_country')}
/>
</FormGroup>
<FastField name={'billing_address_country'}>
{({ field, field: { value }, meta: { error, touched } }) => (
<FormGroup
className={'form-group--journal-number'}
intent={inputIntent({ error, touched })}
inline={true}
helperText={<ErrorMessage name="billing_address_country" />}
label={<T id={'country'} />}
>
<InputGroup {...field} />
</FormGroup>
)}
</FastField>
{/*------------ Billing Address 1 -----------*/}
<FormGroup
label={<T id={'address_line_1'} />}
className={'form-group--address_line_1'}
intent={
errors.billing_address_1 &&
touched.billing_address_1 &&
Intent.DANGER
}
inline={true}
helperText={
<ErrorMessage name="billing_address_1" {...{ errors, touched }} />
}
>
<TextArea
intent={
errors.billing_address_1 &&
touched.billing_address_1 &&
Intent.DANGER
}
{...getFieldProps('billing_address_1')}
/>
</FormGroup>
<FastField name={'billing_address_1'}>
{({ field, field: { value }, meta: { error, touched } }) => (
<FormGroup
label={<T id={'address_line_1'} />}
className={'form-group--address_line_1'}
intent={inputIntent({ error, touched })}
inline={true}
helperText={<ErrorMessage name="billing_address_1" />}
>
<TextArea {...field} />
</FormGroup>
)}
</FastField>
{/*------------ Billing Address 2 -----------*/}
<FormGroup
label={<T id={'address_line_2'} />}
className={'form-group--journal-number'}
intent={
errors.billing_address_2 &&
touched.billing_address_2 &&
Intent.DANGER
}
inline={true}
helperText={
<ErrorMessage name="billing_address_2" {...{ errors, touched }} />
}
>
<TextArea
intent={
errors.billing_address_2 &&
touched.billing_address_2 &&
Intent.DANGER
}
{...getFieldProps('billing_address_2')}
/>
</FormGroup>
<FastField name={'billing_address_2'}>
{({ field, field: { value }, meta: { error, touched } }) => (
<FormGroup
label={<T id={'address_line_2'} />}
className={'form-group--journal-number'}
intent={inputIntent({ error, touched })}
inline={true}
helperText={<ErrorMessage name="billing_address_2" />}
>
<TextArea {...field} />
</FormGroup>
)}
</FastField>
{/*------------ Billing Address city -----------*/}
<FormGroup
label={<T id={'city_town'} />}
className={'form-group--journal-number'}
intent={
errors.billing_address_city &&
touched.billing_address_city &&
Intent.DANGER
}
inline={true}
helperText={
<ErrorMessage
name="billing_address_city"
{...{ errors, touched }}
/>
}
>
<InputGroup
intent={
errors.billing_address_city &&
touched.billing_address_city &&
Intent.DANGER
}
{...getFieldProps('billing_address_city')}
/>
</FormGroup>
<FastField name={'billing_address_city'}>
{({ field, field: { value }, meta: { error, touched } }) => (
<FormGroup
label={<T id={'city_town'} />}
className={'form-group--journal-number'}
intent={inputIntent({ error, touched })}
inline={true}
helperText={<ErrorMessage name="billing_address_city" />}
>
<InputGroup {...field} />
</FormGroup>
)}
</FastField>
{/*------------ Billing Address state -----------*/}
<FormGroup
label={<T id={'state'} />}
className={'form-group--journal-number'}
intent={
errors.billing_address_state &&
touched.billing_address_state &&
Intent.DANGER
}
inline={true}
helperText={
<ErrorMessage
name="billing_address_state"
{...{ errors, touched }}
/>
}
>
<InputGroup
intent={
errors.billing_address_state &&
touched.billing_address_state &&
Intent.DANGER
}
{...getFieldProps('billing_address_state')}
/>
</FormGroup>
<FastField name={'billing_address_state'}>
{({ field, field: { value }, meta: { error, touched } }) => (
<FormGroup
label={<T id={'state'} />}
className={'form-group--journal-number'}
intent={inputIntent({ error, touched })}
inline={true}
helperText={<ErrorMessage name="billing_address_state" />}
>
<InputGroup {...field} />
</FormGroup>
)}
</FastField>
{/*------------ Billing Address postcode -----------*/}
<FormGroup
label={<T id={'zip_code'} />}
intent={
errors.billing_address_postcode &&
touched.billing_address_postcode &&
Intent.DANGER
}
inline={true}
helperText={
<ErrorMessage
name="billing_address_postcode"
{...{ errors, touched }}
/>
}
>
<InputGroup
intent={
errors.billing_address_postcode &&
touched.billing_address_postcode &&
Intent.DANGER
}
{...getFieldProps('billing_address_postcode')}
/>
</FormGroup>
<FastField name={'billing_address_postcode'}>
{({ field, field: { value }, meta: { error, touched } }) => (
<FormGroup
label={<T id={'zip_code'} />}
intent={inputIntent({ error, touched })}
inline={true}
helperText={<ErrorMessage name="billing_address_postcode" />}
>
<InputGroup {...field} />
</FormGroup>
)}
</FastField>
{/*------------ Billing Address phone -----------*/}
<FormGroup
label={<T id={'phone'} />}
intent={
errors.billing_address_phone && touched.billing_address_phone && Intent.DANGER
}
inline={true}
helperText={
<ErrorMessage name="billing_address_phone" {...{ errors, touched }} />
}
>
<InputGroup
intent={
errors.billing_address_phone && touched.billing_address_phone && Intent.DANGER
}
{...getFieldProps('billing_address_phone')}
/>
</FormGroup>
<FastField name={'billing_address_phone'}>
{({ field, field: { value }, meta: { error, touched } }) => (
<FormGroup
label={<T id={'phone'} />}
intent={inputIntent({ error, touched })}
inline={true}
helperText={<ErrorMessage name="billing_address_phone" />}
>
<InputGroup {...field} />
</FormGroup>
)}
</FastField>
</Col>
<Col xs={6}>
@@ -192,172 +120,107 @@ const CustomerBillingAddress = ({
<T id={'shipping_address'} />
</h4>
{/*------------ Shipping Address country -----------*/}
<FormGroup
label={<T id={'country'} />}
className={'form-group--journal-number'}
intent={
errors.shipping_address_country &&
touched.shipping_address_country &&
Intent.DANGER
}
inline={true}
helperText={
<ErrorMessage
name="shipping_address_country"
{...{ errors, touched }}
/>
}
>
<InputGroup
intent={
errors.shipping_address_country &&
touched.shipping_address_country &&
Intent.DANGER
}
{...getFieldProps('shipping_address_country')}
/>
</FormGroup>
<FastField name={'shipping_address_country'}>
{({ field, field: { value }, meta: { error, touched } }) => (
<FormGroup
label={<T id={'country'} />}
className={'form-group--journal-number'}
intent={inputIntent({ error, touched })}
inline={true}
helperText={<ErrorMessage name="shipping_address_country" />}
>
<InputGroup {...field} />
</FormGroup>
)}
</FastField>
{/*------------ Shipping Address 1 -----------*/}
<FormGroup
label={<T id={'address_line_1'} />}
className={'form-group--journal-number'}
intent={
errors.shipping_address_1 &&
touched.shipping_address_1 &&
Intent.DANGER
}
inline={true}
helperText={
<ErrorMessage name="shipping_address_1" {...{ errors, touched }} />
}
>
<TextArea
intent={
errors.shipping_address_1 &&
touched.shipping_address_1 &&
Intent.DANGER
}
{...getFieldProps('shipping_address_1')}
/>
</FormGroup>
<FastField name={'shipping_address_1'}>
{({ field, field: { value }, meta: { error, touched } }) => (
<FormGroup
label={<T id={'address_line_1'} />}
className={'form-group--journal-number'}
intent={inputIntent({ error, touched })}
inline={true}
helperText={<ErrorMessage name="shipping_address_1" />}
>
<TextArea {...field} />
</FormGroup>
)}
</FastField>
{/*------------ Shipping Address 2 -----------*/}
<FormGroup
label={<T id={'address_line_2'} />}
className={'form-group--journal-number'}
intent={
errors.shipping_address_2 &&
touched.shipping_address_2 &&
Intent.DANGER
}
inline={true}
helperText={
<ErrorMessage name="shipping_address_2" {...{ errors, touched }} />
}
>
<TextArea
intent={
errors.shipping_address_2 &&
touched.shipping_address_2 &&
Intent.DANGER
}
{...getFieldProps('shipping_address_2')}
/>
</FormGroup>
<FastField name={'shipping_address_2'}>
{({ field, field: { value }, meta: { error, touched } }) => (
<FormGroup
label={<T id={'address_line_2'} />}
className={'form-group--journal-number'}
intent={inputIntent({ error, touched })}
inline={true}
helperText={<ErrorMessage name="shipping_address_2" />}
>
<InputGroup {...field} />
</FormGroup>
)}
</FastField>
{/*------------ Shipping Address city -----------*/}
<FormGroup
label={<T id={'city_town'} />}
className={'form-group--journal-number'}
intent={
errors.shipping_address_city &&
touched.shipping_address_city &&
Intent.DANGER
}
inline={true}
helperText={
<ErrorMessage
name="shipping_address_city"
{...{ errors, touched }}
/>
}
>
<InputGroup
intent={
errors.shipping_address_city &&
touched.shipping_address_city &&
Intent.DANGER
}
{...getFieldProps('shipping_address_city')}
/>
</FormGroup>
<FastField name={'shipping_address_city'}>
{({ field, field: { value }, meta: { error, touched } }) => (
<FormGroup
label={<T id={'city_town'} />}
className={'form-group--journal-number'}
intent={inputIntent({ error, touched })}
inline={true}
helperText={<ErrorMessage name="shipping_address_city" />}
>
<InputGroup {...field} />
</FormGroup>
)}
</FastField>
{/*------------ Shipping Address state -----------*/}
<FormGroup
label={<T id={'state'} />}
className={'form-group--journal-number'}
intent={
errors.shipping_address_state &&
touched.shipping_address_state &&
Intent.DANGER
}
inline={true}
helperText={
<ErrorMessage
name="shipping_address_state"
{...{ errors, touched }}
/>
}
>
<InputGroup
intent={
errors.shipping_address_state &&
touched.shipping_address_state &&
Intent.DANGER
}
{...getFieldProps('shipping_address_state')}
/>
</FormGroup>
<FastField name={'shipping_address_state'}>
{({ field, field: { value }, meta: { error, touched } }) => (
<FormGroup
label={<T id={'state'} />}
className={'form-group--journal-number'}
intent={inputIntent({ error, touched })}
inline={true}
helperText={<ErrorMessage name="shipping_address_state" />}
>
<InputGroup {...field} />
</FormGroup>
)}
</FastField>
{/*------------ Shipping Address postcode -----------*/}
<FormGroup
label={<T id={'zip_code'} />}
intent={
errors.shipping_address_postcode &&
touched.shipping_address_postcode &&
Intent.DANGER
}
inline={true}
helperText={
<ErrorMessage
name="shipping_address_postcode"
{...{ errors, touched }}
/>
}
>
<InputGroup
intent={
errors.shipping_address_postcode &&
touched.shipping_address_postcode &&
Intent.DANGER
}
{...getFieldProps('shipping_address_postcode')}
/>
</FormGroup>
<FastField name={'shipping_address_postcode'}>
{({ field, field: { value }, meta: { error, touched } }) => (
<FormGroup
label={<T id={'zip_code'} />}
intent={inputIntent({ error, touched })}
inline={true}
helperText={<ErrorMessage name="shipping_address_postcode" />}
>
<InputGroup {...field} />
</FormGroup>
)}
</FastField>
{/*------------ Shipping Address phone -----------*/}
<FormGroup
label={<T id={'phone'} />}
intent={
errors.shipping_address_phone && touched.shipping_address_phone && Intent.DANGER
}
inline={true}
helperText={
<ErrorMessage name="shipping_address_phone" {...{ errors, touched }} />
}
>
<InputGroup
intent={
errors.shipping_address_phone && touched.shipping_address_phone && Intent.DANGER
}
{...getFieldProps('shipping_address_phone')}
/>
</FormGroup>
<FastField name={'shipping_address_phone'}>
{({ field, field: { value }, meta: { error, touched } }) => (
<FormGroup
label={<T id={'phone'} />}
intent={inputIntent({ error, touched })}
inline={true}
helperText={<ErrorMessage name="shipping_address_phone" />}
>
<InputGroup {...field} />
</FormGroup>
)}
</FastField>
</Col>
</Row>
</div>

168
client/src/containers/Customers/CustomerFinancialPanel.js
View File

@@ -1,27 +1,21 @@
import React, { useCallback, useState } from 'react';
import moment from 'moment';
import classNames from 'classnames';
import { FormGroup, Intent, Position, Classes } from '@blueprintjs/core';
import { FormGroup, Position, Classes } from '@blueprintjs/core';
import { DateInput } from '@blueprintjs/datetime';
import {
ErrorMessage,
MoneyInputGroup,
CurrencySelectList,
Row,
Col,
} from 'components';
import { FastField, ErrorMessage } from 'formik';
import { MoneyInputGroup, CurrencySelectList, Row, Col } from 'components';
import { FormattedMessage as T } from 'react-intl';
import withCurrencies from 'containers/Currencies/withCurrencies';
import { compose, momentFormatter, tansformDateValue } from 'utils';
import {
compose,
momentFormatter,
tansformDateValue,
inputIntent,
} from 'utils';
function CustomerFinancialPanel({
setFieldValue,
errors,
touched,
values,
// #withCurrencies
currenciesList,
@@ -29,21 +23,6 @@ function CustomerFinancialPanel({
}) {
const [selectedItems, setSelectedItems] = useState();
const handleDateChange = useCallback(
(date) => {
const formatted = moment(date).format('YYYY-MM-DD');
setFieldValue('opening_balance_at', formatted);
},
[setFieldValue],
);
const handleMoneyInputChange = useCallback(
(e, value) => {
setFieldValue('opening_balance', value);
},
[setFieldValue],
);
const onItemsSelect = useCallback(
(filedName) => {
return (filed) => {
@@ -51,77 +30,82 @@ function CustomerFinancialPanel({
...selectedItems,
[filedName]: filed,
});
setFieldValue(filedName, filed.currency_code);
// setFieldValue(filedName, filed.currency_code);
};
},
[setFieldValue, selectedItems],
[selectedItems],
);
return (
<div className={'tab-panel--financial'}>
<Row>
<Col xs={6}>
{/*------------ Opening balance at -----------*/}
<FormGroup
label={<T id={'opening_balance_at'} />}
className={classNames('form-group--select-list', Classes.FILL)}
intent={
errors.opening_balance_at &&
touched.opening_balance_at &&
Intent.DANGER
}
inline={true}
helperText={
<ErrorMessage
name="opening_balance_at"
{...{ errors, touched }}
/>
}
>
<DateInput
{...momentFormatter('YYYY/MM/DD')}
value={tansformDateValue(values.opening_balance_at)}
onChange={handleDateChange}
popoverProps={{ position: Position.BOTTOM, minimal: true }}
disabled={customerId}
/>
</FormGroup>
{/*------------ Opening balance -----------*/}
<FormGroup
label={<T id={'opening_balance'} />}
className={classNames('form-group--opening-balance', Classes.FILL)}
intent={
errors.opening_balance && touched.opening_balance && Intent.DANGER
}
inline={true}
>
<MoneyInputGroup
value={values.opening_balance}
prefix={'$'}
onChange={handleMoneyInputChange}
inputGroupProps={{
fill: true,
}}
disabled={customerId}
/>
</FormGroup>
{/*------------ Currency -----------*/}
<FormGroup
label={<T id={'currency'} />}
className={classNames(
'form-group--select-list',
'form-group--balance-currency',
Classes.FILL,
<FastField name={'opening_balance_at'}>
{({ form, field: { value }, meta: { error, touched } }) => (
<FormGroup
label={<T id={'opening_balance_at'} />}
className={classNames('form-group--select-list', Classes.FILL)}
intent={inputIntent({ error, touched })}
inline={true}
helperText={<ErrorMessage name="opening_balance_at" />}
>
<DateInput
{...momentFormatter('YYYY/MM/DD')}
value={tansformDateValue(value)}
// onChange={}
popoverProps={{ position: Position.BOTTOM, minimal: true }}
disabled={customerId}
/>
</FormGroup>
)}
inline={true}
>
{/* <CurrenciesSelectList /> */}
<CurrencySelectList
currenciesList={currenciesList}
selectedCurrencyCode={values.currency_code}
onCurrencySelected={onItemsSelect('currency_code')}
disabled={customerId}
/>
</FormGroup>
</FastField>
{/*------------ Opening balance -----------*/}
<FastField name={'opening_balance'}>
{({ field, field: { value }, meta: { error, touched } }) => (
<FormGroup
label={<T id={'opening_balance'} />}
className={classNames(
'form-group--opening-balance',
Classes.FILL,
)}
intent={inputIntent({ error, touched })}
inline={true}
>
<MoneyInputGroup
value={value}
prefix={'$'}
inputGroupProps={{
fill: true,
}}
disabled={customerId}
{...field}
/>
</FormGroup>
)}
</FastField>
{/*------------ Currency -----------*/}
<FastField name={'currency_code'}>
{({ form, field: { value }, meta: { error, touched } }) => (
<FormGroup
label={<T id={'currency'} />}
className={classNames(
'form-group--select-list',
'form-group--balance-currency',
Classes.FILL,
)}
inline={true}
>
<CurrencySelectList
currenciesList={currenciesList}
selectedCurrencyCode={value}
onCurrencySelected={onItemsSelect('currency_code')}
disabled={customerId}
/>
</FormGroup>
)}
</FastField>
</Col>
</Row>
</div>

123
client/src/containers/Customers/CustomerForm.js
View File

@@ -1,6 +1,6 @@
import React, { useState, useMemo, useCallback, useEffect } from 'react';
import * as Yup from 'yup';
import { useFormik } from 'formik';
import { useFormik, Formik, Form } from 'formik';
import moment from 'moment';
import { Intent } from '@blueprintjs/core';
import { FormattedMessage as T, useIntl } from 'react-intl';
@@ -23,7 +23,7 @@ import withMediaActions from 'containers/Media/withMediaActions';
import withCustomers from 'containers/Customers//withCustomers';
import useMedia from 'hooks/useMedia';
import { compose } from 'utils';
import { compose, saveInvoke } from 'utils';
/**
* Customer form.
@@ -47,13 +47,12 @@ function CustomerForm({
requestDeleteMedia,
// #Props
customerId,
onFormSubmit,
onCancelForm,
}) {
const { formatMessage } = useIntl();
const history = useHistory();
const [payload, setPayload] = useState({});
const {
setFiles,
saveMedia,
@@ -129,7 +128,7 @@ function CustomerForm({
billing_address_2: '',
billing_address_city: '',
billing_address_state: '',
billing_address_postcode: null,
billing_address_postcode: '',
billing_address_phone: '',
shipping_address_country: '',
@@ -137,7 +136,7 @@ function CustomerForm({
shipping_address_2: '',
shipping_address_city: '',
shipping_address_state: '',
shipping_address_postcode: null,
shipping_address_postcode: '',
shipping_address_phone: '',
opening_balance: '',
@@ -160,14 +159,6 @@ function CustomerForm({
[customer, defaultInitialValues],
);
const saveInvokeSubmit = useCallback(
(payload) => {
onFormSubmit && onFormSubmit(payload);
},
[onFormSubmit],
);
useEffect(() => {
customer && customer.id
? changePageTitle(formatMessage({ id: 'edit_customer' }))
@@ -178,7 +169,7 @@ function CustomerForm({
values,
{ setSubmitting, resetForm, setErrors },
) => {
const formValues = { ...values, status: payload.publish };
const formValues = { ...values };
if (customer && customer.id) {
requestEditCustomer(customer.id, formValues)
.then((response) => {
@@ -190,7 +181,6 @@ function CustomerForm({
});
setSubmitting(false);
resetForm();
saveInvokeSubmit({ action: 'update', ...payload });
})
.catch((errors) => {
setSubmitting(false);
@@ -205,7 +195,6 @@ function CustomerForm({
intent: Intent.SUCCESS,
});
setSubmitting(false);
saveInvokeSubmit({ action: 'new', ...payload });
})
.catch((errors) => {
setSubmitting(false);
@@ -213,23 +202,6 @@ function CustomerForm({
}
};
const {
setFieldValue,
getFieldProps,
errors,
values,
touched,
isSubmitting,
handleSubmit,
} = useFormik({
enableReinitialize: true,
validationSchema: validationSchema,
initialValues: {
...initialValues,
},
onSubmit: handleFormSubmit,
});
const initialAttachmentFiles = useMemo(() => {
return customer && customer.media
? customer.media.map((attach) => ({
@@ -254,65 +226,44 @@ function CustomerForm({
},
[setDeletedFiles, deletedFiles],
);
const handleSubmitClick = useCallback(
(payload) => {
setPayload(payload);
handleSubmit();
},
[setPayload, handleSubmit],
);
const handleCancelClick = useCallback(
(payload) => {
onCancelForm && onCancelForm(payload);
(payload, event) => {
},
[onCancelForm],
[],
);
return (
<div className={classNames(CLASSES.PAGE_FORM, CLASSES.PAGE_FORM_CUSTOMER)}>
<form onSubmit={handleSubmit}>
<div class={classNames(CLASSES.PAGE_FORM_HEADER)}>
<div className={classNames(CLASSES.PAGE_FORM_HEADER_PRIMARY)}>
<CustomerFormPrimarySection
setFieldValue={setFieldValue}
getFieldProps={getFieldProps}
errors={errors}
values={values}
touched={touched}
<Formik
validationSchema={validationSchema}
initialValues={initialValues}
onSubmit={handleFormSubmit}
>
{({ isSubmitting }) => (
<Form>
<div class={classNames(CLASSES.PAGE_FORM_HEADER)}>
<div className={classNames(CLASSES.PAGE_FORM_HEADER_PRIMARY)}>
<CustomerFormPrimarySection />
</div>
<div className={'page-form__after-priamry-section'}>
<CustomerFormAfterPrimarySection />
</div>
</div>
<div className={classNames(CLASSES.PAGE_FORM_TABS)}>
<CustomersTabs customerId={customerId} />
</div>
<CustomerFloatingActions
isSubmitting={isSubmitting}
onCancelClick={handleCancelClick}
customerId={customer}
/>
</div>
<div className={'page-form__after-priamry-section'}>
<CustomerFormAfterPrimarySection
setFieldValue={setFieldValue}
getFieldProps={getFieldProps}
errors={errors}
values={values}
touched={touched}
/>
</div>
</div>
<div className={classNames(CLASSES.PAGE_FORM_TABS)}>
<CustomersTabs
setFieldValue={setFieldValue}
getFieldProps={getFieldProps}
errors={errors}
values={values}
touched={touched}
customerId={customer}
/>
</div>
</form>
<CustomerFloatingActions
isSubmitting={isSubmitting}
onSubmitClick={handleSubmitClick}
// customer={customer}
onCancelClick={handleCancelClick}
customerId={customer}
/>
</Form>
)}
</Formik>
</div>
);
}

97
client/src/containers/Customers/CustomerFormAfterPrimarySection.js
View File

@@ -1,35 +1,26 @@
import React from 'react';
import {
FormGroup,
Intent,
InputGroup,
ControlGroup,
} from '@blueprintjs/core';
import { FormGroup, InputGroup, ControlGroup } from '@blueprintjs/core';
import { FastField, ErrorMessage } from 'formik';
import { FormattedMessage as T } from 'react-intl';
import { ErrorMessage } from 'components';
import { inputIntent } from 'utils';
export default function CustomerFormAfterPrimarySection({
setFieldValue,
getFieldProps,
errors,
values,
touched,
}) {
export default function CustomerFormAfterPrimarySection({}) {
return (
<div class="customer-form__after-primary-section-content">
{/*------------ Customer email -----------*/}
<FormGroup
intent={errors.email && touched.email && Intent.DANGER}
helperText={<ErrorMessage name={'email'} {...{ errors, touched }} />}
className={'form-group--email'}
label={<T id={'customer_email'} />}
inline={true}
>
<InputGroup
intent={errors.email && touched.email && Intent.DANGER}
{...getFieldProps('email')}
/>
</FormGroup>
<FastField name={'email'}>
{({ field, meta: { error, touched } }) => (
<FormGroup
intent={inputIntent({ error, touched })}
helperText={<ErrorMessage name={'email'} />}
className={'form-group--email'}
label={<T id={'customer_email'} />}
inline={true}
>
<InputGroup {...field} />
</FormGroup>
)}
</FastField>
{/*------------ Phone number -----------*/}
<FormGroup
@@ -38,33 +29,41 @@ export default function CustomerFormAfterPrimarySection({
inline={true}
>
<ControlGroup>
<InputGroup
intent={errors.work_phone && touched.work_phone && Intent.DANGER}
{...getFieldProps('work_phone')}
placeholder={'Work'}
/>
<InputGroup
intent={errors.personal_phone && touched.personal_phone && Intent.DANGER}
{...getFieldProps('personal_phone')}
placeholder={'Mobile'}
/>
<FastField name={'work_phone'}>
{({ field, meta: { error, touched } }) => (
<InputGroup
intent={inputIntent({ error, touched })}
placeholder={'Work'}
{...field}
/>
)}
</FastField>
<FastField name={'personal_phone'}>
{({ field, meta: { error, touched } }) => (
<InputGroup
intent={inputIntent({ error, touched })}
placeholder={'Mobile'}
{...field}
/>
)}
</FastField>
</ControlGroup>
</FormGroup>
{/*------------ Customer website -----------*/}
<FormGroup
intent={errors.website && touched.website && Intent.DANGER}
helperText={<ErrorMessage name={'website'} {...{ errors, touched }} />}
className={'form-group--website'}
label={<T id={'website'} />}
inline={true}
>
<InputGroup
intent={errors.website && touched.website && Intent.DANGER}
{...getFieldProps('website')}
/>
</FormGroup>
<FastField name={'website'}>
{({ field, meta: { error, touched } }) => (
<FormGroup
intent={inputIntent({ error, touched })}
helperText={<ErrorMessage name={'website'} />}
className={'form-group--website'}
label={<T id={'website'} />}
inline={true}
>
<InputGroup {...field} />
</FormGroup>
)}
</FastField>
</div>
);
}

182
client/src/containers/Customers/CustomerFormPrimarySection.js
View File

@@ -1,58 +1,27 @@
import React, { useMemo, useCallback } from 'react';
import React from 'react';
import classNames from 'classnames';
import { FormGroup, Intent, InputGroup, ControlGroup } from '@blueprintjs/core';
import { FormGroup, InputGroup, ControlGroup } from '@blueprintjs/core';
import { FastField, Field, ErrorMessage } from 'formik';
import { FormattedMessage as T } from 'react-intl';
import {
Hint,
FieldRequiredHint,
SalutationList,
DisplayNameList,
ErrorMessage,
Row,
Col,
} from 'components';
import CustomerTypeRadioField from 'containers/Customers/CustomerTypeRadioField';
import { CLASSES } from 'common/classes';
import { inputIntent } from 'utils';
/**
* Customer form primary section.
*/
export default function CustomerFormPrimarySection({
setFieldValue,
getFieldProps,
errors,
values,
touched,
}) {
const handleCustomerTypeCahange = useCallback(
(value) => {
setFieldValue('customer_type', value);
},
[setFieldValue],
);
// Handle salutation field select.
const handleSalutationSelect = useCallback(
(salutation) => {
setFieldValue('salutation', salutation.label);
},
[setFieldValue],
);
// Handle display name field select.
const handleDisplayNameSelect = useCallback(
(displayName) => {
setFieldValue('display_name', displayName.label);
},
[setFieldValue],
);
return (
<div className={'customer-form__primary-section-content'}>
{/**-----------Customer type. -----------*/}
<CustomerTypeRadioField
selectedValue={values.customer_type}
onChange={handleCustomerTypeCahange}
/>
<CustomerTypeRadioField />
{/**----------- Contact name -----------*/}
<FormGroup
@@ -61,74 +30,93 @@ export default function CustomerFormPrimarySection({
inline={true}
>
<ControlGroup>
<SalutationList
onItemSelect={handleSalutationSelect}
selectedItem={values.salutation}
popoverProps={{ minimal: true }}
className={classNames(
CLASSES.FORM_GROUP_LIST_SELECT,
CLASSES.FILL,
'input-group--salutation-list',
'select-list--fill-button',
<FastField name={'salutation'}>
{({ form, field: { value }, meta: { error, touched } }) => (
<SalutationList
onItemSelect={(salutation) => {
form.setFieldValue('salutation', salutation.label);
}}
selectedItem={value}
popoverProps={{ minimal: true }}
className={classNames(
CLASSES.FORM_GROUP_LIST_SELECT,
CLASSES.FILL,
'input-group--salutation-list',
'select-list--fill-button',
)}
/>
)}
/>
<InputGroup
placeholder={'First Name'}
intent={errors.first_name && touched.first_name && Intent.DANGER}
{...getFieldProps('first_name')}
className={classNames('input-group--first-name')}
/>
<InputGroup
placeholder={'Last Name'}
intent={errors.last_name && touched.last_name && Intent.DANGER}
{...getFieldProps('last_name')}
className={classNames('input-group--last-name')}
/>
</FastField>
<FastField name={'first_name'}>
{({ field, meta: { error, touched } }) => (
<InputGroup
placeholder={'First Name'}
intent={inputIntent({ error, touched })}
className={classNames('input-group--first-name')}
{...field}
/>
)}
</FastField>
<FastField name={'last_name'}>
{({ field, meta: { error, touched } }) => (
<InputGroup
placeholder={'Last Name'}
intent={inputIntent({ error, touched })}
className={classNames('input-group--last-name')}
{...field}
/>
)}
</FastField>
</ControlGroup>
</FormGroup>
{/*----------- Company Name -----------*/}
<FormGroup
className={classNames('form-group--company_name')}
label={<T id={'company_name'} />}
intent={errors.company_name && touched.company_name && Intent.DANGER}
helperText={
<ErrorMessage {...{ errors, touched }} name={'company_name'} />
}
inline={true}
>
<InputGroup
intent={errors.company_name && touched.company_name && Intent.DANGER}
{...getFieldProps('company_name')}
/>
</FormGroup>
<FastField name={'company_name'}>
{({ field, meta: { error, touched } }) => (
<FormGroup
className={classNames('form-group--company_name')}
label={<T id={'company_name'} />}
intent={inputIntent({ error, touched })}
helperText={<ErrorMessage name={'company_name'} />}
inline={true}
>
<InputGroup {...field} />
</FormGroup>
)}
</FastField>
{/*----------- Display Name -----------*/}
<FormGroup
intent={errors.display_name && touched.display_name && Intent.DANGER}
helperText={
<ErrorMessage {...{ errors, touched }} name={'display_name'} />
}
label={
<>
<T id={'display_name'} />
<FieldRequiredHint />
<Hint />
</>
}
className={classNames(CLASSES.FORM_GROUP_LIST_SELECT, CLASSES.FILL)}
inline={true}
>
<DisplayNameList
firstName={values.first_name}
lastName={values.last_name}
company={values.company_name}
salutation={values.salutation}
onItemSelect={handleDisplayNameSelect}
// selectedItem={values.display_name}
popoverProps={{ minimal: true }}
/>
</FormGroup>
<Field name={'display_name'}>
{({ form, field: { value }, meta: { error, touched } }) => (
<FormGroup
helperText={<ErrorMessage name={'display_name'} />}
intent={inputIntent({ error, touched })}
label={
<>
<T id={'display_name'} />
<FieldRequiredHint />
<Hint />
</>
}
className={classNames(CLASSES.FORM_GROUP_LIST_SELECT, CLASSES.FILL)}
inline={true}
>
<DisplayNameList
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>
);
}

32
client/src/containers/Customers/CustomerNotePanel.js
View File

@@ -1,27 +1,25 @@
import React from 'react';
import classNames from 'classnames';
import { FormGroup, Intent, TextArea, Classes } from '@blueprintjs/core';
import { Row, Col } from 'components';
import { FormGroup, TextArea, Classes } from '@blueprintjs/core';
import { FastField, ErrorMessage } from 'formik';
import { FormattedMessage as T } from 'react-intl';
import ErrorMessage from 'components/ErrorMessage';
import { inputIntent } from 'utils';
export default function CustomerNotePanel({ errors, touched, getFieldProps }) {
return (
<div className={'tab-panel--note'}>
<FormGroup
label={<T id={'note'} />}
className={classNames('form-group--note', Classes.FILL)}
intent={errors.note && touched.note && Intent.DANGER}
helperText={
<ErrorMessage name="payment_date" {...{ errors, touched }} />
}
>
<TextArea
intent={errors.note && touched.note && Intent.DANGER}
{...getFieldProps('note')}
/>
</FormGroup>
<FastField name={'note'}>
{({ field, field: { value }, meta: { error, touched } }) => (
<FormGroup
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>
);
}

42
client/src/containers/Customers/CustomerTypeRadioField.js
View File

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

31
client/src/containers/Customers/CustomersTabs.js
View File

@@ -15,8 +15,7 @@ export default function CustomersTabs({
customerId,
}) {
const { formatMessage } = useIntl();
const [customer] = useState(customerId);
return (
<div>
<Tabs
@@ -28,39 +27,17 @@ export default function CustomersTabs({
<Tab
id={'financial'}
title={formatMessage({ id: 'financial_details' })}
panel={
<CustomerFinancialPanel
values={values}
errors={errors}
setFieldValue={setFieldValue}
touched={touched}
customerId={customer}
/>
}
panel={<CustomerFinancialPanel />}
/>
<Tab
id={'address'}
title={formatMessage({ id: 'address' })}
panel={
<CustomerAddressTabs
setFieldValue={setFieldValue}
getFieldProps={getFieldProps}
errors={errors}
values={values}
touched={touched}
/>
}
panel={<CustomerAddressTabs />}
/>
<Tab
id="notes"
title={formatMessage({ id: 'notes' })}
panel={
<CustomerNotePanel
errors={errors}
touched={touched}
getFieldProps={getFieldProps}
/>
}
panel={<CustomerNotePanel />}
/>
<Tab
id={'attachement'}