QT/bigcapital
1
0
Fork 0
mirror of https://github.com/bigcapitalhq/bigcapital.git synced 2026-02-16 12:50:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/Fix/View'

Browse Source
This commit is contained in:
a.bouhuolia
2020-12-17 01:21:34 +02:00
parent ebe9ed108f e398b8c239
commit 897908c1ab
20 changed files with 242 additions and 313 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
client/src/components/Dashboard/DashboardActionViewsList.js
View File

@@ -1,4 +1,4 @@
import React, { useMemo } from 'react';
import React, { useMemo, useState } from 'react';
import classNames from 'classnames';
import {
Button,
@@ -15,15 +15,21 @@ import { Icon } from 'components';
export default function DashboardActionViewsList({
resourceName,
views
views,
onChange,
}) {
const history = useHistory();
const handleClickViewItem = (view) => {
history.push(view ? `/${resourceName}/${view.id}/custom_view` : '/accounts');
history.push(
view ? `/${resourceName}/${view.id}/custom_view` : '/accounts',
);
onChange && onChange(view);
};
const viewsMenuItems = views.map((view) => {
return <MenuItem onClick={() => handleClickViewItem(view)} text={view.name} />;
return (
<MenuItem onClick={() => handleClickViewItem(view)} text={view.name} />
);
});
return (

46
client/src/containers/Accounting/ManualJournalActionsBar.js
View File

@@ -21,7 +21,7 @@ import FilterDropdown from 'components/FilterDropdown';
import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
import withDialogActions from 'containers/Dialog/withDialogActions';
import { If } from 'components';
import { If, DashboardActionViewsList } from 'components';
import withResourceDetail from 'containers/Resources/withResourceDetails';
import withManualJournals from 'containers/Accounting/withManualJournals';
@@ -29,9 +29,11 @@ import withManualJournalsActions from 'containers/Accounting/withManualJournalsA
import { compose } from 'utils';
/**
* Manual journal actions bar.
*/
function ManualJournalActionsBar({
// #withResourceDetail
resourceName = 'manual_journals',
resourceFields,
// #withManualJournals
@@ -39,21 +41,15 @@ function ManualJournalActionsBar({
// #withManualJournalsActions
addManualJournalsTableQueries,
changeManualJournalCurrentView,
onFilterChanged,
selectedRows = [],
onBulkDelete,
}) {
const { path } = useRouteMatch();
const [filterCount, setFilterCount] = useState(0);
const history = useHistory();
const viewsMenuItems = manualJournalsViews.map((view) => {
return (
<MenuItem href={`${path}/${view.id}/custom_view`} text={view.name} />
);
});
const onClickNewManualJournal = useCallback(() => {
history.push('/make-journal-entry');
}, [history]);
@@ -73,32 +69,30 @@ function ManualJournalActionsBar({
onFilterChanged && onFilterChanged(filterConditions);
},
});
const hasSelectedRows = useMemo(
() => selectedRows.length > 0,
[selectedRows]);
const hasSelectedRows = useMemo(() => selectedRows.length > 0, [
selectedRows,
]);
// Handle delete button click.
const handleBulkDelete = useCallback(() => {
onBulkDelete && onBulkDelete(selectedRows.map((r) => r.id));
}, [onBulkDelete, selectedRows]);
const handleTabChange = (viewId) => {
changeManualJournalCurrentView(viewId.id || -1);
addManualJournalsTableQueries({
custom_view_id: viewId.id || null,
});
};
return (
<DashboardActionsBar>
<NavbarGroup>
<Popover
content={<Menu>{viewsMenuItems}</Menu>}
minimal={true}
interactionKind={PopoverInteractionKind.HOVER}
position={Position.BOTTOM_LEFT}
>
<Button
className={classNames(Classes.MINIMAL, 'button--table-views')}
icon={<Icon icon="table-16" iconSize={16} />}
text={<T id={'table_views'} />}
rightIcon={'caret-down'}
/>
</Popover>
<DashboardActionViewsList
resourceName={'manual-journals'}
views={manualJournalsViews}
onChange={handleTabChange}
/>
<NavbarDivider />
<Button

15
client/src/containers/Accounting/ManualJournalsDataTable.js
View File

@@ -26,7 +26,11 @@ import { CLASSES } from 'common/classes';
import { useIsValuePassed } from 'hooks';
import ManualJournalsEmptyStatus from './ManualJournalsEmptyStatus';
import { AmountPopoverContent, NoteAccessor, StatusAccessor } from './components';
import {
AmountPopoverContent,
NoteAccessor,
StatusAccessor,
} from './components';
import withDialogActions from 'containers/Dialog/withDialogActions';
import withManualJournals from 'containers/Accounting/withManualJournals';
@@ -34,8 +38,6 @@ import withManualJournalsActions from 'containers/Accounting/withManualJournalsA
import { compose, saveInvoke } from 'utils';
function ManualJournalsDataTable({
// #withManualJournals
manualJournalsCurrentPage,
@@ -52,6 +54,7 @@ function ManualJournalsDataTable({
onDeleteJournal,
onPublishJournal,
onSelectedRowsChange,
manualJournalViewLoading,
}) {
const { custom_view_id: customViewId } = useParams();
const { formatMessage } = useIntl();
@@ -230,7 +233,11 @@ function ManualJournalsDataTable({
return (
<div className={classNames(CLASSES.DASHBOARD_DATATABLE)}>
<LoadingIndicator loading={manualJournalsLoading && !isLoadedBefore}>
<LoadingIndicator
loading={
(manualJournalsLoading && !isLoadedBefore) || manualJournalViewLoading
}
>
<Choose>
<Choose.When condition={showEmptyStatus}>
<ManualJournalsEmptyStatus />

3
client/src/containers/Accounting/ManualJournalsList.js
View File

@@ -151,7 +151,7 @@ function ManualJournalsTable({
);
// Handle filter change to re-fetch data-table.
const handleFilterChanged = useCallback(() => {}, [fetchManualJournals]);
const handleFilterChanged = useCallback(() => {}, []);
// Handle view change to re-fetch data table.
// const handleViewChanged = useCallback(() => {
@@ -243,6 +243,7 @@ function ManualJournalsTable({
onEditJournal={handleEditJournal}
onPublishJournal={handlePublishMaunalJournal}
onSelectedRowsChange={handleSelectedRowsChange}
manualJournalViewLoading={fetchManualJournals.isFetching}
/>
</Route>
</Switch>

44
client/src/containers/Accounting/ManualJournalsViewTabs.js
View File

@@ -1,15 +1,10 @@
import React, { useEffect, useRef } from 'react';
import React, { useEffect } from 'react';
import { useHistory } from 'react-router';
import {
Alignment,
Navbar,
NavbarGroup,
} from '@blueprintjs/core';
import { Alignment, Navbar, NavbarGroup } from '@blueprintjs/core';
import { useParams, withRouter } from 'react-router-dom';
import { connect } from 'react-redux';
import { pick, debounce } from 'lodash';
import { pick } from 'lodash';
import { useUpdateEffect } from 'hooks';
import { DashboardViewsTabs, Icon } from 'components';
import withManualJournals from './withManualJournals';
@@ -19,6 +14,9 @@ import withViewDetail from 'containers/Views/withViewDetails';
import { compose } from 'utils';
/**
* Manual journal views tabs.
*/
function ManualJournalsViewTabs({
// #withViewDetail
viewId,
@@ -38,50 +36,32 @@ function ManualJournalsViewTabs({
// #ownProps
onViewChanged,
}) {
const history = useHistory();
const { custom_view_id: customViewId } = useParams();
useEffect(() => {
changeManualJournalCurrentView(customViewId || -1);
setTopbarEditView(customViewId);
changePageSubtitle(customViewId && viewItem ? viewItem.name : '');
addManualJournalsTableQueries({
custom_view_id: customViewId,
});
}, [customViewId, addManualJournalsTableQueries]);
useUpdateEffect(() => {
onViewChanged && onViewChanged(customViewId);
}, [customViewId]);
const tabs = manualJournalsViews.map((view) => ({
...pick(view, ['name', 'id']),
}));
const debounceChangeHistory = useRef(
debounce((toUrl) => {
history.push(toUrl);
}, 250),
);
const handleClickNewView = () => {
setTopbarEditView(null);
history.push('/custom_views/manual_journals/new');
};
const handleClickNewView = () => {};
const handleTabChange = (viewId) => {
const toPath = viewId ? `${viewId}/custom_view` : '';
debounceChangeHistory.current(`/manual-journals/${toPath}`);
setTopbarEditView(viewId);
changeManualJournalCurrentView(viewId || -1);
addManualJournalsTableQueries({
custom_view_id: viewId || null,
});
};
return (
<Navbar className="navbar--dashboard-views">
<NavbarGroup align={Alignment.LEFT}>
<DashboardViewsTabs
resourceName={'manual-journals'}
initialViewId={customViewId}
baseUrl={'/manual-journals'}
tabs={tabs}
onChange={handleTabChange}
onNewViewTabClick={handleClickNewView}

23
client/src/containers/Accounts/AccountsViewsTabs.js
View File

@@ -38,23 +38,8 @@ function AccountsViewsTabs({
const { custom_view_id: customViewId = null } = useParams();
useEffect(() => {
changeAccountsCurrentView(customViewId || -1);
setTopbarEditView(customViewId);
changePageSubtitle(customViewId && viewItem ? viewItem.name : '');
addAccountsTableQueries({
custom_view_id: customViewId,
});
return () => {
setTopbarEditView(null);
changePageSubtitle('');
changeAccountsCurrentView(null);
};
}, [customViewId]);
useUpdateEffect(() => {
onViewChanged && onViewChanged(customViewId);
}, [customViewId]);
// Handle click a new view tab.
@@ -63,6 +48,13 @@ function AccountsViewsTabs({
history.push('/custom_views/accounts/new');
};
const handleTabChange = (viewId) => {
changeAccountsCurrentView(viewId || -1);
// addAccountsTableQueries({
// custom_view_id: viewId || null,
// });
};
const tabs = accountsViews.map((view) => ({
...pick(view, ['name', 'id']),
}));
@@ -72,6 +64,7 @@ function AccountsViewsTabs({
<DashboardViewsTabs
initialViewId={customViewId}
resourceName={'accounts'}
onChange={handleTabChange}
tabs={tabs}
/>
</NavbarGroup>

15
client/src/containers/Accounts/withAccounts.js
View File

@@ -1,27 +1,30 @@
import { connect } from 'react-redux';
import {
getAccountsItems, getAccountsListFactory,
getAccountsItems,
getAccountsListFactory,
getAccountsTableQuery,
} from 'store/accounts/accounts.selectors';
import {
getResourceViews,
} from 'store/customViews/customViews.selectors';
import { getResourceViews } from 'store/customViews/customViews.selectors';
export default (mapState) => {
const getAccountsList = getAccountsListFactory();
const mapStateToProps = (state, props) => {
const query = getAccountsTableQuery(state, props);
const mapped = {
accountsViews: getResourceViews(state, props, 'accounts'),
accountsTable: getAccountsItems(state, props),
accountsList: getAccountsList(state, props),
accountsTypes: state.accounts.accountsTypes,
// accountsTableQuery: query,
accountsTableQuery: state.accounts.tableQuery,
accountsLoading: state.accounts.loading,
accountErrors: state.accounts.errors,
};
return mapState ? mapState(mapped, state, props) : mapped;
};
return connect(mapStateToProps);
};

43
client/src/containers/Accounts/withAccountsTableActions.js
View File

@@ -1,24 +1,31 @@
import { connect } from 'react-redux';
import t from 'store/types';
import {
fetchAccountsTable,
} from 'store/accounts/accounts.actions';
import { fetchAccountsTable } from 'store/accounts/accounts.actions';
const mapActionsToProps = (dispatch) => ({
requestFetchAccountsTable: (query = {}) => dispatch(fetchAccountsTable({ query: { ...query } })),
changeAccountsCurrentView: (id) => dispatch({
type: t.ACCOUNTS_SET_CURRENT_VIEW,
currentViewId: parseInt(id, 10),
}),
setAccountsTableQuery: (key, value) => dispatch({
type: 'ACCOUNTS_TABLE_QUERY_SET', key, value,
}),
addAccountsTableQueries: (queries) => dispatch({
type: 'ACCOUNTS_TABLE_QUERIES_ADD', queries,
}),
setSelectedRowsAccounts: (ids) => dispatch({
type: t.ACCOUNTS_SELECTED_ROWS_SET, payload: { ids },
}),
requestFetchAccountsTable: (query = {}) =>
dispatch(fetchAccountsTable({ query: { ...query } })),
changeAccountsCurrentView: (id) =>
dispatch({
type: t.ACCOUNTS_SET_CURRENT_VIEW,
currentViewId: parseInt(id, 10),
}),
setAccountsTableQuery: (key, value) =>
dispatch({
type: t.ACCOUNTS_TABLE_QUERY_SET,
key,
value,
}),
addAccountsTableQueries: (queries) =>
dispatch({
type: t.ACCOUNTS_TABLE_QUERIES_ADD,
queries,
}),
setSelectedRowsAccounts: (ids) =>
dispatch({
type: t.ACCOUNTS_SELECTED_ROWS_SET,
payload: { ids },
}),
});
export default connect(null, mapActionsToProps);
export default connect(null, mapActionsToProps);

42
client/src/containers/Expenses/ExpenseActionsBar.js
View File

@@ -1,4 +1,4 @@
import React, { useMemo, useCallback } from 'react';
import React, { useMemo, useCallback, useState } from 'react';
import Icon from 'components/Icon';
import {
Button,
@@ -21,7 +21,7 @@ import FilterDropdown from 'components/FilterDropdown';
import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
import withDialogActions from 'containers/Dialog/withDialogActions';
import { If } from 'components';
import { If, DashboardActionViewsList } from 'components';
import withResourceDetail from 'containers/Resources/withResourceDetails';
import withExpenses from 'containers/Expenses/withExpenses';
@@ -29,6 +29,9 @@ import withExpensesActions from 'containers/Expenses/withExpensesActions';
import { compose } from 'utils';
/**
* Expenses actions bar.
*/
function ExpensesActionsBar({
// #withResourceDetail
resourceFields,
@@ -38,18 +41,15 @@ function ExpensesActionsBar({
//#withExpensesActions
addExpensesTableQueries,
changeExpensesView,
onFilterChanged,
selectedRows,
onBulkDelete,
}) {
const { path } = useRouteMatch();
const [filterCount, setFilterCount] = useState(0);
const history = useHistory();
const viewsMenuItems = expensesViews.map((view) => (
<MenuItem href={`${path}/${view.id}/custom_view`} text={view.name} />
));
const onClickNewExpense = useCallback(() => {
history.push('/expenses/new');
}, [history]);
@@ -78,22 +78,20 @@ function ExpensesActionsBar({
onBulkDelete && onBulkDelete(selectedRows.map((r) => r.id));
}, [onBulkDelete, selectedRows]);
const handleTabChange = (viewId) => {
changeExpensesView(viewId.id || -1);
addExpensesTableQueries({
custom_view_id: viewId.id || null,
});
};
return (
<DashboardActionsBar>
<NavbarGroup>
<Popover
content={<Menu>{viewsMenuItems}</Menu>}
minimal={true}
interactionKind={PopoverInteractionKind.HOVER}
position={Position.BOTTOM_LEFT}
>
<Button
className={classNames(Classes.MINIMAL, 'button--table-views')}
icon={<Icon icon="table-16" iconSize={16} />}
text={<T id={'table_views'} />}
rightIcon={'caret-down'}
/>
</Popover>
<DashboardActionViewsList
resourceName={'expenses'}
views={expensesViews}
onChange={handleTabChange}
/>
<NavbarDivider />
<Button
className={Classes.MINIMAL}
@@ -108,7 +106,9 @@ function ExpensesActionsBar({
position={Position.BOTTOM_LEFT}
>
<Button
className={classNames(Classes.MINIMAL, 'button--filter')}
className={classNames(Classes.MINIMAL, 'button--filter', {
'has-active-filters': filterCount > 0,
})}
text="Filter"
icon={<Icon icon="filter-16" iconSize={16} />}
/>

45
client/src/containers/Expenses/ExpenseViewTabs.js
View File

@@ -3,10 +3,9 @@ import { useHistory } from 'react-router';
import { Alignment, Navbar, NavbarGroup } from '@blueprintjs/core';
import { useParams, withRouter } from 'react-router-dom';
import { connect } from 'react-redux';
import { pick, debounce } from 'lodash';
import { pick } from 'lodash';
import { DashboardViewsTabs } from 'components';
import { useUpdateEffect } from 'hooks';
import withExpenses from './withExpenses';
import withExpensesActions from './withExpensesActions';
@@ -15,6 +14,9 @@ import withViewDetails from 'containers/Views/withViewDetails';
import { compose } from 'utils';
/**
* Expesne views tabs.
*/
function ExpenseViewTabs({
// #withExpenses
expensesViews,
@@ -38,55 +40,32 @@ function ExpenseViewTabs({
const { custom_view_id: customViewId = null } = useParams();
useEffect(() => {
changeExpensesView(customViewId || -1);
setTopbarEditView(customViewId);
changePageSubtitle(customViewId && viewItem ? viewItem.name : '');
addExpensesTableQueries({
custom_view_id: customViewId,
});
return () => {
setTopbarEditView(null);
changePageSubtitle('');
changeExpensesView(null);
};
}, [customViewId, addExpensesTableQueries, changeExpensesView]);
useUpdateEffect(() => {
onViewChanged && onViewChanged(customViewId);
}, [customViewId]);
const debounceChangeHistory = useRef(
debounce((toUrl) => {
history.push(toUrl);
}, 250),
);
const handleTabsChange = (viewId) => {
const toPath = viewId ? `${viewId}/custom_view` : '';
debounceChangeHistory.current(`/expenses-list/${toPath}`);
setTopbarEditView(viewId);
const handleTabChange = (viewId) => {
changeExpensesView(viewId || -1);
addExpensesTableQueries({
custom_view_id: viewId || null,
});
};
const tabs = expensesViews.map((view) => ({
...pick(view, ['name', 'id']),
}));
// Handle click a new view tab.
const handleClickNewView = () => {
setTopbarEditView(null);
history.push('/custom_views/expenses/new');
};
const handleClickNewView = () => {};
return (
<Navbar className={'navbar--dashboard-views'}>
<NavbarGroup align={Alignment.LEFT}>
<DashboardViewsTabs
initialViewId={customViewId}
baseUrl={'/expenses-list'}
resourceName={'expenses'}
tabs={tabs}
onNewViewTabClick={handleClickNewView}
onChange={handleTabsChange}
onChange={handleTabChange}
/>
</NavbarGroup>
</Navbar>

60
client/src/containers/Items/ItemsActionsBar.js
View File

@@ -1,5 +1,5 @@
import React, { useMemo, useCallback, useState } from 'react';
import { useRouteMatch, useHistory } from 'react-router-dom';
import React, { useMemo, useCallback, useState, useEffect } from 'react';
import { useRouteMatch, useHistory, useParams } from 'react-router-dom';
import classNames from 'classnames';
import {
MenuItem,
@@ -14,13 +14,11 @@ import {
Intent,
} from '@blueprintjs/core';
import { FormattedMessage as T, useIntl } from 'react-intl';
import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
import Icon from 'components/Icon';
import FilterDropdown from 'components/FilterDropdown';
import { If } from 'components';
import { If, DashboardActionViewsList } from 'components';
import withDialogActions from 'containers/Dialog/withDialogActions';
import withResourceDetail from 'containers/Resources/withResourceDetails';
import withItems from 'containers/Items/withItems';
import withItemsActions from './withItemsActions';
@@ -29,9 +27,7 @@ import { compose } from 'utils';
import { connect } from 'react-redux';
const ItemsActionsBar = ({
openDialog,
resourceName = 'items',
// #withResourceDetail
resourceFields,
// #withItems
@@ -39,18 +35,15 @@ const ItemsActionsBar = ({
//#withItemActions
addItemsTableQueries,
changeItemsCurrentView,
onFilterChanged,
selectedRows = [],
onBulkDelete,
}) => {
const { path } = useRouteMatch();
const { formatMessage } = useIntl();
const history = useHistory();
const [filterCount, setFilterCount] = useState(0);
const { formatMessage } = useIntl();
const viewsMenuItems = itemsViews.map((view) => (
<MenuItem href={`${path}/${view.id}/custom_view`} text={view.name} />
));
const onClickNewItem = useCallback(() => {
history.push('/items/new');
@@ -60,22 +53,13 @@ const ItemsActionsBar = ({
selectedRows,
]);
// name
// const filterDropdown = FilterDropdown({
// fields: resourceFields,
// onFilterChange: (filterConditions) => {
// setFilterCount(filterConditions.length);
// onFilterChanged && onFilterChanged(filterConditions);
// },
// });
const filterDropdown = FilterDropdown({
fields: resourceFields,
initialCondition: {
fieldKey: 'name',
compatator: 'contains',
value: '',
},
fields: resourceFields,
onFilterChange: (filterConditions) => {
addItemsTableQueries({
filter_roles: filterConditions || '',
@@ -84,30 +68,25 @@ const ItemsActionsBar = ({
},
});
// const onClickNewCategory = useCallback(() => {
// openDialog('item-form', {});
// }, [openDialog]);
const handleBulkDelete = useCallback(() => {
onBulkDelete && onBulkDelete(selectedRows.map((r) => r.id));
}, [onBulkDelete, selectedRows]);
const handleTabChange = (viewId) => {
changeItemsCurrentView(viewId.id || -1);
addItemsTableQueries({
custom_view_id: viewId.id || null,
});
};
return (
<DashboardActionsBar>
<NavbarGroup>
<Popover
content={<Menu>{viewsMenuItems}</Menu>}
minimal={true}
interactionKind={PopoverInteractionKind.HOVER}
position={Position.BOTTOM_LEFT}
>
<Button
className={classNames(Classes.MINIMAL, 'button--table-views')}
icon={<Icon icon="table-16" iconSize={16} />}
text={<T id={'table_views'} />}
rightIcon={'caret-down'}
/>
</Popover>
<DashboardActionViewsList
resourceName={'items'}
views={itemsViews}
onChange={handleTabChange}
/>
<NavbarDivider />
@@ -170,7 +149,6 @@ const withItemsActionsBar = connect(mapStateToProps);
export default compose(
withItemsActionsBar,
withDialogActions,
withItems(({ itemsViews }) => ({
itemsViews,
})),

5
client/src/containers/Items/ItemsDataTable.js
View File

@@ -46,6 +46,7 @@ function ItemsDataTable({
onInactiveItem,
onActivateItem,
onSelectedRowsChange,
itemsViewLoading,
}) {
const { formatMessage } = useIntl();
const isLoadedBefore = useIsValuePassed(itemsTableLoading, false);
@@ -238,7 +239,9 @@ function ItemsDataTable({
return (
<div className={classNames(CLASSES.DASHBOARD_DATATABLE)}>
<LoadingIndicator loading={itemsTableLoading && !isLoadedBefore}>
<LoadingIndicator
loading={(itemsTableLoading && !isLoadedBefore) || itemsViewLoading}
>
<Choose>
<Choose.When condition={showEmptyStatus}>
<ItemsEmptyStatus />

1
client/src/containers/Items/ItemsList.js
View File

@@ -261,6 +261,7 @@ function ItemsList({
onInactiveItem={handleInactiveItem}
onActivateItem={handleActivateItem}
onSelectedRowsChange={handleSelectedRowsChange}
itemsViewLoading={fetchItems.isFetching}
/>
<Alert
cancelButtonText={<T id={'cancel'} />}

72
client/src/containers/Items/ItemsViewsTabs.js
View File

@@ -1,29 +1,21 @@
import React, { useEffect, useRef } from 'react';
import React, { useCallback, useEffect, useRef } from 'react';
import { useHistory } from 'react-router';
import { connect } from 'react-redux';
import {
Alignment,
Navbar,
NavbarGroup,
Tabs,
Tab,
Button,
} from '@blueprintjs/core';
import { Alignment, Navbar, NavbarGroup } from '@blueprintjs/core';
import { useParams } from 'react-router-dom';
import Icon from 'components/Icon';
import { Link, withRouter } from 'react-router-dom';
import { withRouter } from 'react-router-dom';
import { compose } from 'utils';
import { useUpdateEffect } from 'hooks';
import { DashboardViewsTabs } from 'components';
import { pick, debounce } from 'lodash';
import { pick } from 'lodash';
import withItemsActions from 'containers/Items/withItemsActions';
import withDashboardActions from 'containers/Dashboard/withDashboardActions';
import withViewDetail from 'containers/Views/withViewDetails';
import withItems from 'containers/Items/withItems';
import { FormattedMessage as T } from 'react-intl';
/**
* Items views tabs.
*/
function ItemsViewsTabs({
// #withViewDetail
viewId,
@@ -43,62 +35,34 @@ function ItemsViewsTabs({
// #props
onViewChanged,
}) {
const history = useHistory();
const { custom_view_id: customViewId = null } = useParams();
const handleClickNewView = () => {
setTopbarEditView(null);
history.push('/custom_views/items/new');
};
const handleViewLinkClick = () => {
setTopbarEditView(customViewId);
};
useEffect(() => {
changeItemsCurrentView(customViewId || -1);
setTopbarEditView(customViewId);
changePageSubtitle(customViewId && viewItem ? viewItem.name : '');
addItemsTableQueries({
custom_view_id: customViewId || null,
});
return () => {
setTopbarEditView(null);
changeItemsCurrentView(-1);
changePageSubtitle('');
};
}, [customViewId, addItemsTableQueries, changeItemsCurrentView]);
useUpdateEffect(() => {
onViewChanged && onViewChanged(customViewId);
}, [customViewId]);
const debounceChangeHistory = useRef(
debounce((toUrl) => {
history.push(toUrl);
}, 250),
);
const handleTabsChange = (viewId) => {
const toPath = viewId ? `${viewId}/custom_view` : '';
debounceChangeHistory.current(`/items/${toPath}`);
setTopbarEditView(viewId);
};
const handleClickNewView = () => {};
const tabs = itemsViews.map((view) => ({
...pick(view, ['name', 'id']),
}));
const handleTabChange = (viewId) => {
changeItemsCurrentView(viewId || -1);
addItemsTableQueries({
custom_view_id: viewId || null,
});
};
return (
<Navbar className="navbar--dashboard-views">
<NavbarGroup align={Alignment.LEFT}>
<DashboardViewsTabs
initialViewId={customViewId}
baseUrl={'/items'}
resourceName={'items'}
tabs={tabs}
onNewViewTabClick={handleClickNewView}
onChange={handleTabsChange}
onChange={handleTabChange}
/>
</NavbarGroup>
</Navbar>

25
client/src/store/accounts/accounts.selectors.js
View File

@@ -1,6 +1,10 @@
import { createSelector } from 'reselect';
import { repeat } from 'lodash';
import { pickItemsFromIds, getItemById } from 'store/selectors';
import {
pickItemsFromIds,
getItemById,
paginationLocationQuery,
} from 'store/selectors';
import { flatToNestedArray, treeToList } from 'utils';
const accountsViewsSelector = (state) => state.accounts.views;
@@ -8,6 +12,16 @@ const accountsDataSelector = (state) => state.accounts.items;
const accountsCurrentViewSelector = (state) => state.accounts.currentViewId;
const accountIdPropSelector = (state, props) => props.accountId;
const accountsListSelector = (state) => state.accounts.listTree;
const accountsTableQuery = (state, props) => state.accounts.tableQuery;
export const getAccountsTableQuery = createSelector(
accountsTableQuery,
(tableQuery) => {
return {
...tableQuery,
};
},
);
export const getAccountsItems = createSelector(
accountsViewsSelector,
@@ -42,12 +56,13 @@ export const getAccountsListFactory = () =>
return {
...account,
htmlName: (depth > 1)
? (`${repeat(spaceChar, (depth - 1) * 2)}${account.name}`) :
account.name,
htmlName:
depth > 1
? `${repeat(spaceChar, (depth - 1) * 2)}${account.name}`
: account.name,
depth,
};
}
},
});
},
);

6
client/src/store/accounts/accounts.types.js
View File

@@ -14,8 +14,10 @@ export default {
ACCOUNTS_SET_CURRENT_VIEW: 'ACCOUNTS_SET_CURRENT_VIEW',
ACCOUNTS_TABLE_QUERY_SET: 'ACCOUNTS_TABLE_QUERY_SET',
ACCOUNTS_TABLE_QUERIES_SET: 'ACCOUNTS_TABLE_QUERIES_SET',
ACCOUNTS_TABLE_QUERY_SET: 'ACCOUNTS/TABLE_QUERY_SET',
ACCOUNTS_TABLE_QUERIES_SET: 'ACCOUNTS/TABLE_QUERIES_SET',
ACCOUNTS_TABLE_QUERIES_ADD:'ACCOUNTS/TABLE_QUERIES_ADD',
ACCOUNTS_TABLE_LOADING: 'ACCOUNTS_TABLE_LOADING',

14
client/src/store/expenses/expenses.actions.js
View File

@@ -20,21 +20,23 @@ export const fetchExpensesTable = ({ query } = {}) => {
payload: {
expenses: response.data.expenses,
pagination: response.data.pagination,
customViewId: response.data.customViewId || -1,
},
customViewId:
response.data?.filter_meta?.view?.custom_view_id || -1,
},
});
dispatch({
type: t.EXPENSES_ITEMS_SET,
payload: {
expenses: response.data.expenses,
}
},
});
dispatch({
type: t.EXPENSES_PAGINATION_SET,
payload: {
pagination: response.data.pagination,
customViewId: response.data.customViewId || -1,
}
customViewId:
response.data?.filter_meta?.view?.custom_view_id || -1,
},
});
dispatch({
type: t.EXPENSES_TABLE_LOADING,
@@ -54,7 +56,7 @@ export const fetchExpense = ({ id }) => {
return (dispatch) =>
new Promise((resolve, reject) => {
ApiService.get(`expenses/${id}`)
.then((response) => {
.then((response) => {
dispatch({
type: t.EXPENSE_SET,
payload: {

16
client/src/store/items/items.actions.js
View File

@@ -12,12 +12,13 @@ export const editItem = ({ id, form }) => {
export const fetchItems = ({ query }) => {
return (dispatch, getState) =>
new Promise((resolve, reject) => {
const pageQuery = getState().items.tableQuery;
let pageQuery = getState().items.tableQuery;
dispatch({
type: t.ITEMS_TABLE_LOADING,
payload: { loading: true },
});
ApiService.get(`items`, { params: { ...pageQuery, ...query } })
.then((response) => {
dispatch({
@@ -27,16 +28,18 @@ export const fetchItems = ({ query }) => {
dispatch({
type: t.ITEMS_PAGE_SET,
items: response.data.items,
customViewId: response.data?.filter_meta?.view?.custom_view_id,
customViewId:
response.data?.filter_meta?.view?.custom_view_id || -1,
paginationMeta: response.data.pagination,
});
dispatch({
type: t.ITEMS_PAGINATION_SET,
payload: {
pagination: response.data.pagination,
customViewId: response.data.customViewId || -1,
}
})
customViewId:
response.data?.filter_meta?.view?.custom_view_id || -1,
},
});
dispatch({
type: t.ITEMS_TABLE_LOADING,
payload: { loading: false },
@@ -44,9 +47,6 @@ export const fetchItems = ({ query }) => {
resolve(response);
})
.catch((error) => {
dispatch({
type: t.SET_DASHBOARD_REQUEST_COMPLETED,
});
reject(error);
});
});

50
client/src/store/items/items.selectors.js
View File

@@ -1,9 +1,6 @@
import { paginationLocationQuery } from "store/selectors";
import { paginationLocationQuery } from 'store/selectors';
import { createSelector } from 'reselect';
import {
pickItemsFromIds,
defaultPaginationMeta,
} from 'store/selectors';
import { pickItemsFromIds, defaultPaginationMeta } from 'store/selectors';
const itemsTableQuerySelector = (state) => state.items.tableQuery;
@@ -20,10 +17,11 @@ const itemsPaginationSelector = (state, props) => {
const viewId = state.items.currentViewId;
return state.items.views?.[viewId]?.paginationMeta;
};
const customersCurrentViewIdSelector = (state) => state.customers.currentViewId;
const itemsCurrentViewIdSelector = (state) => {
return state.items.currentViewId;
};
// Get items table query marged with location query.
export const getItemsTableQueryFactory = () =>
export const getItemsTableQueryFactory = () =>
createSelector(
paginationLocationQuery,
itemsTableQuerySelector,
@@ -31,39 +29,33 @@ export const getItemsTableQueryFactory = () =>
return {
...locationQuery,
...tableQuery,
}
};
},
);
// Retrieve items current page and view.
export const getItemsCurrentPageFactory = () =>
export const getItemsCurrentPageFactory = () =>
createSelector(
itemsDataSelector,
itemsCurrentPageSelector,
(items, itemsIdsCurrentPage) => {
return typeof itemsIdsCurrentPage === 'object'
? pickItemsFromIds(items, itemsIdsCurrentPage.ids) || []
: [];
? pickItemsFromIds(items, itemsIdsCurrentPage.ids) || []
: [];
},
);
// Retrieve items pagination meta.
export const getItemsPaginationMetaFactory = () =>
createSelector(
itemsPaginationSelector,
(itemsPagination) => {
return {
...defaultPaginationMeta(),
...itemsPagination,
};
}
);
export const getItemsPaginationMetaFactory = () =>
createSelector(itemsPaginationSelector, (itemsPagination) => {
return {
...defaultPaginationMeta(),
...itemsPagination,
};
});
// Retrieve items current view id.
export const getItemsCurrentViewIdFactory = () =>
createSelector(
customersCurrentViewIdSelector,
(currentViewId) => {
return currentViewId;
}
);
export const getItemsCurrentViewIdFactory = () =>
createSelector(itemsCurrentViewIdSelector, (currentViewId) => {
return currentViewId;
});

16
client/src/store/manualJournals/manualJournals.actions.js
View File

@@ -129,7 +129,7 @@ export const fetchManualJournalsTable = ({ query } = {}) => {
payload: {
manualJournals: response.data.manual_journals,
customViewId:
response.data.manual_journals?.viewMeta?.customViewId || -1,
response.data?.filter_meta?.view?.custom_view_id || -1,
pagination: response.data.pagination,
},
});
@@ -140,23 +140,25 @@ export const fetchManualJournalsTable = ({ query } = {}) => {
...manualJournal,
entries: manualJournal.entries.map((entry) => ({
...omit(entry, ['account']),
}))
})),
})),
]
],
});
dispatch({
type: t.MANUAL_JOURNALS_PAGINATION_SET,
payload: {
pagination: response.data.pagination,
customViewId:
response.data.manual_journals?.viewMeta?.customViewId || -1,
response.data?.filter_meta?.view?.custom_view_id || -1,
},
});
dispatch({
type: t.ACCOUNTS_ITEMS_SET,
accounts: flatten(response.data.manual_journals?.map(
journal => journal?.entries.map(entry => entry.account),
)),
accounts: flatten(
response.data.manual_journals?.map((journal) =>
journal?.entries.map((entry) => entry.account),
),
),
});
dispatch({
type: t.MANUAL_JOURNALS_TABLE_LOADING,