add edit and delete data tax

resources/js/taxation/edit.js

@@ -0,0 +1,66 @@
+class UpdateTax {
+    constructor() {
+        this.initUpdateCustomer();
+    }
+
+    initUpdateCustomer() {
+        const toastNotification = document.getElementById("toastNotification");
+        const toast = new bootstrap.Toast(toastNotification);
+        let menuId = document.getElementById("menuId").value;
+        document
+            .getElementById("btnUpdateTax")
+            .addEventListener("click", async function () {
+                let submitButton = this;
+                let spinner = document.getElementById("spinner");
+                let form = document.getElementById("formUpdateTax");
+
+                if (!form) {
+                    console.error("Form element not found!");
+                    return;
+                }
+                // Get form data
+                let formData = new FormData(form);
+
+                // Disable button and show spinner
+                submitButton.disabled = true;
+                spinner.classList.remove("d-none");
+
+                try {
+                    let response = await fetch(form.action, {
+                        method: "POST",
+                        headers: {
+                            Authorization: `Bearer ${document
+                                .querySelector('meta[name="api-token"]')
+                                .getAttribute("content")}`,
+                        },
+                        body: formData,
+                    });
+
+                    if (response.ok) {
+                        let result = await response.json();
+                        document.getElementById("toast-message").innerText =
+                            result.message;
+                        toast.show();
+                        setTimeout(() => {
+                            window.location.href = `/tax?menu_id=${menuId}`;
+                        }, 2000);
+                    } else {
+                        let error = await response.json();
+                        document.getElementById("toast-message").innerText =
+                            error.message;
+                        toast.show();
+                        console.error("Error:", error);
+                    }
+                } catch (error) {
+                    console.error("Request failed:", error);
+                    document.getElementById("toast-message").innerText =
+                        error.message;
+                    toast.show();
+                }
+            });
+    }
+}
+
+document.addEventListener("DOMContentLoaded", function (e) {
+    new UpdateTax();
+});

resources/js/taxation/index.js

@@ -1,7 +1,9 @@
 import { Grid } from "gridjs/dist/gridjs.umd.js";
+import gridjs from "gridjs/dist/gridjs.umd.js";
 import "gridjs/dist/gridjs.umd.js";
 import GlobalConfig from "../global-config";
 import { addThousandSeparators } from "../global-config";
+import Swal from "sweetalert2";
 
 class Taxation {
     constructor() {
@@ -11,7 +13,7 @@ class Taxation {
         this.table = null;
 
         this.initTableTaxation();
-        // this.initEvents();
+        this.initEvents();
         this.handleExportToExcel();
     }
 
@@ -66,11 +68,64 @@ class Taxation {
     }
 
     initEvents() {
-        document.body.addEventListener("click", async (event) => {
+        document.body.addEventListener("click", (event) => {
             const deleteButton = event.target.closest(".btn-delete-taxation");
             if (deleteButton) {
                 event.preventDefault();
-                await this.handleDelete(deleteButton);
+                this.handleDelete(deleteButton);
+            }
+        });
+    }
+
+    handleDelete(deleteButton) {
+        const id = deleteButton.getAttribute("data-id");
+
+        Swal.fire({
+            title: "Are you sure?",
+            text: "You won't be able to revert this!",
+            icon: "warning",
+            showCancelButton: true,
+            confirmButtonColor: "#3085d6",
+            cancelButtonColor: "#d33",
+            confirmButtonText: "Yes, delete it!",
+        }).then((result) => {
+            if (result.isConfirmed) {
+                fetch(`${GlobalConfig.apiHost}/api/taxs/${id}`, {
+                    method: "DELETE",
+                    credentials: "include",
+                    headers: {
+                        Authorization: `Bearer ${document
+                            .querySelector('meta[name="api-token"]')
+                            .getAttribute("content")}`,
+                        "Content-Type": "application/json",
+                    },
+                })
+                    .then((response) => {
+                        if (response.ok) {
+                            return response.json();
+                        } else {
+                            return response.json().then((error) => {
+                                throw new Error(
+                                    error.message || "Delete failed!"
+                                );
+                            });
+                        }
+                    })
+                    .then((result) => {
+                        this.toastMessage.innerText =
+                            result.message || "Data deleted successfully!";
+                        this.toast.show();
+
+                        if (typeof this.table !== "undefined") {
+                            this.table.updateConfig({}).forceRender();
+                        }
+                    })
+                    .catch((error) => {
+                        console.error("Error deleting item:", error);
+                        this.toastMessage.innerText =
+                            error.message || "An error occurred!";
+                        this.toast.show();
+                    });
             }
         });
     }
@@ -86,6 +141,10 @@ class Taxation {
         // Clear previous table content
         tableContainer.innerHTML = "";
 
+        let canUpdate = tableContainer.getAttribute("data-updater") === "1";
+        let canDelete = tableContainer.getAttribute("data-destroyer") === "1";
+        let menuId = tableContainer.getAttribute("data-menuId");
+
         this.table = new Grid({
             columns: [
                 "ID",
@@ -99,6 +158,33 @@ class Taxation {
                 { name: "Tax Value" },
                 { name: "Subdistrict" },
                 { name: "Village" },
+                {
+                    name: "Action",
+                    formatter: (cell) => {
+                        let buttons = "";
+                        if (canUpdate) {
+                            buttons += `
+                                <a href="/tax/${cell}/edit?menu_id=${menuId}" class="btn btn-yellow btn-sm d-inline-flex align-items-center justify-content-center">
+                                    <i class='bx bx-edit'></i>
+                                </a>
+                            `;
+                        }
+                        if (canDelete) {
+                            buttons += `
+                                <button data-id="${cell}" class="btn btn-sm btn-red btn-delete-taxation d-inline-flex align-items-center justify-content-center">
+                                    <i class='bx bxs-trash'></i>
+                                </button>
+                            `;
+                        }
+                        if (!canUpdate && !canDelete) {
+                            buttons = `<span class="text-muted">No Privilege</span>`;
+                        }
+
+                        return gridjs.html(
+                            `<div class="d-flex justify-content-center gap-2">${buttons}</div>`
+                        );
+                    },
+                },
             ],
             pagination: {
                 limit: 50,
@@ -148,6 +234,7 @@ class Taxation {
                             addThousandSeparators(item.tax_value),
                             item.subdistrict,
                             item.village,
+                            item.id,
                         ];
                     });
                 },