feat: search through skins

app/Http/Controllers/ChampionSkinController.php

@@ -4,8 +4,11 @@ namespace App\Http\Controllers;
 
 use App\Http\Requests\StoreChampionSkinRequest;
 use App\Http\Requests\UpdateChampionSkinRequest;
+use App\Models\Champion;
 use App\Models\ChampionSkin;
 use Illuminate\Support\Facades\Cache;
+use Spatie\QueryBuilder\AllowedFilter;
+use Spatie\QueryBuilder\QueryBuilder;
 
 class ChampionSkinController extends Controller
 {
@@ -14,9 +17,10 @@ class ChampionSkinController extends Controller
      */
     public function index()
     {
-        $skins = Cache::remember('championSkinsListAllCache' . request('page', 1), 60 * 60 * 8, function () {
+        $skins = QueryBuilder::for(ChampionSkin::class)
-            return ChampionSkin::orderBy('id')->paginate(16);
+            ->allowedFilters(AllowedFilter::partial('name', 'skin_name'), 'rarity')
-        });
+            ->paginate(16)
+            ->appends(request()->query());
 
         $rarityColor = [
             'Common' => 'text-stone-300',

composer.json

@@ -19,7 +19,8 @@
         "laravel/sanctum": "^3.2",
         "laravel/tinker": "^2.8",
         "saade/blade-iconsax": "^1.1",
-        "spatie/laravel-backup": "^8.3"
+        "spatie/laravel-backup": "^8.3",
+        "spatie/laravel-query-builder": "^5.6"
     },
     "require-dev": {
         "barryvdh/laravel-debugbar": "^3.9",

composer.lock

@@ -4,7 +4,7 @@
         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
         "This file is @generated automatically"
     ],
-    "content-hash": "dec98fa5ff307071427749b99398cf7e",
+    "content-hash": "bff25bed7714b9e4c1383d029a29c3fd",
     "packages": [
         {
             "name": "anhskohbo/no-captcha",
@@ -4063,6 +4063,80 @@
             ],
             "time": "2023-08-23T09:04:39+00:00"
         },
+        {
+            "name": "spatie/laravel-query-builder",
+            "version": "5.6.0",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/spatie/laravel-query-builder.git",
+                "reference": "a91a348f2d205026ac726850c969e4da15061aa9"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/spatie/laravel-query-builder/zipball/a91a348f2d205026ac726850c969e4da15061aa9",
+                "reference": "a91a348f2d205026ac726850c969e4da15061aa9",
+                "shasum": ""
+            },
+            "require": {
+                "illuminate/database": "^9.0|^10.0",
+                "illuminate/http": "^9.0|^10.0",
+                "illuminate/support": "^9.0|^10.0",
+                "php": "^8.0",
+                "spatie/laravel-package-tools": "^1.11"
+            },
+            "require-dev": {
+                "ext-json": "*",
+                "mockery/mockery": "^1.4",
+                "orchestra/testbench": "^7.0|^8.0",
+                "pestphp/pest": "^1.20",
+                "phpunit/phpunit": "^9.6.11",
+                "spatie/invade": "^2.0",
+                "spatie/laravel-ray": "^1.28"
+            },
+            "type": "library",
+            "extra": {
+                "laravel": {
+                    "providers": [
+                        "Spatie\\QueryBuilder\\QueryBuilderServiceProvider"
+                    ]
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "Spatie\\QueryBuilder\\": "src",
+                    "Spatie\\QueryBuilder\\Database\\Factories\\": "database/factories"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Alex Vanderbist",
+                    "email": "alex@spatie.be",
+                    "homepage": "https://spatie.be",
+                    "role": "Developer"
+                }
+            ],
+            "description": "Easily build Eloquent queries from API requests",
+            "homepage": "https://github.com/spatie/laravel-query-builder",
+            "keywords": [
+                "laravel-query-builder",
+                "spatie"
+            ],
+            "support": {
+                "issues": "https://github.com/spatie/laravel-query-builder/issues",
+                "source": "https://github.com/spatie/laravel-query-builder"
+            },
+            "funding": [
+                {
+                    "url": "https://spatie.be/open-source/support-us",
+                    "type": "custom"
+                }
+            ],
+            "time": "2023-10-05T10:21:47+00:00"
+        },
         {
             "name": "spatie/laravel-signal-aware-command",
             "version": "1.3.0",

resources/views/components/skins/paginatedlist.blade.php

@@ -6,6 +6,8 @@
         class="text-3xl font-bold text-center text-transparent uppercase sm:text-4xl
         bg-gradient-to-bl from-orange-300 to-orange-500 bg-clip-text">
         Champion Skins</h2>
+    <x-skins.searchbar/>
+
     <div class="flex justify-center items-center mx-auto max-w-screen-xl mt-2.5">
     </div>
 

resources/views/components/skins/searchbar.blade.php

@@ -0,0 +1,25 @@
+<div class="flex items-center justify-center mt-8 ">
+    <form action="{{ route('skins.index') }}" method="GET" class="flex" id="searchForm">
+        <div class="relative">
+            <input type="text" name="filter[name]" placeholder="Search by skin name"
+                   value="{{ request('filter.name') }}"
+                   class="border border-transparent focus:border-transparent focus:ring-0 border-stone-700 rounded-l px-4 py-2 bg-stone-800 text-white ring-orange-500 pr-10">
+            @if(request('filter.name'))
+                <button type="button" onclick="clearSearchAndSubmit()"
+                        class="absolute inset-y-0 right-0 flex items-center px-3 bg-stone-800 text-white cursor-pointer">
+                    <x-iconsax-lin-clipboard-close class="w-6 text-white"/>
+                </button>
+            @endif
+        </div>
+        <button type="submit"
+                class="bg-orange-500 hover:bg-orange-600 text-white font-semibold px-4 py-2 rounded-r focus:outline-none ring-orange-500">
+            Search
+        </button>
+    </form>
+</div>
+<script>
+    function clearSearchAndSubmit() {
+        document.querySelector('input[name="filter[name]"]').value = '';
+        document.getElementById('searchForm').submit();
+    }
+</script>

routes/web.php

@@ -22,5 +22,5 @@ Route::get('/', [HomeController::class, 'index']);
 Route::get('/champions', [ChampionController::class, 'index']);
 Route::get('/champion/{champion}', [ChampionController::class, 'show']);
 // Skins
-Route::get('/skins', [ChampionSkinController::class, 'index']);
+Route::get('/skins', [ChampionSkinController::class, 'index'])->name('skins.index');
 Route::get('/skin/{championSkin}', [ChampionSkinController::class, 'show']);