schiwagoa/tianji
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add delete feature for pages

Browse Source
This commit is contained in:
moonrailgun 2024-04-26 00:38:13 +08:00
parent 8c64481320
commit 6500f90096
1 changed files with 41 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
src/client/routes/page/$slug.tsx
View File

@ -1,4 +1,5 @@
import { trpc } from '@/api/trpc'; import { trpc } from '@/api/trpc';
import { AlertConfirm } from '@/components/AlertConfirm';
import { CommonHeader } from '@/components/CommonHeader'; import { CommonHeader } from '@/components/CommonHeader';
import { CommonWrapper } from '@/components/CommonWrapper'; import { CommonWrapper } from '@/components/CommonWrapper';
import { ErrorTip } from '@/components/ErrorTip'; import { ErrorTip } from '@/components/ErrorTip';
@ -6,10 +7,11 @@ import { Loading } from '@/components/Loading';
import { NotFoundTip } from '@/components/NotFoundTip'; import { NotFoundTip } from '@/components/NotFoundTip';
import { MonitorStatusPage } from '@/components/monitor/StatusPage'; import { MonitorStatusPage } from '@/components/monitor/StatusPage';
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
import { useEvent } from '@/hooks/useEvent';
import { routeAuthBeforeLoad } from '@/utils/route'; import { routeAuthBeforeLoad } from '@/utils/route';
import { useTranslation } from '@i18next-toolkit/react'; import { useTranslation } from '@i18next-toolkit/react';
import { Link, createFileRoute, useNavigate } from '@tanstack/react-router'; import { Link, createFileRoute, useNavigate } from '@tanstack/react-router';
import { LuEye } from 'react-icons/lu'; import { LuEye, LuTrash } from 'react-icons/lu';
export const Route = createFileRoute('/page/$slug')({ export const Route = createFileRoute('/page/$slug')({
beforeLoad: routeAuthBeforeLoad, beforeLoad: routeAuthBeforeLoad,
@ -23,6 +25,29 @@ function PageComponent() {
const { data: pageInfo, isLoading } = trpc.monitor.getPageInfo.useQuery({ const { data: pageInfo, isLoading } = trpc.monitor.getPageInfo.useQuery({
slug, slug,
}); });
const trpcUtils = trpc.useUtils();
const deletePageMutation = trpc.monitor.deletePage.useMutation();
const handleDelete = useEvent(async () => {
if (!pageInfo) {
return;
}
await deletePageMutation.mutateAsync({
workspaceId: pageInfo.workspaceId,
id: pageInfo.id,
});
trpcUtils.monitor.getAllPages.refetch({
workspaceId: pageInfo.workspaceId,
});
navigate({
to: '/page',
replace: true,
});
});
if (!slug) { if (!slug) {
return <ErrorTip />; return <ErrorTip />;
@ -42,11 +67,21 @@ function PageComponent() {
<CommonHeader <CommonHeader
title={pageInfo.title} title={pageInfo.title}
actions={ actions={
<Link to="/status/$slug" params={{ slug }} target="_blank"> <div className="space-x-2">
<Button variant="outline" Icon={LuEye}> <AlertConfirm
{t('Preview')} title={t('Confirm to delete this page?')}
</Button> content={t('It will permanently delete the relevant data')}
</Link> onConfirm={handleDelete}
>
<Button variant="outline" size="icon" Icon={LuTrash} />
</AlertConfirm>
<Link to="/status/$slug" params={{ slug }} target="_blank">
<Button variant="outline" Icon={LuEye}>
{t('Preview')}
</Button>
</Link>
</div>
} }
/> />
} }