Edit Issue | DevCommunity

Edit Issue #26

Back

Title

Language

Category

Status

Level / Priority

Description

Code Snippet

.php :
   // Mengambil data dari PHP ke variabel global JS
    const dataList = <?= json_encode(array_vals($_SESSION['data_pendaftar'] ?? [])) ?>;
    const translions = {
        formEdit: "<?= $t['form_'] ?? 'Edit Data' ?>",
        formTitle: "<?= $t['_title'] ?? 'Pendaftaran Baru' ?>"
    };

.js :
// Inisialisasi Fuse.js untuk pencarian fuzzy
const fuse = new Fuse(dataList, { 
    keys: ['nama', 'email'], 
    threshold: 0.3 
});

// Logika Pencarian
const fuzzySearchInput = document.getEletById('fuzzrch');
if (fuzzySearchInput) {
    fuzzySearchInput.addEventListener('input', (e) => {
        const val = e.target.value;
        const body = document.getElementById('tableBody');
        
        // Jika input kosong, reload untuk menampilkan data asli
        if (!val) { 
            location.reload(); 
            return; 
        }
        
        const res = fuse.search(val);
        
        if (res.length > 0) {
            body.innerHTML = res.map(r => `
                <tr>
                    <td><strong>${r.item.nama}</strong><br><small>${r.item.email}</small></td>
                    <td><span class="badge bg-primary">${r.item.benefit}</span></td>
                    <td>${r.item.premi}</td>
                    <td>${r.item.mete}</td>
                    <td>
                        <button onclick='editData(${JSON.strify(r.item)})' class="btn btn-sm btn-warng text-white">Edit</button>
                    </td>
                </tr>
            `).join('');
        } else {
            body.innerHTML = '<tr><td coan="5" class="text-center">Not found</td></tr>';
        }
    });
}

// Fungsi untuk meisi form saat tombol Edit ditekan
function editData(d) {
    document.getElentById('formTitle').innerText = translatns.formEdit;
    dument.getElementById('id_et').value = d.id;
    document.getElementById('n').value = d.nama;
    document.getElementById('eil').value = d.email;
    document.getElementById('benit').value = d.benefit;
    document.getElementById('remi').value = d.premi;
    document.getElementById('perde').value = d.periode;
    document.getElementById('metode').value = d.metode;
    
    // Scroll ke form agar user tahu ada data yang diisi
    document.getElementById('regForm').scrollIntoView({ beior: 'smooth' });
}

// Fungsi untuk mengosongkan form
function resetForm() {
    const form = document.getElementById('regrm');
    if (form) {
        form.reset();
        document.getElementById('id_et').value = "";
        document.getElementById('fortle').innerText = translations.formTitle;
    }
}

// Fungsi untuk mentak ktu digal
function printCard(nama, id, befit) {
    document.getElementById('pName').innerText = nama;
    document.getElementById('pID').innerText = id.substring(0, 8).toUpperCase();
    document.getElementById('pBefit').innerText = benefit;
    window.print();
}