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

feat: add edit & delete modal, alert success

main-dlh
Regiaaaaaa 2025-12-08 11:09:47 +07:00
parent 7ab0f7142c
commit 63736bd235
2 changed files with 186 additions and 119 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
Controllers/RegulasiController.cs
View File

@ -55,9 +55,9 @@ namespace BpsRwApp.Controllers
x.dokumen,
aksi = $@"
<div class='flex gap-2'>
<button data-id='{x.id}' class='btn btn-sm rounded-full bg-white btn-detail-regulasi'>Detail</button>
<button data-id='{x.id}' class='btn btn-sm rounded-full bg-white btn-edit-regulasi'>Edit</button>
<button data-id='{x.id}' class='btn btn-sm rounded-full bg-white text-red-600 border-red-400 btn-delete-regulasi'>Delete</button>
<button data-id='{x.id}' class='btn btn-sm rounded-full bg-white border-primary-500 text-primary-500 btn-edit-regulasi'>Edit</button>
<button data-id='{x.id}' class='btn btn-sm rounded-full bg-white border-gray-800 text-gray-800 btn-detail-regulasi'>Detail</button>
<button data-id='{x.id}' class='btn btn-sm rounded-full bg-white border-red-500 text-red-500 btn-delete-regulasi'>Delete</button>
</div>"
});

299
Views/Regulasi/Index.cshtml
View File

@ -2,6 +2,24 @@
ViewData["Title"] = "Regulasi";
}
<!-- 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">Regulasi berhasil ditambah!</h3>
<p id="toast-message" class="text-sm text-gray-600">Berhasil! Regulasi 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>
@ -38,172 +56,180 @@
</div>
</div>
<!--Modal Add Regulasi-->
<!-- Modal Add Regulasi -->
<dialog id="modal_add_regulasi" class="modal">
<div class="modal-box relative w-full max-w-md rounded-2xl shadow-lg">
<label onclick="modal_add_regulasi.close()" class="btn btn-sm btn-circle btn-ghost absolute top-3 right-3">
✕
</label>
<label onclick="modal_add_regulasi.close()" class="btn btn-sm btn-circle btn-ghost absolute top-3 right-3">✕</label>
<!-- Header -->
<h3 class="mb-5 text-lg font-semibold text-gray-800">Tambah Regulasi</h3>
<form method="post" action="" class="gap-y-6">
<!-- Judul -->
<form id="form_add_regulasi" class="gap-y-6">
<fieldset class="fieldset">
<legend class="fieldset-legend">
Judul <span class="text-red-500">*</span>
</legend>
<input type="text" class="input w-full" placeholder="Masukkan judul" />
<legend class="fieldset-legend">Judul <span class="text-red-500">*</span></legend>
<input type="text" id="add_judul" class="input w-full" placeholder="Masukkan judul" required/>
</fieldset>
<!-- Sub Judul -->
<fieldset class="fieldset">
<legend class="fieldset-legend">
Sub Judul <span class="text-red-500">*</span>
</legend>
<textarea class="textarea h-24 w-full" placeholder="Masukkan subjudul"></textarea>
<legend class="fieldset-legend">Sub Judul <span class="text-red-500">*</span></legend>
<textarea id="add_subjudul" class="textarea h-24 w-full" placeholder="Masukkan subjudul" required></textarea>
</fieldset>
<!-- Deskripsi -->
<fieldset class="fieldset">
<legend class="fieldset-legend">
Deskripsi <span class="text-red-500">*</span>
</legend>
<textarea class="textarea h-32 w-full" placeholder="Masukkan deskripsi regulasi"></textarea>
<legend class="fieldset-legend">Deskripsi <span class="text-red-500">*</span></legend>
<textarea id="add_deskripsi" class="textarea h-32 w-full" placeholder="Masukkan deskripsi regulasi" required></textarea>
</fieldset>
<!-- Tanggal Penetapan & Status -->
<div class="grid grid-cols-2 gap-4">
<fieldset class="fieldset">
<legend class="fieldset-legend">
Tanggal Penetapan <span class="text-red-500">*</span>
</legend>
<input type="date" class="input w-full" placeholder="DD/MM/YYYY" />
<legend class="fieldset-legend">Tanggal Penetapan <span class="text-red-500">*</span></legend>
<input type="date" id="add_tanggal" class="input w-full" required/>
</fieldset>
<fieldset class="fieldset">
<legend class="fieldset-legend">
Status <span class="text-red-500">*</span>
</legend>
<select class="select w-full">
<legend class="fieldset-legend">Status <span class="text-red-500">*</span></legend>
<select id="add_status" class="select w-full" required>
<option value="">Pilih status</option>
<option value="Aktif">Aktif</option>
<option value="Tidak Aktif">Tidak Aktif</option>
<option value="Berlaku">Berlaku</option>
<option value="Tidak Berlaku">Tidak Berlaku</option>
</select>
</fieldset>
</div>
<!-- Upload Dokumen -->
<fieldset class="fieldset">
<legend class="fieldset-legend">
Upload Dokumen <span class="text-red-500">*</span>
</legend>
<input type="file" class="file-input w-full" accept=".pdf,.doc,.docx" />
<legend class="fieldset-legend">Upload Dokumen <span class="text-red-500">*</span></legend>
<input type="file" id="add_dokumen" class="file-input w-full" accept=".pdf,.doc,.docx" required/>
<p class="text-xs text-gray-500 mt-1">Ukuran maksimal 5MB</p>
</fieldset>
<!-- Action Button -->
<div class="modal-action flex justify-end gap-3">
<button onclick="modal_add_regulasi.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="btnSimpanRegulasi" 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 Regulasi-->
<!-- Modal Edit Regulasi -->
<dialog id="modal_edit_regulasi" class="modal">
<div class="modal-box relative w-full max-w-md rounded-2xl shadow-lg">
<label onclick="modal_edit_regulasi.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">Edit Regulasi</h3>
<form id="form_edit_regulasi" class="gap-y-6">
<input type="hidden" id="edit_id">
<fieldset class="fieldset">
<legend class="fieldset-legend">Judul <span class="text-red-500">*</span></legend>
<input type="text" id="edit_judul" class="input w-full" placeholder="Masukkan judul" required/>
</fieldset>
<fieldset class="fieldset">
<legend class="fieldset-legend">Sub Judul <span class="text-red-500">*</span></legend>
<textarea id="edit_subjudul" class="textarea h-24 w-full" placeholder="Masukkan subjudul" required></textarea>
</fieldset>
<fieldset class="fieldset">
<legend class="fieldset-legend">Deskripsi <span class="text-red-500">*</span></legend>
<textarea id="edit_deskripsi" class="textarea h-32 w-full" placeholder="Masukkan deskripsi regulasi" required></textarea>
</fieldset>
<div class="grid grid-cols-2 gap-4">
<fieldset class="fieldset">
<legend class="fieldset-legend">Tanggal Penetapan <span class="text-red-500">*</span></legend>
<input type="date" id="edit_tanggal" class="input w-full" required/>
</fieldset>
<fieldset class="fieldset">
<legend class="fieldset-legend">Status <span class="text-red-500">*</span></legend>
<select id="edit_status" class="select w-full" required>
<option value="">Pilih status</option>
<option value="Berlaku">Berlaku</option>
<option value="Tidak Berlaku">Tidak Berlaku</option>
</select>
</fieldset>
</div>
<fieldset class="fieldset">
<legend class="fieldset-legend">Upload Dokumen (opsional)</legend>
<input type="file" id="edit_dokumen" class="file-input w-full" accept=".pdf,.doc,.docx"/>
<p class="text-xs text-gray-500 mt-1">Biarkan kosong jika tidak ingin mengganti file</p>
</fieldset>
<div class="modal-action flex justify-end gap-3">
<button onclick="modal_edit_regulasi.close()" type="button" class="btn btn-outline btn-sm rounded-full">
<span class="icon me-1">cancel</span> Tutup
</button>
<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 Regulasi -->
<dialog id="modal_detail_regulasi" class="modal">
<div class="modal-box relative w-full max-w-md rounded-2xl shadow-lg">
<label onclick="modal_detail_regulasi.close()" class="btn btn-sm btn-circle btn-ghost absolute top-3 right-3">
✕
</label>
<label onclick="modal_detail_regulasi.close()" class="btn btn-sm btn-circle btn-ghost absolute top-3 right-3">✕</label>
<!-- Header -->
<h3 class="mb-5 text-lg font-semibold text-gray-800">Detail Regulasi</h3>
<div class="space-y-4">
<!-- Judul -->
<div>
<label class="text-sm text-gray-500">Judul</label>
<p id="detail-judul" class="text-gray-900"></p>
</div>
<!-- Sub Judul -->
<div>
<label class="text-sm text-gray-500">Sub Judul</label>
<p id="detail-subjudul" class="text-gray-900"></p>
</div>
<!-- Deskripsi -->
<div>
<label class="text-sm text-gray-500">Deskripsi</label>
<p id="detail-deskripsi" class="text-gray-900"></p>
</div>
<!-- Ditetapkan -->
<div>
<label class="text-sm text-gray-500">Ditetapkan</label>
<p id="detail-tanggal" class="text-gray-900"></p>
</div>
<!-- Status -->
<div>
<label class="text-sm text-gray-500">Status</label>
<p id="detail-status" class="text-gray-900"></p>
</div>
<!-- Dokumen -->
<div>
<label class="text-sm text-gray-500">Dokumen</label>
<div class="mt-1">
<button class="btn btn-sm btn-outline btn-primary">
<span class="icon icon-fill me-1">description</span>
Dokumen
<button id="detail-dokumen" class="btn btn-sm btn-outline btn-primary">
<span class="icon icon-fill me-1">description</span> Dokumen
</button>
</div>
</div>
</div>
<!-- Action Button -->
<div class="modal-action flex justify-end gap-3">
<button onclick="modal_detail_regulasi.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>
</div>
</div>
<div class="flex-1">
<h3 class="font-semibold text-gray-900">Regulasi berhasil ditambah!</h3>
<p class="text-sm text-gray-600">Berhasil! Regulasi 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>
<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="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<link href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css" rel="stylesheet">
<script type="text/javascript">
$(document).ready(function () {
@ -224,43 +250,28 @@ $(document).ready(function () {
render: function (data) {
if (!data) return '-';
const max = 80;
return data.length > max
? data.substring(0, max) + "..."
: data;
return data.length > max ? data.substring(0, max) + "..." : data;
}
},
{ data: 'tanggalDitetapkan' },
// Status Berlaku
{
data: 'statusBerlaku',
render: function () {
return `
<input type="checkbox" class="toggle toggle-success" checked />`;
return `<input type="checkbox" class="toggle toggle-success" checked />`;
}
},
// Dokumen icon
{
data: 'dokumen',
render: function () {
return `
<div class="flex items-center gap-1 text-green-600">
<span class="icon icon-fill">description</span>
Dokumen
</div>`;
return `<div class="flex items-center gap-1 text-green-600">
<span class="icon icon-fill">description</span> Dokumen</div>`;
}
},
// Aksi
{
data: 'aksi',
orderable: false,
searchable: false,
render: function (data) {
return data;
}
render: function (data) { return data; }
}
],
columnDefs: [
@ -268,12 +279,65 @@ $(document).ready(function () {
]
});
$('#btnSimpanRegulasi').on('click', function (e) {
// 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);
}
// Add Regulasi
$("#form_add_regulasi").on("submit", function(e){
e.preventDefault();
modal_add_regulasi.close();
showSuccessToast();
showSuccessToast("Regulasi berhasil ditambah!", "Berhasil! Regulasi baru telah berhasil ditambahkan.");
table.ajax.reload();
this.reset();
});
// Edit Regulasi
$(document).on("click", ".btn-edit-regulasi", function(){
const row = table.row($(this).parents("tr")).data();
$("#edit_id").val(row.id);
$("#edit_judul").val(row.judul);
$("#edit_subjudul").val(row.subJudul);
$("#edit_deskripsi").val(row.deskripsi);
$("#edit_tanggal").val(row.tanggalDitetapkan);
$("#edit_status").val(row.statusBerlaku);
modal_edit_regulasi.showModal();
});
$("#form_edit_regulasi").on("submit", function(e){
e.preventDefault();
modal_edit_regulasi.close();
showSuccessToast("Regulasi berhasil diperbarui!", "Data regulasi telah berhasil diperbarui.");
table.ajax.reload();
});
$(document).on("click", ".btn-delete-regulasi", function(){
const row = table.row($(this).parents('tr')).data();
Swal.fire({
title: 'Apakah Anda yakin?',
text: "Data yang dihapus tidak dapat dikembalikan!",
icon: 'warning',
showCancelButton: true,
confirmButtonColor: '#ef4444',
cancelButtonColor: '#6b7280',
confirmButtonText: 'Ya, Hapus!',
cancelButtonText: 'Batal'
}).then((result) => {
if (result.isConfirmed) {
showSuccessToast("Regulasi berhasil dihapus!", "Data regulasi telah berhasil dihapus.");
table.ajax.reload();
}
});
});
// Detail Regulasi
$(document).on('click', '.btn-detail-regulasi', function() {
const row = table.row($(this).parents('tr')).data();
$('#detail-judul').text(row.judul);
@ -281,22 +345,25 @@ $(document).ready(function () {
$('#detail-deskripsi').text(row.deskripsi || '-');
$('#detail-tanggal').text(row.tanggalDitetapkan);
$('#detail-status').text(row.statusBerlaku === 'Ya' ? 'Berlaku' : 'Tidak Berlaku');
$('#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_regulasi.close();
$("#edit_id").val(row.id);
$("#edit_judul").val(row.judul);
$("#edit_subjudul").val(row.subJudul);
$("#edit_deskripsi").val(row.deskripsi);
$("#edit_tanggal").val(row.tanggalDitetapkan);
$("#edit_status").val(row.statusBerlaku);
modal_edit_regulasi.showModal();
});
modal_detail_regulasi.showModal();
});
});
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>