slicing: add edit modal, action button position swap

Controllers/PanduanController.cs

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

Views/Panduan/Index.cshtml

@@ -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 
+                <input type="text" id="add_judul_panduan" class="input input-bordered w-full" placeholder="Masukkan judul" required/>
-                    type="text" 
-                    class="input input-bordered w-full" 
-                    placeholder="Masukkan judul" />
             </div>
 
-            <!-- Deskripsi -->
             <div>
                 <label class="block text-sm font-medium mb-1">
                     Deskripsi <span class="text-red-500">*</span>
                 </label>
-                <textarea 
+                <textarea id="add_deskripsi_panduan" class="textarea textarea-bordered w-full h-28" placeholder="Masukkan deskripsi" required></textarea>
-                    class="textarea textarea-bordered w-full h-28" 
-                    placeholder="Masukkan deskripsi"></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 
+                <input type="file" id="add_dokumen_panduan" class="file-input file-input-bordered w-full" accept=".pdf,.doc,.docx"/>
-                    type="file" 
-                    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 
+                <input type="text" id="add_link_panduan" class="input input-bordered w-full" placeholder="http://"/>
-                    type="text" 
-                    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">
+                <button type="button" onclick="modal_add_panduan.close()" 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="btnSimpanPanduan" 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 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()" 
+        <label onclick="modal_detail_panduan.close()" class="btn btn-sm btn-circle btn-ghost absolute top-3 right-3">✕</label>
-               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>
+                        <span class="icon icon-fill me-1">description</span> Dokumen
-                        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>
+                <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 -->
+<!-- Modal Edit Panduan -->
-<div id="successToast" class="fixed top-20 right-6 z-[9999] hidden">
+<dialog id="modal_edit_panduan" class="modal modal-bottom sm:modal-middle">
-    <div class="alert bg-green-50 border border-green-200 shadow-lg flex items-start gap-3 pr-12 min-w-[320px]">
+    <div class="modal-box w-full sm:max-w-lg">
-        <div class="flex-shrink-0">
+        <button class="btn btn-sm btn-circle absolute right-2 top-2" onclick="modal_edit_panduan.close()">✕</button>
-            <div class="w-5 h-5 rounded-full bg-green-500 flex items-center justify-center">
+        <h3 class="text-lg font-bold mb-4">Edit Panduan</h3>
-                <span class="icon text-white text-xs">check</span>
+
+        <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">
+            <div class="modal-action mt-6">
-            <h3 class="font-semibold text-gray-900">Panduan berhasil ditambah!</h3>
+                <button type="button" class="btn rounded-full" onclick="modal_edit_panduan.close()">Tutup</button>
-            <p class="text-sm text-gray-600">Berhasil! Panduan baru telah berhasil ditambahkan.</p>
+                <button type="submit" class="btn bg-green-700 hover:bg-green-800 text-white rounded-full">
-        </div>
+                    <span class="icon">save</span>
-        <button onclick="closeToast()" class="absolute top-3 right-3 text-gray-400 hover:text-gray-600">
+                    Simpan
-            <span class="icon text-lg">close</span>
                 </button>
             </div>
-</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: null, render: (d,t,r,m) => m.row+1, orderable:false },
             { data: 'judul' },
-            { data: 'jenis' },
-
             { 
-                data: 'dokumen',
+                data: 'deskripsi',
-                render: function () {
+                render: function(d) {
-                    return `
+                    return d.length > 50 ? d.substr(0, 50) + "..." : d;
-                        <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: 'jenis' },
-            {
+            { data: 'dokumen', render: function(){ 
-                data: 'aksi',
+                return `<div class="flex items-center gap-1 text-green-600 cursor-pointer btn-detail-doc">
-                orderable: false,
+                    <span class="icon icon-fill">description</span> Dokumen</div>`; 
-                searchable: false,
+            }},
-                render: data => data
+            { data:'aksi', orderable:false, searchable:false, render:data=>data }
-            }
         ]
     });
 
-    // Handle form submit
+    function showSuccessToast(title="Panduan berhasil ditambah!", message="Berhasil! Panduan baru telah berhasil ditambahkan.") {
-    $('#btnSimpanPanduan').on('click', function (e) {
+        $("#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
+    // Edit Panduan
-    $(document).on('click', '.btn-detail-panduan', function () {
+    $(document).on("click", ".btn-edit-panduan", function(){
-        const row = table.row($(this).parents('tr')).data();
+        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')
+        $('#detail-dokumen').off("click").on("click", function(){
-            .off("click")
+            window.open("/uploads/"+row.dokumen,"_blank");
-            .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>