diff --git a/client/src/components/Dashboard/Dashboard.js b/client/src/components/Dashboard/Dashboard.js index c00bb07d4..9e116d70e 100644 --- a/client/src/components/Dashboard/Dashboard.js +++ b/client/src/components/Dashboard/Dashboard.js @@ -14,6 +14,7 @@ import Search from 'containers/GeneralSearch/Search'; import DashboardSplitPane from 'components/Dashboard/DashboardSplitePane'; import GlobalHotkeys from './GlobalHotkeys'; import withSettingsActions from 'containers/Settings/withSettingsActions'; +import DrawersContainer from 'components/DrawersContainer'; import { compose } from 'utils'; @@ -47,6 +48,7 @@ function Dashboard({ + ); } diff --git a/client/src/components/DrawersContainer.js b/client/src/components/DrawersContainer.js new file mode 100644 index 000000000..00cdaac4c --- /dev/null +++ b/client/src/components/DrawersContainer.js @@ -0,0 +1,12 @@ +import React from 'react'; +import EstimateDrawer from 'containers/Sales/Estimate/EstimateDrawer'; +import InvoiceDrawer from 'containers/Sales/Invoice/InvoiceDrawer'; + +export default function DrawersContainer() { + return ( +
+ + +
+ ); +} diff --git a/client/src/containers/Drawer/withDrawerActions.js b/client/src/containers/Drawer/withDrawerActions.js new file mode 100644 index 000000000..5842f3390 --- /dev/null +++ b/client/src/containers/Drawer/withDrawerActions.js @@ -0,0 +1,15 @@ +import { connect } from 'react-redux'; +import t from 'store/types'; + +export const mapStateToProps = (state, props) => { + return {}; +}; + +export const mapDispatchToProps = (dispatch) => ({ + openDrawer: (name, payload) => + dispatch({ type: t.OPEN_DRAWER, name, payload }), + closeDrawer: (name, payload) => + dispatch({ type: t.CLOSE_DRAWER, name, payload }), +}); + +export default connect(null, mapDispatchToProps); diff --git a/client/src/containers/Drawer/withDrawers.js b/client/src/containers/Drawer/withDrawers.js new file mode 100644 index 000000000..ee074bdc9 --- /dev/null +++ b/client/src/containers/Drawer/withDrawers.js @@ -0,0 +1,19 @@ +import { connect } from 'react-redux'; +import { + isDrawerOpenFactory, + getDrawerPayloadFactory, +} from 'store/dashboard/dashboard.selectors'; + +export default (mapState) => { + const isDrawerOpen = isDrawerOpenFactory(); + const getDrawerPayload = getDrawerPayloadFactory(); + + const mapStateToProps = (state, props) => { + const mapped = { + isOpen: isDrawerOpen(state, props), + payload: getDrawerPayload(state, props), + }; + return mapState ? mapState(mapped) : mapped; + }; + return connect(mapStateToProps); +}; diff --git a/client/src/containers/Drawers/DrawerTemplate.js b/client/src/containers/Drawers/DrawerTemplate.js new file mode 100644 index 000000000..2f9799009 --- /dev/null +++ b/client/src/containers/Drawers/DrawerTemplate.js @@ -0,0 +1,29 @@ +import React from 'react'; +import { FormattedMessage as T, useIntl } from 'react-intl'; +import { Position, Drawer } from '@blueprintjs/core'; + +export default function DrawerTemplate({ + children, + isOpen, + isClose, + drawerProps, +}) { + return ( +
+ } + position={Position.RIGHT} + canOutsideClickClose={true} + canEscapeKeyClose={true} + size={'65%'} + onClose={isClose} + {...drawerProps} + > + {children} + +
+ ); +} diff --git a/client/src/containers/Drawers/PaperTemplate.js b/client/src/containers/Drawers/PaperTemplate.js new file mode 100644 index 000000000..037ccd4d3 --- /dev/null +++ b/client/src/containers/Drawers/PaperTemplate.js @@ -0,0 +1,123 @@ +import React from 'react'; +import { Icon } from 'components'; +import 'style/components/Drawer/DrawerTemplate.scss'; + +export default function PaperTemplate({ labels: propLabels }) { + const labels = { + name: 'Estimate', + billedTo: 'Billed to', + date: 'Estimate date', + refNo: 'Estimate No.', + billedFrom: 'Billed from', + amount: 'Estimate amount', + dueDate: 'Due date', + ...propLabels, + }; + + return ( +
+
+
+
+

{labels.name}

+

info@bigcapital.ly

+
+ +
+ +
+
+ {labels.billedTo} +

Joe Biden

+
+
+ {labels.date} + +

1/1/2022

+
+
+ {labels.refNo} +

IN-2022

+
+
+ {labels.amount} +

6,000 LYD

+
+
+ {labels.billedFrom} +

Donald Trump

+
+
+ {labels.dueDate} +

25/03/2022

+
+
+ +
+
+ Description + Rate + Qty + Total +
+
+ + Nulla commodo magnanon dolor excepteur nisi aute laborum. + + 1 + 1 + 100 LYD +
+ +
+ + Nulla comm non dolor excepteur elit dolore eiusmod nisi aute + laborum. + + 1 + 1 + 100 LYD +
+
+ + Nulla comm non dolor excepteur elit dolore eiusmod nisi aute + laborum. + + 1 + 1 + 100 LYD +
+
+ + Nulla comm non dolor excepteur elit dolore eiusmod nisi aute + laborum. + + 1 + 1 + 100 LYD +
+
+ + Nulla comm non dolor excepteur elit dolore eiusmod nisi aute + laborum. + + 1 + 1 + 100 LYD +
+
+ +
+
+

Conditions and terms

+
+
    +
  • Est excepteur laboris do sit dolore sit exercitation non.
    • +
  • Lorem duis aliqua minim elit cillum.
    • +
  • Dolor ad quis Lorem ut mollit consectetur.
    • +
+
+
+
+ ); +} diff --git a/client/src/containers/Sales/Estimate/EstimateDrawer.js b/client/src/containers/Sales/Estimate/EstimateDrawer.js new file mode 100644 index 000000000..1b6c8b2cc --- /dev/null +++ b/client/src/containers/Sales/Estimate/EstimateDrawer.js @@ -0,0 +1,29 @@ +import React from 'react'; +import DrawerTemplate from 'containers/Drawers/DrawerTemplate'; +import PaperTemplate from 'containers/Drawers/PaperTemplate'; +import withDrawers from 'containers/Drawer/withDrawers'; +import withDrawerActions from 'containers/Drawer/withDrawerActions'; + +import { compose } from 'utils'; + +function EstimateDrawer({ + name, + //#withDrawer + isOpen, + payload, + + closeDrawer, +}) { + // handle close Drawer + const handleDrawerClose = () => { + closeDrawer(name); + }; + + return ( + + + + ); +} + +export default compose(withDrawers(), withDrawerActions)(EstimateDrawer); diff --git a/client/src/containers/Sales/Estimate/EstimatesDataTable.js b/client/src/containers/Sales/Estimate/EstimatesDataTable.js index f5599f496..1e2e2b721 100644 --- a/client/src/containers/Sales/Estimate/EstimatesDataTable.js +++ b/client/src/containers/Sales/Estimate/EstimatesDataTable.js @@ -46,6 +46,7 @@ function EstimatesDataTable({ onDeliverEstimate, onApproveEstimate, onRejectEstimate, + onDrawerEstimate, onSelectedRowsChange, }) { const { formatMessage } = useIntl(); @@ -112,6 +113,11 @@ function EstimatesDataTable({ /> + onDrawerEstimate()} + /> + { + openDrawer('estimate-drawer', {}); + }, [openDrawer]); + // Handle filter change to re-fetch data-table. const handleFilterChanged = useCallback(() => {}, []); @@ -147,6 +151,7 @@ function EstimatesList({ onDeliverEstimate={handleDeliverEstimate} onApproveEstimate={handleApproveEstimate} onRejectEstimate={handleRejectEstimate} + onDrawerEstimate={handleEstimateDrawer} onSelectedRowsChange={handleSelectedRowsChange} /> @@ -167,4 +172,5 @@ export default compose( estimateViews, })), withAlertsActions, + withDrawerActions, )(EstimatesList); diff --git a/client/src/containers/Sales/Invoice/InvoiceDrawer.js b/client/src/containers/Sales/Invoice/InvoiceDrawer.js new file mode 100644 index 000000000..54aee6d71 --- /dev/null +++ b/client/src/containers/Sales/Invoice/InvoiceDrawer.js @@ -0,0 +1,41 @@ +import React from 'react'; +import DrawerTemplate from 'containers/Drawers/DrawerTemplate'; +import PaperTemplate from 'containers/Drawers/PaperTemplate'; +import withDrawers from 'containers/Drawer/withDrawers'; +import withDrawerActions from 'containers/Drawer/withDrawerActions'; + +import { compose } from 'utils'; + +function InvoiceDrawer({ + name, + //#withDrawer + isOpen, + payload, + + closeDrawer, +}) { + // handle close Drawer + const handleDrawerClose = () => { + closeDrawer(name); + }; + + const propLabels = { + labels: { + name: 'Invoice', + billedTo: 'Billed to', + date: 'Invoice date', + refNo: 'Invoice No.', + billedFrom: 'Billed from', + amount: 'Invoice amount', + dueDate: 'Due date', + }, + }; + + return ( + + + + ); +} + +export default compose(withDrawers(), withDrawerActions)(InvoiceDrawer); diff --git a/client/src/containers/Sales/Invoice/InvoicesDataTable.js b/client/src/containers/Sales/Invoice/InvoicesDataTable.js index 4d8552116..52ce13685 100644 --- a/client/src/containers/Sales/Invoice/InvoicesDataTable.js +++ b/client/src/containers/Sales/Invoice/InvoicesDataTable.js @@ -55,6 +55,7 @@ function InvoicesDataTable({ onEditInvoice, onDeleteInvoice, onDeliverInvoice, + onDrawerInvoice, onSelectedRowsChange, }) { const { formatMessage } = useIntl(); @@ -93,6 +94,10 @@ function InvoicesDataTable({ onClick={() => onDeliverInvoice(invoice)} /> + onDrawerInvoice()} + /> { changePageTitle(formatMessage({ id: 'invoices_list' })); @@ -77,17 +81,20 @@ function InvoicesList({ // Handle cancel/confirm invoice deliver. const handleDeliverInvoice = useCallback( - ({id}) => { + ({ id }) => { openAlert('invoice-deliver', { invoiceId: id }); }, [openAlert], ); - const handleEditInvoice = useCallback((invoice) => { history.push(`/invoices/${invoice.id}/edit`); }); + const handleInvoiceDrawer = useCallback(() => { + openDrawer('invoice-drawer', {}); + }, [openDrawer]); + // Handle filter change to re-fetch data-table. const handleFilterChanged = useCallback(() => {}, []); @@ -118,6 +125,7 @@ function InvoicesList({ onDeleteInvoice={handleDeleteInvoice} onEditInvoice={handleEditInvoice} onDeliverInvoice={handleDeliverInvoice} + onDrawerInvoice={handleInvoiceDrawer} onSelectedRowsChange={handleSelectedRowsChange} /> @@ -138,4 +146,5 @@ export default compose( invoicesTableQuery, })), withAlertsActions, + withDrawerActions, )(InvoicesList); diff --git a/client/src/containers/Subscriptions/BillingPlansForm.js b/client/src/containers/Subscriptions/BillingPlansForm.js index 789bba008..cd80a4799 100644 --- a/client/src/containers/Subscriptions/BillingPlansForm.js +++ b/client/src/containers/Subscriptions/BillingPlansForm.js @@ -1,11 +1,11 @@ import React from 'react'; import { FormattedMessage as T } from 'react-intl'; -import 'style/pages/Subscription/BillingPlans.scss' +import 'style/pages/Subscription/BillingPlans.scss'; import BillingPlansInput from 'containers/Subscriptions/BillingPlansInput'; import BillingPeriodsInput from 'containers/Subscriptions/BillingPeriodsInput'; -import BillingPaymentMethod from 'containers/Subscriptions/BillingPaymentMethod'; +import BillingPaymentMethod from 'containers/Subscriptions/BillingPaymentmethod'; /** * Billing plans form. @@ -26,5 +26,5 @@ export default function BillingPlansForm() { description={} /> - ) -} \ No newline at end of file + ); +} diff --git a/client/src/lang/en/index.js b/client/src/lang/en/index.js index 17aa3419b..df7d2e12d 100644 --- a/client/src/lang/en/index.js +++ b/client/src/lang/en/index.js @@ -967,5 +967,8 @@ export default { view_all: 'View all', payment_via_voucher: 'Payment via voucher', voucher_number: 'Voucher number', - voucher: 'Voucher' + voucher: 'Voucher', + view_paper: 'View Paper', + estimate_paper:'Estimate Paper', + invoice_paper:'Invoice Paper', }; diff --git a/client/src/store/dashboard/dashboard.actions.js b/client/src/store/dashboard/dashboard.actions.js index 2f186efac..39b566f2d 100644 --- a/client/src/store/dashboard/dashboard.actions.js +++ b/client/src/store/dashboard/dashboard.actions.js @@ -6,7 +6,7 @@ export function openDialog(name, payload) { name: name, payload: payload, }; -}; +} export function closeDialog(name, payload) { return { @@ -17,7 +17,7 @@ export function closeDialog(name, payload) { } export function openAlert(name, payload) { - return { + return { type: t.OPEN_ALERT, name, payload, @@ -25,9 +25,24 @@ export function openAlert(name, payload) { } export function closeAlert(name, payload) { - return { + return { type: t.CLOSE_ALERT, name, payload, }; -} \ No newline at end of file +} + +export function openDrawer(name, payload) { + return { + type: t.OPEN_DRAWER, + name, + payload, + }; +} +export function closeDrawer(name, payload) { + return { + type: t.CLOSE_DRAWER, + name, + payload, + }; +} diff --git a/client/src/store/dashboard/dashboard.reducer.js b/client/src/store/dashboard/dashboard.reducer.js index ae50d8ac9..70131b29f 100644 --- a/client/src/store/dashboard/dashboard.reducer.js +++ b/client/src/store/dashboard/dashboard.reducer.js @@ -1,7 +1,7 @@ import t from 'store/types'; import { createReducer } from '@reduxjs/toolkit'; -import { persistReducer } from 'redux-persist' -import storage from 'redux-persist/lib/storage' // defaults to localStorage for web +import { persistReducer } from 'redux-persist'; +import storage from 'redux-persist/lib/storage'; // defaults to localStorage for web const initialState = { pageTitle: '', @@ -12,6 +12,7 @@ const initialState = { previousSidebarExpended: null, dialogs: {}, alerts: {}, + drawers: {}, topbarEditViewId: null, requestsLoading: 0, backLink: false, @@ -61,10 +62,19 @@ const reducerInstance = createReducer(initialState, { isOpen: false, }; }, - - [t.CLOSE_ALL_DIALOGS]: (state, action) => { - + [t.OPEN_DRAWER]: (state, action) => { + state.drawers[action.name] = { + isOpen: true, + payload: action.payload || {}, + }; }, + [t.CLOSE_DRAWER]: (state, action) => { + state.drawers[action.name] = { + ...state.drawers[action.name], + isOpen: false, + }; + }, + [t.CLOSE_ALL_DIALOGS]: (state, action) => {}, [t.SET_TOPBAR_EDIT_VIEW]: (state, action) => { state.topbarEditViewId = action.id; @@ -102,27 +112,31 @@ const reducerInstance = createReducer(initialState, { [t.SET_DASHBOARD_BACK_LINK]: (state, action) => { const { backLink } = action.payload; state.backLink = backLink; - } + }, }); -export default persistReducer({ - key: 'bigcapital:dashboard', - blacklist: [ - 'pageTitle', - 'pageSubtitle', - 'pageHint', - 'preferencesPageTitle', - 'topbarEditViewId', - 'backLink' - ], - storage, -}, reducerInstance); +export default persistReducer( + { + key: 'bigcapital:dashboard', + blacklist: [ + 'pageTitle', + 'pageSubtitle', + 'pageHint', + 'preferencesPageTitle', + 'topbarEditViewId', + 'backLink', + ], + storage, + }, + reducerInstance, +); export const getDialogPayload = (state, dialogName) => { return typeof state.dashboard.dialogs[dialogName] !== 'undefined' - ? state.dashboard.dialogs[dialogName].payload : {}; + ? state.dashboard.dialogs[dialogName].payload + : {}; }; export const getDialogActiveStatus = (state, dialogName) => { return true; -}; \ No newline at end of file +}; diff --git a/client/src/store/dashboard/dashboard.selectors.js b/client/src/store/dashboard/dashboard.selectors.js index 6212193f3..53e9f2e5c 100644 --- a/client/src/store/dashboard/dashboard.selectors.js +++ b/client/src/store/dashboard/dashboard.selectors.js @@ -1,33 +1,40 @@ -import { createSelector } from "@reduxjs/toolkit"; +import { createSelector } from '@reduxjs/toolkit'; -const dialogByNameSelector = (state, props) => state.dashboard.dialogs?.[props.dialogName]; +const dialogByNameSelector = (state, props) => + state.dashboard.dialogs?.[props.dialogName]; -export const isDialogOpenFactory = () => createSelector( - dialogByNameSelector, - (dialog) => { +export const isDialogOpenFactory = () => + createSelector(dialogByNameSelector, (dialog) => { return dialog && dialog.isOpen; - }, -); + }); -export const getDialogPayloadFactory = () => createSelector( - dialogByNameSelector, - (dialog) => { +export const getDialogPayloadFactory = () => + createSelector(dialogByNameSelector, (dialog) => { return { ...dialog?.payload }; - }, -); + }); -const alertByNameSelector = (state, props) => state.dashboard.alerts?.[props.name]; +const alertByNameSelector = (state, props) => + state.dashboard.alerts?.[props.name]; -export const isAlertOpenFactory = () => createSelector( - alertByNameSelector, - (alert) => { +export const isAlertOpenFactory = () => + createSelector(alertByNameSelector, (alert) => { return alert && alert.isOpen; - }, -); + }); -export const getAlertPayloadFactory = () => createSelector( - alertByNameSelector, - (alert) => { +export const getAlertPayloadFactory = () => + createSelector(alertByNameSelector, (alert) => { return { ...alert?.payload }; - }, -); + }); + +const drawerByNameSelector = (state, props) => + state.dashboard.drawers?.[props.name]; + +export const isDrawerOpenFactory = () => + createSelector(drawerByNameSelector, (drawer) => { + return drawer && drawer.isOpen; + }); + +export const getDrawerPayloadFactory = () => + createSelector(drawerByNameSelector, (drawer) => { + return { ...drawer?.payload }; + }); diff --git a/client/src/store/dashboard/dashboard.types.js b/client/src/store/dashboard/dashboard.types.js index 083446f75..faf6aabdc 100644 --- a/client/src/store/dashboard/dashboard.types.js +++ b/client/src/store/dashboard/dashboard.types.js @@ -1,4 +1,3 @@ - export default { OPEN_DIALOG: 'OPEN_DIALOG', CLOSE_DIALOG: 'CLOSE_DIALOG', @@ -6,6 +5,8 @@ export default { CLOSE_ALERT: 'CLOSE_ALERT', CLOSE_ALL_DIALOGS: 'CLOSE_ALL_DIALOGS', CLOSE_ALL_ALERTS: 'CLOSE_ALL_ALERTS', + OPEN_DRAWER: 'OPEN_DRAWER', + CLOSE_DRAWER: 'CLOSE_DRAWER', CHANGE_DASHBOARD_PAGE_TITLE: 'CHANGE_DASHBOARD_PAGE_TITLE', CHANGE_DASHBOARD_PAGE_HINT: 'CHANGE_DASHBOARD_PAGE_HINT', CHANGE_PREFERENCES_PAGE_TITLE: 'CHANGE_PREFERENCES_PAGE_TITLE', @@ -18,5 +19,5 @@ export default { SIDEBAR_SHRINK: 'SIDEBAR_SHRINK', RESET_SIDEBAR_PREVIOUS_EXPAND: 'RESET_SIDEBAR_PREVIOUS_EXPAND', RECORD_SIDEBAR_PREVIOUS_EXPAND: 'RECORD_SIDEBAR_PREVIOUS_EXPAND', - SET_DASHBOARD_BACK_LINK: 'SET_DASHBOARD_BACK_LINK' -}; \ No newline at end of file + SET_DASHBOARD_BACK_LINK: 'SET_DASHBOARD_BACK_LINK', +}; diff --git a/client/src/style/components/Drawer/DrawerTemplate.scss b/client/src/style/components/Drawer/DrawerTemplate.scss new file mode 100644 index 000000000..f21bf42be --- /dev/null +++ b/client/src/style/components/Drawer/DrawerTemplate.scss @@ -0,0 +1,181 @@ +#page-size { + margin: 0 auto; + // background-color: #ffffff; + background-color: transparent; + width: 21cm; + height: 29.7cm; + padding-bottom: 20px; +} + +.template { + background-color: transparent; + // margin: 30px; + margin: 20px; + + &__header { + display: flex; + align-items: center; + justify-content: space-between; + margin: 0px 40px 16px 0px; + &--title h1 { + color: #1c4587; + margin: 0; + } + &--title p { + color: #666666; + } + } + + &__content { + display: flex; + flex-wrap: wrap; + border-bottom: 2px solid #1155cc; + // padding-bottom: 40px; + padding-bottom: 35px; + + &__info { + flex: 0 1 25%; + padding-left: 5px; + color: #999999; + font-size: 16px; + font-weight: 400; + line-height: 1.6rem; + margin-bottom: 10px; + + .info-paragraph-amount { + margin-top: 8px; + color: #123163; + font-size: 26px; + font-weight: 500; + } + + .info-paragraph { + font-size: 15px; + color: #000; + } + } + + // &__content { + // display: flex; + // flex-wrap: wrap; + // border-bottom: 2px solid #1155cc; + // padding-bottom: 45px; + + // &--info { + // flex: 0 1 25%; + // padding-left: 5px; + // margin-bottom: 10px; + // } + // &--info > span { + // color: #999999; + // font-size: 16px; + // } + // &--info > p:not(.-info--amount) { + // color: #000; + // font-size: 14px; + // } + // // span { + // // color: #999999; + // // font-size: 16px; + // // } + // // p { + // // color: #000; + // // } + + // .info--amount { + // color: #123163; + // } + + // p { + // // font-size: 16px; + // // font-weight: 500; + // // margin: 5px 0px; + // color: #000; + // } + + // &--amount { + // color: #123163; + // color: red; + // // margin-top: 8px; + // // font-size: 25px; + // // font-weight: 700; + // } + } + + &__table { + display: flex; + flex-direction: column; + padding: 0px 5px; + margin: 5px 0px 20px 0px; + font-size: 16px; + + &__rows { + display: flex; + margin-bottom: 15px; + color: #1155cc; + + &--cell { + flex: 0 20%; + } + + &--cell:first-child { + flex: 1 0 20%; + padding-left: 5px; + } + } + + &__rows:not(:first-child) { + color: #000; + border-bottom: 1px solid #cecbcb; + padding-bottom: 15px; + } + } + + &__terms { + padding: 0px 5px; + &__title h4 { + font-size: 16px; + font-weight: 400; + color: #666666; + margin-bottom: 5px; + + // font-size: 18px; + // font-weight: 500; + } + + ul { + list-style: none; + } + ul li { + color: #000; + font-size: 14px; + } + ul li::before { + content: '•'; + color: #b7b7b7; + display: inline-block; + width: 1em; + margin-left: 0.7em; + } + } +} + +.bp3-drawer.bp3-position-right { + bottom: 0; + right: 0; + top: 0; + overflow: auto; + height: 100%; + .bp3-drawer-header .bp3-heading { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + word-wrap: normal; + flex: 1 1 auto; + line-height: inherit; + margin: 0; + font-size: 18px; + font-weight: 600; + color: #0d244a; + } +}