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

refactor: Delete tabs and combine into one page, add status filter

main-dlh
Regiaaaaaa 2025-11-26 15:14:53 +07:00
parent 0f8b77005b
commit 45b7d3fc25
5 changed files with 57 additions and 176 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
Controllers/ChecklistHarianController.cs
View File

@ -11,7 +11,7 @@ namespace BpsRwApp.Controllers
} }
[HttpGet] [HttpGet]
public IActionResult Table(string status = "all") public IActionResult Table()
{ {
var startDate = new DateTime(2025, 1, 1); var startDate = new DateTime(2025, 1, 1);
@ -49,12 +49,6 @@ namespace BpsRwApp.Controllers
}) })
.ToArray(); .ToArray();
if (status == "sudah")
data = data.Where(x => x.status.Contains("badge-success")).ToArray();
if (status == "belum")
data = data.Where(x => x.status.Contains("badge-error")).ToArray();
return Json(new { data }); return Json(new { data });
} }

129
Views/ChecklistHarian/Index.cshtml
View File

@ -2,20 +2,16 @@
ViewData["Title"] = "Checklist Harian"; ViewData["Title"] = "Checklist Harian";
} }
<link href="https://cdn.jsdelivr.net/npm/tom-select@2.2.2/dist/css/tom-select.css" rel="stylesheet"> <div class="breadcrumbs text-sm mb-4">
<div class="breadcrumbs text-sm">
<ul> <ul>
<li class="text-gray-500"><a>Checklist Harian</a></li> <li class="text-gray-500"><a>Checklist Harian</a></li>
<li id="breadcrumb-active">Semua</li> <li id="breadcrumb-active">Semua</li>
</ul> </ul>
</div> </div>
<div class="grid grid-cols-1 gap-4 lg:grid-cols-2 mt-4"> <div class="flex items-center justify-between mb-6">
<div class="prose"> <h2 class="text-xl font-semibold text-gray-800">Data Checklist Rumah</h2>
<h3 class="mb-2">Data Checklist Rumah</h3> <div class="flex items-center gap-3">
</div>
<div class="justify-self-end lg:self-center">
<button class="btn rounded-full bg-white" onclick="modal_filter_checklist.showModal()"> <button class="btn rounded-full bg-white" onclick="modal_filter_checklist.showModal()">
<span class="icon icon-fill me-2">filter_list</span> <span class="icon icon-fill me-2">filter_list</span>
Filter Filter
@ -23,24 +19,23 @@
</div> </div>
</div> </div>
<div class="h-8"></div> <div class="card bg-white shadow-sm">
<div class="card-body p-0">
<!-- Tabs --> <table class="table w-full" id="tableChecklistHarian">
<div class="tabs tabs-lift"> <thead>
<tr>
<input type="radio" name="tab_checklist_harian" checked class="tab checked:text-white [--tab-bg:green]" aria-label="Semua" /> <th>No</th>
<div class="tab-content bg-base-100 border-base-300 p-0"> <th>Tanggal</th>
@await Html.PartialAsync("_TabIndexSemua") <th>Mudah Terurai</th>
</div> <th>Material Daur Ulang</th>
<th>B3</th>
<input type="radio" name="tab_checklist_harian" class="tab checked:text-white [--tab-bg:green]" aria-label="Verifikasi" /> <th>Residu</th>
<div class="tab-content bg-base-100 border-base-300 p-0"> <th>Status</th>
@await Html.PartialAsync("_TabIndexSudahVerifikasi") <th>Aksi</th>
</div> </tr>
</thead>
<input type="radio" name="tab_checklist_harian" class="tab checked:text-white [--tab-bg:green]" aria-label="Belum Terverifikasi" /> <tbody></tbody>
<div class="tab-content bg-base-100 border-base-300 p-0"> </table>
@await Html.PartialAsync("_TabIndexBelumVerifikasi")
</div> </div>
</div> </div>
@ -98,6 +93,14 @@
<option value="10">RW 10</option> <option value="10">RW 10</option>
</select> </select>
</fieldset> </fieldset>
<fieldset class="fieldset mt-4">
<legend class="fieldset-legend">Status</legend>
<select id="statusSelect" class="select w-full">
<option disabled selected>Pilih Status</option>
<option value="verifikasi">Verifikasi</option>
<option value="belum">Belum Verifikasi</option>
</select>
</fieldset>
<div class="modal-action"> <div class="modal-action">
<button type="button" class="btn" onclick="modal_filter_checklist.close()">Bersihkan</button> <button type="button" class="btn" onclick="modal_filter_checklist.close()">Bersihkan</button>
<button type="submit" class="btn btn-neutral">Terapkan Filter</button> <button type="submit" class="btn btn-neutral">Terapkan Filter</button>
@ -106,14 +109,15 @@
</div> </div>
</dialog> </dialog>
@section Scripts {
<script src="https://code.jquery.com/jquery-3.7.1.js"></script> <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
<script src="https://cdn.datatables.net/2.3.4/js/dataTables.js"></script> <script src="https://cdn.datatables.net/2.3.4/js/dataTables.js"></script>
<script src="/plugins/datatables/dataTables.tailwindcss.js"></script> <script src="/plugins/datatables/dataTables.tailwindcss.js"></script>
<link href="https://cdn.jsdelivr.net/npm/tom-select@2.2.2/dist/css/tom-select.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/tom-select@2.2.2/dist/js/tom-select.complete.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/tom-select@2.2.2/dist/js/tom-select.complete.min.js"></script>
<script type="text/javascript"> <script type="text/javascript">
var table;
$(document).ready(function () {
new TomSelect("#kelurahanSelect", { new TomSelect("#kelurahanSelect", {
closeAfterSelect: true, closeAfterSelect: true,
maxItems: 1, maxItems: 1,
@ -126,18 +130,13 @@
placeholder: "Pilih RW", placeholder: "Pilih RW",
}); });
let tableSemua = null; table = new DataTable('#tableChecklistHarian', {
let tableSudah = null; ajax: '@Url.Action("Table", "ChecklistHarian")',
let tableBelum = null;
function initTableSemua() {
if (tableSemua != null) return;
tableSemua = new DataTable('#tableChecklistSemua', {
ajax: '@Url.Action("Table", "ChecklistHarian")?status=semua',
scrollX: true, scrollX: true,
autoWidth: false, autoWidth: false,
initComplete: () => $('div.dt-scroll-body thead').css('visibility', 'collapse'), initComplete: function () {
$('div.dt-scroll-body thead').css('visibility', 'collapse');
},
columns: [ columns: [
{ data: null, render: (d, t, r, m) => m.row + 1 }, { data: null, render: (d, t, r, m) => m.row + 1 },
{ data: 'tanggal' }, { data: 'tanggal' },
@ -149,59 +148,5 @@
{ data: 'aksi' } { data: 'aksi' }
] ]
}); });
}
function initTableSudahVerifikasi() {
if (tableSudah != null) return;
tableSudah = new DataTable('#tableChecklistSudahVerifikasi', {
ajax: '@Url.Action("Table", "ChecklistHarian")?status=sudah',
scrollX: true,
autoWidth: false,
initComplete: () => $('div.dt-scroll-body thead').css('visibility', 'collapse'),
columns: [
{ data: null, render: (d,t,r,m)=> m.row+1 },
{ data: 'tanggal' },
{ data: 'mudah_terurai' },
{ data: 'material_daur_ulang' },
{ data: 'b3' },
{ data: 'residu' },
{ data: 'status' },
{ data: 'aksi' }
]
}); });
}
function initTableBelumVerifikasi() {
if (tableBelum != null) return;
tableBelum = new DataTable('#tableChecklistBelumVerifikasi', {
ajax: '@Url.Action("Table", "ChecklistHarian")?status=belum',
scrollX: true,
autoWidth: false,
initComplete: () => $('div.dt-scroll-body thead').css('visibility', 'collapse'),
columns: [
{ data: null, render: (d,t,r,m)=> m.row+1 },
{ data: 'tanggal' },
{ data: 'mudah_terurai' },
{ data: 'material_daur_ulang' },
{ data: 'b3' },
{ data: 'residu' },
{ data: 'status' },
{ data: 'aksi' }
]
});
}
document.querySelectorAll('input[name="tab_checklist_harian"]').forEach((tab, index) => {
tab.addEventListener('change', () => {
if (index === 0) initTableSemua();
if (index === 1) initTableSudahVerifikasi();
if (index === 2) initTableBelumVerifikasi();
});
});
initTableSemua();
</script> </script>
}

19
Views/ChecklistHarian/_TabIndexBelumVerifikasi.cshtml
View File

@ -1,19 +0,0 @@
<div class="card bg-base-100 rounded-none border border-base-300">
<div class="card-body p-0">
<table class="table-zebra table w-full text-sm" id="tableChecklistBelumVerifikasi">
<thead>
<tr>
<th class="w-[5%]">No</th>
<th class="w-[15%]">Tanggal</th>
<th class="w-[15%]">Mudah Terurai</th>
<th class="w-[15%]">Material Daur Ulang</th>
<th class="w-[10%]">B3</th>
<th class="w-[10%]">Residu</th>
<th class="w-[15%]">Status</th>
<th class="w-[15%] text-center">Aksi</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>

20
Views/ChecklistHarian/_TabIndexSemua.cshtml
View File

@ -1,20 +0,0 @@
<div class="card bg-base-100 rounded-none border border-base-300">
<div class="card-body p-0">
<table class="table-zebra table w-full text-sm" id="tableChecklistSemua">
<thead>
<tr>
<th class="w-[5%]">No</th>
<th class="w-[15%]">Tanggal</th>
<th class="w-[15%]">Mudah Terurai</th>
<th class="w-[15%]">Material Daur Ulang</th>
<th class="w-[10%]">B3</th>
<th class="w-[10%]">Residu</th>
<th class="w-[15%]">Status</th>
<th class="w-[15%] text-center">Aksi</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>

19
Views/ChecklistHarian/_TabIndexSudahVerifikasi.cshtml
View File

@ -1,19 +0,0 @@
<div class="card bg-base-100 rounded-none border border-base-300">
<div class="card-body p-0">
<table class="table-zebra table w-full text-sm" id="tableChecklistSudahVerifikasi">
<thead>
<tr>
<th class="w-[5%]">No</th>
<th class="w-[15%]">Tanggal</th>
<th class="w-[15%]">Mudah Terurai</th>
<th class="w-[15%]">Material Daur Ulang</th>
<th class="w-[10%]">B3</th>
<th class="w-[10%]">Residu</th>
<th class="w-[15%]">Status</th>
<th class="w-[15%] text-center">Aksi</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>