feat: Sidebar overlay.

client/src/containers/Items/ItemsActionsBar.js

@@ -10,6 +10,7 @@ import {
   Button,
   Classes,
   Intent,
+  Switch,
 } from '@blueprintjs/core';
 import { FormattedMessage as T } from 'components';
 import intl from 'react-intl-universal';
@@ -34,6 +35,7 @@ function ItemsActionsBar({
 
   // #withItemActions
   setItemsTableState,
+  itemsInactiveMode,
 
   // #withAlertActions
   openAlert,
@@ -42,7 +44,6 @@ function ItemsActionsBar({
   const { itemsViews } = useItemsListContext();
 
   // React intl.
-  
 
   // History context.
   const history = useHistory();
@@ -62,6 +63,12 @@ function ItemsActionsBar({
     openAlert('items-bulk-delete', { itemsIds: itemsSelectedRows });
   };
 
+  // Handle inactive switch changing.
+  const handleInactiveSwitchChange = (event) => {
+    const checked = event.target.checked;
+    setItemsTableState({ inactiveMode: checked });
+  };
+
   return (
     <DashboardActionsBar>
       <NavbarGroup>
@@ -112,13 +119,21 @@ function ItemsActionsBar({
           icon={<Icon icon="file-export-16" iconSize={16} />}
           text={<T id={'export'} />}
         />
+        <Switch
+          labelElement={<T id={'inactive'} />}
+          defaultChecked={itemsInactiveMode}
+          onChange={handleInactiveSwitchChange}
+        />
       </NavbarGroup>
     </DashboardActionsBar>
   );
 }
 
 export default compose(
-  withItems(({ itemsSelectedRows }) => ({ itemsSelectedRows })),
+  withItems(({ itemsSelectedRows, itemsTableState }) => ({
+    itemsSelectedRows,
+    itemsInactiveMode: itemsTableState.inactiveMode,
+  })),
   withItemsActions,
   withAlertActions,
 )(ItemsActionsBar);

client/src/containers/Items/ItemsList.js

@@ -12,7 +12,6 @@ import ItemsDataTable from './ItemsDataTable';
 
 import { ItemsListProvider } from './ItemsListProvider';
 import withItems from './withItems';
-import { transformTableStateToQuery } from 'utils';
 
 /**
  * Items list.
@@ -22,7 +21,7 @@ function ItemsList({
   itemsTableState,
 }) {
   return (
-    <ItemsListProvider query={transformTableStateToQuery(itemsTableState)}>
+    <ItemsListProvider tableState={itemsTableState}>
       <ItemsActionsBar />
 
       <DashboardPageContent>

client/src/containers/Items/ItemsListProvider.js

@@ -1,6 +1,7 @@
 import React, { createContext } from 'react';
 
 import { transformTableQueryToParams, isTableEmptyStatus } from 'utils';
+import { transformItemsTableState } from './utils';
 
 import DashboardInsider from 'components/Dashboard/DashboardInsider';
 import { useResourceViews, useResourceFields, useItems } from 'hooks/query';
@@ -11,9 +12,11 @@ const ItemsContext = createContext();
  * Items list provider.
  */
 function ItemsListProvider({
-  query,
+  tableState,
   ...props
 }) {
+  const tableQuery = transformItemsTableState(tableState);
+
   // Fetch accounts resource views and fields.
   const { data: itemsViews, isLoading: isViewsLoading } = useResourceViews(
     'items',
@@ -30,13 +33,13 @@ function ItemsListProvider({
     isFetching: isItemsFetching,
     isLoading: isItemsLoading,
   } = useItems({
-    ...transformTableQueryToParams(query)
+    ...transformTableQueryToParams(tableQuery)
   }, { keepPreviousData: true });
 
   // Detarmines the datatable empty status.
   const isEmptyStatus = isTableEmptyStatus({
     data: items, pagination, filterMeta,
-  }) && !isItemsFetching;
+  }) && !isItemsFetching && !tableState.inactiveMode;
 
   const state = {
     itemsViews,

client/src/containers/Items/utils.js

@@ -1,7 +1,10 @@
 import intl from 'react-intl-universal';
 import { Intent } from '@blueprintjs/core';
 import { AppToaster } from 'components';
-import { defaultFastFieldShouldUpdate } from 'utils';
+import {
+  transformTableStateToQuery,
+  defaultFastFieldShouldUpdate,
+} from 'utils';
 
 export const transitionItemTypeKeyToLabel = (itemTypeKey) => {
   const table = {
@@ -121,3 +124,10 @@ export const purchaseDescFieldShouldUpdate = (newProps, oldProps) => {
     defaultFastFieldShouldUpdate(newProps, oldProps)
   );
 };
+
+export function transformItemsTableState(tableState) {
+  return {
+    ...transformTableStateToQuery(tableState),
+    inactive_mode: tableState.inactiveMode,
+  };
+}