Mobile report budget (#1880)

* Mobile report budget * Release notes * Update bindings * Cleanup * Mobile report budget summary + reuse desktop components
actualbudget · Nov 19, 2023 · 6527312 · 6527312
1 parent b553008
commit 6527312
Show file tree

Hide file tree

Showing 34 changed files with 1,634 additions and 1,238 deletions.
diff --git a/packages/desktop-client/src/components/Modals.tsx b/packages/desktop-client/src/components/Modals.tsx
@@ -9,7 +9,6 @@ import useCategories from '../hooks/useCategories';
 import useSyncServerStatus from '../hooks/useSyncServerStatus';
 import { type CommonModalProps } from '../types/modals';
 
-import BudgetSummary from './modals/BudgetSummary';
 import CloseAccount from './modals/CloseAccount';
 import ConfirmCategoryDelete from './modals/ConfirmCategoryDelete';
 import CreateAccount from './modals/CreateAccount';
@@ -25,8 +24,11 @@ import LoadBackup from './modals/LoadBackup';
 import ManageRulesModal from './modals/ManageRulesModal';
 import MergeUnusedPayees from './modals/MergeUnusedPayees';
 import PlaidExternalMsg from './modals/PlaidExternalMsg';
+import ReportBudgetSummary from './modals/ReportBudgetSummary';
+import RolloverBudgetSummary from './modals/RolloverBudgetSummary';
 import SelectLinkedAccounts from './modals/SelectLinkedAccounts';
 import SingleInput from './modals/SingleInput';
+import SwitchBudgetType from './modals/SwitchBudgetType';
 import DiscoverSchedules from './schedules/DiscoverSchedules';
 import ScheduleDetails from './schedules/EditSchedule';
 import ScheduleLink from './schedules/LinkSchedule';
@@ -247,9 +249,19 @@ export default function Modals() {
             />
           );
 
-        case 'budget-summary':
+        case 'rollover-budget-summary':
           return (
-            <BudgetSummary
+            <RolloverBudgetSummary
+              key={name}
+              modalProps={modalProps}
+              month={options.month}
+              onBudgetAction={options.onBudgetAction}
+            />
+          );
+
+        case 'report-budget-summary':
+          return (
+            <ReportBudgetSummary
               key={name}
               modalProps={modalProps}
               month={options.month}
@@ -294,6 +306,15 @@ export default function Modals() {
             />
           );
 
+        case 'switch-budget-type':
+          return (
+            <SwitchBudgetType
+              key={name}
+              modalProps={modalProps}
+              onSwitch={options?.onSwitch}
+            />
+          );
+
         default:
           console.error('Unknown modal:', name);
           return null;

diff --git a/packages/desktop-client/src/components/accounts/MobileAccountDetails.js b/packages/desktop-client/src/components/accounts/MobileAccountDetails.js
@@ -111,7 +111,6 @@ export default function AccountDetails({
         <CellValue
           binding={balance}
           type="financial"
-          debug={true}
           style={{
             fontSize: 18,
             fontWeight: '500',

diff --git a/packages/desktop-client/src/components/budget/BudgetSummaries.tsx b/packages/desktop-client/src/components/budget/BudgetSummaries.tsx
@@ -15,8 +15,8 @@ import useResizeObserver from '../../hooks/useResizeObserver';
 import View from '../common/View';
 
 import { MonthsContext } from './MonthsContext';
-import { type BudgetSummary as ReportBudgetSummary } from './report/BudgetSummary';
-import { type BudgetSummary as RolloverBudgetSummary } from './rollover/BudgetSummary';
+import type ReportBudgetSummary from './report/budgetsummary/BudgetSummary';
+import type RolloverBudgetSummary from './rollover/budgetsummary/BudgetSummary';
 
 type BudgetSummariesProps = {
   SummaryComponent: typeof ReportBudgetSummary | typeof RolloverBudgetSummary;

diff --git a/packages/desktop-client/src/components/budget/MobileBudget.js b/packages/desktop-client/src/components/budget/MobileBudget.js
@@ -24,6 +24,7 @@ import View from '../common/View';
 import SyncRefresh from '../SyncRefresh';
 
 import { BudgetTable } from './MobileBudgetTable';
+import { prewarmMonth, switchBudgetType } from './util';
 
 class Budget extends Component {
   constructor(props) {
@@ -54,7 +55,13 @@ class Budget extends Component {
     const { start, end } = await send('get-budget-bounds');
     this.setState({ bounds: { start, end } });
 
-    this.prewarmMonth(this.state.currentMonth);
+    await prewarmMonth(
+      this.props.budgetType,
+      this.props.spreadsheet,
+      this.state.currentMonth,
+    );
+
+    this.setState({ initialized: true });
 
     let unlisten = listen('sync-event', ({ type, tables }) => {
       if (
@@ -78,27 +85,19 @@ class Budget extends Component {
     this.cleanup?.();
   }
 
-  prewarmMonth = async (month, type = null) => {
-    type = type || this.props.budgetType;
-
-    let method =
-      type === 'report' ? 'report-budget-month' : 'rollover-budget-month';
-
-    let values = await send(method, { month });
-
-    for (let value of values) {
-      this.props.spreadsheet.prewarmCache(value.name, value);
-    }
-
-    if (!this.state.initialized) {
-      this.setState({ initialized: true });
+  onShowBudgetSummary = () => {
+    if (this.props.budgetType === 'report') {
+      this.props.pushModal('report-budget-summary', {
+        month: this.state.currentMonth,
+      });
+    } else {
+      this.props.pushModal('rollover-budget-summary', {
+        month: this.state.currentMonth,
+        onBudgetAction: this.props.applyBudgetAction,
+      });
     }
   };
 
-  onShowBudgetDetails = () => {
-    this.props.pushModal('budget-summary', { month: this.state.currentMonth });
-  };
-
   onBudgetAction = type => {
     const { currentMonth } = this.state;
     this.props.applyBudgetAction(currentMonth, type, this.state.bounds);
@@ -267,15 +266,17 @@ class Budget extends Component {
   };
 
   onPrevMonth = async () => {
+    let { spreadsheet, budgetType } = this.props;
     let month = monthUtils.subMonths(this.state.currentMonth, 1);
-    await this.prewarmMonth(month);
-    this.setState({ currentMonth: month });
+    await prewarmMonth(budgetType, spreadsheet, month);
+    this.setState({ currentMonth: month, initialized: true });
   };
 
   onNextMonth = async () => {
+    let { spreadsheet, budgetType } = this.props;
     let month = monthUtils.addMonths(this.state.currentMonth, 1);
-    await this.prewarmMonth(month);
-    this.setState({ currentMonth: month });
+    await prewarmMonth(budgetType, spreadsheet, month);
+    this.setState({ currentMonth: month, initialized: true });
   };
 
   onOpenActionSheet = () => {
@@ -321,6 +322,19 @@ class Budget extends Component {
     );
   };
 
+  onSwitchBudgetType = async () => {
+    const { spreadsheet, budgetType, loadPrefs } = this.props;
+    const { bounds, currentMonth } = this.state;
+
+    this.setState({ initialized: false });
+
+    await switchBudgetType(budgetType, spreadsheet, bounds, currentMonth, () =>
+      loadPrefs(),
+    );
+
+    this.setState({ initialized: true });
+  };
+
   render() {
     const { currentMonth, bounds, editMode, initialized } = this.state;
     const {
@@ -331,6 +345,7 @@ class Budget extends Component {
       budgetType,
       navigation,
       applyBudgetAction,
+      pushModal,
     } = this.props;
     let numberFormat = prefs.numberFormat || 'comma-dot';
     let hideFraction = prefs.hideFraction || false;
@@ -369,7 +384,7 @@ class Budget extends Component {
             //   }
             editMode={editMode}
             onEditMode={flag => this.setState({ editMode: flag })}
-            onShowBudgetDetails={this.onShowBudgetDetails}
+            onShowBudgetSummary={this.onShowBudgetSummary}
             onPrevMonth={this.onPrevMonth}
             onNextMonth={this.onNextMonth}
             onSaveGroup={this.onSaveGroup}
@@ -383,7 +398,9 @@ class Budget extends Component {
             onOpenActionSheet={() => {}} //this.onOpenActionSheet}
             onBudgetAction={applyBudgetAction}
             onRefresh={onRefresh}
+            onSwitchBudgetType={this.onSwitchBudgetType}
             savePrefs={savePrefs}
+            pushModal={pushModal}
           />
         )}
       </SyncRefresh>