mirror of
https://github.com/kremalicious/umami.git
synced 2024-06-30 21:51:59 +02:00
Added ability to delete reports.
This commit is contained in:
parent
ad710cc86a
commit
95d824542f
29
components/common/ConfirmDeleteForm.js
Normal file
29
components/common/ConfirmDeleteForm.js
Normal file
|
@ -0,0 +1,29 @@
|
||||||
|
import { useState } from 'react';
|
||||||
|
import { Button, LoadingButton, Form, FormButtons } from 'react-basics';
|
||||||
|
import useMessages from 'hooks/useMessages';
|
||||||
|
|
||||||
|
export function ConfirmDeleteForm({ name, onConfirm, onClose }) {
|
||||||
|
const [loading, setLoading] = useState(false);
|
||||||
|
const { formatMessage, labels, messages, FormattedMessage } = useMessages();
|
||||||
|
|
||||||
|
const handleConfirm = () => {
|
||||||
|
setLoading(true);
|
||||||
|
onConfirm();
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Form>
|
||||||
|
<p>
|
||||||
|
<FormattedMessage {...messages.confirmDelete} values={{ target: <b>{name}</b> }} />
|
||||||
|
</p>
|
||||||
|
<FormButtons flex>
|
||||||
|
<LoadingButton loading={loading} onClick={handleConfirm} variant="danger">
|
||||||
|
{formatMessage(labels.delete)}
|
||||||
|
</LoadingButton>
|
||||||
|
<Button onClick={onClose}>{formatMessage(labels.cancel)}</Button>
|
||||||
|
</FormButtons>
|
||||||
|
</Form>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default ConfirmDeleteForm;
|
12
components/common/LinkButton.js
Normal file
12
components/common/LinkButton.js
Normal file
|
@ -0,0 +1,12 @@
|
||||||
|
import Link from 'next/link';
|
||||||
|
import { Icon, Icons, Text } from 'react-basics';
|
||||||
|
import styles from './LinkButton.module.css';
|
||||||
|
|
||||||
|
export default function LinkButton({ href, icon, children }) {
|
||||||
|
return (
|
||||||
|
<Link className={styles.button} href={href}>
|
||||||
|
<Icon>{icon || <Icons.ArrowRight />}</Icon>
|
||||||
|
<Text>{children}</Text>
|
||||||
|
</Link>
|
||||||
|
);
|
||||||
|
}
|
28
components/common/LinkButton.module.css
Normal file
28
components/common/LinkButton.module.css
Normal file
|
@ -0,0 +1,28 @@
|
||||||
|
.button {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
align-self: flex-start;
|
||||||
|
white-space: nowrap;
|
||||||
|
gap: var(--size200);
|
||||||
|
font-family: inherit;
|
||||||
|
color: var(--base900);
|
||||||
|
background: var(--base100);
|
||||||
|
border: 1px solid transparent;
|
||||||
|
border-radius: var(--border-radius);
|
||||||
|
min-height: var(--base-height);
|
||||||
|
padding: 0 var(--size600);
|
||||||
|
position: relative;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button:hover {
|
||||||
|
background: var(--base200);
|
||||||
|
}
|
||||||
|
|
||||||
|
.button:active {
|
||||||
|
background: var(--base300);
|
||||||
|
}
|
||||||
|
|
||||||
|
.button:visited {
|
||||||
|
color: var(--base900);
|
||||||
|
}
|
|
@ -1,9 +1,12 @@
|
||||||
import Link from 'next/link';
|
import { useState } from 'react';
|
||||||
import { Button, Text, Icon, Icons } from 'react-basics';
|
import { Flexbox, Icon, Icons, Text, Button, Modal } from 'react-basics';
|
||||||
|
import LinkButton from 'components/common/LinkButton';
|
||||||
import SettingsTable from 'components/common/SettingsTable';
|
import SettingsTable from 'components/common/SettingsTable';
|
||||||
import useMessages from 'hooks/useMessages';
|
import ConfirmDeleteForm from 'components/common/ConfirmDeleteForm';
|
||||||
|
import { useMessages } from 'hooks';
|
||||||
|
|
||||||
export function ReportsTable({ data = [] }) {
|
export function ReportsTable({ data = [], onDelete = () => {} }) {
|
||||||
|
const [report, setReport] = useState(null);
|
||||||
const { formatMessage, labels } = useMessages();
|
const { formatMessage, labels } = useMessages();
|
||||||
|
|
||||||
const columns = [
|
const columns = [
|
||||||
|
@ -13,23 +16,39 @@ export function ReportsTable({ data = [] }) {
|
||||||
{ name: 'action', label: ' ' },
|
{ name: 'action', label: ' ' },
|
||||||
];
|
];
|
||||||
|
|
||||||
return (
|
const handleConfirm = () => {
|
||||||
<SettingsTable columns={columns} data={data}>
|
onDelete(report.id);
|
||||||
{row => {
|
};
|
||||||
const { id } = row;
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Link href={`/reports/${id}`}>
|
<>
|
||||||
<Button>
|
<SettingsTable columns={columns} data={data}>
|
||||||
<Icon>
|
{row => {
|
||||||
<Icons.ArrowRight />
|
const { id } = row;
|
||||||
</Icon>
|
|
||||||
<Text>{formatMessage(labels.view)}</Text>
|
return (
|
||||||
</Button>
|
<Flexbox gap={10}>
|
||||||
</Link>
|
<LinkButton href={`/reports/${id}`}>{formatMessage(labels.view)}</LinkButton>
|
||||||
);
|
<Button onClick={() => setReport(row)}>
|
||||||
}}
|
<Icon>
|
||||||
</SettingsTable>
|
<Icons.Trash />
|
||||||
|
</Icon>
|
||||||
|
<Text>{formatMessage(labels.delete)}</Text>
|
||||||
|
</Button>
|
||||||
|
</Flexbox>
|
||||||
|
);
|
||||||
|
}}
|
||||||
|
</SettingsTable>
|
||||||
|
{report && (
|
||||||
|
<Modal>
|
||||||
|
<ConfirmDeleteForm
|
||||||
|
name={report.name}
|
||||||
|
onConfirm={handleConfirm}
|
||||||
|
onClose={() => setReport(null)}
|
||||||
|
/>
|
||||||
|
</Modal>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -7,7 +7,11 @@ import WebsiteHeader from './WebsiteHeader';
|
||||||
|
|
||||||
export function WebsiteReportsPage({ websiteId }) {
|
export function WebsiteReportsPage({ websiteId }) {
|
||||||
const { formatMessage, labels } = useMessages();
|
const { formatMessage, labels } = useMessages();
|
||||||
const { reports, error, isLoading } = useReports(websiteId);
|
const { reports, error, isLoading, deleteReport } = useReports(websiteId);
|
||||||
|
|
||||||
|
const handleDelete = async id => {
|
||||||
|
await deleteReport(id);
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Page loading={isLoading} error={error}>
|
<Page loading={isLoading} error={error}>
|
||||||
|
@ -22,7 +26,7 @@ export function WebsiteReportsPage({ websiteId }) {
|
||||||
</Button>
|
</Button>
|
||||||
</Link>
|
</Link>
|
||||||
</Flexbox>
|
</Flexbox>
|
||||||
<ReportsTable websiteId={websiteId} data={reports} />
|
<ReportsTable data={reports} onDelete={handleDelete} />
|
||||||
</Page>
|
</Page>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,10 +1,23 @@
|
||||||
|
import { useState } from 'react';
|
||||||
import useApi from './useApi';
|
import useApi from './useApi';
|
||||||
|
|
||||||
export function useReports(websiteId) {
|
export function useReports(websiteId) {
|
||||||
const { get, useQuery } = useApi();
|
const [modified, setModified] = useState(Date.now());
|
||||||
const { data, error, isLoading } = useQuery(['reports'], () => get(`/reports`, { websiteId }));
|
const { get, useQuery, del, useMutation } = useApi();
|
||||||
|
const { mutate } = useMutation(reportId => del(`/reports/${reportId}`));
|
||||||
|
const { data, error, isLoading } = useQuery(['reports:website', { websiteId, modified }], () =>
|
||||||
|
get(`/reports`, { websiteId }),
|
||||||
|
);
|
||||||
|
|
||||||
return { reports: data, error, isLoading };
|
const deleteReport = id => {
|
||||||
|
mutate(id, {
|
||||||
|
onSuccess: () => {
|
||||||
|
setModified(Date.now());
|
||||||
|
},
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
return { reports: data, error, isLoading, deleteReport };
|
||||||
}
|
}
|
||||||
|
|
||||||
export default useReports;
|
export default useReports;
|
||||||
|
|
|
@ -105,6 +105,10 @@ export async function canUpdateReport({ user }: Auth, report: Report) {
|
||||||
return user.id == report.userId;
|
return user.id == report.userId;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export async function canDeleteReport(auth: Auth, report: Report) {
|
||||||
|
return canUpdateReport(auth, report);
|
||||||
|
}
|
||||||
|
|
||||||
export async function canCreateTeam({ user }: Auth) {
|
export async function canCreateTeam({ user }: Auth) {
|
||||||
if (user.isAdmin) {
|
if (user.isAdmin) {
|
||||||
return true;
|
return true;
|
||||||
|
|
|
@ -1,9 +1,9 @@
|
||||||
import { canUpdateReport, canViewReport } from 'lib/auth';
|
import { canUpdateReport, canViewReport, canDeleteReport } from 'lib/auth';
|
||||||
import { useAuth, useCors } from 'lib/middleware';
|
import { useAuth, useCors } from 'lib/middleware';
|
||||||
import { NextApiRequestQueryBody } from 'lib/types';
|
import { NextApiRequestQueryBody } from 'lib/types';
|
||||||
import { NextApiResponse } from 'next';
|
import { NextApiResponse } from 'next';
|
||||||
import { methodNotAllowed, ok, unauthorized } from 'next-basics';
|
import { methodNotAllowed, ok, unauthorized } from 'next-basics';
|
||||||
import { getReportById, updateReport } from 'queries';
|
import { getReportById, updateReport, deleteReport } from 'queries';
|
||||||
|
|
||||||
export interface ReportRequestQuery {
|
export interface ReportRequestQuery {
|
||||||
id: string;
|
id: string;
|
||||||
|
@ -24,31 +24,29 @@ export default async (
|
||||||
await useCors(req, res);
|
await useCors(req, res);
|
||||||
await useAuth(req, res);
|
await useAuth(req, res);
|
||||||
|
|
||||||
|
const { id: reportId } = req.query;
|
||||||
|
const {
|
||||||
|
user: { id: userId },
|
||||||
|
} = req.auth;
|
||||||
|
|
||||||
if (req.method === 'GET') {
|
if (req.method === 'GET') {
|
||||||
const { id: reportId } = req.query;
|
const report = await getReportById(reportId);
|
||||||
|
|
||||||
const data = await getReportById(reportId);
|
if (!(await canViewReport(req.auth, report))) {
|
||||||
|
|
||||||
if (!(await canViewReport(req.auth, data))) {
|
|
||||||
return unauthorized(res);
|
return unauthorized(res);
|
||||||
}
|
}
|
||||||
|
|
||||||
data.parameters = JSON.parse(data.parameters);
|
report.parameters = JSON.parse(report.parameters);
|
||||||
|
|
||||||
return ok(res, data);
|
return ok(res, report);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (req.method === 'POST') {
|
if (req.method === 'POST') {
|
||||||
const { id: reportId } = req.query;
|
|
||||||
const {
|
|
||||||
user: { id: userId },
|
|
||||||
} = req.auth;
|
|
||||||
|
|
||||||
const { websiteId, type, name, description, parameters } = req.body;
|
const { websiteId, type, name, description, parameters } = req.body;
|
||||||
|
|
||||||
const data = await getReportById(reportId);
|
const report = await getReportById(reportId);
|
||||||
|
|
||||||
if (!(await canUpdateReport(req.auth, data))) {
|
if (!(await canUpdateReport(req.auth, report))) {
|
||||||
return unauthorized(res);
|
return unauthorized(res);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -64,5 +62,17 @@ export default async (
|
||||||
return ok(res, result);
|
return ok(res, result);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (req.method === 'DELETE') {
|
||||||
|
const report = await getReportById(reportId);
|
||||||
|
|
||||||
|
if (!(await canDeleteReport(req.auth, report))) {
|
||||||
|
return unauthorized(res);
|
||||||
|
}
|
||||||
|
|
||||||
|
await deleteReport(reportId);
|
||||||
|
|
||||||
|
return ok(res);
|
||||||
|
}
|
||||||
|
|
||||||
return methodNotAllowed(res);
|
return methodNotAllowed(res);
|
||||||
};
|
};
|
||||||
|
|
Loading…
Reference in New Issue
Block a user