feat: adds search to download list component

src/Download/Framework/Repository/DownloadRepository.php

@@ -25,27 +25,31 @@ class DownloadRepository extends ServiceEntityRepository
         $this->paginator = $paginator;
     }
 
-    public function getCompletePaginated(UserInterface $user, int $pageNumber = 1, int $perPage = 10): Paginator
+    public function getCompletePaginated(UserInterface $user, int $pageNumber = 1, int $perPage = 10, string $term = ""): Paginator
     {
         $query = $this->createQueryBuilder('d')
             ->andWhere('d.status IN (:statuses)')
             ->andWhere('d.user = :user')
+            ->andWhere('(d.title LIKE :term OR d.imdbId LIKE :term)')
             ->orderBy('d.id', 'DESC')
             ->setParameter('statuses', ['Complete'])
             ->setParameter('user', $user)
+            ->setParameter('term', '%' . $term . '%')
             ->getQuery();
 
         return $this->paginator->paginate($query, $pageNumber, $perPage);
     }
 
-    public function getActivePaginated(UserInterface $user, int $pageNumber = 1, int $perPage = 5): Paginator
+    public function getActivePaginated(UserInterface $user, int $pageNumber = 1, int $perPage = 5, string $term = ""): Paginator
     {
         $query = $this->createQueryBuilder('d')
             ->andWhere('d.status IN (:statuses)')
             ->andWhere('d.user = :user')
+            ->andWhere('(d.title LIKE :term OR d.imdbId LIKE :term)')
             ->orderBy('d.id', 'ASC')
             ->setParameter('statuses', ['New', 'In Progress'])
             ->setParameter('user', $user)
+            ->setParameter('term', '%' . $term . '%')
             ->getQuery();
 
         return $this->paginator->paginate($query, $pageNumber, $perPage);

src/Twig/Components/DownloadList.php

@@ -18,6 +18,9 @@ final class DownloadList extends AbstractController
 
     use PaginateTrait;
 
+    #[LiveProp(writable: true)]
+    public string $term = "";
+
     #[LiveProp(writable: true)]
     public string $type;
 
@@ -31,9 +34,9 @@ final class DownloadList extends AbstractController
     public function getDownloads()
     {
         if ($this->type === "active") {
-            return $this->downloadRepository->getActivePaginated($this->getUser(), $this->pageNumber, $this->perPage);
+            return $this->downloadRepository->getActivePaginated($this->getUser(), $this->pageNumber, $this->perPage, $this->term);
         } elseif ($this->type === "complete") {
-            return $this->downloadRepository->getCompletePaginated($this->getUser(), $this->pageNumber, $this->perPage);
+            return $this->downloadRepository->getCompletePaginated($this->getUser(), $this->pageNumber, $this->perPage, $this->term);
         }
 
         return [];

templates/components/DownloadList.html.twig

@@ -1,5 +1,8 @@
 <div{{ attributes.defaults(stimulus_controller('download_list')) }} class="min-w-48" >
     {% set table_body_id = (type == "complete") ? "complete_downloads" : "active_downloads" %}
+    <div class="flex flex-row mb-2">
+        <twig:DownloadSearch search_path="app_search" placeholder="Find one of your downloads..." />
+    </div>
     <table id="downloads" class="divide-y divide-gray-200 bg-gray-50 overflow-hidden rounded-lg table-auto w-full" {{ turbo_stream_listen('App\\Download\\Framework\\Entity\\Download') }}>
         <thead>
         <tr class="bg-orange-500 bg-filter bg-blur-lg bg-opacity-80 text-gray-950">

templates/components/DownloadSearch.html.twig

@@ -0,0 +1,29 @@
+<div {{ attributes }} class="w-full max-w-sm min-w-[200px]">
+    <div class="relative">
+        <form>
+            <input
+                    data-model="term"
+                    class="w-full bg-orange-500 rounded-md bg-clip-padding backdrop-filter
+                         backdrop-blur-md bg-opacity-40 placeholder:text-slate-200 text-gray-50
+                         text-sm border border-orange-500 rounded-md pl-3 pr-28 py-2 transition
+                         duration-300 ease focus:outline-none focus:border-orange-400 hover:border-orange-300
+                         shadow-sm focus:shadow"
+                    placeholder="{{ placeholder ?? 'TV Show, Movie...' }}"
+            />
+            <button
+                    class="absolute top-1 right-1 flex items-center rounded
+                    bg-green-600 py-1 px-2.5 border border-transparent text-center
+                    text-sm text-white transition-all
+                    focus:bg-green-700 active:bg-green-700 hover:bg-green-700
+
+                    text-white bg-green-600 text-sm
+                    border border-green-500
+                    backdrop-filter backdrop-blur-md bg-opacity-80
+"
+                    type="submit"
+            >
+                Search
+            </button>
+        </form>
+    </div>
+</div>