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

refactoring: inventory adjustments list.

Browse Source 
refactoring: items categories list.
This commit is contained in:
a.bouhuolia
2021-02-09 13:56:37 +02:00
parent 1a99584c9a
commit 6e10ed0721
32 changed files with 497 additions and 882 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
client/src/containers/ItemsCategories/ItemCategoriesList.js
View File

@@ -7,7 +7,7 @@ import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
import ItemsCategoriesAlerts from './ItemsCategoriesAlerts';
import ItemsCategoryActionsBar from './ItemsCategoryActionsBar';
import { ItemsCategoriesProvider } from './ItemsCategoriesProvider';
import ItemCategoriesViewPage from './ItemCategoriesViewPage';
import ItemCategoriesTable from './ItemCategoriesTable';
import withDashboardActions from 'containers/Dashboard/withDashboardActions';
import { compose } from 'utils';
@@ -22,6 +22,7 @@ const ItemCategoryList = ({
const { id } = useParams();
const { formatMessage } = useIntl();
// Changes the dashboard page title once the page mount.
useEffect(() => {
id
? changePageTitle(formatMessage({ id: 'edit_category_details' }))
@@ -33,7 +34,7 @@ const ItemCategoryList = ({
<ItemsCategoryActionsBar />
<DashboardPageContent>
<ItemCategoriesViewPage />
<ItemCategoriesTable />
</DashboardPageContent>
<ItemsCategoriesAlerts />
</ItemsCategoriesProvider>

85
client/src/containers/ItemsCategories/ItemCategoriesTable.js
View File

@@ -1,60 +1,52 @@
import React, { useMemo } from 'react';
import { useIntl } from 'react-intl';
import React from 'react';
import classNames from 'classnames';
import { TableActionsCell } from './components';
import { useItemsCategoriesTableColumns, ActionMenuList } from './components';
import DataTable from 'components/DataTable';
import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';
import { useItemsCategoriesContext } from './ItemsCategoriesProvider';
import { CLASSES } from 'common/classes';
import withAlertActions from 'containers/Alert/withAlertActions';
import withDialogActions from 'containers/Dialog/withDialogActions';
import { compose } from 'utils';
/**
* Items categories table.
*/
export default function ItemsCategoryTable({
function ItemsCategoryTable({
// #ownProps
tableProps,
// #withDialogActions
openDialog,
// #withAlertActions
openAlert
}) {
const { formatMessage } = useIntl();
// Items categories context.
const {
isItemsCategoriesFetching,
isCategoriesLoading,
isCategoriesFetching,
itemsCategories,
} = useItemsCategoriesContext();
// Table columns.
const columns = useMemo(
() => [
{
id: 'name',
Header: formatMessage({ id: 'category_name' }),
accessor: 'name',
width: 220,
},
{
id: 'description',
Header: formatMessage({ id: 'description' }),
accessor: 'description',
className: 'description',
width: 220,
},
{
id: 'count',
Header: formatMessage({ id: 'count' }),
accessor: 'count',
className: 'count',
width: 180,
},
{
id: 'actions',
Header: '',
Cell: TableActionsCell,
className: 'actions',
width: 50,
},
],
[formatMessage],
);
const columns = useItemsCategoriesTableColumns();
const handleSelectedRowsChange = (selectedRows) => {};
// Handle delete Item.
const handleDeleteCategory = ({ id }) => {
openAlert('item-category-delete', { itemCategoryId: id });
};
// Handle Edit item category.
const handleEditCategory = (category) => {
openDialog('item-category-form', { action: 'edit', id: category.id });
};
return (
<div className={classNames(CLASSES.DASHBOARD_DATATABLE)}>
@@ -62,14 +54,29 @@ export default function ItemsCategoryTable({
noInitialFetch={true}
columns={columns}
data={itemsCategories}
loading={isItemsCategoriesFetching}
loading={isCategoriesLoading}
headerLoading={isCategoriesLoading}
progressBarLoading={isCategoriesFetching}
manualSortBy={true}
expandable={true}
sticky={true}
selectionColumn={true}
TableLoadingRenderer={TableSkeletonRows}
noResults={'There is no items categories in table yet.'}
payload={{
onDeleteCategory: handleDeleteCategory,
onEditCategory: handleEditCategory
}}
ContextMenu={ActionMenuList}
{...tableProps}
/>
</div>
);
}
export default compose(
withDialogActions,
withAlertActions,
)(ItemsCategoryTable);

47
client/src/containers/ItemsCategories/ItemCategoriesViewPage.js
View File

@@ -1,47 +0,0 @@
import React from 'react';
import ItemCategoriesDataTable from './ItemCategoriesTable';
import withAlertActions from 'containers/Alert/withAlertActions';
import withDialogActions from 'containers/Dialog/withDialogActions';
import { compose } from 'utils';
/**
* Items categories view page.
*/
function ItemsCategoriesViewPage({
// #withAlertsActions
openAlert,
// #withDialogActions
openDialog,
}) {
// Handle selected rows change.
const handleSelectedRowsChange = (selectedRows) => {};
// Handle delete Item.
const handleDeleteCategory = ({ id }) => {
openAlert('item-category-delete', { itemCategoryId: id });
};
// Handle Edit item category.
const handleEditCategory = (category) => {
openDialog('item-category-form', { action: 'edit', id: category.id });
};
return (
<ItemCategoriesDataTable
tableProps={{
payload: {
onDeleteCategory: handleDeleteCategory,
onEditCategory: handleEditCategory,
},
}}
/>
);
}
export default compose(
withDialogActions,
withAlertActions,
)(ItemsCategoriesViewPage);

9
client/src/containers/ItemsCategories/ItemsCategoriesProvider.js
View File

@@ -10,13 +10,18 @@ const ItemsCategoriesContext = createContext();
function ItemsCategoriesProvider({ query, ...props }) {
const {
data: { itemsCategories, pagination },
isFetching: isItemsCategoriesFetching,
isFetching: isCategoriesFetching,
isLoading: isCategoriesLoading,
} = useItemsCategories();
const state = {
isItemsCategoriesFetching,
isCategoriesFetching,
isCategoriesLoading,
itemsCategories,
pagination,
query,
};
return (

10
client/src/containers/ItemsCategories/ItemsCategoryActionsBar.js
View File

@@ -16,7 +16,7 @@ import { If, Icon } from 'components';
import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
import withDialogActions from 'containers/Dialog/withDialogActions';
import withItemCategories from './withItemCategories';
// import withItemCategories from './withItemCategories';
import withAlertActions from 'containers/Alert/withAlertActions';
import { compose } from 'utils';
@@ -26,7 +26,7 @@ import { compose } from 'utils';
*/
function ItemsCategoryActionsBar({
// #withItemCategories
itemCategoriesSelectedRows,
itemCategoriesSelectedRows = [],
// #withDialog
openDialog,
@@ -103,8 +103,8 @@ function ItemsCategoryActionsBar({
export default compose(
withDialogActions,
withItemCategories(({ itemCategoriesSelectedRows }) => ({
itemCategoriesSelectedRows,
})),
// withItemCategories(({ itemCategoriesSelectedRows }) => ({
// itemCategoriesSelectedRows,
// })),
withAlertActions,
)(ItemsCategoryActionsBar);

41
client/src/containers/ItemsCategories/components.js
View File

@@ -52,3 +52,44 @@ export function TableActionsCell(props) {
</Popover>
);
}
/**
* Retrieve the items categories table columns.
*/
export function useItemsCategoriesTableColumns() {
const { formatMessage } = useIntl();
return React.useMemo(
() => [
{
id: 'name',
Header: formatMessage({ id: 'category_name' }),
accessor: 'name',
width: 220,
},
{
id: 'count',
Header: formatMessage({ id: 'count' }),
accessor: 'count',
className: 'count',
width: 180,
},
{
id: 'description',
Header: formatMessage({ id: 'description' }),
accessor: 'description',
className: 'description',
width: 220,
},
{
id: 'actions',
Header: '',
Cell: TableActionsCell,
className: 'actions',
width: 50,
},
],
[formatMessage],
);
}

15
client/src/containers/ItemsCategories/withItemCategories.js
View File

@@ -1,19 +1,16 @@
import { connect } from 'react-redux';
import { getItemsCategoriesListFactory } from 'store/itemCategories/ItemsCategories.selectors';
import { getResourceViews } from 'store/customViews/customViews.selectors';
import {
getItemsCategoriesTableStateFactory,
} from 'store/itemCategories/itemsCategories.selectors';
export default (mapState) => {
const getItemsCategoriesList = getItemsCategoriesListFactory();
const getItemsCategoriesTableState = getItemsCategoriesTableStateFactory();
const mapStateToProps = (state, props) => {
const mapped = {
categoriesList: getItemsCategoriesList(state, props),
itemCategoriesViews: getResourceViews(state, props, 'items_categories'),
categoriesTableLoading: state.itemCategories.loading,
itemCategoriesSelectedRows: state.itemCategories.selectedRows,
const mapped = {
itemsCategoriesTableState: getItemsCategoriesTableState(state, props),
};
return mapState ? mapState(mapped, state, props) : mapState;
};
return connect(mapStateToProps);
};

35
client/src/containers/ItemsCategories/withItemCategoriesActions.js
View File

@@ -1,38 +1,9 @@
import { connect } from 'react-redux';
import {
fetchItemCategories,
submitItemCategory,
deleteItemCategory,
editItemCategory,
deleteBulkItemCategories,
} from 'store/itemCategories/itemsCategory.actions';
import t from 'store/types';
import { setItemsCategoriesTableState } from 'store/itemCategories/itemsCategory.actions';
export const mapDispatchToProps = (dispatch) => ({
requestSubmitItemCategory: (form) => dispatch(submitItemCategory({ form })),
requestFetchItemCategories: (query) =>
dispatch(fetchItemCategories({ query })),
requestDeleteItemCategory: (id) => dispatch(deleteItemCategory(id)),
requestEditItemCategory: (id, form) => dispatch(editItemCategory(id, form)),
requestDeleteBulkItemCategories: (ids) =>
dispatch(deleteBulkItemCategories({ ids })),
changeItemCategoriesView: (id) =>
dispatch({
type: t.ITEM_CATEGORIES_SET_CURRENT_VIEW,
currentViewId: parseInt(id, 10),
}),
addItemCategoriesTableQueries: (queries) =>
dispatch({
type: t.ITEM_CATEGORIES_TABLE_QUERIES_ADD,
queries,
}),
setSelectedRowsCategories: (selectedRows) =>
dispatch({
type: t.ITEM_CATEGORY_SELECTED_ROW_SET,
payload: { selectedRows },
}),
setItemsCategoriesTableState: (state) =>
dispatch(setItemsCategoriesTableState(state)),
});
export default connect(null, mapDispatchToProps);