QT/bigcapital
1
0
Fork 0
mirror of https://github.com/bigcapitalhq/bigcapital.git synced 2026-02-16 12:50:38 +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'}

216
client/src/containers/Dialogs/ItemCategoryDialog/ItemCategoryForm.js Normal file
View File

@@ -0,0 +1,216 @@
import React, { useCallback } from 'react';
import {
Button,
Classes,
FormGroup,
InputGroup,
Intent,
TextArea,
MenuItem,
} from '@blueprintjs/core';
import { FormattedMessage as T } from 'react-intl';
import classNames from 'classnames';
import { ErrorMessage, Form, FastField } from 'formik';
import {
ListSelect,
AccountsSelectList,
FieldRequiredHint,
Hint,
} from 'components';
import { inputIntent } from 'utils';
export default function ItemCategoryForm({
itemCategoryId,
accountsList,
categoriesList,
isSubmitting,
}) {
// Filters Item Categories list.
const filterItemCategories = useCallback(
(query, category, _index, exactMatch) => {
const normalizedTitle = category.name.toLowerCase();
const normalizedQuery = query.toLowerCase();
if (exactMatch) {
return normalizedTitle === normalizedQuery;
} else {
return normalizedTitle.indexOf(normalizedQuery) >= 0;
}
},
[],
);
const parentCategoryItem = useCallback(
(category, { handleClick, modifiers, query }) => {
return (
<MenuItem
text={category.name}
key={category.id}
onClick={handleClick}
/>
);
},
[],
);
return (
<Form>
<div className={Classes.DIALOG_BODY}>
{/* ----------- Category name ----------- */}
<FastField name={'name'}>
{({ field, field: { value }, meta: { error, touched } }) => (
<FormGroup
label={<T id={'category_name'} />}
labelInfo={FieldRequiredHint}
className={'form-group--category-name'}
intent={inputIntent({ error, touched })}
helperText={<ErrorMessage name="name" />}
inline={true}
>
<InputGroup medium={true} {...field} />
</FormGroup>
)}
</FastField>
{/* ----------- Parent Category ----------- */}
<FastField name={'parent_account_id'}>
{({ form, field: { value }, meta: { error, touched } }) => (
<FormGroup
label={<T id={'parent_category'} />}
labelInfo={Hint}
className={classNames(
'form-group--select-list',
'form-group--parent-category',
Classes.FILL,
)}
inline={true}
helperText={<ErrorMessage name="parent_category_id" />}
intent={inputIntent({ error, touched })}
>
<ListSelect
items={categoriesList}
noResults={<MenuItem disabled={true} text="No results." />}
itemRenderer={parentCategoryItem}
itemPredicate={filterItemCategories}
popoverProps={{ minimal: true }}
onItemSelect={(parentCategory) => {
form.setFieldValue('parent_category_id', parentCategory.id);
}}
selectedItem={value}
selectedItemProp={'id'}
defaultText={<T id={'select_parent_category'} />}
labelProp={'name'}
/>
</FormGroup>
)}
</FastField>
{/* ----------- Description ----------- */}
<FastField name={'description`'}>
{({ field, field: { value }, meta: { error, touched } }) => (
<FormGroup
label={<T id={'description'} />}
className={'form-group--description'}
intent={inputIntent({ error, touched })}
helperText={<ErrorMessage name="description" />}
inline={true}
>
<TextArea growVertically={true} large={true} {...field} />
</FormGroup>
)}
</FastField>
{/* ----------- Cost account ----------- */}
<FastField name={'cost_account_id'}>
{({ form, field: { value }, meta: { error, touched } }) => (
<FormGroup
label={<T id={'cost_account'} />}
inline={true}
intent={inputIntent({ error, touched })}
helperText={<ErrorMessage name="cost_account_id" />}
className={classNames(
'form-group--cost-account',
'form-group--select-list',
Classes.FILL,
)}
>
<AccountsSelectList
accounts={accountsList}
onAccountSelected={(account) => {
form.setFieldValue(account.id);
}}
defaultSelectText={<T id={'select_account'} />}
selectedAccountId={value}
filterByTypes={['cost_of_goods_sold']}
/>
</FormGroup>
)}
</FastField>
{/* ----------- Sell account ----------- */}
<FastField name={'sell_account_id'}>
{({ form, field: { value }, meta: { error, touched } }) => (
<FormGroup
label={<T id={'sell_account'} />}
inline={true}
intent={inputIntent({ error, touched })}
helperText={<ErrorMessage name="sell_account_id" />}
className={classNames(
'form-group--sell-account',
'form-group--select-list',
Classes.FILL,
)}
>
<AccountsSelectList
accounts={accountsList}
onAccountSelected={(account) => {
form.setFieldValue('sell_account_id', account.id);
}}
defaultSelectText={<T id={'select_account'} />}
selectedAccountId={value}
filterByTypes={['income']}
/>
</FormGroup>
)}
</FastField>
{/* ----------- inventory account ----------- */}
<FastField name={'inventory_account_id'}>
{({ form, field: { value }, meta: { error, touched } }) => (
<FormGroup
label={<T id={'inventory_account'} />}
inline={true}
intent={inputIntent({ error, touched })}
helperText={<ErrorMessage name="inventory_account_id" />}
className={classNames(
'form-group--sell-account',
'form-group--select-list',
Classes.FILL,
)}
>
<AccountsSelectList
accounts={accountsList}
onAccountSelected={(account) => {
form.setFieldValue('inventory_account_id', account.id);
}}
defaultSelectText={<T id={'select_account'} />}
selectedAccountId={value}
/>
</FormGroup>
)}
</FastField>
</div>
<div className={Classes.DIALOG_FOOTER}>
<div className={Classes.DIALOG_FOOTER_ACTIONS}>
<Button>
<T id={'close'} />
</Button>
<Button intent={Intent.PRIMARY} type="submit" disabled={isSubmitting}>
{itemCategoryId ? <T id={'edit'} /> : <T id={'submit'} />}
</Button>
</div>
</div>
</Form>
);
}

268
client/src/containers/Dialogs/ItemCategoryDialog/ItemCategoryFormDialogContent.js
View File

@@ -1,27 +1,10 @@
import React, { useState, useMemo, useCallback } from 'react';
import {
Button,
Classes,
FormGroup,
InputGroup,
Intent,
TextArea,
MenuItem,
} from '@blueprintjs/core';
import React, { useMemo } from 'react';
import { Intent } from '@blueprintjs/core';
import * as Yup from 'yup';
import { useFormik } from 'formik';
import { useQuery, queryCache } from 'react-query';
import { FormattedMessage as T, useIntl } from 'react-intl';
import classNames from 'classnames';
import {
ListSelect,
AccountsSelectList,
FieldRequiredHint,
Hint,
AppToaster,
ErrorMessage,
DialogContent,
} from 'components';
import { Formik } from 'formik';
import { AppToaster, DialogContent } from 'components';
import withItemCategories from 'containers/Items/withItemCategories';
import withItemCategoryDetail from 'containers/Items/withItemCategoryDetail';
@@ -32,6 +15,7 @@ import withAccountsActions from 'containers/Accounts/withAccountsActions';
import withDialogActions from 'containers/Dialog/withDialogActions';
import { compose, transformToForm } from 'utils';
import ItemCategoryForm from './ItemCategoryForm';
const defaultInitialValues = {
name: '',
@@ -75,7 +59,6 @@ function ItemCategoryFormDialogContent({
const isNewMode = !itemCategoryId;
const { formatMessage } = useIntl();
const [selectedParentCategory, setParentCategory] = useState(null);
// Fetches categories list.
const fetchCategoriesList = useQuery(['items-categories-list'], () =>
@@ -138,237 +121,24 @@ function ItemCategoryFormDialogContent({
}
};
// Formik
const {
values,
errors,
touched,
isSubmitting,
setFieldValue,
handleSubmit,
getFieldProps,
} = useFormik({
enableReinitialize: true,
validationSchema,
initialValues,
onSubmit: handleFormSubmit,
});
// Filters Item Categories list.
const filterItemCategories = useCallback(
(query, category, _index, exactMatch) => {
const normalizedTitle = category.name.toLowerCase();
const normalizedQuery = query.toLowerCase();
if (exactMatch) {
return normalizedTitle === normalizedQuery;
} else {
return normalizedTitle.indexOf(normalizedQuery) >= 0;
}
},
[],
);
const parentCategoryItem = useCallback(
(category, { handleClick, modifiers, query }) => {
return (
<MenuItem
text={category.name}
key={category.id}
onClick={handleClick}
/>
);
},
[],
);
// Handle the dialog closing.
const handleClose = useCallback(() => {
closeDialog(dialogName);
}, [dialogName, closeDialog]);
const onChangeParentCategory = useCallback(
(parentCategory) => {
setParentCategory(parentCategory);
setFieldValue('parent_category_id', parentCategory.id);
},
[setFieldValue],
);
const onItemAccountSelect = useCallback(
(filedName) => {
return (account) => {
setFieldValue(filedName, account.id);
};
},
[setFieldValue],
);
return (
<DialogContent
isLoading={fetchCategoriesList.isFetching || fetchAccountsList.isFetching}
>
<form onSubmit={handleSubmit}>
<div className={Classes.DIALOG_BODY}>
{/* ----------- Category name ----------- */}
<FormGroup
label={<T id={'category_name'} />}
labelInfo={FieldRequiredHint}
className={'form-group--category-name'}
intent={errors.name && touched.name && Intent.DANGER}
helperText={<ErrorMessage name="name" {...{ errors, touched }} />}
inline={true}
>
<InputGroup
medium={true}
intent={errors.name && touched.name && Intent.DANGER}
{...getFieldProps('name')}
/>
</FormGroup>
{/* ----------- Parent Category ----------- */}
<FormGroup
label={<T id={'parent_category'} />}
labelInfo={Hint}
className={classNames(
'form-group--select-list',
'form-group--parent-category',
Classes.FILL,
)}
inline={true}
helperText={
<ErrorMessage
name="parent_category_id"
{...{ errors, touched }}
/>
}
intent={
errors.parent_category_id &&
touched.parent_category_id &&
Intent.DANGER
}
>
<ListSelect
items={categoriesList}
noResults={<MenuItem disabled={true} text="No results." />}
itemRenderer={parentCategoryItem}
itemPredicate={filterItemCategories}
popoverProps={{ minimal: true }}
onItemSelect={onChangeParentCategory}
selectedItem={values.parent_category_id}
selectedItemProp={'id'}
defaultText={<T id={'select_parent_category'} />}
labelProp={'name'}
/>
</FormGroup>
{/* ----------- Description ----------- */}
<FormGroup
label={<T id={'description'} />}
className={'form-group--description'}
intent={errors.description && touched.description && Intent.DANGER}
helperText={
<ErrorMessage name="description" {...{ errors, touched }} />
}
inline={true}
>
<TextArea
growVertically={true}
large={true}
{...getFieldProps('description')}
/>
</FormGroup>
{/* ----------- Cost account ----------- */}
<FormGroup
label={<T id={'cost_account'} />}
inline={true}
intent={
errors.cost_account_id && touched.cost_account_id && Intent.DANGER
}
helperText={
<ErrorMessage {...{ errors, touched }} name="cost_account_id" />
}
className={classNames(
'form-group--cost-account',
'form-group--select-list',
Classes.FILL,
)}
>
<AccountsSelectList
accounts={accountsList}
onAccountSelected={onItemAccountSelect('cost_account_id')}
defaultSelectText={<T id={'select_account'} />}
selectedAccountId={values.cost_account_id}
filterByTypes={['cost_of_goods_sold']}
/>
</FormGroup>
{/* ----------- Sell account ----------- */}
<FormGroup
label={<T id={'sell_account'} />}
inline={true}
intent={
errors.sell_account_id && touched.sell_account_id && Intent.DANGER
}
helperText={
<ErrorMessage {...{ errors, touched }} name="sell_account_id" />
}
className={classNames(
'form-group--sell-account',
'form-group--select-list',
Classes.FILL,
)}
>
<AccountsSelectList
accounts={accountsList}
onAccountSelected={onItemAccountSelect('sell_account_id')}
defaultSelectText={<T id={'select_account'} />}
selectedAccountId={values.sell_account_id}
filterByTypes={['income']}
/>
</FormGroup>
{/* ----------- inventory account ----------- */}
<FormGroup
label={<T id={'inventory_account'} />}
inline={true}
intent={
errors.inventory_account_id &&
touched.inventory_account_id &&
Intent.DANGER
}
helperText={
<ErrorMessage
{...{ errors, touched }}
name="inventory_account_id"
/>
}
className={classNames(
'form-group--sell-account',
'form-group--select-list',
Classes.FILL,
)}
>
<AccountsSelectList
accounts={accountsList}
onAccountSelected={onItemAccountSelect('inventory_account_id')}
defaultSelectText={<T id={'select_account'} />}
selectedAccountId={values.inventory_account_id}
/>
</FormGroup>
</div>
<div className={Classes.DIALOG_FOOTER}>
<div className={Classes.DIALOG_FOOTER_ACTIONS}>
<Button onClick={handleClose}>
<T id={'close'} />
</Button>
<Button
intent={Intent.PRIMARY}
type="submit"
disabled={isSubmitting}
>
{action === 'edit' ? <T id={'edit'} /> : <T id={'submit'} />}
</Button>
</div>
</div>
</form>
<Formik
validationSchema={validationSchema}
initialValues={initialValues}
onSubmit={handleFormSubmit}
>
{({ isSubmitting }) => (
<ItemCategoryForm
itemCategoryId={itemCategoryId}
accountsList={accountsList}
categoriesList={categoriesList}
isSubmitting={isSubmitting}
/>
)}
</Formik>
</DialogContent>
);
}

3
client/src/containers/Items/ItemForm.js
View File

@@ -1,10 +1,9 @@
import React, { useMemo, useCallback, useEffect } from 'react';
import * as Yup from 'yup';
import { useFormik, Formik, Form } from 'formik';
import { Formik, Form } from 'formik';
import { Intent } from '@blueprintjs/core';
import { queryCache } from 'react-query';
import { useHistory } from 'react-router-dom';
import { pick, pickBy } from 'lodash';
import { useIntl } from 'react-intl';
import classNames from 'classnames';

1
client/src/containers/Items/ItemFormBody.js
View File

@@ -2,7 +2,6 @@ import React from 'react';
import { FastField, ErrorMessage } from 'formik';
import {
FormGroup,
Intent,
Classes,
Checkbox,
} from '@blueprintjs/core';

10
client/src/containers/Items/ItemFormFloatingActions.js
View File

@@ -20,7 +20,7 @@ export default function ItemFormFloatingActions({ isSubmitting, itemId, onCancel
</Button>
<Button className={'ml1'} disabled={isSubmitting}>
<T id={'save_as_draft'} />
<T id={'save_new'} />
</Button>
<Button className={'ml1'} onClick={handleCancelBtnClick}>
@@ -42,10 +42,4 @@ export default function ItemFormFloatingActions({ isSubmitting, itemId, onCancel
</FastField>
</div>
);
}
// function areEqual(prevProps, nextProps) {
// return prevProps.isSubmitting === nextProps.isSubmitting;
// }
// export default memo(ItemFormFloatingActions, areEqual);
}

4
client/src/containers/Items/ItemFormInventorySection.js
View File

@@ -1,6 +1,6 @@
import React from 'react';
import { Field, FastField, ErrorMessage } from 'formik';
import { FormGroup, Intent, InputGroup, Position } from '@blueprintjs/core';
import { FastField, ErrorMessage } from 'formik';
import { FormGroup, InputGroup, Position } from '@blueprintjs/core';
import { DateInput } from '@blueprintjs/datetime';
import { AccountsSelectList, Col, Row, Hint } from 'components';
import { CLASSES } from 'common/classes';

14
client/src/containers/Items/ItemFormPrimarySection.js
View File

@@ -1,7 +1,6 @@
import React, { useMemo } from 'react';
import {
FormGroup,
Intent,
InputGroup,
RadioGroup,
Classes,
@@ -104,10 +103,7 @@ function ItemFormPrimarySection({
helperText={<ErrorMessage name={'name'} />}
inline={true}
>
<InputGroup
medium={true}
{...field}
/>
<InputGroup medium={true} {...field} />
</FormGroup>
)}
</FastField>
@@ -117,16 +113,12 @@ function ItemFormPrimarySection({
{({ field, meta: { error, touched } }) => (
<FormGroup
label={<T id={'item_code'} />}
labelInfo={<Hint />}
className={' -group--item-sku'}
className={'form-group--item_code'}
intent={inputIntent({ error, touched })}
helperText={<ErrorMessage name={'code'} />}
inline={true}
>
<InputGroup
medium={true}
{...field}
/>
<InputGroup medium={true} {...field} />
</FormGroup>
)}
</FastField>