132 lines
4.6 KiB
JavaScript
132 lines
4.6 KiB
JavaScript
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";
|
|
|
|
class Roles {
|
|
init() {
|
|
this.initTableRoles();
|
|
}
|
|
|
|
initTableRoles() {
|
|
new Grid({
|
|
columns: [
|
|
"ID",
|
|
"Name",
|
|
"Description",
|
|
{
|
|
name: "Action",
|
|
formatter: (cell) =>
|
|
gridjs.html(`
|
|
<div class="d-flex justify-content-end gap-x-2">
|
|
<a href="/roles/${cell}/edit" class="btn btn-yellow me-2">Update</a>
|
|
<a href="/roles/role-menu/${cell}" class="btn btn-yellow me-2">Role Menu</a>
|
|
<button class="btn btn-red btn-delete btn-delete-role" data-id="${cell}">Delete</button>
|
|
<div>
|
|
`),
|
|
},
|
|
],
|
|
pagination: {
|
|
limit: 15,
|
|
server: {
|
|
url: (prev, page) =>
|
|
`${prev}${prev.includes("?") ? "&" : "?"}page=${
|
|
page + 1
|
|
}`,
|
|
},
|
|
},
|
|
sort: true,
|
|
search: {
|
|
server: {
|
|
url: (prev, keyword) => `${prev}?search=${keyword}`,
|
|
},
|
|
},
|
|
server: {
|
|
url: `${GlobalConfig.apiHost}/api/api-roles`,
|
|
credentials: "include",
|
|
headers: {
|
|
Authorization: `Bearer ${document
|
|
.querySelector('meta[name="api-token"]')
|
|
.getAttribute("content")}`,
|
|
"Content-Type": "application/json",
|
|
},
|
|
then: (data) =>
|
|
data.data.map((item) => [
|
|
item.id,
|
|
item.name,
|
|
item.description,
|
|
item.id,
|
|
]),
|
|
total: (data) => data.total,
|
|
},
|
|
}).render(document.getElementById("table-roles"));
|
|
|
|
document.addEventListener("click", this.handleDelete);
|
|
}
|
|
|
|
handleDelete(event) {
|
|
if (event.target.classList.contains("btn-delete-role")) {
|
|
event.preventDefault();
|
|
|
|
const id = event.target.getAttribute("data-id");
|
|
let modalElement = document.getElementById("modalConfirmation");
|
|
|
|
if (!modalElement) {
|
|
console.error("Modal element not found!");
|
|
return;
|
|
}
|
|
|
|
let modal = new bootstrap.Modal(modalElement);
|
|
|
|
// Set the role ID on the confirm button inside the modal
|
|
let btnSaveConfirmation = document.getElementById(
|
|
"btnSaveConfirmation"
|
|
);
|
|
btnSaveConfirmation.setAttribute("data-role-id", id);
|
|
|
|
let toastElement = document.getElementById("toastNotificationApi");
|
|
let toast = new bootstrap.Toast(toastElement);
|
|
|
|
// Show the modal
|
|
modal.show();
|
|
|
|
// Prevent multiple event listeners
|
|
btnSaveConfirmation.onclick = function () {
|
|
let roleId = this.getAttribute("data-role-id");
|
|
console.log("Deleted ID:", roleId);
|
|
|
|
fetch(`/roles/${roleId}`, {
|
|
method: "DELETE",
|
|
credentials: "include",
|
|
headers: {
|
|
"X-CSRF-TOKEN": document
|
|
.querySelector('meta[name="csrf-token"]')
|
|
.getAttribute("content"),
|
|
"Content-Type": "application/json",
|
|
},
|
|
})
|
|
.then((response) => {
|
|
if (response.ok) {
|
|
modal.hide();
|
|
toast.show();
|
|
setTimeout(() => window.location.reload(), 1500);
|
|
} else {
|
|
return response.json().then((error) => {
|
|
console.error("Delete failed:", error);
|
|
toast.show();
|
|
});
|
|
}
|
|
})
|
|
.catch((error) => {
|
|
console.error("Error deleting item:", error);
|
|
toast.show();
|
|
});
|
|
};
|
|
}
|
|
}
|
|
}
|
|
|
|
document.addEventListener("DOMContentLoaded", function (e) {
|
|
new Roles().init();
|
|
});
|