feat: optimize component

main
Kevin Hendrawan 2025-11-24 23:11:51 +07:00
parent c03c3cbae9
commit 1eb26b5d43
1 changed files with 14 additions and 31 deletions

View File

@ -23,7 +23,7 @@
<h3 id="modal_title" class="text-gray-900 text-xl font-semibold font-['Plus_Jakarta_Sans'] leading-8 mb-8">Tambah Transaksi BSI</h3>
<form id="formTambah" onsubmit="submitForm(event)">
<input type="hidden" id="edit_mode" value="false">
<div class="flex flex-col gap-6">
<div class="flex flex-col gap-3">
<div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
<div class="flex flex-col">
<fieldset class="fieldset">
@ -49,7 +49,7 @@
<div class="divider"></div>
<div class="flex flex-col gap-2" id="jenis_sampah_container">
<div class="grid grid-cols-1 md:grid-cols-[1fr_1fr_auto] gap-4 items-end mb-4">
<div class="grid grid-cols-1 md:grid-cols-[1fr_1fr_auto] gap-4 items-end mb-4" id="template_jenis_sampah_row">
<div class="flex flex-col">
<fieldset class="fieldset">
<legend class="fieldset-legend">
@ -78,7 +78,7 @@
</div>
</div>
<div class="flex justify-end items-center">
<div class="flex justify-end items-center mt-2 mb-4">
<button type="button" class="btn btn-sm rounded-full bg-white" id="tambah_jenis_sampah">
Tambah Jenis Sampah
<i class="ph ph-plus"></i>
@ -243,36 +243,19 @@
index++;
let newRow = `
<div class="grid grid-cols-1 md:grid-cols-[1fr_1fr_auto] gap-4 items-end mb-4 jenis_sampah_row">
<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_${index}" class="select w-full jenis_sampah_select" required>
<option value="" disabled selected>Pilih Jenis Sampah</option>
</select>
</fieldset>
</div>
// Clone row template
let newRow = $("#template_jenis_sampah_row")
.clone()
.removeAttr("id") // hapus id template
.addClass("jenis_sampah_row");
<div class="flex flex-col">
<fieldset class="fieldset">
<legend class="fieldset-legend">
Berat Sampah (Kg)
<span class="text-red-500">*</span>
</legend>
<input id="berat_sampah_${index}" type="number" step="0.1" class="input input-bordered w-full" placeholder="0.0" required />
</fieldset>
</div>
// Update ID duplikat pada select
newRow.find("select[id='jenis_sampah']").each(function (i) {
let newId = "jenis_sampah_" + index + "_" + (i + 1);
$(this).attr("id", newId);
});
<a href="#" class="mt-8 btn btn-circle btn-error text-white justify-self-end delete-row">
<i class="ph ph-trash"></i>
</a>
</div>`;
// Tambahkan row ke dalam container
// Append ke container
$("#jenis_sampah_container").append(newRow);
});