Show category balances in mobile

actualbudget · Apr 11, 2024 · 4b2943e · 4b2943e
1 parent 476e0db
commit 4b2943e
Show file tree

Hide file tree

Showing 9 changed files with 42 additions and 12 deletions.
diff --git a/packages/desktop-client/src/components/Modals.tsx b/packages/desktop-client/src/components/Modals.tsx
@@ -282,6 +282,7 @@ export function Modals() {
                 onSelect: options.onSelect,
                 showHiddenCategories: options.showHiddenCategories,
               }}
+              month={options.month}
               onClose={options.onClose}
             />
           );
@@ -528,6 +529,7 @@ export function Modals() {
             <TransferModal
               modalProps={modalProps}
               title={options.title}
+              month={options.month}
               amount={options.amount}
               onSubmit={options.onSubmit}
               showToBeBudgeted={options.showToBeBudgeted}
@@ -539,6 +541,7 @@ export function Modals() {
             <CoverModal
               modalProps={modalProps}
               categoryId={options.categoryId}
+              month={options.month}
               onSubmit={options.onSubmit}
             />
           );

diff --git a/packages/desktop-client/src/components/autocomplete/CategoryAutocomplete.tsx b/packages/desktop-client/src/components/autocomplete/CategoryAutocomplete.tsx
@@ -384,7 +384,9 @@ export function CategoryItem({
           }}
         >
           {isToBeBudgetedItem
-            ? integerToCurrency(toBudget || 0)
+            ? toBudget != null
+              ? integerToCurrency(toBudget || 0)
+              : null
             : balance != null
               ? integerToCurrency(balance || 0)
               : null}

diff --git a/packages/desktop-client/src/components/mobile/budget/BudgetTable.jsx b/packages/desktop-client/src/components/mobile/budget/BudgetTable.jsx
@@ -280,6 +280,7 @@ const ExpenseCategory = memo(function ExpenseCategory({
     dispatch(
       pushModal('transfer', {
         title: `Transfer: ${category.name}`,
+        month,
         amount: catBalance,
         onSubmit: (amount, toCategoryId) => {
           onBudgetAction(month, 'transfer-category', {
@@ -298,6 +299,7 @@ const ExpenseCategory = memo(function ExpenseCategory({
     dispatch(
       pushModal('cover', {
         categoryId: category.id,
+        month,
         onSubmit: fromCategoryId => {
           onBudgetAction(month, 'cover', {
             to: category.id,

diff --git a/packages/desktop-client/src/components/mobile/transactions/TransactionEdit.jsx b/packages/desktop-client/src/components/mobile/transactions/TransactionEdit.jsx
@@ -545,11 +545,15 @@ const TransactionEditInner = memo(function TransactionEditInner({
   const onClick = (transactionId, name) => {
     onRequestActiveEdit?.(getFieldName(transaction.id, name), () => {
       const transactionToEdit = transactions.find(t => t.id === transactionId);
+      const unserializedTransaction = unserializedTransactions.find(
+        t => t.id === transactionId,
+      );
       switch (name) {
         case 'category':
           dispatch(
             pushModal('category-autocomplete', {
               categoryGroups,
+              month: monthUtils.monthFromDate(unserializedTransaction.date),
               onSelect: categoryId => {
                 onEdit(transactionToEdit, name, categoryId);
               },
@@ -587,7 +591,7 @@ const TransactionEditInner = memo(function TransactionEditInner({
           dispatch(
             pushModal('edit-field', {
               name,
-              month: monthUtils.monthFromDate(transaction.date),
+              month: monthUtils.monthFromDate(unserializedTransaction.date),
               onSubmit: (name, value) => {
                 onEdit(transactionToEdit, name, value);
               },

diff --git a/packages/desktop-client/src/components/modals/CategoryAutocompleteModal.tsx b/packages/desktop-client/src/components/modals/CategoryAutocompleteModal.tsx
@@ -1,22 +1,27 @@
 import React, { type ComponentPropsWithoutRef } from 'react';
 
+import * as monthUtils from 'loot-core/src/shared/months';
+
 import { useResponsive } from '../../ResponsiveProvider';
 import { theme } from '../../style';
 import { CategoryAutocomplete } from '../autocomplete/CategoryAutocomplete';
 import { Modal } from '../common/Modal';
 import { View } from '../common/View';
 import { SectionLabel } from '../forms';
 import { type CommonModalProps } from '../Modals';
+import { NamespaceContext } from '../spreadsheet/NamespaceContext';
 
 type CategoryAutocompleteModalProps = {
   modalProps: CommonModalProps;
   autocompleteProps: ComponentPropsWithoutRef<typeof CategoryAutocomplete>;
   onClose: () => void;
+  month?: string;
 };
 
 export function CategoryAutocompleteModal({
   modalProps,
   autocompleteProps,
+  month,
   onClose,
 }: CategoryAutocompleteModalProps) {
   const _onClose = () => {
@@ -63,15 +68,19 @@ export function CategoryAutocompleteModal({
             />
           )}
           <View style={{ flex: 1 }}>
-            <CategoryAutocomplete
-              focused={true}
-              embedded={true}
-              closeOnBlur={false}
-              showSplitOption={false}
-              onClose={_onClose}
-              {...defaultAutocompleteProps}
-              {...autocompleteProps}
-            />
+            <NamespaceContext.Provider
+              value={monthUtils.sheetForMonth(month || '')}
+            >
+              <CategoryAutocomplete
+                focused={true}
+                embedded={true}
+                closeOnBlur={false}
+                showSplitOption={false}
+                onClose={_onClose}
+                {...defaultAutocompleteProps}
+                {...autocompleteProps}
+              />
+            </NamespaceContext.Provider>
           </View>
         </View>
       )}

diff --git a/packages/desktop-client/src/components/modals/CoverModal.tsx b/packages/desktop-client/src/components/modals/CoverModal.tsx
@@ -16,12 +16,14 @@ import { type CommonModalProps } from '../Modals';
 type CoverModalProps = {
   modalProps: CommonModalProps;
   categoryId: string;
+  month: string;
   onSubmit: (categoryId: string) => void;
 };
 
 export function CoverModal({
   modalProps,
   categoryId,
+  month,
   onSubmit,
 }: CoverModalProps) {
   const { grouped: originalCategoryGroups, list: categories } = useCategories();
@@ -36,12 +38,13 @@ export function CoverModal({
     dispatch(
       pushModal('category-autocomplete', {
         categoryGroups,
+        month,
         onSelect: categoryId => {
           setFromCategoryId(categoryId);
         },
       }),
     );
-  }, [categoryGroups, dispatch]);
+  }, [categoryGroups, dispatch, month]);
 
   const _onSubmit = (categoryId: string | null) => {
     if (categoryId) {

diff --git a/packages/desktop-client/src/components/modals/RolloverBudgetSummaryModal.tsx b/packages/desktop-client/src/components/modals/RolloverBudgetSummaryModal.tsx
@@ -35,6 +35,7 @@ export function RolloverBudgetSummaryModal({
     dispatch(
       pushModal('transfer', {
         title: 'Transfer',
+        month,
         amount: sheetValue,
         onSubmit: (amount, toCategoryId) => {
           onBudgetAction?.(month, 'transfer-available', {

diff --git a/packages/desktop-client/src/components/modals/TransferModal.tsx b/packages/desktop-client/src/components/modals/TransferModal.tsx
@@ -18,6 +18,7 @@ import { type CommonModalProps } from '../Modals';
 type TransferModalProps = {
   modalProps: CommonModalProps;
   title: string;
+  month: string;
   amount: number;
   showToBeBudgeted: boolean;
   onSubmit: (amount: number, toCategoryId: string) => void;
@@ -26,6 +27,7 @@ type TransferModalProps = {
 export function TransferModal({
   modalProps,
   title,
+  month,
   amount: initialAmount,
   showToBeBudgeted,
   onSubmit,
@@ -45,6 +47,7 @@ export function TransferModal({
     dispatch(
       pushModal('category-autocomplete', {
         categoryGroups,
+        month,
         showHiddenCategories: true,
         onSelect: categoryId => {
           setToCategoryId(categoryId);

diff --git a/packages/loot-core/src/client/state-types/modals.d.ts b/packages/loot-core/src/client/state-types/modals.d.ts
@@ -107,6 +107,7 @@ type FinanceModals = {
   'category-autocomplete': {
     categoryGroups: CategoryGroupEntity[];
     onSelect: (categoryId: string, categoryName: string) => void;
+    month?: string;
     showHiddenCategories?: boolean;
     onClose?: () => void;
   };
@@ -199,12 +200,14 @@ type FinanceModals = {
   };
   transfer: {
     title: string;
+    month: string;
     amount: number;
     onSubmit: (amount: number, toCategoryId: string) => void;
     showToBeBudgeted?: boolean;
   };
   cover: {
     categoryId: string;
+    month: string;
     onSubmit: (fromCategoryId: string) => void;
   };
   'hold-buffer': {