fix: custom views tabs.

This commit is contained in:
a.bouhuolia
2021-08-04 16:55:50 +02:00
parent 4eb20162bb
commit 400281fdfd
18 changed files with 184 additions and 164 deletions

View File

@@ -12,8 +12,8 @@ import { saveInvoke } from 'utils';
* *
*/ */
export default function DashboardViewsTabs({ export default function DashboardViewsTabs({
initialViewId = 0, initialViewSlug = 0,
currentViewId, currentViewSlug,
tabs, tabs,
defaultTabText = <T id={'all'} />, defaultTabText = <T id={'all'} />,
allTab = true, allTab = true,
@@ -25,22 +25,22 @@ export default function DashboardViewsTabs({
throttleTime = 250, throttleTime = 250,
}) { }) {
const history = useHistory(); const history = useHistory();
const [currentView, setCurrentView] = useState(initialViewId || 0); const [currentView, setCurrentView] = useState(initialViewSlug || 0);
useEffect(() => { useEffect(() => {
if (typeof currentViewId !== 'undefined' && currentViewId !== currentView) { if (typeof currentViewSlug !== 'undefined' && currentViewSlug !== currentView) {
setCurrentView(currentViewId || 0); setCurrentView(currentViewSlug || 0);
} }
}, [currentView, setCurrentView, currentViewId]); }, [currentView, setCurrentView, currentViewSlug]);
const throttledOnChange = useRef( const throttledOnChange = useRef(
debounce((viewId) => saveInvoke(OnThrottledChange, viewId), throttleTime), debounce((viewId) => saveInvoke(OnThrottledChange, viewId), throttleTime),
); );
// Trigger `onChange` and `onThrottledChange` events. // Trigger `onChange` and `onThrottledChange` events.
const triggerOnChange = (viewId) => { const triggerOnChange = (viewSlug) => {
saveInvoke(onChange, viewId); saveInvoke(onChange, viewSlug);
throttledOnChange.current(viewId); throttledOnChange.current(viewSlug);
}; };
// Handles click a new view. // Handles click a new view.
@@ -50,9 +50,9 @@ export default function DashboardViewsTabs({
}; };
// Handle tabs change. // Handle tabs change.
const handleTabsChange = (viewId) => { const handleTabsChange = (viewSlug) => {
setCurrentView(viewId); setCurrentView(viewSlug);
triggerOnChange(viewId) triggerOnChange(viewSlug)
}; };
return ( return (
@@ -66,7 +66,7 @@ export default function DashboardViewsTabs({
{allTab && <Tab id={0} title={defaultTabText} />} {allTab && <Tab id={0} title={defaultTabText} />}
{tabs.map((tab) => ( {tabs.map((tab) => (
<Tab id={tab.id} title={tab.name} /> <Tab id={tab.slug} title={tab.name} />
))} ))}
<If condition={newViewTab}> <If condition={newViewTab}>
<Tooltip <Tooltip

View File

@@ -1,16 +1,14 @@
import React, { useMemo, useCallback } from 'react'; import React, { useCallback } from 'react';
import { Alignment, Navbar, NavbarGroup } from '@blueprintjs/core'; import { Alignment, Navbar, NavbarGroup } from '@blueprintjs/core';
import { pick } from 'lodash';
import intl from 'react-intl-universal'; import intl from 'react-intl-universal';
import { DashboardViewsTabs } from 'components'; import { DashboardViewsTabs } from 'components';
import { useAccountsChartContext } from 'containers/Accounts/AccountsChartProvider'; import { useAccountsChartContext } from 'containers/Accounts/AccountsChartProvider';
import withAccountsTableActions from './withAccountsTableActions'; import withAccountsTableActions from './withAccountsTableActions';
import withAccounts from './withAccounts'; import withAccounts from './withAccounts';
import { compose } from 'utils'; import { compose, transfromViewsToTabs } from 'utils';
/** /**
* Accounts views tabs. * Accounts views tabs.
@@ -20,35 +18,30 @@ function AccountsViewsTabs({
setAccountsTableState, setAccountsTableState,
// #withAccounts // #withAccounts
accountsCustomViewId accountsCurrentView
}) { }) {
// Accounts chart context. // Accounts chart context.
const { resourceViews } = useAccountsChartContext(); const { resourceViews } = useAccountsChartContext();
// Handles the tab change. // Handles the tab change.
const handleTabChange = useCallback( const handleTabChange = useCallback(
(viewId) => { (viewSlug) => {
setAccountsTableState({ setAccountsTableState({
customViewId: viewId || null, viewSlug: viewSlug || null,
}); });
}, },
[setAccountsTableState], [setAccountsTableState],
); );
const tabs = useMemo( // Transfromes the accounts views to tabs.
() => const tabs = transfromViewsToTabs(resourceViews);
resourceViews.map((view) => ({
...pick(view, ['name', 'id']),
})),
[resourceViews],
);
return ( return (
<Navbar className="navbar--dashboard-views"> <Navbar className="navbar--dashboard-views">
<NavbarGroup align={Alignment.LEFT}> <NavbarGroup align={Alignment.LEFT}>
<DashboardViewsTabs <DashboardViewsTabs
defaultTabText={intl.get('all_accounts_')} defaultTabText={intl.get('all_accounts_')}
currentViewId={accountsCustomViewId} currentViewSlug={accountsCurrentView}
resourceName={'accounts'} resourceName={'accounts'}
onChange={handleTabChange} onChange={handleTabChange}
tabs={tabs} tabs={tabs}
@@ -61,6 +54,6 @@ function AccountsViewsTabs({
export default compose( export default compose(
withAccountsTableActions, withAccountsTableActions,
withAccounts(({ accountsTableState }) => ({ withAccounts(({ accountsTableState }) => ({
accountsCustomViewId: accountsTableState.customViewId accountsCurrentView: accountsTableState.viewSlug
})) }))
)(AccountsViewsTabs); )(AccountsViewsTabs);

View File

@@ -1,6 +1,5 @@
import React, { useMemo } from 'react'; import React from 'react';
import { Alignment, Navbar, NavbarGroup } from '@blueprintjs/core'; import { Alignment, Navbar, NavbarGroup } from '@blueprintjs/core';
import { pick } from 'lodash';
import { DashboardViewsTabs } from 'components'; import { DashboardViewsTabs } from 'components';
@@ -9,7 +8,7 @@ import withCustomersActions from './withCustomersActions';
import withDashboardActions from 'containers/Dashboard/withDashboardActions'; import withDashboardActions from 'containers/Dashboard/withDashboardActions';
import { useCustomersListContext } from './CustomersListProvider'; import { useCustomersListContext } from './CustomersListProvider';
import { compose } from 'utils'; import { compose, transfromViewsToTabs } from 'utils';
/** /**
* Customers views tabs. * Customers views tabs.
@@ -19,29 +18,24 @@ function CustomersViewsTabs({
setCustomersTableState, setCustomersTableState,
// #withCustomers // #withCustomers
customersTableState, customersCurrentView,
}) { }) {
// Customers list context. // Customers list context.
const { customersViews } = useCustomersListContext(); const { customersViews } = useCustomersListContext();
const tabs = useMemo( // Transformes the views to tabs.
() => const tabs = transfromViewsToTabs(customersViews);
customersViews.map((view) => pick(view, ['name', 'id']), [
customersViews,
]),
[customersViews],
);
// Handle tabs change. // Handle tabs change.
const handleTabsChange = (viewId) => { const handleTabsChange = (viewSlug) => {
setCustomersTableState({ customViewId: viewId || null }); setCustomersTableState({ viewSlug: viewSlug || null });
}; };
return ( return (
<Navbar className="navbar--dashboard-views"> <Navbar className="navbar--dashboard-views">
<NavbarGroup align={Alignment.LEFT}> <NavbarGroup align={Alignment.LEFT}>
<DashboardViewsTabs <DashboardViewsTabs
currentViewId={customersTableState.customViewId} currentViewSlug={customersCurrentView}
resourceName={'customers'} resourceName={'customers'}
tabs={tabs} tabs={tabs}
onChange={handleTabsChange} onChange={handleTabsChange}
@@ -54,5 +48,7 @@ function CustomersViewsTabs({
export default compose( export default compose(
withDashboardActions, withDashboardActions,
withCustomersActions, withCustomersActions,
withCustomers(({ customersTableState }) => ({ customersTableState })), withCustomers(({ customersTableState }) => ({
customersCurrentView: customersTableState.viewSlug,
})),
)(CustomersViewsTabs); )(CustomersViewsTabs);

View File

@@ -1,6 +1,5 @@
import React from 'react'; import React from 'react';
import { Alignment, Navbar, NavbarGroup } from '@blueprintjs/core'; import { Alignment, Navbar, NavbarGroup } from '@blueprintjs/core';
import { pick } from 'lodash';
import { DashboardViewsTabs } from 'components'; import { DashboardViewsTabs } from 'components';
@@ -8,7 +7,7 @@ import { useExpensesListContext } from './ExpensesListProvider';
import withExpenses from './withExpenses'; import withExpenses from './withExpenses';
import withExpensesActions from './withExpensesActions'; import withExpensesActions from './withExpensesActions';
import { compose } from 'utils'; import { compose, transfromViewsToTabs } from 'utils';
/** /**
* Expesne views tabs. * Expesne views tabs.
@@ -18,21 +17,19 @@ function ExpenseViewTabs({
setExpensesTableState, setExpensesTableState,
// #withExpenses // #withExpenses
expensesTableState expensesCurrentView,
}) { }) {
// Expenses list context. // Expenses list context.
const { expensesViews } = useExpensesListContext(); const { expensesViews } = useExpensesListContext();
// Handle the tabs change. // Handle the tabs change.
const handleTabChange = (viewId) => { const handleTabChange = (viewSlug) => {
setExpensesTableState({ setExpensesTableState({
customViewId: viewId || null, viewSlug: viewSlug || null,
}); });
}; };
const tabs = expensesViews.map((view) => ({ const tabs = transfromViewsToTabs(expensesViews);
...pick(view, ['name', 'id']),
}));
// Handle click a new view tab. // Handle click a new view tab.
const handleClickNewView = () => {}; const handleClickNewView = () => {};
@@ -41,7 +38,7 @@ function ExpenseViewTabs({
<Navbar className={'navbar--dashboard-views'}> <Navbar className={'navbar--dashboard-views'}>
<NavbarGroup align={Alignment.LEFT}> <NavbarGroup align={Alignment.LEFT}>
<DashboardViewsTabs <DashboardViewsTabs
customViewId={expensesTableState.customViewId} currentViewSlug={expensesCurrentView}
resourceName={'expenses'} resourceName={'expenses'}
tabs={tabs} tabs={tabs}
onNewViewTabClick={handleClickNewView} onNewViewTabClick={handleClickNewView}
@@ -52,8 +49,9 @@ function ExpenseViewTabs({
); );
} }
export default compose( export default compose(
withExpensesActions, withExpensesActions,
withExpenses(({ expensesTableState }) => ({ expensesTableState })) withExpenses(({ expensesTableState }) => ({
expensesCurrentView: expensesTableState.viewSlug,
})),
)(ExpenseViewTabs); )(ExpenseViewTabs);

View File

@@ -1,14 +1,13 @@
import React from 'react'; import React from 'react';
import { Alignment, Navbar, NavbarGroup } from '@blueprintjs/core'; import { Alignment, Navbar, NavbarGroup } from '@blueprintjs/core';
import { compose } from 'utils';
import { DashboardViewsTabs } from 'components'; import { DashboardViewsTabs } from 'components';
import { pick } from 'lodash';
import { withRouter } from 'react-router-dom'; import { withRouter } from 'react-router-dom';
import withItemsActions from 'containers/Items/withItemsActions'; import withItemsActions from 'containers/Items/withItemsActions';
import withItems from 'containers/Items/withItems'; import withItems from 'containers/Items/withItems';
import { useItemsListContext } from './ItemsListProvider'; import { useItemsListContext } from './ItemsListProvider';
import { compose, transfromViewsToTabs } from 'utils';
/** /**
* Items views tabs. * Items views tabs.
@@ -18,28 +17,23 @@ function ItemsViewsTabs({
setItemsTableState, setItemsTableState,
// #withItems // #withItems
itemsCustomViewId itemsCurrentView,
}) { }) {
const { itemsViews } = useItemsListContext(); const { itemsViews } = useItemsListContext();
// Mapped items views. // Mapped items views.
const tabs = itemsViews.map((view) => ({ const tabs = transfromViewsToTabs(itemsViews)
...pick(view, ['name', 'id']),
}));
// Handles the active tab change. // Handles the active tab change.
const handleTabChange = (viewId) => { const handleTabChange = (viewSlug) => {
setItemsTableState({ setItemsTableState({ viewSlug });
pageIndex: 0,
customViewId: viewId || null,
});
}; };
return ( return (
<Navbar className="navbar--dashboard-views"> <Navbar className="navbar--dashboard-views">
<NavbarGroup align={Alignment.LEFT}> <NavbarGroup align={Alignment.LEFT}>
<DashboardViewsTabs <DashboardViewsTabs
currentViewId={itemsCustomViewId} currentViewSlug={itemsCurrentView}
resourceName={'items'} resourceName={'items'}
tabs={tabs} tabs={tabs}
onChange={handleTabChange} onChange={handleTabChange}
@@ -52,7 +46,7 @@ function ItemsViewsTabs({
export default compose( export default compose(
withRouter, withRouter,
withItems(({ itemsTableState }) => ({ withItems(({ itemsTableState }) => ({
itemsCustomViewId: itemsTableState?.customViewId itemsCurrentView: itemsTableState?.viewSlug
})), })),
withItemsActions, withItemsActions,
)(ItemsViewsTabs); )(ItemsViewsTabs);

View File

@@ -1,7 +1,6 @@
import React from 'react'; import React from 'react';
import { Alignment, Navbar, NavbarGroup } from '@blueprintjs/core'; import { Alignment, Navbar, NavbarGroup } from '@blueprintjs/core';
import { pick } from 'lodash';
import { DashboardViewsTabs } from 'components'; import { DashboardViewsTabs } from 'components';
@@ -9,7 +8,7 @@ import { useBillsListContext } from './BillsListProvider';
import withBillActions from './withBillsActions'; import withBillActions from './withBillsActions';
import withBills from './withBills'; import withBills from './withBills';
import { compose } from 'utils'; import { compose, transfromViewsToTabs } from 'utils';
/** /**
* Bills view tabs. * Bills view tabs.
@@ -19,27 +18,25 @@ function BillViewTabs({
setBillsTableState, setBillsTableState,
// #withBills // #withBills
billsTableState billsCurrentView,
}) { }) {
// Bills list context. // Bills list context.
const { billsViews } = useBillsListContext(); const { billsViews } = useBillsListContext();
// Handle tab chaging. // Handle tab chaging.
const handleTabsChange = (customView) => { const handleTabsChange = (viewSlug) => {
setBillsTableState({ setBillsTableState({
customViewId: customView || null, viewSlug: viewSlug || null,
}); });
}; };
const tabs = billsViews.map((view) => ({ const tabs = transfromViewsToTabs(billsViews);
...pick(view, ['name', 'id']),
}));
return ( return (
<Navbar className={'navbar--dashboard-views'}> <Navbar className={'navbar--dashboard-views'}>
<NavbarGroup align={Alignment.LEFT}> <NavbarGroup align={Alignment.LEFT}>
<DashboardViewsTabs <DashboardViewsTabs
currentViewId={billsTableState.customViewId} currentViewSlug={billsCurrentView}
resourceName={'bills'} resourceName={'bills'}
tabs={tabs} tabs={tabs}
onChange={handleTabsChange} onChange={handleTabsChange}
@@ -51,5 +48,7 @@ function BillViewTabs({
export default compose( export default compose(
withBillActions, withBillActions,
withBills(({ billsTableState }) => ({ billsTableState })) withBills(({ billsTableState }) => ({
billsCurrentView: billsTableState.viewSlug,
})),
)(BillViewTabs); )(BillViewTabs);

View File

@@ -1,6 +1,5 @@
import React from 'react'; import React from 'react';
import { Alignment, Navbar, NavbarGroup } from '@blueprintjs/core'; import { Alignment, Navbar, NavbarGroup } from '@blueprintjs/core';
import { pick } from 'lodash';
import { DashboardViewsTabs } from 'components'; import { DashboardViewsTabs } from 'components';
@@ -8,7 +7,7 @@ import withEstimatesActions from './withEstimatesActions';
import withEstimates from './withEstimates'; import withEstimates from './withEstimates';
import { useEstimatesListContext } from './EstimatesListProvider'; import { useEstimatesListContext } from './EstimatesListProvider';
import { compose } from 'utils'; import { compose, transfromViewsToTabs } from 'utils';
/** /**
* Estimates views tabs. * Estimates views tabs.
@@ -18,26 +17,24 @@ function EstimateViewTabs({
setEstimatesTableState, setEstimatesTableState,
// #withEstimates // #withEstimates
estimatesTableState estimatesCurrentView,
}) { }) {
// Estimates list context. // Estimates list context.
const { estimatesViews } = useEstimatesListContext(); const { estimatesViews } = useEstimatesListContext();
// Estimates views. // Estimates views.
const tabs = estimatesViews.map((view) => ({ const tabs = transfromViewsToTabs(estimatesViews);
...pick(view, ['name', 'id']),
}));
// Handle tab change. // Handle tab change.
const handleTabsChange = (customViewId) => { const handleTabsChange = (viewSlug) => {
setEstimatesTableState({ customViewId: customViewId || null }); setEstimatesTableState({ viewSlug: viewSlug || null });
}; };
return ( return (
<Navbar className={'navbar--dashboard-views'}> <Navbar className={'navbar--dashboard-views'}>
<NavbarGroup align={Alignment.LEFT}> <NavbarGroup align={Alignment.LEFT}>
<DashboardViewsTabs <DashboardViewsTabs
currentViewId={estimatesTableState.customViewId} currentViewSlug={estimatesCurrentView}
resourceName={'estimates'} resourceName={'estimates'}
tabs={tabs} tabs={tabs}
onChange={handleTabsChange} onChange={handleTabsChange}
@@ -49,5 +46,7 @@ function EstimateViewTabs({
export default compose( export default compose(
withEstimatesActions, withEstimatesActions,
withEstimates(({ estimatesTableState }) => ({ estimatesTableState })), withEstimates(({ estimatesTableState }) => ({
estimatesCurrentView: estimatesTableState.viewSlug
})),
)(EstimateViewTabs); )(EstimateViewTabs);

View File

@@ -1,14 +1,13 @@
import React from 'react'; import React from 'react';
import { useHistory } from 'react-router'; import { useHistory } from 'react-router';
import { Alignment, Navbar, NavbarGroup } from '@blueprintjs/core'; import { Alignment, Navbar, NavbarGroup } from '@blueprintjs/core';
import { pick } from 'lodash';
import { DashboardViewsTabs } from 'components'; import { DashboardViewsTabs } from 'components';
import withInvoices from './withInvoices'; import withInvoices from './withInvoices';
import withInvoiceActions from './withInvoiceActions'; import withInvoiceActions from './withInvoiceActions';
import { compose } from 'utils'; import { compose, transfromViewsToTabs } from 'utils';
import { useInvoicesListContext } from './InvoicesListProvider'; import { useInvoicesListContext } from './InvoicesListProvider';
/** /**
@@ -19,24 +18,21 @@ function InvoiceViewTabs({
setInvoicesTableState, setInvoicesTableState,
// #withInvoices // #withInvoices
invoicesTableState invoicesCurrentView,
}) { }) {
const history = useHistory(); const history = useHistory();
// Invoices list context. // Invoices list context.
const { invoicesViews } = useInvoicesListContext(); const { invoicesViews } = useInvoicesListContext();
const tabs = invoicesViews.map((view) => ({ const tabs = transfromViewsToTabs(invoicesViews);
...pick(view, ['name', 'id']),
}));
// Handle tab change. // Handle tab change.
const handleTabsChange = (customViewId) => { const handleTabsChange = (viewSlug) => {
setInvoicesTableState({ setInvoicesTableState({
customViewId: customViewId || null, viewSlug: viewSlug || null,
}); });
}; };
// Handle click a new view tab. // Handle click a new view tab.
const handleClickNewView = () => { const handleClickNewView = () => {
history.push('/custom_views/invoices/new'); history.push('/custom_views/invoices/new');
@@ -46,7 +42,7 @@ function InvoiceViewTabs({
<Navbar className={'navbar--dashboard-views'}> <Navbar className={'navbar--dashboard-views'}>
<NavbarGroup align={Alignment.LEFT}> <NavbarGroup align={Alignment.LEFT}>
<DashboardViewsTabs <DashboardViewsTabs
currentViewId={invoicesTableState.customViewId} currentViewSlug={invoicesCurrentView}
resourceName={'invoices'} resourceName={'invoices'}
tabs={tabs} tabs={tabs}
onNewViewTabClick={handleClickNewView} onNewViewTabClick={handleClickNewView}
@@ -59,5 +55,7 @@ function InvoiceViewTabs({
export default compose( export default compose(
withInvoiceActions, withInvoiceActions,
withInvoices(({ invoicesTableState }) => ({ invoicesTableState })), withInvoices(({ invoicesTableState }) => ({
invoicesCurrentView: invoicesTableState.viewSlug,
})),
)(InvoiceViewTabs); )(InvoiceViewTabs);

View File

@@ -1,12 +1,11 @@
import React from 'react'; import React from 'react';
import { Alignment, Navbar, NavbarGroup } from '@blueprintjs/core'; import { Alignment, Navbar, NavbarGroup } from '@blueprintjs/core';
import { pick } from 'lodash';
import { DashboardViewsTabs } from 'components'; import { DashboardViewsTabs } from 'components';
import withReceiptActions from './withReceiptsActions'; import withReceiptActions from './withReceiptsActions';
import withReceipts from './withReceipts'; import withReceipts from './withReceipts';
import { compose } from 'utils'; import { compose, transfromViewsToTabs } from 'utils';
import { useReceiptsListContext } from './ReceiptsListProvider'; import { useReceiptsListContext } from './ReceiptsListProvider';
/** /**
@@ -17,19 +16,17 @@ function ReceiptViewTabs({
setReceiptsTableState, setReceiptsTableState,
// #withReceipts // #withReceipts
receiptTableState, receiptsCurrentView,
}) { }) {
// Receipts list context. // Receipts list context.
const { receiptsViews } = useReceiptsListContext(); const { receiptsViews } = useReceiptsListContext();
const tabs = receiptsViews.map((view) => ({ const tabs = transfromViewsToTabs(receiptsViews);
...pick(view, ['name', 'id']),
}));
// Handles the active tab chaning. // Handles the active tab chaning.
const handleTabsChange = (customViewId) => { const handleTabsChange = (viewSlug) => {
setReceiptsTableState({ setReceiptsTableState({
customViewId: customViewId || null, viewSlug: viewSlug || null,
}); });
}; };
@@ -37,7 +34,7 @@ function ReceiptViewTabs({
<Navbar className={'navbar--dashboard-views'}> <Navbar className={'navbar--dashboard-views'}>
<NavbarGroup align={Alignment.LEFT}> <NavbarGroup align={Alignment.LEFT}>
<DashboardViewsTabs <DashboardViewsTabs
currentViewId={receiptTableState.customViewId} currentViewSlug={receiptsCurrentView}
tabs={tabs} tabs={tabs}
resourceName={'receipts'} resourceName={'receipts'}
onChange={handleTabsChange} onChange={handleTabsChange}
@@ -49,5 +46,7 @@ function ReceiptViewTabs({
export default compose( export default compose(
withReceiptActions, withReceiptActions,
withReceipts(({ receiptTableState }) => ({ receiptTableState })), withReceipts(({ receiptTableState }) => ({
receiptsCurrentView: receiptTableState.viewSlug,
})),
)(ReceiptViewTabs); )(ReceiptViewTabs);

View File

@@ -1,4 +1,4 @@
import React, { useMemo } from 'react'; import React from 'react';
import { Alignment, Navbar, NavbarGroup } from '@blueprintjs/core'; import { Alignment, Navbar, NavbarGroup } from '@blueprintjs/core';
import { compose } from 'redux'; import { compose } from 'redux';
@@ -7,7 +7,8 @@ import { DashboardViewsTabs } from 'components';
import withVendorsActions from './withVendorsActions'; import withVendorsActions from './withVendorsActions';
import withVendors from './withVendors'; import withVendors from './withVendors';
import { pick } from 'lodash';
import { transfromViewsToTabs } from 'utils';
/** /**
* Vendors views tabs. * Vendors views tabs.
@@ -17,22 +18,15 @@ function VendorViewsTabs({
setVendorsTableState, setVendorsTableState,
// #withVendors // #withVendors
vendorsTableState vendorsCurrentView,
}) { }) {
const { vendorsViews } = useVendorsListContext(); const { vendorsViews } = useVendorsListContext();
const tabs = useMemo(() => const tabs = transfromViewsToTabs(vendorsViews);
vendorsViews.map(
(view) => ({
...pick(view, ['name', 'id']),
}),
),
[vendorsViews],
);
const handleTabsChange = (viewId) => { const handleTabsChange = (viewSlug) => {
setVendorsTableState({ setVendorsTableState({
customViewId: viewId || null, viewSlug: viewSlug || null,
}); });
}; };
@@ -40,7 +34,7 @@ function VendorViewsTabs({
<Navbar className="navbar--dashboard-views"> <Navbar className="navbar--dashboard-views">
<NavbarGroup align={Alignment.LEFT}> <NavbarGroup align={Alignment.LEFT}>
<DashboardViewsTabs <DashboardViewsTabs
currentViewId={vendorsTableState.customViewId} currentViewSlug={vendorsCurrentView}
resourceName={'vendors'} resourceName={'vendors'}
tabs={tabs} tabs={tabs}
onChange={handleTabsChange} onChange={handleTabsChange}
@@ -52,5 +46,7 @@ function VendorViewsTabs({
export default compose( export default compose(
withVendorsActions, withVendorsActions,
withVendors(({ vendorsTableState }) => ({ vendorsTableState })) withVendors(({ vendorsTableState }) => ({
vendorsCurrentView: vendorsTableState.viewSlug,
})),
)(VendorViewsTabs); )(VendorViewsTabs);

View File

@@ -1,5 +1,5 @@
@import '../../Base.scss'; @import '../../Base.scss';
$dashboard-views-bar-height: 45px; $dashboard-views-bar-height: 44px;
.dashboard { .dashboard {
display: flex; display: flex;
@@ -457,24 +457,24 @@ $dashboard-views-bar-height: 45px;
.tabs--dashboard-views { .tabs--dashboard-views {
.#{$ns}-tab { .#{$ns}-tab {
color: #474d5e; color: #646a7d;
font-size: 14px; font-size: 14px;
line-height: $dashboard-views-bar-height; line-height: $dashboard-views-bar-height;
font-weight: 400; font-weight: 400;
padding: 0; padding: 0;
margin-right: 0; margin-right: 0;
padding-left: 14px; padding-left: 16px;
padding-right: 14px; padding-right: 16px;
&[aria-selected='true'] { &[aria-selected='true'] {
color: #0052cc; color: #0052cc;
font-weight: 500; font-weight: 600;
} }
} }
.#{$ns}-tab-indicator-wrapper { .#{$ns}-tab-indicator-wrapper {
.#{$ns}-tab-indicator { .#{$ns}-tab-indicator {
height: 3px; height: 2px;
} }
} }
.button--new-view { .button--new-view {

View File

@@ -516,12 +516,12 @@ export function getPagesCountFromPaginationMeta(pagination) {
* Transformes the table state to url query. * Transformes the table state to url query.
*/ */
export function transformTableStateToQuery(tableState) { export function transformTableStateToQuery(tableState) {
const { pageSize, pageIndex, customViewId, sortBy } = tableState; const { pageSize, pageIndex, viewSlug, sortBy } = tableState;
const query = { const query = {
pageSize, pageSize,
page: pageIndex + 1, page: pageIndex + 1,
...(customViewId ? { customViewId } : {}), ...(viewSlug ? { viewSlug } : {}),
...(Array.isArray(sortBy) && sortBy.length > 0 ...(Array.isArray(sortBy) && sortBy.length > 0
? { ? {
column_sort_by: sortBy[0].id, column_sort_by: sortBy[0].id,
@@ -681,3 +681,7 @@ export const ensureEntriesHasEmptyLine = R.curry(
return entries; return entries;
}, },
); );
export const transfromViewsToTabs = (views) => {
return views.map(view => ({ ..._.pick(view, ['slug', 'name']) }))
}

View File

@@ -1,21 +1,26 @@
import { Model, mixin } from "objection"; import { Model, mixin } from 'objection';
import TenantModel from "models/TenantModel"; import TenantModel from 'models/TenantModel';
import ModelSetting from "./ModelSetting"; import ModelSetting from './ModelSetting';
import BillPaymentSettings from "./BillPayment.Settings"; import BillPaymentSettings from './BillPayment.Settings';
import CustomViewBaseModel from './CustomViewBaseModel';
import { DEFAULT_VIEWS } from 'services/Sales/PaymentReceives/constants';
export default class BillPayment extends mixin(TenantModel, [ModelSetting]) { export default class BillPayment extends mixin(TenantModel, [
ModelSetting,
CustomViewBaseModel,
]) {
/** /**
* Table name * Table name
*/ */
static get tableName() { static get tableName() {
return "bills_payments"; return 'bills_payments';
} }
/** /**
* Timestamps columns. * Timestamps columns.
*/ */
get timestamps() { get timestamps() {
return ["createdAt", "updatedAt"]; return ['createdAt', 'updatedAt'];
} }
/** /**
@@ -29,18 +34,18 @@ export default class BillPayment extends mixin(TenantModel, [ModelSetting]) {
* Relationship mapping. * Relationship mapping.
*/ */
static get relationMappings() { static get relationMappings() {
const BillPaymentEntry = require("models/BillPaymentEntry"); const BillPaymentEntry = require('models/BillPaymentEntry');
const AccountTransaction = require("models/AccountTransaction"); const AccountTransaction = require('models/AccountTransaction');
const Vendor = require("models/Vendor"); const Vendor = require('models/Vendor');
const Account = require("models/Account"); const Account = require('models/Account');
return { return {
entries: { entries: {
relation: Model.HasManyRelation, relation: Model.HasManyRelation,
modelClass: BillPaymentEntry.default, modelClass: BillPaymentEntry.default,
join: { join: {
from: "bills_payments.id", from: 'bills_payments.id',
to: "bills_payments_entries.billPaymentId", to: 'bills_payments_entries.billPaymentId',
}, },
}, },
@@ -48,11 +53,11 @@ export default class BillPayment extends mixin(TenantModel, [ModelSetting]) {
relation: Model.BelongsToOneRelation, relation: Model.BelongsToOneRelation,
modelClass: Vendor.default, modelClass: Vendor.default,
join: { join: {
from: "bills_payments.vendorId", from: 'bills_payments.vendorId',
to: "contacts.id", to: 'contacts.id',
}, },
filter(query) { filter(query) {
query.where("contact_service", "vendor"); query.where('contact_service', 'vendor');
}, },
}, },
@@ -60,8 +65,8 @@ export default class BillPayment extends mixin(TenantModel, [ModelSetting]) {
relation: Model.BelongsToOneRelation, relation: Model.BelongsToOneRelation,
modelClass: Account.default, modelClass: Account.default,
join: { join: {
from: "bills_payments.paymentAccountId", from: 'bills_payments.paymentAccountId',
to: "accounts.id", to: 'accounts.id',
}, },
}, },
@@ -69,13 +74,20 @@ export default class BillPayment extends mixin(TenantModel, [ModelSetting]) {
relation: Model.HasManyRelation, relation: Model.HasManyRelation,
modelClass: AccountTransaction.default, modelClass: AccountTransaction.default,
join: { join: {
from: "bills_payments.id", from: 'bills_payments.id',
to: "accounts_transactions.referenceId", to: 'accounts_transactions.referenceId',
}, },
filter(builder) { filter(builder) {
builder.where("reference_type", "BillPayment"); builder.where('reference_type', 'BillPayment');
}, },
}, },
}; };
} }
/**
* Retrieve the default custom views, roles and columns.
*/
static get defaultViews() {
return DEFAULT_VIEWS;
}
} }

View File

@@ -3,8 +3,12 @@ import TenantModel from 'models/TenantModel';
import { formatNumber } from 'utils'; import { formatNumber } from 'utils';
import ModelSetting from './ModelSetting'; import ModelSetting from './ModelSetting';
import ManualJournalSettings from './ManualJournal.Settings'; import ManualJournalSettings from './ManualJournal.Settings';
import CustomViewBaseModel from './CustomViewBaseModel';
export default class ManualJournal extends mixin(TenantModel, [ModelSetting]) { import { DEFAULT_VIEWS } from 'services/ManualJournals/constants';
export default class ManualJournal extends mixin(TenantModel, [
ModelSetting,
CustomViewBaseModel,
]) {
/** /**
* Table name. * Table name.
*/ */
@@ -104,4 +108,11 @@ export default class ManualJournal extends mixin(TenantModel, [ModelSetting]) {
static get meta() { static get meta() {
return ManualJournalSettings; return ManualJournalSettings;
} }
/**
* Retrieve the default custom views, roles and columns.
*/
static get defaultViews() {
return DEFAULT_VIEWS;
}
} }

View File

@@ -2,8 +2,13 @@ import { Model, mixin } from 'objection';
import TenantModel from 'models/TenantModel'; import TenantModel from 'models/TenantModel';
import ModelSetting from './ModelSetting'; import ModelSetting from './ModelSetting';
import PaymentReceiveSettings from './PaymentReceive.Settings'; import PaymentReceiveSettings from './PaymentReceive.Settings';
import CustomViewBaseModel from './CustomViewBaseModel';
import { DEFAULT_VIEWS } from 'services/Sales/PaymentReceives/constants';
export default class PaymentReceive extends mixin(TenantModel, [ModelSetting]) { export default class PaymentReceive extends mixin(TenantModel, [
ModelSetting,
CustomViewBaseModel,
]) {
/** /**
* Table name. * Table name.
*/ */
@@ -44,7 +49,7 @@ export default class PaymentReceive extends mixin(TenantModel, [ModelSetting]) {
}, },
filter(query) { filter(query) {
query.where('contact_service', 'customer'); query.where('contact_service', 'customer');
} },
}, },
depositAccount: { depositAccount: {
relation: Model.BelongsToOneRelation, relation: Model.BelongsToOneRelation,
@@ -67,12 +72,12 @@ export default class PaymentReceive extends mixin(TenantModel, [ModelSetting]) {
modelClass: AccountTransaction.default, modelClass: AccountTransaction.default,
join: { join: {
from: 'payment_receives.id', from: 'payment_receives.id',
to: 'accounts_transactions.referenceId' to: 'accounts_transactions.referenceId',
}, },
filter(builder) { filter(builder) {
builder.where('reference_type', 'PaymentReceive'); builder.where('reference_type', 'PaymentReceive');
}, },
} },
}; };
} }
@@ -82,4 +87,11 @@ export default class PaymentReceive extends mixin(TenantModel, [ModelSetting]) {
static get meta() { static get meta() {
return PaymentReceiveSettings; return PaymentReceiveSettings;
} }
/**
* Retrieve the default custom views, roles and columns.
*/
static get defaultViews() {
return DEFAULT_VIEWS;
}
} }

View File

@@ -23,3 +23,6 @@ export const CONTACTS_CONFIG = [
assignRequired: true, assignRequired: true,
}, },
]; ];
export const DEFAULT_VIEWS = [];

View File

@@ -12,3 +12,6 @@ export const ERRORS = {
BILLS_NOT_OPENED_YET: 'BILLS_NOT_OPENED_YET', BILLS_NOT_OPENED_YET: 'BILLS_NOT_OPENED_YET',
VENDOR_HAS_PAYMENTS: 'VENDOR_HAS_PAYMENTS' VENDOR_HAS_PAYMENTS: 'VENDOR_HAS_PAYMENTS'
}; };
export const DEFAULT_VIEWS = [];

View File

@@ -12,3 +12,6 @@ export const ERRORS = {
PAYMENT_CUSTOMER_SHOULD_NOT_UPDATE: 'PAYMENT_CUSTOMER_SHOULD_NOT_UPDATE', PAYMENT_CUSTOMER_SHOULD_NOT_UPDATE: 'PAYMENT_CUSTOMER_SHOULD_NOT_UPDATE',
CUSTOMER_HAS_PAYMENT_RECEIVES: 'CUSTOMER_HAS_PAYMENT_RECEIVES' CUSTOMER_HAS_PAYMENT_RECEIVES: 'CUSTOMER_HAS_PAYMENT_RECEIVES'
}; };
export const DEFAULT_VIEWS = [];