fix: splits monitor widget types to complete and active

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()
+        );
     }
 }

templates/components/MonitorList.html.twig

@@ -26,8 +26,8 @@
         </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">
                         {{ monitor.title }}
@@ -61,7 +61,7 @@
                     </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">
                         <a href="{{ path('app_monitors') }}">View All Monitors</a>
@@ -79,8 +79,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/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 %}