This commit is contained in:
a.bouhuolia
2020-12-22 22:28:15 +02:00
17 changed files with 206 additions and 88 deletions

View File

@@ -20,17 +20,20 @@ import FilterDropdown from 'components/FilterDropdown';
import { If, DashboardActionViewsList } from 'components';
import withResourceDetail from 'containers/Resources/withResourceDetails';
import withDashboardActions from 'containers/Dashboard/withDashboardActions';
import addCustomersTableQueries from 'containers/Customers/withCustomersActions';
import { compose } from 'utils';
import withCustomers from 'containers/Customers/withCustomers';
import withCustomersActions from 'containers/Customers/withCustomersActions';
import { compose } from 'utils';
const CustomerActionsBar = ({
// #withResourceDetail
resourceFields,
// #withCustomers
customersViews,
//#withCustomersActions
addCustomersTableQueries,
changeCustomerView,
// #ownProps
selectedRows = [],
@@ -45,16 +48,6 @@ const CustomerActionsBar = ({
history.push('/customers/new');
}, [history]);
// const filterDropdown = FilterDropdown({
// fields: resourceFields,
// onFilterChange: (filterConditions) => {
// setFilterCount(filterConditions.length || 0);
// addCustomersTableQueries({
// filter_roles: filterConditions || '',
// });
// onFilterChanged && onFilterChanged(filterConditions);
// },
// });
const hasSelectedRows = useMemo(() => selectedRows.length > 0, [
selectedRows,
@@ -64,12 +57,20 @@ const CustomerActionsBar = ({
onBulkDelete && onBulkDelete(selectedRows.map((r) => r.id));
}, [onBulkDelete, selectedRows]);
const handleTabChange = (viewId) => {
changeCustomerView(viewId.id || -1);
addCustomersTableQueries({
custom_view_id: viewId.id || null,
});
};
return (
<DashboardActionsBar>
<NavbarGroup>
<DashboardActionViewsList
resourceName={'customers'}
views={[]}
views={customersViews}
onChange={handleTabChange}
/>
<NavbarDivider />
@@ -133,4 +134,7 @@ export default compose(
withResourceDetail(({ resourceFields }) => ({
resourceFields,
})),
withCustomers(({ customersViews }) => ({
customersViews,
})),
)(CustomerActionsBar);

View File

@@ -55,13 +55,14 @@ function CustomersList({
}, [changePageTitle, formatMessage]);
// Fetch customers resource views and fields.
// const fetchResourceViews = useQuery(['resource-views', 'customers'],
// () => requestFetchResourceViews('customers')
// );
const fetchResourceViews = useQuery(
['resource-views', 'customers'],
(key, resourceName) => requestFetchResourceViews(resourceName),
);
const fetchCustomers = useQuery(
['customers-table', customersTableQuery],
() => requestFetchCustomers(),
(key, query) => requestFetchCustomers({ ...query }),
);
const handleEditCustomer = useCallback(
@@ -84,7 +85,7 @@ function CustomersList({
setDeleteCustomer(false);
}, [setDeleteCustomer]);
const transformErrors = (errors) => {
const transformErrors = (errors) => {
if (errors.some((e) => e.type === 'CUSTOMER.HAS.SALES_INVOICES')) {
AppToaster.show({
message: formatMessage({
@@ -132,16 +133,6 @@ function CustomersList({
selectedRows,
]);
// Handle filter change to re-fetch the items.
const handleFilterChanged = useCallback(
(filterConditions) => {
// addCustomersTableQueries({
// filter_roles: filterConditions || '',
// });
},
[addCustomersTableQueries],
);
// Handle Customers bulk delete button click.,
const handleBulkDelete = useCallback(
(customersIds) => {
@@ -173,10 +164,12 @@ function CustomersList({
}, [requestDeleteBulkCustomers, bulkDelete, formatMessage]);
return (
<DashboardInsider name={'customers-list'}>
<DashboardInsider
loading={fetchResourceViews.isFetching}
name={'customers-list'}
>
<CustomerActionsBar
selectedRows={selectedRows}
onFilterChanged={handleFilterChanged}
onBulkDelete={handleBulkDelete}
/>
@@ -188,7 +181,6 @@ function CustomersList({
>
<CustomersViewsTabs />
<CustomersTable
loading={fetchCustomers.isFetching}
onDeleteCustomer={handleDeleteCustomer}
onEditCustomer={handleEditCustomer}
onSelectedRowsChange={handleSelectedRowsChange}

View File

@@ -1,7 +1,7 @@
import React, { useEffect, useMemo } from 'react';
import { Alignment, Navbar, NavbarGroup } from '@blueprintjs/core';
import { compose } from 'redux';
import { useParams, withRouter, useHistory } from 'react-router-dom';
import { useParams, withRouter } from 'react-router-dom';
import { connect } from 'react-redux';
import { DashboardViewsTabs } from 'components';
@@ -9,6 +9,7 @@ import { DashboardViewsTabs } from 'components';
import withCustomers from 'containers/Customers/withCustomers';
import withCustomersActions from 'containers/Customers/withCustomersActions';
import withDashboardActions from 'containers/Dashboard/withDashboardActions';
import withViewDetail from 'containers/Views/withViewDetails';
import { pick } from 'lodash';
/**
@@ -24,29 +25,35 @@ function CustomersViewsTabs({
// #withCustomersActions
addCustomersTableQueries,
changeCustomerView,
// #withDashboardActions
setTopbarEditView,
changePageSubtitle,
}) {
const history = useHistory();
const { custom_view_id: customViewId = null } = useParams();
const tabs = useMemo(() => customersViews.map((view) => ({
...pick(view, ['name', 'id']),
}), [customersViews]));
useEffect(() => {
setTopbarEditView(customViewId);
changePageSubtitle(customViewId && viewItem ? viewItem.name : '');
// addCustomersTableQueries({
// custom_view_id: customViewId,
// });
return () => {
setTopbarEditView(null);
changePageSubtitle('');
};
setTopbarEditView(customViewId);
}, [customViewId]);
const tabs = useMemo(() =>
customersViews.map(
(view) => ({
...pick(view, ['name', 'id']),
}),
[customersViews],
),
);
const handleTabsChange = (viewId) => {
changeCustomerView(viewId || -1);
addCustomersTableQueries({
custom_view_id: viewId || null,
});
setTopbarEditView(viewId);
};
return (
<Navbar className="navbar--dashboard-views">
@@ -55,6 +62,7 @@ function CustomersViewsTabs({
initialViewId={customViewId}
resourceName={'customers'}
tabs={tabs}
onChange={handleTabsChange}
/>
</NavbarGroup>
</Navbar>
@@ -72,7 +80,8 @@ export default compose(
withDashboardActions,
withCustomersViewsTabs,
withCustomersActions,
withViewDetail(),
withCustomers(({ customersViews }) => ({
customersViews,
})),
)(CustomersViewsTabs);
)(CustomersViewsTabs);

View File

@@ -19,8 +19,14 @@ export const mapDispatchToProps = (dispatch) => ({
addCustomersTableQueries: (queries) =>
dispatch({
type: t.CUSTOMERS_TABLE_QUERIES_ADD,
payload: { queries }
payload: { queries },
}),
changeCustomerView: (id) => {
dispatch({
type: t.CUSTOMERS_SET_CURRENT_VIEW,
currentViewId: parseInt(id, 10),
});
},
});
export default connect(null, mapDispatchToProps);

View File

@@ -16,11 +16,20 @@ import { useHistory } from 'react-router-dom';
import Icon from 'components/Icon';
import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
import { DashboardActionViewsList } from 'components';
import withResourceDetail from 'containers/Resources/withResourceDetails';
import { If, DashboardActionViewsList } from 'components';
import withVendors from './withVendors';
import withVendorActions from './withVendorActions';
import { compose } from 'utils';
function VendorActionsBar({
// #withVendors
vendorViews,
// #withVendorActions
addVendorsTableQueries,
changeVendorView,
// #ownProps
selectedRows = [],
}) {
@@ -32,11 +41,25 @@ function VendorActionsBar({
history.push('/vendors/new');
}, [history]);
const hasSelectedRows = useMemo(() => selectedRows.length > 0, [
selectedRows,
]);
const handleTabChange = (viewId) => {
changeVendorView(viewId.id || -1);
addVendorsTableQueries({
custom_view_id: viewId.id || null,
});
};
return (
<DashboardActionsBar>
<NavbarGroup>
<DashboardActionViewsList resourceName={'vendors'} views={[]} />
<DashboardActionViewsList
resourceName={'vendors'}
views={vendorViews}
onChange={handleTabChange}
/>
<NavbarDivider />
<Button
className={Classes.MINIMAL}
@@ -62,6 +85,14 @@ function VendorActionsBar({
icon={<Icon icon="filter-16" iconSize={16} />}
/>
</Popover>
<If condition={hasSelectedRows}>
<Button
className={Classes.MINIMAL}
icon={<Icon icon="trash-16" iconSize={16} />}
text={<T id={'delete'} />}
intent={Intent.DANGER}
/>
</If>
<Button
className={Classes.MINIMAL}
icon={<Icon icon="file-import-16" iconSize={16} />}
@@ -76,5 +107,13 @@ function VendorActionsBar({
</DashboardActionsBar>
);
}
const mapStateToProps = (state, props) => ({
resourceName: 'vendors',
});
const withVendorsActionsBar = connect(mapStateToProps);
export default VendorActionsBar;
export default compose(
withVendorsActionsBar,
withVendorActions,
withVendors(({ vendorViews }) => ({ vendorViews })),
)(VendorActionsBar);

View File

@@ -9,10 +9,11 @@ import { DashboardViewsTabs } from 'components';
import withVendors from './withVendors';
import withVendorActions from './withVendorActions';
import withDashboardActions from 'containers/Dashboard/withDashboardActions';
import withViewDetail from 'containers/Views/withViewDetails';
import { pick } from 'lodash';
/**
* Customers views tabs.
* Vendors views tabs.
*/
function VendorViewsTabs({
// #withViewDetail
@@ -22,12 +23,21 @@ function VendorViewsTabs({
// #withVendors
vendorViews,
// #withVendorActions
addVendorsTableQueries,
changeVendorView,
// #withDashboardActions
setTopbarEditView,
changePageSubtitle,
}) {
const { custom_view_id: customViewId = null } = useParams();
useEffect(() => {
changePageSubtitle(customViewId && viewItem ? viewItem.name : '');
setTopbarEditView(customViewId);
}, [customViewId]);
const tabs = useMemo(() =>
vendorViews.map(
(view) => ({
@@ -37,6 +47,13 @@ function VendorViewsTabs({
),
);
const handleTabsChange = (viewId) => {
changeVendorView(viewId || -1);
addVendorsTableQueries({
custom_view_id: viewId || null,
});
};
return (
<Navbar className="navbar--dashboard-views">
<NavbarGroup align={Alignment.LEFT}>
@@ -44,14 +61,25 @@ function VendorViewsTabs({
initialViewId={customViewId}
resourceName={'vendors'}
tabs={tabs}
onChange={handleTabsChange}
/>
</NavbarGroup>
</Navbar>
);
}
const mapStateToProps = (state, ownProps) => ({
viewId: ownProps.match.params.custom_view_id,
});
const withVendorsViewsTabs = connect(mapStateToProps);
export default compose(
withRouter,
withDashboardActions,
withVendorsViewsTabs,
withVendorActions,
withViewDetail(),
withVendors(({ vendorViews }) => ({ vendorViews })),
)(VendorViewsTabs);

View File

@@ -28,13 +28,15 @@ function VendorsList({
// #withDashboardActions
changePageTitle,
// #withResourceActions
requestFetchResourceViews,
// #withVendors
vendorTableQuery,
// #withVendorActions
requestDeleteVender,
requestFetchVendorsTable,
addVendorsTableQueries,
}) {
const [deleteVendor, setDeleteVendor] = useState(false);
const [selectedRows, setSelectedRows] = useState([]);
@@ -47,9 +49,16 @@ function VendorsList({
changePageTitle(formatMessage({ id: 'vendors_list' }));
}, [changePageTitle, formatMessage]);
// Handle fetch customers data table
const fetchVendors = useQuery(['vendors-table', vendorTableQuery], () =>
requestFetchVendorsTable(),
// Fetch vendors resource views and fields.
const fetchResourceViews = useQuery(
['resource-views', 'vendors'],
(key, resourceName) => requestFetchResourceViews(resourceName),
);
// Handle fetch vendors data table
const fetchVendors = useQuery(
['vendors-table', vendorTableQuery],
(key, query) => requestFetchVendorsTable({ ...query }),
);
// Handle Edit vendor data table
@@ -114,20 +123,22 @@ function VendorsList({
if (tableLoading && !fetchVendors.isFetching) {
setTableLoading(false);
}
}, [tableLoading, fetchVendors]);
}, [tableLoading, fetchVendors.isFetching]);
return (
<DashboardInsider name={'vendors-list'}>
<DashboardInsider
loading={fetchResourceViews.isFetching}
name={'vendors-list'}
>
<VendorActionsBar selectedRows={selectedRows} />
<DashboardPageContent>
<Switch>
<Route
exact={true}
// path={}
path={['/vendors/:custom_view_id/custom_view', '/vendors']}
>
<VendorsViewsTabs />
<VendorsTable
loading={fetchVendors.isFetching}
onDeleteVendor={handleDeleteVendor}
onEditVendor={handleEditVendor}
onSelectedRowsChange={handleSelectedRowsChange}
@@ -155,7 +166,9 @@ function VendorsList({
}
export default compose(
withResourceActions,
withVendorActions,
withDashboardActions,
withViewsActions,
withVendors(({ vendorTableQuery }) => ({ vendorTableQuery })),
)(VendorsList);

View File

@@ -38,12 +38,13 @@ function VendorsTable({
addVendorsTableQueries,
// #ownProps
loading,
onEditVendor,
onDeleteVendor,
onSelectedRowsChange,
}) {
const { formatMessage } = useIntl();
const isLoadedBefore = useIsValuePassed(vendorsLoading, false);
const isLoadedBefore = useIsValuePassed(loading, false);
// Vendor actions list.
const renderContextMenu = useMemo(

View File

@@ -20,11 +20,10 @@ const mapDipatchToProps = (dispatch) => ({
type: t.VENDORS_SET_CURRENT_VIEW,
currentViewId: parseInt(id, 10),
}),
addVendorsTableQueries: (queries) =>
dispatch({
type: t.VENDORS_TABLE_QUERIES_ADD,
queries,
payload: { queries },
}),
});

View File

@@ -3,7 +3,7 @@ import { getResourceViews } from 'store/customViews/customViews.selectors';
import {
getVendorCurrentPageFactory,
getVendorsTableQuery,
getVendorTableQueryFactory,
getVendorsPaginationMetaFactory,
getVendorsCurrentViewIdFactory,
} from 'store/vendors/vendors.selectors';
@@ -12,13 +12,15 @@ export default (mapState) => {
const getVendorsItems = getVendorCurrentPageFactory();
const getVendorsPaginationMeta = getVendorsPaginationMetaFactory();
const getVendorsCurrentViewId = getVendorsCurrentViewIdFactory();
const getVendorTableQuery = getVendorTableQueryFactory();
const mapStateToProps = (state, props) => {
const query = getVendorsTableQuery(state, props);
const query = getVendorTableQuery(state, props);
const mapped = {
vendorsCurrentPage: getVendorsItems(state, props, query),
vendorViews: getResourceViews(state, props, 'vendors'),
vendorItems: Object.values(state.vendors.items),
vendorItems: getVendorsItems(state, props, query),
vendorTableQuery: query,
vendorsPageination: getVendorsPaginationMeta(state, props, query),
vendorsLoading: state.vendors.loading,

View File

@@ -48,7 +48,8 @@ export const fetchCustomers = ({ query }) => {
type: t.CUSTOMERS_PAGE_SET,
payload: {
customers: response.data.customers,
customViewId: response.data.customViewId || -1,
customViewId:
response.data?.filter_meta?.view?.custom_view_id || -1,
paginationMeta: response.data.pagination,
},
});
@@ -62,7 +63,8 @@ export const fetchCustomers = ({ query }) => {
type: t.CUSTOMERS_PAGINATION_SET,
payload: {
pagination: response.data.pagination,
customViewId: response.data.customViewId || -1,
customViewId:
response.data?.filter_meta?.view?.custom_view_id || -1,
},
});
dispatch({

View File

@@ -49,6 +49,7 @@ export default createReducer(initialState, {
state.views[viewId] = {
...view,
pages: {
...(state.views?.[viewId]?.pages || {}),
[paginationMeta.page]: {
ids: customers.map((i) => i.id),
@@ -64,6 +65,10 @@ export default createReducer(initialState, {
}
},
[t.CUSTOMERS_SET_CURRENT_VIEW]: (state, action) => {
state.currentViewId = action.currentViewId;
},
[t.CUSTOMERS_TABLE_LOADING]: (state, action) => {
const { loading } = action.payload;
state.loading = loading;

View File

@@ -7,4 +7,5 @@ export default {
CUSTOMER_DELETE: 'CUSTOMER_DELETE',
CUSTOMERS_BULK_DELETE: 'CUSTOMERS_BULK_DELETE',
CUSTOMERS_PAGINATION_SET: 'CUSTOMERS_PAGINATION_SET',
CUSTOMERS_SET_CURRENT_VIEW: 'CUSTOMERS_SET_CURRENT_VIEW',
};

View File

@@ -5,6 +5,7 @@ export const fetchVendorsTable = ({ query }) => {
return (dispatch, getState) =>
new Promise((resolve, reject) => {
const pageQuery = getState().vendors.tableQuery;
dispatch({
type: t.VENDORS_TABLE_LOADING,
payload: { loading: true },
@@ -15,7 +16,8 @@ export const fetchVendorsTable = ({ query }) => {
type: t.VENDORS_PAGE_SET,
payload: {
vendors: response.data.vendors,
customViewId: response.data.customViewId || -1,
customViewId:
response.data?.filter_meta?.view?.custom_view_id || -1,
paginationMeta: response.data.pagination,
},
});
@@ -29,7 +31,8 @@ export const fetchVendorsTable = ({ query }) => {
type: t.VENDORS_PAGINATION_SET,
payload: {
pagination: response.data.pagination,
customViewId: response.data.customViewId || -1,
customViewId:
response.data?.filter_meta?.view?.custom_view_id || -1,
},
});
dispatch({

View File

@@ -13,7 +13,7 @@ const initialState = {
currentViewId: -1,
tableQuery: {
page_size: 5,
page_size: 12,
page: 1,
},
};
@@ -23,13 +23,16 @@ export default createReducer(initialState, {
const _vendors = state.items[id] || {};
state.items[id] = { ..._vendors, ...vendor };
},
[t.VENDORS_TABLE_LOADING]: (state, action) => {
const { loading } = action.payload;
state.loading = loading;
},
[t.VENDORS_ITEMS_SET]: (state, action) => {
const { vendors } = action.payload;
const _vendors = {};
vendors.forEach((vendor) => {
_vendors[vendor.id] = {
...vendor,
@@ -40,21 +43,28 @@ export default createReducer(initialState, {
..._vendors,
};
},
[t.VENDORS_SET_CURRENT_VIEW]: (state, action) => {
state.currentViewId = action.currentViewId;
},
[t.VENDORS_PAGE_SET]: (state, action) => {
const { customViewId, vendors, paginationMeta } = action.payload;
const viewId = customViewId || -1;
const view = state.views[viewId] || {};
state.views[viewId] = {
...view,
pages: {
...(state.views?.[viewId]?.pages || {}),
[paginationMeta.total]: {
[paginationMeta.page]: {
ids: vendors.map((i) => i.id),
},
},
};
},
[t.VENDOR_DELETE]: (state, action) => {
const { id } = action.payload;
@@ -62,6 +72,6 @@ export default createReducer(initialState, {
delete state.items[id];
}
},
// ...viewPaginationSetReducer(t.VENDORS_PAGINATION_SET),
...viewPaginationSetReducer(t.VENDORS_PAGINATION_SET),
...createTableQueryReducers('VENDORS'),
});

View File

@@ -6,8 +6,10 @@ import {
} from 'store/selectors';
const vendorsTableQuery = (state) => state.vendors.tableQuery;
const vendorByIdSelector = (state, props) =>
state.vendors.items[props.vendorId];
const vendorsItemsSelector = (state) => state.vendors.items;
const vendorsCurrentViewIdSelector = (state) => state.vendors.currentViewId;
@@ -17,22 +19,24 @@ const vendorsPaginationSelector = (state, props) => {
return state.vendors.views?.[viewId];
};
export const getVendorsTableQuery = createSelector(
paginationLocationQuery,
vendorsTableQuery,
(locationQuery, tableQuery) => {
return {
...locationQuery,
...tableQuery,
};
},
);
export const getVendorTableQueryFactory = () =>
createSelector(
paginationLocationQuery,
vendorsTableQuery,
(locationQuery, tableQuery) => {
return {
...locationQuery,
...tableQuery,
};
},
);
const vendorsPageSelector = (state, props, query) => {
const viewId = state.vendors.currentViewId;
const currentView = state.vendors.views?.[viewId];
const currentPageId = currentView?.pages;
const currentPageId = currentView?.paginationMeta?.page;
return currentView?.pages?.[currentPageId];
};

View File

@@ -3,7 +3,7 @@ export default {
VENDOR_SET: 'VENDOR_SET',
VENDORS_PAGE_SET: 'VENDORS_PAGE_SET',
VENDORS_TABLE_LOADING: 'VENDORS_TABLE_LOADING',
VENDORS_TABLE_QUERIES_ADD: 'VENDORS_TABLE_QUERIES_ADD',
VENDORS_TABLE_QUERIES_ADD: 'VENDORS/TABLE_QUERIES_ADD',
VENDOR_DELETE: 'VENDOR_DELETE',
VENDORS_BULK_DELETE: 'VENDORS_BULK_DELETE',
VENDORS_PAGINATION_SET: 'VENDORS_PAGINATION_SET',