From 83fd85f0597551d1f4feefaaecd7aab003595305 Mon Sep 17 00:00:00 2001
From: Neil <55785687+carkom@users.noreply.github.com>
Date: Tue, 2 Apr 2024 20:30:12 +0100
Subject: [PATCH] Custom Reports: Confirm delete report (#2521)
* confirm delete report
* notes
* card confirm
---
.../src/components/reports/SaveReport.tsx | 20 ++++++--
.../components/reports/SaveReportDelete.tsx | 51 +++++++++++++++++++
.../reports/reports/CustomReportListCards.tsx | 31 ++++++++++-
upcoming-release-notes/2521.md | 6 +++
4 files changed, 104 insertions(+), 4 deletions(-)
create mode 100644 packages/desktop-client/src/components/reports/SaveReportDelete.tsx
create mode 100644 upcoming-release-notes/2521.md
diff --git a/packages/desktop-client/src/components/reports/SaveReport.tsx b/packages/desktop-client/src/components/reports/SaveReport.tsx
index 0e10df084..af27b31e1 100644
--- a/packages/desktop-client/src/components/reports/SaveReport.tsx
+++ b/packages/desktop-client/src/components/reports/SaveReport.tsx
@@ -10,6 +10,7 @@ import { Text } from '../common/Text';
import { View } from '../common/View';
import { SaveReportChoose } from './SaveReportChoose';
+import { SaveReportDelete } from './SaveReportDelete';
import { SaveReportMenu } from './SaveReportMenu';
import { SaveReportName } from './SaveReportName';
@@ -33,6 +34,7 @@ export function SaveReport({
onReportChange,
}: SaveReportProps) {
const listReports = useReports();
+ const [deleteMenuOpen, setDeleteMenuOpen] = useState(false);
const [nameMenuOpen, setNameMenuOpen] = useState(false);
const [menuOpen, setMenuOpen] = useState(false);
const [chooseMenuOpen, setChooseMenuOpen] = useState(false);
@@ -97,6 +99,13 @@ export function SaveReport({
});
};
+ const onDelete = async () => {
+ setName('');
+ await send('report/delete', report.id);
+ onReportChange({ type: 'reset' });
+ setDeleteMenuOpen(false);
+ };
+
const onMenuSelect = async (item: string) => {
setMenuItem(item);
switch (item) {
@@ -107,9 +116,7 @@ export function SaveReport({
break;
case 'delete-report':
setMenuOpen(false);
- setName('');
- await send('report/delete', report.id);
- onReportChange({ type: 'reset' });
+ setDeleteMenuOpen(true);
break;
case 'update-report':
setErr('');
@@ -191,6 +198,13 @@ export function SaveReport({
onClose={() => setChooseMenuOpen(false)}
/>
)}
+ {deleteMenuOpen && (
+ <SaveReportDelete
+ onDelete={onDelete}
+ onClose={() => setDeleteMenuOpen(false)}
+ name={report.name}
+ />
+ )}
</View>
);
}
diff --git a/packages/desktop-client/src/components/reports/SaveReportDelete.tsx b/packages/desktop-client/src/components/reports/SaveReportDelete.tsx
new file mode 100644
index 000000000..a18a68ede
--- /dev/null
+++ b/packages/desktop-client/src/components/reports/SaveReportDelete.tsx
@@ -0,0 +1,51 @@
+import React from 'react';
+
+import { theme } from '../../style/theme';
+import { Button } from '../common/Button';
+import { Stack } from '../common/Stack';
+import { Text } from '../common/Text';
+import { View } from '../common/View';
+import { Tooltip } from '../tooltips';
+
+type SaveReportDeleteProps = {
+ onDelete: () => void;
+ onClose: () => void;
+ name: string;
+};
+
+export function SaveReportDelete({
+ onDelete,
+ onClose,
+ name,
+}: SaveReportDeleteProps) {
+ return (
+ <Tooltip
+ position="bottom-right"
+ style={{ padding: 15, color: theme.menuItemText }}
+ width={275}
+ onClose={onClose}
+ >
+ <View style={{ align: 'center' }}>
+ <Text style={{ color: theme.errorText, marginBottom: 5 }}>
+ Do you want to delete report:
+ </Text>
+ <View>{name}</View>
+ </View>
+
+ <Stack
+ direction="row"
+ justify="flex-end"
+ align="center"
+ style={{ marginTop: 15 }}
+ >
+ <View style={{ flex: 1 }} />
+ <Button type="primary" onClick={onDelete}>
+ Yes
+ </Button>
+ <Button type="primary" onClick={onClose}>
+ No
+ </Button>
+ </Stack>
+ </Tooltip>
+ );
+}
diff --git a/packages/desktop-client/src/components/reports/reports/CustomReportListCards.tsx b/packages/desktop-client/src/components/reports/reports/CustomReportListCards.tsx
index 9fabce524..292352d18 100644
--- a/packages/desktop-client/src/components/reports/reports/CustomReportListCards.tsx
+++ b/packages/desktop-client/src/components/reports/reports/CustomReportListCards.tsx
@@ -16,6 +16,7 @@ import { Text } from '../../common/Text';
import { View } from '../../common/View';
import { DateRange } from '../DateRange';
import { ReportCard } from '../ReportCard';
+import { SaveReportDelete } from '../SaveReportDelete';
import { SaveReportName } from '../SaveReportName';
import { GetCardData } from './GetCardData';
@@ -66,6 +67,7 @@ export function CustomReportListCards({
}) {
const result: { [key: string]: boolean }[] = index(reports);
const [reportMenu, setReportMenu] = useState(result);
+ const [deleteMenuOpen, setDeleteMenuOpen] = useState(result);
const [nameMenuOpen, setNameMenuOpen] = useState(result);
const [err, setErr] = useState('');
const [name, setName] = useState('');
@@ -77,6 +79,12 @@ export function CustomReportListCards({
const [isCardHovered, setIsCardHovered] = useState('');
+ const onDelete = async (reportData: string) => {
+ setName('');
+ await send('report/delete', reportData);
+ onDeleteMenuOpen(reportData === undefined ? '' : reportData, false);
+ };
+
const onAddUpdate = async ({
reportData,
}: {
@@ -105,7 +113,8 @@ export function CustomReportListCards({
const onMenuSelect = async (item: string, report: CustomReportEntity) => {
if (item === 'delete') {
onMenuOpen(report.id, false);
- await send('report/delete', report.id);
+ onDeleteMenuOpen(report.id, true);
+ setErr('');
}
if (item === 'rename') {
onMenuOpen(report.id, false);
@@ -119,6 +128,10 @@ export function CustomReportListCards({
setReportMenu({ ...reportMenu, [item]: state });
};
+ const onDeleteMenuOpen = (item: string, state: boolean) => {
+ setDeleteMenuOpen({ ...deleteMenuOpen, [item]: state });
+ };
+
const onNameMenuOpen = (item: string, state: boolean) => {
setNameMenuOpen({ ...nameMenuOpen, [item]: state });
};
@@ -257,6 +270,22 @@ export function CustomReportListCards({
report={report}
/>
)}
+ {report.id === undefined
+ ? null
+ : deleteMenuOpen[
+ report.id as keyof typeof deleteMenuOpen
+ ] && (
+ <SaveReportDelete
+ onDelete={() => onDelete(report.id)}
+ onClose={() =>
+ onDeleteMenuOpen(
+ report.id === undefined ? '' : report.id,
+ false,
+ )
+ }
+ name={report.name}
+ />
+ )}
</View>
</View>
))}
diff --git a/upcoming-release-notes/2521.md b/upcoming-release-notes/2521.md
new file mode 100644
index 000000000..b2f6f3ce6
--- /dev/null
+++ b/upcoming-release-notes/2521.md
@@ -0,0 +1,6 @@
+---
+category: Enhancements
+authors: [carkom]
+---
+
+A simple delete confirmation for custom reports.
--
GitLab