Custom Reports disabled list (#2410)

* Add interval split and menu items * notes * disabledList work * notes * fix * fix balanceType * rework constants * review fixes
actualbudget · Mar 14, 2024 · c82a6dc · c82a6dc
1 parent ab97a3f
commit c82a6dc
Show file tree

Hide file tree

Showing 6 changed files with 219 additions and 84 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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])),
+    ]),
+  ),
+};