arifal/sibedas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix loading all pages

Browse Source
This commit is contained in:
arifal
2025-02-12 01:53:40 +07:00
parent 1a15bc03f8
commit b4b34b503e
22 changed files with 784 additions and 166 deletions
Download Patch File Download Diff File Expand all files Collapse all files

156
resources/js/roles/index.js
View File

@@ -4,12 +4,46 @@ import "gridjs/dist/gridjs.umd.js";
import GlobalConfig from "../global-config";
class Roles {
constructor() {
this.table = null; // Store Grid.js instance
}
init() {
this.initTableRoles();
}
initTableRoles() {
new Grid({
let tableContainer = document.getElementById("table-roles");
// If table instance already exists, update it instead of re-creating
if (this.table) {
this.table
.updateConfig({
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,
},
})
.forceRender();
return;
}
// Create a new Grid.js instance only if it doesn't exist
this.table = new gridjs.Grid({
columns: [
"ID",
"Name",
@@ -21,8 +55,8 @@ class Roles {
<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>
<button class="btn btn-red btn-delete-role" data-id="${cell}">Delete</button>
</div>
`),
},
],
@@ -59,9 +93,9 @@ class Roles {
]),
total: (data) => data.total,
},
}).render(document.getElementById("table-roles"));
}).render(tableContainer);
document.addEventListener("click", this.handleDelete);
document.addEventListener("click", this.handleDelete.bind(this));
}
handleDelete(event) {
@@ -70,6 +104,7 @@ class Roles {
const id = event.target.getAttribute("data-id");
let modalElement = document.getElementById("modalConfirmation");
let toastMessage = document.getElementById("toast-message");
if (!modalElement) {
console.error("Modal element not found!");
@@ -77,51 +112,94 @@ class Roles {
}
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 toastElement = document.getElementById("toastNotification");
let toast = new bootstrap.Toast(toastElement);
// Remove previous event listeners to avoid multiple bindings
btnSaveConfirmation.replaceWith(
btnSaveConfirmation.cloneNode(true)
);
btnSaveConfirmation = document.getElementById(
"btnSaveConfirmation"
);
// Set the role ID on the confirm button inside the modal
btnSaveConfirmation.setAttribute("data-role-id", id);
// Show the modal
modal.show();
// Prevent multiple event listeners
btnSaveConfirmation.onclick = function () {
let roleId = this.getAttribute("data-role-id");
console.log("Deleted ID:", roleId);
btnSaveConfirmation.addEventListener("click", async () => {
let roleId = btnSaveConfirmation.getAttribute("data-role-id");
fetch(`/roles/${roleId}`, {
method: "DELETE",
credentials: "include",
headers: {
"X-CSRF-TOKEN": document
.querySelector('meta[name="csrf-token"]')
.getAttribute("content"),
"Content-Type": "application/json",
try {
let response = await fetch(`/roles/${roleId}`, {
method: "DELETE",
credentials: "include",
headers: {
"X-CSRF-TOKEN": document
.querySelector('meta[name="csrf-token"]')
.getAttribute("content"),
"Content-Type": "application/json",
},
});
if (response.ok) {
let result = await response.json();
toastMessage.innerText =
result.message || "Deleted successfully!";
toast.show();
// Hide modal
modal.hide();
// Refresh Grid.js table
this.refreshRolesTable();
} else {
let error = await response.json();
console.error("Delete failed:", error);
toastMessage.innerText =
error.message || "Delete failed!";
toast.show();
}
} catch (error) {
console.error("Error deleting item:", error);
toastMessage.innerText = "An error occurred!";
toast.show();
}
});
}
}
refreshRolesTable() {
if (this.table) {
this.table
.updateConfig({
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,
},
})
.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();
});
};
.forceRender();
} else {
this.initTableRoles(); // If the table is null, reinitialize
}
}
}