From b9e61461ae049a212f7187c159b2c157e351889a Mon Sep 17 00:00:00 2001 From: Ahmed Bouhuolia Date: Thu, 19 Nov 2020 11:43:53 +0200 Subject: [PATCH] feat: add input group prepend component. --- .../src/components/Forms/InputPrependText.js | 9 ++ client/src/components/index.js | 2 + .../Customers/CustomerFinancialPanel.js | 4 +- client/src/containers/Items/ItemForm.js | 2 +- client/src/containers/Items/ItemFormBody.js | 82 ++++++++++--------- .../Sales/Invoice/InvoiceFormHeader.js | 1 - client/src/style/objects/form.scss | 39 +++++++++ 7 files changed, 95 insertions(+), 44 deletions(-) create mode 100644 client/src/components/Forms/InputPrependText.js diff --git a/client/src/components/Forms/InputPrependText.js b/client/src/components/Forms/InputPrependText.js new file mode 100644 index 000000000..77a581f3f --- /dev/null +++ b/client/src/components/Forms/InputPrependText.js @@ -0,0 +1,9 @@ +import React from 'react'; + +export default function InputPrependText({ text, children }) { + return ( +
+ {text} +
+ ); +} diff --git a/client/src/components/index.js b/client/src/components/index.js index e58492757..b63866c18 100644 --- a/client/src/components/index.js +++ b/client/src/components/index.js @@ -39,6 +39,7 @@ import MoneyInputGroup from './MoneyInputGroup'; import Dragzone from './Dragzone'; import EmptyStatus from './EmptyStatus'; import DashboardCard from './Dashboard/DashboardCard'; +import InputPrependText from './Forms/InputPrependText'; const Hint = FieldHint; @@ -84,4 +85,5 @@ export { Dragzone, EmptyStatus, DashboardCard, + InputPrependText, }; diff --git a/client/src/containers/Customers/CustomerFinancialPanel.js b/client/src/containers/Customers/CustomerFinancialPanel.js index bea09ca4d..c8a0d39c8 100644 --- a/client/src/containers/Customers/CustomerFinancialPanel.js +++ b/client/src/containers/Customers/CustomerFinancialPanel.js @@ -75,9 +75,7 @@ function CustomerFinancialPanel({ diff --git a/client/src/containers/Items/ItemForm.js b/client/src/containers/Items/ItemForm.js index b101750b2..3d0a5c933 100644 --- a/client/src/containers/Items/ItemForm.js +++ b/client/src/containers/Items/ItemForm.js @@ -37,7 +37,7 @@ const defaultInitialValues = { inventory_account_id: '', category_id: '', note: '', - sellable: true, + sellable: 1, purchasable: true, }; diff --git a/client/src/containers/Items/ItemFormBody.js b/client/src/containers/Items/ItemFormBody.js index 764e8d3be..274930060 100644 --- a/client/src/containers/Items/ItemFormBody.js +++ b/client/src/containers/Items/ItemFormBody.js @@ -1,34 +1,33 @@ import React from 'react'; import { FastField, Field, ErrorMessage } from 'formik'; -import { - FormGroup, - Classes, - Checkbox, -} from '@blueprintjs/core'; +import { FormGroup, Classes, Checkbox, ControlGroup } from '@blueprintjs/core'; import { AccountsSelectList, MoneyInputGroup, Col, Row, Hint, + InputPrependText, } from 'components'; import { FormattedMessage as T } from 'react-intl'; import classNames from 'classnames'; + import withAccounts from 'containers/Accounts/withAccounts'; +import withSettings from 'containers/Settings/withSettings'; import { compose, inputIntent } from 'utils'; /** * Item form body. */ -function ItemFormBody({ accountsList }) { +function ItemFormBody({ accountsList, baseCurrency }) { return (
{/*------------- Purchasable checbox ------------- */} - {({ field: { onChange, onBlur, name, checked } }) => ( + {({ field }) => ( } name={'sellable'} - checked={!!checked} - onChange={onChange} - onBlur={onBlur} + {...field} /> )} {/*------------- Selling price ------------- */} - - {({ form, field, field: { value }, meta: { error, touched } }) => ( + + {({ form, field: { value }, meta: { error, touched } }) => ( } className={'form-group--sell_price'} @@ -56,21 +53,23 @@ function ItemFormBody({ accountsList }) { helperText={} inline={true} > - + + + { + form.setFieldValue('sell_price', value); + }} + /> + )} - + - {/*------------- Selling account ------------- */} + {/*------------- Selling account ------------- */} {({ form, field: { value }, meta: { error, touched } }) => ( {/*------------- Sellable checkbox ------------- */} - - {({ form, field: { value, onChange }, meta: { error, touched } }) => ( + + {({ field }) => ( } - checked={value} - onChange={onChange} + {...field} /> )} {/*------------- Cost price ------------- */} - + {({ field, form, field: { value }, meta: { error, touched } }) => ( } @@ -129,18 +127,21 @@ function ItemFormBody({ accountsList }) { helperText={} inline={true} > - + + + { + form.setFieldValue('cost_price', unformattedValue); + }} + /> + )} - + {/*------------- Cost account ------------- */} @@ -180,4 +181,7 @@ export default compose( withAccounts(({ accountsList }) => ({ accountsList, })), + withSettings(({ organization }) => ({ + baseCurrency: 'USD', + })), )(ItemFormBody); diff --git a/client/src/containers/Sales/Invoice/InvoiceFormHeader.js b/client/src/containers/Sales/Invoice/InvoiceFormHeader.js index f0d90a48b..3684d5f15 100644 --- a/client/src/containers/Sales/Invoice/InvoiceFormHeader.js +++ b/client/src/containers/Sales/Invoice/InvoiceFormHeader.js @@ -8,7 +8,6 @@ import { import { DateInput } from '@blueprintjs/datetime'; import { FastField, ErrorMessage } from 'formik'; import { FormattedMessage as T } from 'react-intl'; -import moment from 'moment'; import { momentFormatter, compose, tansformDateValue, saveInvoke } from 'utils'; import classNames from 'classnames'; import { CLASSES } from 'common/classes'; diff --git a/client/src/style/objects/form.scss b/client/src/style/objects/form.scss index 53d3f7a50..2d154cbcd 100644 --- a/client/src/style/objects/form.scss +++ b/client/src/style/objects/form.scss @@ -98,6 +98,45 @@ label.bp3-label{ } } +.input-group-prepend{ + + .input-group-text{ + display: flex; + align-items: center; + padding: .375rem .75rem; + margin-bottom: 0; + font-size: 1rem; + font-weight: 400; + line-height: 1.5; + color: #495057; + text-align: center; + white-space: nowrap; + background-color: #e9ecef; + border: 1px solid #ced4da; + border-radius: .25rem; + height: 100%; + + .bp3-form-group &{ + padding: .25rem .5rem; + font-size: .875rem; + line-height: 1.5; + border-radius: .2rem; + } + } +} + +.bp3-form-group{ + + .bp3-input-group{ + flex: 1 1 auto; + } + .bp3-control-group{ + > .input-group-prepend:first-child .input-group-text{ + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + } +} .#{$ns}-html-select{ .bp3-icon-double-caret-vertical{