style: add form add & edit
parent
c1b76ae0b0
commit
645fc1b122
|
|
@ -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>",
|
||||
},
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
</script>
|
||||
Loading…
Reference in New Issue