feat: update Watchlist

2025-12-29 16:15:04 +00:00 · 2024-08-15 03:04:31 +02:00
parent 5dd27a4b7b
commit 7d16d836f4
7 changed files with 177 additions and 79 deletions
--- a/assets/components/tracking/WatchlistForm.tsx
+++ b/assets/components/tracking/WatchlistForm.tsx
@@ -25,19 +25,20 @@ const formItemLayoutWithOutLabel = {
    },
 };

-export function WatchlistForm({form, connectors, onCreateWatchlist}: {
+export function WatchlistForm({form, connectors, onFinish, isCreation}: {
    form: FormInstance,
    connectors: (Connector & { id: string })[]
-    onCreateWatchlist: (values: { domains: string[], emailTriggers: string[] }) => void
+    onFinish: (values: { domains: string[], emailTriggers: string[], token: string }) => void
+    isCreation: boolean
 }) {
    const domainEventTranslated = domainEvent()

    const triggerTagRenderer: TagRender = (props) => {
        const {value, closable, onClose} = props;
        const onPreventMouseDown = (event: React.MouseEvent<HTMLSpanElement>) => {
-            event.preventDefault();
-            event.stopPropagation();
-        };
+            event.preventDefault()
+            event.stopPropagation()
+        }
        return (
            <Tag
                color={actionToColor(value)}
@@ -54,9 +55,14 @@ export function WatchlistForm({form, connectors, onCreateWatchlist}: {
    return <Form
        {...formItemLayoutWithOutLabel}
        form={form}
-        onFinish={onCreateWatchlist}
+        onFinish={onFinish}
        initialValues={{emailTriggers: ['last changed', 'transfer', 'expiration', 'deletion']}}
    >
+
+        <Form.Item name='token' hidden>
+            <Input hidden/>
+        </Form.Item>
+
        <Form.Item label={t`Name`}
                   name='name'
                   labelCol={{
@@ -183,7 +189,7 @@ export function WatchlistForm({form, connectors, onCreateWatchlist}: {
        <Form.Item>
            <Space>
                <Button type="primary" htmlType="submit">
-                    {t`Create`}
+                    {isCreation ? t`Create` : t`Update`}
                </Button>
                <Button type="default" htmlType="reset">
                    {t`Reset`}
--- a/assets/components/tracking/WatchlistsList.tsx
+++ b/assets/components/tracking/WatchlistsList.tsx
@@ -1,20 +1,27 @@
-import {Card, Divider, Popconfirm, Space, Table, Tag, theme, Typography} from "antd";
+import {Button, Card, Divider, Drawer, Form, Popconfirm, Space, Table, Tag, theme, Typography} from "antd";
 import {t} from "ttag";
 import {deleteWatchlist} from "../../utils/api";
-import {CalendarFilled, DeleteFilled, DisconnectOutlined, LinkOutlined} from "@ant-design/icons";
-import React from "react";
+import {CalendarFilled, DeleteFilled, DisconnectOutlined, EditOutlined, LinkOutlined} from "@ant-design/icons";
+import React, {useState} 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;

-export function WatchlistsList({watchlists, onDelete}: { watchlists: Watchlist[], onDelete: () => void }) {
+export function WatchlistsList({watchlists, onDelete, onUpdateWatchlist, connectors}: {
+    watchlists: Watchlist[],
+    onDelete: () => void,
+    onUpdateWatchlist: (values: { domains: string[], emailTriggers: string[], token: string }) => void,
+    connectors: (Connector & { id: string })[]
+}) {
    const {token} = useToken()
    const sm = useBreakpoint('sm')
-
    const domainEventTranslated = domainEvent()
+    const [form] = Form.useForm()

    const columns = [
        {
@@ -27,6 +34,16 @@ export function WatchlistsList({watchlists, onDelete}: { watchlists: Watchlist[]
        }
    ]

+    const [open, setOpen] = useState(false);
+
+    const showDrawer = () => {
+        setOpen(true)
+    };
+
+    const onClose = () => {
+        setOpen(false)
+    };
+
    return <>
        {watchlists.map(watchlist =>
            <>
@@ -47,9 +64,45 @@ export function WatchlistsList({watchlists, onDelete}: { watchlists: Watchlist[]
                    size='small'
                    style={{width: '100%'}}
                    extra={<Space size='middle'>
-                        <Typography.Link href={`/api/watchlists/${watchlist.token}/calendar`}>
+                        <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)},
+                                ])
+                            }}/>
+                        </Typography.Link>
+
+                        <Drawer
+                            title={t`Update a Watchlist`}
+                            width={800}
+                            onClose={onClose}
+                            open={open}
+                            styles={{
+                                body: {
+                                    paddingBottom: 80,
+                                }
+                            }}
+                            extra={<Button onClick={onClose}>Cancel</Button>}
+                        >
+                            <WatchlistForm
+                                form={form}
+                                onFinish={values => {
+                                    onUpdateWatchlist(values);
+                                    onClose()
+                                }}
+                                connectors={connectors}
+                                isCreation={false}
+                            />
+                        </Drawer>
+
                        <Popconfirm
                            title={t`Delete the Watchlist`}
                            description={t`Are you sure to delete this Watchlist?`}
@@ -57,7 +110,9 @@ export function WatchlistsList({watchlists, onDelete}: { watchlists: Watchlist[]
                            okText={t`Yes`}
                            cancelText={t`No`}
                            okButtonProps={{danger: true}}>
-                            <DeleteFilled style={{color: token.colorError}} title={t`Delete the Watchlist`}/>
+                            <Typography.Link>
+                                <DeleteFilled style={{color: token.colorError}} title={t`Delete the Watchlist`}/>
+                            </Typography.Link>
                        </Popconfirm>
                    </Space>}
                >
--- a/assets/pages/tracking/WatchlistPage.tsx
+++ b/assets/pages/tracking/WatchlistPage.tsx
@@ -1,6 +1,6 @@
 import React, {useEffect, useState} from "react";
 import {Card, Divider, Flex, Form, message} from "antd";
-import {EventAction, getWatchlists, postWatchlist} from "../../utils/api";
+import {EventAction, getWatchlists, putWatchlist, postWatchlist} from "../../utils/api";
 import {AxiosError} from "axios";
 import {t} from 'ttag'
 import {WatchlistForm} from "../../components/tracking/WatchlistForm";
@@ -40,7 +40,7 @@ export default function WatchlistPage() {
            name: values.name,
            domains: domainsURI,
            triggers: values.emailTriggers.map(t => ({event: t, action: 'email'})),
-            connector: values.connector !== undefined ? '/api/connectors/' + values.connector : undefined
+            connector: values.connector !== undefined ? ('/api/connectors/' + values.connector) : undefined
        }).then((w) => {
            form.resetFields()
            refreshWatchlists()
@@ -50,6 +50,31 @@ export default function WatchlistPage() {
        })
    }

+    const onUpdateWatchlist = (values: {
+        token: string
+        name?: string
+        domains: string[],
+        emailTriggers: string[]
+        connector?: string
+    }) => {
+        const domainsURI = values.domains.map(d => '/api/domains/' + d)
+
+        console.log(values)
+
+        putWatchlist({
+            token: values.token,
+            name: values.name,
+            domains: domainsURI,
+            triggers: values.emailTriggers.map(t => ({event: t, action: 'email'})),
+            connector: values.connector !== undefined ? ('/api/connectors/' + values.connector) : undefined
+        }).then((w) => {
+            refreshWatchlists()
+            messageApi.success(t`Watchlist updated !`)
+        }).catch((e: AxiosError) => {
+            showErrorAPI(e, messageApi)
+        })
+    }
+
    const refreshWatchlists = () => getWatchlists().then(w => {
        setWatchlists(w['hydra:member'])
    }).catch((e: AxiosError) => {
@@ -67,17 +92,18 @@ export default function WatchlistPage() {
    }, [])

    return <Flex gap="middle" align="center" justify="center" vertical>
-        <Card title={t`Create a Watchlist`} style={{width: '100%'}}>
-            {contextHolder}
-            {
-                connectors &&
-                <WatchlistForm form={form} onCreateWatchlist={onCreateWatchlist} connectors={connectors}/>
-            }
-        </Card>
-
+        {contextHolder}
+        {
+            connectors &&
+            <Card title={t`Create a Watchlist`} style={{width: '100%'}}>
+                <WatchlistForm form={form} onFinish={onCreateWatchlist} connectors={connectors} isCreation={true}/>
+            </Card>
+        }
        <Divider/>
-
-        {watchlists && watchlists.length > 0 &&
-            <WatchlistsList watchlists={watchlists} onDelete={refreshWatchlists}/>}
+        {connectors && watchlists && watchlists.length > 0 &&
+            <WatchlistsList watchlists={watchlists} onDelete={refreshWatchlists}
+                            connectors={connectors}
+                            onUpdateWatchlist={onUpdateWatchlist}
+            />}
    </Flex>
 }
--- a/assets/utils/api/watchlist.ts
+++ b/assets/utils/api/watchlist.ts
@@ -1,4 +1,4 @@
-import {request, Watchlist} from "./index";
+import {Event, request, Watchlist} from "./index";

 export async function getWatchlists() {
    const response = await request({
@@ -33,14 +33,11 @@ export async function deleteWatchlist(token: string): Promise<void> {
    })
 }

-export async function patchWatchlist(watchlist: Partial<Watchlist> & { token: string }) {
+export async function putWatchlist(watchlist: Partial<Watchlist> & { token: string }) {
    const response = await request<Watchlist>({
-        method: 'PATCH',
+        method: 'PUT',
        url: 'watchlists/' + watchlist.token,
        data: watchlist,
-        headers: {
-            "Content-Type": 'application/merge-patch+json'
-        }
    })
    return response.data
-}
+}