Display balances in category autocomplete

actualbudget · Apr 4, 2024 · e850f0f · e850f0f
1 parent 66dc593
commit e850f0f
Show file tree

Hide file tree

Showing 5 changed files with 80 additions and 25 deletions.
diff --git 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 (
-            <EditField
-              key={name}
-              modalProps={modalProps}
-              name={options.name}
-              onSubmit={options.onSubmit}
-              onClose={options.onClose}
-            />
+            <NamespaceContext.Provider
+              value={monthUtils.sheetForMonth(options.month)}
+            >
+              <EditField
+                key={name}
+                modalProps={modalProps}
+                name={options.name}
+                onSubmit={options.onSubmit}
+                onClose={options.onClose}
+              />
+            </NamespaceContext.Provider>
           );
 
         case 'new-category':

diff --git 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,
                 })}
               </Fragment>
             </Fragment>
@@ -126,6 +133,7 @@ type CategoryAutocompleteProps = ComponentProps<
   typeof Autocomplete<CategoryAutocompleteItem>
 > & {
   categoryGroups: Array<CategoryGroupEntity>;
+  showBalances?: boolean;
   showSplitOption?: boolean;
   renderSplitTransactionButton?: (
     props: ComponentPropsWithoutRef<typeof SplitTransactionButton>,
@@ -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 (
     <div
@@ -334,10 +356,26 @@ export function CategoryItem({
       data-highlighted={highlighted || undefined}
       {...props}
     >
-      <TextOneLine>
-        {item.name}
-        {item.hidden ? ' (hidden)' : null}
-      </TextOneLine>
+      <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
+        <TextOneLine>
+          {item.name}
+          {item.hidden ? ' (hidden)' : null}
+        </TextOneLine>
+        <TextOneLine
+          style={{
+            display: !showBalances ? 'none' : undefined,
+            marginLeft: 5,
+            flexShrink: 0,
+            ...makeAmountFullStyle(isToBeBudgetedItem ? toBudget : balance),
+          }}
+        >
+          {isToBeBudgetedItem
+            ? integerToCurrency(toBudget || 0)
+            : balance != null
+              ? integerToCurrency(balance || 0)
+              : null}
+        </TextOneLine>
+      </View>
     </div>
   );
 }

diff --git 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
@@ -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,
           }) => (
-            <CategoryAutocomplete
-              categoryGroups={categoryGroups}
-              value={categoryId}
-              focused={true}
-              clearOnBlur={false}
-              showSplitOption={!isChild && !isParent}
-              shouldSaveFromKey={shouldSaveFromKey}
-              inputProps={{ onBlur, onKeyDown, style: inputStyle }}
-              onUpdate={onUpdate}
-              onSelect={onSave}
-              menuPortalTarget={undefined}
-              showHiddenCategories={false}
-            />
+            <NamespaceContext.Provider
+              value={monthUtils.sheetForMonth(
+                monthUtils.monthFromDate(transaction.date),
+              )}
+            >
+              <CategoryAutocomplete
+                categoryGroups={categoryGroups}
+                value={categoryId}
+                focused={true}
+                clearOnBlur={false}
+                showSplitOption={!isChild && !isParent}
+                shouldSaveFromKey={shouldSaveFromKey}
+                inputProps={{ onBlur, onKeyDown, style: inputStyle }}
+                onUpdate={onUpdate}
+                onSelect={onSave}
+                menuPortalTarget={undefined}
+                showHiddenCategories={false}
+              />
+            </NamespaceContext.Provider>
           )}
         </CustomCell>
       )}

diff --git 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;
   };