351 lines
12 KiB
PHP
351 lines
12 KiB
PHP
<?php
|
|
|
|
use App\Enums\PostStatus;
|
|
use App\Models\AdminLog;
|
|
use App\Models\Post;
|
|
use Illuminate\Support\Facades\DB;
|
|
use Livewire\Volt\Component;
|
|
use Livewire\WithPagination;
|
|
|
|
new class extends Component
|
|
{
|
|
use WithPagination;
|
|
|
|
public string $search = '';
|
|
public string $statusFilter = '';
|
|
public string $sortBy = 'updated_at';
|
|
public string $sortDir = 'desc';
|
|
public int $perPage = 10;
|
|
|
|
public ?Post $postToDelete = null;
|
|
public bool $showDeleteModal = false;
|
|
|
|
public function updatedSearch(): void
|
|
{
|
|
$this->resetPage();
|
|
}
|
|
|
|
public function updatedStatusFilter(): void
|
|
{
|
|
$this->resetPage();
|
|
}
|
|
|
|
public function updatedPerPage(): void
|
|
{
|
|
$this->resetPage();
|
|
}
|
|
|
|
public function sort(string $column): void
|
|
{
|
|
if ($this->sortBy === $column) {
|
|
$this->sortDir = $this->sortDir === 'asc' ? 'desc' : 'asc';
|
|
} else {
|
|
$this->sortBy = $column;
|
|
$this->sortDir = 'asc';
|
|
}
|
|
}
|
|
|
|
public function clearFilters(): void
|
|
{
|
|
$this->search = '';
|
|
$this->statusFilter = '';
|
|
$this->resetPage();
|
|
}
|
|
|
|
public function togglePublish(int $id): void
|
|
{
|
|
DB::transaction(function () use ($id) {
|
|
$post = Post::lockForUpdate()->find($id);
|
|
|
|
if (! $post) {
|
|
session()->flash('error', __('posts.post_not_found'));
|
|
|
|
return;
|
|
}
|
|
|
|
$oldStatus = $post->status->value;
|
|
$newStatus = $post->status === PostStatus::Published ? PostStatus::Draft : PostStatus::Published;
|
|
|
|
$post->update([
|
|
'status' => $newStatus,
|
|
'published_at' => $newStatus === PostStatus::Published ? now() : null,
|
|
]);
|
|
|
|
AdminLog::create([
|
|
'admin_id' => auth()->id(),
|
|
'action' => 'status_change',
|
|
'target_type' => 'post',
|
|
'target_id' => $post->id,
|
|
'old_values' => ['status' => $oldStatus],
|
|
'new_values' => ['status' => $newStatus->value],
|
|
'ip_address' => request()->ip(),
|
|
'created_at' => now(),
|
|
]);
|
|
|
|
session()->flash('success', __('posts.post_status_updated'));
|
|
});
|
|
}
|
|
|
|
public function delete(int $id): void
|
|
{
|
|
$this->postToDelete = Post::find($id);
|
|
|
|
if (! $this->postToDelete) {
|
|
session()->flash('error', __('posts.post_not_found'));
|
|
|
|
return;
|
|
}
|
|
|
|
$this->showDeleteModal = true;
|
|
}
|
|
|
|
public function confirmDelete(): void
|
|
{
|
|
if (! $this->postToDelete) {
|
|
return;
|
|
}
|
|
|
|
DB::transaction(function () {
|
|
$post = Post::lockForUpdate()->find($this->postToDelete->id);
|
|
|
|
if (! $post) {
|
|
session()->flash('error', __('posts.post_not_found'));
|
|
|
|
return;
|
|
}
|
|
|
|
AdminLog::create([
|
|
'admin_id' => auth()->id(),
|
|
'action' => 'delete',
|
|
'target_type' => 'post',
|
|
'target_id' => $post->id,
|
|
'old_values' => $post->toArray(),
|
|
'ip_address' => request()->ip(),
|
|
'created_at' => now(),
|
|
]);
|
|
|
|
$post->delete();
|
|
|
|
session()->flash('success', __('posts.post_deleted'));
|
|
});
|
|
|
|
$this->showDeleteModal = false;
|
|
$this->postToDelete = null;
|
|
}
|
|
|
|
public function cancelDelete(): void
|
|
{
|
|
$this->showDeleteModal = false;
|
|
$this->postToDelete = null;
|
|
}
|
|
|
|
public function with(): array
|
|
{
|
|
return [
|
|
'posts' => Post::query()
|
|
->when($this->search, fn ($q) => $q->where(function ($q) {
|
|
$q->whereRaw("JSON_EXTRACT(title, '$.\"ar\"') LIKE ?", ["%{$this->search}%"])
|
|
->orWhereRaw("JSON_EXTRACT(title, '$.\"en\"') LIKE ?", ["%{$this->search}%"])
|
|
->orWhereRaw("JSON_EXTRACT(body, '$.\"ar\"') LIKE ?", ["%{$this->search}%"])
|
|
->orWhereRaw("JSON_EXTRACT(body, '$.\"en\"') LIKE ?", ["%{$this->search}%"]);
|
|
}))
|
|
->when($this->statusFilter, fn ($q) => $q->where('status', $this->statusFilter))
|
|
->orderBy($this->sortBy, $this->sortDir)
|
|
->paginate($this->perPage),
|
|
'statuses' => PostStatus::cases(),
|
|
];
|
|
}
|
|
}; ?>
|
|
|
|
<div class="max-w-7xl mx-auto">
|
|
<div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-6">
|
|
<div>
|
|
<flux:heading size="xl">{{ __('posts.posts') }}</flux:heading>
|
|
<p class="text-sm text-zinc-500 mt-1">{{ __('posts.posts_description') }}</p>
|
|
</div>
|
|
<flux:button href="{{ route('admin.posts.create') }}" variant="primary" icon="plus" wire:navigate>
|
|
{{ __('posts.create_post') }}
|
|
</flux:button>
|
|
</div>
|
|
|
|
@if(session('success'))
|
|
<flux:callout variant="success" class="mb-6">
|
|
{{ session('success') }}
|
|
</flux:callout>
|
|
@endif
|
|
|
|
@if(session('error'))
|
|
<flux:callout variant="danger" class="mb-6">
|
|
{{ session('error') }}
|
|
</flux:callout>
|
|
@endif
|
|
|
|
<!-- Filters -->
|
|
<div class="bg-white rounded-lg p-4 border border-zinc-200 mb-6">
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
|
|
<flux:field>
|
|
<flux:input
|
|
wire:model.live.debounce.300ms="search"
|
|
placeholder="{{ __('posts.search_placeholder') }}"
|
|
icon="magnifying-glass"
|
|
/>
|
|
</flux:field>
|
|
|
|
<flux:field>
|
|
<flux:select wire:model.live="statusFilter">
|
|
<option value="">{{ __('admin.all_statuses') }}</option>
|
|
@foreach($statuses as $status)
|
|
<option value="{{ $status->value }}">{{ __('enums.post_status.' . $status->value) }}</option>
|
|
@endforeach
|
|
</flux:select>
|
|
</flux:field>
|
|
|
|
<flux:field>
|
|
<flux:select wire:model.live="perPage">
|
|
<option value="10">10 {{ __('admin.per_page') }}</option>
|
|
<option value="25">25 {{ __('admin.per_page') }}</option>
|
|
<option value="50">50 {{ __('admin.per_page') }}</option>
|
|
</flux:select>
|
|
</flux:field>
|
|
|
|
@if($search || $statusFilter)
|
|
<div class="flex items-end">
|
|
<flux:button wire:click="clearFilters" variant="outline">
|
|
{{ __('common.clear') }}
|
|
</flux:button>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Sort Headers -->
|
|
<div class="hidden lg:flex bg-zinc-100 rounded-t-lg px-4 py-2 text-sm font-medium text-zinc-600 gap-4 mb-0">
|
|
<button wire:click="sort('title')" class="flex items-center gap-1 flex-1 hover:text-zinc-900">
|
|
{{ __('posts.title') }}
|
|
@if($sortBy === 'title')
|
|
<flux:icon name="{{ $sortDir === 'asc' ? 'chevron-up' : 'chevron-down' }}" class="w-4 h-4" />
|
|
@endif
|
|
</button>
|
|
<span class="w-24">{{ __('admin.current_status') }}</span>
|
|
<button wire:click="sort('updated_at')" class="flex items-center gap-1 w-32 hover:text-zinc-900">
|
|
{{ __('posts.last_updated') }}
|
|
@if($sortBy === 'updated_at')
|
|
<flux:icon name="{{ $sortDir === 'asc' ? 'chevron-up' : 'chevron-down' }}" class="w-4 h-4" />
|
|
@endif
|
|
</button>
|
|
<button wire:click="sort('created_at')" class="flex items-center gap-1 w-32 hover:text-zinc-900">
|
|
{{ __('posts.created') }}
|
|
@if($sortBy === 'created_at')
|
|
<flux:icon name="{{ $sortDir === 'asc' ? 'chevron-up' : 'chevron-down' }}" class="w-4 h-4" />
|
|
@endif
|
|
</button>
|
|
<span class="w-48">{{ __('common.actions') }}</span>
|
|
</div>
|
|
|
|
<!-- Posts List -->
|
|
<div class="space-y-0">
|
|
@forelse($posts as $post)
|
|
<div wire:key="post-{{ $post->id }}" class="bg-white p-4 border border-zinc-200 {{ $loop->first ? 'rounded-t-lg lg:rounded-t-none' : '' }} {{ $loop->last ? 'rounded-b-lg' : '' }} {{ !$loop->first ? 'border-t-0' : '' }}">
|
|
<div class="flex flex-col lg:flex-row lg:items-center gap-4">
|
|
<!-- Title -->
|
|
<div class="flex-1">
|
|
<a href="{{ route('admin.posts.edit', $post) }}" class="font-semibold text-zinc-900 hover:text-blue-600" wire:navigate>
|
|
{{ $post->getTitle() }}
|
|
</a>
|
|
<div class="text-sm text-zinc-500 mt-1 line-clamp-2">
|
|
{{ $post->getExcerpt() }}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Status Badge -->
|
|
<div class="lg:w-24">
|
|
<flux:badge :color="$post->status === \App\Enums\PostStatus::Published ? 'green' : 'amber'" size="sm">
|
|
{{ __('enums.post_status.' . $post->status->value) }}
|
|
</flux:badge>
|
|
</div>
|
|
|
|
<!-- Last Updated -->
|
|
<div class="lg:w-32">
|
|
<div class="text-sm text-zinc-900">
|
|
{{ $post->updated_at->diffForHumans() }}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Created -->
|
|
<div class="lg:w-32">
|
|
<div class="text-sm text-zinc-500">
|
|
{{ $post->created_at->format('Y-m-d') }}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Actions -->
|
|
<div class="lg:w-48 flex flex-wrap gap-2">
|
|
<flux:button
|
|
href="{{ route('admin.posts.edit', $post) }}"
|
|
variant="outline"
|
|
size="sm"
|
|
wire:navigate
|
|
>
|
|
{{ __('common.edit') }}
|
|
</flux:button>
|
|
<flux:button
|
|
wire:click="togglePublish({{ $post->id }})"
|
|
variant="{{ $post->status === \App\Enums\PostStatus::Published ? 'ghost' : 'primary' }}"
|
|
size="sm"
|
|
>
|
|
{{ $post->status === \App\Enums\PostStatus::Published ? __('posts.unpublish') : __('posts.publish') }}
|
|
</flux:button>
|
|
<flux:button
|
|
wire:click="delete({{ $post->id }})"
|
|
variant="danger"
|
|
size="sm"
|
|
>
|
|
{{ __('common.delete') }}
|
|
</flux:button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@empty
|
|
<div class="text-center py-12 text-zinc-500 bg-white rounded-lg border border-zinc-200">
|
|
<flux:icon name="document-text" class="w-12 h-12 mx-auto mb-4" />
|
|
<p>{{ __('posts.no_posts') }}</p>
|
|
<div class="mt-4">
|
|
<flux:button href="{{ route('admin.posts.create') }}" variant="primary" icon="plus" wire:navigate>
|
|
{{ __('posts.create_post') }}
|
|
</flux:button>
|
|
</div>
|
|
</div>
|
|
@endforelse
|
|
</div>
|
|
|
|
<div class="mt-6">
|
|
{{ $posts->links() }}
|
|
</div>
|
|
|
|
{{-- Delete Confirmation Modal --}}
|
|
<flux:modal wire:model="showDeleteModal">
|
|
<div class="space-y-4">
|
|
<flux:heading size="lg">{{ __('posts.delete_post') }}</flux:heading>
|
|
|
|
<flux:callout variant="danger">
|
|
{{ __('posts.delete_post_warning') }}
|
|
</flux:callout>
|
|
|
|
@if($postToDelete)
|
|
<p class="text-zinc-700">
|
|
{{ __('posts.deleting_post', ['title' => $postToDelete->getTitle()]) }}
|
|
</p>
|
|
@endif
|
|
|
|
<div class="flex gap-3 justify-end pt-4">
|
|
<flux:button wire:click="cancelDelete">
|
|
{{ __('common.cancel') }}
|
|
</flux:button>
|
|
<flux:button variant="danger" wire:click="confirmDelete">
|
|
{{ __('posts.delete_permanently') }}
|
|
</flux:button>
|
|
</div>
|
|
</div>
|
|
</flux:modal>
|
|
</div>
|