137 lines
7.4 KiB
PHP
137 lines
7.4 KiB
PHP
@extends('layouts.admin-layout')
|
|
|
|
@section('title', 'Admin - Manajemen Artikel')
|
|
|
|
@section('content')
|
|
<main class="w-full flex flex-col space-y-6 px-4 sm:px-6 md:px-0">
|
|
<nav class="text-sm text-gray-600 font-medium" aria-label="Breadcrumb">
|
|
<ol class="inline-flex items-center space-x-1 md:space-x-3">
|
|
<li class="inline-flex items-center">
|
|
Manajemen Artikel
|
|
</li>
|
|
</ol>
|
|
</nav>
|
|
<div class="bg-white p-6 rounded-lg shadow-md w-full ring-2 ring-gray-700">
|
|
<h2 class="text-lg sm:text-xl font-bold mb-2 text-orangeCrayola">Data Artikel</h2>
|
|
|
|
@if (session('status'))
|
|
<div
|
|
class="p-4 mb-4 text-sm rounded-lg {{ session('status') == 'success' ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800' }}">
|
|
{{ session('message') }}
|
|
</div>
|
|
@endif
|
|
|
|
<div class="overflow-x-auto">
|
|
<table class="w-full text-center border-collapse">
|
|
<thead class="text-gray-600 uppercase text-sm tracking-wide">
|
|
<tr class="border-b-2 border-gray-700">
|
|
<th class="px-4 py-3">No</th>
|
|
<th class="px-4 py-3">Judul Artikel</th>
|
|
<th class="px-4 py-3">Deskripsi</th>
|
|
<th class="px-4 py-3">Catatan</th>
|
|
<th class="px-4 py-3">Status</th>
|
|
<th class="px-4 py-3">Gambar</th>
|
|
<th class="px-4 py-3">Aksi</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="text-gray-700 text-sm">
|
|
@foreach ($articles as $article)
|
|
<tr class="hover:bg-gray-50 border-b border-gray-200">
|
|
<td class="px-4 py-3">{{ $loop->iteration }}</td>
|
|
<td class="px-4 py-3">{{ $article->title }}</td>
|
|
<td class="px-4 py-3">{{ Str::limit($article->description, 100) }}</td>
|
|
<td class="px-4 py-3">{{ $article->catatan ? Str::limit($article->catatan, 100) : '-' }}
|
|
</td>
|
|
<td class="px-4 py-3">
|
|
<span
|
|
class="px-3 py-1 rounded text-xs font-semibold
|
|
{{ $article->status == 'Tertunda' ? 'bg-yellow-100 text-yellow-700' : ($article->status == 'Disetujui' ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700') }}">
|
|
{{ $article->status }}
|
|
</span>
|
|
</td>
|
|
<td class="px-4 py-3">
|
|
@if ($article->image)
|
|
<img src="{{ asset('storage/' . $article->image) }}" alt="Image"
|
|
class="w-24 h-24 object-cover rounded mx-auto">
|
|
@else
|
|
No Image
|
|
@endif
|
|
</td>
|
|
<td class="px-4 py-3">
|
|
<div class="flex items-center justify-center gap-3">
|
|
<a href="{{ route('admin.article-management.edit', $article->id) }}"
|
|
class="px-2 py-2 sm:py-3 rounded font-semibold bg-gray-300 text-gray-700 flex justify-center items-center gap-2 cursor-pointer">
|
|
<i class="fa-solid fa-pen-clip"></i>
|
|
<span class="hidden sm:inline">Review</span>
|
|
</a>
|
|
<button type="button"
|
|
class="swal-delete-artikel px-2 py-2 sm:px-3 rounded bg-red-100 text-red-700 flex justify-center items-center w-10 sm:w-12 h-10 sm:h-12 cursor-pointer"
|
|
data-id="{{ $article->id }}"
|
|
data-url="{{ route('admin.article-management.delete', $article->id) }}">
|
|
<i class="fa-solid fa-trash text-lg"></i>
|
|
</button>
|
|
</div>
|
|
</td>
|
|
|
|
</tr>
|
|
@endforeach
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="mt-4">
|
|
{{ $articles->links('pagination::tailwind') }}
|
|
</div>
|
|
</div>
|
|
</main>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
function handleDelete(buttonClass, entityName) {
|
|
document.querySelectorAll(buttonClass).forEach(button => {
|
|
button.addEventListener('click', function() {
|
|
let itemId = this.dataset.id;
|
|
let deleteUrl = this.dataset.url;
|
|
Swal.fire({
|
|
title: 'Apakah Anda yakin?',
|
|
text: `Data ${entityName} ini akan dihapus secara permanen!`,
|
|
icon: 'warning',
|
|
showCancelButton: true,
|
|
confirmButtonColor: '#d33',
|
|
cancelButtonColor: '#3085d6',
|
|
confirmButtonText: 'Ya, hapus!',
|
|
cancelButtonText: 'Batal'
|
|
}).then((result) => {
|
|
if (result.isConfirmed) {
|
|
fetch(deleteUrl, {
|
|
method: 'DELETE',
|
|
headers: {
|
|
'X-CSRF-TOKEN': document.querySelector(
|
|
'meta[name="csrf-token"]').content,
|
|
'Content-Type': 'application/json'
|
|
}
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
Swal.fire('Terhapus!', data.message,
|
|
'success')
|
|
.then(() => location.reload());
|
|
} else {
|
|
Swal.fire('Gagal!', data.message, 'error');
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Error:', error);
|
|
Swal.fire('Gagal!', 'Terjadi kesalahan server.',
|
|
'error');
|
|
});
|
|
}
|
|
});
|
|
});
|
|
});
|
|
}
|
|
handleDelete('.swal-delete-artikel', 'Artikel');
|
|
});
|
|
</script>
|
|
@endsection
|