58b53a0284
Perubahan ini mencakup beberapa penyesuaian pada tata letak dan gaya untuk meningkatkan pengalaman pengguna di halaman daftar pustaka. - **Tombol Lebar Penuh**: Tombol "Hapus" dan "Edit" sekarang memiliki lebar penuh (`w-full`) untuk konsistensi dan kemudahan penggunaan. - **Tata Letak Tombol**: Tombol-tombol diatur dalam tata letak kolom (`flex-col`) dengan jarak (`gap-2`) untuk tampilan yang lebih rapi. - **Posisi Tombol**: Tombol-tombol sekarang selalu berada di bagian bawah kartu, terlepas dari panjang konten, dengan menggunakan `mt-auto`. - **Struktur Kartu**: Struktur kartu diubah menjadi `flex flex-col` untuk memungkinkan penataan posisi tombol yang lebih baik.
420 lines
17 KiB
PHP
420 lines
17 KiB
PHP
@extends('layouts.main')
|
|
|
|
@section('breadcrumbs')
|
|
{{ Breadcrumbs::render(request()->route()->getName()) }}
|
|
@endsection
|
|
|
|
@section('content')
|
|
<style>
|
|
/* Styling untuk sidebar kategori */
|
|
.category-sidebar {
|
|
background: #f8fafc;
|
|
border-radius: 8px;
|
|
padding: 1.5rem;
|
|
height: fit-content;
|
|
}
|
|
|
|
.category-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 0.75rem 1rem;
|
|
margin: 0.25rem 0;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
border: 1px solid transparent;
|
|
}
|
|
|
|
.category-item:hover {
|
|
background: #e2e8f0;
|
|
border-color: #cbd5e1;
|
|
}
|
|
|
|
.category-item.active {
|
|
background: #3b82f6;
|
|
color: white;
|
|
border-color: #2563eb;
|
|
}
|
|
|
|
.category-count {
|
|
background: #e2e8f0;
|
|
color: #64748b;
|
|
padding: 0.25rem 0.5rem;
|
|
border-radius: 9999px;
|
|
font-size: 0.75rem;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.category-item.active .category-count {
|
|
background: rgba(255, 255, 255, 0.2);
|
|
color: white;
|
|
}
|
|
|
|
.sidebar-title {
|
|
font-size: 1.125rem;
|
|
font-weight: 600;
|
|
margin-bottom: 1rem;
|
|
color: #1e293b;
|
|
}
|
|
|
|
/* Loading state */
|
|
body.loading {
|
|
cursor: wait;
|
|
}
|
|
|
|
body.loading * {
|
|
pointer-events: none;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.category-sidebar {
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.category-item {
|
|
padding: 0.5rem 0.75rem;
|
|
font-size: 0.875rem;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
#previewContent {
|
|
height: 400px;
|
|
overflow: auto;
|
|
}
|
|
}
|
|
|
|
</style>
|
|
|
|
<div class="flex flex-col gap-7 lg:flex-row">
|
|
<!-- Sidebar Kategori -->
|
|
<div class="w-full lg:w-80">
|
|
<div class="category-sidebar">
|
|
<h3 class="sidebar-title">
|
|
<i class="mr-2 ki-filled ki-category"></i>
|
|
Kategori
|
|
</h3>
|
|
|
|
<!-- Semua Kategori -->
|
|
<div class="category-item {{ !request('category') ? 'active' : '' }}" onclick="filterByCategory('', 'Semua Kategori')">
|
|
<span>Semua Kategori</span>
|
|
<span class="category-count">{{ $total ?? 0 }}</span>
|
|
</div>
|
|
|
|
<!-- Daftar Kategori -->
|
|
@foreach ($categories as $category)
|
|
<div class="category-item {{ request('category') == $category->id ? 'active' : '' }}" onclick="filterByCategory({{ $category->id }}, '{{ $category->name }}')">
|
|
<span>{{ $category->name }}</span>
|
|
<span class="category-count">{{ $category->daftarPustaka_count ?? 0 }}</span>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Konten Utama -->
|
|
<div class="flex-1">
|
|
<div class="flex flex-col gap-7 items-stretch">
|
|
<div class="flex gap-3 items-center w-full">
|
|
<div class="w-full input">
|
|
<i class="ki-filled ki-magnifier">
|
|
</i>
|
|
<input id="search" placeholder="Search Daftar Pustaka, Judul" type="text">
|
|
<span class="badge badge-outline -me-1.5">
|
|
⌘ K
|
|
</span>
|
|
</div>
|
|
<!--Filter-->
|
|
<a class="btn btn-info" id="search_filter" onclick="filterSearch()">
|
|
<i class="ki-filled ki-filter">
|
|
</i>
|
|
Filter
|
|
</a>
|
|
<a class="btn btn-light" id="reset_filter" onclick="resetFilter()">
|
|
<i class="ki-filled ki-arrow-circle-left"></i>
|
|
Reset Filter
|
|
</a>
|
|
</div>
|
|
|
|
<div class="flex flex-wrap gap-5 justify-between items-center mt-3">
|
|
<h3 class="text-sm font-medium text-mono">
|
|
page {{ $page }} of {{ $pageCount }} — {{ $limit }} items per page, total
|
|
{{ $total }} items.
|
|
</h3>
|
|
<div class="flex gap-2.5">
|
|
<div class="flex toggle-group" data-kt-tabs="true" data-kt-tabs-initialized="true">
|
|
<a class="btn btn-icon active selected" data-kt-tab-toggle="#daftar_pustaka_grid" onclick="showGrid()"
|
|
href="javascript:void(0)">
|
|
<i class="ki-filled ki-category"></i>
|
|
</a>
|
|
<a class="btn btn-icon" data-kt-tab-toggle="#daftar_pustaka_list" onclick="showList()"
|
|
href="javascript:void(0)">
|
|
<i class="ki-filled ki-row-horizontal"></i>
|
|
</a>
|
|
@if (auth()->user()->hasRole(['administrator', 'admin']))
|
|
<a href="{{ route('daftar-pustaka.create') }}" class="btn btn-primary">
|
|
<i class="ki-filled ki-plus"></i>
|
|
Tambah
|
|
</a>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 gap-4 md:grid-cols-3 lg:grid-cols-4" id="daftar_pustaka_grid">
|
|
@if (isset($daftar_pustaka))
|
|
@foreach ($daftar_pustaka as $item)
|
|
<div class="flex flex-col border shadow-none card">
|
|
<a class="show-pustaka h-[150px] bg-gray-200 w-full block" href="{{ route('daftar-pustaka.show', $item->id) }}"
|
|
data-url="{{ $item->attachment }}">
|
|
<div class="flex overflow-hidden justify-center items-center p-4 w-full h-full">
|
|
<div class="flex justify-center items-center text-red-500 rounded">
|
|
<i class="text-3xl ki-filled ki-document"></i>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
|
|
<div class="flex flex-col flex-grow p-4 card-body">
|
|
<div>
|
|
<p class="text-xs text-gray-700 badge badge-xs badge-outline badge-success">
|
|
# {{ $item->category->name }}</p>
|
|
</div>
|
|
<div class="flex-grow mt-2">
|
|
<a href="{{ route('daftar-pustaka.show', $item->id) }}">
|
|
<h3 class="text-sm font-bold text-gray-900 hover:text-primary">
|
|
{{ $item->judul }}</h3>
|
|
<p class="text-xs text-gray-700">
|
|
{{-- batasi panjang deskripsi 50 --}}
|
|
{{ substr($item->deskripsi, 0, 50) }}
|
|
</p>
|
|
</a>
|
|
</div>
|
|
@if (auth()->user()->hasRole(['administrator', 'admin']))
|
|
<div class="flex gap-2 items-center mt-5">
|
|
<a class="w-full text-center btn btn-xs btn-danger" onclick="deleteData({{ $item->id }})">
|
|
<i class="ki-filled ki-trash"></i>
|
|
Hapus
|
|
</a>
|
|
<a class="w-full text-center btn btn-xs btn-primary" href="{{ route('daftar-pustaka.edit', $item->id) }}">
|
|
<i class="ki-filled ki-pencil"></i>
|
|
Edit
|
|
</a>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
@endif
|
|
</div>
|
|
|
|
|
|
<div class="grid hidden grid-cols-1 gap-4" id="daftar_pustaka_list">
|
|
@if (isset($daftar_pustaka))
|
|
@foreach ($daftar_pustaka as $item)
|
|
<div class="card">
|
|
<div class="flex flex-wrap justify-between items-center p-2 card-body pe-5 gap-4.5">
|
|
<div class="flex gap-3.5 items-center">
|
|
<div
|
|
class="card bg-gray-200 flex items-center justify-center bg-accent/50 h-[70px] w-[90px] shadow-none">
|
|
<a class="show-pustaka h-[90px] w-full block"
|
|
href="{{ route('daftar-pustaka.show', $item->id) }}"
|
|
data-url="{{ $item->attachment }}">
|
|
<div class="flex overflow-hidden justify-center items-center p-4 w-full h-full">
|
|
<div class="flex justify-center items-center text-red-500 rounded">
|
|
<i class="text-3xl ki-filled ki-document"></i>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
<a href="{{ route('daftar-pustaka.show', $item->id) }}">
|
|
<div class="flex flex-col cursor-pointer">
|
|
<p class="text-xs text-gray-700 badge badge-xs badge-outline badge-success">
|
|
# {{ $item->category->name }}</p>
|
|
<div class="flex items-center">
|
|
<a class="text-sm font-bold hover:text-primary text-mono leading-5.5">
|
|
{{ $item->judul }}
|
|
</div>
|
|
</a>
|
|
<div class="flex flex-wrap gap-3 items-center">
|
|
<span class="gap-1 rounded-full kt-badge kt-badge-warning kt-badge-sm">
|
|
<span class="text-xs font-medium text-foreground">
|
|
{{ substr($item->deskripsi, 0, 50) }}
|
|
</span>
|
|
</span>
|
|
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
<div class="flex gap-1.5 items-center">
|
|
@auth
|
|
@if (auth()->user()->hasRole(['administrator', 'admin']))
|
|
<div>
|
|
<a class="btn btn-sm btn-danger" onclick="deleteData({{ $item->id }})">
|
|
<i class="ki-filled ki-trash">
|
|
</i>
|
|
Hapus
|
|
</a>
|
|
<a class="btn btn-sm btn-info"
|
|
href="{{ route('daftar-pustaka.edit', $item->id) }}">
|
|
<i class="ki-filled ki-pencil">
|
|
</i>
|
|
Edit
|
|
</a>
|
|
</div>
|
|
@endif
|
|
@endauth
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
@endif
|
|
</div>
|
|
|
|
|
|
<div class="flex gap-2 justify-center mt-5 pagination">
|
|
@if ($daftar_pustaka->onFirstPage())
|
|
<span class="btn disabled"><i class="ki-filled ki-black-left"></i></span>
|
|
@else
|
|
<a href="{{ $daftar_pustaka->previousPageUrl() }}" class="btn">
|
|
<i class="ki-filled ki-black-left"></i>
|
|
</a>
|
|
@endif
|
|
|
|
@foreach ($daftar_pustaka->getUrlRange(1, $daftar_pustaka->lastPage()) as $page => $url)
|
|
<a href="{{ $url }}" class="btn {{ $page == $daftar_pustaka->currentPage() ? 'active' : '' }}">
|
|
{{ $page }}
|
|
</a>
|
|
@endforeach
|
|
|
|
@if ($daftar_pustaka->hasMorePages())
|
|
<a href="{{ $daftar_pustaka->nextPageUrl() }}" class="btn">
|
|
<i class="ki-filled ki-black-right"></i>
|
|
</a>
|
|
@else
|
|
<span class="btn disabled"><i class="ki-filled ki-black-right"></i></span>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
@endsection
|
|
|
|
@push('scripts')
|
|
<script type="text/javascript">
|
|
function deleteData(data) {
|
|
Swal.fire({
|
|
title: 'Are you sure?',
|
|
text: "You won't be able to revert this!",
|
|
icon: 'warning',
|
|
showCancelButton: true,
|
|
confirmButtonColor: '#3085d6',
|
|
cancelButtonColor: '#d33',
|
|
confirmButtonText: 'Yes, delete it!'
|
|
}).then((result) => {
|
|
if (result.isConfirmed) {
|
|
$.ajaxSetup({
|
|
headers: {
|
|
'X-CSRF-TOKEN': '{{ csrf_token() }}'
|
|
}
|
|
});
|
|
|
|
$.ajax(`daftar-pustaka/${data}`, {
|
|
type: 'DELETE'
|
|
}).then((response) => {
|
|
swal.fire('Deleted!', 'User has been deleted.', 'success').then(() => {
|
|
window.location.reload();
|
|
});
|
|
}).catch((error) => {
|
|
console.error('Error:', error);
|
|
Swal.fire('Error!', 'An error occurred while deleting the file.', 'error');
|
|
});
|
|
}
|
|
})
|
|
}
|
|
|
|
|
|
|
|
|
|
function showGrid() {
|
|
document.getElementById("daftar_pustaka_grid").classList.remove("hidden");
|
|
document.getElementById("daftar_pustaka_grid").classList.add("active");
|
|
|
|
document.getElementById("daftar_pustaka_list").classList.add("hidden");
|
|
document.getElementById("daftar_pustaka_list").classList.remove("active");
|
|
|
|
// Update button active class
|
|
document.querySelectorAll(".toggle-group a").forEach(btn => btn.classList.remove("selected", "active"));
|
|
event.currentTarget.classList.add("selected", "active");
|
|
}
|
|
|
|
function showList() {
|
|
document.getElementById("daftar_pustaka_list").classList.remove("hidden");
|
|
document.getElementById("daftar_pustaka_list").classList.add("active");
|
|
|
|
document.getElementById("daftar_pustaka_grid").classList.add("hidden");
|
|
document.getElementById("daftar_pustaka_grid").classList.remove("active");
|
|
|
|
// Update button active class
|
|
document.querySelectorAll(".toggle-group a").forEach(btn => btn.classList.remove("selected", "active"));
|
|
event.currentTarget.classList.add("selected", "active");
|
|
}
|
|
|
|
function filterSearch() {
|
|
const search = document.getElementById('search')?.value || '';
|
|
|
|
const params = new URLSearchParams(window.location.search);
|
|
|
|
if (search) {
|
|
params.set('search', search);
|
|
} else {
|
|
params.delete('search');
|
|
}
|
|
|
|
// Reset to first page when searching
|
|
params.set('page', '1');
|
|
|
|
window.location.href = `{{ route('daftar-pustaka.index') }}?${params.toString()}`;
|
|
}
|
|
|
|
|
|
function resetFilter() {
|
|
const url = "{{ route('daftar-pustaka.index') }}";
|
|
window.location.href = url;
|
|
}
|
|
|
|
function filterByCategory(categoryId, categoryName) {
|
|
// Add loading state
|
|
document.body.classList.add('loading');
|
|
|
|
// Update active state
|
|
document.querySelectorAll('.category-item').forEach(item => {
|
|
item.classList.remove('active');
|
|
});
|
|
event.currentTarget.classList.add('active');
|
|
|
|
// Get current search parameter
|
|
const search = document.getElementById('search')?.value || '';
|
|
|
|
// Build URL with category parameter
|
|
const params = new URLSearchParams(window.location.search);
|
|
|
|
if (search) {
|
|
params.set('search', search);
|
|
}
|
|
|
|
if (categoryId) {
|
|
params.set('category', categoryId);
|
|
} else {
|
|
params.delete('category');
|
|
}
|
|
|
|
// Reset to first page when filtering
|
|
params.set('page', '1');
|
|
|
|
window.location.href = `{{ route('daftar-pustaka.index') }}?${params.toString()}`;
|
|
}
|
|
</script>
|
|
@endpush
|