refactor: katalog dropdown with card-image
This commit is contained in:
zhadaarsita
parent
70fec84688
commit
88490ce78b
|
|
@ -9,7 +9,6 @@ class KatalogController extends Controller
|
|||
{
|
||||
public function index(Request $request, $tipe = null)
|
||||
{
|
||||
// Ambil semua input filter dari form
|
||||
$filters = [
|
||||
'search' => $request->query('search'),
|
||||
'kategori' => $request->query('kategori'),
|
||||
|
|
@ -17,9 +16,6 @@ public function index(Request $request, $tipe = null)
|
|||
'penulis' => $request->query('penulis'),
|
||||
];
|
||||
|
||||
if ($tipe) {
|
||||
$filters['tipe'] = $tipe;
|
||||
}
|
||||
|
||||
$semuaBuku = DummyDataService::getKatalogBuku($filters);
|
||||
|
||||
|
|
|
|||
|
|
@ -11,7 +11,8 @@
|
|||
|
||||
<div class="mb-3">
|
||||
<label for="nisn" class="form-label">Nomor Induk Siswa Nasional (NISN)</label>
|
||||
<input id="nisn" class="form-control bg-body-tertiary @error('nisn') is-invalid @enderror" type="text" name="nisn" value="{{ old('nisn') }}" required autofocus autocomplete="username" />
|
||||
<input id="nisn" class="form-control bg-body-tertiary @error('nisn') is-invalid @enderror"
|
||||
type="text" name="nisn" value="{{ old('nisn') }}" required autofocus autocomplete="username" />
|
||||
@error('nisn')
|
||||
<div class="invalid-feedback">{{ $message }}</div>
|
||||
@enderror
|
||||
|
|
@ -19,10 +20,16 @@
|
|||
|
||||
<div class="mb-3">
|
||||
<label for="password" class="form-label">Kata Sandi</label>
|
||||
<input id="password" class="form-control bg-body-tertiary @error('password') is-invalid @enderror" type="password" name="password" required autocomplete="current-password" />
|
||||
@error('password')
|
||||
<div class="invalid-feedback">{{ $message }}</div>
|
||||
@enderror
|
||||
<div class="input-group">
|
||||
<input id="password" class="form-control bg-body-tertiary @error('password') is-invalid @enderror"
|
||||
type="password" name="password" required autocomplete="current-password" />
|
||||
<span class="input-group-text bg-body-tertiary" id="togglePassword" style="cursor: pointer;">
|
||||
<i class="bi bi-eye-slash-fill"></i>
|
||||
</span>
|
||||
@error('password')
|
||||
<div class="invalid-feedback">{{ $message }}</div>
|
||||
@enderror
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="d-flex justify-content-end align-items-center mb-3">
|
||||
|
|
@ -32,7 +39,7 @@
|
|||
</a>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
|
||||
<div class="d-grid">
|
||||
<button type="submit" class="btn btn-primary btn-lg">
|
||||
Masuk
|
||||
|
|
@ -44,4 +51,25 @@
|
|||
<a href="{{ route('register') }}" class="fw-semibold text-decoration-none">Daftar sekarang</a>
|
||||
</p>
|
||||
</form>
|
||||
</x-guest-layout>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
|
||||
const togglePassword = document.querySelector('#togglePassword');
|
||||
const passwordInput = document.querySelector('#password');
|
||||
const icon = togglePassword.querySelector('i');
|
||||
|
||||
togglePassword.addEventListener('click', function() {
|
||||
const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
|
||||
passwordInput.setAttribute('type', type);
|
||||
|
||||
if (type === 'password') {
|
||||
icon.classList.remove('bi-eye-fill');
|
||||
icon.classList.add('bi-eye-slash-fill');
|
||||
} else {
|
||||
icon.classList.remove('bi-eye-slash-fill');
|
||||
icon.classList.add('bi-eye-fill');
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</x-guest-layout>
|
||||
|
|
|
|||
|
|
@ -7,32 +7,39 @@
|
|||
<!-- Filter & Pencarian -->
|
||||
<div class="card mb-4">
|
||||
<div class="card-body">
|
||||
<form action="{{ route('katalog.index') }}" method="GET">
|
||||
<form action="{{ route('katalog') }}" method="GET">
|
||||
<div class="row g-3 align-items-center">
|
||||
<div class="col-md-4">
|
||||
<input type="text" name="search" class="form-control" placeholder="Cari buku berdasarkan judul..." value="{{ $input['search'] ?? '' }}">
|
||||
<input type="text" name="search" class="form-control"
|
||||
placeholder="Cari buku berdasarkan judul..." value="{{ $input['search'] ?? '' }}">
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<select name="kategori" class="form-select">
|
||||
<option value="">Semua Kategori</option>
|
||||
@foreach($filterOptions['kategori'] as $kategori)
|
||||
<option value="{{ $kategori }}" {{ ($input['kategori'] ?? '') == $kategori ? 'selected' : '' }}>{{ $kategori }}</option>
|
||||
@foreach ($filterOptions['kategori'] as $kategori)
|
||||
<option value="{{ $kategori }}"
|
||||
{{ ($input['kategori'] ?? '') == $kategori ? 'selected' : '' }}>{{ $kategori }}
|
||||
</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<select name="tahun" class="form-select">
|
||||
<select name="tahun" class="form-select">
|
||||
<option value="">Semua Tahun</option>
|
||||
@foreach($filterOptions['tahun'] as $tahun)
|
||||
<option value="{{ $tahun }}" {{ ($input['tahun'] ?? '') == $tahun ? 'selected' : '' }}>{{ $tahun }}</option>
|
||||
@foreach ($filterOptions['tahun'] as $tahun)
|
||||
<option value="{{ $tahun }}"
|
||||
{{ ($input['tahun'] ?? '') == $tahun ? 'selected' : '' }}>{{ $tahun }}
|
||||
</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<select name="penulis" class="form-select">
|
||||
<select name="penulis" class="form-select">
|
||||
<option value="">Semua Penulis</option>
|
||||
@foreach($filterOptions['penulis'] as $penulis)
|
||||
<option value="{{ $penulis }}" {{ ($input['penulis'] ?? '') == $penulis ? 'selected' : '' }}>{{ $penulis }}</option>
|
||||
@foreach ($filterOptions['penulis'] as $penulis)
|
||||
<option value="{{ $penulis }}"
|
||||
{{ ($input['penulis'] ?? '') == $penulis ? 'selected' : '' }}>{{ $penulis }}
|
||||
</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
|
|
@ -45,35 +52,39 @@
|
|||
</div>
|
||||
|
||||
<!-- Daftar Buku -->
|
||||
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-4 g-4">
|
||||
<div class="row row-cols-2 row-cols-md-3 row-cols-lg-5 g-4">
|
||||
@forelse ($semuaBuku as $buku)
|
||||
<div class="col">
|
||||
<div class="card h-100 shadow-sm">
|
||||
<img src="{{ asset($buku['cover']) }}" class="card-img-top" alt="Cover {{ $buku['judul'] }}" style="height: 250px; object-fit: cover;">
|
||||
<div class="card-body">
|
||||
<div>
|
||||
<span class="badge bg-light text-dark border">{{ $buku['kategori'] }}</span>
|
||||
<span class="badge {{ $buku['status'] == 'Tersedia' ? 'bg-success-subtle text-success-emphasis' : 'bg-warning-subtle text-warning-emphasis' }} border">{{ $buku['status'] }}</span>
|
||||
<div class="card h-100 shadow-sm border-0">
|
||||
<img src="{{ asset($buku['cover']) }}" class="card-img-top rounded-2 object-fit-cover"
|
||||
style="height: 310px;" alt="Cover {{ $buku['judul'] }}">
|
||||
|
||||
<div class="card-body d-flex flex-column p-3">
|
||||
<div class="flex-grow-1">
|
||||
<div class="mb-2">
|
||||
<span class="badge fw-normal bg-light text-dark border me-1">{{ $buku['kategori'] }}</span>
|
||||
<span
|
||||
class="badge fw-normal {{ $buku['status'] == 'Tersedia' ? 'bg-success-subtle text-success-emphasis' : 'bg-warning-subtle text-warning-emphasis' }} border">{{ $buku['status'] }}</span>
|
||||
</div>
|
||||
<h5 class="card-title fw-bold ">{{ $buku['judul'] }}</h5>
|
||||
<p class="card-text small text-muted mb-2">{{ $buku['penulis'] }}</p>
|
||||
</div>
|
||||
<h5 class="card-title mt-2">{{ $buku['judul'] }}</h5>
|
||||
<p class="card-text small text-muted">{{ $buku['penulis'] }}</p>
|
||||
</div>
|
||||
<div class="card-footer bg-white border-0">
|
||||
<div class="d-grid">
|
||||
|
||||
|
||||
<div class="d-grid mt-auto">
|
||||
@if ($buku['status'] == 'Dipinjam')
|
||||
<!-- Jika buku sedang dipinjam, tombol nonaktif -->
|
||||
<button class="btn btn-secondary btn-sm" disabled><i class="bi bi-x-circle me-1"></i> Tidak Tersedia</button>
|
||||
<button class="btn btn-secondary btn-sm" disabled><i class="bi bi-x-circle me-1"></i>
|
||||
Tidak Tersedia</button>
|
||||
@else
|
||||
<!-- Jika buku tersedia, cek tipe aksesnya -->
|
||||
@if ($buku['tipe_akses'] == 'online')
|
||||
<button class="btn btn-primary btn-sm"><i class="bi bi-book me-1"></i> Baca Buku Online</button>
|
||||
<button class="btn btn-primary btn-sm"><i class="bi bi-book me-1"></i> Baca
|
||||
Online</button>
|
||||
@else
|
||||
<!-- Anggap default (offline atau null) adalah pinjam offline -->
|
||||
<button class="btn btn-outline-primary btn-sm"><i class="bi bi-arrow-down-up me-1"></i> Pinjam Offline</button>
|
||||
<button class="btn btn-outline-primary btn-sm"><i
|
||||
class="bi bi-arrow-down-up me-1"></i> Pinjam Offline</button>
|
||||
@endif
|
||||
@endif
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
<span class="nav-text ms-2">Dashboard</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
{{-- <li class="nav-item">
|
||||
<a class="nav-link collapsed" data-bs-toggle="collapse" href="#katalog-collapse" role="button" aria-expanded="false" aria-controls="katalog-collapse">
|
||||
<i class="bi bi-book me-2"></i>
|
||||
<span class="nav-text">Katalog Buku</span>
|
||||
|
|
@ -32,6 +32,12 @@
|
|||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li> --}}
|
||||
<li class="nav-item">
|
||||
<a href="{{ route('katalog') }}" class="nav-link {{ request()->routeIs('katalog') ? 'active' : '' }}">
|
||||
<i class="bi bi-book me-2"></i>
|
||||
<span class="nav-text ms-2">Katalog</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link">
|
||||
|
|
|
|||
|
|
@ -12,7 +12,8 @@
|
|||
|
||||
Route::get('/dashboard', [DashboardController::class, 'index'])
|
||||
->middleware(['auth'])->name('dashboard');
|
||||
Route::get('/katalog-buku/{tipe?}', [KatalogController::class, 'index'])->middleware('auth')->name('katalog.index');
|
||||
Route::get('/katalog', [KatalogController::class, 'index'])
|
||||
->middleware('auth')->name('katalog');
|
||||
|
||||
|
||||
// Route untuk user profile dari laravel breeze
|
||||
|
|
|
|||
Loading…
Reference in New Issue