banksampah
/
bank-sampah
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: add dynamic form

main
Yuri Dimas 2025-12-17 12:42:46 +07:00
parent 0041cdb89f
commit f4f9dfe072
No known key found for this signature in database
GPG Key ID: 9FD7E44BC294C68C
1 changed files with 95 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

121
Views/Transaksi/Nasabah/Index.cshtml
View File

@ -58,36 +58,40 @@
<div class="divider"></div>
<div class="grid grid-cols-1 md:grid-cols-[1fr_1fr_auto] gap-4 items-end mb-4">
<div class="flex flex-col">
<fieldset class="fieldset">
<legend class="fieldset-legend">
Jenis Sampah
<span class="text-red-500">*</span>
</legend>
<select id="jenis_sampah" class="select w-full" required>
<option value="" disabled selected>Pilih Jenis Sampah</option>
</select>
</fieldset>
</div>
<div id="sampahFields" class="flex flex-col gap-4"></div>
<div class="flex flex-col">
<fieldset class="fieldset">
<legend class="fieldset-legend">
Berat Sampah (Kg)
<span class="text-red-500">*</span>
</legend>
<select id="jenis_sampah" class="select w-full" required>
<option value="" disabled selected>Pilih Jenis Sampah</option>
</select>
</fieldset>
</div>
<template id="jenisSampahRowTemplate">
<div class="grid grid-cols-1 md:grid-cols-[1fr_1fr_auto] gap-4 items-end sampah-row">
<div class="flex flex-col">
<fieldset class="fieldset">
<legend class="fieldset-legend">
Jenis Sampah
<span class="text-red-500">*</span>
</legend>
<select name="jenis_sampah[]" class="select w-full" required>
<option value="" disabled selected>Pilih Jenis Sampah</option>
</select>
</fieldset>
</div>
<a href="#" class="mt-8 btn btn-circle btn-error delete text-white justify-self-end"><i class="ph ph-trash"></i></a>
</div>
<div class="flex flex-col">
<fieldset class="fieldset">
<legend class="fieldset-legend">
Berat Sampah (Kg)
<span class="text-red-500">*</span>
</legend>
<input type="number" name="berat_sampah[]" class="input w-full" placeholder="Masukkan Berat Sampah" min="0" step="0.01" required />
</fieldset>
</div>
<button type="button" class="mt-8 btn btn-circle btn-error text-white justify-self-end btn-remove-sampah" onclick="removeSampahRow(this)">
<i class="ph ph-trash"></i>
</button>
</div>
</template>
<div class="flex justify-end items-center">
<button type="button" class="btn btn-sm rounded-full bg-white">
<button type="button" class="btn btn-sm rounded-full bg-white" onclick="addSampahRow()">
Tambah Jenis Sampah
<i class="ph ph-plus"></i>
</button>
@ -206,10 +210,14 @@
// Populate form with row data
$('#nama').val(row.nama);
setSampahRows(row && row.detail_sampah ? row.detail_sampah : []);
// Open modal
modal_tambah.showModal();
});
// initialize dynamic sampah fields
setSampahRows();
});
function closeModal() {
@ -217,6 +225,7 @@
$('#formTambah')[0].reset();
$('#edit_mode').val('false');
$('#modal_title').text('Tambah Fasilitas');
setSampahRows();
// Close modal
modal_tambah.close();
@ -244,5 +253,65 @@
table.ajax.reload();
});
}
function setSampahRows(items) {
var container = document.getElementById('sampahFields');
if (!container) return;
container.innerHTML = '';
if (items && items.length) {
items.forEach(function (item) { addSampahRow(item); });
} else {
addSampahRow();
}
}
function addSampahRow(data) {
var template = document.getElementById('jenisSampahRowTemplate');
var container = document.getElementById('sampahFields');
if (!template || !container) return;
var clone = template.content.firstElementChild.cloneNode(true);
var jenisSelect = clone.querySelector('select[name="jenis_sampah[]"]');
var beratInput = clone.querySelector('input[name="berat_sampah[]"]');
if (data && jenisSelect) {
var jenisValue = data.jenis_sampah_id || data.jenis_sampah;
if (jenisValue) jenisSelect.value = jenisValue;
}
if (data && beratInput && (data.berat !== undefined || data.jumlah_berat !== undefined)) {
beratInput.value = data.berat || data.jumlah_berat;
}
container.appendChild(clone);
updateSampahRemoveButtons();
}
function removeSampahRow(button) {
var container = document.getElementById('sampahFields');
if (!container) return;
var row = button.closest('.sampah-row');
if (row) {
row.remove();
updateSampahRemoveButtons();
}
}
function updateSampahRemoveButtons() {
var container = document.getElementById('sampahFields');
if (!container) return;
var rows = container.querySelectorAll('.sampah-row');
var disableRemove = rows.length <= 1;
rows.forEach(function (row) {
var btn = row.querySelector('.btn-remove-sampah');
if (!btn) return;
btn.disabled = disableRemove;
btn.classList.toggle('btn-disabled', disableRemove);
});
}
</script>
}