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

feat: add delete alert

main-dlh
Regiaaaaaa 2025-12-08 10:31:38 +07:00
parent 3d17907682
commit 7ab0f7142c
1 changed files with 69 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

97
Views/Panduan/Index.cshtml
View File

@ -2,7 +2,7 @@
ViewData["Title"] = "Panduan";
}
<!-- Toast Notification -->
<!-- Toast Notification Add/Edit -->
<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">
@ -20,6 +20,24 @@
</div>
</div>
<!-- Toast Notification Delete -->
<div id="deleteToast" class="fixed top-20 right-6 z-[9999] hidden">
<div class="alert bg-red-50 border border-red-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-red-500 flex items-center justify-center">
<span class="icon icon-fill text-white text-xs">delete</span>
</div>
</div>
<div class="flex-1">
<h3 class="font-semibold text-gray-900">Panduan berhasil dihapus!</h3>
<p class="text-sm text-gray-600">Data panduan telah berhasil dihapus.</p>
</div>
<button onclick="closeDeleteToast()" 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>
@ -88,9 +106,9 @@
</label>
<select id="add_jenis_panduan" class="select select-bordered w-full" required>
<option value="">Pilih jenis panduan.</option>
<option>Dokumen</option>
<option>Video</option>
<option>Lainnya</option>
<option value="Dokumen">Dokumen</option>
<option value="Video">Video</option>
<option value="Lainnya">Lainnya</option>
</select>
</div>
@ -98,7 +116,7 @@
<label class="block text-sm font-medium mb-1">
Upload Dokumen <span class="text-red-500">*</span>
</label>
<input type="file" id="add_dokumen_panduan" 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" required/>
<p class="text-xs text-gray-500 mt-1">Ukuran maksimal 5MB.</p>
</div>
@ -106,7 +124,7 @@
<label class="block text-sm font-medium mb-1">
Link Konten
</label>
<input type="text" id="add_link_panduan" class="input input-bordered w-full" placeholder="http://"/>
<input type="text" id="add_link_panduan" class="input input-bordered w-full" placeholder="http://" required/>
</div>
<div class="modal-action flex justify-end gap-3">
@ -218,6 +236,8 @@
<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>
$(document).ready(function () {
@ -244,6 +264,10 @@ $(document).ready(function () {
]
});
// Toast functions
window.closeToast = function(){ $("#successToast").addClass("hidden"); }
window.closeDeleteToast = function(){ $("#deleteToast").addClass("hidden"); }
function showSuccessToast(title="Panduan berhasil ditambah!", message="Berhasil! Panduan baru telah berhasil ditambahkan.") {
$("#successToast .font-semibold").text(title);
$("#successToast p").text(message);
@ -251,12 +275,20 @@ $(document).ready(function () {
setTimeout(()=>{ $("#successToast").addClass("hidden"); }, 4000);
}
function showDeleteToast(title="Panduan berhasil dihapus!", message="Data panduan telah berhasil dihapus.") {
$("#deleteToast .font-semibold").text(title);
$("#deleteToast p").text(message);
$("#deleteToast").removeClass("hidden");
setTimeout(()=>{ $("#deleteToast").addClass("hidden"); }, 4000);
}
// Add Panduan
$("#form_add_panduan").on("submit", function(e){
e.preventDefault();
modal_add_panduan.close();
showSuccessToast();
table.ajax.reload();
this.reset();
});
// Edit Panduan
@ -277,6 +309,26 @@ $(document).ready(function () {
table.ajax.reload();
});
$(document).on("click", ".btn-delete-panduan", 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) {
showDeleteToast();
table.ajax.reload();
}
});
});
// Detail Panduan
$(document).on("click", ".btn-detail-panduan", function () {
const row = table.row($(this).parents('tr')).data();
@ -288,32 +340,19 @@ $(document).ready(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();
});
// 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();
});
});
</script>