BIG-5: feat switching between compact and medium table row size.

src/containers/Items/ItemsActionsBar.js

@@ -9,7 +9,7 @@ import {
   Switch,
   Alignment,
 } from '@blueprintjs/core';
-import { FormattedMessage as T } from 'components';
+import { DashboardRowsHeightButton, FormattedMessage as T } from 'components';
 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
 import Icon from 'components/Icon';
 import {
@@ -25,8 +25,10 @@ import { useRefreshItems } from 'hooks/query/items';
 import withItems from 'containers/Items/withItems';
 import withItemsActions from './withItemsActions';
 import withAlertActions from 'containers/Alert/withAlertActions';
+import withSettings from '../Settings/withSettings';
 
 import { compose } from 'utils';
+import withSettingsActions from '../Settings/withSettingsActions';
 
 /**
  * Items actions bar.
@@ -42,6 +44,12 @@ function ItemsActionsBar({
 
   // #withAlertActions
   openAlert,
+
+  // #withSettings
+  itemsTableSize,
+
+  // #withSettingsActions
+  addSetting,
 }) {
   // Items list context.
   const { itemsViews, fields } = useItemsListContext();
@@ -72,10 +80,14 @@ function ItemsActionsBar({
     const checked = event.target.checked;
     setItemsTableState({ inactiveMode: checked });
   };
-
+  // Handle refresh button click.
   const handleRefreshBtnClick = () => {
     refresh();
   };
+  // Handle table row size change.
+  const handleTableRowSizeChange = (size) => {
+    addSetting('items', 'tableSize', size);
+  };
 
   return (
     <DashboardActionsBar>
@@ -131,6 +143,12 @@ function ItemsActionsBar({
           icon={<Icon icon="file-export-16" iconSize={16} />}
           text={<T id={'export'} />}
         />
+        <NavbarDivider />
+        <DashboardRowsHeightButton
+          initialValue={itemsTableSize}
+          onChange={handleTableRowSizeChange}
+        />
+        <NavbarDivider />
         <Switch
           labelElement={<T id={'inactive'} />}
           defaultChecked={itemsInactiveMode}
@@ -150,11 +168,15 @@ function ItemsActionsBar({
 }
 
 export default compose(
+  withSettingsActions,
   withItems(({ itemsSelectedRows, itemsTableState }) => ({
     itemsSelectedRows,
     itemsInactiveMode: itemsTableState.inactiveMode,
     itemsFilterRoles: itemsTableState.filterRoles,
   })),
+  withSettings(({ itemsSettings }) => ({
+    itemsTableSize: itemsSettings.tableSize,
+  })),
   withItemsActions,
   withAlertActions,
 )(ItemsActionsBar);

src/containers/Items/ItemsDataTable.js

@@ -10,11 +10,11 @@ import TableSkeletonHeader from 'components/Datatable/TableHeaderSkeleton';
 
 import { TABLES } from 'common/tables';
 
-import withItems from 'containers/Items/withItems';
 import withItemsActions from 'containers/Items/withItemsActions';
 import withAlertsActions from 'containers/Alert/withAlertActions';
 import withDialogActions from 'containers/Dialog/withDialogActions';
 import withDrawerActions from 'containers/Drawer/withDrawerActions';
+import withSettings from '../Settings/withSettings';
 
 import { useItemsListContext } from './ItemsListProvider';
 import { useItemsTableColumns, ItemsActionMenuList } from './components';
@@ -37,8 +37,8 @@ function ItemsDataTable({
   // #withDrawerActions
   openDrawer,
 
-  // #withItems
-  itemsTableState,
+  // #withSettings
+  itemsTableSize,
 
   // #ownProps
   tableProps,
@@ -146,6 +146,7 @@ function ItemsDataTable({
         onCellClick={handleCellClick}
         initialColumnsWidths={initialColumnsWidths}
         onColumnResizing={handleColumnResizing}
+        size={itemsTableSize}
         payload={{
           onDeleteItem: handleDeleteItem,
           onEditItem: handleEditItem,
@@ -167,5 +168,7 @@ export default compose(
   withAlertsActions,
   withDrawerActions,
   withDialogActions,
-  withItems(({ itemsTableState }) => ({ itemsTableState })),
+  withSettings(({ itemsSettings }) => ({
+    itemsTableSize: itemsSettings.tableSize,
+  })),
 )(ItemsDataTable);