✨ feat(daftar-pustaka): implementasi fitur Daftar Pustaka dengan peningkatan UI/UX & breadcrumb navigation
## 📋 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)
This commit is contained in:
Daeng Deni Mardaeni
@@ -1,23 +1,23 @@
|
||||
@extends('layouts.main')
|
||||
|
||||
@section('breadcrumbs')
|
||||
{{-- {{ Breadcrumbs::render('basicdata.ijin_usaha') }} --}}
|
||||
{{ Breadcrumbs::render(request()->route()->getName()) }}
|
||||
@endsection
|
||||
|
||||
@section('content')
|
||||
<style>
|
||||
@media (max-width: 768px) {
|
||||
#previewContent {
|
||||
height: 400px;
|
||||
overflow: auto;
|
||||
#previewContent {
|
||||
height: 400px;
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<div class="flex flex-col items-stretch gap-7">
|
||||
<div class="flex items-center gap-3 w-full">
|
||||
<div class="input w-full">
|
||||
<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">
|
||||
@@ -37,8 +37,8 @@
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap items-center gap-5 justify-between mt-3">
|
||||
<h3 class="text-sm text-mono font-medium">
|
||||
<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>
|
||||
@@ -71,15 +71,15 @@
|
||||
|
||||
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-4 " id="daftar_pustaka_grid">
|
||||
<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="card border shadow-none ">
|
||||
<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="p-4 h-full w-full flex items-center justify-center overflow-hidden">
|
||||
<div class=" text-red-500 flex items-center justify-center rounded">
|
||||
<i class="ki-filled ki-document text-3xl"></i>
|
||||
<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>
|
||||
@@ -87,15 +87,15 @@
|
||||
<div class="card-body">
|
||||
<a href="{{ route('daftar-pustaka.show', $item->id) }}">
|
||||
|
||||
<h3 class="text-md font-medium text-gray-900 hover:text-primary cursor-pointer">
|
||||
<h3 class="font-medium text-gray-900 cursor-pointer text-md hover:text-primary">
|
||||
{{ $item->judul }}</h3>
|
||||
<p class="text-2sm text-gray-700">
|
||||
<p class="text-gray-700 text-2sm">
|
||||
{{-- batasi panjang deskripsi 50 --}}
|
||||
{{ substr($item->deskripsi, 0, 50) }}
|
||||
</p>
|
||||
</a>
|
||||
<div class="flex justify-between items-center gap-2.5 mt-2">
|
||||
<p class="badge rounded-full badge-xs badge-outline badge-success text-xs text-gray-700">
|
||||
<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
|
||||
@@ -124,20 +124,20 @@
|
||||
</div>
|
||||
|
||||
|
||||
<div class="grid grid-cols-1 gap-4 hidden" id="daftar_pustaka_list">
|
||||
<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="card-body flex items-center flex-wrap justify-between p-2 pe-5 gap-4.5">
|
||||
<div class="flex items-center gap-3.5">
|
||||
<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="p-4 h-full w-full flex items-center justify-center overflow-hidden">
|
||||
<div class=" text-red-500 flex items-center justify-center rounded">
|
||||
<i class="ki-filled ki-document text-3xl"></i>
|
||||
<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>
|
||||
@@ -145,12 +145,12 @@
|
||||
<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="hover:text-primary text-sm font-medium text-mono leading-5.5">
|
||||
<a class="text-sm font-medium hover:text-primary text-mono leading-5.5">
|
||||
{{ $item->judul }}
|
||||
</div>
|
||||
</a>
|
||||
<div class="flex items-center flex-wrap gap-3">
|
||||
<span class="kt-badge kt-badge-warning kt-badge-sm rounded-full gap-1">
|
||||
<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>
|
||||
@@ -160,8 +160,8 @@
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="flex items-center gap-1.5">
|
||||
<p class="badge rounded-full badge-sm badge-outline badge-success text-xs text-gray-700">
|
||||
<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']))
|
||||
@@ -188,7 +188,7 @@
|
||||
</div>
|
||||
|
||||
|
||||
<div class="pagination flex gap-2 justify-center mt-5">
|
||||
<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
|
||||
|
||||
Reference in New Issue
Block a user