From 4b2943ebe87518ce3d6b873b44fa203a5215e097 Mon Sep 17 00:00:00 2001 From: Joel Jeremy Marquez Date: Wed, 10 Apr 2024 19:30:24 -0700 Subject: [PATCH] Show category balances in mobile --- .../desktop-client/src/components/Modals.tsx | 3 +++ .../autocomplete/CategoryAutocomplete.tsx | 4 ++- .../components/mobile/budget/BudgetTable.jsx | 2 ++ .../mobile/transactions/TransactionEdit.jsx | 6 ++++- .../modals/CategoryAutocompleteModal.tsx | 27 ++++++++++++------- .../src/components/modals/CoverModal.tsx | 5 +++- .../modals/RolloverBudgetSummaryModal.tsx | 1 + .../src/components/modals/TransferModal.tsx | 3 +++ .../src/client/state-types/modals.d.ts | 3 +++ 9 files changed, 42 insertions(+), 12 deletions(-) diff --git a/packages/desktop-client/src/components/Modals.tsx b/packages/desktop-client/src/components/Modals.tsx index 850e63f2376..d01e9a1d700 100644 --- 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() { ); diff --git a/packages/desktop-client/src/components/autocomplete/CategoryAutocomplete.tsx b/packages/desktop-client/src/components/autocomplete/CategoryAutocomplete.tsx index b324e59d275..5f15402252d 100644 --- 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 index e004f887e4b..fada67d057b 100644 --- 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 index 94d4a49daac..5380b83e6db 100644 --- 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 index 6d5c9f9722f..b47c92908a7 100644 --- a/packages/desktop-client/src/components/modals/CategoryAutocompleteModal.tsx +++ b/packages/desktop-client/src/components/modals/CategoryAutocompleteModal.tsx @@ -1,5 +1,7 @@ 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'; @@ -7,16 +9,19 @@ 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; onClose: () => void; + month?: string; }; export function CategoryAutocompleteModal({ modalProps, autocompleteProps, + month, onClose, }: CategoryAutocompleteModalProps) { const _onClose = () => { @@ -63,15 +68,19 @@ export function CategoryAutocompleteModal({ /> )} - + + + )} diff --git a/packages/desktop-client/src/components/modals/CoverModal.tsx b/packages/desktop-client/src/components/modals/CoverModal.tsx index 90f4369da98..e11baeb6e98 100644 --- 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 index 2839c3ee666..0cbb9bea8a0 100644 --- 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 index 7def9a00471..0e5577f46f1 100644 --- 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 index 7c0510e2d25..37c9030e500 100644 --- 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': {