Mobile category and group functionalities (#1737)

* More mobile functionalities

* Cleanup

* Remove close button on mobile budget summary modal

* Release notes

* Close mobile inputs on enter

* Fix mobile budget row header color

* Fix income group hidden

* Add validation + close button on category tooltip

* Add mobile budget visual cues

* More mobile visual cues

* Error message fix

* Update blank category name behavior

* Cleanup

* Cleanup

* Fix mobile group deletion and category tooltip behavior

* Zero sign for AmountInput

* VRT snapshot updates

* Handle null values in must-category-transfer

packages/desktop-client/src/components/Modals.tsx

@@ -26,6 +26,7 @@ import ManageRulesModal from './modals/ManageRulesModal';
 import MergeUnusedPayees from './modals/MergeUnusedPayees';
 import PlaidExternalMsg from './modals/PlaidExternalMsg';
 import SelectLinkedAccounts from './modals/SelectLinkedAccounts';
+import SingleInput from './modals/SingleInput';
 import DiscoverSchedules from './schedules/DiscoverSchedules';
 import ScheduleDetails from './schedules/EditSchedule';
 import ScheduleLink from './schedules/LinkSchedule';
@@ -222,6 +223,30 @@ export default function Modals() {
             />
           );
 
+        case 'new-category':
+          return (
+            <SingleInput
+              modalProps={modalProps}
+              title="New Category"
+              inputPlaceholder="Name"
+              buttonText="Add"
+              onValidate={options.onValidate}
+              onSubmit={options.onSubmit}
+            />
+          );
+
+        case 'new-category-group':
+          return (
+            <SingleInput
+              modalProps={modalProps}
+              title="New Category Group"
+              inputPlaceholder="Name"
+              buttonText="Add"
+              onValidate={options.onValidate}
+              onSubmit={options.onSubmit}
+            />
+          );
+
         case 'budget-summary':
           return (
             <BudgetSummary

packages/desktop-client/src/components/budget/BudgetTotals.js

@@ -69,7 +69,7 @@ const BudgetTotals = memo(function BudgetTotals({
             >
               <Menu
                 onMenuSelect={type => {
-                  if (type === 'toggleVisibility') {
+                  if (type === 'toggle-visibility') {
                     toggleHiddenCategories();
                   } else if (type === 'expandAllCategories') {
                     expandAllCategories();
@@ -80,8 +80,8 @@ const BudgetTotals = memo(function BudgetTotals({
                 }}
                 items={[
                   {
-                    name: 'toggleVisibility',
-                    text: 'Toggle hidden',
+                    name: 'toggle-visibility',
+                    text: 'Toggle hidden categories',
                   },
                   {
                     name: 'expandAllCategories',

packages/desktop-client/src/components/budget/MobileBudget.js

@@ -5,8 +5,13 @@ import { useSpreadsheet } from 'loot-core/src/client/SpreadsheetProvider';
 import { send, listen } from 'loot-core/src/platform/client/fetch';
 import {
   addCategory,
+  addGroup,
+  deleteCategory,
+  deleteGroup,
   moveCategory,
   moveCategoryGroup,
+  updateCategory,
+  updateGroup,
 } from 'loot-core/src/shared/categories';
 import * as monthUtils from 'loot-core/src/shared/months';
 
@@ -24,15 +29,13 @@ class Budget extends Component {
   constructor(props) {
     super(props);
 
-    this.summary = 0;
-
     const currentMonth = monthUtils.currentMonth();
     this.state = {
       bounds: { start: currentMonth, end: currentMonth },
       currentMonth: currentMonth,
       initialized: false,
       editMode: false,
-      categoryGroups: null,
+      categoryGroups: [],
     };
   }
 
@@ -72,7 +75,7 @@ class Budget extends Component {
   }
 
   componentWillUnmount() {
-    // this.cleanup();
+    this.cleanup?.();
   }
 
   prewarmMonth = async (month, type = null) => {
@@ -101,25 +104,112 @@ class Budget extends Component {
     this.props.applyBudgetAction(currentMonth, type, this.state.bounds);
   };
 
-  onAddCategory = groupId => {
-    this.props.navigation.navigate('AddCategoryModal', {
-      groupId,
-      onAdd: async name => {
-        let id = await this.props.createCategory(name, groupId);
-        let { categoryGroups } = this.state;
-
-        this.setState({
-          categoryGroups: addCategory(categoryGroups, {
+  onAddGroup = () => {
+    this.props.pushModal('new-category-group', {
+      onValidate: name => (!name ? 'Name is required.' : null),
+      onSubmit: async name => {
+        const id = await this.props.createGroup(name);
+        this.setState(state => ({
+          categoryGroups: addGroup(state.categoryGroups, {
+            id,
             name,
-            cat_group: groupId,
+            categories: [],
             is_income: 0,
+          }),
+        }));
+      },
+    });
+  };
+
+  onAddCategory = (groupId, isIncome) => {
+    this.props.pushModal('new-category', {
+      onValidate: name => (!name ? 'Name is required.' : null),
+      onSubmit: async name => {
+        const id = await this.props.createCategory(name, groupId, isIncome);
+        this.setState(state => ({
+          categoryGroups: addCategory(state.categoryGroups, {
             id,
+            name,
+            cat_group: groupId,
+            is_income: isIncome ? 1 : 0,
           }),
-        });
+        }));
       },
     });
   };
 
+  onSaveGroup = group => {
+    this.props.updateGroup(group);
+    this.setState(state => ({
+      categoryGroups: updateGroup(state.categoryGroups, group),
+    }));
+  };
+
+  onDeleteGroup = async groupId => {
+    let group = this.state.categoryGroups?.find(g => g.id === groupId);
+
+    if (!group) {
+      return;
+    }
+
+    let mustTransfer = false;
+    for (let category of group.categories) {
+      if (await send('must-category-transfer', { id: category.id })) {
+        mustTransfer = true;
+        break;
+      }
+    }
+
+    if (mustTransfer) {
+      this.props.pushModal('confirm-category-delete', {
+        group: groupId,
+        onDelete: transferCategory => {
+          this.props.deleteGroup(groupId, transferCategory);
+          this.setState(state => ({
+            categoryGroups: deleteGroup(state.categoryGroups, groupId),
+          }));
+        },
+      });
+    } else {
+      this.props.deleteGroup(groupId);
+      this.setState(state => ({
+        categoryGroups: deleteGroup(state.categoryGroups, groupId),
+      }));
+    }
+  };
+
+  onSaveCategory = category => {
+    this.props.updateCategory(category);
+    this.setState(state => ({
+      categoryGroups: updateCategory(state.categoryGroups, category),
+    }));
+  };
+
+  onDeleteCategory = async categoryId => {
+    const mustTransfer = await send('must-category-transfer', {
+      id: categoryId,
+    });
+
+    if (mustTransfer) {
+      this.props.pushModal('confirm-category-delete', {
+        category: categoryId,
+        onDelete: transferCategory => {
+          if (categoryId !== transferCategory) {
+            this.props.deleteCategory(categoryId, transferCategory);
+            this.setState(state => ({
+              categoryGroups: deleteCategory(state.categoryGroups, categoryId),
+            }));
+          }
+        },
+      });
+    } else {
+      this.props.deleteCategory(categoryId);
+      this.setState(state => ({
+        categoryGroups: deleteCategory(state.categoryGroups, categoryId),
+      }));
+    }
+  };
+
   onReorderCategory = (id, { inGroup, aroundCategory }) => {
     let { categoryGroups } = this.state;
     let groupId, targetId;
@@ -237,6 +327,7 @@ class Budget extends Component {
       categories,
       categoryGroups,
       prefs,
+      savePrefs,
       budgetType,
       navigation,
       applyBudgetAction,
@@ -281,11 +372,17 @@ class Budget extends Component {
             onShowBudgetDetails={this.onShowBudgetDetails}
             onPrevMonth={this.onPrevMonth}
             onNextMonth={this.onNextMonth}
+            onSaveGroup={this.onSaveGroup}
+            onDeleteGroup={this.onDeleteGroup}
+            onAddGroup={this.onAddGroup}
             onAddCategory={this.onAddCategory}
+            onSaveCategory={this.onSaveCategory}
+            onDeleteCategory={this.onDeleteCategory}
             onReorderCategory={this.onReorderCategory}
             onReorderGroup={this.onReorderGroup}
             onOpenActionSheet={() => {}} //this.onOpenActionSheet}
             onBudgetAction={applyBudgetAction}
+            savePrefs={savePrefs}
           />
         )}
       </SyncRefresh>