mirror of
https://github.com/maelgangloff/domain-watchdog.git
synced 2025-12-18 02:05:36 +00:00
refactor: split button components
This commit is contained in:
Maël Gangloff
parent
31b136ec92
commit
d0d13a07a9
22
assets/components/tracking/DeleteWatchlistButton.tsx
Normal file
22
assets/components/tracking/DeleteWatchlistButton.tsx
Normal file
@ -0,0 +1,22 @@
|
||||
import {Popconfirm, theme, Typography} from "antd";
|
||||
import {t} from "ttag";
|
||||
import {deleteWatchlist} from "../../utils/api";
|
||||
import {DeleteFilled} from "@ant-design/icons";
|
||||
import React from "react";
|
||||
import {Watchlist} from "../../pages/tracking/WatchlistPage";
|
||||
|
||||
export function DeleteWatchlistButton({watchlist, onDelete}: { watchlist: Watchlist, onDelete: () => void }) {
|
||||
const {token} = theme.useToken()
|
||||
|
||||
return <Popconfirm
|
||||
title={t`Delete the Watchlist`}
|
||||
description={t`Are you sure to delete this Watchlist?`}
|
||||
onConfirm={() => deleteWatchlist(watchlist.token).then(onDelete)}
|
||||
okText={t`Yes`}
|
||||
cancelText={t`No`}
|
||||
okButtonProps={{danger: true}}>
|
||||
<Typography.Link>
|
||||
<DeleteFilled style={{color: token.colorError}} title={t`Delete the Watchlist`}/>
|
||||
</Typography.Link>
|
||||
</Popconfirm>
|
||||
}
|
||||
67
assets/components/tracking/UpdateWatchlistButton.tsx
Normal file
67
assets/components/tracking/UpdateWatchlistButton.tsx
Normal file
@ -0,0 +1,67 @@
|
||||
import {Button, Drawer, Form, Typography} from "antd";
|
||||
import {t} from "ttag";
|
||||
import {WatchlistForm} from "./WatchlistForm";
|
||||
import React, {useState} from "react";
|
||||
import {Watchlist} from "../../pages/tracking/WatchlistPage";
|
||||
import {EditOutlined} from "@ant-design/icons";
|
||||
import {Connector} from "../../utils/api/connectors";
|
||||
|
||||
export function UpdateWatchlistButton({watchlist, onUpdateWatchlist, connectors}: {
|
||||
watchlist: Watchlist,
|
||||
onUpdateWatchlist: (values: { domains: string[], emailTriggers: string[], token: string }) => Promise<void>,
|
||||
connectors: (Connector & { id: string })[]
|
||||
}) {
|
||||
|
||||
const [form] = Form.useForm()
|
||||
const [open, setOpen] = useState(false)
|
||||
const [loading, setLoading] = useState(false)
|
||||
|
||||
|
||||
const showDrawer = () => {
|
||||
setOpen(true)
|
||||
}
|
||||
|
||||
const onClose = () => {
|
||||
setOpen(false)
|
||||
setLoading(false)
|
||||
}
|
||||
|
||||
return <>
|
||||
<Typography.Link>
|
||||
<EditOutlined title={t`Edit the Watchlist`} onClick={() => {
|
||||
showDrawer()
|
||||
form.setFields([
|
||||
{name: 'token', value: watchlist.token},
|
||||
{name: 'name', value: watchlist.name},
|
||||
{name: 'connector', value: watchlist.connector?.id},
|
||||
{name: 'domains', value: watchlist.domains.map(d => d.ldhName)},
|
||||
{name: 'emailTriggers', value: watchlist.triggers?.map(t => t.event)},
|
||||
])
|
||||
}}/>
|
||||
</Typography.Link>
|
||||
<Drawer
|
||||
title={t`Update a Watchlist`}
|
||||
width='80%'
|
||||
onClose={onClose}
|
||||
open={open}
|
||||
loading={loading}
|
||||
styles={{
|
||||
body: {
|
||||
paddingBottom: 80,
|
||||
}
|
||||
}}
|
||||
extra={<Button onClick={onClose}>{t`Cancel`}</Button>}
|
||||
>
|
||||
<WatchlistForm
|
||||
form={form}
|
||||
onFinish={values => {
|
||||
setLoading(true)
|
||||
onUpdateWatchlist(values).then(onClose).catch(() => setLoading(false))
|
||||
}}
|
||||
connectors={connectors}
|
||||
isCreation={false}
|
||||
/>
|
||||
</Drawer>
|
||||
</>
|
||||
|
||||
}
|
||||
40
assets/components/tracking/ViewDiagramWatchlistButton.tsx
Normal file
40
assets/components/tracking/ViewDiagramWatchlistButton.tsx
Normal file
@ -0,0 +1,40 @@
|
||||
import {Button, Modal, Space, Typography} from "antd"
|
||||
import {t} from "ttag"
|
||||
import React, {useState} from "react"
|
||||
import {Watchlist} from "../../pages/tracking/WatchlistPage"
|
||||
import {ApartmentOutlined} from "@ant-design/icons"
|
||||
|
||||
export function ViewDiagramWatchlistButton({watchlist}: { watchlist: Watchlist }) {
|
||||
const [open, setOpen] = useState(false)
|
||||
|
||||
return <>
|
||||
<Typography.Link>
|
||||
<ApartmentOutlined title={t`View the Watchlist Entity Diagram`}
|
||||
style={{color: 'darkviolet'}}
|
||||
onClick={() => setOpen(true)}/>
|
||||
</Typography.Link>
|
||||
<Modal
|
||||
title={t`Watchlist Entity Diagram`}
|
||||
centered
|
||||
open={open}
|
||||
footer={
|
||||
<Space>
|
||||
<Button type="primary" color='violet' onClick={() => {
|
||||
}}>
|
||||
Download
|
||||
</Button>
|
||||
|
||||
<Button type="default" onClick={() => setOpen(false)}>
|
||||
Close
|
||||
</Button>
|
||||
</Space>
|
||||
}
|
||||
onOk={() => setOpen(false)}
|
||||
onCancel={() => setOpen(false)}
|
||||
width='80%'
|
||||
>
|
||||
|
||||
</Modal>
|
||||
</>
|
||||
|
||||
}
|
||||
@ -1,16 +1,15 @@
|
||||
import {Button, Card, Divider, Drawer, Form, Popconfirm, Space, Table, Tag, theme, Typography} from "antd";
|
||||
import {Card, Divider, Space, Table, Tag, Typography} from "antd";
|
||||
import {t} from "ttag";
|
||||
import {deleteWatchlist} from "../../utils/api";
|
||||
import {CalendarFilled, DeleteFilled, DisconnectOutlined, EditOutlined, LinkOutlined} from "@ant-design/icons";
|
||||
import React, {useState} from "react";
|
||||
import {CalendarFilled, DisconnectOutlined, LinkOutlined} from "@ant-design/icons";
|
||||
import React from "react";
|
||||
import useBreakpoint from "../../hooks/useBreakpoint";
|
||||
import {actionToColor, domainEvent} from "../search/EventTimeline";
|
||||
import {Watchlist} from "../../pages/tracking/WatchlistPage";
|
||||
import punycode from "punycode/punycode";
|
||||
import {WatchlistForm} from "./WatchlistForm";
|
||||
import {Connector} from "../../utils/api/connectors";
|
||||
|
||||
const {useToken} = theme;
|
||||
import {UpdateWatchlistButton} from "./UpdateWatchlistButton";
|
||||
import {DeleteWatchlistButton} from "./DeleteWatchlistButton";
|
||||
import {ViewDiagramWatchlistButton} from "./ViewDiagramWatchlistButton";
|
||||
|
||||
export function WatchlistsList({watchlists, onDelete, onUpdateWatchlist, connectors}: {
|
||||
watchlists: Watchlist[],
|
||||
@ -18,10 +17,9 @@ export function WatchlistsList({watchlists, onDelete, onUpdateWatchlist, connect
|
||||
onUpdateWatchlist: (values: { domains: string[], emailTriggers: string[], token: string }) => Promise<void>,
|
||||
connectors: (Connector & { id: string })[]
|
||||
}) {
|
||||
const {token} = useToken()
|
||||
const sm = useBreakpoint('sm')
|
||||
const domainEventTranslated = domainEvent()
|
||||
const [form] = Form.useForm()
|
||||
|
||||
|
||||
const columns = [
|
||||
{
|
||||
@ -34,17 +32,6 @@ export function WatchlistsList({watchlists, onDelete, onUpdateWatchlist, connect
|
||||
}
|
||||
]
|
||||
|
||||
const [open, setOpen] = useState(false)
|
||||
const [loading, setLoading] = useState(false)
|
||||
|
||||
const showDrawer = () => {
|
||||
setOpen(true)
|
||||
}
|
||||
|
||||
const onClose = () => {
|
||||
setOpen(false)
|
||||
setLoading(false)
|
||||
}
|
||||
|
||||
return <>
|
||||
{watchlists.map(watchlist =>
|
||||
@ -66,57 +53,22 @@ export function WatchlistsList({watchlists, onDelete, onUpdateWatchlist, connect
|
||||
size='small'
|
||||
style={{width: '100%'}}
|
||||
extra={<Space size='middle'>
|
||||
<Typography.Link>
|
||||
<CalendarFilled title={t`Export events to iCalendar format`}/>
|
||||
</Typography.Link>
|
||||
<Typography.Link>
|
||||
<EditOutlined title={t`Edit the Watchlist`} onClick={() => {
|
||||
showDrawer()
|
||||
form.setFields([
|
||||
{name: 'token', value: watchlist.token},
|
||||
{name: 'name', value: watchlist.name},
|
||||
{name: 'connector', value: watchlist.connector?.id},
|
||||
{name: 'domains', value: watchlist.domains.map(d => d.ldhName)},
|
||||
{name: 'emailTriggers', value: watchlist.triggers?.map(t => t.event)},
|
||||
])
|
||||
}}/>
|
||||
|
||||
<ViewDiagramWatchlistButton watchlist={watchlist}/>
|
||||
|
||||
<Typography.Link href={`/api/watchlists/${watchlist.token}/calendar`}>
|
||||
<CalendarFilled title={t`Export events to iCalendar format`}
|
||||
style={{color: 'limegreen'}}/>
|
||||
</Typography.Link>
|
||||
|
||||
<Drawer
|
||||
title={t`Update a Watchlist`}
|
||||
width='80%'
|
||||
onClose={onClose}
|
||||
open={open}
|
||||
loading={loading}
|
||||
styles={{
|
||||
body: {
|
||||
paddingBottom: 80,
|
||||
}
|
||||
}}
|
||||
extra={<Button onClick={onClose}>{t`Cancel`}</Button>}
|
||||
>
|
||||
<WatchlistForm
|
||||
form={form}
|
||||
onFinish={values => {
|
||||
setLoading(true)
|
||||
onUpdateWatchlist(values).then(onClose).catch(() => setLoading(false))
|
||||
}}
|
||||
connectors={connectors}
|
||||
isCreation={false}
|
||||
/>
|
||||
</Drawer>
|
||||
<UpdateWatchlistButton
|
||||
watchlist={watchlist}
|
||||
onUpdateWatchlist={onUpdateWatchlist}
|
||||
connectors={connectors}
|
||||
/>
|
||||
|
||||
<DeleteWatchlistButton watchlist={watchlist} onDelete={onDelete}/>
|
||||
|
||||
<Popconfirm
|
||||
title={t`Delete the Watchlist`}
|
||||
description={t`Are you sure to delete this Watchlist?`}
|
||||
onConfirm={() => deleteWatchlist(watchlist.token).then(onDelete)}
|
||||
okText={t`Yes`}
|
||||
cancelText={t`No`}
|
||||
okButtonProps={{danger: true}}>
|
||||
<Typography.Link>
|
||||
<DeleteFilled style={{color: token.colorError}} title={t`Delete the Watchlist`}/>
|
||||
</Typography.Link>
|
||||
</Popconfirm>
|
||||
</Space>}
|
||||
>
|
||||
<Card.Meta description={watchlist.token} style={{marginBottom: '1em'}}/>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user