fix dashboard pbg, add soft delete users, fix js create pbg task

resources/js/master/users/users.js

@@ -2,10 +2,25 @@ 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 Swal from "sweetalert2";
 
 class UsersTable {
-    init() {
+    constructor() {
+        this.toastMessage = document.getElementById("toast-message");
+        this.toastElement = document.getElementById("toastNotification");
+        this.toast = new bootstrap.Toast(this.toastElement);
+        this.table = null;
         this.initTableUsers();
+        this.initEvents();
+    }
+    initEvents() {
+        document.body.addEventListener("click", async (event) => {
+            const deleteButton = event.target.closest(".btn-delete-users");
+            if (deleteButton) {
+                event.preventDefault();
+                await this.handleDelete(deleteButton);
+            }
+        });
     }
 
     initTableUsers() {
@@ -14,7 +29,8 @@ class UsersTable {
 
         tableContainer.innerHTML = "";
         let canUpdate = tableContainer.getAttribute("data-updater") === "1";
-        new Grid({
+        let canDestroy = tableContainer.getAttribute("data-destroyer") === "1";
+        this.table = new Grid({
             columns: [
                 "ID",
                 "Name",
@@ -26,18 +42,28 @@ class UsersTable {
                 {
                     name: "Action",
                     formatter: (cell) => {
-                        if (!canUpdate) {
+                        if (!canUpdate && !canDestroy) {
                             return gridjs.html(
                                 `<span class="text-muted">No Privilege</span>`
                             );
                         }
-                        return gridjs.html(`
-                            <div class="d-flex justify-content-center">
+
+                        let buttons = `<div class="d-flex justify-content-center align-items-center gap-2">`;
+
+                        buttons += `
                                 <a href="/master/users/${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>
-                            </div>
-                        `);
+                            `;
+                        buttons += `
+                                <button data-id="${cell}" class="btn btn-sm btn-red btn-delete-users d-inline-flex align-items-center justify-content-center">
+                                    <i class='bx bxs-trash'></i>
+                                </button>
+                            `;
+
+                        buttons += `</div>`;
+
+                        return gridjs.html(buttons);
                     },
                 },
             ],
@@ -67,7 +93,6 @@ class UsersTable {
                     "Content-Type": "application/json",
                 },
                 then: (data) => {
-                    console.log(data.data);
                     return data.data.map((item) => [
                         item.id,
                         item.name,
@@ -83,8 +108,62 @@ class UsersTable {
             },
         }).render(document.getElementById("table-users"));
     }
+
+    async handleDelete(button) {
+        const id = button.getAttribute("data-id");
+
+        const result = await 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!",
+        });
+
+        if (result.isConfirmed) {
+            try {
+                let response = await fetch(
+                    `${GlobalConfig.apiHost}/api/users/${id}`,
+                    {
+                        method: "DELETE",
+                        credentials: "include",
+                        headers: {
+                            Authorization: `Bearer ${document
+                                .querySelector('meta[name="api-token"]')
+                                .getAttribute("content")}`,
+                            "Content-Type": "application/json",
+                        },
+                    }
+                );
+
+                if (response.ok) {
+                    let result = await response.json();
+                    this.toastMessage.innerText =
+                        result.message || "Deleted successfully!";
+                    this.toast.show();
+
+                    // Refresh Grid.js table
+                    if (typeof this.table !== "undefined") {
+                        this.table.updateConfig({}).forceRender();
+                    }
+                } else {
+                    let error = await response.json();
+                    console.error("Delete failed:", error);
+                    this.toastMessage.innerText =
+                        error.message || "Delete failed!";
+                    this.toast.show();
+                }
+            } catch (error) {
+                console.error("Error deleting item:", error);
+                this.toastMessage.innerText = "An error occurred!";
+                this.toast.show();
+            }
+        }
+    }
 }
 
 document.addEventListener("DOMContentLoaded", function (e) {
-    new UsersTable().init();
+    new UsersTable();
 });