From e850f0f5a224bd9374bd023e572a972e47cbc96b Mon Sep 17 00:00:00 2001 From: Joel Jeremy Marquez Date: Thu, 4 Apr 2024 12:33:39 -0700 Subject: [PATCH] Display balances in category autocomplete --- .../desktop-client/src/components/Modals.tsx | 20 +++++--- .../autocomplete/CategoryAutocomplete.tsx | 46 +++++++++++++++++-- .../mobile/transactions/TransactionEdit.jsx | 4 +- .../transactions/TransactionsTable.jsx | 34 ++++++++------ .../src/client/state-types/modals.d.ts | 1 + 5 files changed, 80 insertions(+), 25 deletions(-) diff --git a/packages/desktop-client/src/components/Modals.tsx b/packages/desktop-client/src/components/Modals.tsx index bcc1ade800f..6aad2c25ee6 100644 --- a/packages/desktop-client/src/components/Modals.tsx +++ b/packages/desktop-client/src/components/Modals.tsx @@ -6,6 +6,7 @@ import { useLocation } from 'react-router-dom'; import { type State } from 'loot-core/src/client/state-types'; import { type PopModalAction } from 'loot-core/src/client/state-types/modals'; import { send } from 'loot-core/src/platform/client/fetch'; +import * as monthUtils from 'loot-core/src/shared/months'; import { useActions } from '../hooks/useActions'; import { useSyncServerStatus } from '../hooks/useSyncServerStatus'; @@ -40,6 +41,7 @@ import { DiscoverSchedules } from './schedules/DiscoverSchedules'; import { PostsOfflineNotification } from './schedules/PostsOfflineNotification'; import { ScheduleDetails } from './schedules/ScheduleDetails'; import { ScheduleLink } from './schedules/ScheduleLink'; +import { NamespaceContext } from './spreadsheet/NamespaceContext'; export type CommonModalProps = { onClose: () => PopModalAction; @@ -246,13 +248,17 @@ export function Modals() { case 'edit-field': return ( - + + + ); case 'new-category': diff --git a/packages/desktop-client/src/components/autocomplete/CategoryAutocomplete.tsx b/packages/desktop-client/src/components/autocomplete/CategoryAutocomplete.tsx index fc2617b930f..7b21c356057 100644 --- a/packages/desktop-client/src/components/autocomplete/CategoryAutocomplete.tsx +++ b/packages/desktop-client/src/components/autocomplete/CategoryAutocomplete.tsx @@ -11,17 +11,22 @@ import React, { import { css } from 'glamor'; +import { reportBudget, rolloverBudget } from 'loot-core/client/queries'; +import { integerToCurrency } from 'loot-core/shared/util'; import { type CategoryEntity, type CategoryGroupEntity, } from 'loot-core/src/types/models'; +import { useLocalPref } from '../../hooks/useLocalPref'; import { SvgSplit } from '../../icons/v0'; import { useResponsive } from '../../ResponsiveProvider'; import { type CSSProperties, theme, styles } from '../../style'; +import { makeAmountFullStyle } from '../budget/util'; import { Text } from '../common/Text'; import { TextOneLine } from '../common/TextOneLine'; import { View } from '../common/View'; +import { useSheetValue } from '../spreadsheet/useSheetValue'; import { Autocomplete, defaultFilterSuggestion } from './Autocomplete'; import { ItemHeader } from './ItemHeader'; @@ -59,6 +64,7 @@ function CategoryList({ renderCategoryItemGroupHeader = defaultRenderCategoryItemGroupHeader, renderCategoryItem = defaultRenderCategoryItem, showHiddenItems, + showBalances, }: CategoryListProps) { let lastGroup: string | undefined | null = null; @@ -111,6 +117,7 @@ function CategoryList({ ...(showHiddenItems && item.hidden && { color: theme.pageTextSubdued }), }, + showBalances, })} @@ -126,6 +133,7 @@ type CategoryAutocompleteProps = ComponentProps< typeof Autocomplete > & { categoryGroups: Array; + showBalances?: boolean; showSplitOption?: boolean; renderSplitTransactionButton?: ( props: ComponentPropsWithoutRef, @@ -141,6 +149,7 @@ type CategoryAutocompleteProps = ComponentProps< export function CategoryAutocomplete({ categoryGroups, + showBalances = true, showSplitOption, embedded, closeOnBlur, @@ -200,6 +209,7 @@ export function CategoryAutocomplete({ renderCategoryItemGroupHeader={renderCategoryItemGroupHeader} renderCategoryItem={renderCategoryItem} showHiddenItems={showHiddenCategories} + showBalances={showBalances} /> )} {...props} @@ -295,6 +305,7 @@ type CategoryItemProps = { style?: CSSProperties; highlighted?: boolean; embedded?: boolean; + showBalances?: boolean; }; export function CategoryItem({ @@ -303,6 +314,7 @@ export function CategoryItem({ style, highlighted, embedded, + showBalances, ...props }: CategoryItemProps) { const { isNarrowWidth } = useResponsive(); @@ -313,6 +325,16 @@ export function CategoryItem({ borderTop: `1px solid ${theme.pillBorder}`, } : {}; + const [budgetType] = useLocalPref('budgetType'); + + const balance = useSheetValue( + budgetType === 'rollover' + ? rolloverBudget.catBalance(item.id) + : reportBudget.catBalance(item.id), + ); + + const isToBeBudgetedItem = item.id === 'to-be-budgeted'; + const toBudget = useSheetValue(rolloverBudget.toBudget); return (
- - {item.name} - {item.hidden ? ' (hidden)' : null} - + + + {item.name} + {item.hidden ? ' (hidden)' : null} + + + {isToBeBudgetedItem + ? integerToCurrency(toBudget || 0) + : balance != null + ? integerToCurrency(balance || 0) + : null} + +
); } diff --git a/packages/desktop-client/src/components/mobile/transactions/TransactionEdit.jsx b/packages/desktop-client/src/components/mobile/transactions/TransactionEdit.jsx index 9e9be907aa1..ad0e9ceea3c 100644 --- a/packages/desktop-client/src/components/mobile/transactions/TransactionEdit.jsx +++ b/packages/desktop-client/src/components/mobile/transactions/TransactionEdit.jsx @@ -542,10 +542,12 @@ const TransactionEditInner = memo(function TransactionEditInner({ }; const onClick = (transactionId, name) => { - onRequestActiveEdit?.(getFieldName(transaction.id, 'payee'), () => { + onRequestActiveEdit?.(getFieldName(transaction.id, name), () => { + const [transaction] = unserializedTransactions; dispatch( pushModal('edit-field', { name, + month: monthUtils.monthFromDate(transaction.date), onSubmit: (name, value) => { const transaction = unserializedTransactions.find( t => t.id === transactionId, diff --git a/packages/desktop-client/src/components/transactions/TransactionsTable.jsx b/packages/desktop-client/src/components/transactions/TransactionsTable.jsx index d05689f40e4..e02e39cf37b 100644 --- a/packages/desktop-client/src/components/transactions/TransactionsTable.jsx +++ b/packages/desktop-client/src/components/transactions/TransactionsTable.jsx @@ -25,6 +25,7 @@ import { } from 'loot-core/src/client/reducers/queries'; import { evalArithmetic } from 'loot-core/src/shared/arithmetic'; import { currentDay } from 'loot-core/src/shared/months'; +import * as monthUtils from 'loot-core/src/shared/months'; import { getScheduledAmount } from 'loot-core/src/shared/schedules'; import { splitTransaction, @@ -62,6 +63,7 @@ import { Text } from '../common/Text'; import { View } from '../common/View'; import { getStatusProps } from '../schedules/StatusBadge'; import { DateSelect } from '../select/DateSelect'; +import { NamespaceContext } from '../spreadsheet/NamespaceContext'; import { Cell, Field, @@ -1171,19 +1173,25 @@ const Transaction = memo(function Transaction(props) { shouldSaveFromKey, inputStyle, }) => ( - + + + )} )} diff --git a/packages/loot-core/src/client/state-types/modals.d.ts b/packages/loot-core/src/client/state-types/modals.d.ts index c4d54d17d93..e1e72d3c99a 100644 --- a/packages/loot-core/src/client/state-types/modals.d.ts +++ b/packages/loot-core/src/client/state-types/modals.d.ts @@ -99,6 +99,7 @@ type FinanceModals = { 'edit-field': { name: string; + month: string; onSubmit: (name: string, value: string) => void; onClose: () => void; };