banksampah
/
bps-rw
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor: place the add button on the location tab

main-dlh
Regiaaaaaa 2025-11-14 11:06:58 +07:00
parent 7a104907df
commit 4f2c97d0d7
2 changed files with 13 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
Views/Lokasi/Index.cshtml
View File

@ -16,11 +16,7 @@
<h3 class="mb-2">Profil Rw</h3> <h3 class="mb-2">Profil Rw</h3>
</div> </div>
<div class="justify-self-end lg:self-center"> <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>
</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" /> <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="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"> <div class="overflow-x-auto">
<table class="table table-zebra w-full text-sm" id="lokasiTable"> <table class="table table-zebra w-full text-sm" id="lokasiTable">
<thead> <thead>
@ -192,22 +195,4 @@
console.log('Detail clicked for ID:', id); 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> </script>

12
Views/Lokasi/_ModalTambah.cshtml
View File

@ -1,9 +1,7 @@
<input type="checkbox" id="modal-tambah" class="modal-toggle" /> <dialog id="modal_add_lokasi" class="modal">
<div class="modal" role="dialog">
<div class="modal-box w-full max-w-md rounded-2xl shadow-lg relative"> <div class="modal-box w-full max-w-md rounded-2xl shadow-lg relative">
<!-- Close Button --> <!-- 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"> class="btn btn-sm btn-circle btn-ghost absolute right-3 top-3">
✕ ✕
</label> </label>
@ -84,10 +82,10 @@
<!-- Action Button --> <!-- Action Button -->
<div class="modal-action mt-6 flex justify-end gap-3"> <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"> class="btn btn-outline btn-sm flex items-center gap-2">
✕ Batalkan ✕ Batalkan
</label> </button>
<button type="submit" <button type="submit"
class="btn btn-success btn-sm text-white flex items-center gap-2"> class="btn btn-success btn-sm text-white flex items-center gap-2">
✓ Simpan ✓ Simpan
@ -95,4 +93,4 @@
</div> </div>
</form> </form>
</div> </div>
</div> </dialog>