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> <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)"> <form id="formTambah" onsubmit="submitForm(event)">
<input type="hidden" id="edit_mode" value="false"> <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="grid grid-cols-1 sm:grid-cols-2 gap-6">
<div class="flex flex-col"> <div class="flex flex-col">
<fieldset class="fieldset"> <fieldset class="fieldset">
@ -49,7 +49,7 @@
<div class="divider"></div> <div class="divider"></div>
<div class="flex flex-col gap-2" id="jenis_sampah_container"> <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"> <div class="flex flex-col">
<fieldset class="fieldset"> <fieldset class="fieldset">
<legend class="fieldset-legend"> <legend class="fieldset-legend">
@ -78,7 +78,7 @@
</div> </div>
</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"> <button type="button" class="btn btn-sm rounded-full bg-white" id="tambah_jenis_sampah">
Tambah Jenis Sampah Tambah Jenis Sampah
<i class="ph ph-plus"></i> <i class="ph ph-plus"></i>
@ -243,36 +243,19 @@
index++; index++;
let newRow = ` // Clone row template
<div class="grid grid-cols-1 md:grid-cols-[1fr_1fr_auto] gap-4 items-end mb-4 jenis_sampah_row"> let newRow = $("#template_jenis_sampah_row")
<div class="flex flex-col"> .clone()
<fieldset class="fieldset"> .removeAttr("id") // hapus id template
<legend class="fieldset-legend"> .addClass("jenis_sampah_row");
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>
<div class="flex flex-col"> // Update ID duplikat pada select
<fieldset class="fieldset"> newRow.find("select[id='jenis_sampah']").each(function (i) {
<legend class="fieldset-legend"> let newId = "jenis_sampah_" + index + "_" + (i + 1);
Berat Sampah (Kg) $(this).attr("id", newId);
<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>
<a href="#" class="mt-8 btn btn-circle btn-error text-white justify-self-end delete-row"> // Append ke container
<i class="ph ph-trash"></i>
</a>
</div>`;
// Tambahkan row ke dalam container
$("#jenis_sampah_container").append(newRow); $("#jenis_sampah_container").append(newRow);
}); });