QT/bigcapital
1
0
Fork 0
mirror of https://github.com/bigcapitalhq/bigcapital.git synced 2026-02-16 04:40:32 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: fix item form in edit mode.

Browse Source
This commit is contained in:
Ahmed Bouhuolia
2020-11-10 17:41:53 +02:00
parent b2fd2e7cdb
commit 93fbe1fc98
6 changed files with 159 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -6,7 +6,7 @@ import {
} from '@blueprintjs/core';
import { queryCache } from 'react-query';
import { useHistory } from 'react-router-dom';
import { pick } from 'lodash';
import { pick, pickBy } from 'lodash';
import { useIntl } from 'react-intl';
import classNames from 'classnames';
@@ -23,7 +23,23 @@ import useMedia from 'hooks/useMedia';
import withItemDetail from 'containers/Items/withItemDetail';
import withDashboardActions from 'containers/Dashboard/withDashboardActions';
import { compose } from 'utils';
import { compose, transformToForm } from 'utils';
const defaultInitialValues = {
active: true,
name: '',
type: 'service',
sku: '',
cost_price: '',
sell_price: '',
cost_account_id: '',
sell_account_id: '',
inventory_account_id: '',
category_id: '',
note: '',
sellable: true,
purchasable: true,
};
/**
* Item form.
@@ -71,54 +87,61 @@ function ItemForm({
.required()
.label(formatMessage({ id: 'item_type_' })),
sku: Yup.string().trim(),
cost_price: Yup.number(),
sell_price: Yup.number(),
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()
.required()
.when(['purchasable'], {
is: true,
then: Yup.number().required(),
otherwise: Yup.number().nullable(true),
})
.label(formatMessage({ id: 'cost_account_id' })),
sell_account_id: Yup.number()
.required()
.when(['sellable'], {
is: true,
then: Yup.number().required(),
otherwise: Yup.number().nullable(),
})
.label(formatMessage({ id: 'sell_account_id' })),
inventory_account_id: Yup.number().when('type', {
is: (value) => value === 'inventory',
then: Yup.number().required(),
otherwise: Yup.number().nullable(),
}),
category_id: Yup.number().nullable(),
inventory_account_id: Yup.number()
.when(['type'], {
is: (value) => value === 'inventory',
then: Yup.number().required(),
otherwise: Yup.number().nullable(),
})
.label(formatMessage({ id: 'Inventory account' })),
category_id: Yup.number().positive().nullable(),
stock: Yup.string() || Yup.boolean(),
sellable: Yup.boolean().required(),
purchasable: Yup.boolean().required(),
});
const defaultInitialValues = useMemo(
() => ({
active: true,
name: '',
type: 'service',
sku: '',
cost_price: 0,
sell_price: 0,
cost_account_id: null,
sell_account_id: null,
inventory_account_id: null,
category_id: null,
note: '',
sellable: true,
purchasable: true,
}),
[],
);
/**
* Initial values in create and edit mode.
*/
const initialValues = useMemo(
() => ({
...(itemDetail
? {
...pick(itemDetail, Object.keys(defaultInitialValues)),
}
: {
...defaultInitialValues,
}),
...defaultInitialValues,
/**
* We only care about the fields in the form. Previously unfilled optional
* values such as `notes` come back from the API as null, so remove those
* as well.
*/
...transformToForm(itemDetail, defaultInitialValues),
}),
[itemDetail, defaultInitialValues],
[],
);
useEffect(() => {
@@ -141,7 +164,7 @@ function ItemForm({
'the_item_has_been_successfully_edited',
},
{
number: itemDetail.id,
number: itemId,
},
),
intent: Intent.SUCCESS,
@@ -156,7 +179,7 @@ function ItemForm({
if (isNewMode) {
requestSubmitItem(form).then(onSuccess).catch(onError);
} else {
requestEditItem(form).then(onSuccess).catch(onError);
requestEditItem(itemId, form).then(onSuccess).catch(onError);
}
};

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

@@ -36,15 +36,15 @@ function ItemFormBody({
<div class="page-form__section page-form__section--selling-cost">
<Row>
<Col xs={6}>
{/*------------- Sellable checkbox ------------- */}
<FormGroup
inline={true}
className={'form-group--sellable'}
>
<FormGroup inline={true} className={'form-group--sellable'}>
<Checkbox
inline={true}
label={<h3><T id={'i_purchase_this_item'} /></h3>}
label={
<h3>
<T id={'i_purchase_this_item'} />
</h3>
}
checked={values.sellable}
{...getFieldProps('sellable')}
/>
@@ -54,26 +54,22 @@ function ItemFormBody({
<FormGroup
label={<T id={'selling_price'} />}
className={'form-group--item-selling-price'}
intent={
errors.selling_price && touched.selling_price && Intent.DANGER
}
intent={errors.sell_price && touched.sell_price && Intent.DANGER}
helperText={
<ErrorMessage {...{ errors, touched }} name="selling_price" />
<ErrorMessage {...{ errors, touched }} name="sell_price" />
}
inline={true}
>
<MoneyInputGroup
value={values.selling_price}
value={values.sell_price}
prefix={'$'}
onChange={(e, value) => {
setFieldValue('selling_price', value);
setFieldValue('sell_price', value);
}}
inputGroupProps={{
medium: true,
intent:
errors.selling_price &&
touched.selling_price &&
Intent.DANGER,
errors.sell_price && touched.sell_price && Intent.DANGER,
}}
disabled={!values.sellable}
/>
@@ -107,18 +103,18 @@ function ItemFormBody({
filterByTypes={['income']}
/>
</FormGroup>
</Col>
<Col xs={6}>
{/*------------- Purchasable checbox ------------- */}
<FormGroup
inline={true}
className={'form-group--purchasable'}
>
<FormGroup inline={true} className={'form-group--purchasable'}>
<Checkbox
inline={true}
label={<h3><T id={'i_sell_this_item'} /></h3>}
label={
<h3>
<T id={'i_sell_this_item'} />
</h3>
}
defaultChecked={values.purchasable}
{...getFieldProps('purchasable')}
/>
@@ -169,7 +165,7 @@ function ItemFormBody({
<AccountsSelectList
accounts={accountsList}
onAccountSelected={(account) => {
setFieldValue('cost_account_id', account.id)
setFieldValue('cost_account_id', account.id);
}}
defaultSelectText={<T id={'select_account'} />}
selectedAccountId={values.cost_account_id}
@@ -187,4 +183,4 @@ export default compose(
withAccounts(({ accountsList }) => ({
accountsList,
})),
)(ItemFormBody);
)(ItemFormBody);

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

@@ -1,11 +1,17 @@
import React from 'react';
import { FormGroup, Intent, InputGroup, Classes } from '@blueprintjs/core';
import { AccountsSelectList, ErrorMessage, Col, Row } from 'components';
import {
FormGroup,
Intent,
InputGroup,
Position,
} from '@blueprintjs/core';
import { DateInput } from '@blueprintjs/datetime';
import { AccountsSelectList, ErrorMessage, 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 } from 'utils';
import { compose, tansformDateValue, momentFormatter } from 'utils';
/**
* Item form inventory sections.
@@ -21,12 +27,12 @@ function ItemFormInventorySection({
}) {
return (
<div class="page-form__section page-form__section--inventory">
<h3>
<T id={'inventory_information'} />
</h3>
<Row>
<Col xs={6}>
<h3>
<T id={'inventory_information'} />
</h3>
{/*------------- Inventory account ------------- */}
<FormGroup
label={<T id={'inventory_account'} />}
@@ -45,7 +51,7 @@ function ItemFormInventorySection({
className={classNames(
'form-group--item-inventory_account',
'form-group--select-list',
Classes.FILL,
CLASSES.FILL,
)}
>
<AccountsSelectList
@@ -59,26 +65,50 @@ function ItemFormInventorySection({
</FormGroup>
<FormGroup
label={<T id={'opening_stock'} />}
className={'form-group--item-stock'}
label={<T id={'opening_quantity'} />}
labelInfo={<Hint />}
className={'form-group--opening_quantity'}
inline={true}
>
<InputGroup
medium={true}
intent={errors.stock && Intent.DANGER}
{...getFieldProps('stock')}
intent={errors.opening_quantity && Intent.DANGER}
{...getFieldProps('opening_quantity')}
/>
</FormGroup>
<FormGroup
label={'Opening average cost'}
className={'form-group--item-stock'}
label={<T id={'opening_date'} />}
labelInfo={<Hint />}
className={classNames(
'form-group--select-list',
'form-group--opening_date',
CLASSES.FILL,
)}
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>
</Col>
<Col xs={6}>
<FormGroup
label={'Opening average rate'}
labelInfo={<Hint />}
className={'form-group--opening_average_rate'}
inline={true}
>
<InputGroup
medium={true}
intent={errors.stock && Intent.DANGER}
{...getFieldProps('stock')}
intent={errors.opening_average_rate && Intent.DANGER}
{...getFieldProps('opening_average_rate')}
/>
</FormGroup>
</Col>

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

@@ -39,6 +39,14 @@ function ItemFormPrimarySection({
// #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>
</>);
return (
<div className={classNames(CLASSES.PAGE_FORM_HEADER_PRIMARY)}>
<Row>
@@ -47,7 +55,12 @@ function ItemFormPrimarySection({
<FormGroup
medium={true}
label={<T id={'item_type'} />}
labelInfo={<FieldRequiredHint />}
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" />}
@@ -56,48 +69,20 @@ function ItemFormPrimarySection({
<RadioGroup
inline={true}
onChange={handleStringChange((value) => {
setFieldValue('item_type', value);
setFieldValue('type', value);
})}
selectedValue={values.item_type}
selectedValue={values.type}
>
<Radio
label={
<Tooltip
className={Classes.TOOLTIP_INDICATOR}
content={'Services that you provide to customers.'}
position={Position.BOTTOM_LEFT}
>
<T id={'service'} />
</Tooltip>
}
label={<T id={'service'} />}
value="service"
/>
<Radio
label={
<Tooltip
className={Classes.TOOLTIP_INDICATOR}
content={
'Products you buy and/or sell and that you track quantities of.'
}
position={Position.BOTTOM_LEFT}
>
<T id={'inventory'} />
</Tooltip>
}
label={<T id={'inventory'} />}
value="inventory"
/>
<Radio
label={
<Tooltip
className={Classes.TOOLTIP_INDICATOR}
content={
'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.'
}
position={Position.BOTTOM_LEFT}
>
<T id={'non_inventory'} />
</Tooltip>
}
label={<T id={'non_inventory'} />}
value="non_inventory"
/>
</RadioGroup>
@@ -121,7 +106,7 @@ function ItemFormPrimarySection({
{/*----------- SKU ----------*/}
<FormGroup
label={<T id={'sku'} />}
label={<T id={'item_code'} />}
labelInfo={<Hint />}
className={'form-group--item-sku'}
intent={errors.sku && touched.sku && Intent.DANGER}

4
client/src/lang/en/index.js
View File

@@ -100,7 +100,7 @@ export default {
cost_price: 'Cost Price',
inventory_information: 'Inventory Information',
inventory_account: 'Inventory Account',
opening_stock: 'Opening Stock',
opening_quantity: 'Opening quantity',
save: 'Save',
save_as_draft: 'Save as Draft',
active: 'Active',
@@ -810,4 +810,6 @@ export default {
i_purchase_this_item: 'I purchase this item from a vendor.',
i_sell_this_item: 'I sell this item to a customer.',
select_display_name_as:'Select display name as',
opening_date: 'Opening date',
item_code: 'Item code',
};

7
client/src/utils.js
View File

@@ -277,4 +277,11 @@ export const itemsStartWith = (items, char) => {
export const saveInvoke = (func, ...rest) => {
return func && func(...rest);
}
export const transformToForm = (obj, emptyInitialValues) => {
return _.pickBy(
obj,
(val, key) => val !== null && Object.keys(emptyInitialValues).includes(key),
)
}