diff --git a/client/src/components/Details/index.js b/client/src/components/Details/index.js index 9c9bdacb9..83c576d86 100644 --- a/client/src/components/Details/index.js +++ b/client/src/components/Details/index.js @@ -8,10 +8,17 @@ const DIRECTION = { HORIZANTAL: 'horizantal', }; +const DetailsMenuContext = React.createContext(); +const useDetailsMenuContext = () => React.useContext(DetailsMenuContext); + /** * Details menu. */ -export function DetailsMenu({ children, direction = DIRECTION.VERTICAL }) { +export function DetailsMenu({ + children, + direction = DIRECTION.VERTICAL, + minLabelSize, +}) { return (
- {children} + + {children} +
); } @@ -28,11 +37,22 @@ export function DetailsMenu({ children, direction = DIRECTION.VERTICAL }) { * Detail item. */ export function DetailItem({ label, children, name }) { + const { minLabelSize } = useDetailsMenuContext(); + return ( -
-
{label}
+
+
+ {label} +
{children}
); diff --git a/client/src/components/Drawer/DrawerInsider.js b/client/src/components/Drawer/DrawerInsider.js new file mode 100644 index 000000000..e63690a98 --- /dev/null +++ b/client/src/components/Drawer/DrawerInsider.js @@ -0,0 +1,26 @@ +import React from 'react'; +import classnames from 'classnames'; +import LoadingIndicator from 'components/LoadingIndicator'; + +/** + * Drawer inside. + */ +export function DrawerInsider({ + loading, + children, + name, + mount = false, + className, +}) { + return ( +
+ + { children } + +
+ ); +} \ No newline at end of file diff --git a/client/src/components/Drawer/DrawerMainTabs.js b/client/src/components/Drawer/DrawerMainTabs.js new file mode 100644 index 000000000..89ab0a52c --- /dev/null +++ b/client/src/components/Drawer/DrawerMainTabs.js @@ -0,0 +1,15 @@ +import React from 'react'; +import { Tabs } from '@blueprintjs/core'; + +/** + * Drawer main tabs. + */ +export function DrawerMainTabs({ children, ...restProps }) { + return ( +
+ + {children} + +
+ ); +} diff --git a/client/src/components/DrawersContainer.js b/client/src/components/DrawersContainer.js index 2803209e2..e56988bcb 100644 --- a/client/src/components/DrawersContainer.js +++ b/client/src/components/DrawersContainer.js @@ -1,7 +1,7 @@ import React from 'react'; -import EstimateDrawer from 'containers/Sales/Estimates/EstimateDetails/EstimateDrawer'; -import InvoiceDrawer from 'containers/Sales/Invoices/InvoiceDetails/InvoiceDrawer'; -import ReceiptDrawer from 'containers/Sales/Receipts/ReceiptDetails/ReceiptDrawer'; +// import EstimateDrawer from 'containers/Sales/Estimates/EstimateDetails/EstimateDrawer'; +// import InvoiceDrawer from 'containers/Sales/Invoices/InvoiceDetails/InvoiceDrawer'; +// import ReceiptDrawer from 'containers/Sales/Receipts/ReceiptDetails/ReceiptDrawer'; import PaymentReceiveDrawer from 'containers/Sales/PaymentReceives/PaymentDetails/PaymentReceiveDrawer'; import AccountDrawer from 'containers/Drawers/AccountDrawer'; import ManualJournalDrawer from 'containers/Drawers/ManualJournalDrawer'; @@ -23,9 +23,9 @@ import { DRAWERS } from 'common/drawers'; export default function DrawersContainer() { return (
- - - + {/* */} + {/* */} + {/* */} diff --git a/client/src/components/TotalLines/TotalLines.module.scss b/client/src/components/TotalLines/TotalLines.module.scss new file mode 100644 index 000000000..5c92246b5 --- /dev/null +++ b/client/src/components/TotalLines/TotalLines.module.scss @@ -0,0 +1,12 @@ +.total_lines {} + + +.total_line { + display: flex; + border-bottom: 1px solid #d2dde2; + + :global .amount, + :global .title{ + padding: 8px; + } +} \ No newline at end of file diff --git a/client/src/components/TotalLines/index.js b/client/src/components/TotalLines/index.js new file mode 100644 index 000000000..793f70c0d --- /dev/null +++ b/client/src/components/TotalLines/index.js @@ -0,0 +1,23 @@ +import React from 'react'; +import clsx from 'classnames'; + +import TotalLinesCls from './TotalLines.module.scss'; + +export function TotalLines({ children, className }) { + return ( +
+ {children} +
+ ); +} + +export function TotalLine({ title, value, className }) { + return ( +
+
{title}
+
{value}
+
+ ); +} diff --git a/client/src/components/Utils/Choose.js b/client/src/components/Utils/Choose.js index fa13379bb..eb4fffc80 100644 --- a/client/src/components/Utils/Choose.js +++ b/client/src/components/Utils/Choose.js @@ -2,32 +2,32 @@ import React from 'react'; import PropTypes from 'prop-types'; import If from './If'; -const Choose = props => { - let when = null; - let otherwise = null; +const Choose = (props) => { + let when = null; + let otherwise = null; - React.Children.forEach(props.children, children => { - if (children.props.condition === undefined) { - otherwise = children; - } else if (!when && children.props.condition === true) { - when = children; - } - }); + React.Children.forEach(props.children, (children) => { + if (children.props.condition === undefined) { + otherwise = children; + } else if (!when && children.props.condition === true) { + when = children; + } + }); - return when || otherwise; + return when || otherwise; }; Choose.propTypes = { - children: PropTypes.node + children: PropTypes.node, }; Choose.When = If; -Choose.Otherwise = ({render, children}) => render ? render() : children; +Choose.Otherwise = ({ render, children }) => (render ? render() : children); Choose.Otherwise.propTypes = { children: PropTypes.node, - render: PropTypes.func + render: PropTypes.func, }; -export default Choose; \ No newline at end of file +export default Choose; diff --git a/client/src/components/index.js b/client/src/components/index.js index b55982615..064f67d02 100644 --- a/client/src/components/index.js +++ b/client/src/components/index.js @@ -69,6 +69,9 @@ export * from './Dashboard/DashboardRowsHeightButton'; export * from './UniversalSearch/UniversalSearch'; export * from './PdfPreview'; export * from './Details'; +export * from './Drawer/DrawerInsider'; +export * from './Drawer/DrawerMainTabs'; +export * from './TotalLines/index' const Hint = FieldHint; diff --git a/client/src/containers/Drawers/BillDrawer/BillDetailActionsBar.js b/client/src/containers/Drawers/BillDrawer/BillDetailActionsBar.js new file mode 100644 index 000000000..e67562ccf --- /dev/null +++ b/client/src/containers/Drawers/BillDrawer/BillDetailActionsBar.js @@ -0,0 +1,77 @@ +import React from 'react'; +import { useHistory } from 'react-router-dom'; + +import { + Button, + NavbarGroup, + Classes, + NavbarDivider, + Intent, +} from '@blueprintjs/core'; +import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar'; + +import { useBillDrawerContext } from './BillDrawerProvider'; + +import withDialogActions from 'containers/Dialog/withDialogActions'; +import withAlertsActions from 'containers/Alert/withAlertActions'; +import withDrawerActions from 'containers/Drawer/withDrawerActions'; + +import { Icon, FormattedMessage as T } from 'components'; + +import { safeCallback, compose } from 'utils'; + +function BillDetailActionsBar({ + // #withDialogActions + openDialog, + + // #withAlertsActions + openAlert, + + // #withDrawerActions + closeDrawer, +}) { + const history = useHistory(); + + const { billId } = useBillDrawerContext(); + + // Handle edit bill. + const onEditBill = () => { + return billId + ? (history.push(`/bills/${billId}/edit`), closeDrawer('bill-drawer')) + : null; + }; + + // Handle delete bill. + const onDeleteBill = () => { + return billId + ? (openAlert('bill-delete', { billId }), closeDrawer('bill-drawer')) + : null; + }; + + return ( + + +
+ ); +} diff --git a/client/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailHeader.js b/client/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailHeader.js new file mode 100644 index 000000000..43ca39e3b --- /dev/null +++ b/client/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailHeader.js @@ -0,0 +1,55 @@ +import React from 'react'; +import intl from 'react-intl-universal'; +import { defaultTo } from 'lodash'; +import clsx from 'classnames'; + +import { DetailsMenu, DetailItem } from 'components'; +import { useInvoiceDetailDrawerContext } from './InvoiceDetailDrawerProvider'; + +import InvoiceDrawerCls from 'style/components/Drawers/InvoiceDrawer.module.scss'; + +/** + * Invoice detail header. + */ +export default function InvoiceDetailHeader() { + const { invoice } = useInvoiceDetailDrawerContext(); + + return ( +
+ + +

{invoice.formatted_amount}

+ + + + + + + + + + + + + +
+ ); +} diff --git a/client/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailTab.js b/client/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailTab.js index 8dbaf7cec..5741f7674 100644 --- a/client/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailTab.js +++ b/client/src/containers/Drawers/InvoiceDetailDrawer/InvoiceDetailTab.js @@ -1,89 +1,28 @@ import React from 'react'; -import { useHistory } from 'react-router-dom'; +import clsx from 'classnames'; -import { - Button, - NavbarGroup, - Classes, - NavbarDivider, - Intent, -} from '@blueprintjs/core'; -import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar'; +import { Card } from 'components'; -import { useInvoiceDetailDrawerContext } from './InvoiceDetailDrawerProvider'; +import InvoiceDetailActionsBar from './InvoiceDetailActionsBar'; +import InvoiceDetailHeader from './InvoiceDetailHeader'; +import InvoiceDetailTable from './InvoiceDetailTable'; +import { InvoiceDetailFooter } from './InvoiceDetailFooter'; -import withDialogActions from 'containers/Dialog/withDialogActions'; -import withAlertsActions from 'containers/Alert/withAlertActions'; -import withDrawerActions from 'containers/Drawer/withDrawerActions'; - -import { Icon, FormattedMessage as T } from 'components'; - -import { safeCallback, compose } from 'utils'; - -function InvoiceDetailTab({ - invoiceId, - // #withDialogActions - openDialog, - - // #withAlertsActions - openAlert, - - // #withDrawerActions - closeDrawer, -}) { - const history = useHistory(); - - // Handle edit sale invoice. - const onEditInvoice = () => { - return invoiceId - ? (history.push(`/invoices/${invoiceId}/edit`), - closeDrawer('invoice-detail-drawer')) - : null; - }; - - // Handle delete sale invoice. - const onDeleteInvoice = () => { - return invoiceId - ? (openAlert('invoice-delete', { invoiceId }), - closeDrawer('invoice-detail-drawer')) - : null; - }; - - // Handle print invoices. - const onPrintInvoice = () => { - openDialog('invoice-pdf-preview', { invoiceId }); - }; +import InvoiceDrawerCls from 'style/components/Drawers/InvoiceDrawer.module.scss'; +/** + * Invoice readonly details tab panel. + */ +export default function InvoiceDetailTab() { return ( - - -
+ ); +} diff --git a/client/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailHeader.js b/client/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailHeader.js new file mode 100644 index 000000000..2d3ab8fda --- /dev/null +++ b/client/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailHeader.js @@ -0,0 +1,55 @@ +import React from 'react'; +import intl from 'react-intl-universal'; +import { defaultTo } from 'lodash'; +import clsx from 'classnames'; + +import { DetailsMenu, DetailItem } from 'components'; + +import { useReceiptDetailDrawerContext } from './ReceiptDetailDrawerProvider'; + +import ReceiptDrawerCls from 'style/components/Drawers/ReceiptDrawer.module.scss'; + +/** + * receipt detail content. + */ +export default function ReceiptDetailHeader() { + const { receipt } = useReceiptDetailDrawerContext(); + + return ( +
+ + +

{receipt.formatted_amount}

+ + + + + + + + + + + + +
+ ); +} diff --git a/client/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailTab.js b/client/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailTab.js index 07e4b690a..34ef3e24f 100644 --- a/client/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailTab.js +++ b/client/src/containers/Drawers/ReceiptDetailDrawer/ReceiptDetailTab.js @@ -1,85 +1,25 @@ import React from 'react'; -import { useHistory } from 'react-router-dom'; +import clsx from 'classnames'; -import { - Button, - NavbarGroup, - Classes, - NavbarDivider, - Intent, -} from '@blueprintjs/core'; -import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar'; +import { Card } from 'components'; -import withDialogActions from 'containers/Dialog/withDialogActions'; -import withAlertsActions from 'containers/Alert/withAlertActions'; -import withDrawerActions from 'containers/Drawer/withDrawerActions'; +import ReceiptDetailActionBar from './ReceiptDetailActionBar'; +import ReceiptDetailHeader from './ReceiptDetailHeader'; +import ReceiptDetailTable from './ReceiptDetailTable'; +import { ReceiptDetailFooter } from './ReceiptDetailFooter'; -import { Icon, FormattedMessage as T } from 'components'; +import ReceiptDrawerCls from 'style/components/Drawers/ReceiptDrawer.module.scss'; -import { safeCallback, compose } from 'utils'; - -function ReceiptDetailTab({ - receiptId, - // #withDialogActions - openDialog, - - // #withAlertsActions - openAlert, - - // #withDrawerActions - closeDrawer, -}) { - const history = useHistory(); - - // Handle edit sale receipt. - const onEditReceipt = () => { - return receiptId - ? (history.push(`/receipts/${receiptId}/edit`), - closeDrawer('receipt-detail-drawer')) - : null; - }; - - // Handle delete sale receipt. - const onDeleteReceipt = () => { - return receiptId - ? (openAlert('receipt-delete', { receiptId }), - closeDrawer('receipt-detail-drawer')) - : null; - }; - // Handle print receipt. - const onPrintReceipt = () => { - openDialog('receipt-pdf-preview', { receiptId }); - }; +export default function ReceiptDetailTab() { return ( - - -