From f0aec965a024553715c97b019f9f210f8e7bf5c7 Mon Sep 17 00:00:00 2001 From: Joel Jeremy Marquez Date: Mon, 18 Mar 2024 19:21:48 -0700 Subject: [PATCH 01/15] Update autocomplete types --- .../src/components/modals/GoCardlessExternalMsg.tsx | 2 ++ .../src/components/modals/SelectLinkedAccounts.jsx | 1 + 2 files changed, 3 insertions(+) diff --git a/packages/desktop-client/src/components/modals/GoCardlessExternalMsg.tsx b/packages/desktop-client/src/components/modals/GoCardlessExternalMsg.tsx index 5de7b9fde9e..7bddfb5d595 100644 --- a/packages/desktop-client/src/components/modals/GoCardlessExternalMsg.tsx +++ b/packages/desktop-client/src/components/modals/GoCardlessExternalMsg.tsx @@ -155,6 +155,7 @@ export function GoCardlessExternalMsg({ {focusedField === 'account' ? ( Date: Wed, 20 Mar 2024 09:37:36 -0700 Subject: [PATCH 02/15] Remote optional type --- .../src/components/modals/GoCardlessExternalMsg.tsx | 2 -- .../src/components/modals/SelectLinkedAccounts.jsx | 1 - 2 files changed, 3 deletions(-) diff --git a/packages/desktop-client/src/components/modals/GoCardlessExternalMsg.tsx b/packages/desktop-client/src/components/modals/GoCardlessExternalMsg.tsx index 7bddfb5d595..5de7b9fde9e 100644 --- a/packages/desktop-client/src/components/modals/GoCardlessExternalMsg.tsx +++ b/packages/desktop-client/src/components/modals/GoCardlessExternalMsg.tsx @@ -155,7 +155,6 @@ export function GoCardlessExternalMsg({ {focusedField === 'account' ? ( Date: Thu, 21 Mar 2024 22:17:45 -0700 Subject: [PATCH 03/15] Improve SingleInputModal --- .../desktop-client/src/components/modals/SingleInputModal.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/desktop-client/src/components/modals/SingleInputModal.tsx b/packages/desktop-client/src/components/modals/SingleInputModal.tsx index c95d820fabe..e1b3a072c31 100644 --- a/packages/desktop-client/src/components/modals/SingleInputModal.tsx +++ b/packages/desktop-client/src/components/modals/SingleInputModal.tsx @@ -9,6 +9,7 @@ import { Modal } from '../common/Modal'; import { View } from '../common/View'; import { InputField } from '../mobile/MobileForms'; import { type CommonModalProps } from '../Modals'; +import { InputField } from '../mobile/MobileForms'; type SingleInputModalProps = { modalProps: Partial; From 284ef733c408d5893d54f6167b294f30d1a36252 Mon Sep 17 00:00:00 2001 From: Joel Jeremy Marquez Date: Fri, 22 Mar 2024 00:09:03 -0700 Subject: [PATCH 04/15] Fix lint error --- .../desktop-client/src/components/modals/SingleInputModal.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/desktop-client/src/components/modals/SingleInputModal.tsx b/packages/desktop-client/src/components/modals/SingleInputModal.tsx index e1b3a072c31..c95d820fabe 100644 --- a/packages/desktop-client/src/components/modals/SingleInputModal.tsx +++ b/packages/desktop-client/src/components/modals/SingleInputModal.tsx @@ -9,7 +9,6 @@ import { Modal } from '../common/Modal'; import { View } from '../common/View'; import { InputField } from '../mobile/MobileForms'; import { type CommonModalProps } from '../Modals'; -import { InputField } from '../mobile/MobileForms'; type SingleInputModalProps = { modalProps: Partial; From 16e9cf3ba9e891d269233de3e6af478e8e2ecf02 Mon Sep 17 00:00:00 2001 From: Joel Jeremy Marquez Date: Fri, 22 Mar 2024 00:06:42 -0700 Subject: [PATCH 05/15] Mobile budget page modals --- .../desktop-client/src/components/Modals.tsx | 22 +- .../components/mobile/budget/BudgetTable.jsx | 270 ++++-------------- .../src/components/mobile/budget/index.tsx | 38 ++- .../src/components/modals/BudgetMenuModal.tsx | 102 +++++++ ...dgetType.tsx => SwitchBudgetTypeModal.tsx} | 19 +- .../src/client/state-types/modals.d.ts | 5 + 6 files changed, 236 insertions(+), 220 deletions(-) create mode 100644 packages/desktop-client/src/components/modals/BudgetMenuModal.tsx rename packages/desktop-client/src/components/modals/{SwitchBudgetType.tsx => SwitchBudgetTypeModal.tsx} (78%) diff --git a/packages/desktop-client/src/components/Modals.tsx b/packages/desktop-client/src/components/Modals.tsx index bdd7cc587c7..e0c66f497a1 100644 --- a/packages/desktop-client/src/components/Modals.tsx +++ b/packages/desktop-client/src/components/Modals.tsx @@ -13,6 +13,7 @@ import { useSyncServerStatus } from '../hooks/useSyncServerStatus'; import { AccountAutocompleteModal } from './modals/AccountAutocompleteModal'; import { AccountMenuModal } from './modals/AccountMenuModal'; +import { BudgetMenuModal } from './modals/BudgetMenuModal'; import { CategoryAutocompleteModal } from './modals/CategoryAutocompleteModal'; import { CategoryGroupMenuModal } from './modals/CategoryGroupMenuModal'; import { CategoryMenuModal } from './modals/CategoryMenuModal'; @@ -46,7 +47,7 @@ import { ScheduledTransactionMenuModal } from './modals/ScheduledTransactionMenu import { SelectLinkedAccounts } from './modals/SelectLinkedAccounts'; import { SimpleFinInitialise } from './modals/SimpleFinInitialise'; import { SingleInputModal } from './modals/SingleInputModal'; -import { SwitchBudgetType } from './modals/SwitchBudgetType'; +import { SwitchBudgetTypeModal } from './modals/SwitchBudgetTypeModal'; import { TransferModal } from './modals/TransferModal'; import { DiscoverSchedules } from './schedules/DiscoverSchedules'; import { PostsOfflineNotification } from './schedules/PostsOfflineNotification'; @@ -400,10 +401,10 @@ export function Modals() { case 'switch-budget-type': return ( - ); @@ -549,6 +550,21 @@ export function Modals() { /> ); + case 'budget-menu': + return ( + + + + ); + default: console.error('Unknown modal:', name); return null; diff --git a/packages/desktop-client/src/components/mobile/budget/BudgetTable.jsx b/packages/desktop-client/src/components/mobile/budget/BudgetTable.jsx index eed6c851f02..3a8c1b631ac 100644 --- a/packages/desktop-client/src/components/mobile/budget/BudgetTable.jsx +++ b/packages/desktop-client/src/components/mobile/budget/BudgetTable.jsx @@ -7,17 +7,13 @@ import { collapseModals, pushModal } from 'loot-core/client/actions'; import { rolloverBudget, reportBudget } from 'loot-core/src/client/queries'; import * as monthUtils from 'loot-core/src/shared/months'; -import { useFeatureFlag } from '../../../hooks/useFeatureFlag'; import { useLocalPref } from '../../../hooks/useLocalPref'; import { SingleActiveEditFormProvider, useSingleActiveEditForm, } from '../../../hooks/useSingleActiveEditForm'; -import { - SvgArrowThinLeft, - SvgArrowThinRight, - SvgDotsHorizontalTriple, -} from '../../../icons/v1'; +import { SvgLogo } from '../../../icons/logo'; +import { SvgAdd, SvgArrowThinLeft, SvgArrowThinRight } from '../../../icons/v1'; import { useResponsive } from '../../../ResponsiveProvider'; import { theme, styles } from '../../../style'; import { BalanceWithCarryover } from '../../budget/BalanceWithCarryover'; @@ -25,14 +21,12 @@ import { makeAmountGrey } from '../../budget/util'; import { Button } from '../../common/Button'; import { Card } from '../../common/Card'; import { Label } from '../../common/Label'; -import { Menu } from '../../common/Menu'; import { Text } from '../../common/Text'; import { View } from '../../common/View'; import { Page } from '../../Page'; import { CellValue } from '../../spreadsheet/CellValue'; import { useFormat } from '../../spreadsheet/useFormat'; import { useSheetValue } from '../../spreadsheet/useSheetValue'; -import { Tooltip, useTooltip } from '../../tooltips'; import { AmountInput } from '../../util/AmountInput'; import { MOBILE_NAV_HEIGHT } from '../MobileNavTabs'; import { PullToRefresh } from '../PullToRefresh'; @@ -1035,7 +1029,6 @@ function BudgetGroups({ onSaveCategory, onDeleteCategory, onAddCategory, - onAddGroup, onReorderCategory, onReorderGroup, onBudgetAction, @@ -1084,17 +1077,6 @@ function BudgetGroups({ ); })} - - - - {incomeGroup && ( = 360; // let editMode = false; // neuter editMode -- sorry, not rewriting drag-n-drop right now const format = useFormat(); - const dispatch = useDispatch(); const [showSpentColumn = false, setShowSpentColumnPref] = useLocalPref( 'mobile.showSpentColumn', ); - const [showHiddenCategories = false, setShowHiddenCategoriesPref] = - useLocalPref('budget.showHiddenCategories'); + const [showHiddenCategories = false] = useLocalPref( + 'budget.showHiddenCategories', + ); function toggleDisplay() { setShowSpentColumnPref(!showSpentColumn); @@ -1165,16 +1145,9 @@ export function BudgetTable({ borderRadius: 'unset', }; - const _onSwitchBudgetType = () => { - dispatch( - pushModal('switch-budget-type', { - onSwitch: onSwitchBudgetType, - }), - ); - }; - - const onToggleHiddenCategories = () => { - setShowHiddenCategoriesPref(!showHiddenCategories); + const noBackgroundColorStyle = { + backgroundColor: 'transparent', + color: 'white', }; return ( @@ -1188,31 +1161,33 @@ export function BudgetTable({ onNextMonth={onNextMonth} /> } + headerLeftContent={ + + } headerRightContent={ - !editMode ? ( - - ) : ( - - ) + } style={{ flex: 1 }} > @@ -1349,154 +1324,35 @@ export function BudgetTable({ - {!editMode ? ( - // (this.list = el)} - // keyboardShouldPersistTaps="always" - // refreshControl={refreshControl} - // style={{ backgroundColor: colors.n10 }} - // automaticallyAdjustContentInsets={false} - // > - - - - ) : ( - // - // - // {({ - // dragging, - // onGestureEvent, - // onHandlerStateChange, - // scrollRef, - // onScroll - // }) => ( - - - - - // - // - )} - - - ); -} - -function BudgetPageMenu({ - onEditMode, - onToggleHiddenCategories, - onSwitchBudgetType, -}) { - const tooltip = useTooltip(); - const isReportBudgetEnabled = useFeatureFlag('reportBudget'); - - const onMenuSelect = name => { - tooltip.close(); - switch (name) { - case 'edit-mode': - onEditMode?.(true); - break; - case 'toggle-hidden-categories': - onToggleHiddenCategories?.(); - break; - case 'switch-budget-type': - onSwitchBudgetType?.(); - break; - default: - throw new Error(`Unrecognized menu option: ${name}`); - } - }; - - return ( - <> - - {tooltip.isOpen && ( - -