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

Merge branch 'master' of https://github.com/abouolia/Bigcapital

Browse Source
This commit is contained in:
elforjani3
2020-11-10 20:41:15 +02:00
parent 6da8f22885 aabd42a7a1
commit 13fb872ca2
10 changed files with 243 additions and 193 deletions
Download Patch File Download Diff File Expand all files Collapse all files

130
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,24 @@ 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 +88,60 @@ 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(() => {
@@ -127,6 +150,14 @@ function ItemForm({
: 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' })
}
return fields;
}
// Handles the form submit.
const handleFormSubmit = (values, { setSubmitting, resetForm, setErrors }) => {
setSubmitting(true);
@@ -141,7 +172,7 @@ function ItemForm({
'the_item_has_been_successfully_edited',
},
{
number: itemDetail.id,
number: itemId,
},
),
intent: Intent.SUCCESS,
@@ -150,13 +181,18 @@ function ItemForm({
history.push('/items');
queryCache.removeQueries(['items-table']);
};
const onError = (response) => {
const onError = ({ response }) => {
setSubmitting(false);
if (response.data.errors) {
const _errors = transformApiErrors(response.data.errors);
setErrors({ ..._errors });
}
};
if (isNewMode) {
requestSubmitItem(form).then(onSuccess).catch(onError);
} else {
requestEditItem(form).then(onSuccess).catch(onError);
requestEditItem(itemId, form).then(onSuccess).catch(onError);
}
};
@@ -181,7 +217,7 @@ function ItemForm({
} else {
changePageSubtitle('');
}
}, [values.item_type]);
}, [values.item_type, changePageSubtitle, formatMessage]);
const initialAttachmentFiles = useMemo(() => {
return itemDetail && itemDetail.media
@@ -217,24 +253,24 @@ function ItemForm({
<form onSubmit={handleSubmit}>
<div class={classNames(CLASSES.PAGE_FORM_BODY)}>
<ItemFormPrimarySection
errors={errors}
touched={touched}
values={values}
getFieldProps={getFieldProps}
setFieldValue={setFieldValue}
errors={errors}
touched={touched}
values={values}
/>
<ItemFormBody
getFieldProps={getFieldProps}
touched={touched}
errors={errors}
values={values}
getFieldProps={getFieldProps}
setFieldValue={setFieldValue}
/>
<ItemFormInventorySection
errors={errors}
touched={touched}
setFieldValue={setFieldValue}
values={values}
setFieldValue={setFieldValue}
getFieldProps={getFieldProps}
/>
</div>

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>

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

@@ -9,7 +9,7 @@ import {
Position,
Tooltip,
} from '@blueprintjs/core';
import { FormattedMessage as T, useIntl } from 'react-intl';
import { FormattedMessage as T } from 'react-intl';
import {
CategoriesSelectList,
ErrorMessage,
@@ -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,49 +69,21 @@ 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>
}
value="non_inventory"
label={<T id={'non_inventory'} />}
value="non-inventory"
/>
</RadioGroup>
</FormGroup>
@@ -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}

51
client/src/containers/Items/ItemsDataTable.js
View File

@@ -7,6 +7,7 @@ import {
MenuDivider,
Position,
Intent,
Tag,
} from '@blueprintjs/core';
import { FormattedMessage as T, useIntl } from 'react-intl';
import { Icon, DataTable, Money, If, Choose } from 'components';
@@ -15,6 +16,7 @@ import LoadingIndicator from 'components/LoadingIndicator';
import withItems from 'containers/Items/withItems';
import { compose } from 'utils';
const ItemsDataTable = ({
loading,
@@ -87,43 +89,58 @@ const ItemsDataTable = ({
{
Header: formatMessage({ id: 'item_name' }),
accessor: 'name',
className: 'actions',
className: 'name',
width: 180,
},
{
Header: formatMessage({ id: 'sku' }),
Header: formatMessage({ id: 'item_code' }),
accessor: 'sku',
className: 'sku',
width: 120,
},
{
Header: formatMessage({ id: 'item_type' }),
accessor: (row) =>
row.type ? (
<Tag minimal={true} round={true} intent={Intent.NONE}>
{formatMessage({ id: row.type })}
</Tag>
) : (
''
),
className: 'item_type',
width: 120,
},
{
Header: formatMessage({ id: 'category' }),
accessor: 'category.name',
className: 'category',
width: 150,
},
{
Header: formatMessage({ id: 'sell_price' }),
accessor: (row) => <Money amount={row.sell_price} currency={'USD'} />,
className: 'sell-price',
width: 150,
},
{
Header: formatMessage({ id: 'cost_price' }),
accessor: (row) => <Money amount={row.cost_price} currency={'USD'} />,
className: 'cost-price',
width: 150,
},
{
Header: formatMessage({ id: 'quantity_on_hand' }),
accessor: 'quantity_on_hand',
className: 'quantity_on_hand',
width: 140,
},
{
Header: formatMessage({ id: 'average_rate' }),
accessor: 'average_cost_rate',
className: 'average_cost_rate',
width: 140,
},
// {
// Header: 'Cost Account',
// accessor: 'cost_account.name',
// className: "cost-account",
// },
// {
// Header: 'Sell Account',
// accessor: 'sell_account.name',
// className: "sell-account",
// },
// {
// Header: 'Inventory Account',
// accessor: 'inventory_account.name',
// className: "inventory-account",
// },
{
id: 'actions',
Cell: ({ cell }) => (

12
client/src/containers/Items/ItemsList.js
View File

@@ -97,6 +97,16 @@ function ItemsList({
intent: Intent.SUCCESS,
});
setDeleteItem(false);
}).catch(({ errors }) => {
if (errors.find(error => error.type === 'ITEM_HAS_ASSOCIATED_TRANSACTINS')) {
AppToaster.show({
message: formatMessage({
id: 'the_item_has_associated_transactions',
}),
intent: Intent.DANGER,
});
}
setDeleteItem(false);
});
}, [requestDeleteItem, deleteItem, formatMessage]);
@@ -189,8 +199,6 @@ function ItemsList({
return (
<DashboardInsider
loading={fetchResourceViews.isFetching || fetchResourceFields.isFetching}
// isLoading={fetchHook.isFetching}
name={'items-list'}
>
<ItemsActionsBar

8
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,10 @@ 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',
quantity_on_hand: 'Quantity on hand',
average_rate: 'Average rate',
the_name_used_before: 'The name is already used.',
the_item_has_associated_transactions: 'The item has associated transactions.'
};

2
client/src/store/items/items.actions.js
View File

@@ -80,7 +80,7 @@ export const deleteItem = ({ id }) => {
resolve(response);
})
.catch((error) => {
reject(error);
reject(error?.response?.data);
});
});
};

61
client/src/style/pages/items.scss
View File

@@ -81,56 +81,21 @@
}
// .item-form{
// padding: 22px;
// padding-bottom: 90px;
// &__primary-section{
// background-color: #FAFAFA;
// padding: 40px 22px 22px;
// margin: -22px -22px 22px;
// background-color: #FAFAFA;
// }
// &__accounts-section{
// h4{
// margin: 0;
// font-weight: 500;
// margin-bottom: 20px;
// color: #828282;
// }
// > div:first-of-type{
// padding-right: 15px !important;
// }
.dashboard__insider--items-list{
// > div ~ div{
// padding-left: 15px !important;
// border-left: 1px solid #e8e8e8;
// }
// }
// .#{$ns}-form-group{
// .#{$ns}-label{
// width: 130px;
// }
.bigcapital-datatable{
// .#{$ns}-form-content{
// width: 250px;
// }
// }
.table{
.tbody{
.item_type.td{
// .form-group--item-type,
// .form-group--item-name{
// .#{$ns}-form-content{
// width: 350px;
// }
// }
// .form-group--active{
// margin-bottom: 5px;
// .bp3-control.bp3-checkbox{
// margin: 0;
// }
// }
// }
.bp3-tag{
font-size: 13px;
}
}
}
}
}
}

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),
)
}