Add studio filter on download page closes #1

app/Livewire/DownloadsSearch.php

@@ -23,6 +23,10 @@ class DownloadsSearch extends Component
 
     public $isOpen = false;
 
+    #[Url(history: true)]
+    public $studios = [];
+    public $studiosCopy = [];
+
     // To toggle individual option selection
     public function toggleOption($option)
     {
@@ -46,6 +50,17 @@ class DownloadsSearch extends Component
         $this->resetPage();
     }
 
+    public function applyFilters(): void
+    {
+        $this->studiosCopy = $this->studios;
+        $this->resetPage();
+    }
+
+    public function revertFilters(): void
+    {
+        $this->studios = $this->studiosCopy;
+    }
+
     // Map the selected options to database types
     private function getSelectedTypes()
     {
@@ -129,6 +144,7 @@ class DownloadsSearch extends Component
 
         $downloads = Downloads::when($this->fileSearch != '', fn ($query) => $query->where('url', 'like', '%'.$this->fileSearch.'%'))
             ->whereIn('type', $this->getSelectedTypes())
+            ->when($this->studios !== [], fn ($q) => $q->whereHas('episode', fn ($query) => $query->whereHas('studio', function ($query) { $query->whereIn('slug', $this->studios); })))
             ->whereNotNull('size')
             ->orderBy($orderby, $orderdirection)
             ->paginate(20);
@@ -136,6 +152,7 @@ class DownloadsSearch extends Component
         return view('livewire.downloads-search', [
             'downloads'       => $downloads,
             'query'           => $this->fileSearch,
+            'studiocount'     => is_array($this->studios) ? count($this->studios) : 0,
         ]);
     }
 }

resources/views/livewire/downloads-search.blade.php

@@ -2,7 +2,7 @@
     <div class="mx-auto sm:px-6 lg:px-8 space-y-6 max-w-[100%] lg:max-w-[90%] xl:max-w-[80%] 2xl:max-w-[60%] relative z-10">
         <!-- Search Filter -->
         <div class="p-4 sm:p-8 bg-white/30 dark:bg-neutral-950/40 shadow sm:rounded-lg backdrop-blur relative z-100">
-            <div class="grid grid-cols-1 sm:grid-cols-3 gap-4 ">
+            <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4 ">
 
                 <!-- Title -->
                 <div>
@@ -73,6 +73,23 @@
                     @endif
                 </div>
 
+                <!-- Studios -->
+                <div>
+                    <div class="relative right-2 left-0 sm:left-2 transition-all">
+                        <div class="absolute inset-y-0 left-2 flex items-center pl-3 pointer-events-none">
+                            <i class="fa-solid fa-microphone-lines text-gray-500 dark:text-gray-400"></i>
+                        </div>
+                        <p data-te-toggle="modal" data-te-target="#modalStudios" data-te-ripple-init data-te-ripple-color="light" id="studios-filter" class="block cursor-pointer w-full p-4 pl-10 text-sm text-gray-500 dark:text-gray-400 border border-gray-300 rounded-lg bg-gray-50 focus:ring-rose-800 focus:border-rose-900 dark:bg-neutral-900 dark:border-neutral-600 dark:placeholder-gray-400 dark:focus:ring-rose-800 dark:focus:border-rose-900">
+                            @if($studiocount === 0)
+                            Select Studios
+                            @elseif($studiocount === 1)
+                            Selected {{ $studiocount }} Studio
+                            @elseif($studiocount > 1)
+                            Selected {{ $studiocount }} Studios
+                            @endif
+                        </p>
+                    </div>
+                </div>
 
                 <!-- Ordering -->
                 <div>
@@ -247,4 +264,5 @@
         </div>
         {{ $downloads->links('pagination::tailwind') }}
     </div>
+    @include('modals.filter-studios')
 </div>