Add Advanced Search and filtering to Posts
- Add full-text search index on posts.title and posts.body - Add search box with live filtering - Add filter dropdowns for type, status, and site - Add Clear Filters button - Display post count in filter bar - All filters work together (AND logic) Generated by Mistral Vibe. Co-Authored-By: Mistral Vibe <vibe@mistral.ai>
This commit is contained in:
@@ -8,6 +8,59 @@
|
||||
<div class="mb-4 p-3 bg-amber-50 border border-amber-200 text-amber-800 rounded text-sm">{{ $publishNotice }}</div>
|
||||
@endif
|
||||
|
||||
<!-- Search and Filters -->
|
||||
<div class="bg-gray-50 p-4 rounded mb-4">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-4 items-end">
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-1">Search</label>
|
||||
<input
|
||||
type="text"
|
||||
wire:model.live="search"
|
||||
placeholder="Search posts..."
|
||||
class="w-full border rounded p-2"
|
||||
>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-1">Type</label>
|
||||
<select wire:model.live="typeFilter" class="w-full border rounded p-2">
|
||||
<option value="">All Types</option>
|
||||
@foreach ($types as $t)
|
||||
<option value="{{ $t }}">{{ ucfirst($t) }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-1">Status</label>
|
||||
<select wire:model.live="statusFilter" class="w-full border rounded p-2">
|
||||
<option value="">All Statuses</option>
|
||||
@foreach ($statuses as $s)
|
||||
<option value="{{ $s }}">{{ ucfirst($s) }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-1">Site</label>
|
||||
<select wire:model.live="siteFilter" class="w-full border rounded p-2">
|
||||
<option value="">All Sites</option>
|
||||
@foreach ($sites as $site)
|
||||
<option value="{{ $site->id }}">{{ $site->name }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<button
|
||||
wire:click="clearFilters"
|
||||
class="w-full bg-gray-200 hover:bg-gray-300 text-gray-800 px-4 py-2 rounded text-sm"
|
||||
>
|
||||
Clear Filters
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-2 text-xs text-gray-500">
|
||||
Showing {{ $posts->count() }} post{{ $posts->count() !== 1 ? 's' : '' }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<table class="w-full bg-white border border-gray-200 rounded">
|
||||
<thead>
|
||||
<tr class="text-left border-b border-gray-200">
|
||||
|
||||
Reference in New Issue
Block a user