chore: adds 'asPagiator' utility function

assets/controllers/monitor_controller.js

@@ -1,24 +0,0 @@
-import { Controller } from '@hotwired/stimulus';
-
-/*
-* The following line makes this controller "lazy": it won't be downloaded until needed
-* See https://github.com/symfony/stimulus-bridge#lazy-controllers
-*/
-/* stimulusFetch: 'lazy' */
-export default class extends Controller {
-    static values = {
-        title: String,
-        tmdbId: String,
-        imdbId: String,
-        mediaType: String,
-    }
-
-    addMovieMonitor() {
-        console.log(`/monitor/movies/${this.tmdbIdValue}/${this.imdbIdValue}/${encodeURI(this.titleValue)}`)
-        fetch(`/monitor/movies/${this.tmdbIdValue}/${this.imdbIdValue}/${encodeURI(this.titleValue)}`)
-            .then(res => res.json())
-            .then(json => {
-                console.log(json)
-            })
-    }
-}

assets/controllers/monitor_list_controller.js

@@ -0,0 +1,14 @@
+import { Controller } from '@hotwired/stimulus';
+
+/*
+* The following line makes this controller "lazy": it won't be downloaded until needed
+* See https://github.com/symfony/stimulus-bridge#lazy-controllers
+*/
+/* stimulusFetch: 'lazy' */
+export default class extends Controller {
+    deleteMonitor(data) {
+        fetch(`/api/monitor/${data.params.id}`, {method: 'DELETE'})
+            .then(res => res.json())
+            .then(json => console.debug(json));
+    }
+}

src/Download/Framework/Repository/DownloadRepository.php

@@ -25,7 +25,7 @@ class DownloadRepository extends ServiceEntityRepository
         $this->paginator = $paginator;
     }
 
-    public function getCompletePaginated(UserInterface $user, int $pageNumber = 1, int $perPage = 10)
+    public function getCompletePaginated(UserInterface $user, int $pageNumber = 1, int $perPage = 10): Paginator
     {
         $query = $this->createQueryBuilder('d')
             ->andWhere('d.status IN (:statuses)')
@@ -38,7 +38,7 @@ class DownloadRepository extends ServiceEntityRepository
         return $this->paginator->paginate($query, $pageNumber, $perPage);
     }
 
-    public function getActivePaginated(UserInterface $user, int $pageNumber = 1, int $perPage = 5)
+    public function getActivePaginated(UserInterface $user, int $pageNumber = 1, int $perPage = 5): Paginator
     {
         $query = $this->createQueryBuilder('d')
             ->andWhere('d.status IN (:statuses)')

src/Monitor/Action/Command/DeleteMonitorCommand.php

@@ -0,0 +1,13 @@
+<?php
+
+namespace App\Monitor\Action\Command;
+
+use OneToMany\RichBundle\Contract\CommandInterface;
+
+/** @implements CommandInterface<DeleteMonitorCommand> */
+class DeleteMonitorCommand implements CommandInterface
+{
+    public function __construct(
+        public string $monitorId,
+    ) {}
+}

src/Monitor/Action/Handler/DeleteMonitorHandler.php

@@ -0,0 +1,36 @@
+<?php
+
+namespace App\Monitor\Action\Handler;
+
+use App\Monitor\Action\Command\AddMonitorCommand;
+use App\Monitor\Action\Command\DeleteMonitorCommand;
+use App\Monitor\Action\Result\AddMonitorResult;
+use App\Monitor\Action\Result\DeleteMonitorResult;
+use App\Monitor\Framework\Entity\Monitor;
+use App\Monitor\Framework\Repository\MonitorRepository;
+use App\User\Framework\Repository\UserRepository;
+use DateTimeImmutable;
+use OneToMany\RichBundle\Contract\CommandInterface;
+use OneToMany\RichBundle\Contract\HandlerInterface;
+use OneToMany\RichBundle\Contract\ResultInterface;
+
+/** @implements HandlerInterface<DeleteMonitorCommand, DeleteMonitorResult> */
+readonly class DeleteMonitorHandler implements HandlerInterface
+{
+    public function __construct(
+        private MonitorRepository $monitorRepository,
+    ) {}
+
+    public function handle(CommandInterface $command): ResultInterface
+    {
+        $monitor = $this->monitorRepository->find($command->monitorId);
+        $this->monitorRepository->getEntityManager()->remove($monitor);
+        $this->monitorRepository->getEntityManager()->flush();
+
+        return new DeleteMonitorResult(
+            status: 'OK',
+            result: [],
+            monitor: $monitor
+        );
+    }
+}

src/Monitor/Action/Input/DeleteMonitorInput.php

@@ -0,0 +1,24 @@
+<?php
+
+namespace App\Monitor\Action\Input;
+
+use App\Monitor\Action\Command\DeleteMonitorCommand;
+use OneToMany\RichBundle\Attribute\SourceRoute;
+use OneToMany\RichBundle\Contract\CommandInterface;
+use OneToMany\RichBundle\Contract\InputInterface;
+
+/** @implements InputInterface<DeleteMonitorInput, DeleteMonitorCommand> */
+class DeleteMonitorInput implements InputInterface
+{
+    public function __construct(
+        #[SourceRoute('monitorId')]
+        public int $monitorId,
+    ) {}
+
+    public function toCommand(): CommandInterface
+    {
+        return new DeleteMonitorCommand(
+            $this->monitorId
+        );
+    }
+}

src/Monitor/Action/Result/DeleteMonitorResult.php

@@ -0,0 +1,15 @@
+<?php
+
+namespace App\Monitor\Action\Result;
+
+use App\Monitor\Framework\Entity\Monitor;
+use OneToMany\RichBundle\Contract\ResultInterface;
+
+class DeleteMonitorResult implements ResultInterface
+{
+    public function __construct(
+        public string $status,
+        public array $result,
+        public Monitor $monitor,
+    ) {}
+}

src/Monitor/Framework/Controller/ApiController.php

@@ -2,8 +2,11 @@
 
 namespace App\Monitor\Framework\Controller;
 
+use App\Download\Action\Input\DeleteDownloadInput;
 use App\Monitor\Action\Handler\AddMonitorHandler;
+use App\Monitor\Action\Handler\DeleteMonitorHandler;
 use App\Monitor\Action\Input\AddMonitorInput;
+use App\Monitor\Action\Input\DeleteMonitorInput;
 use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
 use Symfony\Bundle\SecurityBundle\Security;
 use Symfony\Component\DependencyInjection\Attribute\Autowire;
@@ -43,4 +46,27 @@ class ApiController extends AbstractController
             'message' => $response
         ]);
     }
+
+    #[Route('/api/monitor/{monitorId}', name: 'api_monitor_delete', methods: ['DELETE'])]
+    public function deleteMonitor(
+        DeleteMonitorInput $input,
+        DeleteMonitorHandler $handler,
+        HubInterface $hub,
+    ) {
+        $response = $handler->handle($input->toCommand());
+
+        $hub->publish(new Update(
+            'alerts',
+            $this->renderer->render('broadcast/Alert.stream.html.twig', [
+                'alert_id' => uniqid(),
+                'title' => 'Success',
+                'message' => "New monitor added for {$response->monitor->getTitle()}",
+            ])
+        ));
+
+        return $this->json([
+            'status' => 200,
+            'message' => $response
+        ]);
+    }
 }

src/Monitor/Framework/Controller/WebController.php

@@ -0,0 +1,31 @@
+<?php
+
+namespace App\Monitor\Framework\Controller;
+
+use App\Download\Action\Input\DeleteDownloadInput;
+use App\Monitor\Action\Handler\AddMonitorHandler;
+use App\Monitor\Action\Handler\DeleteMonitorHandler;
+use App\Monitor\Action\Input\AddMonitorInput;
+use App\Monitor\Action\Input\DeleteMonitorInput;
+use App\Monitor\Framework\Repository\MonitorRepository;
+use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
+use Symfony\Bundle\SecurityBundle\Security;
+use Symfony\Component\DependencyInjection\Attribute\Autowire;
+use Symfony\Component\Mercure\HubInterface;
+use Symfony\Component\Mercure\Update;
+use Symfony\Component\Routing\Attribute\Route;
+use Twig\Environment;
+
+class WebController extends AbstractController
+{
+    public function __construct(
+        #[Autowire(service: 'twig')]
+        private readonly Environment $renderer,
+    ) {}
+
+    #[Route('/monitors', name: 'app_monitors', methods: ['GET'])]
+    public function addMonitor()
+    {
+        return $this->render('monitor/index.html.twig');
+    }
+}

src/Monitor/Framework/Entity/Monitor.php

@@ -7,7 +7,9 @@ use App\User\Framework\Entity\User;
 use Doctrine\DBAL\Types\Types;
 use Doctrine\ORM\Mapping as ORM;
 use Symfony\Component\Serializer\Attribute\Ignore;
+use Symfony\UX\Turbo\Attribute\Broadcast;
 
+#[Broadcast(template: 'broadcast/Monitor.stream.html.twig')]
 #[ORM\Entity(repositoryClass: MonitorRepository::class)]
 class Monitor
 {

src/Monitor/Framework/Repository/MonitorRepository.php

@@ -21,7 +21,7 @@ class MonitorRepository extends ServiceEntityRepository
         $this->paginator = $paginator;
     }
 
-    public function getUserMonitorsPaginated(UserInterface $user, int $page, int $perPage)
+    public function getUserMonitorsPaginated(UserInterface $user, int $page, int $perPage): Paginator
     {
         $query = $this->createQueryBuilder('m')
             ->andWhere('m.status IN (:statuses)')

src/Twig/Components/DownloadList.php

@@ -16,15 +16,11 @@ final class DownloadList extends AbstractController
 {
     use DefaultActionTrait;
 
+    use PaginateTrait;
+
     #[LiveProp(writable: true)]
     public string $type;
 
-    #[LiveProp(writable: true)]
-    public int $pageNumber = 1;
-
-    #[LiveProp(writable: true)]
-    public int $perPage = 5;
-
     #[LiveProp(writable: true)]
     public bool $isWidget = true;
 
@@ -42,10 +38,4 @@ final class DownloadList extends AbstractController
 
         return [];
     }
-
-    #[LiveAction]
-    public function paginate(#[LiveArg] int $page)
-    {
-        $this->pageNumber = $page;
-    }
 }

src/Twig/Components/MonitorList.php

@@ -4,13 +4,19 @@ namespace App\Twig\Components;
 
 use App\Monitor\Framework\Repository\MonitorRepository;
 use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
+use Symfony\UX\LiveComponent\Attribute\AsLiveComponent;
 use Symfony\UX\LiveComponent\Attribute\LiveAction;
-use Symfony\UX\LiveComponent\Attribute\LiveArg;
-use Symfony\UX\TwigComponent\Attribute\AsTwigComponent;
+use Symfony\UX\LiveComponent\Attribute\LiveProp;
+use Symfony\UX\LiveComponent\DefaultActionTrait;
 
-#[AsTwigComponent]
+#[AsLiveComponent]
 final class MonitorList extends AbstractController
 {
+    use DefaultActionTrait;
+
+    use PaginateTrait;
+
+    #[LiveProp(writable: true)]
     public bool $isWidget = true;
 
     public function __construct(
@@ -18,8 +24,8 @@ final class MonitorList extends AbstractController
     ) {}
 
     #[LiveAction]
-    public function getUserMonitors(#[LiveArg] int $page = 1, #[LiveArg] int $perPage = 5)
+    public function getUserMonitors()
     {
-        return $this->monitorRepository->getUserMonitorsPaginated($this->getUser(), $page, $perPage);
+        return $this->monitorRepository->getUserMonitorsPaginated($this->getUser(), $this->pageNumber, $this->perPage);
     }
 }

src/Twig/Components/PaginateTrait.php

@@ -0,0 +1,30 @@
+<?php
+
+namespace App\Twig\Components;
+
+use App\Util\Paginator;
+use Doctrine\ORM\Query;
+use Symfony\UX\LiveComponent\Attribute\LiveAction;
+use Symfony\UX\LiveComponent\Attribute\LiveArg;
+use Symfony\UX\LiveComponent\Attribute\LiveProp;
+
+trait PaginateTrait
+{
+    #[LiveProp(writable: true)]
+    public int $pageNumber = 1;
+
+    #[LiveProp(writable: true)]
+    public int $perPage = 5;
+
+    #[LiveAction]
+    public function paginate(#[LiveArg] int $page)
+    {
+        $this->pageNumber = $page;
+    }
+
+    private function asPaginator(Query $query): Paginator
+    {
+        return (new Paginator())
+            ->paginate($query, $this->pageNumber, $this->perPage);
+    }
+}

templates/broadcast/Download.stream.html.twig

@@ -18,6 +18,7 @@
                         <twig:StatusBadge color="green" status="Complete" />
                     {% endif %}
                 </td>
+                <td></td>
             </tr>
         </template>
     </turbo-stream>
@@ -35,6 +36,7 @@
                         <div class="text-green-700 rounded-sm text-bold text-gray-950 text-center bg-green-600 h-5" style="width:{{ entity.progress }}%">{{ entity.progress }}%</div>
                     </div>
                 </td>
+                <td></td>
             </template>
         </turbo-stream>
     {% else %}
@@ -59,6 +61,15 @@
                     <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800 dark:text-gray-50">
                         <twig:StatusBadge color="green" status="Complete" />
                     </td>
+                    <td class="px-6 py-4 flex flex-row align-middle justify-center">
+                        <button {{ stimulus_action('download_list', 'deleteDownload', 'click', {id: download.id}) }}>
+                            <twig:ux:icon
+                                    name="ic:twotone-cancel" width="18px"
+                                    class="rounded-full align-middle text-red-600"
+                                    title="Remove {{ download.title }} from download list. This will not delete the file."
+                            />
+                        </button>
+                    </td>
                 </tr>
             </template>
         </turbo-stream>

templates/broadcast/Monitor.stream.html.twig

@@ -0,0 +1,85 @@
+{# Learn how to use Turbo Streams: https://github.com/symfony/ux-turbo#broadcast-doctrine-entities-update #}
+{% block create %}
+    <turbo-stream action="remove" target="active_monitors_no_monitors">
+    </turbo-stream>
+
+    <turbo-stream action="append" target="monitors">
+        <template>
+            <tr  id="monitor_{{ entity.id }}">
+                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-stone-800 min-w-[50ch] max-w-[50ch] truncate">
+                    {{ entity.title }}
+                </td>
+                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">
+                    {{ entity.searchCount }}
+                </td>
+                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">
+                    {{ entity.createdAt|date('m/d/Y h:i a') }}
+                </td>
+                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">
+                    {{ entity.lastSearch|date('m/d/Y h:i a') }}
+                </td>
+                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">
+                    {% if entity.status == "New" %}
+                        <twig:StatusBadge color="orange" status="{{ entity.status }}" />
+                    {% elseif entity.status == "In Progress" or entity.status == "Active" %}
+                        <twig:StatusBadge color="purple" status="{{ entity.status }}" />
+                    {% else %}
+                        <twig:StatusBadge color="green" status="{{ entity.status }}" />
+                    {% endif %}
+                </td>
+                <td class="px-6 py-4 flex flex-row align-middle justify-center">
+                    <button {{ stimulus_action('monitor_list', 'deleteMonitor', 'click', {id: entity.id}) }}>
+                        <twig:ux:icon
+                                name="ic:twotone-cancel" width="18px"
+                                class="rounded-full align-middle text-red-600"
+                                title="Remove {{ entity.title }} from your Monitor list."
+                        />
+                    </button>
+                </td>
+            </tr>
+        </template>
+    </turbo-stream>
+{% endblock %}
+
+{% block update %}
+        <turbo-stream action="prepend" target="monitors">
+            <template>
+                <tr  id="monitor_{{ entity.id }}">
+                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-stone-800 min-w-[50ch] max-w-[50ch] truncate">
+                        {{ entity.title }}
+                    </td>
+                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">
+                        {{ entity.searchCount }}
+                    </td>
+                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">
+                        {{ entity.createdAt|date('m/d/Y h:i a') }}
+                    </td>
+                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">
+                        {{ entity.lastSearch|date('m/d/Y h:i a') }}
+                    </td>
+                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">
+                        {% if entity.status == "New" %}
+                            <twig:StatusBadge color="orange" status="{{ entity.status }}" />
+                        {% elseif entity.status == "In Progress" or entity.status == "Active" %}
+                            <twig:StatusBadge color="purple" status="{{ entity.status }}" />
+                        {% else %}
+                            <twig:StatusBadge color="green" status="{{ entity.status }}" />
+                        {% endif %}
+                    </td>
+                    <td class="px-6 py-4 flex flex-row align-middle justify-center">
+                        <button {{ stimulus_action('monitor_list', 'deleteMonitor', 'click', {id: entity.id}) }}>
+                            <twig:ux:icon
+                                    name="ic:twotone-cancel" width="18px"
+                                    class="rounded-full align-middle text-red-600"
+                                    title="Remove {{ entity.title }} from your Monitor list."
+                            />
+                        </button>
+                    </td>
+                </tr>
+            </template>
+        </turbo-stream>
+{% endblock %}
+
+{% block remove %}
+    <turbo-stream action="remove" target="monitor_{{ id }}"></turbo-stream>
+{% endblock %}

templates/components/DownloadList.html.twig

@@ -62,7 +62,7 @@
                             <twig:ux:icon
                                     name="ic:twotone-cancel" width="18px"
                                     class="rounded-full align-middle text-red-600"
-                                    title="Remove {{ download.title }} from download list. This will not delete the file."
+                                    title="Remove {{ download.title }} from your Download list. This will not delete the file."
                             />
                         </button>
                     </td>

templates/components/MonitorList.html.twig

@@ -1,6 +1,5 @@
-<div{{ attributes }} class="min-w-48">
-    <p class="text-white mb-1">The items you're currently monitoring to automatically download.</p>
-    <table id="downloads" class="divide-y divide-gray-200 bg-gray-50 overflow-hidden rounded-lg table-fixed" {{ turbo_stream_listen('App\\Download\\Framework\\Entity\\Download') }}>
+<div{{ attributes.defaults(stimulus_controller('monitor_list')) }}>
+    <table id="monitor_list" class="divide-y divide-gray-200 bg-gray-50 overflow-hidden rounded-lg table-auto w-full" {{ turbo_stream_listen('App\\Monitor\\Framework\\Entity\\Monitor') }}>
         <thead>
         <tr class="bg-orange-500 bg-filter bg-blur-lg bg-opacity-80 text-gray-950">
             <th scope="col"
@@ -23,9 +22,10 @@
                 class="px-6 py-3 text-start text-xs font-medium uppercase">
                 Status
             </th>
+            <th></th>
         </tr>
         </thead>
-        <tbody class="divide-y divide-gray-50">
+        <tbody id="monitors" class="divide-y divide-gray-50">
         {% if this.userMonitors.items|length > 0 %}
             {% for monitor in this.userMonitors.items %}
                 <tr  id="monitor_{{ monitor.id }}">
@@ -50,18 +50,27 @@
                             <twig:StatusBadge color="green" status="{{ monitor.status }}" />
                         {% endif %}
                     </td>
+                    <td class="px-6 py-4 flex flex-row align-middle justify-center">
+                        <button {{ stimulus_action('monitor_list', 'deleteMonitor', 'click', {id: monitor.id}) }}>
+                            <twig:ux:icon
+                                    name="ic:twotone-cancel" width="18px"
+                                    class="rounded-full align-middle text-red-600"
+                                    title="Remove {{ monitor.title }} from your Monitor list."
+                            />
+                        </button>
+                    </td>
                 </tr>
             {% endfor %}
-            {% if this.userMonitors.items|length > 5 %}
+            {% if this.isWidget and this.userMonitors.items|length > 5 %}
                 <tr  id="monitor_view_all">
-                    <td colspan="5" class="py-2 whitespace-nowrap bg-orange-500 uppercase text-sm font-medium text-center text-white min-w-[50ch] max-w-[50ch] truncate">
-                        <a href="#">View All Monitors</a>
+                    <td colspan="100%" class="py-2 whitespace-nowrap bg-orange-500 uppercase text-sm font-medium text-center text-white min-w-[50ch] max-w-[50ch] truncate">
+                        <a href="{{ path('app_monitors') }}">View All Monitors</a>
                     </td>
                 </tr>
             {% endif %}
         {% else %}
-            <tr>
-                <td class="px-6 py-4 whitespace-nowrap text-xs uppercase text-center col-span-2 font-medium text-stone-800" colspan="2">
+            <tr id="active_monitors_no_monitors">
+                <td class="px-6 py-4 whitespace-nowrap text-xs uppercase text-center col-span-2 font-medium text-stone-800" colspan="100%">
                     No monitors
                 </td>
             </tr>

templates/components/NavBar.html.twig

@@ -20,6 +20,15 @@
                 </a>
             </li>
 
+            <li>
+                <a href="{{ path('app_monitors') }}"
+                   class="block rounded-lg
+                         bg-orange-500 hover:bg-opacity-80 bg-clip-padding backdrop-filter backdrop-blur-md bg-opacity-60
+                         px-4 py-2 text-sm font-medium text-gray-50">
+                    Monitors
+                </a>
+            </li>
+
             <li>
                 <a href="{{ path('app_user_preferences') }}"
                    class="block rounded-lg px-4 py-2 text-sm font-medium text-gray-50 hover:bg-gray-100 hover:text-stone-700">

templates/monitor/index.html.twig

@@ -0,0 +1,12 @@
+{% extends 'base.html.twig' %}
+
+{% block title %}Monitors — Torsearch{% endblock %}
+{% block h2 %}Monitors{% endblock %}
+
+{% block body %}
+    <div class="p-4">
+        <twig:Card title="Monitors">
+            <twig:MonitorList :isWidget="false" :perPage="10"></twig:MonitorList>
+        </twig:Card>
+    </div>
+{% endblock %}