Fix :empty status with Vendor Table.

client/src/containers/Vendors/VendorsTable.js

@@ -32,6 +32,7 @@ function VendorsTable({
   vendorsPageination,
   vendorTableQuery,
   vendorItems,
+  vendorsCurrentViewId,
 
   // #withVendorsActions
   addVendorsTableQueries,
@@ -182,6 +183,10 @@ function VendorsTable({
       onEditVendor,
       onDeleteVendor,
     });
+  const showEmptyStatus = [
+    vendorsCurrentViewId === -1,
+    vendorItems.length === 0,
+  ].every((condition) => condition === true);
 
   return (
     <div className={classNames(CLASSES.DASHBOARD_DATATABLE)}>
@@ -190,7 +195,7 @@ function VendorsTable({
         mount={false}
       >
         <Choose>
-          <Choose.When condition={true}>
+          <Choose.When condition={showEmptyStatus}>
             <VendorsEmptyStatus />
           </Choose.When>
 
@@ -228,11 +233,13 @@ export default compose(
       vendorsLoading,
       vendorTableQuery,
       vendorsPageination,
+      vendorsCurrentViewId,
     }) => ({
       vendorItems,
       vendorsLoading,
       vendorsPageination,
       vendorTableQuery,
+      vendorsCurrentViewId,
     }),
   ),
   withVendorsActions,

client/src/containers/Vendors/withVendors.js

@@ -5,11 +5,13 @@ import {
   getVendorCurrentPageFactory,
   getVendorsTableQuery,
   getVendorsPaginationMetaFactory,
+  getVendorsCurrentViewIdFactory,
 } from 'store/vendors/vendors.selectors';
 
 export default (mapState) => {
   const getVendorsItems = getVendorCurrentPageFactory();
   const getVendorsPaginationMeta = getVendorsPaginationMetaFactory();
+  const getVendorsCurrentViewId = getVendorsCurrentViewIdFactory();
   const mapStateToProps = (state, props) => {
     const query = getVendorsTableQuery(state, props);
 
@@ -20,6 +22,7 @@ export default (mapState) => {
       vendorTableQuery: query,
       vendorsPageination: getVendorsPaginationMeta(state, props, query),
       vendorsLoading: state.vendors.loading,
+      vendorsCurrentViewId: getVendorsCurrentViewId(state, props),
     };
     return mapState ? mapState(mapped, state, props) : mapped;
   };

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

@@ -10,6 +10,8 @@ const vendorByIdSelector = (state, props) =>
   state.vendors.items[props.vendorId];
 const vendorsItemsSelector = (state) => state.vendors.items;
 
+const vendorsCurrentViewIdSelector = (state) => state.vendors.currentViewId;
+
 const vendorsPaginationSelector = (state, props) => {
   const viewId = state.vendors.currentViewId;
   return state.vendors.views?.[viewId];
@@ -57,3 +59,8 @@ export const getVendorByIdFactory = () =>
   createSelector(vendorByIdSelector, (vendor) => {
     return vendor;
   });
+
+  export const getVendorsCurrentViewIdFactory = () =>
+  createSelector(vendorsCurrentViewIdSelector, (currentViewId) => {
+    return currentViewId;
+  });