QT/bigcapital
1
0
Fork 0
mirror of https://github.com/bigcapitalhq/bigcapital.git synced 2026-02-17 05:10:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: styling item form.

Browse Source
This commit is contained in:
Ahmed Bouhuolia
2020-11-09 19:31:05 +02:00
parent 347bc672fe
commit be5d2859c1
8 changed files with 749 additions and 502 deletions
Download Patch File Download Diff File Expand all files Collapse all files

188
client/src/containers/Items/ItemFormBody.js Normal file
View File

@@ -0,0 +1,188 @@
import React from 'react';
import {
FormGroup,
Intent,
InputGroup,
Classes,
Checkbox,
} from '@blueprintjs/core';
import {
AccountsSelectList,
MoneyInputGroup,
ErrorMessage,
Col,
Row,
Hint,
} from 'components';
import { FormattedMessage as T } from 'react-intl';
import classNames from 'classnames';
import withAccounts from 'containers/Accounts/withAccounts';
import { compose } from 'utils';
/**
* Item form body.
*/
function ItemFormBody({
getFieldProps,
touched,
errors,
values,
setFieldValue,
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>
{/*------------- Selling price ------------- */}
<FormGroup
label={<T id={'selling_price'} />}
className={'form-group--item-selling-price'}
intent={
errors.selling_price && touched.selling_price && Intent.DANGER
}
helperText={
<ErrorMessage {...{ errors, touched }} name="selling_price" />
}
inline={true}
>
<MoneyInputGroup
value={values.selling_price}
prefix={'$'}
onChange={(e, value) => {
setFieldValue('selling_price', value);
}}
inputGroupProps={{
medium: true,
intent:
errors.selling_price &&
touched.selling_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,
)}
>
<AccountsSelectList
accounts={accountsList}
onAccountSelected={(account) => {
setFieldValue('sell_account_id', account.id);
}}
defaultSelectText={<T id={'select_account'} />}
selectedAccountId={values.sell_account_id}
disabled={!values.sellable}
/>
</FormGroup>
</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>
{/*------------- 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>
{/*------------- 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,
)}
>
<AccountsSelectList
accounts={accountsList}
onAccountSelected={(account) => {
setFieldValue('cost_account_id', account.id)
}}
defaultSelectText={<T id={'select_account'} />}
selectedAccountId={values.cost_account_id}
disabled={!values.purchasable}
/>
</FormGroup>
</Col>
</Row>
</div>
);
}
export default compose(
withAccounts(({ accountsList }) => ({
accountsList,
})),
)(ItemFormBody);