novy/aplikasi-ketertiban
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(nyata): buang Alpine x-model dari form filter laporan — konflik x-model membuat select class/jenis tidak ikut terkirim (bukti log: class_id & violation_type_id null); ganti preset/reset ke JS vanilla

Browse Source
This commit is contained in:
Novy San87
2026-08-06 23:00:08 +07:00
parent fe6c34abce
commit c80f968abd
1 changed files with 21 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/reports/violations.blade.php
+21 -28
View File
@@ -4,7 +4,7 @@
@section('content') @section('content')
@php $selectedClass = $classes->firstWhere('id', $filters['class_id']); @endphp @php $selectedClass = $classes->firstWhere('id', $filters['class_id']); @endphp
<div x-data="reportPage()" class="space-y-6"> <div class="space-y-6">
{{-- ===== Hero ===== --}} {{-- ===== Hero ===== --}}
<div class="relative overflow-hidden rounded-2xl bg-gradient-to-br from-blue-700 via-blue-800 to-indigo-900 shadow-lg"> <div class="relative overflow-hidden rounded-2xl bg-gradient-to-br from-blue-700 via-blue-800 to-indigo-900 shadow-lg">
@@ -44,7 +44,7 @@
<label class="block text-xs font-semibold text-gray-500 uppercase tracking-wider mb-1.5">Dari Tanggal</label> <label class="block text-xs font-semibold text-gray-500 uppercase tracking-wider mb-1.5">Dari Tanggal</label>
<div class="relative"> <div class="relative">
<i class="fa-solid fa-calendar absolute left-3.5 top-1/2 -translate-y-1/2 text-gray-400 text-sm pointer-events-none"></i> <i class="fa-solid fa-calendar absolute left-3.5 top-1/2 -translate-y-1/2 text-gray-400 text-sm pointer-events-none"></i>
<input type="date" name="date_from" value="{{ $filters['date_from'] }}" x-model="dateFrom" <input type="date" id="f-date-from" name="date_from" value="{{ $filters['date_from'] }}"
class="w-full pl-9 pr-3 py-2.5 border border-slate-200 rounded-xl text-sm bg-gray-50/50 focus:bg-white focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition"> class="w-full pl-9 pr-3 py-2.5 border border-slate-200 rounded-xl text-sm bg-gray-50/50 focus:bg-white focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition">
</div> </div>
</div> </div>
@@ -52,7 +52,7 @@
<label class="block text-xs font-semibold text-gray-500 uppercase tracking-wider mb-1.5">Sampai Tanggal</label> <label class="block text-xs font-semibold text-gray-500 uppercase tracking-wider mb-1.5">Sampai Tanggal</label>
<div class="relative"> <div class="relative">
<i class="fa-solid fa-calendar absolute left-3.5 top-1/2 -translate-y-1/2 text-gray-400 text-sm pointer-events-none"></i> <i class="fa-solid fa-calendar absolute left-3.5 top-1/2 -translate-y-1/2 text-gray-400 text-sm pointer-events-none"></i>
<input type="date" name="date_to" value="{{ $filters['date_to'] }}" x-model="dateTo" <input type="date" id="f-date-to" name="date_to" value="{{ $filters['date_to'] }}"
class="w-full pl-9 pr-3 py-2.5 border border-slate-200 rounded-xl text-sm bg-gray-50/50 focus:bg-white focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition"> class="w-full pl-9 pr-3 py-2.5 border border-slate-200 rounded-xl text-sm bg-gray-50/50 focus:bg-white focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition">
</div> </div>
</div> </div>
@@ -60,7 +60,7 @@
<label class="block text-xs font-semibold text-gray-500 uppercase tracking-wider mb-1.5">Kelas</label> <label class="block text-xs font-semibold text-gray-500 uppercase tracking-wider mb-1.5">Kelas</label>
<div class="relative"> <div class="relative">
<i class="fa-solid fa-users absolute left-3.5 top-1/2 -translate-y-1/2 text-gray-400 text-sm pointer-events-none"></i> <i class="fa-solid fa-users absolute left-3.5 top-1/2 -translate-y-1/2 text-gray-400 text-sm pointer-events-none"></i>
<select name="class_id" x-model="classId" <select name="class_id"
class="w-full pl-9 pr-3 py-2.5 border border-slate-200 rounded-xl text-sm bg-gray-50/50 focus:bg-white focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition appearance-none"> class="w-full pl-9 pr-3 py-2.5 border border-slate-200 rounded-xl text-sm bg-gray-50/50 focus:bg-white focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition appearance-none">
<option value="">— Semua Kelas —</option> <option value="">— Semua Kelas —</option>
@foreach ($classes as $class) @foreach ($classes as $class)
@@ -74,7 +74,7 @@
<label class="block text-xs font-semibold text-gray-500 uppercase tracking-wider mb-1.5">Jenis Pelanggaran</label> <label class="block text-xs font-semibold text-gray-500 uppercase tracking-wider mb-1.5">Jenis Pelanggaran</label>
<div class="relative"> <div class="relative">
<i class="fa-solid fa-tag absolute left-3.5 top-1/2 -translate-y-1/2 text-gray-400 text-sm pointer-events-none"></i> <i class="fa-solid fa-tag absolute left-3.5 top-1/2 -translate-y-1/2 text-gray-400 text-sm pointer-events-none"></i>
<select name="violation_type_id" x-model="jenisId" <select name="violation_type_id"
class="w-full pl-9 pr-3 py-2.5 border border-slate-200 rounded-xl text-sm bg-gray-50/50 focus:bg-white focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition appearance-none"> class="w-full pl-9 pr-3 py-2.5 border border-slate-200 rounded-xl text-sm bg-gray-50/50 focus:bg-white focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition appearance-none">
<option value="">— Semua Jenis —</option> <option value="">— Semua Jenis —</option>
@foreach ($violationTypes as $type) @foreach ($violationTypes as $type)
@@ -101,8 +101,8 @@
class="inline-flex items-center gap-2 px-5 py-2.5 text-sm font-semibold text-white bg-emerald-500/90 hover:bg-emerald-500 rounded-xl transition shadow-sm"> class="inline-flex items-center gap-2 px-5 py-2.5 text-sm font-semibold text-white bg-emerald-500/90 hover:bg-emerald-500 rounded-xl transition shadow-sm">
<i class="fa-solid fa-file-excel"></i> Export Excel <i class="fa-solid fa-file-excel"></i> Export Excel
</button> </button>
<button type="button" @click="resetFilter()" <button type="button" onclick="resetFilterForm()"
class="inline-flex items-center gap-2 px-4 py-2.5 text-sm font-semibold text-gray-500 bg-gray-100 hover:bg-gray-200 rounded-xl transition"> class="inline-flex items-center gap-2 px-4 py-2.5 text-sm font-semibold text-gray-500 bg-gray-100 hover:bg-gray-200 rounded-xl transition cursor-pointer">
<i class="fa-solid fa-rotate-left text-xs"></i> Reset <i class="fa-solid fa-rotate-left text-xs"></i> Reset
</button> </button>
<span class="text-xs text-gray-300 mx-1 hidden sm:inline">|</span> <span class="text-xs text-gray-300 mx-1 hidden sm:inline">|</span>
@@ -114,8 +114,8 @@
'Semester Genap' => [now()->month >= 7 ? (now()->year + 1).'-01-01' : now()->year.'-01-01', now()->month >= 7 ? (now()->year + 1).'-06-30' : now()->year.'-06-30'], 'Semester Genap' => [now()->month >= 7 ? (now()->year + 1).'-01-01' : now()->year.'-01-01', now()->month >= 7 ? (now()->year + 1).'-06-30' : now()->year.'-06-30'],
'Tahun Ini' => [now()->year.'-01-01', now()->year.'-12-31'], 'Tahun Ini' => [now()->year.'-01-01', now()->year.'-12-31'],
] as $label => [$from, $to]) ] as $label => [$from, $to])
<button type="button" @click="applyPreset('{{ $from }}', '{{ $to }}')" <button type="button" onclick="setPreset('{{ $from }}', '{{ $to }}')"
class="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-semibold text-gray-600 bg-gray-100 hover:bg-blue-50 hover:text-blue-700 rounded-lg transition"> class="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-semibold text-gray-600 bg-gray-100 hover:bg-blue-50 hover:text-blue-700 rounded-lg transition cursor-pointer">
{{ $label }} {{ $label }}
</button> </button>
@endforeach @endforeach
@@ -321,25 +321,18 @@
</div> </div>
<script> <script>
function reportPage() { function setPreset(from, to) {
return { const f = document.getElementById('f-date-from');
dateFrom: {{ json_encode($filters['date_from'] ?? '') }}, const t = document.getElementById('f-date-to');
dateTo: {{ json_encode($filters['date_to'] ?? '') }}, if (f) f.value = from;
classId: {{ json_encode($filters['class_id'] ?? '') }}, if (t) t.value = to;
jenisId: {{ json_encode($filters['violation_type_id'] ?? '') }}, document.getElementById('filter-form').submit();
applyPreset(from, to) { }
this.dateFrom = from;
this.dateTo = to; function resetFilterForm() {
this.$nextTick(() => document.getElementById('filter-form').submit()); const form = document.getElementById('filter-form');
}, form.reset();
resetFilter() { form.submit();
this.dateFrom = '';
this.dateTo = '';
this.classId = '';
this.jenisId = '';
this.$nextTick(() => document.getElementById('filter-form').submit());
},
};
} }
</script> </script>
@endsection @endsection