diff --git a/client/public/index.html b/client/public/index.html index abbfd9917..35b8d3acb 100644 --- a/client/public/index.html +++ b/client/public/index.html @@ -41,6 +41,7 @@ To create a production bundle, use `npm run build` or `yarn build`. --> + diff --git a/client/src/common/classes.js b/client/src/common/classes.js index eeb71cf89..b4dcb22e3 100644 --- a/client/src/common/classes.js +++ b/client/src/common/classes.js @@ -1,6 +1,17 @@ +import { Classes } from '@blueprintjs/core'; const CLASSES = { - DATATABLE_EDITOR: 'DATATABLE_EDITOR' + DATATABLE_EDITOR: 'DATATABLE_EDITOR', + + PAGE_FORM: 'page-form', + PAGE_FORM_HEADER: 'page-form__header', + PAGE_FORM_FOOTER: 'page-form__footer', + PAGE_FORM_FLOATING_ACTIONS: 'page-form__floating-action', + + PAGE_FORM_BILL: 'page-form--bill', + PAGE_FORM_ESTIMATE: 'page-form--estimate', + + ...Classes, }; export { diff --git a/client/src/components/EstimateListField.js b/client/src/components/EstimateListField.js index a7b94a662..affd29e4b 100644 --- a/client/src/components/EstimateListField.js +++ b/client/src/components/EstimateListField.js @@ -1,13 +1,12 @@ import React, { useCallback, useMemo, useEffect, useState } from 'react'; import { MenuItem } from '@blueprintjs/core'; import ListSelect from 'components/ListSelect'; -import { FormattedMessage as T } from 'react-intl'; function EstimateListField({ products, initialProductId, selectedProductId, - defautlSelectText = , + defautlSelectText = 'Click to select an item.', onProductSelected, }) { const initialProduct = useMemo( diff --git a/client/src/components/Grid/Col.js b/client/src/components/Grid/Col.js new file mode 100644 index 000000000..925d1c097 --- /dev/null +++ b/client/src/components/Grid/Col.js @@ -0,0 +1,113 @@ +import classNames from 'classnames'; +import PropTypes from 'prop-types'; + +import React from 'react'; + +const DEVICE_SIZES = ['xl', 'lg', 'md', 'sm', 'xs']; +const rowColWidth = PropTypes.oneOfType([PropTypes.number, PropTypes.string]); + +const rowColumns = PropTypes.oneOfType([ + rowColWidth, + PropTypes.shape({ + cols: rowColWidth, + }), +]); + +const propTypes = { + /** + * @default 'row' + */ + bsPrefix: PropTypes.string, + + /** Removes the gutter spacing between `Col`s as well as any added negative margins. */ + noGutters: PropTypes.bool.isRequired, + as: PropTypes.elementType, + + /** + * The number of columns that will fit next to each other on extra small devices (<576px) + * + * @type {(number|{ cols: number })} + */ + xs: rowColumns, + + /** + * The number of columns that will fit next to each other on small devices (≥576px) + * + * @type {(number|{ cols: number })} + */ + sm: rowColumns, + + /** + * The number of columns that will fit next to each other on medium devices (≥768px) + * + * @type {(number|{ cols: number })} + */ + md: rowColumns, + + /** + * The number of columns that will fit next to each other on large devices (≥992px) + * + * @type {(number|{ cols: number })} + */ + lg: rowColumns, + + /** + * The number of columns that will fit next to each other on extra large devices (≥1200px) + * + * @type {(number|{ cols: number })} + */ + xl: rowColumns, +}; + +const defaultProps = { + noGutters: false, +}; + + +function Row ({ + bsPrefix, + className, + noGutters, + // Need to define the default "as" during prop destructuring to be compatible with styled-components github.com/react-bootstrap/react-bootstrap/issues/3595 + as: Component = 'div', + ...props +}) { + const decoratedBsPrefix = ''; + const sizePrefix = `col`; + const classes = []; + + DEVICE_SIZES.forEach((brkPoint) => { + const propValue = props[brkPoint]; + delete props[brkPoint]; + + let cols; + if (propValue != null && typeof propValue === 'object') { + ({ cols } = propValue); + } else { + cols = propValue; + } + + const infix = brkPoint !== 'xs' ? `-${brkPoint}` : ''; + + if (cols != null) classes.push(`${sizePrefix}${infix}-${cols}`); + }); + + return ( + + ); +} + +Row.displayName = 'Row'; +Row.propTypes = propTypes; +Row.defaultProps = defaultProps; + +export default Row; \ No newline at end of file diff --git a/client/src/components/Grid/Row.js b/client/src/components/Grid/Row.js new file mode 100644 index 000000000..146831c36 --- /dev/null +++ b/client/src/components/Grid/Row.js @@ -0,0 +1,111 @@ +import classNames from 'classnames'; +import PropTypes from 'prop-types'; + +import React from 'react'; + +const DEVICE_SIZES = ['xl', 'lg', 'md', 'sm', 'xs']; +const rowColWidth = PropTypes.oneOfType([PropTypes.number, PropTypes.string]); + +const rowColumns = PropTypes.oneOfType([ + rowColWidth, + PropTypes.shape({ + cols: rowColWidth, + }), +]); + +const propTypes = { + /** + * @default 'row' + */ + bsPrefix: PropTypes.string, + + /** Removes the gutter spacing between `Col`s as well as any added negative margins. */ + noGutters: PropTypes.bool.isRequired, + as: PropTypes.elementType, + + /** + * The number of columns that will fit next to each other on extra small devices (<576px) + * + * @type {(number|{ cols: number })} + */ + xs: rowColumns, + + /** + * The number of columns that will fit next to each other on small devices (≥576px) + * + * @type {(number|{ cols: number })} + */ + sm: rowColumns, + + /** + * The number of columns that will fit next to each other on medium devices (≥768px) + * + * @type {(number|{ cols: number })} + */ + md: rowColumns, + + /** + * The number of columns that will fit next to each other on large devices (≥992px) + * + * @type {(number|{ cols: number })} + */ + lg: rowColumns, + + /** + * The number of columns that will fit next to each other on extra large devices (≥1200px) + * + * @type {(number|{ cols: number })} + */ + xl: rowColumns, +}; + +const defaultProps = { + noGutters: false, +}; + +function Row ({ + bsPrefix, + className, + noGutters, + // Need to define the default "as" during prop destructuring to be compatible with styled-components github.com/react-bootstrap/react-bootstrap/issues/3595 + as: Component = 'div', + ...props +}) { + const decoratedBsPrefix = 'row'; + const sizePrefix = `${decoratedBsPrefix}-cols`; + const classes = []; + + DEVICE_SIZES.forEach((brkPoint) => { + const propValue = props[brkPoint]; + delete props[brkPoint]; + + let cols; + if (propValue != null && typeof propValue === 'object') { + ({ cols } = propValue); + } else { + cols = propValue; + } + + const infix = brkPoint !== 'xs' ? `-${brkPoint}` : ''; + + if (cols != null) classes.push(`${sizePrefix}${infix}-${cols}`); + }); + + return ( + + ); +} + +Row.displayName = 'Row'; +Row.propTypes = propTypes; +Row.defaultProps = defaultProps; + +export default Row; \ No newline at end of file diff --git a/client/src/components/index.js b/client/src/components/index.js index ffdd3a48c..db8721f04 100644 --- a/client/src/components/index.js +++ b/client/src/components/index.js @@ -26,6 +26,8 @@ import DialogContent from './Dialog/DialogContent'; import DialogSuspense from './Dialog/DialogSuspense'; import InputPrependButton from './Forms/InputPrependButton'; import CategoriesSelectList from './CategoriesSelectList'; +import Row from './Grid/Row'; +import Col from './Grid/Col'; const Hint = FieldHint; @@ -58,5 +60,7 @@ export { DialogContent, DialogSuspense, InputPrependButton, - CategoriesSelectList + CategoriesSelectList, + Col, + Row, }; diff --git a/client/src/containers/Accounting/MakeJournalEntriesForm.js b/client/src/containers/Accounting/MakeJournalEntriesForm.js index 12a90a314..edacf6b78 100644 --- a/client/src/containers/Accounting/MakeJournalEntriesForm.js +++ b/client/src/containers/Accounting/MakeJournalEntriesForm.js @@ -456,8 +456,8 @@ export default compose( withDashboardActions, withMediaActions, withSettings(({ manualJournalsSettings }) => ({ - journalNextNumber: manualJournalsSettings.next_number, - journalNumberPrefix: manualJournalsSettings.number_prefix + journalNextNumber: manualJournalsSettings.nextNumber, + journalNumberPrefix: manualJournalsSettings.numberPrefix })), withManualJournalsActions, )(MakeJournalEntriesForm); diff --git a/client/src/containers/Accounts/AccountsDataTable.js b/client/src/containers/Accounts/AccountsDataTable.js index c52e7053a..3ee7db643 100644 --- a/client/src/containers/Accounts/AccountsDataTable.js +++ b/client/src/containers/Accounts/AccountsDataTable.js @@ -101,7 +101,7 @@ function AccountNameAccessor(row) { - + ); } @@ -270,7 +270,7 @@ function AccountsDataTable({ ); const selectionColumn = useMemo( - () => ({ minWidth: 45, width: 45, maxWidth: 45 }), + () => ({ minWidth: 40, width: 40, maxWidth: 40 }), [], ); diff --git a/client/src/containers/Expenses/ExpenseForm.js b/client/src/containers/Expenses/ExpenseForm.js index 20e75c8c6..210905a11 100644 --- a/client/src/containers/Expenses/ExpenseForm.js +++ b/client/src/containers/Expenses/ExpenseForm.js @@ -342,10 +342,6 @@ function ExpenseForm({ category.amount && category.index && category.expense_account_id, ); - console.log(categories, 'V'); - - console.log(formik.errors, 'Error'); - return (
diff --git a/client/src/containers/Purchases/Bill/BillForm.js b/client/src/containers/Purchases/Bill/BillForm.js index ae027a6ec..dc8fd018a 100644 --- a/client/src/containers/Purchases/Bill/BillForm.js +++ b/client/src/containers/Purchases/Bill/BillForm.js @@ -9,11 +9,10 @@ import * as Yup from 'yup'; import { useFormik } from 'formik'; import moment from 'moment'; import { Intent, FormGroup, TextArea } from '@blueprintjs/core'; -import { Row, Col } from 'react-grid-system'; - +import classNames from 'classnames'; import { FormattedMessage as T, useIntl } from 'react-intl'; import { pick } from 'lodash'; - +import { CLASSES } from 'common/classes'; import BillFormHeader from './BillFormHeader'; import EstimatesItemsTable from 'containers/Sales/Estimate/EntriesItemsTable'; import BillFormFooter from './BillFormFooter'; @@ -25,7 +24,7 @@ import withBillActions from './withBillActions'; import withBillDetail from './withBillDetail'; import withSettings from 'containers/Settings/withSettings'; -import { AppToaster } from 'components'; +import { AppToaster, Row, Col } from 'components'; import Dragzone from 'components/Dragzone'; import useMedia from 'hooks/useMedia'; @@ -306,34 +305,40 @@ function BillForm({ ); }; return ( -
+
+ - - - } className={'form-group--'}> -