304 lines
13 KiB
PHP
304 lines
13 KiB
PHP
@extends('admin.layouts.app')
|
|
|
|
@section('title', 'Daftar Berita')
|
|
|
|
@push('styles')
|
|
<link href="https://cdn.datatables.net/1.13.7/css/dataTables.bootstrap5.min.css" rel="stylesheet">
|
|
<link href="https://cdn.datatables.net/responsive/2.5.0/css/responsive.bootstrap5.min.css" rel="stylesheet">
|
|
<link href="https://cdn.datatables.net/buttons/2.4.2/css/buttons.bootstrap5.min.css" rel="stylesheet">
|
|
|
|
<style>
|
|
.soft-card {
|
|
border: 0;
|
|
border-radius: 16px;
|
|
box-shadow: 0 10px 30px rgba(16, 24, 40, .06);
|
|
}
|
|
|
|
.table-hlines {
|
|
--line: #e9edf4;
|
|
}
|
|
|
|
.table-hlines> :not(caption)>*>* {
|
|
border-top: 0;
|
|
border-right: 0 !important;
|
|
border-left: 0 !important;
|
|
border-bottom: 1px solid var(--line);
|
|
background: transparent;
|
|
}
|
|
|
|
.table-hlines thead th {
|
|
border-bottom: 2px solid var(--line) !important;
|
|
}
|
|
|
|
.table-hlines.table-hover tbody tr:hover {
|
|
background: transparent !important;
|
|
}
|
|
|
|
table.dataTable.hover>tbody>tr:hover>*,
|
|
table.dataTable.display>tbody>tr:hover>* {
|
|
background: transparent !important;
|
|
}
|
|
|
|
.table-sticky thead th {
|
|
position: sticky;
|
|
top: 0;
|
|
background: #fff;
|
|
z-index: 1
|
|
}
|
|
|
|
div.dataTables_filter,
|
|
div.dataTables_length {
|
|
display: none
|
|
}
|
|
|
|
.badge-status-published {
|
|
background: #a6e7d8;
|
|
color: #008767;
|
|
border: 1px solid rgba(0, 0, 0, .05)
|
|
}
|
|
|
|
.badge-status-draft {
|
|
background: #ffd5b6;
|
|
color: #a24c00;
|
|
border: 1px solid rgba(0, 0, 0, .05)
|
|
}
|
|
|
|
.badge-status-archived {
|
|
background: #ffc5c5;
|
|
color: #df0404;
|
|
border: 1px solid rgba(0, 0, 0, .05)
|
|
}
|
|
|
|
.export-dropdown .dropdown-menu {
|
|
min-width: 160px
|
|
}
|
|
|
|
.export-dropdown .dropdown-item i {
|
|
width: 18px
|
|
}
|
|
|
|
.action-buttons .btn {
|
|
padding: 0.25rem 0.5rem;
|
|
font-size: 0.875rem;
|
|
}
|
|
</style>
|
|
@endpush
|
|
|
|
@section('content')
|
|
<div class="card soft-card">
|
|
<div class="card-body">
|
|
<div class="d-flex justify-content-between align-items-center mb-3">
|
|
<div>
|
|
<h4 class="mb-0">Daftar Berita</h4>
|
|
<small class="text-success">Kelola berita desa</small>
|
|
</div>
|
|
<a href="{{ route('admin.berita.create') }}" class="btn btn-primary">
|
|
<i class="ti ti-plus"></i> Tambah Berita
|
|
</a>
|
|
</div>
|
|
|
|
<div class="d-flex flex-wrap align-items-center gap-2 mb-3">
|
|
<div class="input-group input-group-sm" style="max-width:280px;">
|
|
<span class="input-group-text bg-white"><i class="ti ti-search"></i></span>
|
|
<input id="tableSearch" type="text" class="form-control" placeholder="Cari berita...">
|
|
</div>
|
|
<button type="button" class="btn btn-sm btn-light border d-inline-flex align-items-center gap-1">
|
|
<i class="ti ti-adjustments-horizontal"></i> Filter
|
|
</button>
|
|
<div class="export-dropdown dropdown ms-auto">
|
|
<button class="btn btn-sm btn-success dropdown-toggle" data-bs-toggle="dropdown">
|
|
<i class="ti ti-download"></i> Export
|
|
</button>
|
|
<ul class="dropdown-menu dropdown-menu-end">
|
|
<li><a class="dropdown-item" href="#" data-export="csv"><i class="ti ti-file-spreadsheet"></i>
|
|
CSV</a></li>
|
|
<li><a class="dropdown-item" href="#" data-export="excel"><i class="ti ti-file-type-xls"></i>
|
|
Excel</a></li>
|
|
<li><a class="dropdown-item" href="#" data-export="pdf"><i class="ti ti-file-type-pdf"></i>
|
|
PDF</a></li>
|
|
<li><a class="dropdown-item" href="#" data-export="print"><i class="ti ti-printer"></i>
|
|
Print</a></li>
|
|
</ul>
|
|
</div>
|
|
<div id="dtButtons" class="d-none"></div>
|
|
</div>
|
|
|
|
<table id="beritaTable" class="table align-middle w-100 table-sticky table-hlines table-hover">
|
|
<thead>
|
|
<tr>
|
|
<th>Judul</th>
|
|
<th>Kategori</th>
|
|
<th>Tanggal Dibuat</th>
|
|
<th>Status</th>
|
|
<th>Views</th>
|
|
<th>Aksi</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@forelse ($news ?? [] as $berita)
|
|
@php
|
|
$status = $berita->status ?? 'draft';
|
|
$badgeClass = [
|
|
'published' => 'badge-status-published',
|
|
'draft' => 'badge-status-draft',
|
|
'archived' => 'badge-status-archived',
|
|
][$status] ?? 'badge-status-draft';
|
|
$statusText = ucfirst($status);
|
|
@endphp
|
|
<tr>
|
|
<td>
|
|
<div>
|
|
<div class="fw-semibold">{{ $berita->title ?? 'Judul Berita' }}</div>
|
|
<small class="text-muted">{{ Str::limit(strip_tags($berita->content ?? 'Konten berita...'), 80) }}</small>
|
|
</div>
|
|
</td>
|
|
<td>{{ $berita->category ?? 'Umum' }}</td>
|
|
<td data-order="{{ $berita->created_at ?? now() }}">
|
|
{{ \Carbon\Carbon::parse($berita->created_at ?? now())->format('d M Y') }}
|
|
</td>
|
|
<td><span class="badge rounded-pill {{ $badgeClass }}">{{ $statusText }}</span></td>
|
|
<td>{{ $berita->views ?? 0 }}</td>
|
|
<td>
|
|
<div class="action-buttons d-flex gap-1">
|
|
<a href="{{ route('news.show', $berita->slug ?? 'sample-slug') }}"
|
|
class="btn btn-sm btn-outline-primary"
|
|
title="Lihat">
|
|
<i class="ti ti-eye"></i>
|
|
</a>
|
|
<a href="{{ route('admin.berita.edit', $berita->id ?? 1) }}"
|
|
class="btn btn-sm btn-outline-warning"
|
|
title="Edit">
|
|
<i class="ti ti-edit"></i>
|
|
</a>
|
|
<button type="button"
|
|
class="btn btn-sm btn-outline-danger"
|
|
title="Hapus"
|
|
onclick="deleteNews({{ $berita->id ?? 1 }})">
|
|
<i class="ti ti-trash"></i>
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
@empty
|
|
<tr>
|
|
<td colspan="6" class="text-center py-4">
|
|
<div class="text-muted">
|
|
<i class="ti ti-news-off" style="font-size: 2rem;"></i>
|
|
<p class="mt-2 mb-0">Belum ada berita</p>
|
|
<small>Mulai dengan menambahkan berita pertama</small>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
@endforelse
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
@endsection
|
|
|
|
@push('scripts')
|
|
<script src="https://cdn.datatables.net/1.13.7/js/jquery.dataTables.min.js"></script>
|
|
<script src="https://cdn.datatables.net/1.13.7/js/dataTables.bootstrap5.min.js"></script>
|
|
<script src="https://cdn.datatables.net/responsive/2.5.0/js/dataTables.responsive.min.js"></script>
|
|
<script src="https://cdn.datatables.net/responsive/2.5.0/js/responsive.bootstrap5.min.js"></script>
|
|
<script src="https://cdn.datatables.net/buttons/2.4.2/js/dataTables.buttons.min.js"></script>
|
|
<script src="https://cdn.datatables.net/buttons/2.4.2/js/buttons.bootstrap5.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/pdfmake.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/vfs_fonts.js"></script>
|
|
<script src="https://cdn.datatables.net/buttons/2.4.2/js/buttons.html5.min.js"></script>
|
|
<script src="https://cdn.datatables.net/buttons/2.4.2/js/buttons.print.min.js"></script>
|
|
|
|
<script>
|
|
$(function() {
|
|
// DataTable init with Buttons
|
|
var hasData = $('#beritaTable tbody tr').length > 0 && !$('#beritaTable tbody tr td[colspan]').length;
|
|
if (typeof $.fn.DataTable !== 'undefined' && hasData) {
|
|
var table = $('#beritaTable').DataTable({
|
|
autoWidth: false,
|
|
responsive: {
|
|
details: false
|
|
},
|
|
paging: true,
|
|
pageLength: 10,
|
|
lengthChange: false,
|
|
info: true,
|
|
ordering: true,
|
|
searching: true,
|
|
order: [
|
|
[2, 'desc']
|
|
],
|
|
language: {
|
|
search: "Cari:",
|
|
searchPlaceholder: "Ketik untuk mencari...",
|
|
lengthMenu: "Tampilkan _MENU_",
|
|
info: "Menampilkan _START_ sampai _END_ dari _TOTAL_ data",
|
|
infoEmpty: "Menampilkan 0 sampai 0 dari 0 data",
|
|
infoFiltered: "(difilter dari _MAX_ total data)",
|
|
paginate: {
|
|
first: "Pertama",
|
|
last: "Terakhir",
|
|
next: "Selanjutnya",
|
|
previous: "Sebelumnya"
|
|
},
|
|
emptyTable: "Tidak ada data yang tersedia",
|
|
zeroRecords: "Tidak ada data yang cocok"
|
|
},
|
|
columnDefs: [{
|
|
targets: [2, 4, 5],
|
|
className: 'text-nowrap'
|
|
},
|
|
{
|
|
targets: 5,
|
|
orderable: false
|
|
}
|
|
],
|
|
dom: "rt<'row align-items-center mt-3'<'col-sm-6'i><'col-sm-6 d-flex justify-content-end'p>>",
|
|
buttons: [{
|
|
extend: 'csvHtml5',
|
|
title: 'daftar-berita'
|
|
},
|
|
{
|
|
extend: 'excelHtml5',
|
|
title: 'daftar-berita'
|
|
},
|
|
{
|
|
extend: 'pdfHtml5',
|
|
title: 'daftar-berita',
|
|
orientation: 'landscape',
|
|
pageSize: 'A4'
|
|
},
|
|
{
|
|
extend: 'print',
|
|
title: 'Daftar Berita Desa'
|
|
}
|
|
]
|
|
});
|
|
|
|
table.buttons().container().appendTo('#dtButtons');
|
|
|
|
$('#tableSearch').on('keyup', function() {
|
|
table.search(this.value).draw();
|
|
});
|
|
|
|
$('[data-export]').on('click', function(e) {
|
|
e.preventDefault();
|
|
const type = $(this).data('export');
|
|
if (type === 'csv') table.button(0).trigger();
|
|
if (type === 'excel') table.button(1).trigger();
|
|
if (type === 'pdf') table.button(2).trigger();
|
|
if (type === 'print') table.button(3).trigger();
|
|
});
|
|
}
|
|
});
|
|
|
|
function deleteNews(id) {
|
|
if (confirm('Apakah Anda yakin ingin menghapus berita ini?')) {
|
|
// Implement delete functionality
|
|
console.log('Deleting news with ID:', id);
|
|
// You can add AJAX call here
|
|
}
|
|
}
|
|
</script>
|
|
@endpush
|