diff --git a/packages/desktop-client/src/components/accounts/Account.js b/packages/desktop-client/src/components/accounts/Account.js index 1d9a66241818bce506c5c820c003edc912c313b4..1d619e439545a7ae900587e26012aae08b63682c 100644 --- a/packages/desktop-client/src/components/accounts/Account.js +++ b/packages/desktop-client/src/components/accounts/Account.js @@ -252,6 +252,7 @@ function AccountMenu({ syncEnabled, showBalances, canShowBalances, + showCleared, onClose, onReconcile, onMenuSelect, @@ -279,6 +280,10 @@ function AccountMenu({ name: 'toggle-balance', text: (showBalances ? 'Hide' : 'Show') + ' Running Balance', }, + { + name: 'toggle-cleared', + text: (showCleared ? 'Hide' : 'Show') + ' "Cleared" Checkboxes', + }, { name: 'export', text: 'Export' }, { name: 'reconcile', text: 'Reconcile' }, syncEnabled && @@ -612,6 +617,7 @@ const AccountHeader = React.memo( syncEnabled, showBalances, showExtraBalances, + showCleared, showEmptyMessage, balanceQuery, reconcileAmount, @@ -889,6 +895,7 @@ const AccountHeader = React.memo( syncEnabled={syncEnabled} canShowBalances={canCalculateBalance()} showBalances={showBalances} + showCleared={showCleared} onMenuSelect={item => { setMenuOpen(false); onMenuSelect(item); @@ -996,6 +1003,7 @@ class AccountInternal extends React.PureComponent { transactionsCount: 0, showBalances: props.showBalances, balances: [], + showCleared: props.showCleared, editingName: false, isAdding: false, latestDate: null, @@ -1202,6 +1210,7 @@ class AccountInternal extends React.PureComponent { search: '', showBalances: nextProps.showBalances, balances: [], + showCleared: nextProps.showCleared, }, () => { this.fetchTransactions(); @@ -1379,6 +1388,15 @@ class AccountInternal extends React.PureComponent { this.calculateBalances(); } break; + case 'toggle-cleared': + if (this.state.showCleared) { + this.props.savePrefs({ ['hide-cleared-' + accountId]: true }); + this.setState({ showCleared: false }); + } else { + this.props.savePrefs({ ['hide-cleared-' + accountId]: false }); + this.setState({ showCleared: true }); + } + break; default: } }; @@ -1694,6 +1712,7 @@ class AccountInternal extends React.PureComponent { editingName, showBalances, balances, + showCleared, } = this.state; let account = accounts.find(account => account.id === accountId); @@ -1741,6 +1760,7 @@ class AccountInternal extends React.PureComponent { transactions={transactions} showBalances={showBalances} showExtraBalances={showExtraBalances} + showCleared={showCleared} showEmptyMessage={showEmptyMessage} balanceQuery={balanceQuery} syncEnabled={syncEnabled} @@ -1791,6 +1811,7 @@ class AccountInternal extends React.PureComponent { ? balances : null } + showCleared={showCleared} showAccount={ !accountId || accountId === 'offbudget' || @@ -1872,6 +1893,9 @@ export default function Account(props) { showBalances: props.match && state.prefs.local['show-balances-' + props.match.params.id], + showCleared: + props.match && + !state.prefs.local['hide-cleared-' + props.match.params.id], showExtraBalances: props.match && state.prefs.local['show-extra-balances-' + props.match.params.id], diff --git a/packages/desktop-client/src/components/accounts/TransactionList.js b/packages/desktop-client/src/components/accounts/TransactionList.js index 5e5011be9c61892b177d5640ef414ad5f1d1f051..e3050fa2a875f719f0e1b2e3ce32e7e6b9f8f7ca 100644 --- a/packages/desktop-client/src/components/accounts/TransactionList.js +++ b/packages/desktop-client/src/components/accounts/TransactionList.js @@ -62,6 +62,7 @@ export default function TransactionList({ categoryGroups, payees, balances, + showCleared, showAccount, headerContent, animated, @@ -159,6 +160,7 @@ export default function TransactionList({ categoryGroups={categoryGroups} payees={payees} balances={balances} + showCleared={showCleared} showAccount={showAccount} showCategory={true} animated={animated} diff --git a/packages/desktop-client/src/components/accounts/TransactionsTable.js b/packages/desktop-client/src/components/accounts/TransactionsTable.js index e059ee2ae07ed6c9728c43620dda438779620609..0d5a3d50d514e9e827014a448ef581725e6f7ffc 100644 --- a/packages/desktop-client/src/components/accounts/TransactionsTable.js +++ b/packages/desktop-client/src/components/accounts/TransactionsTable.js @@ -248,7 +248,7 @@ export function SplitsExpandedProvider({ children, initialMode = 'expand' }) { } export const TransactionHeader = React.memo( - ({ hasSelected, showAccount, showCategory, showBalance }) => { + ({ hasSelected, showAccount, showCategory, showBalance, showCleared }) => { let dispatchSelected = useSelectedDispatch(); return ( @@ -276,7 +276,7 @@ export const TransactionHeader = React.memo( <Cell value="Payment" width={80} textAlign="right" /> <Cell value="Deposit" width={80} textAlign="right" /> {showBalance && <Cell value="Balance" width={85} textAlign="right" />} - <Field width={21} truncate={false} /> + {showCleared && <Field width={21} truncate={false} />} <Cell value="" width={15 + styles.scrollbarWidth} /> </Row> ); @@ -507,6 +507,7 @@ export const Transaction = React.memo(function Transaction(props) { backgroundColor = 'white', showAccount, showBalance, + showCleared, showZeroInDeposit, style, hovered, @@ -1035,16 +1036,18 @@ export const Transaction = React.memo(function Transaction(props) { /> )} - <StatusCell - id={id} - focused={focusedField === 'cleared'} - selected={selected} - isPreview={isPreview} - status={isPreview ? notes : cleared ? 'cleared' : null} - isChild={isChild} - onEdit={onEdit} - onUpdate={onUpdate} - /> + {showCleared && ( + <StatusCell + id={id} + focused={focusedField === 'cleared'} + selected={selected} + isPreview={isPreview} + status={isPreview ? notes : cleared ? 'cleared' : null} + isChild={isChild} + onEdit={onEdit} + onUpdate={onUpdate} + /> + )} <Cell width={15} /> </Row> @@ -1124,6 +1127,7 @@ function NewTransaction({ showAccount, showCategory, showBalance, + showCleared, dateFormat, onHover, onClose, @@ -1163,6 +1167,7 @@ function NewTransaction({ showAccount={showAccount} showCategory={showCategory} showBalance={showBalance} + showCleared={showCleared} focusedField={editingTransaction === transaction.id && focusedField} showZeroInDeposit={isDeposit} accounts={accounts} @@ -1265,6 +1270,7 @@ class TransactionTable_ extends React.Component { accounts, categoryGroups, payees, + showCleared, showAccount, showCategory, balances, @@ -1317,6 +1323,7 @@ class TransactionTable_ extends React.Component { showAccount={showAccount} showCategory={showCategory} showBalance={!!balances} + showCleared={showCleared} hovered={hovered} selected={selected} highlighted={highlighted} @@ -1371,6 +1378,7 @@ class TransactionTable_ extends React.Component { showAccount={props.showAccount} showCategory={props.showCategory} showBalance={!!props.balances} + showCleared={props.showCleared} /> {props.isAdding && ( @@ -1391,6 +1399,7 @@ class TransactionTable_ extends React.Component { showAccount={props.showAccount} showCategory={props.showCategory} showBalance={!!props.balances} + showCleared={props.showCleared} dateFormat={dateFormat} onClose={props.onCloseAddTransaction} onAdd={this.props.onAddTemporary} diff --git a/packages/desktop-client/src/components/accounts/TransactionsTable.test.js b/packages/desktop-client/src/components/accounts/TransactionsTable.test.js index dd5d97c6209630a12d3222fd8f960fa8482ded35..7bfe0201ff3bba16515bea69cc32c8b0f2b9b3be 100644 --- a/packages/desktop-client/src/components/accounts/TransactionsTable.test.js +++ b/packages/desktop-client/src/components/accounts/TransactionsTable.test.js @@ -262,6 +262,7 @@ function renderTransactions(extraProps) { currentAccountId: accounts[0].id, showAccount: true, showCategory: true, + showCleared: true, isAdding: false, onTransactionsChange: t => { transactions = t;