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

slicing: rotasi pjlp pendamping page

main-dlh
Regiaaaaaa 2025-12-22 22:07:57 +07:00
parent ba3a6b5b82
commit 6db0e0193f
3 changed files with 546 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

79
Controllers/RotasiPjlpPendamping.cs 100644
View File

@ -0,0 +1,79 @@
using Microsoft.AspNetCore.Mvc;
namespace BpsRwApp.Controllers
{
[Route("[controller]/[action]")]
public class RotasiPJLPPendampingController : AppControllerBase
{
public IActionResult Index()
{
return View();
}
[HttpGet]
public IActionResult Table()
{
var pendampingNames = new[]
{
"Raden Adjeng Sukaesih",
"Bambang Pamungkas",
"Siti Badriah",
"Agus Harimurti",
"Susilo Bambang",
"Megawati Pertiwi",
"Prabowo Subianto",
"Joko Widodo",
"Ma'ruf Amin",
"Puan Maharani",
"Budi Santoso",
"Dewi Sartika",
"Andi Wijaya",
"Sri Mulyani",
"Hadi Pranoto"
};
var kotaList = new[]
{
"Kalisari, Pasar Rebo, Jakarta Timur",
"Pondok Bambu, Duren Sawit, Jakarta Timur",
"Rawamangun, Pulo Gadung, Jakarta Timur",
"Cengkareng Barat, Cengkareng, Jakarta Barat",
"Kembangan Selatan, Kembangan, Jakarta Barat",
"Tanjung Duren Utara, Grogol Petamburan, Jakarta Barat",
"Sunter Jaya, Tanjung Priok, Jakarta Utara",
"Kelapa Gading Timur, Kelapa Gading, Jakarta Utara",
"Pademangan Barat, Pademangan, Jakarta Utara",
"Koja, Koja, Jakarta Utara"
};
var data = Enumerable.Range(0, 100)
.Select(index =>
{
var nama = pendampingNames[index % pendampingNames.Length];
var rw = ((index % 10) + 1).ToString("D2");
var kota = kotaList[index % kotaList.Length];
return new
{
id = index + 1,
nama_pendamping = nama,
rw = rw,
kota = kota,
tanggal_sk = "",
no_sk = "",
file_sk_name = "",
aksi = "<button type=\"button\" class=\"btn btn-sm rounded-full bg-white btn-edit-rotasi\">Edit</button> " +
"<button type=\"button\" class=\"btn btn-sm rounded-full bg-white border-red-500 text-red-500 btn-delete-rotasi\">Delete</button>",
};
})
.ToArray();
var response = new
{
data = data
};
return Json(response);
}
}
}

459
Views/RotasiPjlpPendamping/Index.cshtml 100644
View File

@ -0,0 +1,459 @@
@{
ViewData["Title"] = "Rotasi PJLP Pendamping";
}
<!-- Toast Notification -->
<div id="successToast" class="fixed top-20 right-6 z-[9999] hidden">
<div class="alert bg-green-50 border border-green-200 shadow-lg flex items-start gap-3 pr-12 min-w-[320px]">
<div class="flex-shrink-0">
<div class="w-5 h-5 rounded-full bg-green-500 flex items-center justify-center">
<span class="icon text-white text-xs">check</span>
</div>
</div>
<div class="flex-1">
<h3 id="toast-title" class="font-semibold text-gray-900">Rotasi PJLP Pendamping ditambah!</h3>
<p id="toast-message" class="text-sm text-gray-600">Berhasil! Rotasi PJLP Pendamping baru telah ditambah..</p>
</div>
<button onclick="closeToast()" class="absolute top-3 right-3 text-gray-400 hover:text-gray-600">
<span class="icon text-lg">close</span>
</button>
</div>
</div>
<div class="breadcrumbs text-sm">
<ul>
<li class="text-gray-500"><a>Rotasi PJLP</a></li>
<li><a>Pendamping</a></li>
</ul>
</div>
<!-- Header -->
<div class="grid grid-cols-1 gap-4 lg:grid-cols-2">
<div class="prose">
<h3 class="mb-2">Riwayat Rotasi PJLP Pendamping</h3>
</div>
<div class="justify-self-end lg:self-center flex flex-wrap gap-3">
<button class="btn rounded-full bg-white" onclick="modal_filter.showModal()">
<span class="icon icon-fill me-2">filter_list</span>
Filter
</button>
<button type="button" class="btn btn-primary rounded-full text-white border-0" onclick="modal_create.showModal()">
<span class="icon icon-fill me-2">add</span>
Tambah
</button>
</div>
</div>
<!-- Filter Modal -->
<dialog id="modal_filter" class="modal modal-bottom sm:modal-middle">
<div class="modal-box w-full sm:max-w-sm">
<div class="flex items-center justify-between">
<h3 class="text-lg font-bold">Filter</h3>
<button type="button" class="btn btn-sm btn-circle btn-ghost" onclick="modal_filter.close()">✕</button>
</div>
<form id="form-filter" action="#" method="get">
<fieldset class="fieldset max-w-sm">
<legend class="fieldset-legend">Kecamatan</legend>
<select id="filter-kecamatan" class="w-full">
<option value="">Pilih Kecamatan</option>
<option value="PasarRebo">Pasar Rebo</option>
<option value="Ciracas">Ciracas</option>
<option value="Matraman">Matraman</option>
<option value="Jatinegara">Jatinegara</option>
<option value="Cakung">Cakung</option>
</select>
</fieldset>
<fieldset class="fieldset max-w-sm">
<legend class="fieldset-legend">Kelurahan</legend>
<select id="filter-kelurahan" class="w-full">
<option value="">Pilih Kelurahan</option>
<option value="Sukamaju">Sukamaju</option>
<option value="Sukadamai">Sukadamai</option>
<option value="Mekarsari">Mekarsari</option>
<option value="HarapanJaya">Harapan Jaya</option>
<option value="Cibinong">Cibinong</option>
</select>
</fieldset>
<fieldset class="fieldset max-w-sm">
<legend class="fieldset-legend">RW</legend>
<select id="filter-rw" class="w-full">
<option value="">Pilih RW</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
</select>
</fieldset>
<div class="modal-action">
<button type="button" class="btn" onclick="clearFilter()">Bersihkan</button>
<button type="submit" class="btn btn-neutral">Terapkan Filter</button>
</div>
</form>
</div>
</dialog>
<!-- Create Modal -->
<dialog id="modal_create" class="modal modal-bottom sm:modal-middle">
<div class="modal-box w-full sm:max-w-lg">
<div class="flex items-start justify-between">
<div>
<h3 class="text-lg font-semibold">Tambah</h3>
<p class="text-sm text-gray-500">Lengkapi informasi rotasi 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-rotasi" class="space-y-3 mt-6">
<fieldset class="fieldset">
<legend class="fieldset-legend">Nama Pendamping <span class="text-red-500">*</span></legend>
<div class="flex gap-2">
<input id="create-nama-pendamping" name="nama_pendamping" type="text" class="input w-full" placeholder="Masukkan nama pendamping" required />
<button type="button" id="btn-cari-data" class="btn btn-primary text-white rounded-full whitespace-nowrap">
Cari Data
</button>
</div>
</fieldset>
<div class="space-y-3">
<h4 class="text-sm font-semibold text-gray-900">Lokasi Baru</h4>
<div class="grid grid-cols-2 gap-3">
<fieldset class="fieldset">
<legend class="fieldset-legend">RW <span class="text-red-500">*</span></legend>
<select id="create-rw" name="rw" class="select w-full" required>
<option value="">Pilih RW</option>
<option value="01">RW 01</option>
<option value="02">RW 02</option>
<option value="03">RW 03</option>
<option value="04">RW 04</option>
<option value="05">RW 05</option>
<option value="06">RW 06</option>
<option value="07">RW 07</option>
<option value="08">RW 08</option>
<option value="09">RW 09</option>
<option value="10">RW 10</option>
</select>
</fieldset>
<fieldset class="fieldset">
<legend class="fieldset-legend">Kecamatan</legend>
<select id="create-kecamatan" name="kecamatan" class="select w-full" disabled>
<option value="">Kecamatan Pasar Rebo</option>
</select>
</fieldset>
</div>
<div class="grid grid-cols-2 gap-3">
<fieldset class="fieldset">
<legend class="fieldset-legend">Kelurahan</legend>
<select id="create-kelurahan" name="kelurahan" class="select w-full" disabled>
<option value="">Kelurahan Cijantung</option>
</select>
</fieldset>
<fieldset class="fieldset">
<legend class="fieldset-legend">Wilayah</legend>
<select id="create-wilayah" name="wilayah" class="select w-full" disabled>
<option value="">Jakarta Timur</option>
</select>
</fieldset>
</div>
</div>
<div class="grid grid-cols-2 gap-3">
<fieldset class="fieldset">
<legend class="fieldset-legend">Tanggal SK</legend>
<input id="create-tanggal-sk" name="tanggal_sk" type="date" class="input w-full" />
</fieldset>
<fieldset class="fieldset">
<legend class="fieldset-legend">No SK</legend>
<input id="create-no-sk" name="no_sk" type="text" class="input w-full" placeholder="Masukkan No SK" />
</fieldset>
</div>
<fieldset class="fieldset">
<legend class="fieldset-legend">Upload SK</legend>
<input type="file" id="create-file-sk" name="file_sk" class="file-input w-full" accept=".pdf,.jpg,.jpeg,.png" />
</fieldset>
<div class="modal-action">
<button type="button" class="btn rounded-full" onclick="modal_create.close()">
<span class="icon me-1">cancel</span>
Tutup
</button>
<button id="BtnSimpanRotasi" 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-lg">
<div class="flex items-start justify-between">
<div>
<h3 class="text-lg font-semibold">Edit</h3>
<p class="text-sm text-gray-500">Perbarui informasi rotasi sebelum menyimpan.</p>
</div>
<form method="dialog">
<button type="submit" class="btn btn-sm btn-circle btn-ghost">✕</button>
</form>
</div>
<form id="form-edit-rotasi" class="space-y-3 mt-6">
<input type="hidden" id="edit-id" name="id" />
<fieldset class="fieldset">
<legend class="fieldset-legend">Nama Pendamping <span class="text-red-500">*</span></legend>
<input id="edit-nama-pendamping" name="nama_pendamping" type="text" class="input w-full" placeholder="Masukkan nama pendamping" required />
</fieldset>
<div class="space-y-3">
<h4 class="text-sm font-semibold text-gray-900">Lokasi Baru</h4>
<div class="grid grid-cols-2 gap-3">
<fieldset class="fieldset">
<legend class="fieldset-legend">RW <span class="text-red-500">*</span></legend>
<select id="edit-rw" name="rw" class="select w-full" required>
<option value="">Pilih RW</option>
<option value="01">RW 01</option>
<option value="02">RW 02</option>
<option value="03">RW 03</option>
<option value="04">RW 04</option>
<option value="05">RW 05</option>
<option value="06">RW 06</option>
<option value="07">RW 07</option>
<option value="08">RW 08</option>
<option value="09">RW 09</option>
<option value="10">RW 10</option>
</select>
</fieldset>
<fieldset class="fieldset">
<legend class="fieldset-legend">Kecamatan</legend>
<select id="edit-kecamatan" name="kecamatan" class="select w-full" disabled>
<option value="">Kecamatan Pasar Rebo</option>
</select>
</fieldset>
</div>
<div class="grid grid-cols-2 gap-3">
<fieldset class="fieldset">
<legend class="fieldset-legend">Kelurahan</legend>
<select id="edit-kelurahan" name="kelurahan" class="select w-full" disabled>
<option value="">Kelurahan Cijantung</option>
</select>
</fieldset>
<fieldset class="fieldset">
<legend class="fieldset-legend">Wilayah</legend>
<select id="edit-wilayah" name="wilayah" class="select w-full" disabled>
<option value="">Jakarta Timur</option>
</select>
</fieldset>
</div>
</div>
<div class="grid grid-cols-2 gap-3">
<fieldset class="fieldset">
<legend class="fieldset-legend">Tanggal SK</legend>
<input id="edit-tanggal-sk" name="tanggal_sk" type="date" class="input w-full" />
</fieldset>
<fieldset class="fieldset">
<legend class="fieldset-legend">No SK</legend>
<input id="edit-no-sk" name="no_sk" type="text" class="input w-full" placeholder="Masukkan No SK" />
</fieldset>
</div>
<fieldset class="fieldset">
<legend class="fieldset-legend">Upload SK</legend>
<input type="file" id="edit-file-sk" name="file_sk" class="file-input w-full" accept=".pdf,.jpg,.jpeg,.png" />
</fieldset>
<div class="modal-action">
<button type="button" class="btn rounded-full" onclick="modal_edit.close()">
<span class="icon me-1">cancel</span>
Tutup
</button>
<button id="BtnUpdateRotasi" 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">
<div class="card-body p-0">
<table class="table-zebra table" id="example">
<thead>
<tr>
<th class="w-[5%]">No</th>
<th class="w-[30%]">Nama Pendamping</th>
<th class="w-[10%]">RW</th>
<th class="w-[40%]">Kota</th>
<th class="w-[15%]">Action</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
<script src="/lib/jquery/jquery-3.7.1.js"></script>
<script src="/lib/datatables/dataTables.js"></script>
<script src="/plugins/datatables/dataTables.tailwindcss.js"></script>
<script src="/lib/sweetalert2/sweetalert2-11.26.4.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 type="text/javascript">
var table;
$(document).ready(function () {
new TomSelect("#filter-kecamatan", {
closeAfterSelect: true,
maxItems: 1,
placeholder: "Pilih Kecamatan",
});
new TomSelect("#filter-kelurahan", {
closeAfterSelect: true,
maxItems: 1,
placeholder: "Pilih Kelurahan",
});
new TomSelect("#filter-rw", {
closeAfterSelect: true,
maxItems: 1,
placeholder: "Pilih RW",
});
// Initialize DataTable
table = new DataTable('#example', {
ajax: '@Url.Action("Table", "RotasiPJLPPendamping")',
scrollX: true,
autoWidth: true,
initComplete: function () {
$('div.dt-scroll-body thead').css('visibility', 'collapse');
},
columns: [
{ data: null, render: (d, t, r, m) => m.row + 1, orderable: false, searchable: false },
{ data: 'nama_pendamping' },
{ data: 'rw' },
{ data: 'kota' },
{
data: 'aksi',
orderable: false,
searchable: false,
},
]
});
// Toast functions
window.closeToast = function() {
$("#successToast").addClass("hidden");
}
function showSuccessToast(title, message) {
$("#toast-title").text(title);
$("#toast-message").text(message);
$("#successToast").removeClass("hidden");
setTimeout(() => { $("#successToast").addClass("hidden"); }, 4000);
}
// File upload handlers
$('#create-file-sk').on('change', function() {
const fileName = this.files[0] ? this.files[0].name : 'Pilih File';
$('#create-file-name').text(fileName);
});
$('#edit-file-sk').on('change', function() {
const fileName = this.files[0] ? this.files[0].name : 'Pilih File';
$('#edit-file-name').text(fileName);
});
// Handle Create Form Submit
$('#form-create-rotasi').on('submit', function(e) {
e.preventDefault();
showSuccessToast("Rotasi PJLP Berhasil!", "Data rotasi PJLP pendamping telah berhasil ditambahkan.");
modal_create.close();
table.ajax.reload();
});
// Handle Edit Button Click
$('#example tbody').on('click', '.btn-edit-rotasi', function () {
let row = table.row($(this).closest('tr')).data();
if (!row) return;
// Populate edit form
$('#edit-id').val(row.id);
$('#edit-nama-pendamping').val(row.nama_pendamping);
$('#edit-rw').val(row.rw);
$('#edit-tanggal-sk').val(row.tanggal_sk);
$('#edit-no-sk').val(row.no_sk);
$('#edit-file-name').text(row.file_sk_name || 'Pilih File');
modal_edit.showModal();
});
// Handle Edit Form Submit
$('#form-edit-rotasi').on('submit', function(e) {
e.preventDefault();
showSuccessToast("Rotasi PJLP Berhasil!", "Data rotasi PJLP pendamping telah berhasil diperbarui.");
modal_edit.close();
table.ajax.reload();
});
// Handle Delete
$('#example').on('click', '.btn-delete-rotasi', function () {
const rowData = table.row($(this).closest('tr')).data();
if (!rowData) {
return;
}
Swal.fire({
title: 'Hapus Data Rotasi?',
text: `Apakah Anda yakin ingin menghapus data "${rowData.nama_pendamping}"?`,
icon: 'warning',
showCancelButton: true,
confirmButtonColor: '#ef4444',
cancelButtonColor: '#6b7280',
confirmButtonText: 'Hapus',
cancelButtonText: 'Batal'
}).then((result) => {
if (result.isConfirmed) {
showSuccessToast("Rotasi PJLP Berhasil!", "Data rotasi PJLP pendamping telah berhasil dihapus.");
table.ajax.reload();
}
});
});
});
// Clear Filter Function
function clearFilter() {
document.getElementById('filter-kecamatan').tomselect.clear();
document.getElementById('filter-kelurahan').tomselect.clear();
document.getElementById('filter-rw').tomselect.clear();
modal_filter.close();
}
</script>

8
Views/Shared/Layouts/App/_Sidebar.cshtml
View File

@ -141,6 +141,14 @@
</a>
</li>
<li>
<a asp-controller="RotasiPJLPPendamping" asp-action="Index"
class="@(controller == "RotasiPJLPPendamping" ? "menu-active" : "")">
<span class="icon icon-fill">list</span>
Rotasi PJLP Pendamping
</a>
</li>
<li>
<details @(new[] { "LaporanRw", "LaporanRwSatpel", "DataVerifikasiChecklistHarian" }.Contains(controller) ? "open" : "")>
<summary>DATA VERIFIKASI</summary>