mirror of
https://github.com/bigcapitalhq/bigcapital.git
synced 2026-02-15 12:20:31 +00:00
fix: custom views tabs.
This commit is contained in:
@@ -12,8 +12,8 @@ import { saveInvoke } from 'utils';
|
||||
*
|
||||
*/
|
||||
export default function DashboardViewsTabs({
|
||||
initialViewId = 0,
|
||||
currentViewId,
|
||||
initialViewSlug = 0,
|
||||
currentViewSlug,
|
||||
tabs,
|
||||
defaultTabText = <T id={'all'} />,
|
||||
allTab = true,
|
||||
@@ -25,22 +25,22 @@ export default function DashboardViewsTabs({
|
||||
throttleTime = 250,
|
||||
}) {
|
||||
const history = useHistory();
|
||||
const [currentView, setCurrentView] = useState(initialViewId || 0);
|
||||
const [currentView, setCurrentView] = useState(initialViewSlug || 0);
|
||||
|
||||
useEffect(() => {
|
||||
if (typeof currentViewId !== 'undefined' && currentViewId !== currentView) {
|
||||
setCurrentView(currentViewId || 0);
|
||||
if (typeof currentViewSlug !== 'undefined' && currentViewSlug !== currentView) {
|
||||
setCurrentView(currentViewSlug || 0);
|
||||
}
|
||||
}, [currentView, setCurrentView, currentViewId]);
|
||||
}, [currentView, setCurrentView, currentViewSlug]);
|
||||
|
||||
const throttledOnChange = useRef(
|
||||
debounce((viewId) => saveInvoke(OnThrottledChange, viewId), throttleTime),
|
||||
);
|
||||
|
||||
// Trigger `onChange` and `onThrottledChange` events.
|
||||
const triggerOnChange = (viewId) => {
|
||||
saveInvoke(onChange, viewId);
|
||||
throttledOnChange.current(viewId);
|
||||
const triggerOnChange = (viewSlug) => {
|
||||
saveInvoke(onChange, viewSlug);
|
||||
throttledOnChange.current(viewSlug);
|
||||
};
|
||||
|
||||
// Handles click a new view.
|
||||
@@ -50,9 +50,9 @@ export default function DashboardViewsTabs({
|
||||
};
|
||||
|
||||
// Handle tabs change.
|
||||
const handleTabsChange = (viewId) => {
|
||||
setCurrentView(viewId);
|
||||
triggerOnChange(viewId)
|
||||
const handleTabsChange = (viewSlug) => {
|
||||
setCurrentView(viewSlug);
|
||||
triggerOnChange(viewSlug)
|
||||
};
|
||||
|
||||
return (
|
||||
@@ -66,7 +66,7 @@ export default function DashboardViewsTabs({
|
||||
{allTab && <Tab id={0} title={defaultTabText} />}
|
||||
|
||||
{tabs.map((tab) => (
|
||||
<Tab id={tab.id} title={tab.name} />
|
||||
<Tab id={tab.slug} title={tab.name} />
|
||||
))}
|
||||
<If condition={newViewTab}>
|
||||
<Tooltip
|
||||
|
||||
@@ -1,16 +1,14 @@
|
||||
import React, { useMemo, useCallback } from 'react';
|
||||
import React, { useCallback } from 'react';
|
||||
import { Alignment, Navbar, NavbarGroup } from '@blueprintjs/core';
|
||||
import { pick } from 'lodash';
|
||||
import intl from 'react-intl-universal';
|
||||
|
||||
|
||||
import { DashboardViewsTabs } from 'components';
|
||||
import { useAccountsChartContext } from 'containers/Accounts/AccountsChartProvider';
|
||||
|
||||
import withAccountsTableActions from './withAccountsTableActions';
|
||||
import withAccounts from './withAccounts';
|
||||
|
||||
import { compose } from 'utils';
|
||||
import { compose, transfromViewsToTabs } from 'utils';
|
||||
|
||||
/**
|
||||
* Accounts views tabs.
|
||||
@@ -20,35 +18,30 @@ function AccountsViewsTabs({
|
||||
setAccountsTableState,
|
||||
|
||||
// #withAccounts
|
||||
accountsCustomViewId
|
||||
accountsCurrentView
|
||||
}) {
|
||||
// Accounts chart context.
|
||||
const { resourceViews } = useAccountsChartContext();
|
||||
|
||||
// Handles the tab change.
|
||||
const handleTabChange = useCallback(
|
||||
(viewId) => {
|
||||
(viewSlug) => {
|
||||
setAccountsTableState({
|
||||
customViewId: viewId || null,
|
||||
viewSlug: viewSlug || null,
|
||||
});
|
||||
},
|
||||
[setAccountsTableState],
|
||||
);
|
||||
|
||||
const tabs = useMemo(
|
||||
() =>
|
||||
resourceViews.map((view) => ({
|
||||
...pick(view, ['name', 'id']),
|
||||
})),
|
||||
[resourceViews],
|
||||
);
|
||||
// Transfromes the accounts views to tabs.
|
||||
const tabs = transfromViewsToTabs(resourceViews);
|
||||
|
||||
return (
|
||||
<Navbar className="navbar--dashboard-views">
|
||||
<NavbarGroup align={Alignment.LEFT}>
|
||||
<DashboardViewsTabs
|
||||
defaultTabText={intl.get('all_accounts_')}
|
||||
currentViewId={accountsCustomViewId}
|
||||
currentViewSlug={accountsCurrentView}
|
||||
resourceName={'accounts'}
|
||||
onChange={handleTabChange}
|
||||
tabs={tabs}
|
||||
@@ -61,6 +54,6 @@ function AccountsViewsTabs({
|
||||
export default compose(
|
||||
withAccountsTableActions,
|
||||
withAccounts(({ accountsTableState }) => ({
|
||||
accountsCustomViewId: accountsTableState.customViewId
|
||||
accountsCurrentView: accountsTableState.viewSlug
|
||||
}))
|
||||
)(AccountsViewsTabs);
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
import React, { useMemo } from 'react';
|
||||
import React from 'react';
|
||||
import { Alignment, Navbar, NavbarGroup } from '@blueprintjs/core';
|
||||
import { pick } from 'lodash';
|
||||
|
||||
import { DashboardViewsTabs } from 'components';
|
||||
|
||||
@@ -9,7 +8,7 @@ import withCustomersActions from './withCustomersActions';
|
||||
import withDashboardActions from 'containers/Dashboard/withDashboardActions';
|
||||
|
||||
import { useCustomersListContext } from './CustomersListProvider';
|
||||
import { compose } from 'utils';
|
||||
import { compose, transfromViewsToTabs } from 'utils';
|
||||
|
||||
/**
|
||||
* Customers views tabs.
|
||||
@@ -19,29 +18,24 @@ function CustomersViewsTabs({
|
||||
setCustomersTableState,
|
||||
|
||||
// #withCustomers
|
||||
customersTableState,
|
||||
customersCurrentView,
|
||||
}) {
|
||||
// Customers list context.
|
||||
const { customersViews } = useCustomersListContext();
|
||||
|
||||
const tabs = useMemo(
|
||||
() =>
|
||||
customersViews.map((view) => pick(view, ['name', 'id']), [
|
||||
customersViews,
|
||||
]),
|
||||
[customersViews],
|
||||
);
|
||||
// Transformes the views to tabs.
|
||||
const tabs = transfromViewsToTabs(customersViews);
|
||||
|
||||
// Handle tabs change.
|
||||
const handleTabsChange = (viewId) => {
|
||||
setCustomersTableState({ customViewId: viewId || null });
|
||||
const handleTabsChange = (viewSlug) => {
|
||||
setCustomersTableState({ viewSlug: viewSlug || null });
|
||||
};
|
||||
|
||||
return (
|
||||
<Navbar className="navbar--dashboard-views">
|
||||
<NavbarGroup align={Alignment.LEFT}>
|
||||
<DashboardViewsTabs
|
||||
currentViewId={customersTableState.customViewId}
|
||||
currentViewSlug={customersCurrentView}
|
||||
resourceName={'customers'}
|
||||
tabs={tabs}
|
||||
onChange={handleTabsChange}
|
||||
@@ -54,5 +48,7 @@ function CustomersViewsTabs({
|
||||
export default compose(
|
||||
withDashboardActions,
|
||||
withCustomersActions,
|
||||
withCustomers(({ customersTableState }) => ({ customersTableState })),
|
||||
withCustomers(({ customersTableState }) => ({
|
||||
customersCurrentView: customersTableState.viewSlug,
|
||||
})),
|
||||
)(CustomersViewsTabs);
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
import React from 'react';
|
||||
import { Alignment, Navbar, NavbarGroup } from '@blueprintjs/core';
|
||||
import { pick } from 'lodash';
|
||||
|
||||
import { DashboardViewsTabs } from 'components';
|
||||
|
||||
@@ -8,7 +7,7 @@ import { useExpensesListContext } from './ExpensesListProvider';
|
||||
import withExpenses from './withExpenses';
|
||||
import withExpensesActions from './withExpensesActions';
|
||||
|
||||
import { compose } from 'utils';
|
||||
import { compose, transfromViewsToTabs } from 'utils';
|
||||
|
||||
/**
|
||||
* Expesne views tabs.
|
||||
@@ -16,23 +15,21 @@ import { compose } from 'utils';
|
||||
function ExpenseViewTabs({
|
||||
// #withExpensesActions
|
||||
setExpensesTableState,
|
||||
|
||||
|
||||
// #withExpenses
|
||||
expensesTableState
|
||||
expensesCurrentView,
|
||||
}) {
|
||||
// Expenses list context.
|
||||
const { expensesViews } = useExpensesListContext();
|
||||
|
||||
// Handle the tabs change.
|
||||
const handleTabChange = (viewId) => {
|
||||
const handleTabChange = (viewSlug) => {
|
||||
setExpensesTableState({
|
||||
customViewId: viewId || null,
|
||||
viewSlug: viewSlug || null,
|
||||
});
|
||||
};
|
||||
|
||||
const tabs = expensesViews.map((view) => ({
|
||||
...pick(view, ['name', 'id']),
|
||||
}));
|
||||
const tabs = transfromViewsToTabs(expensesViews);
|
||||
|
||||
// Handle click a new view tab.
|
||||
const handleClickNewView = () => {};
|
||||
@@ -41,7 +38,7 @@ function ExpenseViewTabs({
|
||||
<Navbar className={'navbar--dashboard-views'}>
|
||||
<NavbarGroup align={Alignment.LEFT}>
|
||||
<DashboardViewsTabs
|
||||
customViewId={expensesTableState.customViewId}
|
||||
currentViewSlug={expensesCurrentView}
|
||||
resourceName={'expenses'}
|
||||
tabs={tabs}
|
||||
onNewViewTabClick={handleClickNewView}
|
||||
@@ -52,8 +49,9 @@ function ExpenseViewTabs({
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
export default compose(
|
||||
withExpensesActions,
|
||||
withExpenses(({ expensesTableState }) => ({ expensesTableState }))
|
||||
withExpenses(({ expensesTableState }) => ({
|
||||
expensesCurrentView: expensesTableState.viewSlug,
|
||||
})),
|
||||
)(ExpenseViewTabs);
|
||||
|
||||
@@ -1,14 +1,13 @@
|
||||
import React from 'react';
|
||||
import { Alignment, Navbar, NavbarGroup } from '@blueprintjs/core';
|
||||
import { compose } from 'utils';
|
||||
import { DashboardViewsTabs } from 'components';
|
||||
import { pick } from 'lodash';
|
||||
import { withRouter } from 'react-router-dom';
|
||||
|
||||
import withItemsActions from 'containers/Items/withItemsActions';
|
||||
import withItems from 'containers/Items/withItems';
|
||||
|
||||
import { useItemsListContext } from './ItemsListProvider';
|
||||
import { compose, transfromViewsToTabs } from 'utils';
|
||||
|
||||
/**
|
||||
* Items views tabs.
|
||||
@@ -18,28 +17,23 @@ function ItemsViewsTabs({
|
||||
setItemsTableState,
|
||||
|
||||
// #withItems
|
||||
itemsCustomViewId
|
||||
itemsCurrentView,
|
||||
}) {
|
||||
const { itemsViews } = useItemsListContext();
|
||||
|
||||
// Mapped items views.
|
||||
const tabs = itemsViews.map((view) => ({
|
||||
...pick(view, ['name', 'id']),
|
||||
}));
|
||||
const tabs = transfromViewsToTabs(itemsViews)
|
||||
|
||||
// Handles the active tab change.
|
||||
const handleTabChange = (viewId) => {
|
||||
setItemsTableState({
|
||||
pageIndex: 0,
|
||||
customViewId: viewId || null,
|
||||
});
|
||||
const handleTabChange = (viewSlug) => {
|
||||
setItemsTableState({ viewSlug });
|
||||
};
|
||||
|
||||
return (
|
||||
<Navbar className="navbar--dashboard-views">
|
||||
<NavbarGroup align={Alignment.LEFT}>
|
||||
<DashboardViewsTabs
|
||||
currentViewId={itemsCustomViewId}
|
||||
currentViewSlug={itemsCurrentView}
|
||||
resourceName={'items'}
|
||||
tabs={tabs}
|
||||
onChange={handleTabChange}
|
||||
@@ -52,7 +46,7 @@ function ItemsViewsTabs({
|
||||
export default compose(
|
||||
withRouter,
|
||||
withItems(({ itemsTableState }) => ({
|
||||
itemsCustomViewId: itemsTableState?.customViewId
|
||||
itemsCurrentView: itemsTableState?.viewSlug
|
||||
})),
|
||||
withItemsActions,
|
||||
)(ItemsViewsTabs);
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
import React from 'react';
|
||||
|
||||
import { Alignment, Navbar, NavbarGroup } from '@blueprintjs/core';
|
||||
import { pick } from 'lodash';
|
||||
|
||||
import { DashboardViewsTabs } from 'components';
|
||||
|
||||
@@ -9,7 +8,7 @@ import { useBillsListContext } from './BillsListProvider';
|
||||
import withBillActions from './withBillsActions';
|
||||
import withBills from './withBills';
|
||||
|
||||
import { compose } from 'utils';
|
||||
import { compose, transfromViewsToTabs } from 'utils';
|
||||
|
||||
/**
|
||||
* Bills view tabs.
|
||||
@@ -19,27 +18,25 @@ function BillViewTabs({
|
||||
setBillsTableState,
|
||||
|
||||
// #withBills
|
||||
billsTableState
|
||||
billsCurrentView,
|
||||
}) {
|
||||
// Bills list context.
|
||||
const { billsViews } = useBillsListContext();
|
||||
|
||||
// Handle tab chaging.
|
||||
const handleTabsChange = (customView) => {
|
||||
const handleTabsChange = (viewSlug) => {
|
||||
setBillsTableState({
|
||||
customViewId: customView || null,
|
||||
viewSlug: viewSlug || null,
|
||||
});
|
||||
};
|
||||
|
||||
const tabs = billsViews.map((view) => ({
|
||||
...pick(view, ['name', 'id']),
|
||||
}));
|
||||
const tabs = transfromViewsToTabs(billsViews);
|
||||
|
||||
return (
|
||||
<Navbar className={'navbar--dashboard-views'}>
|
||||
<NavbarGroup align={Alignment.LEFT}>
|
||||
<DashboardViewsTabs
|
||||
currentViewId={billsTableState.customViewId}
|
||||
currentViewSlug={billsCurrentView}
|
||||
resourceName={'bills'}
|
||||
tabs={tabs}
|
||||
onChange={handleTabsChange}
|
||||
@@ -51,5 +48,7 @@ function BillViewTabs({
|
||||
|
||||
export default compose(
|
||||
withBillActions,
|
||||
withBills(({ billsTableState }) => ({ billsTableState }))
|
||||
withBills(({ billsTableState }) => ({
|
||||
billsCurrentView: billsTableState.viewSlug,
|
||||
})),
|
||||
)(BillViewTabs);
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
import React from 'react';
|
||||
import { Alignment, Navbar, NavbarGroup } from '@blueprintjs/core';
|
||||
import { pick } from 'lodash';
|
||||
|
||||
import { DashboardViewsTabs } from 'components';
|
||||
|
||||
@@ -8,7 +7,7 @@ import withEstimatesActions from './withEstimatesActions';
|
||||
import withEstimates from './withEstimates';
|
||||
|
||||
import { useEstimatesListContext } from './EstimatesListProvider';
|
||||
import { compose } from 'utils';
|
||||
import { compose, transfromViewsToTabs } from 'utils';
|
||||
|
||||
/**
|
||||
* Estimates views tabs.
|
||||
@@ -18,26 +17,24 @@ function EstimateViewTabs({
|
||||
setEstimatesTableState,
|
||||
|
||||
// #withEstimates
|
||||
estimatesTableState
|
||||
estimatesCurrentView,
|
||||
}) {
|
||||
// Estimates list context.
|
||||
const { estimatesViews } = useEstimatesListContext();
|
||||
|
||||
// Estimates views.
|
||||
const tabs = estimatesViews.map((view) => ({
|
||||
...pick(view, ['name', 'id']),
|
||||
}));
|
||||
const tabs = transfromViewsToTabs(estimatesViews);
|
||||
|
||||
// Handle tab change.
|
||||
const handleTabsChange = (customViewId) => {
|
||||
setEstimatesTableState({ customViewId: customViewId || null });
|
||||
const handleTabsChange = (viewSlug) => {
|
||||
setEstimatesTableState({ viewSlug: viewSlug || null });
|
||||
};
|
||||
|
||||
return (
|
||||
<Navbar className={'navbar--dashboard-views'}>
|
||||
<NavbarGroup align={Alignment.LEFT}>
|
||||
<DashboardViewsTabs
|
||||
currentViewId={estimatesTableState.customViewId}
|
||||
currentViewSlug={estimatesCurrentView}
|
||||
resourceName={'estimates'}
|
||||
tabs={tabs}
|
||||
onChange={handleTabsChange}
|
||||
@@ -49,5 +46,7 @@ function EstimateViewTabs({
|
||||
|
||||
export default compose(
|
||||
withEstimatesActions,
|
||||
withEstimates(({ estimatesTableState }) => ({ estimatesTableState })),
|
||||
withEstimates(({ estimatesTableState }) => ({
|
||||
estimatesCurrentView: estimatesTableState.viewSlug
|
||||
})),
|
||||
)(EstimateViewTabs);
|
||||
|
||||
@@ -1,14 +1,13 @@
|
||||
import React from 'react';
|
||||
import { useHistory } from 'react-router';
|
||||
import { Alignment, Navbar, NavbarGroup } from '@blueprintjs/core';
|
||||
import { pick } from 'lodash';
|
||||
|
||||
import { DashboardViewsTabs } from 'components';
|
||||
|
||||
import withInvoices from './withInvoices';
|
||||
import withInvoiceActions from './withInvoiceActions';
|
||||
|
||||
import { compose } from 'utils';
|
||||
import { compose, transfromViewsToTabs } from 'utils';
|
||||
import { useInvoicesListContext } from './InvoicesListProvider';
|
||||
|
||||
/**
|
||||
@@ -19,24 +18,21 @@ function InvoiceViewTabs({
|
||||
setInvoicesTableState,
|
||||
|
||||
// #withInvoices
|
||||
invoicesTableState
|
||||
invoicesCurrentView,
|
||||
}) {
|
||||
const history = useHistory();
|
||||
|
||||
// Invoices list context.
|
||||
const { invoicesViews } = useInvoicesListContext();
|
||||
|
||||
const tabs = invoicesViews.map((view) => ({
|
||||
...pick(view, ['name', 'id']),
|
||||
}));
|
||||
const tabs = transfromViewsToTabs(invoicesViews);
|
||||
|
||||
// Handle tab change.
|
||||
const handleTabsChange = (customViewId) => {
|
||||
const handleTabsChange = (viewSlug) => {
|
||||
setInvoicesTableState({
|
||||
customViewId: customViewId || null,
|
||||
viewSlug: viewSlug || null,
|
||||
});
|
||||
};
|
||||
|
||||
// Handle click a new view tab.
|
||||
const handleClickNewView = () => {
|
||||
history.push('/custom_views/invoices/new');
|
||||
@@ -46,7 +42,7 @@ function InvoiceViewTabs({
|
||||
<Navbar className={'navbar--dashboard-views'}>
|
||||
<NavbarGroup align={Alignment.LEFT}>
|
||||
<DashboardViewsTabs
|
||||
currentViewId={invoicesTableState.customViewId}
|
||||
currentViewSlug={invoicesCurrentView}
|
||||
resourceName={'invoices'}
|
||||
tabs={tabs}
|
||||
onNewViewTabClick={handleClickNewView}
|
||||
@@ -59,5 +55,7 @@ function InvoiceViewTabs({
|
||||
|
||||
export default compose(
|
||||
withInvoiceActions,
|
||||
withInvoices(({ invoicesTableState }) => ({ invoicesTableState })),
|
||||
withInvoices(({ invoicesTableState }) => ({
|
||||
invoicesCurrentView: invoicesTableState.viewSlug,
|
||||
})),
|
||||
)(InvoiceViewTabs);
|
||||
|
||||
@@ -1,12 +1,11 @@
|
||||
import React from 'react';
|
||||
import { Alignment, Navbar, NavbarGroup } from '@blueprintjs/core';
|
||||
import { pick } from 'lodash';
|
||||
|
||||
import { DashboardViewsTabs } from 'components';
|
||||
import withReceiptActions from './withReceiptsActions';
|
||||
import withReceipts from './withReceipts';
|
||||
|
||||
import { compose } from 'utils';
|
||||
import { compose, transfromViewsToTabs } from 'utils';
|
||||
import { useReceiptsListContext } from './ReceiptsListProvider';
|
||||
|
||||
/**
|
||||
@@ -17,19 +16,17 @@ function ReceiptViewTabs({
|
||||
setReceiptsTableState,
|
||||
|
||||
// #withReceipts
|
||||
receiptTableState,
|
||||
receiptsCurrentView,
|
||||
}) {
|
||||
// Receipts list context.
|
||||
const { receiptsViews } = useReceiptsListContext();
|
||||
|
||||
const tabs = receiptsViews.map((view) => ({
|
||||
...pick(view, ['name', 'id']),
|
||||
}));
|
||||
const tabs = transfromViewsToTabs(receiptsViews);
|
||||
|
||||
// Handles the active tab chaning.
|
||||
const handleTabsChange = (customViewId) => {
|
||||
const handleTabsChange = (viewSlug) => {
|
||||
setReceiptsTableState({
|
||||
customViewId: customViewId || null,
|
||||
viewSlug: viewSlug || null,
|
||||
});
|
||||
};
|
||||
|
||||
@@ -37,7 +34,7 @@ function ReceiptViewTabs({
|
||||
<Navbar className={'navbar--dashboard-views'}>
|
||||
<NavbarGroup align={Alignment.LEFT}>
|
||||
<DashboardViewsTabs
|
||||
currentViewId={receiptTableState.customViewId}
|
||||
currentViewSlug={receiptsCurrentView}
|
||||
tabs={tabs}
|
||||
resourceName={'receipts'}
|
||||
onChange={handleTabsChange}
|
||||
@@ -49,5 +46,7 @@ function ReceiptViewTabs({
|
||||
|
||||
export default compose(
|
||||
withReceiptActions,
|
||||
withReceipts(({ receiptTableState }) => ({ receiptTableState })),
|
||||
withReceipts(({ receiptTableState }) => ({
|
||||
receiptsCurrentView: receiptTableState.viewSlug,
|
||||
})),
|
||||
)(ReceiptViewTabs);
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import React, { useMemo } from 'react';
|
||||
import React from 'react';
|
||||
import { Alignment, Navbar, NavbarGroup } from '@blueprintjs/core';
|
||||
import { compose } from 'redux';
|
||||
|
||||
@@ -7,7 +7,8 @@ import { DashboardViewsTabs } from 'components';
|
||||
|
||||
import withVendorsActions from './withVendorsActions';
|
||||
import withVendors from './withVendors';
|
||||
import { pick } from 'lodash';
|
||||
|
||||
import { transfromViewsToTabs } from 'utils';
|
||||
|
||||
/**
|
||||
* Vendors views tabs.
|
||||
@@ -17,30 +18,23 @@ function VendorViewsTabs({
|
||||
setVendorsTableState,
|
||||
|
||||
// #withVendors
|
||||
vendorsTableState
|
||||
vendorsCurrentView,
|
||||
}) {
|
||||
const { vendorsViews } = useVendorsListContext();
|
||||
|
||||
const tabs = useMemo(() =>
|
||||
vendorsViews.map(
|
||||
(view) => ({
|
||||
...pick(view, ['name', 'id']),
|
||||
}),
|
||||
),
|
||||
[vendorsViews],
|
||||
);
|
||||
|
||||
const handleTabsChange = (viewId) => {
|
||||
const tabs = transfromViewsToTabs(vendorsViews);
|
||||
|
||||
const handleTabsChange = (viewSlug) => {
|
||||
setVendorsTableState({
|
||||
customViewId: viewId || null,
|
||||
viewSlug: viewSlug || null,
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
return (
|
||||
<Navbar className="navbar--dashboard-views">
|
||||
<NavbarGroup align={Alignment.LEFT}>
|
||||
<DashboardViewsTabs
|
||||
currentViewId={vendorsTableState.customViewId}
|
||||
currentViewSlug={vendorsCurrentView}
|
||||
resourceName={'vendors'}
|
||||
tabs={tabs}
|
||||
onChange={handleTabsChange}
|
||||
@@ -52,5 +46,7 @@ function VendorViewsTabs({
|
||||
|
||||
export default compose(
|
||||
withVendorsActions,
|
||||
withVendors(({ vendorsTableState }) => ({ vendorsTableState }))
|
||||
withVendors(({ vendorsTableState }) => ({
|
||||
vendorsCurrentView: vendorsTableState.viewSlug,
|
||||
})),
|
||||
)(VendorViewsTabs);
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
@import '../../Base.scss';
|
||||
$dashboard-views-bar-height: 45px;
|
||||
$dashboard-views-bar-height: 44px;
|
||||
|
||||
.dashboard {
|
||||
display: flex;
|
||||
@@ -457,24 +457,24 @@ $dashboard-views-bar-height: 45px;
|
||||
.tabs--dashboard-views {
|
||||
|
||||
.#{$ns}-tab {
|
||||
color: #474d5e;
|
||||
color: #646a7d;
|
||||
font-size: 14px;
|
||||
line-height: $dashboard-views-bar-height;
|
||||
font-weight: 400;
|
||||
padding: 0;
|
||||
margin-right: 0;
|
||||
padding-left: 14px;
|
||||
padding-right: 14px;
|
||||
padding-left: 16px;
|
||||
padding-right: 16px;
|
||||
|
||||
&[aria-selected='true'] {
|
||||
color: #0052cc;
|
||||
font-weight: 500;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.#{$ns}-tab-indicator-wrapper {
|
||||
.#{$ns}-tab-indicator {
|
||||
height: 3px;
|
||||
height: 2px;
|
||||
}
|
||||
}
|
||||
.button--new-view {
|
||||
|
||||
@@ -516,12 +516,12 @@ export function getPagesCountFromPaginationMeta(pagination) {
|
||||
* Transformes the table state to url query.
|
||||
*/
|
||||
export function transformTableStateToQuery(tableState) {
|
||||
const { pageSize, pageIndex, customViewId, sortBy } = tableState;
|
||||
const { pageSize, pageIndex, viewSlug, sortBy } = tableState;
|
||||
|
||||
const query = {
|
||||
pageSize,
|
||||
page: pageIndex + 1,
|
||||
...(customViewId ? { customViewId } : {}),
|
||||
...(viewSlug ? { viewSlug } : {}),
|
||||
...(Array.isArray(sortBy) && sortBy.length > 0
|
||||
? {
|
||||
column_sort_by: sortBy[0].id,
|
||||
@@ -680,4 +680,8 @@ export const ensureEntriesHasEmptyLine = R.curry(
|
||||
}
|
||||
return entries;
|
||||
},
|
||||
);
|
||||
);
|
||||
|
||||
export const transfromViewsToTabs = (views) => {
|
||||
return views.map(view => ({ ..._.pick(view, ['slug', 'name']) }))
|
||||
}
|
||||
@@ -1,21 +1,26 @@
|
||||
import { Model, mixin } from "objection";
|
||||
import TenantModel from "models/TenantModel";
|
||||
import ModelSetting from "./ModelSetting";
|
||||
import BillPaymentSettings from "./BillPayment.Settings";
|
||||
import { Model, mixin } from 'objection';
|
||||
import TenantModel from 'models/TenantModel';
|
||||
import ModelSetting from './ModelSetting';
|
||||
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
|
||||
*/
|
||||
static get tableName() {
|
||||
return "bills_payments";
|
||||
return 'bills_payments';
|
||||
}
|
||||
|
||||
/**
|
||||
* Timestamps columns.
|
||||
*/
|
||||
get timestamps() {
|
||||
return ["createdAt", "updatedAt"];
|
||||
return ['createdAt', 'updatedAt'];
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -29,18 +34,18 @@ export default class BillPayment extends mixin(TenantModel, [ModelSetting]) {
|
||||
* Relationship mapping.
|
||||
*/
|
||||
static get relationMappings() {
|
||||
const BillPaymentEntry = require("models/BillPaymentEntry");
|
||||
const AccountTransaction = require("models/AccountTransaction");
|
||||
const Vendor = require("models/Vendor");
|
||||
const Account = require("models/Account");
|
||||
const BillPaymentEntry = require('models/BillPaymentEntry');
|
||||
const AccountTransaction = require('models/AccountTransaction');
|
||||
const Vendor = require('models/Vendor');
|
||||
const Account = require('models/Account');
|
||||
|
||||
return {
|
||||
entries: {
|
||||
relation: Model.HasManyRelation,
|
||||
modelClass: BillPaymentEntry.default,
|
||||
join: {
|
||||
from: "bills_payments.id",
|
||||
to: "bills_payments_entries.billPaymentId",
|
||||
from: 'bills_payments.id',
|
||||
to: 'bills_payments_entries.billPaymentId',
|
||||
},
|
||||
},
|
||||
|
||||
@@ -48,11 +53,11 @@ export default class BillPayment extends mixin(TenantModel, [ModelSetting]) {
|
||||
relation: Model.BelongsToOneRelation,
|
||||
modelClass: Vendor.default,
|
||||
join: {
|
||||
from: "bills_payments.vendorId",
|
||||
to: "contacts.id",
|
||||
from: 'bills_payments.vendorId',
|
||||
to: 'contacts.id',
|
||||
},
|
||||
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,
|
||||
modelClass: Account.default,
|
||||
join: {
|
||||
from: "bills_payments.paymentAccountId",
|
||||
to: "accounts.id",
|
||||
from: 'bills_payments.paymentAccountId',
|
||||
to: 'accounts.id',
|
||||
},
|
||||
},
|
||||
|
||||
@@ -69,13 +74,20 @@ export default class BillPayment extends mixin(TenantModel, [ModelSetting]) {
|
||||
relation: Model.HasManyRelation,
|
||||
modelClass: AccountTransaction.default,
|
||||
join: {
|
||||
from: "bills_payments.id",
|
||||
to: "accounts_transactions.referenceId",
|
||||
from: 'bills_payments.id',
|
||||
to: 'accounts_transactions.referenceId',
|
||||
},
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -3,8 +3,12 @@ import TenantModel from 'models/TenantModel';
|
||||
import { formatNumber } from 'utils';
|
||||
import ModelSetting from './ModelSetting';
|
||||
import ManualJournalSettings from './ManualJournal.Settings';
|
||||
|
||||
export default class ManualJournal extends mixin(TenantModel, [ModelSetting]) {
|
||||
import CustomViewBaseModel from './CustomViewBaseModel';
|
||||
import { DEFAULT_VIEWS } from 'services/ManualJournals/constants';
|
||||
export default class ManualJournal extends mixin(TenantModel, [
|
||||
ModelSetting,
|
||||
CustomViewBaseModel,
|
||||
]) {
|
||||
/**
|
||||
* Table name.
|
||||
*/
|
||||
@@ -104,4 +108,11 @@ export default class ManualJournal extends mixin(TenantModel, [ModelSetting]) {
|
||||
static get meta() {
|
||||
return ManualJournalSettings;
|
||||
}
|
||||
|
||||
/**
|
||||
* Retrieve the default custom views, roles and columns.
|
||||
*/
|
||||
static get defaultViews() {
|
||||
return DEFAULT_VIEWS;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2,8 +2,13 @@ import { Model, mixin } from 'objection';
|
||||
import TenantModel from 'models/TenantModel';
|
||||
import ModelSetting from './ModelSetting';
|
||||
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.
|
||||
*/
|
||||
@@ -44,7 +49,7 @@ export default class PaymentReceive extends mixin(TenantModel, [ModelSetting]) {
|
||||
},
|
||||
filter(query) {
|
||||
query.where('contact_service', 'customer');
|
||||
}
|
||||
},
|
||||
},
|
||||
depositAccount: {
|
||||
relation: Model.BelongsToOneRelation,
|
||||
@@ -67,19 +72,26 @@ export default class PaymentReceive extends mixin(TenantModel, [ModelSetting]) {
|
||||
modelClass: AccountTransaction.default,
|
||||
join: {
|
||||
from: 'payment_receives.id',
|
||||
to: 'accounts_transactions.referenceId'
|
||||
to: 'accounts_transactions.referenceId',
|
||||
},
|
||||
filter(builder) {
|
||||
builder.where('reference_type', 'PaymentReceive');
|
||||
},
|
||||
}
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
*
|
||||
*/
|
||||
static get meta() {
|
||||
return PaymentReceiveSettings;
|
||||
}
|
||||
|
||||
/**
|
||||
* Retrieve the default custom views, roles and columns.
|
||||
*/
|
||||
static get defaultViews() {
|
||||
return DEFAULT_VIEWS;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -23,3 +23,6 @@ export const CONTACTS_CONFIG = [
|
||||
assignRequired: true,
|
||||
},
|
||||
];
|
||||
|
||||
|
||||
export const DEFAULT_VIEWS = [];
|
||||
@@ -12,3 +12,6 @@ export const ERRORS = {
|
||||
BILLS_NOT_OPENED_YET: 'BILLS_NOT_OPENED_YET',
|
||||
VENDOR_HAS_PAYMENTS: 'VENDOR_HAS_PAYMENTS'
|
||||
};
|
||||
|
||||
|
||||
export const DEFAULT_VIEWS = [];
|
||||
@@ -12,3 +12,6 @@ export const ERRORS = {
|
||||
PAYMENT_CUSTOMER_SHOULD_NOT_UPDATE: 'PAYMENT_CUSTOMER_SHOULD_NOT_UPDATE',
|
||||
CUSTOMER_HAS_PAYMENT_RECEIVES: 'CUSTOMER_HAS_PAYMENT_RECEIVES'
|
||||
};
|
||||
|
||||
|
||||
export const DEFAULT_VIEWS = [];
|
||||
Reference in New Issue
Block a user