From d305c7ad32757ecb1c8691dcc971d1d630dbacd2 Mon Sep 17 00:00:00 2001 From: Ahmed Bouhuolia Date: Wed, 26 Jun 2024 19:33:01 +0200 Subject: [PATCH] feat: toggle banking matching aside --- .../src/components/AppShell/AppShell.tsx | 26 ++++++++++++++-- .../components/AppShell/AppShellProvider.tsx | 31 ++++++++++++++----- .../AccountTransactionsList.tsx | 18 +++++++++-- .../AccountTransactionsUncategorizedTable.tsx | 12 ++++--- .../AllTransactionsUncategorized.tsx | 21 ++++++++++++- .../CategorizeTransactionBoot.tsx | 7 +---- .../CategorizeTransactionContent.tsx | 8 ++--- .../CategorizeTransactionFormFooter.tsx | 10 +++--- .../CategorizeTransactionAside.tsx | 22 +++++++++++-- .../CategorizeTransactionTabs.tsx | 8 ++--- .../src/containers/CashFlow/withBanking.ts | 15 +++++++++ .../containers/CashFlow/withBankingActions.ts | 30 ++++++++++++++++++ .../src/store/banking/banking.actions.ts | 21 +++++++++++++ .../src/store/banking/banking.reducer.ts | 30 ++++++++++++++++-- 14 files changed, 215 insertions(+), 44 deletions(-) create mode 100644 packages/webapp/src/containers/CashFlow/withBanking.ts create mode 100644 packages/webapp/src/containers/CashFlow/withBankingActions.ts create mode 100644 packages/webapp/src/store/banking/banking.actions.ts diff --git a/packages/webapp/src/components/AppShell/AppShell.tsx b/packages/webapp/src/components/AppShell/AppShell.tsx index 8539117c2..57a84133a 100644 --- a/packages/webapp/src/components/AppShell/AppShell.tsx +++ b/packages/webapp/src/components/AppShell/AppShell.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { AppShellProvider } from './AppShellProvider'; +import { AppShellProvider, useAppShellContext } from './AppShellProvider'; import { Box } from '../Layout'; import styles from './AppShell.module.scss'; @@ -8,16 +8,26 @@ interface AppShellProps { mainProps: any; asideProps: any; children: React.ReactNode; + hideAside?: boolean; + hideMain?: boolean; } export function AppShell({ asideProps, mainProps, topbarOffset = 0, + hideAside = false, + hideMain = false, ...restProps }: AppShellProps) { return ( - + ); @@ -27,6 +37,12 @@ AppShell.Main = AppShellMain; AppShell.Aside = AppShellAside; function AppShellMain({ ...props }) { + const { hideMain } = useAppShellContext(); + + if (hideMain === true) { + return null; + } + return ; } @@ -35,5 +51,11 @@ interface AppShellAsideProps { } function AppShellAside({ ...props }: AppShellAsideProps) { + const { hideAside } = useAppShellContext(); + + console.log(hideAside, 'hideAsidehideAsidehideAsidehideAside'); + if (hideAside === true) { + return null; + } return ; } diff --git a/packages/webapp/src/components/AppShell/AppShellProvider.tsx b/packages/webapp/src/components/AppShell/AppShellProvider.tsx index 299f015f4..8ac2a1ff0 100644 --- a/packages/webapp/src/components/AppShell/AppShellProvider.tsx +++ b/packages/webapp/src/components/AppShell/AppShellProvider.tsx @@ -1,22 +1,37 @@ +// @ts-nocheck import React, { createContext } from 'react'; -interface AppShellContextValue { - topbarOffset: number +interface ContentShellCommonValue { + mainProps: any; + asideProps: any; + topbarOffset: number; + hideAside: boolean; + hideMain: boolean; +} + +interface AppShellContextValue extends ContentShellCommonValue { + topbarOffset: number; } const AppShellContext = createContext( {} as AppShellContextValue, ); -interface AppShellProviderProps { +interface AppShellProviderProps extends ContentShellCommonValue { children: React.ReactNode; - mainProps: any; - asideProps: any; - topbarOffset: number; } -export function AppShellProvider({ topbarOffset, ...props }: AppShellProviderProps) { - const provider = { topbarOffset } as AppShellContextValue; +export function AppShellProvider({ + topbarOffset, + hideAside, + hideMain, + ...props +}: AppShellProviderProps) { + const provider = { + topbarOffset, + hideAside, + hideMain, + } as AppShellContextValue; return ; } diff --git a/packages/webapp/src/containers/CashFlow/AccountTransactions/AccountTransactionsList.tsx b/packages/webapp/src/containers/CashFlow/AccountTransactions/AccountTransactionsList.tsx index a6db2db7e..5f0d743ab 100644 --- a/packages/webapp/src/containers/CashFlow/AccountTransactions/AccountTransactionsList.tsx +++ b/packages/webapp/src/containers/CashFlow/AccountTransactions/AccountTransactionsList.tsx @@ -1,5 +1,6 @@ // @ts-nocheck import React, { Suspense } from 'react'; +import * as R from 'ramda'; import { Spinner } from '@blueprintjs/core'; import '@/style/pages/CashFlow/AccountTransactions/List.scss'; @@ -16,14 +17,18 @@ import { AccountTransactionsProgressBar } from './components'; import { AccountTransactionsFilterTabs } from './AccountTransactionsFilterTabs'; import { AppShell } from '@/components/AppShell/AppShell'; import { CategorizeTransactionAside } from '../CategorizeTransactionAside/CategorizeTransactionAside'; +import { withBanking } from '../withBanking'; /** * Account transactions list. */ -function AccountTransactionsList() { +function AccountTransactionsListRoot({ + // #withBanking + openMatchingTransactionAside, +}) { return ( - + @@ -46,7 +51,14 @@ function AccountTransactionsList() { ); } -export default AccountTransactionsList; +export default R.compose( + withBanking( + ({ selectedUncategorizedTransactionId, openMatchingTransactionAside }) => ({ + selectedUncategorizedTransactionId, + openMatchingTransactionAside, + }), + ), +)(AccountTransactionsListRoot); const AccountsTransactionsAll = React.lazy( () => import('./AccountsTransactionsAll'), diff --git a/packages/webapp/src/containers/CashFlow/AccountTransactions/AccountTransactionsUncategorizedTable.tsx b/packages/webapp/src/containers/CashFlow/AccountTransactions/AccountTransactionsUncategorizedTable.tsx index 8bd895198..a8abfa503 100644 --- a/packages/webapp/src/containers/CashFlow/AccountTransactions/AccountTransactionsUncategorizedTable.tsx +++ b/packages/webapp/src/containers/CashFlow/AccountTransactions/AccountTransactionsUncategorizedTable.tsx @@ -15,6 +15,7 @@ import { TABLES } from '@/constants/tables'; import withSettings from '@/containers/Settings/withSettings'; import withDrawerActions from '@/containers/Drawer/withDrawerActions'; +import { withBankingActions } from '../withBankingActions'; import { useMemorizedColumnsWidths } from '@/hooks'; import { @@ -24,7 +25,6 @@ import { import { useAccountUncategorizedTransactionsContext } from './AllTransactionsUncategorizedBoot'; import { compose } from '@/utils'; -import { DRAWERS } from '@/constants/drawers'; import { useExcludeUncategorizedTransaction } from '@/hooks/query/bank-rules'; import { Intent } from '@blueprintjs/core'; @@ -35,6 +35,9 @@ function AccountTransactionsDataTable({ // #withSettings cashflowTansactionsTableSize, + // #withBankingActions + setUncategorizedTransactionIdForMatching, + // #withDrawerActions openDrawer, }) { @@ -53,10 +56,8 @@ function AccountTransactionsDataTable({ useMemorizedColumnsWidths(TABLES.UNCATEGORIZED_CASHFLOW_TRANSACTION); // Handle cell click. - const handleCellClick = (cell, event) => { - openDrawer(DRAWERS.CATEGORIZE_TRANSACTION, { - uncategorizedTransactionId: cell.row.original.id, - }); + const handleCellClick = (cell) => { + setUncategorizedTransactionIdForMatching(cell.row.original.id); }; // Handle exclude transaction. const handleExcludeTransaction = (transaction) => { @@ -111,6 +112,7 @@ export default compose( cashflowTansactionsTableSize: cashflowTransactionsSettings?.tableSize, })), withDrawerActions, + withBankingActions, )(AccountTransactionsDataTable); const DashboardConstrantTable = styled(DataTable)` diff --git a/packages/webapp/src/containers/CashFlow/AccountTransactions/AllTransactionsUncategorized.tsx b/packages/webapp/src/containers/CashFlow/AccountTransactions/AllTransactionsUncategorized.tsx index 716712a0d..182dd7541 100644 --- a/packages/webapp/src/containers/CashFlow/AccountTransactions/AllTransactionsUncategorized.tsx +++ b/packages/webapp/src/containers/CashFlow/AccountTransactions/AllTransactionsUncategorized.tsx @@ -1,10 +1,16 @@ // @ts-nocheck import styled from 'styled-components'; +import * as R from 'ramda'; import '@/style/pages/CashFlow/AccountTransactions/List.scss'; import AccountTransactionsUncategorizedTable from './AccountTransactionsUncategorizedTable'; import { AccountUncategorizedTransactionsBoot } from './AllTransactionsUncategorizedBoot'; +import { + WithBankingActionsProps, + withBankingActions, +} from '../withBankingActions'; +import { useEffect } from 'react'; const Box = styled.div` margin: 30px 15px; @@ -18,7 +24,18 @@ const CashflowTransactionsTableCard = styled.div` flex: 0 1; `; -export default function AllTransactionsUncategorized() { +interface AllTransactionsUncategorizedProps extends WithBankingActionsProps {} + +function AllTransactionsUncategorizedRoot({ + // #withBankingActions + closeMatchingTransactionAside, +}: AllTransactionsUncategorizedProps) { + useEffect( + () => () => { + closeMatchingTransactionAside(); + }, + [closeMatchingTransactionAside], + ); return ( @@ -29,3 +46,5 @@ export default function AllTransactionsUncategorized() { ); } + +export default R.compose(withBankingActions)(AllTransactionsUncategorizedRoot); diff --git a/packages/webapp/src/containers/CashFlow/CategorizeTransaction/drawers/CategorizeTransactionDrawer/CategorizeTransactionBoot.tsx b/packages/webapp/src/containers/CashFlow/CategorizeTransaction/drawers/CategorizeTransactionDrawer/CategorizeTransactionBoot.tsx index dbd9e00fc..1f7515066 100644 --- a/packages/webapp/src/containers/CashFlow/CategorizeTransaction/drawers/CategorizeTransactionDrawer/CategorizeTransactionBoot.tsx +++ b/packages/webapp/src/containers/CashFlow/CategorizeTransaction/drawers/CategorizeTransactionDrawer/CategorizeTransactionBoot.tsx @@ -1,8 +1,7 @@ // @ts-nocheck import React, { useMemo } from 'react'; import { first } from 'lodash'; -import { DrawerHeaderContent, DrawerLoading } from '@/components'; -import { DRAWERS } from '@/constants/drawers'; +import { DrawerLoading } from '@/components'; import { useAccounts, useBranches, @@ -56,10 +55,6 @@ function CategorizeTransactionBoot({ uncategorizedTransactionId, ...props }) { return ( - ); diff --git a/packages/webapp/src/containers/CashFlow/CategorizeTransaction/drawers/CategorizeTransactionDrawer/CategorizeTransactionContent.tsx b/packages/webapp/src/containers/CashFlow/CategorizeTransaction/drawers/CategorizeTransactionDrawer/CategorizeTransactionContent.tsx index 7716e8beb..c3b3413b9 100644 --- a/packages/webapp/src/containers/CashFlow/CategorizeTransaction/drawers/CategorizeTransactionDrawer/CategorizeTransactionContent.tsx +++ b/packages/webapp/src/containers/CashFlow/CategorizeTransaction/drawers/CategorizeTransactionDrawer/CategorizeTransactionContent.tsx @@ -4,9 +4,9 @@ import { DrawerBody } from '@/components'; import { CategorizeTransactionBoot } from './CategorizeTransactionBoot'; import { CategorizeTransactionForm } from './CategorizeTransactionForm'; -export default function CategorizeTransactionContent({ - uncategorizedTransactionId, -}) { +export function CategorizeTransactionContent({}) { + const uncategorizedTransactionId = 4; + return ( { + closeMatchingTransactionAside(); + }; -export function CategorizeTransactionAside() { return ( -