feat: search through skins

This commit is contained in:
Rico van Zelst
2023-11-14 10:30:03 +01:00
parent 2aa85db037
commit 7ced468ad1
6 changed files with 112 additions and 6 deletions

View File

@@ -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 () {
return ChampionSkin::orderBy('id')->paginate(16);
});
$skins = QueryBuilder::for(ChampionSkin::class)
->allowedFilters(AllowedFilter::partial('name', 'skin_name'), 'rarity')
->paginate(16)
->appends(request()->query());
$rarityColor = [
'Common' => 'text-stone-300',

View File

@@ -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",

76
composer.lock generated
View File

@@ -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",

View File

@@ -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>

View File

@@ -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>

View File

@@ -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']);