diff --git a/client/src/components/Dashboard/DashboardBackLink.js b/client/src/components/Dashboard/DashboardBackLink.js new file mode 100644 index 000000000..06700039e --- /dev/null +++ b/client/src/components/Dashboard/DashboardBackLink.js @@ -0,0 +1,38 @@ +import React from 'react'; +import withBreadcrumbs from 'react-router-breadcrumbs-hoc'; +import { useHistory } from 'react-router-dom'; +import routes from 'routes/dashboard'; +import { If, Icon } from 'components'; +import withDashboard from 'containers/Dashboard/withDashboard'; +import { compose } from 'utils'; + +function DashboardBackLink({ dashboardBackLink, breadcrumbs }) { + const history = useHistory(); + const crumb = breadcrumbs[breadcrumbs.length - 2]; + + const handleClick = (event) => { + const url = + typeof dashboardBackLink === 'string' + ? dashboardBackLink + : crumb.match.url; + history.push(url); + event.preventDefault(); + }; + + return ( + + + + ); +} + +export default compose( + withBreadcrumbs(routes), + withDashboard(({ dashboardBackLink }) => ({ + dashboardBackLink, + })), +)(DashboardBackLink); diff --git a/client/src/components/Dashboard/DashboardBreadcrumbs.js b/client/src/components/Dashboard/DashboardBreadcrumbs.js index bf73a8916..840e0b1cd 100644 --- a/client/src/components/Dashboard/DashboardBreadcrumbs.js +++ b/client/src/components/Dashboard/DashboardBreadcrumbs.js @@ -9,7 +9,7 @@ import withBreadcrumbs from 'react-router-breadcrumbs-hoc'; import routes from 'routes/dashboard'; import { useHistory } from 'react-router-dom'; -function DashboardBreadcrumbs( {breadcrumbs }){ +function DashboardBreadcrumbs({ breadcrumbs }){ const history = useHistory(); return( diff --git a/client/src/components/Dashboard/DashboardTopbar.js b/client/src/components/Dashboard/DashboardTopbar.js index a99b738b4..591586207 100644 --- a/client/src/components/Dashboard/DashboardTopbar.js +++ b/client/src/components/Dashboard/DashboardTopbar.js @@ -13,6 +13,7 @@ import { FormattedMessage as T } from 'react-intl'; import DashboardTopbarUser from 'components/Dashboard/TopbarUser'; import DashboardBreadcrumbs from 'components/Dashboard/DashboardBreadcrumbs'; +import DashboardBackLink from 'components/Dashboard/DashboardBackLink'; import { Icon, Hint, If } from 'components'; import withSearch from 'containers/GeneralSearch/withSearch'; @@ -114,6 +115,8 @@ function DashboardTopbar({
+ +
diff --git a/client/src/config/sidebarMenu.js b/client/src/config/sidebarMenu.js index 1d26a16bc..7d7bb45aa 100644 --- a/client/src/config/sidebarMenu.js +++ b/client/src/config/sidebarMenu.js @@ -130,7 +130,7 @@ export default [ children: [ { text: , - href: '/expenses-list', + href: '/expenses', }, { text: , diff --git a/client/src/containers/Accounting/MakeJournalEntriesPage.js b/client/src/containers/Accounting/MakeJournalEntriesPage.js index 035881408..0e823f2da 100644 --- a/client/src/containers/Accounting/MakeJournalEntriesPage.js +++ b/client/src/containers/Accounting/MakeJournalEntriesPage.js @@ -32,7 +32,8 @@ function MakeJournalEntriesPage({ // #withDashboardActions setSidebarShrink, - resetSidebarPreviousExpand + resetSidebarPreviousExpand, + setDashboardBackLink }) { const history = useHistory(); const { id } = useParams(); @@ -40,10 +41,14 @@ function MakeJournalEntriesPage({ useEffect(() => { // Shrink the sidebar by foce. setSidebarShrink(); + // Show the back link on dashboard topbar. + setDashboardBackLink('/manual-journals'); return () => { // Reset the sidebar to the previous status. resetSidebarPreviousExpand(); + // Hide the back link on dashboard topbar. + setDashboardBackLink(false); }; }, [resetSidebarPreviousExpand, setSidebarShrink]); diff --git a/client/src/containers/Dashboard/withDashboard.js b/client/src/containers/Dashboard/withDashboard.js index bd88b9f31..5400d48f1 100644 --- a/client/src/containers/Dashboard/withDashboard.js +++ b/client/src/containers/Dashboard/withDashboard.js @@ -10,6 +10,7 @@ export default (mapState) => { editViewId: state.dashboard.topbarEditViewId, sidebarExpended: state.dashboard.sidebarExpended, preferencesPageTitle: state.dashboard.preferencesPageTitle, + dashboardBackLink: state.dashboard.backLink, }; return mapState ? mapState(mapped, state, props) : mapped; }; diff --git a/client/src/containers/Dashboard/withDashboardActions.js b/client/src/containers/Dashboard/withDashboardActions.js index b8b2a156a..d55dee24a 100644 --- a/client/src/containers/Dashboard/withDashboardActions.js +++ b/client/src/containers/Dashboard/withDashboardActions.js @@ -57,6 +57,11 @@ const mapActionsToProps = (dispatch) => ({ recordSidebarPreviousExpand: () => dispatch({ type: t.RECORD_SIDEBAR_PREVIOUS_EXPAND, }), + + setDashboardBackLink: (backLink) => dispatch({ + type: t.SET_DASHBOARD_BACK_LINK, + payload: { backLink } + }) }); export default connect(null, mapActionsToProps); diff --git a/client/src/containers/Expenses/Expenses.js b/client/src/containers/Expenses/Expenses.js index 6cda447f8..a08f94c78 100644 --- a/client/src/containers/Expenses/Expenses.js +++ b/client/src/containers/Expenses/Expenses.js @@ -30,6 +30,7 @@ function Expenses({ // #withDashboardActions setSidebarShrink, resetSidebarPreviousExpand, + setDashboardBackLink, }) { const history = useHistory(); const { id } = useParams(); @@ -37,12 +38,16 @@ function Expenses({ useEffect(() => { // Shrink the sidebar by foce. setSidebarShrink(); + // Show the back link on dashboard topbar. + setDashboardBackLink(true); return () => { // Reset the sidebar to the previous status. resetSidebarPreviousExpand(); + // Hide the back link on dashboard topbar. + setDashboardBackLink(false); }; - }, [resetSidebarPreviousExpand, setSidebarShrink]); + }, [resetSidebarPreviousExpand, setSidebarShrink, setDashboardBackLink]); const fetchAccounts = useQuery('accounts-list', (key) => requestFetchAccounts(), diff --git a/client/src/containers/Purchases/Bill/Bills.js b/client/src/containers/Purchases/Bill/Bills.js index 8d91e6da9..e6279e279 100644 --- a/client/src/containers/Purchases/Bill/Bills.js +++ b/client/src/containers/Purchases/Bill/Bills.js @@ -33,6 +33,7 @@ function Bills({ // #withDashboardActions setSidebarShrink, resetSidebarPreviousExpand, + setDashboardBackLink }) { const history = useHistory(); const { id } = useParams(); @@ -40,12 +41,16 @@ function Bills({ useEffect(() => { // Shrink the sidebar by foce. setSidebarShrink(); + // Show the back link on dashboard topbar. + setDashboardBackLink(true); return () => { // Reset the sidebar to the previous status. resetSidebarPreviousExpand(); + // Hide the back link on dashboard topbar. + setDashboardBackLink(false); }; - }, [resetSidebarPreviousExpand, setSidebarShrink]); + }, [resetSidebarPreviousExpand, setSidebarShrink, setDashboardBackLink]); // Handle fetch accounts const fetchAccounts = useQuery('accounts-list', (key) => diff --git a/client/src/containers/Purchases/PaymentMades/PaymentMade.js b/client/src/containers/Purchases/PaymentMades/PaymentMade.js index 91fe1fcc3..49e34c61b 100644 --- a/client/src/containers/Purchases/PaymentMades/PaymentMade.js +++ b/client/src/containers/Purchases/PaymentMades/PaymentMade.js @@ -36,6 +36,7 @@ function PaymentMade({ changePageTitle, setSidebarShrink, resetSidebarPreviousExpand, + setDashboardBackLink }) { const { id: paymentMadeId } = useParams(); const { formatMessage } = useIntl(); @@ -43,12 +44,16 @@ function PaymentMade({ useEffect(() => { // Shrink the sidebar by foce. setSidebarShrink(); + // Show the back link on dashboard topbar. + setDashboardBackLink(true); return () => { // Reset the sidebar to the previous status. resetSidebarPreviousExpand(); + // Hide the back link on dashboard topbar. + setDashboardBackLink(false); }; - }, [resetSidebarPreviousExpand, setSidebarShrink]); + }, [resetSidebarPreviousExpand, setSidebarShrink, setDashboardBackLink]); // Handle page title change in new and edit mode. useEffect(() => { diff --git a/client/src/containers/Sales/Estimate/Estimates.js b/client/src/containers/Sales/Estimate/Estimates.js index 6a7816873..60dda9d08 100644 --- a/client/src/containers/Sales/Estimate/Estimates.js +++ b/client/src/containers/Sales/Estimate/Estimates.js @@ -28,7 +28,8 @@ function Estimates({ // #withDashboardActions setSidebarShrink, - resetSidebarPreviousExpand + resetSidebarPreviousExpand, + setDashboardBackLink, }) { const history = useHistory(); const { id } = useParams(); @@ -36,12 +37,16 @@ function Estimates({ useEffect(() => { // Shrink the sidebar by foce. setSidebarShrink(); + // Show the back link on dashboard topbar. + setDashboardBackLink(true); return () => { // Reset the sidebar to the previous status. resetSidebarPreviousExpand(); + // Hide the back link on dashboard topbar. + setDashboardBackLink(false); }; - }, [resetSidebarPreviousExpand, setSidebarShrink]); + }, [resetSidebarPreviousExpand, setSidebarShrink, setDashboardBackLink]); const fetchEstimate = useQuery( ['estimate', id], diff --git a/client/src/containers/Sales/Invoice/Invoices.js b/client/src/containers/Sales/Invoice/Invoices.js index 0b46cef1c..892c208f4 100644 --- a/client/src/containers/Sales/Invoice/Invoices.js +++ b/client/src/containers/Sales/Invoice/Invoices.js @@ -29,6 +29,7 @@ function Invoices({ // #withDashboardActions setSidebarShrink, resetSidebarPreviousExpand, + setDashboardBackLink, }) { const history = useHistory(); const { id } = useParams(); @@ -36,18 +37,22 @@ function Invoices({ useEffect(() => { // Shrink the sidebar by foce. setSidebarShrink(); + // Show the back link on dashboard topbar. + setDashboardBackLink(true); return () => { // Reset the sidebar to the previous status. resetSidebarPreviousExpand(); + // Hide the back link on dashboard topbar. + setDashboardBackLink(false); }; - }, [resetSidebarPreviousExpand, setSidebarShrink]); + }, [resetSidebarPreviousExpand, setSidebarShrink, setDashboardBackLink]); const fetchInvoice = useQuery( ['invoice', id], (key, _id) => requsetFetchInvoice(_id), { enabled: !!id }, -); + ); const fetchSettings = useQuery(['settings'], () => requestFetchOptions({})); diff --git a/client/src/containers/Sales/PaymentReceive/PaymentReceiveFormPage.js b/client/src/containers/Sales/PaymentReceive/PaymentReceiveFormPage.js index 7232e7a1c..f8d1a23e2 100644 --- a/client/src/containers/Sales/PaymentReceive/PaymentReceiveFormPage.js +++ b/client/src/containers/Sales/PaymentReceive/PaymentReceiveFormPage.js @@ -6,7 +6,7 @@ import { useQuery } from 'react-query'; import DashboardInsider from 'components/Dashboard/DashboardInsider'; import PaymentReceiveForm from './PaymentReceiveForm'; -import withDashboardActions from "containers/Dashboard/withDashboardActions"; +import withDashboardActions from 'containers/Dashboard/withDashboardActions'; import withAccountsActions from 'containers/Accounts/withAccountsActions'; import withSettingsActions from 'containers/Settings/withSettingsActions'; import withPaymentReceivesActions from './withPaymentReceivesActions'; @@ -18,7 +18,6 @@ import { compose } from 'utils'; * Payment receive form page. */ function PaymentReceiveFormPage({ - // #withDashboardAction changePageTitle, @@ -37,25 +36,30 @@ function PaymentReceiveFormPage({ // #withDashboardActions setSidebarShrink, resetSidebarPreviousExpand, + setDashboardBackLink, }) { const { id: paymentReceiveId } = useParams(); useEffect(() => { // Shrink the sidebar by foce. setSidebarShrink(); + // Show the back link on dashboard topbar. + setDashboardBackLink(true); return () => { // Reset the sidebar to the previous status. resetSidebarPreviousExpand(); + // Hide the back link on dashboard topbar. + setDashboardBackLink(false); }; - }, [resetSidebarPreviousExpand, setSidebarShrink]); + }, [resetSidebarPreviousExpand, setSidebarShrink, setDashboardBackLink]); // Fetches payment recevie details. const fetchPaymentReceive = useQuery( ['payment-receive', paymentReceiveId], (key, _id) => requestFetchPaymentReceive(_id), { enabled: paymentReceiveId }, - ) + ); // Handle fetch accounts data. const fetchAccounts = useQuery('accounts-list', (key) => @@ -66,8 +70,8 @@ function PaymentReceiveFormPage({ const fetchSettings = useQuery(['settings'], () => requestFetchOptions({})); // Fetches customers list. - const fetchCustomers = useQuery( - ['customers-list'], () => requestFetchCustomers(), + const fetchCustomers = useQuery(['customers-list'], () => + requestFetchCustomers(), ); return ( @@ -75,16 +79,14 @@ function PaymentReceiveFormPage({ loading={ fetchPaymentReceive.isFetching || fetchAccounts.isFetching || - // fetchSettings.isFetching || + // fetchSettings.isFetching || fetchCustomers.isFetching } name={'payment-receive-form'} > - + - ) + ); } export default compose( @@ -93,4 +95,4 @@ export default compose( withSettingsActions, withPaymentReceivesActions, withCustomersActions, -)(PaymentReceiveFormPage); \ No newline at end of file +)(PaymentReceiveFormPage); diff --git a/client/src/containers/Sales/Receipt/Receipts.js b/client/src/containers/Sales/Receipt/Receipts.js index 9b9b3e85e..6e2603249 100644 --- a/client/src/containers/Sales/Receipt/Receipts.js +++ b/client/src/containers/Sales/Receipt/Receipts.js @@ -33,6 +33,7 @@ function Receipts({ // #withDashboardActions setSidebarShrink, resetSidebarPreviousExpand, + setDashboardBackLink, }) { const history = useHistory(); const { id } = useParams(); @@ -40,12 +41,16 @@ function Receipts({ useEffect(() => { // Shrink the sidebar by foce. setSidebarShrink(); + // Show the back link on dashboard topbar. + setDashboardBackLink(true); return () => { // Reset the sidebar to the previous status. resetSidebarPreviousExpand(); + // Hide the back link on dashboard topbar. + setDashboardBackLink(false); }; - }, [resetSidebarPreviousExpand, setSidebarShrink]); + }, [resetSidebarPreviousExpand, setSidebarShrink, setDashboardBackLink]); const fetchReceipt = useQuery( ['receipt', id], @@ -101,5 +106,5 @@ export default compose( withItemsActions, withAccountsActions, withSettingsActions, - withDashboardActions + withDashboardActions, )(Receipts); diff --git a/client/src/routes/dashboard.js b/client/src/routes/dashboard.js index 89893843f..d52caa21a 100644 --- a/client/src/routes/dashboard.js +++ b/client/src/routes/dashboard.js @@ -174,7 +174,7 @@ export default [ breadcrumb: 'Edit', }, { - path: `/expenses-list`, + path: `/expenses`, component: LazyLoader({ loader: () => import('containers/Expenses/ExpensesList'), }), diff --git a/client/src/static/json/icons.js b/client/src/static/json/icons.js index 5ecb9dad1..e2e64654e 100644 --- a/client/src/static/json/icons.js +++ b/client/src/static/json/icons.js @@ -349,5 +349,11 @@ export default { 'M19 14V6c0-1.1-.9-2-2-2H3c-1.1 0-2 .9-2 2v8c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zm-9-1c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zm13-6v11c0 1.1-.9 2-2 2H4v-2h17V7h2z', ], viewBox: '0 0 24 24', + }, + "arrow-left": { + path: [ + 'M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z', + ], + viewBox: '0 0 24 24', } }; diff --git a/client/src/store/dashboard/dashboard.reducer.js b/client/src/store/dashboard/dashboard.reducer.js index 94f2bf660..1336f48f7 100644 --- a/client/src/store/dashboard/dashboard.reducer.js +++ b/client/src/store/dashboard/dashboard.reducer.js @@ -13,6 +13,7 @@ const initialState = { dialogs: {}, topbarEditViewId: null, requestsLoading: 0, + backLink: false, }; const reducerInstance = createReducer(initialState, { @@ -82,6 +83,11 @@ const reducerInstance = createReducer(initialState, { [t.RESET_SIDEBAR_PREVIOUS_EXPAND]: (state) => { state.sidebarExpended = state.previousSidebarExpended; }, + + [t.SET_DASHBOARD_BACK_LINK]: (state, action) => { + const { backLink } = action.payload; + state.backLink = backLink; + } }); export default persistReducer({ diff --git a/client/src/store/dashboard/dashboard.types.js b/client/src/store/dashboard/dashboard.types.js index b89c33ac9..d57336ce9 100644 --- a/client/src/store/dashboard/dashboard.types.js +++ b/client/src/store/dashboard/dashboard.types.js @@ -17,4 +17,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 diff --git a/client/src/style/pages/dashboard.scss b/client/src/style/pages/dashboard.scss index ac9d903d8..d45db8e6b 100644 --- a/client/src/style/pages/dashboard.scss +++ b/client/src/style/pages/dashboard.scss @@ -111,6 +111,15 @@ } } + &__back-link{ + margin-left: 24px; + display: flex; + + a{ + margin: auto 0; + } + } + &__actions-bar{ border-bottom: 2px solid #EAEAEA;