daengdeni/lpj
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

✨ feat(noc): implementasi logika conditional checkbox status pembayaran

Browse Source 
- Menambahkan fungsi `updateCheckboxStatus()` untuk evaluasi kondisi real-time.
- Checkbox otomatis disabled jika total_harus_bayar = nominal_bayar = total_pembukuan.
- Checkbox **status_kurang_bayar** aktif jika nominal/pembukuan < total_harus_bayar.
- Checkbox **status_lebih_bayar** aktif jika nominal/pembukuan > total_harus_bayar.
- Menambahkan event listeners pada field nominal_bayar dan total_pembukuan.
- Memastikan initial state dicek saat halaman dimuat.
- Menambahkan logging untuk debugging dan monitoring.
- Meningkatkan UX dengan mencegah input data tidak logis.
This commit is contained in:
Daeng Deni Mardaeni
2025-09-12 08:55:44 +07:00
parent eb784a982f
commit ba29f5ee8e
4 changed files with 277 additions and 183 deletions
Download Patch File Download Diff File Expand all files Collapse all files

85
resources/views/noc/form.blade.php
View File

@@ -394,6 +394,79 @@
const nominalLebihBayarSection = document.getElementById('nominal_lebih_bayar_section');
const buktiPengembalianSection = document.getElementById('bukti_pengembalian_section');
// Field untuk perbandingan nilai
const totalHarusBayar = document.getElementById('total_harus_bayar');
const nominalBayar = document.getElementById('nominal_bayar');
const totalPembukuan = document.getElementById('total_pembukuan');
/**
* Fungsi untuk mengatur enable/disable status checkbox berdasarkan perbandingan nilai
* Logika:
* - Jika semua nilai sama: kedua checkbox disabled
* - Jika nominal_bayar/total_pembukuan < total_harus_bayar: hanya status_kurang_bayar enabled
* - Jika nominal_bayar/total_pembukuan > total_harus_bayar: hanya status_lebih_bayar enabled
*/
function updateCheckboxStatus() {
const totalHarus = parseFloat(totalHarusBayar.value) || 0;
const nominal = parseFloat(nominalBayar.value) || 0;
const pembukuan = parseFloat(totalPembukuan.value) || 0;
console.log('Updating checkbox status:', {
totalHarus,
nominal,
pembukuan
});
// Reset checkbox states
statusKurangBayar.disabled = false;
statusLebihBayar.disabled = false;
// Jika semua nilai sama, disable kedua checkbox
if (totalHarus === nominal && nominal === pembukuan && totalHarus > 0) {
statusKurangBayar.disabled = true;
statusLebihBayar.disabled = true;
statusKurangBayar.checked = false;
statusLebihBayar.checked = false;
nominalKurangBayarSection.style.display = 'none';
nominalLebihBayarSection.style.display = 'none';
buktiPengembalianSection.style.display = 'none';
console.log('Semua nilai sama, kedua checkbox disabled');
}
// Jika nominal/pembukuan kurang dari total harus bayar
else if ((nominal > 0 && nominal < totalHarus) || (pembukuan > 0 && pembukuan < totalHarus)) {
statusLebihBayar.disabled = true;
statusLebihBayar.checked = false;
statusKurangBayar.checked = true;
nominalKurangBayarSection.style.display = '';
nominalLebihBayarSection.style.display = 'none';
buktiPengembalianSection.style.display = 'none';
console.log('Kurang bayar, hanya status_kurang_bayar enabled');
}
// Jika nominal/pembukuan lebih dari total harus bayar
else if ((nominal > 0 && nominal > totalHarus) || (pembukuan > 0 && pembukuan > totalHarus)) {
statusKurangBayar.disabled = true;
statusKurangBayar.checked = false;
statusLebihBayar.checked = true;
nominalLebihBayarSection.style.display = '';
nominalKurangBayarSection.style.display = 'none';
console.log('Lebih bayar, hanya status_lebih_bayar enabled');
}
}
// Event listeners untuk update otomatis saat nilai berubah
if (nominalBayar) {
nominalBayar.addEventListener('input', updateCheckboxStatus);
nominalBayar.addEventListener('change', updateCheckboxStatus);
}
if (totalPembukuan) {
totalPembukuan.addEventListener('input', updateCheckboxStatus);
totalPembukuan.addEventListener('change', updateCheckboxStatus);
}
// Initial check saat halaman dimuat
updateCheckboxStatus();
/**
* Fungsi untuk reset field dan section visibility
* @param {string} type - 'kurang' atau 'lebih'
@@ -426,6 +499,12 @@
}
statusKurangBayar.addEventListener('change', function() {
// Cek apakah checkbox tidak disabled sebelum memproses
if (this.disabled) {
this.checked = false;
return;
}
if (this.checked) {
nominalKurangBayarSection.style.display = 'flex';
resetFields('kurang');
@@ -451,6 +530,12 @@
}
statusLebihBayar.addEventListener('change', function() {
// Cek apakah checkbox tidak disabled sebelum memproses
if (this.disabled) {
this.checked = false;
return;
}
if (this.checked) {
nominalLebihBayarSection.style.display = 'flex';
buktiPengembalianSection.style.display = 'flex';