114 lines
5.0 KiB
PHP
114 lines
5.0 KiB
PHP
<div class="mx-auto">
|
|
<div class="flex justify-between items-center mb-8">
|
|
<div>
|
|
<flux:heading size="xl">Manajemen Berita</flux:heading>
|
|
<flux:subheading>Tulis edukasi kesehatan atau informasi terbaru untuk pasien.</flux:subheading>
|
|
</div>
|
|
{{-- Menggunakan route create yang akan kita buat dibawah --}}
|
|
<flux:button :href="route('admin.news.create')" variant="primary" icon="plus" wire:navigate>
|
|
Tambah Berita
|
|
</flux:button>
|
|
</div>
|
|
|
|
{{-- Filter & Pencarian --}}
|
|
<div class="flex gap-4 mb-4">
|
|
<div class="flex-1">
|
|
<flux:input wire:model.live.debounce.300ms="search" placeholder="Cari judul berita..." icon="magnifying-glass" />
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Tabel Berita --}}
|
|
<flux:table>
|
|
<flux:table.columns>
|
|
<flux:table.column>Berita</flux:table.column>
|
|
<flux:table.column>Kategori</flux:table.column>
|
|
<flux:table.column>Status</flux:table.column>
|
|
<flux:table.column>Dilihat</flux:table.column>
|
|
<flux:table.column>Tanggal</flux:table.column>
|
|
<flux:table.column align="end">Aksi</flux:table.column>
|
|
</flux:table.columns>
|
|
|
|
<flux:table.rows>
|
|
@forelse ($news as $item)
|
|
<flux:table.row :key="$item->id">
|
|
<flux:table.cell>
|
|
<div class="flex items-center gap-3">
|
|
@if($item->image)
|
|
<img src="{{ asset('storage/' . $item->image) }}" class="shadow-sm rounded-lg size-10 object-cover">
|
|
@else
|
|
<div class="flex justify-center items-center bg-zinc-100 dark:bg-zinc-800 rounded-lg size-10 text-zinc-400">
|
|
<flux:icon.newspaper variant="mini" />
|
|
</div>
|
|
@endif
|
|
<div class="flex flex-col">
|
|
<span class="font-medium text-zinc-800 dark:text-white line-clamp-1">
|
|
{{ $item->title }}
|
|
</span>
|
|
<span class="text-zinc-500 text-xs italic">{{ $item->slug }}</span>
|
|
</div>
|
|
</div>
|
|
</flux:table.cell>
|
|
|
|
<flux:table.cell>
|
|
<flux:badge size="sm" variant="flat">{{ $item->category->name ?? 'Uncategorized' }}</flux:badge>
|
|
</flux:table.cell>
|
|
|
|
<flux:table.cell>
|
|
<button wire:click="togglePublish({{ $item->id }})" class="focus:outline-none">
|
|
<flux:badge size="sm" :color="$item->is_published ? 'emerald' : 'amber'" variant="flat" class="hover:opacity-80 cursor-pointer">
|
|
{{ $item->is_published ? 'Published' : 'Draft' }}
|
|
</flux:badge>
|
|
</button>
|
|
</flux:table.cell>
|
|
|
|
<flux:table.cell class="text-zinc-500 italic">{{ $item->view_count }}x</flux:cell>
|
|
|
|
<flux:table.cell class="text-zinc-500">{{ $item->created_at->translatedFormat('d F Y') }}</flux:table.cell>
|
|
|
|
<flux:table.cell align="end">
|
|
<div class="flex justify-end gap-2">
|
|
<flux:button :href="route('admin.news.edit', $item->id)" variant="ghost" icon="pencil-square" size="sm" tooltip="Edit Berita" wire:navigate />
|
|
|
|
<flux:button type="button"
|
|
x-on:click="confirmDelete({{ $item->id }}, '{{ addslashes($item->title) }}')"
|
|
variant="ghost" icon="trash" size="sm" class="text-red-500" />
|
|
</div>
|
|
</flux:table.cell>
|
|
</flux:table.row>
|
|
@empty
|
|
<flux:table.row>
|
|
<flux:table.cell colspan="6" class="py-10 text-zinc-400 text-center">
|
|
Data berita tidak ditemukan.
|
|
</flux:table.cell>
|
|
</flux:table.row>
|
|
@endforelse
|
|
</flux:table.rows>
|
|
</flux:table>
|
|
|
|
<div class="mt-4">
|
|
<flux:pagination :paginator="$news" />
|
|
</div>
|
|
</div>
|
|
|
|
@script
|
|
<script>
|
|
window.confirmDelete = function(id, name) {
|
|
Swal.fire({
|
|
title: 'Hapus Berita?',
|
|
text: `Anda akan menghapus berita "${name}". Tindakan ini tidak dapat dibatalkan!`,
|
|
icon: 'warning',
|
|
showCancelButton: true,
|
|
confirmButtonColor: '#ef4444',
|
|
cancelButtonColor: '#71717a',
|
|
confirmButtonText: 'Ya, Hapus!',
|
|
cancelButtonText: 'Batal',
|
|
reverseButtons: true
|
|
}).then((result) => {
|
|
if (result.isConfirmed) {
|
|
$wire.delete(id);
|
|
}
|
|
});
|
|
}
|
|
</script>
|
|
@endscript
|