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

slicing: add edit modal, action button position swap

main-dlh
Regiaaaaaa 2025-12-08 09:47:58 +07:00
parent edef90ccf7
commit 3d17907682
2 changed files with 168 additions and 111 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
Controllers/PanduanController.cs
View File

@ -18,18 +18,21 @@ namespace BpsRwApp.Controllers
new { new {
id = 1, id = 1,
judul = "Peraturan Gubernur No. 7 Tahun 2024", judul = "Peraturan Gubernur No. 7 Tahun 2024",
deskripsi = "Peraturan Gubernur No. 7 Tahun 2024 mengatur tentang tata kelola sampah dan pengelolaan lingkungan hidup di wilayah provinsi. Panduan ini berisi langkah-langkah implementasi kebijakan secara detail untuk setiap kabupaten/kota.",
jenis = "Dokumen", jenis = "Dokumen",
dokumen = "dok1.pdf" dokumen = "dok1.pdf"
}, },
new { new {
id = 2, id = 2,
judul = "Surat Edaran DLH No. 4 Tahun 2022", judul = "Surat Edaran DLH No. 4 Tahun 2022",
deskripsi = "Surat Edaran DLH No. 4 Tahun 2022 memberikan panduan teknis bagi dinas terkait dalam pengelolaan limbah industri. Dokumen ini mencakup prosedur pelaporan, standar pengelolaan, dan rekomendasi terbaik.",
jenis = "Dokumen", jenis = "Dokumen",
dokumen = "dok2.pdf" dokumen = "dok2.pdf"
}, },
new { new {
id = 3, id = 3,
judul = "Instruksi Gubernur No. 12 Tahun 2023", judul = "Instruksi Gubernur No. 12 Tahun 2023",
deskripsi = "Instruksi Gubernur No. 12 Tahun 2023 berfokus pada penanganan bencana lingkungan. Panduan ini memberikan arahan bagi seluruh instansi pemerintah terkait tindakan cepat dan koordinasi lintas sektor.",
jenis = "Dokumen", jenis = "Dokumen",
dokumen = "dok3.pdf" dokumen = "dok3.pdf"
} }
@ -39,13 +42,14 @@ namespace BpsRwApp.Controllers
{ {
x.id, x.id,
x.judul, x.judul,
x.deskripsi,
x.jenis, x.jenis,
x.dokumen, x.dokumen,
aksi = $@" aksi = $@"
<div class='flex gap-2'> <div class='flex gap-2'>
<button data-id='{x.id}' class='btn btn-sm rounded-full bg-white btn-detail-panduan'>Detail</button> <button data-id='{x.id}' class='btn btn-sm rounded-full bg-white border-primary-500 text-primary-500 btn-edit-panduan'>Edit</button>
<button data-id='{x.id}' class='btn btn-sm rounded-full bg-white btn-edit-panduan'>Edit</button> <button data-id='{x.id}' class='btn btn-sm rounded-full bg-white border-gray-800 text-gray-800 btn-detail-panduan'>Detail</button>
<button data-id='{x.id}' class='btn btn-sm rounded-full bg-white text-red-600 border-red-400 btn-delete-panduan'>Delete</button> <button data-id='{x.id}' class='btn btn-sm rounded-full bg-white border-red-500 text-red-500 btn-delete-panduan'>Delete</button>
</div>" </div>"
}); });

269
Views/Panduan/Index.cshtml
View File

@ -2,6 +2,24 @@
ViewData["Title"] = "Panduan"; ViewData["Title"] = "Panduan";
} }
<!-- 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 class="font-semibold text-gray-900">Panduan berhasil ditambah!</h3>
<p class="text-sm text-gray-600">Berhasil! Panduan baru telah berhasil ditambahkan.</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 mb-4"> <div class="breadcrumbs text-sm mb-4">
<ul> <ul>
<li class="text-gray-500"><a>CMS</a></li> <li class="text-gray-500"><a>CMS</a></li>
@ -21,6 +39,7 @@
</button> </button>
</div> </div>
<!-- Table -->
<div class="card bg-white shadow-sm"> <div class="card bg-white shadow-sm">
<div class="card-body p-0"> <div class="card-body p-0">
<table class="table table-zebra w-full" id="example"> <table class="table table-zebra w-full" id="example">
@ -28,6 +47,7 @@
<tr> <tr>
<th>No</th> <th>No</th>
<th>Judul</th> <th>Judul</th>
<th>Deskripsi</th>
<th>Jenis</th> <th>Jenis</th>
<th>Dokumen</th> <th>Dokumen</th>
<th>Aksi</th> <th>Aksi</th>
@ -46,35 +66,27 @@
<h3 class="mb-5 text-lg font-semibold">Tambah Panduan</h3> <h3 class="mb-5 text-lg font-semibold">Tambah Panduan</h3>
<form class="space-y-5"> <form id="form_add_panduan" class="space-y-5">
<!-- Judul -->
<div> <div>
<label class="block text-sm font-medium mb-1"> <label class="block text-sm font-medium mb-1">
Judul <span class="text-red-500">*</span> Judul <span class="text-red-500">*</span>
</label> </label>
<input <input type="text" id="add_judul_panduan" class="input input-bordered w-full" placeholder="Masukkan judul" required/>
type="text"
class="input input-bordered w-full"
placeholder="Masukkan judul" />
</div> </div>
<!-- Deskripsi -->
<div> <div>
<label class="block text-sm font-medium mb-1"> <label class="block text-sm font-medium mb-1">
Deskripsi <span class="text-red-500">*</span> Deskripsi <span class="text-red-500">*</span>
</label> </label>
<textarea <textarea id="add_deskripsi_panduan" class="textarea textarea-bordered w-full h-28" placeholder="Masukkan deskripsi" required></textarea>
class="textarea textarea-bordered w-full h-28"
placeholder="Masukkan deskripsi"></textarea>
</div> </div>
<!-- Jenis Panduan -->
<div> <div>
<label class="block text-sm font-medium mb-1"> <label class="block text-sm font-medium mb-1">
Jenis Panduan <span class="text-red-500">*</span> Jenis Panduan <span class="text-red-500">*</span>
</label> </label>
<select class="select select-bordered w-full"> <select id="add_jenis_panduan" class="select select-bordered w-full" required>
<option value="">Pilih jenis panduan.</option> <option value="">Pilih jenis panduan.</option>
<option>Dokumen</option> <option>Dokumen</option>
<option>Video</option> <option>Video</option>
@ -82,53 +94,37 @@
</select> </select>
</div> </div>
<!-- Upload Dokumen -->
<div> <div>
<label class="block text-sm font-medium mb-1"> <label class="block text-sm font-medium mb-1">
Upload Dokumen <span class="text-red-500">*</span> Upload Dokumen <span class="text-red-500">*</span>
</label> </label>
<input <input type="file" id="add_dokumen_panduan" class="file-input file-input-bordered w-full" accept=".pdf,.doc,.docx"/>
type="file"
class="file-input file-input-bordered w-full"
accept=".pdf,.doc,.docx" />
<p class="text-xs text-gray-500 mt-1">Ukuran maksimal 5MB.</p> <p class="text-xs text-gray-500 mt-1">Ukuran maksimal 5MB.</p>
</div> </div>
<!-- Link Konten -->
<div> <div>
<label class="block text-sm font-medium mb-1"> <label class="block text-sm font-medium mb-1">
Link Konten Link Konten
</label> </label>
<input <input type="text" id="add_link_panduan" class="input input-bordered w-full" placeholder="http://"/>
type="text"
class="input input-bordered w-full"
placeholder="http://" />
</div> </div>
<!-- Action Button -->
<div class="modal-action flex justify-end gap-3"> <div class="modal-action flex justify-end gap-3">
<button onclick="modal_add_panduan.close()" type="button" class="btn btn-outline btn-sm rounded-full"> <button type="button" onclick="modal_add_panduan.close()" class="btn btn-outline btn-sm rounded-full">
<span class="icon me-1">cancel</span> <span class="icon me-1">cancel</span> Tutup
Tutup
</button> </button>
<button id="btnSimpanPanduan" type="submit" class="btn btn-primary btn-sm rounded-full text-white"> <button type="submit" class="btn btn-primary btn-sm rounded-full text-white">
<span class="icon me-1">save</span> <span class="icon me-1">save</span> Simpan
Simpan
</button> </button>
</div> </div>
</form> </form>
</div> </div>
</dialog> </dialog>
<!-- Modal Detail Panduan --> <!-- Modal Detail Panduan -->
<dialog id="modal_detail_panduan" class="modal"> <dialog id="modal_detail_panduan" class="modal">
<div class="modal-box relative w-full max-w-md rounded-2xl shadow-lg"> <div class="modal-box relative w-full max-w-md rounded-2xl shadow-lg">
<label onclick="modal_detail_panduan.close()" <label onclick="modal_detail_panduan.close()" class="btn btn-sm btn-circle btn-ghost absolute top-3 right-3">✕</label>
class="btn btn-sm btn-circle btn-ghost absolute top-3 right-3">✕
</label>
<h3 class="mb-5 text-lg font-semibold text-gray-800">Detail Panduan</h3> <h3 class="mb-5 text-lg font-semibold text-gray-800">Detail Panduan</h3>
<div class="space-y-4"> <div class="space-y-4">
@ -136,54 +132,88 @@
<label class="text-sm text-gray-500">Judul</label> <label class="text-sm text-gray-500">Judul</label>
<p id="detail-judul" class="text-gray-900"></p> <p id="detail-judul" class="text-gray-900"></p>
</div> </div>
<div>
<label class="text-sm text-gray-500">Deskripsi</label>
<p id="detail-deskripsi" class="text-gray-900"></p>
</div>
<div> <div>
<label class="text-sm text-gray-500">Jenis</label> <label class="text-sm text-gray-500">Jenis</label>
<p id="detail-jenis" class="text-gray-900"></p> <p id="detail-jenis" class="text-gray-900"></p>
</div> </div>
<div> <div>
<label class="text-sm text-gray-500">Dokumen</label> <label class="text-sm text-gray-500">Dokumen</label>
<div class="mt-1"> <div class="mt-1">
<button id="detail-dokumen" class="btn btn-sm btn-outline btn-primary"> <button id="detail-dokumen" class="btn btn-sm btn-outline btn-primary">
<span class="icon icon-fill me-1">description</span> <span class="icon icon-fill me-1">description</span> Dokumen
Dokumen
</button> </button>
</div> </div>
</div> </div>
</div> </div>
<div class="modal-action flex justify-end gap-3"> <div class="modal-action flex justify-end gap-3">
<button onclick="modal_detail_panduan.close()" type="button" class="btn btn-outline btn-sm rounded-full"> <button onclick="modal_detail_panduan.close()" type="button" class="btn btn-outline btn-sm rounded-full">
<span class="icon me-1">cancel</span> <span class="icon me-1">cancel</span> Tutup
Tutup
</button> </button>
<button id="btnEditFromDetail" type="button" class="btn btn-primary btn-sm text-white rounded-full"> <button id="btnEditFromDetail" type="button" class="btn btn-primary btn-sm text-white rounded-full">
<span class="icon me-1">edit</span> <span class="icon me-1">edit</span> Edit
Edit
</button> </button>
</div> </div>
</div> </div>
</dialog> </dialog>
<!-- Toast Notification --> <!-- Modal Edit Panduan -->
<div id="successToast" class="fixed top-20 right-6 z-[9999] hidden"> <dialog id="modal_edit_panduan" class="modal modal-bottom sm:modal-middle">
<div class="alert bg-green-50 border border-green-200 shadow-lg flex items-start gap-3 pr-12 min-w-[320px]"> <div class="modal-box w-full sm:max-w-lg">
<div class="flex-shrink-0"> <button class="btn btn-sm btn-circle absolute right-2 top-2" onclick="modal_edit_panduan.close()">✕</button>
<div class="w-5 h-5 rounded-full bg-green-500 flex items-center justify-center"> <h3 class="text-lg font-bold mb-4">Edit Panduan</h3>
<span class="icon text-white text-xs">check</span>
<form id="form_edit_panduan" enctype="multipart/form-data">
<input type="hidden" id="edit_id_panduan" name="Id">
<div class="space-y-4">
<fieldset class="fieldset">
<legend class="fieldset-legend">Judul <span class="text-red-500">*</span></legend>
<input type="text" id="edit_judul_panduan" name="Judul" class="input input-bordered w-full" placeholder="Masukkan judul" required/>
</fieldset>
<fieldset class="fieldset">
<legend class="fieldset-legend">Deskripsi <span class="text-red-500">*</span></legend>
<textarea id="edit_deskripsi_panduan" name="Deskripsi" class="textarea textarea-bordered w-full h-32" placeholder="Masukkan deskripsi" required></textarea>
</fieldset>
<fieldset class="fieldset">
<legend class="fieldset-legend">Jenis Panduan <span class="text-red-500">*</span></legend>
<select id="edit_jenis_panduan" name="JenisPanduan" class="select select-bordered w-full" required>
<option value="">Pilih jenis panduan.</option>
<option value="Dokumen">Dokumen</option>
<option value="Video">Video</option>
<option value="Lainnya">Lainnya</option>
</select>
</fieldset>
<fieldset class="fieldset">
<legend class="fieldset-legend">Upload Dokumen (opsional)</legend>
<input type="file" id="edit_dokumen_panduan" name="Dokumen" class="file-input file-input-bordered w-full" accept=".pdf,.doc,.docx,.jpg,.jpeg,.png,.mp4"/>
<p class="text-xs text-gray-500 mt-1">Biarkan kosong jika tidak ingin mengganti file.</p>
</fieldset>
<fieldset class="fieldset">
<legend class="fieldset-legend">Link Konten</legend>
<input type="url" id="edit_link_panduan" name="LinkKonten" class="input input-bordered w-full" placeholder="http://"/>
</fieldset>
</div> </div>
</div>
<div class="flex-1"> <div class="modal-action mt-6">
<h3 class="font-semibold text-gray-900">Panduan berhasil ditambah!</h3> <button type="button" class="btn rounded-full" onclick="modal_edit_panduan.close()">Tutup</button>
<p class="text-sm text-gray-600">Berhasil! Panduan baru telah berhasil ditambahkan.</p> <button type="submit" class="btn bg-green-700 hover:bg-green-800 text-white rounded-full">
</div> <span class="icon">save</span>
<button onclick="closeToast()" class="absolute top-3 right-3 text-gray-400 hover:text-gray-600"> Simpan
<span class="icon text-lg">close</span> </button>
</button> </div>
</form>
</div> </div>
</div> </dialog>
<script src="/lib/jquery/jquery-3.7.1.js"></script> <script src="/lib/jquery/jquery-3.7.1.js"></script>
<script src="/lib/datatables/dataTables.js"></script> <script src="/lib/datatables/dataTables.js"></script>
@ -196,71 +226,94 @@ $(document).ready(function () {
ajax: '@Url.Action("Table", "Panduan")', ajax: '@Url.Action("Table", "Panduan")',
scrollX: true, scrollX: true,
autoWidth: true, autoWidth: true,
initComplete: function () {
$('div.dt-scroll-body thead').css('visibility', 'collapse');
},
columns: [ columns: [
{ data: null, render: (d, t, r, m) => m.row + 1, orderable: false }, { data: null, render: (d,t,r,m) => m.row+1, orderable:false },
{ data: 'judul' }, { data: 'judul' },
{ data: 'jenis' }, {
data: 'deskripsi',
{ render: function(d) {
data: 'dokumen', return d.length > 50 ? d.substr(0, 50) + "..." : d;
render: function () {
return `
<div class="flex items-center gap-1 text-green-600 cursor-pointer btn-detail-doc">
<span class="icon icon-fill">description</span>
Dokumen
</div>`;
} }
}, },
{ data: 'jenis' },
{ { data: 'dokumen', render: function(){
data: 'aksi', return `<div class="flex items-center gap-1 text-green-600 cursor-pointer btn-detail-doc">
orderable: false, <span class="icon icon-fill">description</span> Dokumen</div>`;
searchable: false, }},
render: data => data { data:'aksi', orderable:false, searchable:false, render:data=>data }
}
] ]
}); });
// Handle form submit function showSuccessToast(title="Panduan berhasil ditambah!", message="Berhasil! Panduan baru telah berhasil ditambahkan.") {
$('#btnSimpanPanduan').on('click', function (e) { $("#successToast .font-semibold").text(title);
e.preventDefault(); $("#successToast p").text(message);
$("#successToast").removeClass("hidden");
modal_add_panduan.close(); setTimeout(()=>{ $("#successToast").addClass("hidden"); }, 4000);
}
// Add Panduan
$("#form_add_panduan").on("submit", function(e){
e.preventDefault();
modal_add_panduan.close();
showSuccessToast(); showSuccessToast();
table.ajax.reload();
}); });
// Detail modal // Edit Panduan
$(document).on('click', '.btn-detail-panduan', function () { $(document).on("click", ".btn-edit-panduan", function(){
const row = table.row($(this).parents('tr')).data(); const row = table.row($(this).parents("tr")).data();
$("#edit_id_panduan").val(row.id);
$("#edit_judul_panduan").val(row.judul);
$("#edit_deskripsi_panduan").val(row.deskripsi ?? "");
$("#edit_jenis_panduan").val(row.jenis);
$("#edit_link_panduan").val(row.link ?? "");
modal_edit_panduan.showModal();
});
$("#form_edit_panduan").on("submit", function(e){
e.preventDefault();
modal_edit_panduan.close();
showSuccessToast("Panduan berhasil diperbarui!","Data panduan telah berhasil diperbarui.");
table.ajax.reload();
});
// Detail Panduan
$(document).on("click", ".btn-detail-panduan", function () {
const row = table.row($(this).parents('tr')).data();
$('#detail-judul').text(row.judul); $('#detail-judul').text(row.judul);
$('#detail-deskripsi').text(row.deskripsi);
$('#detail-jenis').text(row.jenis); $('#detail-jenis').text(row.jenis);
$('#detail-dokumen') $('#detail-dokumen').off("click").on("click", function(){
.off("click") window.open("/uploads/"+row.dokumen,"_blank");
.on("click", function () { });
window.open("/uploads/" + row.dokumen, "_blank");
}); // Tombol Edit From Detail
$("#btnEditFromDetail").off("click").on("click", function(){
modal_detail_panduan.close();
$("#edit_id_panduan").val(row.id);
$("#edit_judul_panduan").val(row.judul);
$("#edit_deskripsi_panduan").val(row.deskripsi ?? "");
$("#edit_jenis_panduan").val(row.jenis);
$("#edit_link_panduan").val(row.link ?? "");
modal_edit_panduan.showModal();
});
modal_detail_panduan.showModal(); modal_detail_panduan.showModal();
}); });
// Edit from Detail
$("#btnEditFromDetail").on("click", function(){
const row = table.row($(this).closest('tr')).data();
modal_detail_panduan.close();
$("#edit_id_panduan").val(row.id);
$("#edit_judul_panduan").val(row.judul);
$("#edit_deskripsi_panduan").val(row.deskripsi ?? "");
$("#edit_jenis_panduan").val(row.jenis);
$("#edit_link_panduan").val(row.link ?? "");
modal_edit_panduan.showModal();
});
}); });
</script>
// Toast functions
function showSuccessToast() {
const toast = document.getElementById('successToast');
toast.classList.remove('hidden');
setTimeout(() => {
closeToast();
}, 5000);
}
function closeToast() {
const toast = document.getElementById('successToast');
toast.classList.add('hidden');
}
</script>