QT/bigcapital
1
0
Fork 0
mirror of https://github.com/bigcapitalhq/bigcapital.git synced 2026-02-19 22:30:31 +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 }) => ({ withAccounts(({ accountsList }) => ({
accountsList, accountsList,
})), })),
withCustomers(({ customersItems }) => ({ withCustomers(({ customers }) => ({
customers: customersItems, customers,
})), })),
)(MakeJournalEntriesTable); )(MakeJournalEntriesTable);

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

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

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

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

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

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

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

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

7
client/src/utils.js
View File

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