From 96b744bb1e4790dbbefafc90086c1feedd76d68a Mon Sep 17 00:00:00 2001 From: UnderKoen Date: Wed, 30 Oct 2024 21:06:37 +0100 Subject: [PATCH 1/7] enhance: context menu on custom reports page --- .../src/components/reports/ReportCard.tsx | 70 ++++++++++++++----- 1 file changed, 51 insertions(+), 19 deletions(-) diff --git a/packages/desktop-client/src/components/reports/ReportCard.tsx b/packages/desktop-client/src/components/reports/ReportCard.tsx index 9954c118327..460e098d929 100644 --- a/packages/desktop-client/src/components/reports/ReportCard.tsx +++ b/packages/desktop-client/src/components/reports/ReportCard.tsx @@ -18,6 +18,7 @@ import { Popover } from '../common/Popover'; import { View } from '../common/View'; import { NON_DRAGGABLE_AREA_CLASS_NAME } from './constants'; +import { useFeatureFlag } from '../../hooks/useFeatureFlag'; type ReportCardProps = { isEditing?: boolean; @@ -125,10 +126,25 @@ type LayoutProps = { function Layout({ children, isEditing, menuItems, onMenuSelect }: LayoutProps) { const triggerRef = useRef(null); - const [menuOpen, setMenuOpen] = useState(false); + const viewRef = useRef(null); + const [menuOpen, setMenuOpen] = useState(null); + const [crossOffset, setCrossOffset] = useState(0); + const [offset, setOffset] = useState(0); + const contextMenusEnabled = useFeatureFlag('contextMenus'); + + const isContextMenu = menuOpen === 'context'; return ( { + if (!contextMenusEnabled) return; + e.preventDefault(); + setMenuOpen('context'); + const rect = e.currentTarget.getBoundingClientRect(); + setCrossOffset(e.clientX - rect.left); + setOffset(e.clientY - rect.bottom); + }} style={{ display: 'block', height: '100%', @@ -141,24 +157,40 @@ function Layout({ children, isEditing, menuItems, onMenuSelect }: LayoutProps) { }, }} > - {menuItems && isEditing && ( - - setMenuOpen(true)} /> + {menuItems && ( + <> + {isEditing && ( + + { + setCrossOffset(0); + setOffset(0); + setMenuOpen('button'); + }} + /> + + )} + setMenuOpen(false)} + triggerRef={isContextMenu ? viewRef : triggerRef} + isOpen={Boolean(menuOpen)} + onOpenChange={() => setMenuOpen(null)} + isNonModal + placement={isContextMenu ? 'bottom start' : 'bottom end'} + crossOffset={crossOffset} + offset={offset} > - + )} {children} From e39e45368b894a185ffff81d578221a809416fe1 Mon Sep 17 00:00:00 2001 From: UnderKoen Date: Sun, 3 Nov 2024 22:16:23 +0100 Subject: [PATCH 2/7] chore: release note --- upcoming-release-notes/3776.md | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 upcoming-release-notes/3776.md diff --git a/upcoming-release-notes/3776.md b/upcoming-release-notes/3776.md new file mode 100644 index 00000000000..d32b8936c5a --- /dev/null +++ b/upcoming-release-notes/3776.md @@ -0,0 +1,6 @@ +--- +category: Enhancements +authors: [UnderKoen] +--- + +Add context menu's to custom reports dashboard From 2df910e05cbf0eabc94ffd3e041c9da4c0f927ad Mon Sep 17 00:00:00 2001 From: UnderKoen Date: Sun, 3 Nov 2024 22:28:26 +0100 Subject: [PATCH 3/7] chore: lint --- packages/desktop-client/src/components/reports/ReportCard.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/desktop-client/src/components/reports/ReportCard.tsx b/packages/desktop-client/src/components/reports/ReportCard.tsx index 460e098d929..77958fbae63 100644 --- a/packages/desktop-client/src/components/reports/ReportCard.tsx +++ b/packages/desktop-client/src/components/reports/ReportCard.tsx @@ -8,6 +8,7 @@ import React, { import { type CustomReportEntity } from 'loot-core/src/types/models'; +import { useFeatureFlag } from '../../hooks/useFeatureFlag'; import { useIsInViewport } from '../../hooks/useIsInViewport'; import { useNavigate } from '../../hooks/useNavigate'; import { useResponsive } from '../../ResponsiveProvider'; @@ -18,7 +19,6 @@ import { Popover } from '../common/Popover'; import { View } from '../common/View'; import { NON_DRAGGABLE_AREA_CLASS_NAME } from './constants'; -import { useFeatureFlag } from '../../hooks/useFeatureFlag'; type ReportCardProps = { isEditing?: boolean; From 4506b85a60c8db294a5f91a26095e00a3499a1ea Mon Sep 17 00:00:00 2001 From: UnderKoen Date: Tue, 12 Nov 2024 20:40:28 +0100 Subject: [PATCH 4/7] chore: use both feature flags --- packages/desktop-client/src/components/reports/ReportCard.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/desktop-client/src/components/reports/ReportCard.tsx b/packages/desktop-client/src/components/reports/ReportCard.tsx index 77958fbae63..57efd3f51df 100644 --- a/packages/desktop-client/src/components/reports/ReportCard.tsx +++ b/packages/desktop-client/src/components/reports/ReportCard.tsx @@ -130,7 +130,8 @@ function Layout({ children, isEditing, menuItems, onMenuSelect }: LayoutProps) { const [menuOpen, setMenuOpen] = useState(null); const [crossOffset, setCrossOffset] = useState(0); const [offset, setOffset] = useState(0); - const contextMenusEnabled = useFeatureFlag('contextMenus'); + const contextMenusEnabled = + useFeatureFlag('contextMenus') && useFeatureFlag('reportBudget'); const isContextMenu = menuOpen === 'context'; From 41d9b143fd520ba88ad3857b2c12b23fa33bf8ad Mon Sep 17 00:00:00 2001 From: UnderKoen Date: Tue, 12 Nov 2024 20:43:27 +0100 Subject: [PATCH 5/7] chore: use both feature flags --- packages/desktop-client/src/components/reports/ReportCard.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/desktop-client/src/components/reports/ReportCard.tsx b/packages/desktop-client/src/components/reports/ReportCard.tsx index 0dad9279217..61c8c083807 100644 --- a/packages/desktop-client/src/components/reports/ReportCard.tsx +++ b/packages/desktop-client/src/components/reports/ReportCard.tsx @@ -124,8 +124,9 @@ function Layout({ children, isEditing, menuItems, onMenuSelect }: LayoutProps) { const [menuOpen, setMenuOpen] = useState(null); const [crossOffset, setCrossOffset] = useState(0); const [offset, setOffset] = useState(0); + const reportBudgetEnabled = useFeatureFlag('reportBudget'); const contextMenusEnabled = - useFeatureFlag('contextMenus') && useFeatureFlag('reportBudget'); + useFeatureFlag('contextMenus') && reportBudgetEnabled; const isContextMenu = menuOpen === 'context'; From ec5e83fde176957b285d0d3e81c1afc81ffa69a3 Mon Sep 17 00:00:00 2001 From: UnderKoen Date: Tue, 26 Nov 2024 21:04:37 +0100 Subject: [PATCH 6/7] chore: pr feedback --- packages/desktop-client/src/components/reports/ReportCard.tsx | 4 ++-- upcoming-release-notes/3776.md | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/desktop-client/src/components/reports/ReportCard.tsx b/packages/desktop-client/src/components/reports/ReportCard.tsx index 61c8c083807..360a16d3ca7 100644 --- a/packages/desktop-client/src/components/reports/ReportCard.tsx +++ b/packages/desktop-client/src/components/reports/ReportCard.tsx @@ -124,9 +124,9 @@ function Layout({ children, isEditing, menuItems, onMenuSelect }: LayoutProps) { const [menuOpen, setMenuOpen] = useState(null); const [crossOffset, setCrossOffset] = useState(0); const [offset, setOffset] = useState(0); - const reportBudgetEnabled = useFeatureFlag('reportBudget'); + const dashboardsEnabled = useFeatureFlag('dashboards'); const contextMenusEnabled = - useFeatureFlag('contextMenus') && reportBudgetEnabled; + useFeatureFlag('contextMenus') && dashboardsEnabled; const isContextMenu = menuOpen === 'context'; diff --git a/upcoming-release-notes/3776.md b/upcoming-release-notes/3776.md index d32b8936c5a..9107a1f0bad 100644 --- a/upcoming-release-notes/3776.md +++ b/upcoming-release-notes/3776.md @@ -3,4 +3,4 @@ category: Enhancements authors: [UnderKoen] --- -Add context menu's to custom reports dashboard +Add context menus to custom reports dashboard From 568cd77e5f8f38db49b7e1f55d815e25b0355659 Mon Sep 17 00:00:00 2001 From: UnderKoen Date: Tue, 17 Dec 2024 22:33:44 +0100 Subject: [PATCH 7/7] fix: changing name with context menu --- packages/desktop-client/src/components/reports/ReportCard.tsx | 4 +++- .../src/components/reports/reports/CashFlowCard.tsx | 1 + .../src/components/reports/reports/CustomReportListCards.tsx | 1 + .../src/components/reports/reports/MarkdownCard.tsx | 1 + .../src/components/reports/reports/NetWorthCard.tsx | 1 + .../src/components/reports/reports/SpendingCard.tsx | 1 + .../src/components/reports/reports/SummaryCard.tsx | 1 + 7 files changed, 9 insertions(+), 1 deletion(-) diff --git a/packages/desktop-client/src/components/reports/ReportCard.tsx b/packages/desktop-client/src/components/reports/ReportCard.tsx index 0ee43288083..2ec2acb2246 100644 --- a/packages/desktop-client/src/components/reports/ReportCard.tsx +++ b/packages/desktop-client/src/components/reports/ReportCard.tsx @@ -19,6 +19,7 @@ import { NON_DRAGGABLE_AREA_CLASS_NAME } from './constants'; type ReportCardProps = { isEditing?: boolean; + disableClick?: boolean; to?: string; children: ReactNode; menuItems?: ComponentProps['items']; @@ -29,6 +30,7 @@ type ReportCardProps = { export function ReportCard({ isEditing, + disableClick, to, menuItems, onMenuSelect, @@ -95,7 +97,7 @@ export function ReportCard({ navigate(to)} + onClick={isEditing || disableClick ? undefined : () => navigate(to)} style={{ height: '100%', width: '100%', diff --git a/packages/desktop-client/src/components/reports/reports/CashFlowCard.tsx b/packages/desktop-client/src/components/reports/reports/CashFlowCard.tsx index 831dd54920d..92d8524475d 100644 --- a/packages/desktop-client/src/components/reports/reports/CashFlowCard.tsx +++ b/packages/desktop-client/src/components/reports/reports/CashFlowCard.tsx @@ -119,6 +119,7 @@ export function CashFlowCard({ return (