From c82a6dc5efcb540dd4e1ffedf18701229be9caa5 Mon Sep 17 00:00:00 2001
From: Neil <55785687+carkom@users.noreply.github.com>
Date: Thu, 14 Mar 2024 19:35:59 +0000
Subject: [PATCH] Custom Reports disabled list (#2410)

* Add interval split and menu items

* notes

* disabledList work

* notes

* fix

* fix balanceType

* rework constants

* review fixes
---
 .../src/components/reports/ReportOptions.ts   |   2 +-
 .../src/components/reports/ReportSidebar.jsx  |  56 ++-------
 .../src/components/reports/ReportTopbar.jsx   |  50 +++-----
 .../src/components/reports/disabledList.ts    | 117 ++++++++++++++++++
 .../reports/reports/CustomReport.jsx          |  72 +++++++++--
 upcoming-release-notes/2410.md                |   6 +
 6 files changed, 219 insertions(+), 84 deletions(-)
 create mode 100644 packages/desktop-client/src/components/reports/disabledList.ts
 create mode 100644 upcoming-release-notes/2410.md

diff --git a/packages/desktop-client/src/components/reports/ReportOptions.ts b/packages/desktop-client/src/components/reports/ReportOptions.ts
index d8eda05e91e..b62b6c367b3 100644
--- a/packages/desktop-client/src/components/reports/ReportOptions.ts
+++ b/packages/desktop-client/src/components/reports/ReportOptions.ts
@@ -64,7 +64,7 @@ const intervalOptions = [
 ];
 
 export const ReportOptions = {
-  groupBy: groupByOptions,
+  groupBy: groupByOptions.map(item => item.description),
   balanceType: balanceTypeOptions,
   balanceTypeMap: new Map(
     balanceTypeOptions.map(item => [item.description, item.format]),
diff --git a/packages/desktop-client/src/components/reports/ReportSidebar.jsx b/packages/desktop-client/src/components/reports/ReportSidebar.jsx
index 1c0125d39bd..2b42b4af260 100644
--- a/packages/desktop-client/src/components/reports/ReportSidebar.jsx
+++ b/packages/desktop-client/src/components/reports/ReportSidebar.jsx
@@ -27,8 +27,6 @@ export function ReportSidebar({
   dateRangeLine,
   allMonths,
   setDateRange,
-  typeDisabled,
-  setTypeDisabled,
   setGraphType,
   setGroupBy,
   setInterval,
@@ -41,8 +39,10 @@ export function ReportSidebar({
   setShowUncategorized,
   setSelectedCategories,
   onChangeDates,
-  onChangeViews,
   onReportChange,
+  disabledItems,
+  defaultItems,
+  defaultModeItems,
 }) {
   const [menuOpen, setMenuOpen] = useState(false);
   const onSelectRange = cond => {
@@ -87,50 +87,25 @@ export function ReportSidebar({
   const onChangeMode = cond => {
     onReportChange({ type: 'modify' });
     setMode(cond);
+    let graph;
     if (cond === 'time') {
-      if (customReportItems.graphType === 'TableGraph') {
-        setTypeDisabled([]);
-      } else {
-        setTypeDisabled(['Net']);
-        if (['Net'].includes(customReportItems.balanceType)) {
-          setBalanceType('Payment');
-        }
-      }
       if (customReportItems.graphType === 'BarGraph') {
         setGraphType('StackedBarGraph');
-      }
-      if (['AreaGraph', 'DonutGraph'].includes(customReportItems.graphType)) {
-        setGraphType('TableGraph');
-        onChangeViews('viewLegend', false);
-      }
-      if (customReportItems.groupBy === 'Interval') {
-        setGroupBy('Category');
+        graph = 'StackedBarGraph';
       }
     } else {
       if (customReportItems.graphType === 'StackedBarGraph') {
         setGraphType('BarGraph');
-      } else {
-        setTypeDisabled([]);
+        graph = 'BarGraph';
       }
     }
+    defaultModeItems(graph, cond);
   };
 
   const onChangeSplit = cond => {
     onReportChange({ type: 'modify' });
     setGroupBy(cond);
-    if (customReportItems.mode === 'total') {
-      if (customReportItems.graphType !== 'TableGraph') {
-        setTypeDisabled(
-          customReportItems.groupBy !== 'Interval' ? [] : ['Net'],
-        );
-      }
-    }
-    if (
-      ['Net'].includes(customReportItems.balanceType) &&
-      customReportItems.graphType !== 'TableGraph'
-    ) {
-      setBalanceType('Payment');
-    }
+    defaultItems(cond);
   };
 
   const onChangeBalanceType = cond => {
@@ -196,17 +171,8 @@ export function ReportSidebar({
           <Select
             value={customReportItems.groupBy}
             onChange={e => onChangeSplit(e)}
-            options={ReportOptions.groupBy.map(option => [
-              option.description,
-              option.description,
-            ])}
-            disabledKeys={
-              customReportItems.mode === 'time'
-                ? ['Interval']
-                : customReportItems.graphType === 'AreaGraph'
-                  ? ['Category', 'Group', 'Payee', 'Account']
-                  : []
-            }
+            options={ReportOptions.groupBy.map(option => [option, option])}
+            disabledKeys={disabledItems('split')}
           />
         </View>
         <View
@@ -226,7 +192,7 @@ export function ReportSidebar({
               option.description,
               option.description,
             ])}
-            disabledKeys={typeDisabled}
+            disabledKeys={disabledItems('type')}
           />
         </View>
         <View
diff --git a/packages/desktop-client/src/components/reports/ReportTopbar.jsx b/packages/desktop-client/src/components/reports/ReportTopbar.jsx
index 81728a30b48..10e8eaf2363 100644
--- a/packages/desktop-client/src/components/reports/ReportTopbar.jsx
+++ b/packages/desktop-client/src/components/reports/ReportTopbar.jsx
@@ -21,15 +21,14 @@ export function ReportTopbar({
   report,
   savedStatus,
   setGraphType,
-  setTypeDisabled,
-  setBalanceType,
-  setGroupBy,
   viewLegend,
   viewSummary,
   viewLabels,
   onApplyFilter,
   onChangeViews,
   onReportChange,
+  disabledItems,
+  defaultItems,
 }) {
   return (
     <View
@@ -46,10 +45,10 @@ export function ReportTopbar({
         onSelect={() => {
           onReportChange({ type: 'modify' });
           setGraphType('TableGraph');
-          onChangeViews('viewLegend', false);
-          setTypeDisabled([]);
+          defaultItems('TableGraph');
         }}
         style={{ marginRight: 15 }}
+        disabled={disabledItems('TableGraph')}
       >
         <SvgQueue width={15} height={15} />
       </GraphButton>
@@ -63,21 +62,17 @@ export function ReportTopbar({
         }
         onSelect={() => {
           onReportChange({ type: 'modify' });
-          if (customReportItems.mode === 'total') {
-            setGraphType('BarGraph');
-            if (['Net'].includes(customReportItems.balanceType)) {
-              setBalanceType('Payment');
-            }
-            setTypeDisabled(
-              ['Interval'].includes(customReportItems.groupBy) ? [] : ['Net'],
-            );
-          } else {
-            setGraphType('StackedBarGraph');
-            setTypeDisabled(['Net']);
-            setBalanceType('Payment');
-          }
+          setGraphType(
+            customReportItems.mode === 'total' ? 'BarGraph' : 'StackedBarGraph',
+          );
+          defaultItems(
+            customReportItems.mode === 'total' ? 'BarGraph' : 'StackedBarGraph',
+          );
         }}
         style={{ marginRight: 15 }}
+        disabled={disabledItems(
+          customReportItems.mode === 'total' ? 'BarGraph' : 'StackedBarGraph',
+        )}
       >
         <SvgChartBar width={15} height={15} />
       </GraphButton>
@@ -87,12 +82,10 @@ export function ReportTopbar({
         onSelect={() => {
           onReportChange({ type: 'modify' });
           setGraphType('AreaGraph');
-          setGroupBy('Interval');
-          onChangeViews('viewLegend', false);
-          setTypeDisabled([]);
+          defaultItems('AreaGraph');
         }}
         style={{ marginRight: 15 }}
-        disabled={customReportItems.mode === 'total' ? false : true}
+        disabled={disabledItems('AreaGraph')}
       >
         <SvgChart width={15} height={15} />
       </GraphButton>
@@ -102,11 +95,10 @@ export function ReportTopbar({
         onSelect={() => {
           onReportChange({ type: 'modify' });
           setGraphType('DonutGraph');
-          setTypeDisabled(['Net']);
-          setBalanceType('Payment');
+          defaultItems('DonutGraph');
         }}
         style={{ marginRight: 15 }}
-        disabled={customReportItems.mode === 'total' ? false : true}
+        disabled={disabledItems('DonutGraph')}
       >
         <SvgChartPie width={15} height={15} />
       </GraphButton>
@@ -126,12 +118,7 @@ export function ReportTopbar({
         }}
         style={{ marginRight: 15 }}
         title="Show Legend"
-        disabled={
-          customReportItems.graphType === 'TableGraph' ||
-          customReportItems.graphType === 'AreaGraph'
-            ? true
-            : false
-        }
+        disabled={disabledItems('ShowLegend')}
       >
         <SvgListBullet width={15} height={15} />
       </GraphButton>
@@ -152,6 +139,7 @@ export function ReportTopbar({
         }}
         style={{ marginRight: 15 }}
         title="Show Labels"
+        disabled={disabledItems('ShowLabels')}
       >
         <SvgTag width={15} height={15} />
       </GraphButton>
diff --git a/packages/desktop-client/src/components/reports/disabledList.ts b/packages/desktop-client/src/components/reports/disabledList.ts
new file mode 100644
index 00000000000..b8fdb89d47e
--- /dev/null
+++ b/packages/desktop-client/src/components/reports/disabledList.ts
@@ -0,0 +1,117 @@
+const totalGraphOptions = [
+  {
+    description: 'TableGraph',
+    disabledSplit: [],
+    defaultSplit: 'Category',
+    disabledType: [],
+    defaultType: 'Payment',
+    disableLegend: true,
+    disableLabel: true,
+  },
+  {
+    description: 'BarGraph',
+    disabledSplit: [],
+    defaultSplit: 'Category',
+    disabledType: ['Net'],
+    defaultType: 'Payment',
+  },
+  {
+    description: 'AreaGraph',
+    disabledSplit: ['Category', 'Group', 'Payee', 'Account'],
+    defaultSplit: 'Interval',
+    disabledType: [],
+    defaultType: 'Payment',
+    disableLegend: true,
+  },
+  {
+    description: 'DonutGraph',
+    disabledSplit: [],
+    defaultSplit: 'Category',
+    disabledType: ['Net'],
+    defaultType: 'Payment',
+  },
+];
+
+const timeGraphOptions = [
+  {
+    description: 'TableGraph',
+    disabledSplit: ['Interval'],
+    defaultSplit: 'Category',
+    disabledType: [],
+    defaultType: 'Payment',
+    disableLegend: true,
+    disableLabel: true,
+  },
+  {
+    description: 'StackedBarGraph',
+    disabledSplit: ['Interval'],
+    defaultSplit: 'Category',
+    disabledType: ['Net'],
+    defaultType: 'Payment',
+  },
+];
+
+const modeOptions = [
+  {
+    description: 'total',
+    graphs: totalGraphOptions,
+    disabledGraph: [],
+    defaultGraph: 'TableGraph',
+  },
+  {
+    description: 'time',
+    graphs: timeGraphOptions,
+    disabledGraph: ['AreaGraph', 'DonutGraph'],
+    defaultGraph: 'TableGraph',
+  },
+];
+
+export const disabledList = {
+  mode: modeOptions,
+  modeGraphsMap: new Map(
+    modeOptions.map(item => [item.description, item.disabledGraph]),
+  ),
+  graphSplitMap: new Map(
+    modeOptions.map(item => [
+      item.description,
+      new Map([...item.graphs].map(f => [f.description, f.disabledSplit])),
+    ]),
+  ),
+  graphTypeMap: new Map(
+    modeOptions.map(item => [
+      item.description,
+      new Map([...item.graphs].map(f => [f.description, f.disabledType])),
+    ]),
+  ),
+  graphLegendMap: new Map(
+    modeOptions.map(item => [
+      item.description,
+      new Map([...item.graphs].map(f => [f.description, f.disableLegend])),
+    ]),
+  ),
+  graphLabelsMap: new Map(
+    modeOptions.map(item => [
+      item.description,
+      new Map([...item.graphs].map(f => [f.description, f.disableLabel])),
+    ]),
+  ),
+};
+
+export const defaultsList = {
+  mode: modeOptions,
+  modeGraphsMap: new Map(
+    modeOptions.map(item => [item.description, item.defaultGraph]),
+  ),
+  graphSplitMap: new Map(
+    modeOptions.map(item => [
+      item.description,
+      new Map([...item.graphs].map(f => [f.description, f.defaultSplit])),
+    ]),
+  ),
+  graphTypeMap: new Map(
+    modeOptions.map(item => [
+      item.description,
+      new Map([...item.graphs].map(f => [f.description, f.defaultType])),
+    ]),
+  ),
+};
diff --git a/packages/desktop-client/src/components/reports/reports/CustomReport.jsx b/packages/desktop-client/src/components/reports/reports/CustomReport.jsx
index e94d025d7ea..406c14991f9 100644
--- a/packages/desktop-client/src/components/reports/reports/CustomReport.jsx
+++ b/packages/desktop-client/src/components/reports/reports/CustomReport.jsx
@@ -20,6 +20,7 @@ import { View } from '../../common/View';
 import { AppliedFilters } from '../../filters/AppliedFilters';
 import { PrivacyFilter } from '../../PrivacyFilter';
 import { ChooseGraph } from '../ChooseGraph';
+import { defaultsList, disabledList } from '../disabledList';
 import { Header } from '../Header';
 import { LoadingIndicator } from '../LoadingIndicator';
 import { ReportLegend } from '../ReportLegend';
@@ -57,7 +58,6 @@ export function CustomReport() {
     : defaultReport;
 
   const [allMonths, setAllMonths] = useState(null);
-  const [typeDisabled, setTypeDisabled] = useState(['Net']);
 
   const [selectedCategories, setSelectedCategories] = useState(
     loadReport.selectedCategories,
@@ -230,6 +230,65 @@ export function CustomReport() {
     return null;
   }
 
+  const defaultModeItems = (graph, item) => {
+    const chooseGraph = graph || graphType;
+    const newGraph = disabledList.modeGraphsMap.get(item).includes(chooseGraph)
+      ? defaultsList.modeGraphsMap.get(item)
+      : chooseGraph;
+    if (disabledList.modeGraphsMap.get(item).includes(graphType)) {
+      setGraphType(newGraph);
+    }
+
+    if (disabledList.graphSplitMap.get(item).get(newGraph).includes(groupBy)) {
+      setGroupBy(defaultsList.graphSplitMap.get(item).get(newGraph));
+    }
+
+    if (
+      disabledList.graphTypeMap.get(item).get(newGraph).includes(balanceType)
+    ) {
+      setBalanceType(defaultsList.graphTypeMap.get(item).get(newGraph));
+    }
+  };
+
+  const defaultItems = item => {
+    const chooseGraph = ReportOptions.groupBy.includes(item) ? graphType : item;
+    if (
+      disabledList.graphSplitMap.get(mode).get(chooseGraph).includes(groupBy)
+    ) {
+      setGroupBy(defaultsList.graphSplitMap.get(mode).get(chooseGraph));
+    }
+    if (
+      disabledList.graphTypeMap.get(mode).get(chooseGraph).includes(balanceType)
+    ) {
+      setBalanceType(defaultsList.graphTypeMap.get(mode).get(chooseGraph));
+    }
+  };
+
+  const disabledItems = type => {
+    switch (type) {
+      case 'split':
+        return disabledList.graphSplitMap.get(mode).get(graphType);
+      case 'type':
+        return graphType === 'BarGraph' && groupBy === 'Interval'
+          ? []
+          : disabledList.graphTypeMap.get(mode).get(graphType);
+      case 'ShowLegend': {
+        if (disabledList.graphLegendMap.get(mode).get(graphType)) {
+          setViewLegendPref(false);
+        }
+        return disabledList.graphLegendMap.get(mode).get(graphType);
+      }
+      case 'ShowLabels': {
+        if (disabledList.graphLabelsMap.get(mode).get(graphType)) {
+          setViewLabelsPref(false);
+        }
+        return disabledList.graphLabelsMap.get(mode).get(graphType);
+      }
+      default:
+        return disabledList.modeGraphsMap.get(mode).includes(type);
+    }
+  };
+
   const onChangeDates = (startDate, endDate) => {
     setStartDate(startDate);
     setEndDate(endDate);
@@ -344,8 +403,6 @@ export function CustomReport() {
           dateRangeLine={dateRangeLine}
           allMonths={allMonths}
           setDateRange={setDateRange}
-          typeDisabled={typeDisabled}
-          setTypeDisabled={setTypeDisabled}
           setGraphType={setGraphType}
           setGroupBy={setGroupBy}
           setInterval={setInterval}
@@ -358,8 +415,10 @@ export function CustomReport() {
           setShowUncategorized={setShowUncategorized}
           setSelectedCategories={setSelectedCategories}
           onChangeDates={onChangeDates}
-          onChangeViews={onChangeViews}
           onReportChange={onReportChange}
+          disabledItems={disabledItems}
+          defaultItems={defaultItems}
+          defaultModeItems={defaultModeItems}
         />
         <View
           style={{
@@ -371,15 +430,14 @@ export function CustomReport() {
             report={report}
             savedStatus={savedStatus}
             setGraphType={setGraphType}
-            setTypeDisabled={setTypeDisabled}
-            setBalanceType={setBalanceType}
-            setGroupBy={setGroupBy}
             viewLegend={viewLegend}
             viewSummary={viewSummary}
             viewLabels={viewLabels}
             onApplyFilter={onApplyFilter}
             onChangeViews={onChangeViews}
             onReportChange={onReportChange}
+            disabledItems={disabledItems}
+            defaultItems={defaultItems}
           />
           {filters && filters.length > 0 && (
             <View
diff --git a/upcoming-release-notes/2410.md b/upcoming-release-notes/2410.md
new file mode 100644
index 00000000000..f97934733ad
--- /dev/null
+++ b/upcoming-release-notes/2410.md
@@ -0,0 +1,6 @@
+---
+category: Enhancements
+authors: [carkom]
+---
+
+Create a list where disabled items can be easily managed for custom reports.