Skip to content

Commit

Permalink
Custom Reports: Add filters to sessionStorage (#2612)
Browse files Browse the repository at this point in the history 
* Add filters to sessionStorage

* notes

* setSessionReports util
  • Loading branch information
@carkom
carkom authored Apr 18, 2024
1 parent 407ad4d commit 97ec8f8
Show file tree
Hide file tree
Showing 8 changed files with 90 additions and 88 deletions.
5 changes: 5 additions & 0 deletions packages/desktop-client/src/components/reports/ChooseGraph.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
import React, { useRef } from 'react';

import { type GroupedEntity } from 'loot-core/src/types/models/reports';
import { type RuleConditionEntity } from 'loot-core/types/models/rule';

import { type CSSProperties } from '../../style';
import { styles } from '../../style/styles';
Expand All @@ -20,6 +21,7 @@ import { ReportOptions } from './ReportOptions';

type ChooseGraphProps = {
data: GroupedEntity;
filters?: RuleConditionEntity[];
mode: string;
graphType: string;
balanceType: string;
Expand All @@ -36,6 +38,7 @@ type ChooseGraphProps = {

export function ChooseGraph({
data,
filters,
mode,
graphType,
balanceType,
Expand Down Expand Up @@ -101,6 +104,7 @@ export function ChooseGraph({
style={graphStyle}
compact={compact}
data={data}
filters={filters}
groupBy={groupBy}
balanceTypeOp={balanceTypeOp}
viewLabels={viewLabels}
Expand All @@ -118,6 +122,7 @@ export function ChooseGraph({
style={graphStyle}
compact={compact}
data={data}
filters={filters}
groupBy={groupBy}
balanceTypeOp={balanceTypeOp}
viewLabels={viewLabels}
Expand Down
89 changes: 22 additions & 67 deletions packages/desktop-client/src/components/reports/ReportSidebar.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import { getLiveRange } from './getLiveRange';
import { ModeButton } from './ModeButton';
import { ReportOptions } from './ReportOptions';
import { validateEnd, validateStart } from './reportRanges';
import { setSessionReport } from './setSessionReport';

export function ReportSidebar({
customReportItems,
Expand Down Expand Up @@ -44,11 +45,7 @@ export function ReportSidebar({
}) {
const [menuOpen, setMenuOpen] = useState(false);
const onSelectRange = cond => {
const storedReport = JSON.parse(sessionStorage.getItem('report'));
sessionStorage.setItem(
'report',
JSON.stringify({ ...storedReport, dateRange: cond }),
);
setSessionReport('dateRange', cond);
onReportChange({ type: 'modify' });
setDateRange(cond);
onChangeDates(
Expand All @@ -57,29 +54,19 @@ export function ReportSidebar({
};

const onChangeMode = cond => {
const storedReport = JSON.parse(sessionStorage.getItem('report'));
sessionStorage.setItem(
'report',
JSON.stringify({ ...storedReport, mode: cond }),
);
setSessionReport('mode', cond);
onReportChange({ type: 'modify' });
setMode(cond);
let graph;
if (cond === 'time') {
if (customReportItems.graphType === 'BarGraph') {
sessionStorage.setItem(
'report',
JSON.stringify({ ...storedReport, graphType: 'StackedBarGraph' }),
);
setSessionReport('graphType', 'StackedBarGraph');
setGraphType('StackedBarGraph');
graph = 'StackedBarGraph';
}
} else {
if (customReportItems.graphType === 'StackedBarGraph') {
sessionStorage.setItem(
'report',
JSON.stringify({ ...storedReport, graphType: 'BarGraph' }),
);
setSessionReport('graphType', 'BarGraph');
setGraphType('BarGraph');
graph = 'BarGraph';
}
Expand All @@ -88,22 +75,14 @@ export function ReportSidebar({
};

const onChangeSplit = cond => {
const storedReport = JSON.parse(sessionStorage.getItem('report'));
sessionStorage.setItem(
'report',
JSON.stringify({ ...storedReport, groupBy: cond }),
);
setSessionReport('groupBy', cond);
onReportChange({ type: 'modify' });
setGroupBy(cond);
defaultItems(cond);
};

const onChangeBalanceType = cond => {
const storedReport = JSON.parse(sessionStorage.getItem('report'));
sessionStorage.setItem(
'report',
JSON.stringify({ ...storedReport, balanceType: cond }),
);
setSessionReport('balanceType', cond);
onReportChange({ type: 'modify' });
setBalanceType(cond);
};
Expand Down Expand Up @@ -203,6 +182,7 @@ export function ReportSidebar({
<Select
value={customReportItems.interval}
onChange={e => {
setSessionReport('interval', e);
setInterval(e);
onReportChange({ type: 'modify' });
if (
Expand Down Expand Up @@ -249,49 +229,32 @@ export function ReportSidebar({
>
<Menu
onMenuSelect={type => {
const storedReport = JSON.parse(
sessionStorage.getItem('report'),
);
onReportChange({ type: 'modify' });

if (type === 'show-hidden-categories') {
sessionStorage.setItem(
'report',
JSON.stringify({
...storedReport,
showHiddenCategories:
!customReportItems.showHiddenCategories,
}),
setSessionReport(
'showHiddenCategories',
!customReportItems.showHiddenCategories,
);
setShowHiddenCategories(
!customReportItems.showHiddenCategories,
);
} else if (type === 'show-off-budget') {
sessionStorage.setItem(
'report',
JSON.stringify({
...storedReport,
showOffBudget: !customReportItems.showOffBudget,
}),
setSessionReport(
'showOffBudget',
!customReportItems.showOffBudget,
);
setShowOffBudget(!customReportItems.showOffBudget);
} else if (type === 'show-empty-items') {
sessionStorage.setItem(
'report',
JSON.stringify({
...storedReport,
showEmpty: !customReportItems.showEmpty,
}),
setSessionReport(
'showEmpty',
!customReportItems.showEmpty,
);
setShowEmpty(!customReportItems.showEmpty);
} else if (type === 'show-uncategorized') {
sessionStorage.setItem(
'report',
JSON.stringify({
...storedReport,
showUncategorized:
!customReportItems.showUncategorized,
}),
setSessionReport(
'showUncategorized',
!customReportItems.showUncategorized,
);
setShowUncategorized(
!customReportItems.showUncategorized,
Expand Down Expand Up @@ -352,11 +315,7 @@ export function ReportSidebar({
<ModeButton
selected={!customReportItems.isDateStatic}
onSelect={() => {
const storedReport = JSON.parse(sessionStorage.getItem('report'));
sessionStorage.setItem(
'report',
JSON.stringify({ ...storedReport, isDateStatic: false }),
);
setSessionReport('isDateStatic', false);
setIsDateStatic(false);
onSelectRange(customReportItems.dateRange);
}}
Expand All @@ -366,11 +325,7 @@ export function ReportSidebar({
<ModeButton
selected={customReportItems.isDateStatic}
onSelect={() => {
const storedReport = JSON.parse(sessionStorage.getItem('report'));
sessionStorage.setItem(
'report',
JSON.stringify({ ...storedReport, isDateStatic: true }),
);
setSessionReport('isDateStatic', true);
setIsDateStatic(true);
onChangeDates(
customReportItems.startDate,
Expand Down
8 changes: 3 additions & 5 deletions packages/desktop-client/src/components/reports/ReportTopbar.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import { FilterButton } from '../filters/FiltersMenu';

import { GraphButton } from './GraphButton';
import { SaveReport } from './SaveReport';
import { setSessionReport } from './setSessionReport';

export function ReportTopbar({
customReportItems,
Expand All @@ -32,11 +33,7 @@ export function ReportTopbar({
defaultItems,
}) {
const onChangeGraph = cond => {
const storedReport = JSON.parse(sessionStorage.getItem('report'));
sessionStorage.setItem(
'report',
JSON.stringify({ ...storedReport, graphType: cond }),
);
setSessionReport('graphType', cond);
onReportChange({ type: 'modify' });
setGraphType(cond);
defaultItems(cond);
Expand Down Expand Up @@ -171,6 +168,7 @@ export function ReportTopbar({
compact
hover
onApply={e => {
setSessionReport('conditions', [...customReportItems.conditions, e]);
onApplyFilter(e);
onReportChange({ type: 'modify' });
}}
Expand Down
4 changes: 4 additions & 0 deletions packages/desktop-client/src/components/reports/graphs/BarGraph.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ import {
amountToCurrencyNoDecimal,
} from 'loot-core/src/shared/util';
import { type GroupedEntity } from 'loot-core/src/types/models/reports';
import { type RuleConditionEntity } from 'loot-core/types/models/rule';

import { useAccounts } from '../../../hooks/useAccounts';
import { useCategories } from '../../../hooks/useCategories';
Expand Down Expand Up @@ -132,6 +133,7 @@ const customLabel = (props, typeOp) => {
type BarGraphProps = {
style?: CSSProperties;
data: GroupedEntity;
filters: RuleConditionEntity[];
groupBy: string;
balanceTypeOp: string;
compact?: boolean;
Expand All @@ -143,6 +145,7 @@ type BarGraphProps = {
export function BarGraph({
style,
data,
filters,
groupBy,
balanceTypeOp,
compact,
Expand Down Expand Up @@ -187,6 +190,7 @@ export function BarGraph({
const offBudgetAccounts = accounts.filter(f => f.offbudget).map(e => e.id);

const conditions = [
...filters,
{ field, op: 'is', value: item.id, type: 'id' },
{
field: 'date',
Expand Down
4 changes: 4 additions & 0 deletions packages/desktop-client/src/components/reports/graphs/DonutGraph.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { PieChart, Pie, Cell, Sector, ResponsiveContainer } from 'recharts';

import { amountToCurrency } from 'loot-core/src/shared/util';
import { type GroupedEntity } from 'loot-core/src/types/models/reports';
import { type RuleConditionEntity } from 'loot-core/types/models/rule';

import { useAccounts } from '../../../hooks/useAccounts';
import { useCategories } from '../../../hooks/useCategories';
Expand Down Expand Up @@ -176,6 +177,7 @@ const customLabel = props => {
type DonutGraphProps = {
style?: CSSProperties;
data: GroupedEntity;
filters: RuleConditionEntity[];
groupBy: string;
balanceTypeOp: string;
compact?: boolean;
Expand All @@ -187,6 +189,7 @@ type DonutGraphProps = {
export function DonutGraph({
style,
data,
filters,
groupBy,
balanceTypeOp,
compact,
Expand All @@ -211,6 +214,7 @@ export function DonutGraph({
const offBudgetAccounts = accounts.filter(f => f.offbudget).map(e => e.id);

const conditions = [
...filters,
{ field, op: 'is', value: item.id, type: 'id' },
{
field: 'date',
Expand Down
Loading

0 comments on commit 97ec8f8

Please sign in to comment.