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

create loading and handle from js create edit and delete roles

Browse Source
This commit is contained in:
arifal
2025-02-11 23:40:31 +07:00
parent 2bf4b8b327
commit 1a15bc03f8
20 changed files with 422 additions and 153 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
resources/js/roles/create.js Normal file
View File

@@ -0,0 +1,55 @@
document.addEventListener("DOMContentLoaded", function (e) {
const toastNotification = document.getElementById("toastNotification");
const toast = new bootstrap.Toast(toastNotification);
document
.getElementById("btnCreateRole")
.addEventListener("click", async function () {
let submitButton = this;
let spinner = document.getElementById("spinner");
let form = document.getElementById("formCreateRole");
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: {
"X-CSRF-TOKEN": document
.querySelector('meta[name="csrf-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 = "/roles";
}, 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();
}
});
});

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

@@ -67,11 +67,37 @@ class Roles {
handleDelete(event) {
if (event.target.classList.contains("btn-delete-role")) {
event.preventDefault();
const id = event.target.getAttribute("data-id");
if (confirm("Are you sure you want to delete this item?")) {
fetch(`/roles/${id}`, {
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"]')
@@ -81,21 +107,21 @@ class Roles {
})
.then((response) => {
if (response.ok) {
alert("Item deleted successfully!");
window.location.reload();
modal.hide();
toast.show();
setTimeout(() => window.location.reload(), 1500);
} else {
return response.json().then((error) => {
throw new Error(
error.message || "Failed to delete item."
);
console.error("Delete failed:", error);
toast.show();
});
}
})
.catch((error) => {
console.error("Error deleting item:", error);
alert("Something went wrong. Please try again.");
toast.show();
});
}
};
}
}
}

53
resources/js/roles/update.js Normal file
View File

@@ -0,0 +1,53 @@
document.addEventListener("DOMContentLoaded", function (e) {
let form = document.getElementById("formUpdateRole");
let submitButton = document.getElementById("btnUpdateRole");
let spinner = document.getElementById("spinner");
let toastMessage = document.getElementById("toast-message");
let toast = new bootstrap.Toast(
document.getElementById("toastNotification")
);
submitButton.addEventListener("click", async function () {
let submitButton = this;
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: {
"X-CSRF-TOKEN": document
.querySelector('meta[name="csrf-token"]')
.getAttribute("content"),
},
body: formData,
});
if (response.ok) {
let result = await response.json();
toastMessage.innerText = result.message;
toast.show();
setTimeout(() => {
window.location.href = "/roles";
}, 2000);
} else {
let error = await response.json();
toastMessage.innerText = error.message;
toast.show();
console.error("Error:", error);
}
} catch (error) {
console.error("Request failed:", error);
toastMessage.innerText = error.message;
toast.show();
}
});
});