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 {
id = 1,
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",
dokumen = "dok1.pdf"
},
new {
id = 2,
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",
dokumen = "dok2.pdf"
},
new {
id = 3,
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",
dokumen = "dok3.pdf"
}
@ -39,13 +42,14 @@ namespace BpsRwApp.Controllers
{
x.id,
x.judul,
x.deskripsi,
x.jenis,
x.dokumen,
aksi = $@"
<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 btn-edit-panduan'>Edit</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-primary-500 text-primary-500 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 border-red-500 text-red-500 btn-delete-panduan'>Delete</button>
</div>"
});

251
Views/Panduan/Index.cshtml
View File

@ -2,6 +2,24 @@
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">
<ul>
<li class="text-gray-500"><a>CMS</a></li>
@ -21,6 +39,7 @@
</button>
</div>
<!-- Table -->
<div class="card bg-white shadow-sm">
<div class="card-body p-0">
<table class="table table-zebra w-full" id="example">
@ -28,6 +47,7 @@
<tr>
<th>No</th>
<th>Judul</th>
<th>Deskripsi</th>
<th>Jenis</th>
<th>Dokumen</th>
<th>Aksi</th>
@ -46,35 +66,27 @@
<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>
<label class="block text-sm font-medium mb-1">
Judul <span class="text-red-500">*</span>
</label>
<input
type="text"
class="input input-bordered w-full"
placeholder="Masukkan judul" />
<input type="text" id="add_judul_panduan" class="input input-bordered w-full" placeholder="Masukkan judul" required/>
</div>
<!-- Deskripsi -->
<div>
<label class="block text-sm font-medium mb-1">
Deskripsi <span class="text-red-500">*</span>
</label>
<textarea
class="textarea textarea-bordered w-full h-28"
placeholder="Masukkan deskripsi"></textarea>
<textarea id="add_deskripsi_panduan" class="textarea textarea-bordered w-full h-28" placeholder="Masukkan deskripsi" required></textarea>
</div>
<!-- Jenis Panduan -->
<div>
<label class="block text-sm font-medium mb-1">
Jenis Panduan <span class="text-red-500">*</span>
</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>Dokumen</option>
<option>Video</option>
@ -82,53 +94,37 @@
</select>
</div>
<!-- Upload Dokumen -->
<div>
<label class="block text-sm font-medium mb-1">
Upload Dokumen <span class="text-red-500">*</span>
</label>
<input
type="file"
class="file-input file-input-bordered w-full"
accept=".pdf,.doc,.docx" />
<input type="file" id="add_dokumen_panduan" 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>
</div>
<!-- Link Konten -->
<div>
<label class="block text-sm font-medium mb-1">
Link Konten
</label>
<input
type="text"
class="input input-bordered w-full"
placeholder="http://" />
<input type="text" id="add_link_panduan" class="input input-bordered w-full" placeholder="http://"/>
</div>
<!-- Action Button -->
<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">
<span class="icon me-1">cancel</span>
Tutup
<button type="button" onclick="modal_add_panduan.close()" class="btn btn-outline btn-sm rounded-full">
<span class="icon me-1">cancel</span> Tutup
</button>
<button id="btnSimpanPanduan" type="submit" class="btn btn-primary btn-sm rounded-full text-white">
<span class="icon me-1">save</span>
Simpan
<button type="submit" class="btn btn-primary btn-sm rounded-full text-white">
<span class="icon me-1">save</span> Simpan
</button>
</div>
</form>
</div>
</dialog>
<!-- Modal Detail Panduan -->
<dialog id="modal_detail_panduan" class="modal">
<div class="modal-box relative w-full max-w-md rounded-2xl shadow-lg">
<label onclick="modal_detail_panduan.close()"
class="btn btn-sm btn-circle btn-ghost absolute top-3 right-3">✕
</label>
<label onclick="modal_detail_panduan.close()" 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>
<div class="space-y-4">
@ -136,54 +132,88 @@
<label class="text-sm text-gray-500">Judul</label>
<p id="detail-judul" class="text-gray-900"></p>
</div>
<div>
<label class="text-sm text-gray-500">Deskripsi</label>
<p id="detail-deskripsi" class="text-gray-900"></p>
</div>
<div>
<label class="text-sm text-gray-500">Jenis</label>
<p id="detail-jenis" class="text-gray-900"></p>
</div>
<div>
<label class="text-sm text-gray-500">Dokumen</label>
<div class="mt-1">
<button id="detail-dokumen" class="btn btn-sm btn-outline btn-primary">
<span class="icon icon-fill me-1">description</span>
Dokumen
<span class="icon icon-fill me-1">description</span> Dokumen
</button>
</div>
</div>
</div>
<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">
<span class="icon me-1">cancel</span>
Tutup
<span class="icon me-1">cancel</span> Tutup
</button>
<button id="btnEditFromDetail" type="button" class="btn btn-primary btn-sm text-white rounded-full">
<span class="icon me-1">edit</span>
Edit
<span class="icon me-1">edit</span> Edit
</button>
</div>
</div>
</dialog>
<!-- 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>
<!-- Modal Edit Panduan -->
<dialog id="modal_edit_panduan" class="modal modal-bottom sm:modal-middle">
<div class="modal-box w-full sm:max-w-lg">
<button class="btn btn-sm btn-circle absolute right-2 top-2" onclick="modal_edit_panduan.close()">✕</button>
<h3 class="text-lg font-bold mb-4">Edit Panduan</h3>
<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 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>
<div class="modal-action mt-6">
<button type="button" class="btn rounded-full" onclick="modal_edit_panduan.close()">Tutup</button>
<button type="submit" class="btn bg-green-700 hover:bg-green-800 text-white rounded-full">
<span class="icon">save</span>
Simpan
</button>
</div>
</form>
</div>
</dialog>
<script src="/lib/jquery/jquery-3.7.1.js"></script>
<script src="/lib/datatables/dataTables.js"></script>
@ -196,71 +226,94 @@ $(document).ready(function () {
ajax: '@Url.Action("Table", "Panduan")',
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 },
{ data: 'judul' },
{ data: 'jenis' },
{
data: 'dokumen',
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: 'deskripsi',
render: function(d) {
return d.length > 50 ? d.substr(0, 50) + "..." : d;
}
},
{
data: 'aksi',
orderable: false,
searchable: false,
render: data => data
}
{ data: 'jenis' },
{ data: 'dokumen', 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:'aksi', orderable:false, searchable:false, render:data=>data }
]
});
// Handle form submit
$('#btnSimpanPanduan').on('click', function (e) {
function showSuccessToast(title="Panduan berhasil ditambah!", message="Berhasil! Panduan baru telah berhasil ditambahkan.") {
$("#successToast .font-semibold").text(title);
$("#successToast p").text(message);
$("#successToast").removeClass("hidden");
setTimeout(()=>{ $("#successToast").addClass("hidden"); }, 4000);
}
// Add Panduan
$("#form_add_panduan").on("submit", function(e){
e.preventDefault();
modal_add_panduan.close();
showSuccessToast();
table.ajax.reload();
});
// Detail modal
$(document).on('click', '.btn-detail-panduan', function () {
const row = table.row($(this).parents('tr')).data();
// Edit Panduan
$(document).on("click", ".btn-edit-panduan", function(){
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-deskripsi').text(row.deskripsi);
$('#detail-jenis').text(row.jenis);
$('#detail-dokumen')
.off("click")
.on("click", function () {
$('#detail-dokumen').off("click").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();
});
// 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();
});
// 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>