fix: vednor view .

client/src/containers/Vendors/VendorActionsBar.js

@@ -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);

client/src/containers/Vendors/VendorViewsTabs.js

@@ -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);

client/src/containers/Vendors/VendorsList.js

@@ -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);

client/src/containers/Vendors/VendorsTable.js

@@ -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(

client/src/containers/Vendors/withVendorActions.js

@@ -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 },
     }),
 });
 

client/src/containers/Vendors/withVendors.js

@@ -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,

client/src/store/vendors/vendors.actions.js

@@ -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({

client/src/store/vendors/vendors.reducer.js

@@ -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'),
 });

client/src/store/vendors/vendors.selectors.js

@@ -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];
 };
 

client/src/store/vendors/vendors.types.js

@@ -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',