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

src/containers/Sales/Estimates/EstimatesLanding/EstimatesActionsBar.js

@@ -9,19 +9,23 @@ import {
   Alignment,
 } from '@blueprintjs/core';
 import { useHistory } from 'react-router-dom';
-import { FormattedMessage as T } from 'components';
 
 import {
+  FormattedMessage as T,
   AdvancedFilterPopover,
   If,
   DashboardActionViewsList,
   DashboardFilterButton,
+  DashboardRowsHeightButton,
 } from 'components';
 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
 
 import withEstimatesActions from './withEstimatesActions';
 import withEstimates from './withEstimates';
 
+import withSettingsActions from 'containers/Settings/withSettingsActions';
+import withSettings from 'containers/Settings/withSettings';
+
 import { useEstimatesListContext } from './EstimatesListProvider';
 import { useRefreshEstimates } from 'hooks/query/estimates';
 
@@ -36,6 +40,12 @@ function EstimateActionsBar({
 
   // #withEstimates
   estimatesFilterRoles,
+
+  // #withSettings
+  estimatesTableSize,
+
+  // #withSettingsActions
+  addSetting,
 }) {
   const history = useHistory();
 
@@ -61,6 +71,11 @@ function EstimateActionsBar({
     refresh();
   };
 
+  // Handle table row size change.
+  const handleTableRowSizeChange = (size) => {
+    addSetting('estimate', 'tableSize', size);
+  };
+
   return (
     <DashboardActionsBar>
       <NavbarGroup>
@@ -118,7 +133,14 @@ function EstimateActionsBar({
           icon={<Icon icon={'file-export-16'} iconSize={'16'} />}
           text={<T id={'export'} />}
         />
+        <NavbarDivider />
+        <DashboardRowsHeightButton
+          initialValue={estimatesTableSize}
+          onChange={handleTableRowSizeChange}
+        />
+        <NavbarDivider />
       </NavbarGroup>
+
       <NavbarGroup align={Alignment.RIGHT}>
         <Button
           className={Classes.MINIMAL}
@@ -132,7 +154,11 @@ function EstimateActionsBar({
 
 export default compose(
   withEstimatesActions,
+  withSettingsActions,
   withEstimates(({ estimatesTableState }) => ({
     estimatesFilterRoles: estimatesTableState.filterRoles,
   })),
+  withSettings(({ estimatesSettings }) => ({
+    estimatesTableSize: estimatesSettings?.tableSize,
+  })),
 )(EstimateActionsBar);

src/containers/Sales/Invoices/InvoicesLanding/InvoicesActionsBar.js

@@ -13,6 +13,7 @@ import {
   FormattedMessage as T,
   AdvancedFilterPopover,
   DashboardFilterButton,
+  DashboardRowsHeightButton,
 } from 'components';
 
 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
@@ -22,6 +23,8 @@ import { If, DashboardActionViewsList } from 'components';
 import { useRefreshInvoices } from 'hooks/query/invoices';
 import { useInvoicesListContext } from './InvoicesListProvider';
 
+import withSettingsActions from 'containers/Settings/withSettingsActions';
+import withSettings from 'containers/Settings/withSettings';
 import withInvoiceActions from './withInvoiceActions';
 import withInvoices from './withInvoices';
 
@@ -36,6 +39,12 @@ function InvoiceActionsBar({
 
   // #withInvoices
   invoicesFilterRoles,
+
+  // #withSettings
+  invoicesTableSize,
+
+  // #withSettingsActions
+  addSetting,
 }) {
   const history = useHistory();
 
@@ -60,6 +69,11 @@ function InvoiceActionsBar({
     refresh();
   };
 
+  // Handle table row size change.
+  const handleTableRowSizeChange = (size) => {
+    addSetting('invoice', 'tableSize', size);
+  };
+
   return (
     <DashboardActionsBar>
       <NavbarGroup>
@@ -114,6 +128,12 @@ function InvoiceActionsBar({
           icon={<Icon icon={'file-export-16'} iconSize={'16'} />}
           text={<T id={'export'} />}
         />
+        <NavbarDivider />
+        <DashboardRowsHeightButton
+          initialValue={invoicesTableSize}
+          onChange={handleTableRowSizeChange}
+        />
+        <NavbarDivider />
       </NavbarGroup>
       <NavbarGroup align={Alignment.RIGHT}>
         <Button
@@ -128,7 +148,11 @@ function InvoiceActionsBar({
 
 export default compose(
   withInvoiceActions,
+  withSettingsActions,
   withInvoices(({ invoicesTableState }) => ({
     invoicesFilterRoles: invoicesTableState.filterRoles,
   })),
+  withSettings(({ invoiceSettings }) => ({
+    invoicesTableSize: invoiceSettings?.tableSize,
+  })),
 )(InvoiceActionsBar);

src/containers/Sales/PaymentReceives/PaymentsLanding/PaymentReceiveActionsBar.js

@@ -14,6 +14,7 @@ import {
   DashboardFilterButton,
   AdvancedFilterPopover,
   FormattedMessage as T,
+  DashboardRowsHeightButton,
 } from 'components';
 
 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
@@ -23,6 +24,9 @@ import { If, DashboardActionViewsList } from 'components';
 import withPaymentReceivesActions from './withPaymentReceivesActions';
 import withPaymentReceives from './withPaymentReceives';
 
+import withSettingsActions from 'containers/Settings/withSettingsActions';
+import withSettings from 'containers/Settings/withSettings';
+
 import { compose } from 'utils';
 import { usePaymentReceivesListContext } from './PaymentReceiptsListProvider';
 import { useRefreshPaymentReceive } from 'hooks/query/paymentReceives';
@@ -35,7 +39,13 @@ function PaymentReceiveActionsBar({
   setPaymentReceivesTableState,
 
   // #withPaymentReceives
-  paymentFilterConditions
+  paymentFilterConditions,
+
+  // #withSettings
+  paymentReceivesTableSize,
+
+  // #withSettingsActions
+  addSetting,
 }) {
   // History context.
   const history = useHistory();
@@ -61,6 +71,11 @@ function PaymentReceiveActionsBar({
     refresh();
   };
 
+  // Handle table row size change.
+  const handleTableRowSizeChange = (size) => {
+    addSetting('payment_receive', 'tableSize', size);
+  };
+
   return (
     <DashboardActionsBar>
       <NavbarGroup>
@@ -115,6 +130,13 @@ function PaymentReceiveActionsBar({
           icon={<Icon icon={'file-export-16'} iconSize={'16'} />}
           text={<T id={'export'} />}
         />
+
+        <NavbarDivider />
+        <DashboardRowsHeightButton
+          initialValue={paymentReceivesTableSize}
+          onChange={handleTableRowSizeChange}
+        />
+        <NavbarDivider />
       </NavbarGroup>
       <NavbarGroup align={Alignment.RIGHT}>
         <Button
@@ -129,8 +151,12 @@ function PaymentReceiveActionsBar({
 
 export default compose(
   withPaymentReceivesActions,
+  withSettingsActions,
   withPaymentReceives(({ paymentReceivesTableState }) => ({
     paymentReceivesTableState,
     paymentFilterConditions: paymentReceivesTableState.filterRoles,
   })),
+  withSettings(({ paymentReceiveSettings }) => ({
+    paymentReceivesTableSize: paymentReceiveSettings?.tableSize,
+  })),
 )(PaymentReceiveActionsBar);

src/containers/Sales/Receipts/ReceiptsLanding/ReceiptActionsBar.js

@@ -14,6 +14,7 @@ import {
   AdvancedFilterPopover,
   DashboardFilterButton,
   FormattedMessage as T,
+  DashboardRowsHeightButton,
 } from 'components';
 
 import { If, DashboardActionViewsList } from 'components';
@@ -22,6 +23,9 @@ import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
 import withReceiptsActions from './withReceiptsActions';
 import withReceipts from './withReceipts';
 
+import withSettingsActions from 'containers/Settings/withSettingsActions';
+import withSettings from 'containers/Settings/withSettings';
+
 import { useReceiptsListContext } from './ReceiptsListProvider';
 import { useRefreshReceipts } from 'hooks/query/receipts';
 import { compose } from 'utils';
@@ -35,6 +39,12 @@ function ReceiptActionsBar({
 
   // #withReceipts
   receiptsFilterConditions,
+
+  // #withSettings
+  receiptsTableSize,
+
+  // #withSettingsActions
+  addSetting,
 }) {
   const history = useHistory();
 
@@ -60,6 +70,11 @@ function ReceiptActionsBar({
     refresh();
   };
 
+  // Handle table row size change.
+  const handleTableRowSizeChange = (size) => {
+    addSetting('receipt', 'tableSize', size);
+  };
+
   return (
     <DashboardActionsBar>
       <NavbarGroup>
@@ -117,6 +132,13 @@ function ReceiptActionsBar({
           icon={<Icon icon={'file-export-16'} iconSize={'16'} />}
           text={<T id={'export'} />}
         />
+
+        <NavbarDivider />
+        <DashboardRowsHeightButton
+          initialValue={receiptsTableSize}
+          onChange={handleTableRowSizeChange}
+        />
+        <NavbarDivider />
       </NavbarGroup>
       <NavbarGroup align={Alignment.RIGHT}>
         <Button
@@ -131,7 +153,11 @@ function ReceiptActionsBar({
 
 export default compose(
   withReceiptsActions,
+  withSettingsActions,
   withReceipts(({ receiptTableState }) => ({
     receiptsFilterConditions: receiptTableState.filterRoles,
   })),
+  withSettings(({ receiptSettings }) => ({
+    receiptsTableSize: receiptSettings?.tableSize,
+  })),
 )(ReceiptActionsBar);