Custom Reports: add save reports menu

packages/desktop-client/src/components/reports/ReportOptions.ts

@@ -11,8 +11,6 @@ const startDate = monthUtils.subMonths(monthUtils.currentMonth(), 5);
 const endDate = monthUtils.currentMonth();
 
 export const defaultReport: CustomReportEntity = {
-  id: undefined,
-  name: 'Default',
   startDate,
   endDate,
   isDateStatic: false,
@@ -24,7 +22,6 @@ export const defaultReport: CustomReportEntity = {
   showOffBudget: false,
   showHiddenCategories: false,
   showUncategorized: false,
-  selectedCategories: [],
   graphType: 'BarGraph',
   conditions: [],
   conditionsOp: 'and',

packages/desktop-client/src/components/reports/ReportSidebar.jsx

@@ -45,7 +45,7 @@ export function ReportSidebar({
 }) {
   const [menuOpen, setMenuOpen] = useState(false);
   const onSelectRange = cond => {
-    onReportChange(null, 'modify');
+    onReportChange({ type: 'modify' });
     setDateRange(cond);
     switch (cond) {
       case 'All time':
@@ -79,7 +79,7 @@ export function ReportSidebar({
   };
 
   const onChangeMode = cond => {
-    onReportChange(null, 'modify');
+    onReportChange({ type: 'modify' });
     setMode(cond);
     if (cond === 'time') {
       if (customReportItems.graphType === 'TableGraph') {
@@ -110,7 +110,7 @@ export function ReportSidebar({
   };
 
   const onChangeSplit = cond => {
-    onReportChange(null, 'modify');
+    onReportChange({ type: 'modify' });
     setGroupBy(cond);
     if (customReportItems.mode === 'total') {
       if (customReportItems.graphType !== 'TableGraph') {
@@ -128,7 +128,7 @@ export function ReportSidebar({
   };
 
   const onChangeBalanceType = cond => {
-    onReportChange(null, 'modify');
+    onReportChange({ type: 'modify' });
     setBalanceType(cond);
   };
 
@@ -275,6 +275,8 @@ export function ReportSidebar({
               >
                 <Menu
                   onMenuSelect={type => {
+                    onReportChange({ type: 'modify' });
+
                     if (type === 'show-hidden-categories') {
                       setShowHiddenCategories(
                         !customReportItems.showHiddenCategories,
@@ -464,7 +466,10 @@ export function ReportSidebar({
                 : false;
             })}
             selectedCategories={customReportItems.selectedCategories}
-            setSelectedCategories={setSelectedCategories}
+            setSelectedCategories={e => {
+              setSelectedCategories(e);
+              onReportChange({ type: 'modify' });
+            }}
             showHiddenCategories={customReportItems.showHiddenCategories}
           />
         </View>

packages/desktop-client/src/components/reports/ReportTopbar.jsx

@@ -14,10 +14,11 @@ import { View } from '../common/View';
 import { FilterButton } from '../filters/FiltersMenu';
 
 import { GraphButton } from './GraphButton';
-import { SaveReportMenuButton } from './SaveReport';
+import { SaveReport } from './SaveReport';
 
 export function ReportTopbar({
   customReportItems,
+  report,
   savedStatus,
   setGraphType,
   setTypeDisabled,
@@ -29,6 +30,7 @@ export function ReportTopbar({
   onApplyFilter,
   onChangeViews,
   onReportChange,
+  onResetReports,
 }) {
   return (
     <View
@@ -43,6 +45,7 @@ export function ReportTopbar({
         selected={customReportItems.graphType === 'TableGraph'}
         title="Data Table"
         onSelect={() => {
+          onReportChange({ type: 'modify' });
           setGraphType('TableGraph');
           onChangeViews('viewLegend', false);
           setTypeDisabled([]);
@@ -60,6 +63,7 @@ export function ReportTopbar({
           customReportItems.graphType === 'StackedBarGraph'
         }
         onSelect={() => {
+          onReportChange({ type: 'modify' });
           if (customReportItems.mode === 'total') {
             setGraphType('BarGraph');
             if (['Net'].includes(customReportItems.balanceType)) {
@@ -84,6 +88,7 @@ export function ReportTopbar({
         title="Area Graph"
         selected={customReportItems.graphType === 'AreaGraph'}
         onSelect={() => {
+          onReportChange({ type: 'modify' });
           setGraphType('AreaGraph');
           setGroupBy('Month');
           onChangeViews('viewLegend', false);
@@ -98,6 +103,7 @@ export function ReportTopbar({
         title="Donut Graph"
         selected={customReportItems.graphType === 'DonutGraph'}
         onSelect={() => {
+          onReportChange({ type: 'modify' });
           setGraphType('DonutGraph');
           setTypeDisabled(['Net']);
           setBalanceType('Payment');
@@ -166,11 +172,17 @@ export function ReportTopbar({
         hover
         onApply={e => {
           onApplyFilter(e);
-          onReportChange(null, 'modify');
+          onReportChange({ type: 'modify' });
         }}
       />
       <View style={{ flex: 1 }} />
-      <SaveReportMenuButton savedStatus={savedStatus} />
+      <SaveReport
+        customReportItems={customReportItems}
+        report={report}
+        savedStatus={savedStatus}
+        onReportChange={onReportChange}
+        onResetReports={onResetReports}
+      />
     </View>
   );
 }

packages/desktop-client/src/components/reports/SaveReport.tsx

@@ -1,45 +1,132 @@
-// @ts-strict-ignore
-import React, { useState } from 'react';
+import React, { createRef, useState } from 'react';
+
+import { v4 as uuidv4 } from 'uuid';
+
+//import { send, sendCatch } from 'loot-core/src/platform/client/fetch';
+import { type CustomReportEntity } from 'loot-core/src/types/models';
 
 import { SvgExpandArrow } from '../../icons/v0';
 import { Button } from '../common/Button';
-import { Menu } from '../common/Menu';
-import { MenuTooltip } from '../common/MenuTooltip';
 import { Text } from '../common/Text';
 import { View } from '../common/View';
 
-function SaveReportMenu({ setMenuOpen }) {
-  return (
-    <MenuTooltip width={150} onClose={() => setMenuOpen(false)}>
-      <Menu
-        onMenuSelect={item => {
-          switch (item) {
-            case 'save':
-            case 'clear':
-              setMenuOpen(false);
-              break;
-            default:
-          }
-        }}
-        items={[
-          {
-            name: 'save',
-            text: 'Save new report',
-            disabled: true,
-          },
-          {
-            name: 'clear',
-            text: 'Clear all',
-            disabled: true,
-          },
-        ]}
-      />
-    </MenuTooltip>
-  );
-}
+import { SaveReportMenu } from './SaveReportMenu';
+import { SaveReportName } from './SaveReportName';
 
-export function SaveReportMenuButton({ savedStatus }: { savedStatus: string }) {
+type SaveReportProps<T extends CustomReportEntity = CustomReportEntity> = {
+  customReportItems: T;
+  report: CustomReportEntity;
+  savedStatus: string;
+  onReportChange: ({
+    savedReport,
+    type,
+  }: {
+    savedReport?: T;
+    type: string;
+  }) => void;
+  onResetReports: () => void;
+};
+
+export function SaveReport({
+  customReportItems,
+  report,
+  savedStatus,
+  onReportChange,
+  onResetReports,
+}: SaveReportProps) {
+  const [nameMenuOpen, setNameMenuOpen] = useState(false);
   const [menuOpen, setMenuOpen] = useState(false);
+  const [menuItem, setMenuItem] = useState('');
+  const [err, setErr] = useState('');
+  const [res, setRes] = useState('');
+  const [name, setName] = useState(report.name);
+  const inputRef = createRef<HTMLInputElement>();
+
+  const onAddUpdate = async (menuChoice: string) => {
+    let savedReport: CustomReportEntity;
+    //save existing states
+    savedReport = {
+      ...report,
+      ...customReportItems,
+    };
+
+    if (menuChoice === 'save-report') {
+      setRes('');
+      //create new flow
+      /*
+      res = await sendCatch('report/create', {
+        ...savedReport,
+      });
+      */
+      savedReport = {
+        ...savedReport,
+        id: uuidv4(),
+        name,
+      };
+    }
+
+    if (menuChoice === 'rename-report') {
+      //rename
+      savedReport = {
+        ...savedReport,
+        name,
+      };
+    }
+
+    if (menuChoice === 'update-report') {
+      //send update and rename to DB
+      /*
+      res = await sendCatch('report/update', {
+        ...savedReport,
+      });
+      */
+    }
+    if (res !== '') {
+      setErr(res);
+      setNameMenuOpen(true);
+    } else {
+      setNameMenuOpen(false);
+      onReportChange({
+        savedReport,
+        type: menuChoice === 'rename-report' ? 'rename' : 'add-update',
+      });
+    }
+  };
+
+  const onMenuSelect = async (item: string) => {
+    setMenuItem(item);
+    switch (item) {
+      case 'rename-report':
+        setErr('');
+        setMenuOpen(false);
+        setNameMenuOpen(true);
+        break;
+      case 'delete-report':
+        setMenuOpen(false);
+        //await send('report/delete', id);
+        onResetReports();
+        break;
+      case 'update-report':
+        setErr('');
+        setMenuOpen(false);
+        onAddUpdate(item);
+        break;
+      case 'save-report':
+        setErr('');
+        setMenuOpen(false);
+        setNameMenuOpen(true);
+        break;
+      case 'reload-report':
+        setMenuOpen(false);
+        onReportChange({ type: 'reload' });
+        break;
+      case 'reset-report':
+        setMenuOpen(false);
+        onResetReports();
+        break;
+      default:
+    }
+  };
 
   return (
     <View
@@ -63,12 +150,29 @@ export function SaveReportMenuButton({ savedStatus }: { savedStatus: string }) {
             flexShrink: 0,
           }}
         >
-          Unsaved Report&nbsp;
+          {!report.id ? 'Unsaved report' : report.name}&nbsp;
         </Text>
         {savedStatus === 'modified' && <Text>(modified)&nbsp;</Text>}
         <SvgExpandArrow width={8} height={8} style={{ marginRight: 5 }} />
       </Button>
-      {menuOpen && <SaveReportMenu setMenuOpen={setMenuOpen} />}
+      {menuOpen && (
+        <SaveReportMenu
+          onClose={() => setMenuOpen(false)}
+          report={report}
+          onMenuSelect={onMenuSelect}
+          savedStatus={savedStatus}
+        />
+      )}
+      {nameMenuOpen && (
+        <SaveReportName
+          onClose={() => setNameMenuOpen(false)}
+          menuItem={menuItem}
+          setName={setName}
+          inputRef={inputRef}
+          onAddUpdate={onAddUpdate}
+          err={err}
+        />
+      )}
     </View>
   );
 }