refactor: place the add button on the location tab
parent
7a104907df
commit
4f2c97d0d7
|
|
@ -16,11 +16,7 @@
|
|||
<h3 class="mb-2">Profil Rw</h3>
|
||||
</div>
|
||||
<div class="justify-self-end lg:self-center">
|
||||
<label id="btn-tambah" for="modal-tambah"
|
||||
class="btn rounded-full bg-green-600 hover:bg-green-700 text-white border-0 shadow-sm transition duration-200">
|
||||
<span class="icon icon-fill me-2">add</span>
|
||||
Tambah
|
||||
</label>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -46,6 +42,13 @@
|
|||
|
||||
<input type="radio" name="tab_profil_rw" checked class="tab checked:text-white [--tab-bg:green]" aria-label="Lokasi TP3SR & Parkir Pengumpulan Sampah" />
|
||||
<div class="tab-content bg-base-100 border-base-300 p-0">
|
||||
<div class="flex flex-col p-4 items-end w-full">
|
||||
<button onclick="modal_add_lokasi.showModal()"
|
||||
class="btn rounded-full btn-primary text-white w-32">
|
||||
<span class="icon icon-fill me-2">add</span>
|
||||
Tambah
|
||||
</button>
|
||||
</div>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="table table-zebra w-full text-sm" id="lokasiTable">
|
||||
<thead>
|
||||
|
|
@ -192,22 +195,4 @@
|
|||
console.log('Detail clicked for ID:', id);
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
// Toggle "Tambah" button visibility based on active tab
|
||||
const toggleTambahButton = () => {
|
||||
const active = $('input[name="tab_profil_rw"]:checked').attr('aria-label');
|
||||
if (active === "Lokasi TP3SR & Parkir Pengumpulan Sampah") {
|
||||
$('#btn-tambah').show();
|
||||
} else {
|
||||
$('#btn-tambah').hide();
|
||||
}
|
||||
};
|
||||
|
||||
// initial check
|
||||
toggleTambahButton();
|
||||
|
||||
// bind change event
|
||||
$('input[name="tab_profil_rw"]').on('change', toggleTambahButton);
|
||||
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,7 @@
|
|||
<input type="checkbox" id="modal-tambah" class="modal-toggle" />
|
||||
|
||||
<div class="modal" role="dialog">
|
||||
<dialog id="modal_add_lokasi" class="modal">
|
||||
<div class="modal-box w-full max-w-md rounded-2xl shadow-lg relative">
|
||||
<!-- Close Button -->
|
||||
<label for="modal-tambah"
|
||||
<label onclick="modal_add_lokasi.close()"
|
||||
class="btn btn-sm btn-circle btn-ghost absolute right-3 top-3">
|
||||
✕
|
||||
</label>
|
||||
|
|
@ -84,10 +82,10 @@
|
|||
|
||||
<!-- Action Button -->
|
||||
<div class="modal-action mt-6 flex justify-end gap-3">
|
||||
<label for="modal-tambah"
|
||||
<button onclick="modal_add_lokasi.close()" type="button"
|
||||
class="btn btn-outline btn-sm flex items-center gap-2">
|
||||
✕ Batalkan
|
||||
</label>
|
||||
</button>
|
||||
<button type="submit"
|
||||
class="btn btn-success btn-sm text-white flex items-center gap-2">
|
||||
✓ Simpan
|
||||
|
|
@ -95,4 +93,4 @@
|
|||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</dialog>
|
||||
Loading…
Reference in New Issue