Merge branch 'develop' into ui-tweaks

2026-02-18 13:50:31 +00:00 · 2024-09-04 09:53:55 +02:00
parent 1b51742c36 b6783eb22e
commit e3532098b2
11 changed files with 244 additions and 68 deletions
--- a/packages/webapp/src/containers/CashFlow/AccountTransactions/AccountTransactionsActionsBar.tsx
+++ b/packages/webapp/src/containers/CashFlow/AccountTransactions/AccountTransactionsActionsBar.tsx
@@ -34,21 +34,23 @@ import {
 } from '@/constants/cashflowOptions';
 import { useRefreshCashflowTransactions } from '@/hooks/query';
 import { useAccountTransactionsContext } from './AccountTransactionsProvider';
+import { useMediaQuery } from '@/hooks/useMediaQuery';
+import { useAppShellContext } from '@/components/AppShell/AppContentShell/AppContentShellProvider';

 import withDialogActions from '@/containers/Dialog/withDialogActions';
 import withSettings from '@/containers/Settings/withSettings';
 import withSettingsActions from '@/containers/Settings/withSettingsActions';
-
-import { compose } from '@/utils';
+import { withBankingActions } from '../withBankingActions';
+import { withBanking } from '../withBanking';
+import withAlertActions from '@/containers/Alert/withAlertActions';
 import {
  useUpdateBankAccount,
  useExcludeUncategorizedTransactions,
  useUnexcludeUncategorizedTransactions,
 } from '@/hooks/query/bank-rules';
-import { withBankingActions } from '../withBankingActions';
-import { withBanking } from '../withBanking';
-import withAlertActions from '@/containers/Alert/withAlertActions';
+
 import { DialogsName } from '@/constants/dialogs';
+import { compose } from '@/utils';

 function AccountTransactionsActionsBar({
  // #withDialogActions
@@ -221,6 +223,13 @@ function AccountTransactionsActionsBar({
    });
  };

+  const { hideAside } = useAppShellContext();
+  const isMin1350Query = useMediaQuery('(min-width: 1350px)');
+
+  // Shrink actions to dropdown if the aside is open and matched the media query,
+  // To avoid actions overflow in small screens.
+  const shrinkActions = !hideAside && !isMin1350Query;
+
  return (
    <DashboardActionsBar>
      <NavbarGroup>
@@ -241,23 +250,27 @@ function AccountTransactionsActionsBar({
          }}
        />
        <NavbarDivider />
-        <Button
-          className={Classes.MINIMAL}
-          icon={<Icon icon="print-16" iconSize={16} />}
-          text={<T id={'print'} />}
-        />
-        <Button
-          className={Classes.MINIMAL}
-          icon={<Icon icon="file-export-16" iconSize={16} />}
-          text={<T id={'export'} />}
-        />
-        <Button
-          className={Classes.MINIMAL}
-          icon={<Icon icon="file-import-16" iconSize={16} />}
-          text={<T id={'import'} />}
-          onClick={handleImportBtnClick}
-        />
-        <NavbarDivider />
+
+        <If condition={!shrinkActions}>
+          <Button
+            className={Classes.MINIMAL}
+            icon={<Icon icon="print-16" iconSize={16} />}
+            text={<T id={'print'} />}
+          />
+          <Button
+            className={Classes.MINIMAL}
+            icon={<Icon icon="file-export-16" iconSize={16} />}
+            text={<T id={'export'} />}
+          />
+          <Button
+            className={Classes.MINIMAL}
+            icon={<Icon icon="file-import-16" iconSize={16} />}
+            text={<T id={'import'} />}
+            onClick={handleImportBtnClick}
+          />
+          <NavbarDivider />
+        </If>
+
        <DashboardRowsHeightButton
          initialValue={cashflowTansactionsTableSize}
          onChange={handleTableRowSizeChange}
@@ -290,6 +303,40 @@ function AccountTransactionsActionsBar({
          </Tooltip>
        </If>

+        <If condition={shrinkActions}>
+          <NavbarDivider />
+          <Popover
+            minimal={true}
+            interactionKind={PopoverInteractionKind.CLICK}
+            position={Position.BOTTOM_LEFT}
+            modifiers={{
+              offset: { offset: '0, 4' },
+            }}
+            content={
+              <Menu>
+                <MenuItem
+                  icon={<Icon icon="print-16" iconSize={16} />}
+                  text={<T id={'print'} />}
+                />
+                <MenuItem
+                  icon={<Icon icon="file-export-16" iconSize={16} />}
+                  text={<T id={'export'} />}
+                />
+                <MenuItem
+                  icon={<Icon icon="file-import-16" iconSize={16} />}
+                  text={<T id={'import'} />}
+                  onClick={handleImportBtnClick}
+                />
+              </Menu>
+            }
+          >
+            <Button
+              icon={<Icon icon="more-h-16" iconSize={16} />}
+              minimal={true}
+            />
+          </Popover>
+        </If>
+
        {!isEmpty(uncategorizedTransationsIdsSelected) && (
          <Button
            icon={<Icon icon="disable" iconSize={16} />}
@@ -368,7 +415,6 @@ function AccountTransactionsActionsBar({
              </If>

              <MenuItem onClick={handleBankRulesClick} text={'Bank rules'} />
-
              <MenuDivider />
              <If condition={isSyncingOwner && isFeedsActive}>
                <MenuItem
--- a/packages/webapp/src/containers/CashFlow/AccountTransactions/AccountTransactionsAside.tsx
+++ b/packages/webapp/src/containers/CashFlow/AccountTransactions/AccountTransactionsAside.tsx
@@ -0,0 +1,20 @@
+// @ts-nocheck
+import { Suspense, lazy } from 'react';
+import { Spinner } from '@blueprintjs/core';
+import { AppContentShell } from '@/components/AppShell';
+
+const CategorizeTransactionAside = lazy(() =>
+  import('../CategorizeTransactionAside/CategorizeTransactionAside').then(
+    (module) => ({ default: module.CategorizeTransactionAside }),
+  ),
+);
+
+export function AccountTransactionsAside() {
+  return (
+    <AppContentShell.Aside>
+      <Suspense fallback={<Spinner size={20} />}>
+        <CategorizeTransactionAside />
+      </Suspense>
+    </AppContentShell.Aside>
+  );
+}
--- a/packages/webapp/src/containers/CashFlow/AccountTransactions/AccountTransactionsDetailsBar.tsx
+++ b/packages/webapp/src/containers/CashFlow/AccountTransactions/AccountTransactionsDetailsBar.tsx
@@ -2,6 +2,8 @@
 import React from 'react';
 import intl from 'react-intl-universal';
 import styled from 'styled-components';
+import { curry } from 'lodash/fp';
+import { useHistory } from 'react-router-dom';
 import {
  Popover,
  Menu,
@@ -11,10 +13,9 @@ import {
  Classes,
 } from '@blueprintjs/core';
 import { Icon } from '@/components';
-import { useHistory } from 'react-router-dom';
-import { curry } from 'lodash/fp';

 import { useAccountTransactionsContext } from './AccountTransactionsProvider';
+import { useAppShellContext } from '@/components/AppShell/AppContentShell/AppContentShellProvider';

 function AccountSwitchButton() {
  const { currentAccount } = useAccountTransactionsContext();
@@ -22,7 +23,7 @@ function AccountSwitchButton() {
  return (
    <AccountSwitchButtonBase
      minimal={true}
-      rightIcon={<Icon icon={'arrow-drop-down'} iconSize={24} />}
+      rightIcon={<Icon icon={'caret-down-16'} iconSize={16} />}
    >
      <AccountSwitchText>{currentAccount.name}</AccountSwitchText>
    </AccountSwitchButtonBase>
@@ -110,12 +111,16 @@ function AccountTransactionsDetailsBarSkeleton() {
 }

 function AccountTransactionsDetailsContent() {
+  const { hideAside } = useAppShellContext();
+
  return (
    <React.Fragment>
      <AccountSwitchItem />
-      <AccountNumberItem />
+
+      {/** Hide some details once the aside opens to preserve space on details bar. */}
+      {hideAside && <AccountNumberItem />}
      <AccountBalanceItem />
-      <AccountBankBalanceItem />
+      {hideAside && <AccountBankBalanceItem />}
    </React.Fragment>
  );
 }
--- a/packages/webapp/src/containers/CashFlow/AccountTransactions/AccountTransactionsList.tsx
+++ b/packages/webapp/src/containers/CashFlow/AccountTransactions/AccountTransactionsList.tsx
@@ -1,7 +1,7 @@
 // @ts-nocheck
-import React, { Suspense } from 'react';
 import * as R from 'ramda';
 import { Spinner } from '@blueprintjs/core';
+import { Suspense, lazy } from 'react';

 import '@/style/pages/CashFlow/AccountTransactions/List.scss';

@@ -15,7 +15,7 @@ import {
 import { AccountTransactionsDetailsBar } from './AccountTransactionsDetailsBar';
 import { AccountTransactionsFilterTabs } from './AccountTransactionsFilterTabs';
 import { AppContentShell } from '@/components/AppShell';
-import { CategorizeTransactionAside } from '../CategorizeTransactionAside/CategorizeTransactionAside';
+import { AccountTransactionsAside } from './AccountTransactionsAside';
 import { AccountTransactionsLoadingBar } from './components';
 import { withBanking } from '../withBanking';

@@ -56,14 +56,6 @@ function AccountTransactionsMain() {
  );
 }

-function AccountTransactionsAside() {
-  return (
-    <AppContentShell.Aside>
-      <CategorizeTransactionAside />
-    </AppContentShell.Aside>
-  );
-}
-
 export default R.compose(
  withBanking(
    ({ selectedUncategorizedTransactionId, openMatchingTransactionAside }) => ({
@@ -73,11 +65,8 @@ export default R.compose(
  ),
 )(AccountTransactionsListRoot);

-const AccountsTransactionsAll = React.lazy(
-  () => import('./AccountsTransactionsAll'),
-);
-
-const AccountsTransactionsUncategorized = React.lazy(
+const AccountsTransactionsAll = lazy(() => import('./AccountsTransactionsAll'));
+const AccountsTransactionsUncategorized = lazy(
  () => import('./AllTransactionsUncategorized'),
 );

--- a/packages/webapp/src/containers/CashFlow/CategorizeTransaction/drawers/CategorizeTransactionDrawer/CategorizeTransactionContent.tsx
+++ b/packages/webapp/src/containers/CashFlow/CategorizeTransaction/drawers/CategorizeTransactionDrawer/CategorizeTransactionContent.tsx
@@ -1,6 +1,8 @@
 // @ts-nocheck
+import { Suspense } from 'react';
 import styled from 'styled-components';
 import * as R from 'ramda';
+import { Spinner } from '@blueprintjs/core';
 import { CategorizeTransactionBoot } from './CategorizeTransactionBoot';
 import { CategorizeTransactionForm } from './CategorizeTransactionForm';
 import { withBanking } from '@/containers/CashFlow/withBanking';
@@ -13,7 +15,9 @@ function CategorizeTransactionContentRoot({
      uncategorizedTransactionsIds={transactionsToCategorizeIdsSelected}
    >
      <CategorizeTransactionDrawerBody>
-        <CategorizeTransactionForm />
+        <Suspense fallback={<Spinner size={40} />}>
+          <CategorizeTransactionForm />
+        </Suspense>
      </CategorizeTransactionDrawerBody>
    </CategorizeTransactionBoot>
  );
--- a/packages/webapp/src/containers/CashFlow/CategorizeTransactionAside/MatchingTransactionBoot.tsx
+++ b/packages/webapp/src/containers/CashFlow/CategorizeTransactionAside/MatchingTransactionBoot.tsx
@@ -2,6 +2,7 @@ import React, { createContext } from 'react';
 import { defaultTo } from 'lodash';
 import * as R from 'ramda';
 import { useGetBankTransactionsMatches } from '@/hooks/query/bank-rules';
+import { Spinner } from '@blueprintjs/core';

 interface MatchingTransactionBootValues {
  isMatchingTransactionsLoading: boolean;
@@ -52,6 +53,11 @@ function MatchingTransactionBoot({
    matches,
  } as MatchingTransactionBootValues;

+  const isLoading = isMatchingTransactionsLoading;
+
+  if (isLoading) {
+    return <Spinner size={40} />;
+  }
  return <RuleFormBootContext.Provider value={provider} {...props} />;
 }