feat: Sidebar overlay.

client/src/containers/Vendors/VendorsLanding/VendorActionsBar.js

@@ -8,6 +8,7 @@ import {
   Popover,
   Position,
   PopoverInteractionKind,
+  Switch
 } from '@blueprintjs/core';
 import { FormattedMessage as T } from 'components';
 import intl from 'react-intl-universal';
@@ -21,6 +22,7 @@ import { useVendorsListContext } from './VendorsListProvider';
 import { useHistory } from 'react-router-dom';
 
 import withVendorsActions from './withVendorsActions';
+import withVendors from './withVendors';
 
 import { compose } from 'utils';
 
@@ -30,6 +32,7 @@ import { compose } from 'utils';
 function VendorActionsBar({
   // #withVendorActions
   setVendorsTableState,
+  vendorsInactiveMode
 }) {
   const history = useHistory();
   
@@ -46,6 +49,12 @@ function VendorActionsBar({
   const handleTabChange = (customView) => {
     setVendorsTableState({ customViewId: customView.id || null });
   };
+
+  // Handle inactive switch changing.
+  const handleInactiveSwitchChange = (event) => {
+    const checked = event.target.checked;
+    setVendorsTableState({ inactiveMode: checked });
+  };
   
   return (
     <DashboardActionsBar>
@@ -98,6 +107,11 @@ function VendorActionsBar({
           icon={<Icon icon="file-export-16" iconSize={16} />}
           text={<T id={'export'} />}
         />
+        <Switch
+          labelElement={<T id={'inactive'} />}
+          defaultChecked={vendorsInactiveMode}
+          onChange={handleInactiveSwitchChange}
+        />
       </NavbarGroup>
     </DashboardActionsBar>
   );
@@ -105,4 +119,7 @@ function VendorActionsBar({
 
 export default compose(
   withVendorsActions,
+  withVendors(({ vendorsTableState }) => ({
+    vendorsInactiveMode: vendorsTableState.inactiveMode,
+  })),
 )(VendorActionsBar);

client/src/containers/Vendors/VendorsLanding/VendorsList.js

@@ -12,7 +12,7 @@ import VendorsTable from './VendorsTable';
 
 import withVendors from './withVendors';
 
-import { transformTableStateToQuery, compose } from 'utils';
+import { compose } from 'utils';
 
 /**
  * Vendors list page.
@@ -22,7 +22,7 @@ function VendorsList({
   vendorsTableState,
 }) {
   return (
-    <VendorsListProvider query={transformTableStateToQuery(vendorsTableState)}>
+    <VendorsListProvider tableState={vendorsTableState}>
       <VendorActionsBar />
 
       <DashboardPageContent>

client/src/containers/Vendors/VendorsLanding/VendorsListProvider.js

@@ -3,28 +3,34 @@ import React, { createContext } from 'react';
 import DashboardInsider from 'components/Dashboard/DashboardInsider';
 import { useResourceViews, useVendors } from 'hooks/query';
 import { isTableEmptyStatus } from 'utils';
+import { transformVendorsStateToQuery } from './utils';
 
 const VendorsListContext = createContext();
 
-function VendorsListProvider({ query, ...props }) {
+function VendorsListProvider({ tableState, ...props }) {
+  // Transformes the vendors table state to fetch query.
+  const tableQuery = transformVendorsStateToQuery(tableState);
 
   // Fetch vendors list with pagination meta.
   const {
     data: { vendors, pagination, filterMeta },
     isLoading: isVendorsLoading,
     isFetching: isVendorsFetching,
-  } = useVendors(query, { keepPreviousData: true });
+  } = useVendors(tableQuery, { keepPreviousData: true });
 
   // Fetch customers resource views and fields.
-  const {
-    data: vendorsViews,
-    isLoading: isVendorsViewsLoading,
-  } = useResourceViews('vendors');
+  const { data: vendorsViews, isLoading: isVendorsViewsLoading } =
+    useResourceViews('vendors');
 
   // Detarmines the datatable empty status.
-  const isEmptyStatus = isTableEmptyStatus({
-    data: vendors, pagination, filterMeta,
-  }) && !isVendorsLoading;
+  const isEmptyStatus =
+    isTableEmptyStatus({
+      data: vendors,
+      pagination,
+      filterMeta,
+    }) &&
+    !isVendorsLoading &&
+    !tableState.inactiveMode;
 
   const provider = {
     vendors,
@@ -35,7 +41,7 @@ function VendorsListProvider({ query, ...props }) {
     isVendorsFetching,
     isVendorsViewsLoading,
 
-    isEmptyStatus
+    isEmptyStatus,
   };
 
   return (

client/src/containers/Vendors/VendorsLanding/utils.js

@@ -2,13 +2,22 @@ import { useCallback } from 'react';
 import intl from 'react-intl-universal';
 import { Intent } from '@blueprintjs/core';
 import { AppToaster } from 'components';
+import { transformTableStateToQuery } from 'utils';
 
 // Transform API errors in toasts messages.
-export const transformErrors = useCallback((errors) => {
+export const transformErrors = (errors) => {
   if (errors.some((e) => e.type === 'VENDOR.HAS.BILLS')) {
     AppToaster.show({
       message: intl.get('vendor_has_bills'),
       intent: Intent.DANGER,
     });
   }
-}, []);
+};
+
+
+export const transformVendorsStateToQuery = (tableState) => {
+  return {
+    ...transformTableStateToQuery(tableState),
+    inactive_mode: tableState.inactiveMode || false,
+  };
+}