upgrade to Symfony 7.3, style updates

composer.json

@@ -23,28 +23,28 @@
         "php-tmdb/api": "^4.1",
         "predis/predis": "^2.4",
         "runtime/frankenphp-symfony": "^0.2.0",
-        "symfony/asset": "7.2.*",
-        "symfony/console": "7.2.*",
-        "symfony/doctrine-messenger": "7.2.*",
-        "symfony/dotenv": "7.2.*",
-        "symfony/filesystem": "7.2.*",
-        "symfony/finder": "7.2.*",
+        "symfony/asset": "7.3.*",
+        "symfony/console": "7.3.*",
+        "symfony/doctrine-messenger": "7.3.*",
+        "symfony/dotenv": "7.3.*",
+        "symfony/filesystem": "7.3.*",
+        "symfony/finder": "7.3.*",
         "symfony/flex": "^2",
-        "symfony/form": "7.2.*",
-        "symfony/framework-bundle": "7.2.*",
-        "symfony/ldap": "7.2.*",
+        "symfony/form": "7.3.*",
+        "symfony/framework-bundle": "7.3.*",
+        "symfony/ldap": "7.3.*",
         "symfony/mercure-bundle": "^0.3.9",
-        "symfony/messenger": "7.2.*",
-        "symfony/runtime": "7.2.*",
-        "symfony/scheduler": "7.2.*",
-        "symfony/security-bundle": "7.2.*",
+        "symfony/messenger": "7.3.*",
+        "symfony/runtime": "7.3.*",
+        "symfony/scheduler": "7.3.*",
+        "symfony/security-bundle": "7.3.*",
         "symfony/stimulus-bundle": "^2.24",
-        "symfony/twig-bundle": "7.2.*",
+        "symfony/twig-bundle": "7.3.*",
         "symfony/ux-icons": "^2.24",
         "symfony/ux-live-component": "^2.24",
         "symfony/ux-turbo": "^2.24",
         "symfony/ux-twig-component": "^2.24",
-        "symfony/yaml": "7.2.*",
+        "symfony/yaml": "7.3.*",
         "symfonycasts/tailwind-bundle": "^0.10.0",
         "twig/extra-bundle": "^2.12|^3.0",
         "twig/twig": "^2.12|^3.0"
@@ -98,13 +98,13 @@
     "extra": {
         "symfony": {
             "allow-contrib": false,
-            "require": "7.2.*"
+            "require": "7.3.*"
         }
     },
     "require-dev": {
         "phpstan/phpstan": "^2.1",
         "symfony/maker-bundle": "^1.62",
-        "symfony/stopwatch": "7.2.*",
-        "symfony/web-profiler-bundle": "7.2.*"
+        "symfony/stopwatch": "7.3.*",
+        "symfony/web-profiler-bundle": "7.3.*"
     }
 }

config/packages/property_info.yaml

@@ -0,0 +1,3 @@
+framework:
+    property_info:
+        with_constructor_extractor: true

src/Twig/Components/MonitorList.php

@@ -16,6 +16,9 @@ final class MonitorList extends AbstractController
 
     use PaginateTrait;
 
+    #[LiveProp(writable: true)]
+    public string $type;
+
     #[LiveProp(writable: true)]
     public bool $isWidget = true;
 
@@ -24,8 +27,34 @@ final class MonitorList extends AbstractController
     ) {}
 
     #[LiveAction]
-    public function getUserMonitors()
+    public function getMonitors()
     {
-        return $this->monitorRepository->getUserMonitorsPaginated($this->getUser(), $this->pageNumber, $this->perPage);
+        if ($this->type === "active") {
+            return $this->getActiveUserMonitors();
+        } elseif ($this->type === "complete") {
+            return $this->getCompleteUserMonitors();
+        }
+
+        return [];
+    }
+
+    #[LiveAction]
+    public function getActiveUserMonitors()
+    {
+        return $this->asPaginator($this->monitorRepository->createQueryBuilder('m')
+            ->andWhere('m.status IN (:statuses)')
+            ->setParameter('statuses', ['New', 'In Progress'])
+            ->getQuery()
+        );
+    }
+
+    #[LiveAction]
+    public function getCompleteUserMonitors()
+    {
+        return $this->asPaginator($this->monitorRepository->createQueryBuilder('m')
+            ->andWhere('m.status = :status')
+            ->setParameter('status', 'Complete')
+            ->getQuery()
+        );
     }
 }

src/Twig/Extensions/MonitorExtension.php

@@ -0,0 +1,36 @@
+<?php
+
+namespace App\Twig\Extensions;
+
+use App\Monitor\Framework\Entity\Monitor;
+use Twig\Attribute\AsTwigFilter;
+
+class MonitorExtension
+{
+    #[AsTwigFilter('monitor_type')]
+    public function type(string $type)
+    {
+        $types = [
+            'tvshows' => 'Show',
+            'tvseason' => 'Season',
+            'tvepisode' => 'Episode',
+        ];
+
+        return $types[$type] ?? '-';
+    }
+
+    #[AsTwigFilter('monitor_media_id')]
+    public function mediaId(Monitor $monitor)
+    {
+        if ($monitor->getMonitorType() === "tvseason") {
+            return "S". str_pad($monitor->getSeason(), 2, "0", STR_PAD_LEFT);
+        }
+
+        if ($monitor->getMonitorType() === "tvepisode") {
+            return "S". str_pad($monitor->getSeason(), 2, "0", STR_PAD_LEFT) .
+                "E". str_pad($monitor->getEpisode(), 2, "0", STR_PAD_LEFT);
+        }
+
+        return "-";
+    }
+}

symfony.lock

@@ -2,6 +2,15 @@
     "1tomany/rich-bundle": {
         "version": "v1.8.3"
     },
+    "doctrine/deprecations": {
+        "version": "1.1",
+        "recipe": {
+            "repo": "github.com/symfony/recipes",
+            "branch": "main",
+            "version": "1.0",
+            "ref": "87424683adc81d7dc305eefec1fced883084aab9"
+        }
+    },
     "doctrine/doctrine-bundle": {
         "version": "2.14",
         "recipe": {
@@ -169,6 +178,18 @@
             "config/packages/messenger.yaml"
         ]
     },
+    "symfony/property-info": {
+        "version": "7.3",
+        "recipe": {
+            "repo": "github.com/symfony/recipes",
+            "branch": "main",
+            "version": "7.3",
+            "ref": "dae70df71978ae9226ae915ffd5fad817f5ca1f7"
+        },
+        "files": [
+            "config/packages/property_info.yaml"
+        ]
+    },
     "symfony/routing": {
         "version": "7.2",
         "recipe": {

tailwind.config.js

@@ -4,6 +4,14 @@ module.exports = {
     "./assets/**/*.js",
     "./templates/**/*.html.twig",
   ],
+  safelist: [
+      "bg-blue-300",
+      "bg-orange-300",
+      "bg-rose-300",
+      "bg-green-400",
+      "bg-purple-400",
+      "bg-orange-400",
+  ],
   theme: {
     extend: {},
   },

templates/components/DownloadList.html.twig

@@ -70,7 +70,7 @@
             {% endfor %}
             {% if this.isWidget == true and this.downloads.items|length > this.perPage %}
                 <tr  id="download_view_all">
-                    <td class="py-2 whitespace-nowrap bg-orange-500 uppercase text-sm font-medium text-center text-white truncate" colspan="100%">
+                    <td class="py-2 whitespace-nowrap bg-orange-300 uppercase text-xs font-medium text-center text-black truncate" colspan="100%">
                         <a href="{{ path('app_downloads') }}">View All Downloads</a>
                     </td>
                 </tr>

templates/components/MonitorList.html.twig

@@ -3,9 +3,13 @@
         <thead>
         <tr class="bg-orange-500 bg-filter bg-blur-lg bg-opacity-80 text-gray-950">
             <th scope="col"
-                class="px-6 py-3 text-start text-xs font-medium uppercase  min-w-[45ch] max-w-[45ch] truncate">
+                class="px-6 py-3 text-start text-xs font-medium uppercase truncate">
                 Title
             </th>
+            <th scope="col"
+                class="px-6 py-3 text-start text-xs font-medium uppercase">
+                ID
+            </th>
             <th scope="col"
                 class="px-6 py-3 text-start text-xs font-medium uppercase">
                 Search Count
@@ -18,6 +22,10 @@
                 class="px-6 py-3 text-start text-xs font-medium uppercase">
                 Last Search Date
             </th>
+            <th scope="col"
+                class="px-6 py-3 text-start text-xs font-medium uppercase">
+                Type
+            </th>
             <th scope="col"
                 class="px-6 py-3 text-start text-xs font-medium uppercase">
                 Status
@@ -26,12 +34,15 @@
         </tr>
         </thead>
         <tbody id="monitors" class="divide-y divide-gray-50">
-        {% if this.userMonitors.items|length > 0 %}
-            {% for monitor in this.userMonitors.items %}
+        {% if this.monitors.items|length > 0 %}
+            {% for monitor in this.monitors.items %}
                 <tr  id="monitor_{{ monitor.id }}">
-                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-stone-800 min-w-[50ch] max-w-[50ch] truncate">
+                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-stone-800 truncate">
                         {{ monitor.title }}
                     </td>
+                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">
+                        {{ monitor|monitor_media_id }}
+                    </td>
                     <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">
                         {{ monitor.searchCount }}
                     </td>
@@ -41,6 +52,15 @@
                     <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">
                         {{ monitor.lastSearch|date('m/d/Y h:i a') }}
                     </td>
+                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">
+                        {% if monitor.monitorType == "tvshow" %}
+                            <twig:StatusBadge color="blue" number="300" text="black" status="{{ monitor.monitorType|monitor_type }}" />
+                        {% elseif monitor.monitorType == "tvseason" %}
+                            <twig:StatusBadge color="orange" number="300" text="black" status="{{ monitor.monitorType|monitor_type }}" />
+                        {% else %}
+                            <twig:StatusBadge color="rose" number="300" text="black" status="{{ monitor.monitorType|monitor_type }}" />
+                        {% endif %}
+                    </td>
                     <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800">
                         {% if monitor.status == "New" %}
                             <twig:StatusBadge color="orange" status="{{ monitor.status }}" />
@@ -61,9 +81,9 @@
                     </td>
                 </tr>
             {% endfor %}
-            {% if this.isWidget and this.userMonitors.items|length > 5 %}
+            {% if this.isWidget and this.monitors.items|length > 5 %}
                 <tr  id="monitor_view_all">
-                    <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">
+                    <td colspan="100%" class="py-2 whitespace-nowrap bg-orange-300 uppercase text-xs font-medium text-center text-black min-w-[50ch] max-w-[50ch] truncate">
                         <a href="{{ path('app_monitors') }}">View All Monitors</a>
                     </td>
                 </tr>
@@ -79,8 +99,8 @@
     </table>
 
     {% if this.isWidget == false %}
-        {% if this.userMonitors.items|length > 0 %}
-            {% set paginator = this.userMonitors %}
+        {% if this.monitors.items|length > 0 %}
+            {% set paginator = this.monitors %}
             {% include 'partial/paginator.html.twig' %}
         {% endif %}
     {% endif %}

templates/components/StatusBadge.html.twig

@@ -1,3 +1,8 @@
-<span {{ attributes }} class="py-[3px] px-[7px] bg-{{ color|default('green') }}-600 rounded-lg inline-block text-center text-xs text-white">
+<span {{ attributes }}
+        class="py-[3px] px-[7px]
+        bg-{{ color|default('green') }}-{{ number|default(400) }}
+        text-{{ text|default('black') }}
+        rounded-lg inline-block text-center text-xs"
+>
     {{ status }}
 </span>

templates/index/index.html.twig

@@ -16,7 +16,7 @@
         </div>
         <div class="flex flex-row gap-4">
             <twig:Card title="Monitors" class="w-full">
-                <twig:MonitorList />
+                <twig:MonitorList :type="'active'" :isWidget="true" />
             </twig:Card>
         </div>
         <div class="flex flex-col gap-4">

templates/monitor/index.html.twig

@@ -5,8 +5,14 @@
 
 {% block body %}
     <div class="p-4">
-        <twig:Card title="Monitors">
-            <twig:MonitorList :isWidget="false" :perPage="10"></twig:MonitorList>
+        <twig:Card title="Active Monitors">
+            <twig:MonitorList :type="'active'" :isWidget="false" :perPage="10"></twig:MonitorList>
+        </twig:Card>
+    </div>
+
+    <div class="p-4">
+        <twig:Card title="Complete Monitors">
+            <twig:MonitorList :type="'complete'" :isWidget="false" :perPage="10"></twig:MonitorList>
         </twig:Card>
     </div>
 {% endblock %}