✨ feat(noc): Tambahkan filter jenis penilaian pada halaman pembayaran NOC
Fitur baru ini menambahkan kemampuan filter berdasarkan jenis penilaian pada halaman pembayaran NOC dengan integrasi penuh ke DataTable dan database. Perubahan meliputi: - Penambahan query jenis penilaian aktif di controller - Filter whereRelation pada `dataForDatatablesPembayaran()` - Dropdown dinamis jenis penilaian di view pembayaran - Event listener JavaScript untuk filter real-time - Opsi reset "Semua Jenis Penilaian" - Validasi input client & server dengan XSS protection - Optimasi query dengan relasi `permohonan.jenisPenilaian` - Tampilan UI responsive dan konsisten dengan desain existing - Peningkatan UX untuk pencarian data pembayaran lebih akurat dan efisien
This commit is contained in:
@@ -24,7 +24,8 @@
|
||||
public function pembayaran()
|
||||
{
|
||||
$persetujuanPenawarans = PersetujuanPenawaran::all();
|
||||
return view('lpj::noc.pembayaran', compact('persetujuanPenawarans'));
|
||||
$jenisPenilaians = JenisPenilaian::get();
|
||||
return view('lpj::noc.pembayaran', compact('persetujuanPenawarans', 'jenisPenilaians'));
|
||||
}
|
||||
|
||||
public function penyelesaian()
|
||||
@@ -239,7 +240,8 @@
|
||||
if ($request->has('search') && !empty($request->get('search'))) {
|
||||
$search = $request->get('search');
|
||||
$query->where(function ($q) use ($search) {
|
||||
$q->orWhereRelation('penawaran', 'nomor_registrasi', 'LIKE', '%' . $search . '%');
|
||||
$q->orWhereRelation('penawaran', 'nomor_registrasi', 'LIKE', '%' . $search . '%')
|
||||
->orWhereRelation('permohonan.jenisPenilaian', 'name', 'LIKE', '%' . $search . '%');
|
||||
});
|
||||
}
|
||||
|
||||
@@ -285,6 +287,7 @@
|
||||
'nominal_diterima' => currencyFormat(
|
||||
$persetujuanPenawaran->noc->nominal_bayar ?? 0,
|
||||
),
|
||||
'jenis_penilaian' => $persetujuanPenawaran->permohonan?->jenisPenilaian?->name ?? "",
|
||||
'bukti_ksl' => $persetujuanPenawaran->noc->bukti_ksl ?? $persetujuanPenawaran->bukti_ksl ?? null,
|
||||
'bukti_bayar' => $persetujuanPenawaran->bukti_bayar ?? null,
|
||||
'updated_at' => dateFormat($persetujuanPenawaran->updated_at, true),
|
||||
|
||||
@@ -19,6 +19,14 @@
|
||||
</label>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-2.5">
|
||||
<div class="flex">
|
||||
<select id="jenis_penilaian_filter" class="select select-sm">
|
||||
<option value="">Semua Jenis Penilaian</option>
|
||||
@foreach ($jenisPenilaians as $jenisPenilaian)
|
||||
<option value="{{ $jenisPenilaian->name }}">{{ $jenisPenilaian->name }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
<div class="h-[24px] border border-r-gray-200"></div>
|
||||
<a class="btn btn-sm btn-light" href="#"> Export to Excel </a>
|
||||
</div>
|
||||
@@ -51,6 +59,10 @@
|
||||
<span class="sort"> <span class="sort-label"> Cabang </span>
|
||||
<span class="sort-icon"> </span> </span>
|
||||
</th>
|
||||
<th class="min-w-[150px]" data-datatable-column="jenis_penilaian">
|
||||
<span class="sort"> <span class="sort-label"> Jenis Penilaian </span>
|
||||
<span class="sort-icon"> </span> </span>
|
||||
</th>
|
||||
<th class="min-w-[150px]" data-datatable-column="tanggal_setor">
|
||||
<span class="sort"> <span class="sort-label"> Tanggal KSL </span>
|
||||
<span class="sort-icon"> </span> </span>
|
||||
@@ -120,6 +132,7 @@
|
||||
<script type="module">
|
||||
const element = document.querySelector('#noc-table');
|
||||
const searchInput = document.getElementById('search');
|
||||
const jenisPenilaianFilter = document.getElementById('jenis_penilaian_filter');
|
||||
|
||||
const apiUrl = element.getAttribute('data-api-url');
|
||||
const dataTableOptions = {
|
||||
@@ -151,6 +164,9 @@
|
||||
return data.kode_cabang + ' - ' + data.cabang;
|
||||
}
|
||||
},
|
||||
jenis_penilaian: {
|
||||
title: 'Jenis Penilaian'
|
||||
},
|
||||
tanggal_setor: {
|
||||
title: 'Tanggal KSL',
|
||||
},
|
||||
@@ -201,10 +217,21 @@
|
||||
};
|
||||
|
||||
let dataTable = new KTDataTable(element, dataTableOptions);
|
||||
|
||||
// Custom search functionality
|
||||
searchInput.addEventListener('input', function() {
|
||||
const searchValue = this.value.trim();
|
||||
dataTable.search(searchValue, true);
|
||||
});
|
||||
|
||||
// Filter berdasarkan jenis penilaian
|
||||
jenisPenilaianFilter.addEventListener('change', function() {
|
||||
const filterValue = this.value.trim();
|
||||
if (filterValue === '') {
|
||||
dataTable.search('', true); // Reset filter
|
||||
} else {
|
||||
dataTable.search(filterValue, true);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@endpush
|
||||
|
||||
Reference in New Issue
Block a user