From bfb8b5bf0d7c61cd68e3df7409d332f53c46c8e8 Mon Sep 17 00:00:00 2001
From: Yuri Dimas <yuri@impstudio.co.id>
Date: Tue, 4 Nov 2025 23:09:16 +0700
Subject: [PATCH] style: implement plugin datatable & sweetalert

---
 Areas/Dinas/Controllers/ArtikelController.cs |  58 ++++++++
 Areas/Dinas/Views/Artikel/Index.cshtml       | 144 +++++++------------
 2 files changed, 113 insertions(+), 89 deletions(-)

diff --git a/Areas/Dinas/Controllers/ArtikelController.cs b/Areas/Dinas/Controllers/ArtikelController.cs
index 55ce5ae..9114285 100644
--- a/Areas/Dinas/Controllers/ArtikelController.cs
+++ b/Areas/Dinas/Controllers/ArtikelController.cs
@@ -3,11 +3,69 @@
 namespace BankSampahApp.Areas.Dinas.Controllers
 {
     [Area("Dinas")]
+    [Route("Dinas/[controller]/[action]")]
     public class ArtikelController : Controller
     {
         public IActionResult Index()
         {
             return View();
         }
+
+        [HttpGet]
+        public IActionResult Table()
+        {
+            var data = new[]
+            {
+                new {
+                    nama = "Proses Pemilahan: Langkah Awal Menuju Keberhasilan",
+                    aksi = "<div class=\"flex gap-2\">" +
+                    "<a href=\"#\" class=\"btn btn-circle btn-warning text-white btn-sm\"><i class=\"ph ph-note-pencil\"></i></a>" +
+                    "<a href=\"#\" class=\"btn btn-circle btn-error delete text-white btn-sm\"><i class=\"ph ph-trash\"></i></a>" +
+                    "</div>",
+                },
+                new {
+                    nama = "Pengumpulan: Kunci untuk Mengoptimalkan Sumber Daya",
+                    aksi = "<div class=\"flex gap-2\">" +
+                    "<a href=\"#\" class=\"btn btn-circle btn-warning text-white btn-sm\"><i class=\"ph ph-note-pencil\"></i></a>" +
+                    "<a href=\"#\" class=\"btn btn-circle btn-error delete text-white btn-sm\"><i class=\"ph ph-trash\"></i></a>" +
+                    "</div>",
+                },
+                new {
+                    nama = "Pengolahan: Transformasi Sumber Daya Menjadi Nilai",
+                    aksi = "<div class=\"flex gap-2\">" +
+                    "<a href=\"#\" class=\"btn btn-circle btn-warning text-white btn-sm\"><i class=\"ph ph-note-pencil\"></i></a>" +
+                    "<a href=\"#\" class=\"btn btn-circle btn-error delete text-white btn-sm\"><i class=\"ph ph-trash\"></i></a>" +
+                    "</div>",
+                },
+                new {
+                    nama = "Pemilahan yang Efisien: Meningkatkan Produktivitas",
+                    aksi = "<div class=\"flex gap-2\">" +
+                    "<a href=\"#\" class=\"btn btn-circle btn-warning text-white btn-sm\"><i class=\"ph ph-note-pencil\"></i></a>" +
+                    "<a href=\"#\" class=\"btn btn-circle btn-error delete text-white btn-sm\"><i class=\"ph ph-trash\"></i></a>" +
+                    "</div>",
+                },
+                new {
+                    nama = "Pemilahan: Strategi Efektif dalam Manajemen Sumber Daya",
+                    aksi = "<div class=\"flex gap-2\">" +
+                    "<a href=\"#\" class=\"btn btn-circle btn-warning text-white btn-sm\"><i class=\"ph ph-note-pencil\"></i></a>" +
+                    "<a href=\"#\" class=\"btn btn-circle btn-error delete text-white btn-sm\"><i class=\"ph ph-trash\"></i></a>" +
+                    "</div>",
+                },
+                new {
+                    nama = "Pemilahan: Dasar untuk Proses yang Berkelanjutan",
+                    aksi = "<div class=\"flex gap-2\">" +
+                    "<a href=\"#\" class=\"btn btn-circle btn-warning text-white btn-sm\"><i class=\"ph ph-note-pencil\"></i></a>" +
+                    "<a href=\"#\" class=\"btn btn-circle btn-error delete text-white btn-sm\"><i class=\"ph ph-trash\"></i></a>" +
+                    "</div>",
+                },
+            };
+
+            var response = new
+            {
+                data = data
+            };
+
+            return Json(response);
+        }
     }
 }
diff --git a/Areas/Dinas/Views/Artikel/Index.cshtml b/Areas/Dinas/Views/Artikel/Index.cshtml
index 7b85318..317f248 100644
--- a/Areas/Dinas/Views/Artikel/Index.cshtml
+++ b/Areas/Dinas/Views/Artikel/Index.cshtml
@@ -21,93 +21,59 @@
 
 <div class="card bg-white">
     <div class="card-body p-2">
-        <partial name="~/Areas/Shared/Components/Table/_Control.cshtml" />
-        <div class="overflow-x-auto">
-            <table class="table-zebra table">
-                <!-- head -->
-                <thead>
-                    <tr>
-                        <th class="w-[5%]"></th>
-                        <th class="w-[85%]">Judul Artikel</th>
-                        <th class="w-[10%]">Aksi</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr>
-                        <th>1</th>
-                        <td>Proses Pemilahan: Langkah Awal Menuju Keberhasilan</td>
-                        <td>
-                            <a href="#" class="btn btn-circle btn-warning btn-sm text-white">
-                                <i class="ph ph-note-pencil"></i>
-                            </a>
-                            <a href="#" class="btn btn-circle btn-error btn-sm text-white">
-                                <i class="ph ph-trash"></i>
-                            </a>
-                        </td>
-                    </tr>
-                    <tr>
-                        <th>2</th>
-                        <td>Pengumpulan: Kunci untuk Mengoptimalkan Sumber Daya</td>
-                        <td>
-                            <a href="#" class="btn btn-circle btn-warning btn-sm text-white">
-                                <i class="ph ph-note-pencil"></i>
-                            </a>
-                            <a href="#" class="btn btn-circle btn-error btn-sm text-white">
-                                <i class="ph ph-trash"></i>
-                            </a>
-                        </td>
-                    </tr>
-                    <tr>
-                        <th>3</th>
-                        <td>Pengolahan: Transformasi Sumber Daya Menjadi Nilai</td>
-                        <td>
-                            <a href="#" class="btn btn-circle btn-warning btn-sm text-white">
-                                <i class="ph ph-note-pencil"></i>
-                            </a>
-                            <a href="#" class="btn btn-circle btn-error btn-sm text-white">
-                                <i class="ph ph-trash"></i>
-                            </a>
-                        </td>
-                    </tr>
-                    <tr>
-                        <th>4</th>
-                        <td>Pemilahan yang Efisien: Meningkatkan Produktivitas</td>
-                        <td>
-                            <a href="#" class="btn btn-circle btn-warning btn-sm text-white">
-                                <i class="ph ph-note-pencil"></i>
-                            </a>
-                            <a href="#" class="btn btn-circle btn-error btn-sm text-white">
-                                <i class="ph ph-trash"></i>
-                            </a>
-                        </td>
-                    </tr>
-                    <tr>
-                        <th>5</th>
-                        <td>Pemilahan: Strategi Efektif dalam Manajemen Sumber Daya</td>
-                        <td>
-                            <a href="#" class="btn btn-circle btn-warning btn-sm text-white">
-                                <i class="ph ph-note-pencil"></i>
-                            </a>
-                            <a href="#" class="btn btn-circle btn-error btn-sm text-white">
-                                <i class="ph ph-trash"></i>
-                            </a>
-                        </td>
-                    </tr>
-                    <tr>
-                        <th>6</th>
-                        <td>Pemilahan: Dasar untuk Proses yang Berkelanjutan</td>
-                        <td>
-                            <a href="#" class="btn btn-circle btn-warning btn-sm text-white">
-                                <i class="ph ph-note-pencil"></i>
-                            </a>
-                            <a href="#" class="btn btn-circle btn-error btn-sm text-white">
-                                <i class="ph ph-trash"></i>
-                            </a>
-                        </td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-        <partial name="~/Areas/Shared/Components/Table/_Pagination.cshtml" />
+        <table class="table-zebra table" id="example">
+            <!-- head -->
+            <thead>
+                <tr>
+                    <th class="w-[5%]">No</th>
+                    <th class="w-[85%]">Judul Artikel</th>
+                    <th class="w-[10%]">Aksi</th>
+                </tr>
+            </thead>
+            <tbody></tbody>
+        </table>
     </div>
-</div>
\ No newline at end of file
+</div>
+
+<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
+<script src="https://cdn.datatables.net/2.3.4/js/dataTables.js"></script>
+<script src="/plugins/datatables/dataTables.tailwindcss.js"></script>
+<script type="text/javascript">
+    var table;
+
+    $(document).ready(function () {
+        table = new DataTable('#example', {
+            ajax: '/Dinas/Artikel/Table',
+            scrollX: true,
+            autoWidth: false,
+            initComplete: function () {
+                $('div.dt-scroll-body thead').css('visibility', 'collapse');
+            },
+            columns: [
+                { data: null, render: (d, t, r, m) => m.row + 1, orderable: false, searchable: false },
+                { data: 'nama' },
+                { data: 'aksi' },
+            ]
+        });
+
+        table.on("click", ".delete", function (e) {
+            e.preventDefault();
+
+            let url = $(this).data("url");
+            swal.fire({
+                title: "Apakah anda yakin?",
+                text: "Data yang dihapus tidak dapat dikembalikan lagi",
+                icon: "question",
+                showCancelButton: true,
+                confirmButtonText: "Ya, Hapus",
+                cancelButtonText: "Batal",
+                buttonsStyling: false,
+                customClass: {
+                    confirmButton: "btn btn-error text-white",
+                    cancelButton: "btn btn-link no-underline text-gray-500",
+                },
+            });
+        });
+    });
+</script>
\ No newline at end of file