3ce84b89b4
## 📋 Ringkasan Implementasi penuh fitur Daftar Pustaka dengan peningkatan UI/UX, dukungan gesture swipe di PDF viewer mobile, serta integrasi breadcrumb untuk navigasi yang lebih intuitif. ## 🔄 Perubahan Utama - app/Services/DaftarPustakaService.php • Refactor method getDaftarPustaka(), hapus handleUpload_() • Optimasi filtering & perbaiki format kode - resources/views/daftar-pustaka/create.blade.php • Aktifkan breadcrumb navigation dengan {{ Breadcrumbs::render() }} - resources/views/daftar-pustaka/index.blade.php • Konsolidasi class CSS, perbaikan flex & pagination styling - resources/views/daftar-pustaka/show.blade.php • Tambah gesture swipe (touchstart, touchend) untuk PDF viewer • Implementasi handleSwipe() & threshold swipe 50px - routes/breadcrumbs.php • Tambah route breadcrumbs daftar-pustaka (index, show, create)
297 lines
14 KiB
PHP
297 lines
14 KiB
PHP
@extends('layouts.main')
|
|
|
|
@section('breadcrumbs')
|
|
{{ Breadcrumbs::render(request()->route()->getName()) }}
|
|
@endsection
|
|
|
|
@section('content')
|
|
<style>
|
|
@media (max-width: 768px) {
|
|
#previewContent {
|
|
height: 400px;
|
|
overflow: auto;
|
|
}
|
|
}
|
|
|
|
</style>
|
|
|
|
<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">
|
|
<select id="category_id" name="category_id" class="select tomselect w-[300px]" multiple>
|
|
<option value="" selected disabled>Filter by Category</option>
|
|
@foreach ($categories as $item)
|
|
<option value="{{ $item->id }}">{{ $item->name }}</option>
|
|
@endforeach
|
|
</select>
|
|
<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="border shadow-none card">
|
|
<a class="show-pustaka h-[300px] 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="card-body">
|
|
<a href="{{ route('daftar-pustaka.show', $item->id) }}">
|
|
|
|
<h3 class="font-medium text-gray-900 cursor-pointer text-md hover:text-primary">
|
|
{{ $item->judul }}</h3>
|
|
<p class="text-gray-700 text-2sm">
|
|
{{-- batasi panjang deskripsi 50 --}}
|
|
{{ substr($item->deskripsi, 0, 50) }}
|
|
</p>
|
|
</a>
|
|
<div class="flex gap-2.5 justify-between items-center mt-2">
|
|
<p class="text-xs text-gray-700 rounded-full badge badge-xs badge-outline badge-success">
|
|
# {{ $item->category->name }}</p>
|
|
|
|
@auth
|
|
@if (auth()->user()->hasRole(['administrator', 'admin']))
|
|
<div>
|
|
<a class="btn btn-xs btn-danger" onclick="deleteData({{ $item->id }})">
|
|
<i class="ki-filled ki-trash">
|
|
</i>
|
|
Hapus
|
|
</a>
|
|
<a class="btn btn-xs 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="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 gap-2 cursor-pointer">
|
|
<div class="flex items-center mt-1">
|
|
<a class="text-sm font-medium 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">
|
|
<p class="text-xs text-gray-700 rounded-full badge badge-sm badge-outline badge-success">
|
|
# {{ $item->category->name }}</p>
|
|
@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 select = document.getElementById('category_id');
|
|
const selectedCategories = Array.from(select.selectedOptions).map(option => option.value);
|
|
|
|
const categoryParam = selectedCategories.join(',');
|
|
|
|
const url = "{{ route('daftar-pustaka.index') }}?search=" + encodeURIComponent(search) + "&category=" +
|
|
encodeURIComponent(categoryParam);
|
|
window.location.href = url;
|
|
}
|
|
|
|
|
|
function resetFilter() {
|
|
const url = "{{ route('daftar-pustaka.index') }}";
|
|
window.location.href = url;
|
|
}
|
|
</script>
|
|
@endpush
|