From 497a3104f0fafdc8cef209becc8337a00a231898 Mon Sep 17 00:00:00 2001
From: Joel Jeremy Marquez <joeljeremy.marquez@gmail.com>
Date: Tue, 20 Jun 2023 11:35:01 -0700
Subject: [PATCH] Expand / collapse all categories (#1143)

This PR is for the first item listed in #559: `Expand All / Collapse All
Categories`

For the expand / collapse all categories functionality, I was choosing
between having a single `Expand / collapse all categories` button or one
for each: `Expand all categories` and `Collapse all categories` buttons.

For the initial implementation, I have opted with the latter. Please let
me know which one is the right way to go or if there are other
suggestions and I'll just accordingly.


![image](https://github.com/actualbudget/actual/assets/20313680/64d0e498-1139-4dd0-9b7f-4d478ab947aa)
---
 .../src/components/budget/misc.js             | 27 ++++++++++++++++++-
 upcoming-release-notes/1143.md                |  6 +++++
 2 files changed, 32 insertions(+), 1 deletion(-)
 create mode 100644 upcoming-release-notes/1143.md

diff --git a/packages/desktop-client/src/components/budget/misc.js b/packages/desktop-client/src/components/budget/misc.js
index d32090b7a..7ad19deb5 100644
--- a/packages/desktop-client/src/components/budget/misc.js
+++ b/packages/desktop-client/src/components/budget/misc.js
@@ -181,6 +181,15 @@ class BudgetTable extends Component {
     });
   };
 
+  expandAllCategories = () => {
+    this.props.setCollapsed([]);
+  };
+
+  collapseAllCategories = () => {
+    let { setCollapsed, categoryGroups } = this.props;
+    setCollapsed(categoryGroups.map(g => g.id));
+  };
+
   render() {
     let {
       type,
@@ -253,6 +262,8 @@ class BudgetTable extends Component {
           <BudgetTotals
             MonthComponent={dataComponents.BudgetTotalsComponent}
             toggleHiddenCategories={this.toggleHiddenCategories}
+            expandAllCategories={this.expandAllCategories}
+            collapseAllCategories={this.collapseAllCategories}
           />
           <IntersectionBoundary.Provider value={this.budgetCategoriesRef}>
             <View
@@ -658,6 +669,8 @@ function RenderMonths({ component: Component, editingIndex, args, style }) {
 const BudgetTotals = memo(function BudgetTotals({
   MonthComponent,
   toggleHiddenCategories,
+  expandAllCategories,
+  collapseAllCategories,
 }) {
   const [menuOpen, setMenuOpen] = useState(false);
   return (
@@ -714,13 +727,25 @@ const BudgetTotals = memo(function BudgetTotals({
                 onMenuSelect={type => {
                   if (type === 'toggleVisibility') {
                     toggleHiddenCategories();
+                  } else if (type === 'expandAllCategories') {
+                    expandAllCategories();
+                  } else if (type === 'collapseAllCategories') {
+                    collapseAllCategories();
                   }
                   setMenuOpen(false);
                 }}
                 items={[
                   {
                     name: 'toggleVisibility',
-                    text: 'Toggle hidden categories',
+                    text: 'Toggle hidden',
+                  },
+                  {
+                    name: 'expandAllCategories',
+                    text: 'Expand all',
+                  },
+                  {
+                    name: 'collapseAllCategories',
+                    text: 'Collapse all',
                   },
                 ]}
               />
diff --git a/upcoming-release-notes/1143.md b/upcoming-release-notes/1143.md
new file mode 100644
index 000000000..8a6bd5fb8
--- /dev/null
+++ b/upcoming-release-notes/1143.md
@@ -0,0 +1,6 @@
+---
+category: Enhancements
+authors: [joel-jeremy]
+---
+
+Expand / collapse all categories
-- 
GitLab