Merge branch 'master' of https://github.com/abouolia/Ratteb

client/src/containers/Customers/CustomerActionsBar.js

@@ -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 withCustomers from 'containers/Customers/withCustomers';
-import addCustomersTableQueries from 'containers/Customers/withCustomersActions';
-import { compose } from 'utils';
 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);

client/src/containers/Customers/CustomersList.js

@@ -55,13 +55,14 @@ function CustomersList({
   }, [changePageTitle, formatMessage]);
 
   // Fetch customers resource views and fields.
-  // const fetchResourceViews = useQuery(['resource-views', 'customers'],
+  const fetchResourceViews = useQuery(
-  //   () => requestFetchResourceViews('customers')
+    ['resource-views', 'customers'],
-  // );
+    (key, resourceName) => requestFetchResourceViews(resourceName),
+  );
  
   const fetchCustomers = useQuery(
     ['customers-table', customersTableQuery],
-    () => requestFetchCustomers(),
+    (key, query) => requestFetchCustomers({ ...query }),
   );
 
   const handleEditCustomer = useCallback(
@@ -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}

client/src/containers/Customers/CustomersViewsTabs.js

@@ -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,30 +25,36 @@ 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({
+    setTopbarEditView(customViewId);
-    //   custom_view_id: customViewId,
-    // });
-    return () => {
-      setTopbarEditView(null);
-      changePageSubtitle('');
-    };
   }, [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">
       <NavbarGroup align={Alignment.LEFT}>
@@ -55,6 +62,7 @@ function CustomersViewsTabs({
           initialViewId={customViewId}
           resourceName={'customers'}
           tabs={tabs}
+          onChange={handleTabsChange}
         />
       </NavbarGroup>
     </Navbar>
@@ -72,6 +80,7 @@ export default compose(
   withDashboardActions,
   withCustomersViewsTabs,
   withCustomersActions,
+  withViewDetail(),
   withCustomers(({ customersViews }) => ({
     customersViews,
   })),

client/src/containers/Customers/withCustomersActions.js

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

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 { If, DashboardActionViewsList } from 'components';
-import withResourceDetail from 'containers/Resources/withResourceDetails';
+
+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
+  // Fetch vendors resource views and fields.
-  const fetchVendors = useQuery(['vendors-table', vendorTableQuery], () =>
+  const fetchResourceViews = useQuery(
-    requestFetchVendorsTable(),
+    ['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/customers/customers.actions.js

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

client/src/store/customers/customers.reducer.js

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

client/src/store/customers/customers.type.js

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

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,7 +19,8 @@ const vendorsPaginationSelector = (state, props) => {
   return state.vendors.views?.[viewId];
 };
 
-export const getVendorsTableQuery = createSelector(
+export const getVendorTableQueryFactory = () =>
+  createSelector(
     paginationLocationQuery,
     vendorsTableQuery,
     (locationQuery, tableQuery) => {
@@ -26,12 +29,13 @@ export const getVendorsTableQuery = createSelector(
         ...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',