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

fix: optimize item form performance.

Browse Source
This commit is contained in:
Ahmed Bouhuolia
2020-11-11 15:21:07 +02:00
parent 20e4c74422
commit 4cd4ff3530
7 changed files with 419 additions and 434 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
client/src/containers/Accounting/MakeJournalEntriesTable.js
View File

@@ -292,7 +292,7 @@ export default compose(
withAccounts(({ accountsList }) => ({
accountsList,
})),
withCustomers(({ customersItems }) => ({
customers: customersItems,
withCustomers(({ customers }) => ({
customers,
})),
)(MakeJournalEntriesTable);

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

@@ -1,9 +1,7 @@
import React, { useMemo, useCallback, useEffect } from 'react';
import * as Yup from 'yup';
import { useFormik } from 'formik';
import {
Intent
} from '@blueprintjs/core';
import { useFormik, 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';
@@ -41,7 +39,6 @@ const defaultInitialValues = {
purchasable: true,
};
/**
* Item form.
*/
@@ -88,18 +85,16 @@ function ItemForm({
.required()
.label(formatMessage({ id: 'item_type_' })),
sku: Yup.string().trim(),
cost_price: Yup.number()
.when(['purchasable'], {
is: true,
then: Yup.number().required(),
otherwise: Yup.number().nullable(true),
}),
sell_price: Yup.number()
.when(['sellable'], {
is: true,
then: Yup.number().required(),
otherwise: Yup.number().nullable(true),
}),
cost_price: Yup.number().when(['purchasable'], {
is: true,
then: Yup.number().required(),
otherwise: Yup.number().nullable(true),
}),
sell_price: Yup.number().when(['sellable'], {
is: true,
then: Yup.number().required(),
otherwise: Yup.number().nullable(true),
}),
cost_account_id: Yup.number()
.when(['purchasable'], {
is: true,
@@ -145,21 +140,24 @@ function ItemForm({
);
useEffect(() => {
(!isNewMode)
!isNewMode
? changePageTitle(formatMessage({ id: 'edit_item_details' }))
: changePageTitle(formatMessage({ id: 'new_item' }));
}, [changePageTitle, isNewMode, formatMessage]);
const transformApiErrors = (errors) => {
const fields = {};
if (errors.find(e => e.type === 'ITEM.NAME.ALREADY.EXISTS')) {
fields.name = formatMessage({ id: 'the_name_used_before' })
if (errors.find((e) => e.type === 'ITEM.NAME.ALREADY.EXISTS')) {
fields.name = formatMessage({ id: 'the_name_used_before' });
}
return fields;
}
};
// Handles the form submit.
const handleFormSubmit = (values, { setSubmitting, resetForm, setErrors }) => {
const handleFormSubmit = (
values,
{ setSubmitting, resetForm, setErrors },
) => {
setSubmitting(true);
const form = { ...values };
@@ -167,9 +165,9 @@ function ItemForm({
AppToaster.show({
message: formatMessage(
{
id: (isNewMode) ?
'service_has_been_successful_created' :
'the_item_has_been_successfully_edited',
id: isNewMode
? 'service_has_been_successful_created'
: 'the_item_has_been_successfully_edited',
},
{
number: itemId,
@@ -196,28 +194,13 @@ function ItemForm({
}
};
const {
getFieldProps,
setFieldValue,
values,
touched,
errors,
handleSubmit,
isSubmitting,
} = useFormik({
enableReinitialize: true,
validationSchema: validationSchema,
initialValues,
onSubmit: handleFormSubmit
});
useEffect(() => {
if (values.item_type) {
changePageSubtitle(formatMessage({ id: values.item_type }));
} else {
changePageSubtitle('');
}
}, [values.item_type, changePageSubtitle, formatMessage]);
// useEffect(() => {
// if (values.item_type) {
// changePageSubtitle(formatMessage({ id: values.item_type }));
// } else {
// changePageSubtitle('');
// }
// }, [values.item_type, changePageSubtitle, formatMessage]);
const initialAttachmentFiles = useMemo(() => {
return itemDetail && itemDetail.media
@@ -228,10 +211,13 @@ function ItemForm({
}))
: [];
}, [itemDetail]);
const handleDropFiles = useCallback((_files) => {
setFiles(_files.filter((file) => file.uploaded === false));
}, [setFiles]);
const handleDropFiles = useCallback(
(_files) => {
setFiles(_files.filter((file) => file.uploaded === false));
},
[setFiles],
);
const handleDeleteFile = useCallback(
(_deletedFiles) => {
@@ -250,39 +236,30 @@ function ItemForm({
return (
<div class={classNames(CLASSES.PAGE_FORM_ITEM)}>
<form onSubmit={handleSubmit}>
<div class={classNames(CLASSES.PAGE_FORM_BODY)}>
<ItemFormPrimarySection
errors={errors}
touched={touched}
values={values}
getFieldProps={getFieldProps}
setFieldValue={setFieldValue}
/>
<ItemFormBody
touched={touched}
errors={errors}
values={values}
getFieldProps={getFieldProps}
setFieldValue={setFieldValue}
/>
<ItemFormInventorySection
errors={errors}
touched={touched}
values={values}
setFieldValue={setFieldValue}
getFieldProps={getFieldProps}
/>
</div>
<ItemFormFloatingActions
isSubmitting={isSubmitting}
itemId={itemId}
onCancelClick={handleCancelBtnClick}
/>
</form>
<Formik
enableReinitialize={true}
validationSchema={validationSchema}
initialValues={initialValues}
onSubmit={handleFormSubmit}
>
{({ isSubmitting }) => (
<Form>
<div class={classNames(CLASSES.PAGE_FORM_BODY)}>
<ItemFormPrimarySection />
<ItemFormBody />
<ItemFormInventorySection />
</div>
<ItemFormFloatingActions
isSubmitting={isSubmitting}
itemId={itemId}
onCancelClick={handleCancelBtnClick}
/>
</Form>
)}
</Formik>
</div>
);
};
}
export default compose(
withItemsActions,

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

@@ -1,15 +1,14 @@
import React from 'react';
import { FastField, ErrorMessage } from 'formik';
import {
FormGroup,
Intent,
InputGroup,
Classes,
Checkbox,
} from '@blueprintjs/core';
import {
AccountsSelectList,
MoneyInputGroup,
ErrorMessage,
Col,
Row,
Hint,
@@ -18,161 +17,158 @@ import { FormattedMessage as T } from 'react-intl';
import classNames from 'classnames';
import withAccounts from 'containers/Accounts/withAccounts';
import { compose } from 'utils';
import { compose, inputIntent } from 'utils';
/**
* Item form body.
*/
function ItemFormBody({
getFieldProps,
touched,
errors,
values,
setFieldValue,
accountsList,
}) {
function ItemFormBody({ accountsList }) {
return (
<div class="page-form__section page-form__section--selling-cost">
<Row>
<Col xs={6}>
{/*------------- Sellable checkbox ------------- */}
<FormGroup inline={true} className={'form-group--sellable'}>
<Checkbox
inline={true}
label={
<h3>
<T id={'i_purchase_this_item'} />
</h3>
}
checked={values.sellable}
{...getFieldProps('sellable')}
/>
</FormGroup>
{/*------------- Purchasable checbox ------------- */}
<FastField name={'sellable'}>
{({ field, field: { value } }) => (
<FormGroup inline={true} className={'form-group--sellable'}>
<Checkbox
inline={true}
label={
<h3>
<T id={'i_sell_this_item'} />
</h3>
}
defaultChecked={value}
{...field}
/>
</FormGroup>
)}
</FastField>
{/*------------- Selling price ------------- */}
<FormGroup
label={<T id={'selling_price'} />}
className={'form-group--item-selling-price'}
intent={errors.sell_price && touched.sell_price && Intent.DANGER}
helperText={
<ErrorMessage {...{ errors, touched }} name="sell_price" />
}
inline={true}
>
<MoneyInputGroup
value={values.sell_price}
prefix={'$'}
onChange={(e, value) => {
setFieldValue('sell_price', value);
}}
inputGroupProps={{
medium: true,
intent:
errors.sell_price && touched.sell_price && Intent.DANGER,
}}
disabled={!values.sellable}
/>
</FormGroup>
{/*------------- Selling account ------------- */}
<FormGroup
label={<T id={'account'} />}
labelInfo={<Hint />}
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,
<FastField name={'sell_price'}>
{({ form, field, field: { value }, meta: { error, touched } }) => (
<FormGroup
label={<T id={'selling_price'} />}
className={'form-group--sell_price'}
intent={inputIntent({ error, touched })}
helperText={<ErrorMessage name={'sell_price'} />}
inline={true}
>
<MoneyInputGroup
value={value}
prefix={'$'}
inputGroupProps={{
medium: true,
// intent: error && touched/ && Intent.DANGER,
}}
disabled={!form.values.sellable}
onChange={field.onChange}
/>
</FormGroup>
)}
>
<AccountsSelectList
accounts={accountsList}
onAccountSelected={(account) => {
setFieldValue('sell_account_id', account.id);
}}
defaultSelectText={<T id={'select_account'} />}
selectedAccountId={values.sell_account_id}
disabled={!values.sellable}
filterByTypes={['income']}
/>
</FormGroup>
</FastField>
{/*------------- Selling account ------------- */}
<FastField name={'sell_account_id'}>
{({ form, field: { value }, meta: { error, touched } }) => (
<FormGroup
label={<T id={'account'} />}
labelInfo={<Hint />}
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}
disabled={!form.values.sellable}
filterByTypes={['income']}
/>
</FormGroup>
)}
</FastField>
</Col>
<Col xs={6}>
{/*------------- Purchasable checbox ------------- */}
<FormGroup inline={true} className={'form-group--purchasable'}>
<Checkbox
inline={true}
label={
<h3>
<T id={'i_sell_this_item'} />
</h3>
}
defaultChecked={values.purchasable}
{...getFieldProps('purchasable')}
/>
</FormGroup>
{/*------------- Sellable checkbox ------------- */}
<FastField name={'purchasable'}>
{({ field, field: { value }, meta: { error, touched } }) => (
<FormGroup inline={true} className={'form-group--purchasable'}>
<Checkbox
inline={true}
label={
<h3>
<T id={'i_purchase_this_item'} />
</h3>
}
checked={value}
{...field}
/>
</FormGroup>
)}
</FastField>
{/*------------- Cost price ------------- */}
<FormGroup
label={<T id={'cost_price'} />}
className={'form-group--item-cost-price'}
intent={errors.cost_price && touched.cost_price && Intent.DANGER}
helperText={
<ErrorMessage {...{ errors, touched }} name="cost_price" />
}
inline={true}
>
<MoneyInputGroup
value={values.cost_price}
prefix={'$'}
onChange={(e, value) => {
setFieldValue('cost_price', value);
}}
inputGroupProps={{
medium: true,
intent:
errors.cost_price && touched.cost_price && Intent.DANGER,
}}
disabled={!values.purchasable}
/>
</FormGroup>
<FastField name={'cost_price'}>
{({ field, form, field: { value }, meta: { error, touched } }) => (
<FormGroup
label={<T id={'cost_price'} />}
className={'form-group--item-cost-price'}
intent={inputIntent({ error, touched })}
helperText={<ErrorMessage name="cost_price" />}
inline={true}
>
<MoneyInputGroup
value={value}
prefix={'$'}
inputGroupProps={{
medium: true,
}}
disabled={!form.values.purchasable}
{...field}
/>
</FormGroup>
)}
</FastField>
{/*------------- Cost account ------------- */}
<FormGroup
label={<T id={'account'} />}
labelInfo={<Hint />}
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,
<FastField name={'cost_account_id'}>
{({ form, field: { value }, meta: { error, touched } }) => (
<FormGroup
label={<T id={'account'} />}
labelInfo={<Hint />}
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('cost_account_id', account.id);
}}
defaultSelectText={<T id={'select_account'} />}
selectedAccountId={value}
disabled={!form.values.purchasable}
filterByTypes={['cost_of_goods_sold']}
/>
</FormGroup>
)}
>
<AccountsSelectList
accounts={accountsList}
onAccountSelected={(account) => {
setFieldValue('cost_account_id', account.id);
}}
defaultSelectText={<T id={'select_account'} />}
selectedAccountId={values.cost_account_id}
disabled={!values.purchasable}
filterByTypes={['cost_of_goods_sold']}
/>
</FormGroup>
</FastField>
</Col>
</Row>
</div>

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

@@ -1,24 +1,15 @@
import React from 'react';
import {
Button,
Intent,
FormGroup,
Checkbox
} from '@blueprintjs/core';
import React, { memo } from 'react';
import { Button, Intent, FormGroup, Checkbox } from '@blueprintjs/core';
import { FormattedMessage as T } from 'react-intl';
import { saveInvoke } from 'utils';
import classNames from 'classnames';
import { ErrorMessage, FastField } from 'formik';
import { CLASSES } from 'common/classes';
/**
* Item form floating actions.
*/
export default function ItemFormFloatingActions({
isSubmitting,
itemId,
onCancelClick
}) {
export default function ItemFormFloatingActions({ isSubmitting, itemId, onCancelClick }) {
const handleCancelBtnClick = (event) => {
saveInvoke(onCancelClick, event.currentTarget.value);
};
@@ -37,18 +28,24 @@ export default function ItemFormFloatingActions({
</Button>
{/*----------- Active ----------*/}
<FormGroup
label={' '}
inline={true}
className={'form-group--active'}
>
<Checkbox
inline={true}
label={<T id={'active'} />}
// defaultChecked={values.active}
// {...getFieldProps('active')}
/>
</FormGroup>
<FastField name={'type'}>
{({ field, field: { value } }) => (
<FormGroup label={' '} inline={true} className={'form-group--active'}>
<Checkbox
inline={true}
label={<T id={'active'} />}
defaultChecked={value}
{...field}
/>
</FormGroup>
)}
</FastField>
</div>
);
}
// function areEqual(prevProps, nextProps) {
// return prevProps.isSubmitting === nextProps.isSubmitting;
// }
// export default memo(ItemFormFloatingActions, areEqual);

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

@@ -1,30 +1,18 @@
import React from 'react';
import {
FormGroup,
Intent,
InputGroup,
Position,
} from '@blueprintjs/core';
import { Field, FastField, ErrorMessage } from 'formik';
import { FormGroup, Intent, InputGroup, Position } from '@blueprintjs/core';
import { DateInput } from '@blueprintjs/datetime';
import { AccountsSelectList, ErrorMessage, Col, Row, Hint } from 'components';
import { AccountsSelectList, Col, Row, Hint } from 'components';
import { CLASSES } from 'common/classes';
import { FormattedMessage as T } from 'react-intl';
import classNames from 'classnames';
import withAccounts from 'containers/Accounts/withAccounts';
import { compose, tansformDateValue, momentFormatter } from 'utils';
import { compose, tansformDateValue, momentFormatter, inputIntent } from 'utils';
/**
* Item form inventory sections.
*/
function ItemFormInventorySection({
errors,
touched,
setFieldValue,
values,
getFieldProps,
accountsList,
}) {
function ItemFormInventorySection({ accountsList }) {
return (
<div class="page-form__section page-form__section--inventory">
<h3>
@@ -34,83 +22,91 @@ function ItemFormInventorySection({
<Row>
<Col xs={6}>
{/*------------- 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--item-inventory_account',
'form-group--select-list',
CLASSES.FILL,
<FastField name={'inventory_account_id'}>
{({ form, field: { value }, meta: { touched, error } }) => (
<FormGroup
label={<T id={'inventory_account'} />}
inline={true}
intent={inputIntent({ error, touched })}
helperText={<ErrorMessage name="inventory_account_id" />}
className={classNames(
'form-group--item-inventory_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>
)}
>
<AccountsSelectList
accounts={accountsList}
onAccountSelected={(account) => {
setFieldValue('inventory_account_id', account.id);
}}
defaultSelectText={<T id={'select_account'} />}
selectedAccountId={values.inventory_account_id}
/>
</FormGroup>
</FastField>
<FormGroup
label={<T id={'opening_quantity'} />}
labelInfo={<Hint />}
className={'form-group--opening_quantity'}
inline={true}
>
<InputGroup
medium={true}
intent={errors.opening_quantity && Intent.DANGER}
{...getFieldProps('opening_quantity')}
/>
</FormGroup>
<FormGroup
label={<T id={'opening_date'} />}
labelInfo={<Hint />}
className={classNames(
'form-group--select-list',
'form-group--opening_date',
CLASSES.FILL,
<FastField name={'opening_quantity'}>
{({ field, field: { value }, meta: { touched, error } }) => (
<FormGroup
label={<T id={'opening_quantity'} />}
labelInfo={<Hint />}
className={'form-group--opening_quantity'}
intent={inputIntent({ error, touched })}
inline={true}
>
<InputGroup
medium={true}
{...field}
/>
</FormGroup>
)}
inline={true}
>
<DateInput
{...momentFormatter('YYYY/MM/DD')}
value={tansformDateValue(values.payment_date)}
onChange={(value) => {
setFieldValue('opening_date', value);
}}
popoverProps={{ position: Position.BOTTOM, minimal: true }}
/>
</FormGroup>
</FastField>
<FastField name={'opening_date'}>
{({ form, field: { value }, meta: { touched, error } }) => (
<FormGroup
label={<T id={'opening_date'} />}
labelInfo={<Hint />}
className={classNames(
'form-group--select-list',
'form-group--opening_date',
CLASSES.FILL,
)}
intent={inputIntent({ error, touched })}
inline={true}
>
<DateInput
{...momentFormatter('YYYY/MM/DD')}
value={tansformDateValue(value)}
onChange={(value) => {
form.setFieldValue('opening_date', value);
}}
popoverProps={{ position: Position.BOTTOM, minimal: true }}
/>
</FormGroup>
)}
</FastField>
</Col>
<Col xs={6}>
<FormGroup
label={'Opening average rate'}
labelInfo={<Hint />}
className={'form-group--opening_average_rate'}
inline={true}
>
<InputGroup
medium={true}
intent={errors.opening_average_rate && Intent.DANGER}
{...getFieldProps('opening_average_rate')}
/>
</FormGroup>
<FastField name={'opening_average_rate'}>
{({ field, field: { value }, meta: { touched, error } }) => (
<FormGroup
label={'Opening average rate'}
labelInfo={<Hint />}
className={'form-group--opening_average_rate'}
intent={inputIntent({ error, touched })}
inline={true}
>
<InputGroup
medium={true}
{...field}
/>
</FormGroup>
)}
</FastField>
</Col>
</Row>
</div>

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

@@ -7,12 +7,11 @@ import {
Classes,
Radio,
Position,
Tooltip,
} from '@blueprintjs/core';
import { FormattedMessage as T } from 'react-intl';
import { ErrorMessage, FastField } from 'formik';
import {
CategoriesSelectList,
ErrorMessage,
Hint,
Col,
Row,
@@ -24,126 +23,139 @@ import { CLASSES } from 'common/classes';
import withItemCategories from 'containers/Items/withItemCategories';
import withAccounts from 'containers/Accounts/withAccounts';
import { compose, handleStringChange } from 'utils';
import { compose, handleStringChange, inputIntent } from 'utils';
/**
* Item form primary section.
*/
function ItemFormPrimarySection({
getFieldProps,
setFieldValue,
errors,
touched,
values,
// #withItemCategories
categoriesList,
}) {
const itemTypeHintContent = (
<>
<div class="mb1"><strong>{'Service: '}</strong>{'Services that you provide to customers. '}</div>
<div class="mb1"><strong>{'Inventory: '}</strong>{'Products you buy and/or sell and that you track quantities of.'}</div>
<div class="mb1"><strong>{'Non-Inventory: '}</strong>{'Products you buy and/or sell but don’t need to (or can’t) track quantities of, for example, nuts and bolts used in an installation.'}</div>
</>);
<div class="mb1">
<strong>{'Service: '}</strong>
{'Services that you provide to customers. '}
</div>
<div class="mb1">
<strong>{'Inventory: '}</strong>
{'Products you buy and/or sell and that you track quantities of.'}
</div>
<div class="mb1">
<strong>{'Non-Inventory: '}</strong>
{
'Products you buy and/or sell but don’t need to (or can’t) track quantities of, for example, nuts and bolts used in an installation.'
}
</div>
</>
);
return (
<div className={classNames(CLASSES.PAGE_FORM_HEADER_PRIMARY)}>
<Row>
<Col xs={7}>
{/*----------- Item type ----------*/}
<FormGroup
medium={true}
label={<T id={'item_type'} />}
labelInfo={
<span>
<FieldRequiredHint />
<Hint content={itemTypeHintContent} position={Position.BOTTOM_LEFT} />
</span>
}
className={'form-group--item-type'}
intent={errors.type && touched.type && Intent.DANGER}
helperText={<ErrorMessage {...{ errors, touched }} name="type" />}
inline={true}
>
<RadioGroup
inline={true}
onChange={handleStringChange((value) => {
setFieldValue('type', value);
})}
selectedValue={values.type}
>
<Radio
label={<T id={'service'} />}
value="service"
/>
<Radio
label={<T id={'inventory'} />}
value="inventory"
/>
<Radio
label={<T id={'non_inventory'} />}
value="non-inventory"
/>
</RadioGroup>
</FormGroup>
<FastField name={'type'}>
{({ form, field: { value }, meta: { touched, error } }) => (
<FormGroup
medium={true}
label={<T id={'item_type'} />}
labelInfo={
<span>
<FieldRequiredHint />
<Hint
content={itemTypeHintContent}
position={Position.BOTTOM_LEFT}
/>
</span>
}
className={'form-group--item-type'}
intent={inputIntent({ error, touched })}
helperText={<ErrorMessage name="item_type" />}
inline={true}
>
<RadioGroup
inline={true}
onChange={handleStringChange((_value) => {
form.setFieldValue('type', _value);
})}
selectedValue={value}
>
<Radio label={<T id={'service'} />} value="service" />
<Radio label={<T id={'inventory'} />} value="inventory" />
<Radio
label={<T id={'non_inventory'} />}
value="non-inventory"
/>
</RadioGroup>
</FormGroup>
)}
</FastField>
{/*----------- Item name ----------*/}
<FormGroup
label={<T id={'item_name'} />}
labelInfo={<FieldRequiredHint />}
className={'form-group--item-name'}
intent={errors.name && touched.name && Intent.DANGER}
helperText={<ErrorMessage {...{ errors, touched }} name="name" />}
inline={true}
>
<InputGroup
medium={true}
intent={errors.name && touched.name && Intent.DANGER}
{...getFieldProps('name')}
/>
</FormGroup>
<FastField name={'name'}>
{({ field, meta: { error, touched } }) => (
<FormGroup
label={<T id={'item_name'} />}
labelInfo={<FieldRequiredHint />}
className={'form-group--item-name'}
intent={inputIntent({ error, touched })}
helperText={<ErrorMessage name={'name'} />}
inline={true}
>
<InputGroup
medium={true}
{...field}
/>
</FormGroup>
)}
</FastField>
{/*----------- SKU ----------*/}
<FormGroup
label={<T id={'item_code'} />}
labelInfo={<Hint />}
className={'form-group--item-sku'}
intent={errors.sku && touched.sku && Intent.DANGER}
helperText={<ErrorMessage {...{ errors, touched }} name="sku" />}
inline={true}
>
<InputGroup
medium={true}
intent={errors.sku && touched.sku && Intent.DANGER}
{...getFieldProps('sku')}
/>
</FormGroup>
<FastField name={'code'}>
{({ field, meta: { error, touched } }) => (
<FormGroup
label={<T id={'item_code'} />}
labelInfo={<Hint />}
className={' -group--item-sku'}
intent={inputIntent({ error, touched })}
helperText={<ErrorMessage name={'code'} />}
inline={true}
>
<InputGroup
medium={true}
{...field}
/>
</FormGroup>
)}
</FastField>
{/*----------- Item category ----------*/}
<FormGroup
label={<T id={'category'} />}
labelInfo={<Hint />}
inline={true}
intent={errors.category_id && touched.category_id && Intent.DANGER}
helperText={
<ErrorMessage {...{ errors, touched }} name="category" />
}
className={classNames(
'form-group--select-list',
'form-group--category',
Classes.FILL,
<FastField name={'type'}>
{({ form, field: { value }, meta: { error, touched } }) => (
<FormGroup
label={<T id={'category'} />}
inline={true}
intent={inputIntent({ error, touched })}
helperText={<ErrorMessage name="category_id" />}
className={classNames(
'form-group--select-list',
'form-group--category',
Classes.FILL,
)}
>
<CategoriesSelectList
categoriesList={categoriesList}
selecetedCategoryId={value}
onCategorySelected={(category) => {
form.setFieldValue('category_id', category.id);
}}
popoverProps={{ minimal: true }}
/>
</FormGroup>
)}
>
<CategoriesSelectList
categoriesList={categoriesList}
selecetedCategoryId={values.category_id}
onCategorySelected={(category) => {
setFieldValue('category_id', category.id);
}}
popoverProps={{ minimal: true }}
/>
</FormGroup>
</FastField>
</Col>
<Col xs={3}>

7
client/src/utils.js
View File

@@ -1,5 +1,8 @@
import moment from 'moment';
import _ from 'lodash';
import {
Intent,
} from '@blueprintjs/core';
import Currency from 'js-money/lib/currency';
import PProgress from 'p-progress';
import accounting from 'accounting';
@@ -284,4 +287,8 @@ export const transformToForm = (obj, emptyInitialValues) => {
obj,
(val, key) => val !== null && Object.keys(emptyInitialValues).includes(key),
)
}
export function inputIntent({ error, touched }){
return error && touched ? Intent.DANGER : '';
}