wire up search and section filters

app/Livewire/ModIndex.php

@@ -3,6 +3,7 @@
 namespace App\Livewire;
 
 use App\Models\Mod;
+use Illuminate\Support\Str;
 use Livewire\Component;
 use Livewire\WithPagination;
 
@@ -10,15 +11,34 @@ class ModIndex extends Component
 {
     use WithPagination;
 
+    public $modSearch = '';
+
     public $sectionFilter = 'new';
 
     public function render()
     {
+        // 'new' section is default
+        $section = 'created_at';
+
+        switch ($this->sectionFilter) {
+            case 'most_downloaded':
+                $section = 'total_downloads';
+                break;
+            case 'recently_updated':
+                $section = 'updated_at';
+                break;
+            case 'top_rated':
+                // probably use some kind of 'likes' or something
+                // not implemented yet afaik -waffle
+                break;
+        }
+
         $mods = Mod::select(['id', 'name', 'slug', 'teaser', 'thumbnail', 'featured', 'created_at'])
             ->withTotalDownloads()
             ->with(['latestVersion', 'latestVersion.sptVersion', 'users:id,name'])
             ->whereHas('latestVersion')
-            ->latest()
+            ->where('name', 'like', '%'.Str::trim($this->modSearch).'%') //TODO: Is this how search do? Ref please advise. -waffle
+            ->orderByDesc($section)
             ->paginate(12);
 
         return view('livewire.mod-index', ['mods' => $mods]);

resources/views/livewire/mod-index.blade.php

@@ -1,9 +1,9 @@
 <div>
     {{--
     TODO:
-    [ ] search bar for mods
-    [ ] mods section filter
-    [ ] spt version filter
+    [X] search bar for mods
+    [X] spt version filter
+        - ratings not in yet, otherwise ready
     [ ] tags filter
     [ ] small / mobile display handling
     [ ] light mode theme handling
@@ -25,7 +25,7 @@
                     <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
                         <svg class="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="currentColor"><path d="M771-593 630-734l-85 84-85-84 113-114q12-12 27-17.5t30-5.5q16 0 30.5 5.5T686-848l85 85q18 17 26.5 39.5T806-678q0 23-8.5 45T771-593ZM220-409q-18-18-18-42.5t18-42.5l98-99 85 85-99 99q-17 18-41.5 18T220-409Zm-43 297q-11-12-17-26.5t-6-30.5q0-16 5.5-30.5T177-226l283-282-127-128q-18-17-18-41.5t18-42.5q17-18 42-18t43 18l127 127 57-57 112 114q12 12 12 28t-12 28q-12 12-28 12t-28-12L290-112q-12 12-26.5 17.5T234-89q-15 0-30-6t-27-17Z"/></svg>
                     </div>
-                    <input class="w-1/3 rounded-md border-0 bg-white dark:bg-gray-700 py-1.5 pl-10 pr-3 text-gray-900 dark:text-gray-300 ring-1 ring-inset ring-gray-300 dark:ring-gray-700 placeholder:text-gray-400 dark:placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-gray-600 dark:focus:bg-gray-200 dark:focus:text-black dark:focus:ring-0 sm:text-sm sm:leading-6" placeholder="Search Mods ..." />
+                    <input wire:model.live="modSearch" class="w-1/3 rounded-md border-0 bg-white dark:bg-gray-700 py-1.5 pl-10 pr-3 text-gray-900 dark:text-gray-300 ring-1 ring-inset ring-gray-300 dark:ring-gray-700 placeholder:text-gray-400 dark:placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-gray-600 dark:focus:bg-gray-200 dark:focus:text-black dark:focus:ring-0 sm:text-sm sm:leading-6" placeholder="Search Mods ..." />
                 </search>
             </div>