feat: add edit & delete modal, alert success

Controllers/RegulasiController.cs

@@ -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 border-primary-500 text-primary-500 btn-edit-regulasi'>Edit</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 border-gray-800 text-gray-800 btn-detail-regulasi'>Detail</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-red-500 text-red-500 btn-delete-regulasi'>Delete</button>
                     </div>"
             });
 

Views/Regulasi/Index.cshtml

@@ -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 onclick="modal_add_regulasi.close()" class="btn btn-sm btn-circle btn-ghost absolute top-3 right-3">✕</label>
-            ✕
-        </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">
+                <legend class="fieldset-legend">Judul <span class="text-red-500">*</span></legend>
-                    Judul <span class="text-red-500">*</span>
+                <input type="text" id="add_judul" class="input w-full" placeholder="Masukkan judul" required/>
-                </legend>
-                <input type="text" class="input w-full" placeholder="Masukkan judul" />
             </fieldset>
 
-            <!-- Sub Judul -->
             <fieldset class="fieldset">
-                <legend class="fieldset-legend">
+                <legend class="fieldset-legend">Sub Judul <span class="text-red-500">*</span></legend>
-                    Sub Judul <span class="text-red-500">*</span>
+                <textarea id="add_subjudul" class="textarea h-24 w-full" placeholder="Masukkan subjudul" required></textarea>
-                </legend>
-                <textarea class="textarea h-24 w-full" placeholder="Masukkan subjudul"></textarea>
             </fieldset>
 
-            <!-- Deskripsi -->
             <fieldset class="fieldset">
-                <legend class="fieldset-legend">
+                <legend class="fieldset-legend">Deskripsi <span class="text-red-500">*</span></legend>
-                    Deskripsi <span class="text-red-500">*</span>
+                <textarea id="add_deskripsi" class="textarea h-32 w-full" placeholder="Masukkan deskripsi regulasi" required></textarea>
-                </legend>
-                <textarea class="textarea h-32 w-full" placeholder="Masukkan deskripsi regulasi"></textarea>
             </fieldset>
 
-            <!-- Tanggal Penetapan & Status -->
             <div class="grid grid-cols-2 gap-4">
                 <fieldset class="fieldset">
-                    <legend class="fieldset-legend">
+                    <legend class="fieldset-legend">Tanggal Penetapan <span class="text-red-500">*</span></legend>
-                        Tanggal Penetapan <span class="text-red-500">*</span>
+                    <input type="date" id="add_tanggal" class="input w-full" required/>
-                    </legend>
-                    <input type="date" class="input w-full" placeholder="DD/MM/YYYY" />
                 </fieldset>
 
                 <fieldset class="fieldset">
-                    <legend class="fieldset-legend">
+                    <legend class="fieldset-legend">Status <span class="text-red-500">*</span></legend>
-                        Status <span class="text-red-500">*</span>
+                    <select id="add_status" class="select w-full" required>
-                    </legend>
-                    <select class="select w-full">
                         <option value="">Pilih status</option>
-                        <option value="Aktif">Aktif</option>
+                        <option value="Berlaku">Berlaku</option>
-                        <option value="Tidak Aktif">Tidak Aktif</option>
+                        <option value="Tidak Berlaku">Tidak Berlaku</option>
                     </select>
                 </fieldset>
             </div>
 
-            <!-- Upload Dokumen -->
             <fieldset class="fieldset">
-                <legend class="fieldset-legend">
+                <legend class="fieldset-legend">Upload Dokumen <span class="text-red-500">*</span></legend>
-                    Upload Dokumen <span class="text-red-500">*</span>
+                <input type="file" id="add_dokumen" class="file-input w-full" accept=".pdf,.doc,.docx" required/>
-                </legend>
-                <input type="file" class="file-input w-full" accept=".pdf,.doc,.docx" />
                 <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>
+                    <span class="icon me-1">cancel</span> Tutup
-                    Tutup
                 </button>
-                <button id="btnSimpanRegulasi" 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>
             </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 onclick="modal_detail_regulasi.close()" class="btn btn-sm btn-circle btn-ghost absolute top-3 right-3">✕</label>
-            ✕
-        </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">
+                    <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>
                 </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>
+                <span class="icon me-1">cancel</span> Tutup
-                Tutup
             </button>
             <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>
         </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
+                    return data.length > max ? data.substring(0, max) + "..." : data;
-                        ? data.substring(0, max) + "..."
-                        : data;
                 }
             },
-
             { data: 'tanggalDitetapkan' },
-
-            // Status Berlaku
             {
                 data: 'statusBerlaku',
                 render: function () {
-                    return `
+                    return `<input type="checkbox" class="toggle toggle-success" checked />`;
-                        <input type="checkbox" class="toggle toggle-success" checked />`;
                 }
             },
-
-            // Dokumen icon
             {
                 data: 'dokumen',
                 render: function () {
-                    return `
+                    return `<div class="flex items-center gap-1 text-green-600">
-                        <div class="flex items-center gap-1 text-green-600">
+                        <span class="icon icon-fill">description</span> Dokumen</div>`;
-                            <span class="icon icon-fill">description</span>
-                            Dokumen
-                        </div>`;
                 }
             },
-
-            // Aksi
             {
                 data: 'aksi',
                 orderable: false,
                 searchable: false,
-                render: function (data) {
+                render: function (data) { return 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>