style: add form add & edit

main-dlh
Yuri Dimas 2025-11-14 13:35:47 +07:00
parent c1b76ae0b0
commit 645fc1b122
2 changed files with 144 additions and 33 deletions

View File

@ -23,9 +23,7 @@ namespace BpsRwApp.Controllers
pemilik_rumah = "Rizky Adi",
status_rumah_memilah = "Aktif",
status_nasabah_bank_sampah = "Aktif",
aksi = "<div class=\"flex gap-2\">" +
"<a href=\"#\" class=\"btn btn-ghost btn-square btn-xs\"><span class=\"icon icon-fill text-sm\">more_horiz</span></a>" +
"</div>",
aksi = "<button type=\"button\" class=\"btn btn-sm rounded-full bg-white btn-edit-rumah\">Edit</button>",
},
new {
rt = "002",
@ -35,9 +33,7 @@ namespace BpsRwApp.Controllers
pemilik_rumah = "Dewi Lestari",
status_rumah_memilah = "Aktif",
status_nasabah_bank_sampah = "Aktif",
aksi = "<div class=\"flex gap-2\">" +
"<a href=\"#\" class=\"btn btn-ghost btn-square btn-xs\"><span class=\"icon icon-fill text-sm\">more_horiz</span></a>" +
"</div>",
aksi = "<button type=\"button\" class=\"btn btn-sm rounded-full bg-white btn-edit-rumah\">Edit</button>",
},
new {
rt = "003",
@ -47,9 +43,7 @@ namespace BpsRwApp.Controllers
pemilik_rumah = "Fajar Setiawan",
status_rumah_memilah = "Aktif",
status_nasabah_bank_sampah = "Aktif",
aksi = "<div class=\"flex gap-2\">" +
"<a href=\"#\" class=\"btn btn-ghost btn-square btn-xs\"><span class=\"icon icon-fill text-sm\">more_horiz</span></a>" +
"</div>",
aksi = "<button type=\"button\" class=\"btn btn-sm rounded-full bg-white btn-edit-rumah\">Edit</button>",
},
new {
rt = "004",
@ -59,9 +53,7 @@ namespace BpsRwApp.Controllers
pemilik_rumah = "Budi Santoso",
status_rumah_memilah = "Aktif",
status_nasabah_bank_sampah = "Aktif",
aksi = "<div class=\"flex gap-2\">" +
"<a href=\"#\" class=\"btn btn-ghost btn-square btn-xs\"><span class=\"icon icon-fill text-sm\">more_horiz</span></a>" +
"</div>",
aksi = "<button type=\"button\" class=\"btn btn-sm rounded-full bg-white btn-edit-rumah\">Edit</button>",
},
new {
rt = "005",
@ -71,9 +63,7 @@ namespace BpsRwApp.Controllers
pemilik_rumah = "Siti Nurhaliza",
status_rumah_memilah = "Tidak Aktif",
status_nasabah_bank_sampah = "Tidak Aktif",
aksi = "<div class=\"flex gap-2\">" +
"<a href=\"#\" class=\"btn btn-ghost btn-square btn-xs\"><span class=\"icon icon-fill text-sm\">more_horiz</span></a>" +
"</div>",
aksi = "<button type=\"button\" class=\"btn btn-sm rounded-full bg-white btn-edit-rumah\">Edit</button>",
},
new {
rt = "006",
@ -83,9 +73,7 @@ namespace BpsRwApp.Controllers
pemilik_rumah = "Andi Prabowo",
status_rumah_memilah = "Tidak Aktif",
status_nasabah_bank_sampah = "Tidak Aktif",
aksi = "<div class=\"flex gap-2\">" +
"<a href=\"#\" class=\"btn btn-ghost btn-square btn-xs\"><span class=\"icon icon-fill text-sm\">more_horiz</span></a>" +
"</div>",
aksi = "<button type=\"button\" class=\"btn btn-sm rounded-full bg-white btn-edit-rumah\">Edit</button>",
},
new {
rt = "007",
@ -95,9 +83,7 @@ namespace BpsRwApp.Controllers
pemilik_rumah = "Tina Sari",
status_rumah_memilah = "Aktif",
status_nasabah_bank_sampah = "Aktif",
aksi = "<div class=\"flex gap-2\">" +
"<a href=\"#\" class=\"btn btn-ghost btn-square btn-xs\"><span class=\"icon icon-fill text-sm\">more_horiz</span></a>" +
"</div>",
aksi = "<button type=\"button\" class=\"btn btn-sm rounded-full bg-white btn-edit-rumah\">Edit</button>",
},
new {
rt = "008",
@ -107,9 +93,7 @@ namespace BpsRwApp.Controllers
pemilik_rumah = "Hendra Wijaya",
status_rumah_memilah = "Aktif",
status_nasabah_bank_sampah = "Aktif",
aksi = "<div class=\"flex gap-2\">" +
"<a href=\"#\" class=\"btn btn-ghost btn-square btn-xs\"><span class=\"icon icon-fill text-sm\">more_horiz</span></a>" +
"</div>",
aksi = "<button type=\"button\" class=\"btn btn-sm rounded-full bg-white btn-edit-rumah\">Edit</button>",
},
new {
rt = "009",
@ -119,9 +103,7 @@ namespace BpsRwApp.Controllers
pemilik_rumah = "Lina Anggraini",
status_rumah_memilah = "Aktif",
status_nasabah_bank_sampah = "Aktif",
aksi = "<div class=\"flex gap-2\">" +
"<a href=\"#\" class=\"btn btn-ghost btn-square btn-xs\"><span class=\"icon icon-fill text-sm\">more_horiz</span></a>" +
"</div>",
aksi = "<button type=\"button\" class=\"btn btn-sm rounded-full bg-white btn-edit-rumah\">Edit</button>",
},
new {
rt = "010",
@ -131,9 +113,7 @@ namespace BpsRwApp.Controllers
pemilik_rumah = "Nina Kurniawati",
status_rumah_memilah = "Aktif",
status_nasabah_bank_sampah = "Aktif",
aksi = "<div class=\"flex gap-2\">" +
"<a href=\"#\" class=\"btn btn-ghost btn-square btn-xs\"><span class=\"icon icon-fill text-sm\">more_horiz</span></a>" +
"</div>",
aksi = "<button type=\"button\" class=\"btn btn-sm rounded-full bg-white btn-edit-rumah\">Edit</button>",
},
};

View File

@ -14,7 +14,11 @@
<div class="prose">
<h3 class="mb-2">Rumah</h3>
</div>
<div class="justify-self-end lg:self-center">
<div class="justify-self-end lg:self-center flex flex-wrap gap-3">
<button id="btn-tambah-rumah" type="button" class="btn btn-primary rounded-full text-white border-0">
<span class="icon icon-fill me-2">add</span>
Tambah Rumah
</button>
<a class="btn rounded-full bg-white" href="#">
<span class="icon icon-fill me-2">filter_list</span>
Filter
@ -22,6 +26,88 @@
</div>
</div>
<!-- Create Modal -->
<dialog id="modal_create" class="modal modal-bottom sm:modal-middle">
<div class="modal-box w-full sm:max-w-md">
<div class="flex items-start justify-between gap-4">
<div>
<h3 class="text-lg font-semibold">Tambah Rumah</h3>
<p class="text-sm text-gray-500">Lengkapi informasi rumah sebelum menyimpan.</p>
</div>
<form method="dialog">
<button type="submit" class="btn btn-sm btn-circle btn-ghost">✕</button>
</form>
</div>
<form id="form-create-rumah" class=" space-y-4 mt-6">
<fieldset class="fieldset">
<legend class="fieldset-legend">RT</legend>
<input id="create-rt" name="rt" type="text" class="input w-full" placeholder="001" />
</fieldset>
<fieldset class="fieldset">
<legend class="fieldset-legend">Nama Pemilik Rumah</legend>
<input id="create-nama-pemilik" name="nama_pemilik" type="text" class="input w-full"
placeholder="Nama lengkap" />
</fieldset>
<fieldset class="fieldset">
<legend class="fieldset-legend">Alamat</legend>
<textarea id="create-alamat" name="alamat" class="textarea w-full" rows="4"
placeholder="Tulis alamat lengkap"></textarea>
</fieldset>
<div class="modal-action">
<button type="button" class="btn rounded-full" onclick="modal_create.close()">
<span class="icon me-1">cancel</span>
Batal
</button>
<button type="submit" class="btn btn-primary rounded-full text-white">
<span class="icon me-1">save</span>
Simpan
</button>
</div>
</form>
</div>
</dialog>
<!-- Edit Modal -->
<dialog id="modal_edit" class="modal modal-bottom sm:modal-middle">
<div class="modal-box w-full sm:max-w-md">
<div class="flex items-start justify-between gap-4">
<div>
<h3 class="text-lg font-semibold">Edit Rumah</h3>
<p class="text-sm text-gray-500">Ubah data rumah dan simpan untuk memperbarui.</p>
</div>
<form method="dialog">
<button type="submit" class="btn btn-sm btn-circle btn-ghost">✕</button>
</form>
</div>
<form id="form-edit-rumah" class="mt-6 space-y-4">
<fieldset class="fieldset">
<legend class="fieldset-legend">RT</legend>
<input id="edit-rt" name="rt" type="text" class="input w-full" placeholder="001" />
</fieldset>
<fieldset class="fieldset">
<legend class="fieldset-legend">Nama Pemilik Rumah</legend>
<input id="edit-nama-pemilik" name="nama_pemilik" type="text" class="input w-full"
placeholder="Nama lengkap" />
</fieldset>
<fieldset class="fieldset">
<legend class="fieldset-legend">Alamat</legend>
<textarea id="edit-alamat" name="alamat" class="textarea w-full" rows="4"
placeholder="Tulis alamat lengkap"></textarea>
</fieldset>
<div class="modal-action">
<button type="button" class="btn rounded-full" onclick="modal_edit.close()">
<span class="icon me-1">cancel</span>
Batal
</button>
<button type="submit" class="btn btn-primary rounded-full text-white">
<span class="icon me-1">save</span>
Simpan
</button>
</div>
</form>
</div>
</dialog>
<div class="h-8"></div>
<div class="card bg-white shadow-sm">
@ -68,11 +154,56 @@
{ data: 'pemilik_rumah' },
{ data: 'status_rumah_memilah' },
{ data: 'status_nasabah_bank_sampah' },
{ data: 'aksi' },
{
data: 'aksi',
orderable: false,
searchable: false,
},
],
"columnDefs": [
{ "className": "whitespace-normal", "targets": 3 }
]
});
const btnTambahRumah = document.getElementById('btn-tambah-rumah');
const formCreateRumah = document.getElementById('form-create-rumah');
const formEditRumah = document.getElementById('form-edit-rumah');
const editRtInput = document.getElementById('edit-rt');
const editNamaPemilikInput = document.getElementById('edit-nama-pemilik');
const editAlamatInput = document.getElementById('edit-alamat');
const modalCreateElement = document.getElementById('modal_create');
const modalEditElement = document.getElementById('modal_edit');
window.modal_create = modalCreateElement;
window.modal_edit = modalEditElement;
btnTambahRumah?.addEventListener('click', () => {
formCreateRumah?.reset();
modalCreateElement?.showModal();
});
formCreateRumah?.addEventListener('submit', (event) => {
event.preventDefault();
modalCreateElement?.close();
});
formEditRumah?.addEventListener('submit', (event) => {
event.preventDefault();
modalEditElement?.close();
});
$('#example').on('click', '.btn-edit-rumah', function () {
const rowData = table.row($(this).closest('tr')).data();
if (!rowData) {
return;
}
editRtInput.value = rowData.rt ?? '';
editNamaPemilikInput.value = rowData.pemilik_rumah ?? '';
editAlamatInput.value = rowData.alamat ?? '';
modalEditElement?.showModal();
});
});
</script>