Custom Reports: add save reports menu

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

@@ -12,7 +12,7 @@ const endDate = monthUtils.currentMonth();
 
 export const defaultReport: CustomReportEntity = {
   id: undefined,
-  name: 'Default',
+  name: undefined,
   startDate,
   endDate,
   isDateStatic: false,

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

@@ -279,14 +279,18 @@ export function ReportSidebar({
                       setShowHiddenCategories(
                         !customReportItems.showHiddenCategories,
                       );
+                      onReportChange(null, 'modify');
                     } else if (type === 'show-off-budget') {
                       setShowOffBudget(!customReportItems.showOffBudget);
+                      onReportChange(null, 'modify');
                     } else if (type === 'show-empty-items') {
                       setShowEmpty(!customReportItems.showEmpty);
+                      onReportChange(null, 'modify');
                     } else if (type === 'show-uncategorized') {
                       setShowUncategorized(
                         !customReportItems.showUncategorized,
                       );
+                      onReportChange(null, 'modify');
                     }
                   }}
                   items={[
@@ -357,6 +361,7 @@ export function ReportSidebar({
                 customReportItems.startDate,
                 customReportItems.endDate,
               );
+              onReportChange(null, 'modify');
             }}
           >
             Static
@@ -398,15 +403,16 @@ export function ReportSidebar({
                 From:
               </Text>
               <Select
-                onChange={newValue =>
+                onChange={newValue => {
                   onChangeDates(
                     ...validateStart(
                       allMonths,
                       newValue,
                       customReportItems.endDate,
                     ),
-                  )
-                }
+                  );
+                  onReportChange(null, 'modify');
+                }}
                 value={customReportItems.startDate}
                 defaultLabel={monthUtils.format(
                   customReportItems.startDate,
@@ -426,15 +432,16 @@ export function ReportSidebar({
                 To:
               </Text>
               <Select
-                onChange={newValue =>
+                onChange={newValue => {
                   onChangeDates(
                     ...validateEnd(
                       allMonths,
                       customReportItems.startDate,
                       newValue,
                     ),
-                  )
-                }
+                  );
+                  onReportChange(null, 'modify');
+                }}
                 value={customReportItems.endDate}
                 options={allMonths.map(({ name, pretty }) => [name, pretty])}
               />

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

@@ -11,13 +11,14 @@ import {
 } from '../../icons/v1';
 import { theme } from '../../style';
 import { View } from '../common/View';
-import { FilterButton } from '../filters/FiltersMenu';
+import { FilterButton } from '../filters/FilterButton';
 
 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(null, 'modify');
           setGraphType('TableGraph');
           onChangeViews('viewLegend', false);
           setTypeDisabled([]);
@@ -60,6 +63,7 @@ export function ReportTopbar({
           customReportItems.graphType === 'StackedBarGraph'
         }
         onSelect={() => {
+          onReportChange(null, '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(null, 'modify');
           setGraphType('AreaGraph');
           setGroupBy('Month');
           onChangeViews('viewLegend', false);
@@ -98,6 +103,7 @@ export function ReportTopbar({
         title="Donut Graph"
         selected={customReportItems.graphType === 'DonutGraph'}
         onSelect={() => {
+          onReportChange(null, 'modify');
           setGraphType('DonutGraph');
           setTypeDisabled(['Net']);
           setBalanceType('Payment');
@@ -119,6 +125,7 @@ export function ReportTopbar({
       <GraphButton
         selected={viewLegend}
         onSelect={() => {
+          onReportChange(null, 'modify');
           onChangeViews('viewLegend');
         }}
         style={{ marginRight: 15 }}
@@ -169,8 +176,22 @@ export function ReportTopbar({
           onReportChange(null, 'modify');
         }}
       />
+      <FilterButton
+        compact
+        hover
+        onApply={e => {
+          onApplyFilter(e);
+          onReportChange(null, '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,134 @@
 // @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';
+
+type SaveReportProps<T extends CustomReportEntity = CustomReportEntity> = {
+  customReportItems: T;
+  report: CustomReportEntity;
+  savedStatus: string;
+  onReportChange: (savedReport: T, type: string) => void;
+  onResetReports: () => void;
+};
 
-export function SaveReportMenuButton({ savedStatus }: { savedStatus: string }) {
+export function SaveReport({
+  customReportItems,
+  report,
+  savedStatus,
+  onReportChange,
+  onResetReports,
+}: SaveReportProps) {
+  const [nameMenuOpen, setNameMenuOpen] = useState(false);
   const [menuOpen, setMenuOpen] = useState(false);
+  const [menuItem, setMenuItem] = useState(null);
+  const [err, setErr] = useState(null);
+  const [name, setName] = useState(report.name);
+  const inputRef = createRef<HTMLInputElement>();
+
+  const onAddUpdate = async () => {
+    let savedReport: CustomReportEntity;
+    let res;
+    //save existing states
+    savedReport = {
+      ...report,
+      ...customReportItems,
+    };
+
+    if (menuItem === 'save-report') {
+      //create new flow
+      /*
+      res = await sendCatch('report/create', {
+        ...savedReport,
+      });
+      */
+      savedReport = {
+        ...savedReport,
+        id: uuidv4(),
+        name,
+      };
+    }
+
+    if (menuItem === 'rename-report') {
+      //rename
+      savedReport = {
+        ...report,
+        name,
+      };
+    }
+
+    if (menuItem === 'update-report') {
+      savedReport = {
+        ...savedReport,
+        name: report.name,
+      };
+      //send update and rename to DB
+      /*
+      res = await sendCatch('report/update', {
+        ...savedReport,
+      });
+      */
+    }
+    if (res) {
+      setErr(res.error.message);
+      setNameMenuOpen(true);
+    } else {
+      setNameMenuOpen(false);
+      onReportChange(
+        savedReport,
+        menuItem === 'rename-report' ? 'rename' : 'add-update',
+      );
+    }
+  };
+
+  const onNameChange = cond => {
+    setName(cond);
+  };
+
+  const onMenuSelect = async item => {
+    setMenuItem(item);
+    switch (item) {
+      case 'rename-report':
+        setErr(null);
+        setMenuOpen(false);
+        setNameMenuOpen(true);
+        break;
+      case 'delete-report':
+        setMenuOpen(false);
+        //await send('report/delete', id);
+        onResetReports();
+        break;
+      case 'update-report':
+        setErr(null);
+        setMenuOpen(false);
+        onAddUpdate();
+        break;
+      case 'save-report':
+        setErr(null);
+        setMenuOpen(false);
+        setNameMenuOpen(true);
+        break;
+      case 'reload-report':
+        setMenuOpen(false);
+        onReportChange(null, 'reload');
+        break;
+      case 'reset-report':
+        setMenuOpen(false);
+        onResetReports();
+        break;
+      default:
+    }
+  };
 
   return (
     <View
@@ -63,12 +152,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}
+          onNameChange={onNameChange}
+          inputRef={inputRef}
+          onAddUpdate={onAddUpdate}
+          err={err}
+        />
+      )}
     </View>
   );
 }