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

feat: create detail modal

main-dlh
Regiaaaaaa 2025-11-24 15:53:23 +07:00
parent 8ddaf32993
commit c747ce2499
2 changed files with 89 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
Controllers/LaporanRwController.cs
View File

@ -30,7 +30,7 @@ namespace BpsRwApp.Controllers
rumah_aktif_memilah = 450 + (index * 11 % 600),
status,
aksi = "<div class=\"flex gap-2\">" +
"<a href=\"#\" class=\"btn bg-white rounded-full btn-sm\">Detail</a>" +
"<button class=\"btn bg-white rounded-full btn-sm btn-detail\">Detail</button>" +
"</div>",
};
})

89
Views/LaporanRw/Index.cshtml
View File

@ -75,6 +75,61 @@
</div>
</dialog>
<!-- Detail Modal -->
<dialog id="modal_detail" class="modal modal-bottom sm:modal-middle">
<div class="modal-box w-full max-w-2xl">
<form method="dialog">
<button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
<h3 class="text-lg font-bold mb-4">Detail Laporan RW</h3>
<div class="grid grid-cols-2 gap-4 mb-6">
<div>
<p class="text-sm text-gray-500">Kelurahan</p>
<p class="font-semibold" id="detail_kelurahan">-</p>
</div>
<div>
<p class="text-sm text-gray-500">RW</p>
<p class="font-semibold" id="detail_rw">-</p>
</div>
<div>
<p class="text-sm text-gray-500">Period</p>
<p class="font-semibold" id="detail_period">-</p>
</div>
<div>
<p class="text-sm text-gray-500">Rumah Aktif Memilah</p>
<p class="font-semibold" id="detail_rumah_aktif">-</p>
</div>
</div>
<div class="overflow-x-auto">
<table class="table table-zebra w-full">
<thead>
<tr>
<th class="w-[10%]">No</th>
<th class="w-[50%]">Rumah</th>
<th class="w-[20%]">RT</th>
<th class="w-[20%]">Checklist</th>
</tr>
</thead>
<tbody id="detail_table_body">
</tbody>
</table>
</div>
<div class="modal-action mt-6">
<button type="button" class="btn btn-ghost rounded-full" onclick="modal_detail.close()">
<span class="icon me-2">close</span>
Tutup
</button>
<button type="submit" class="btn btn-primary text-white rounded-full">
<span class="icon me-2">check_circle</span>
Verifikasi
</button>
</div>
</form>
</div>
<form method="dialog" class="modal-backdrop">
<button>close</button>
</form>
</dialog>
<div class="card bg-white shadow-sm">
<div class="card-body p-0">
<table class="table-zebra table" id="example">
@ -120,11 +175,43 @@
]
});
table.on("click", ".btn-detail", function (e) {
e.preventDefault();
let rowData = table.row($(this).closest('tr')).data();
$('#detail_kelurahan').text(rowData.kelurahan);
$('#detail_rw').text(rowData.rw);
$('#detail_period').text(rowData.bulan);
$('#detail_rumah_aktif').text(rowData.rumah_aktif_memilah);
let detailRows = '';
let sampleHouses = [
{ rumah: 'Jl. Cipinang Raya No 34', rt: '03', checklist: '11' },
{ rumah: 'Jl. Cipinang Baru No 22', rt: '01', checklist: '23' }
];
sampleHouses.forEach((house, index) => {
detailRows += `
<tr>
<td>${index + 1}</td>
<td>${house.rumah}</td>
<td>${house.rt}</td>
<td>${house.checklist}</td>
</tr>
`;
});
$('#detail_table_body').html(detailRows);
modal_detail.showModal();
});
table.on("click", ".delete", function (e) {
e.preventDefault();
let url = $(this).data("url");
swal.fire({
Swal.fire({
title: "Apakah anda yakin?",
text: "Data yang dihapus tidak dapat dikembalikan lagi",
icon: "question",