feat: update Watchlist

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.preventDefault()
-            event.stopPropagation();
+            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`}

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 {CalendarFilled, DeleteFilled, DisconnectOutlined, EditOutlined, LinkOutlined} from "@ant-design/icons";
-import React from "react";
+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>}
                 >

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}
-            {contextHolder}
+        {
-            {
+            connectors &&
-                connectors &&
+            <Card title={t`Create a Watchlist`} style={{width: '100%'}}>
-                <WatchlistForm form={form} onCreateWatchlist={onCreateWatchlist} connectors={connectors}/>
+                <WatchlistForm form={form} onFinish={onCreateWatchlist} connectors={connectors} isCreation={true}/>
-            }
+            </Card>
-        </Card>
+        }
-
         <Divider/>
-
+        {connectors && watchlists && watchlists.length > 0 &&
-        {watchlists && watchlists.length > 0 &&
+            <WatchlistsList watchlists={watchlists} onDelete={refreshWatchlists}
-            <WatchlistsList watchlists={watchlists} onDelete={refreshWatchlists}/>}
+                            connectors={connectors}
+                            onUpdateWatchlist={onUpdateWatchlist}
+            />}
     </Flex>
 }

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
-}
+}

src/Controller/WatchListController.php

@@ -10,6 +10,7 @@ use App\Entity\WatchList;
 use App\Repository\WatchListRepository;
 use Doctrine\Common\Collections\Collection;
 use Doctrine\ORM\EntityManagerInterface;
+use Doctrine\ORM\Exception\ORMException;
 use Eluceo\iCal\Domain\Entity\Attendee;
 use Eluceo\iCal\Domain\Entity\Calendar;
 use Eluceo\iCal\Domain\Entity\Event;
@@ -44,7 +45,36 @@ class WatchListController extends AbstractController
     ) {
     }
 
-    public function verifyLimitations(WatchList $watchList)
+    /**
+     * @throws \Exception
+     */
+    #[Route(
+        path: '/api/watchlists',
+        name: 'watchlist_create',
+        defaults: [
+            '_api_resource_class' => WatchList::class,
+            '_api_operation_name' => 'create',
+        ],
+        methods: ['POST']
+    )]
+    public function createWatchList(Request $request): WatchList
+    {
+        $watchList = $this->serializer->deserialize($request->getContent(), WatchList::class, 'json', ['groups' => 'watchlist:create']);
+        $this->verifyLimitations($watchList);
+
+        $user = $this->getUser();
+        $this->logger->info('User {username} registers a Watchlist ({token}).', [
+            'username' => $user->getUserIdentifier(),
+            'token' => $watchList->getToken(),
+        ]);
+
+        $this->em->persist($watchList);
+        $this->em->flush();
+
+        return $watchList;
+    }
+
+    public function verifyLimitations(WatchList $watchList): void
     {
         /** @var User $user */
         $user = $this->getUser();
@@ -87,35 +117,26 @@ class WatchListController extends AbstractController
         }
     }
 
-    /**
-     * @throws \Exception
-     */
     #[Route(
         path: '/api/watchlists',
-        name: 'watchlist_create',
+        name: 'watchlist_get_all_mine',
         defaults: [
             '_api_resource_class' => WatchList::class,
-            '_api_operation_name' => 'create',
+            '_api_operation_name' => 'get_all_mine',
         ],
-        methods: ['POST']
+        methods: ['GET']
     )]
-    public function createWatchList(Request $request): WatchList
+    public function getWatchLists(): Collection
     {
-        $watchList = $this->serializer->deserialize($request->getContent(), WatchList::class, 'json', ['groups' => 'watchlist:create']);
+        /** @var User $user */
-        $this->verifyLimitations($watchList);
-
         $user = $this->getUser();
-        $this->logger->info('User {username} registers a Watchlist ({token}).', [
-            'username' => $user->getUserIdentifier(),
-            'token' => $watchList->getToken(),
-        ]);
 
-        $this->em->persist($watchList);
+        return $user->getWatchLists();
-        $this->em->flush();
-
-        return $watchList;
     }
 
+    /**
+     * @throws ORMException
+     */
     #[Route(
         path: '/api/watchlists/{token}',
         name: 'watchlist_update',
@@ -123,19 +144,23 @@ class WatchListController extends AbstractController
             '_api_resource_class' => WatchList::class,
             '_api_operation_name' => 'update',
         ],
-        methods: ['PATCH']
+        methods: ['PUT']
     )]
-    public function patchWatchList(Request $request): WatchList
+    public function putWatchList(WatchList $watchList): WatchList
     {
-        $watchList = $this->serializer->deserialize($request->getContent(), WatchList::class, 'json', ['groups' => 'watchlist:create']);
+        /** @var User $user */
+        $user = $this->getUser();
+
         $this->verifyLimitations($watchList);
 
-        $user = $this->getUser();
         $this->logger->info('User {username} updates a Watchlist ({token}).', [
             'username' => $user->getUserIdentifier(),
             'token' => $watchList->getToken(),
         ]);
 
+        $this->em->remove($this->em->getReference(WatchList::class, $watchList->getToken()));
+        $this->em->flush();
+
         $this->em->persist($watchList);
         $this->em->flush();
 
@@ -202,21 +227,4 @@ class WatchListController extends AbstractController
             'Content-Type' => 'text/calendar; charset=utf-8',
         ]);
     }
-
-    #[Route(
-        path: '/api/watchlists',
-        name: 'watchlist_get_all_mine',
-        defaults: [
-            '_api_resource_class' => WatchList::class,
-            '_api_operation_name' => 'get_all_mine',
-        ],
-        methods: ['GET']
-    )]
-    public function getWatchLists(): Collection
-    {
-        /** @var User $user */
-        $user = $this->getUser();
-
-        return $user->getWatchLists();
-    }
 }

src/Entity/WatchList.php

@@ -6,8 +6,8 @@ use ApiPlatform\Metadata\ApiResource;
 use ApiPlatform\Metadata\Delete;
 use ApiPlatform\Metadata\Get;
 use ApiPlatform\Metadata\GetCollection;
-use ApiPlatform\Metadata\Patch;
 use ApiPlatform\Metadata\Post;
+use ApiPlatform\Metadata\Put;
 use App\Controller\WatchListController;
 use App\Repository\WatchListRepository;
 use Doctrine\Common\Collections\ArrayCollection;
@@ -67,10 +67,11 @@ use Symfony\Component\Uid\Uuid;
             denormalizationContext: ['groups' => 'watchlist:create'],
             name: 'create'
         ),
-        new Patch(
+        new Put(
             routeName: 'watchlist_update',
             normalizationContext: ['groups' => 'watchlist:item'],
-            denormalizationContext: ['groups' => 'watchlist:create'],
+            denormalizationContext: ['groups' => ['watchlist:create', 'watchlist:token']],
+            security: 'object.user == user',
             name: 'update'
         ),
         new Delete(),
@@ -83,7 +84,7 @@ class WatchList
     public ?User $user = null;
     #[ORM\Id]
     #[ORM\Column(type: 'uuid')]
-    #[Groups(['watchlist:item', 'watchlist:list'])]
+    #[Groups(['watchlist:item', 'watchlist:list', 'watchlist:token'])]
     private string $token;
     /**
      * @var Collection<int, Domain>
@@ -128,6 +129,11 @@ class WatchList
         return $this->token;
     }
 
+    public function setToken(string $token): void
+    {
+        $this->token = $token;
+    }
+
     public function getUser(): ?User
     {
         return $this->user;

src/Entity/WatchListTrigger.php

@@ -16,7 +16,7 @@ class WatchListTrigger
     private ?string $event = null;
 
     #[ORM\Id]
-    #[ORM\ManyToOne(targetEntity: WatchList::class, inversedBy: 'watchListTriggers')]
+    #[ORM\ManyToOne(targetEntity: WatchList::class, cascade: ['persist'], inversedBy: 'watchListTriggers')]
     #[ORM\JoinColumn(referencedColumnName: 'token', nullable: false, onDelete: 'CASCADE')]
     private ?WatchList $watchList = null;