report sorting on dashboard (#4276)

* fix: report sorting on dashboard * chore: note * chore: feedback * chore: fix vrt's * Update packages/loot-core/migrations/1736640000000__custom_report_sorting.sql Co-authored-by: Matt Fiddaman <github@m.fiddaman.uk> * chore: use new migration * Update packages/loot-core/migrations/1738491452000__sorting_rename.sql Co-authored-by: Matt Fiddaman <github@m.fiddaman.uk> --------- Co-authored-by: Matt Fiddaman <github@m.fiddaman.uk>
actualbudget · Feb 2, 2025 · b14c77a · b14c77a
1 parent 64df0e1
commit b14c77a
Show file tree

Hide file tree

Showing 8 changed files with 48 additions and 17 deletions.
diff --git a/packages/desktop-client/src/components/reports/ReportOptions.ts b/packages/desktop-client/src/components/reports/ReportOptions.ts
@@ -7,6 +7,7 @@ import {
   type CategoryEntity,
   type CategoryGroupEntity,
   type PayeeEntity,
+  type sortByOpType,
 } from 'loot-core/src/types/models';
 
 const startDate = monthUtils.subMonths(monthUtils.currentMonth(), 5) + '-01';
@@ -23,7 +24,7 @@ export const defaultReport: CustomReportEntity = {
   groupBy: 'Category',
   interval: 'Monthly',
   balanceType: 'Payment',
-  sortBy: 'Descending',
+  sortBy: 'desc',
   showEmpty: false,
   showOffBudget: false,
   showHiddenCategories: false,
@@ -50,7 +51,10 @@ const groupByOptions = [
   { description: 'Interval' },
 ];
 
-const sortByOptions = [
+const sortByOptions: {
+  description: string;
+  format: sortByOpType;
+}[] = [
   { description: t('Ascending'), format: 'asc' as const },
   { description: t('Descending'), format: 'desc' as const },
   { description: t('Name'), format: 'name' as const },

diff --git a/packages/desktop-client/src/components/reports/ReportSidebar.tsx b/packages/desktop-client/src/components/reports/ReportSidebar.tsx
@@ -5,7 +5,10 @@ import * as monthUtils from 'loot-core/src/shared/months';
 import { type CategoryEntity } from 'loot-core/types/models/category';
 import { type CategoryGroupEntity } from 'loot-core/types/models/category-group';
 import { type TimeFrame } from 'loot-core/types/models/dashboard';
-import { type CustomReportEntity } from 'loot-core/types/models/reports';
+import {
+  type CustomReportEntity,
+  type sortByOpType,
+} from 'loot-core/types/models/reports';
 import { type SyncedPrefs } from 'loot-core/types/prefs';
 
 import { styles } from '../../style/styles';
@@ -143,7 +146,8 @@ export function ReportSidebar({
     setBalanceType(cond);
   };
 
-  const onChangeSortBy = (cond: string) => {
+  const onChangeSortBy = (cond?: sortByOpType) => {
+    cond ??= 'desc';
     setSessionReport('sortBy', cond);
     onReportChange({ type: 'modify' });
     setSortBy(cond);
@@ -297,12 +301,12 @@ export function ReportSidebar({
             </Text>
             <Select
               value={customReportItems.sortBy}
-              onChange={e => onChangeSortBy(e)}
+              onChange={(e?: sortByOpType) => onChangeSortBy(e)}
               options={ReportOptions.sortBy.map(option => [
-                option.description,
+                option.format,
                 option.description,
               ])}
-              disabledKeys={disabledItems('sort')}
+              disabledKeys={disabledItems('sort') as sortByOpType[]}
             />
           </View>
         )}

diff --git a/packages/desktop-client/src/components/reports/disabledList.ts b/packages/desktop-client/src/components/reports/disabledList.ts
@@ -1,5 +1,7 @@
 import { t } from 'i18next';
 
+import { type sortByOpType } from 'loot-core/types/models';
+
 const intervalOptions = [
   {
     description: t('Daily'),
@@ -48,7 +50,7 @@ type graphOptions = {
   defaultSplit: string;
   disabledType: string[];
   defaultType: string;
-  defaultSort: string;
+  defaultSort: sortByOpType;
   disableLegend?: boolean;
   disableLabel?: boolean;
   disableSort?: boolean;
@@ -62,15 +64,15 @@ const totalGraphOptions: graphOptions[] = [
     defaultType: 'Payment',
     disableLegend: true,
     disableLabel: true,
-    defaultSort: 'Budget',
+    defaultSort: 'budget',
   },
   {
     description: 'BarGraph',
     disabledSplit: [],
     defaultSplit: 'Category',
     disabledType: [],
     defaultType: 'Payment',
-    defaultSort: 'Descending',
+    defaultSort: 'desc',
   },
   {
     description: 'AreaGraph',
@@ -80,15 +82,15 @@ const totalGraphOptions: graphOptions[] = [
     defaultType: 'Payment',
     disableLegend: true,
     disableSort: true,
-    defaultSort: 'Descending',
+    defaultSort: 'desc',
   },
   {
     description: 'DonutGraph',
     disabledSplit: [],
     defaultSplit: 'Category',
     disabledType: ['Net'],
     defaultType: 'Payment',
-    defaultSort: 'Descending',
+    defaultSort: 'desc',
   },
 ];
 
@@ -102,7 +104,7 @@ const timeGraphOptions: graphOptions[] = [
     disableLegend: true,
     disableLabel: true,
     disableSort: true,
-    defaultSort: 'Descending',
+    defaultSort: 'desc',
   },
   {
     description: 'StackedBarGraph',
@@ -111,7 +113,7 @@ const timeGraphOptions: graphOptions[] = [
     disabledType: [],
     defaultType: 'Payment',
     disableSort: true,
-    defaultSort: 'Descending',
+    defaultSort: 'desc',
   },
   {
     description: 'LineGraph',
@@ -122,7 +124,7 @@ const timeGraphOptions: graphOptions[] = [
     disableLegend: false,
     disableLabel: true,
     disableSort: true,
-    defaultSort: 'Descending',
+    defaultSort: 'desc',
   },
 ];
 

diff --git a/packages/desktop-client/src/components/reports/reports/CustomReport.tsx b/packages/desktop-client/src/components/reports/reports/CustomReport.tsx
@@ -363,7 +363,7 @@ function CustomReportInner({ report: initialReport }: CustomReportInnerProps) {
 
   const balanceTypeOp: balanceTypeOpType =
     ReportOptions.balanceTypeMap.get(balanceType) || 'totalDebts';
-  const sortByOp: sortByOpType = ReportOptions.sortByMap.get(sortBy) || 'desc';
+  const sortByOp: sortByOpType = sortBy || 'desc';
   const payees = usePayees();
   const accounts = useAccounts();
 

diff --git a/packages/desktop-client/src/components/reports/reports/GetCardData.tsx b/packages/desktop-client/src/components/reports/reports/GetCardData.tsx
@@ -129,6 +129,7 @@ export function GetCardData({
       showUncategorized: report.showUncategorized,
       balanceTypeOp: ReportOptions.balanceTypeMap.get(report.balanceType),
       firstDayOfWeekIdx,
+      sortByOp: report.sortBy,
     });
   }, [report, categories, startDate, endDate, firstDayOfWeekIdx]);
   const getGraphData = useMemo(() => {
@@ -149,6 +150,7 @@ export function GetCardData({
       accounts,
       graphType: report.graphType,
       firstDayOfWeekIdx,
+      sortByOp: report.sortBy,
     });
   }, [
     report,

diff --git a/packages/loot-core/migrations/1738491452000__sorting_rename.sql b/packages/loot-core/migrations/1738491452000__sorting_rename.sql
@@ -0,0 +1,13 @@
+BEGIN TRANSACTION;
+
+ALTER TABLE custom_reports RENAME COLUMN sort_by TO sort_by_old;
+ALTER TABLE custom_reports ADD COLUMN sort_by TEXT DEFAULT 'desc';
+
+UPDATE custom_reports SET sort_by = 'desc' where sort_by_old = 'Descending';
+UPDATE custom_reports SET sort_by = 'asc' where sort_by_old = 'Ascending';
+UPDATE custom_reports SET sort_by = 'budget' where sort_by_old = 'Budget';
+UPDATE custom_reports SET sort_by = 'name' where sort_by_old = 'Name';
+
+ALTER TABLE custom_reports DROP COLUMN sort_by_old;
+
+COMMIT;
diff --git a/packages/loot-core/src/types/models/reports.d.ts b/packages/loot-core/src/types/models/reports.d.ts
@@ -11,7 +11,7 @@ export interface CustomReportEntity {
   groupBy: string;
   interval: string;
   balanceType: string;
-  sortBy: string;
+  sortBy?: sortByOpType;
   showEmpty: boolean;
   showOffBudget: boolean;
   showHiddenCategories: boolean;

diff --git a/upcoming-release-notes/4276.md b/upcoming-release-notes/4276.md
@@ -0,0 +1,6 @@
+---
+category: Enhancements
+authors: [UnderKoen]
+---
+
+Show sorting of reports on the dashboard