Files
sibedas/resources/js/data-settings/index.js
2025-02-04 21:49:10 +07:00

108 lines
3.8 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.js";
class DataSettings {
init() {
this.getFetchApiData();
}
getFetchApiData() {
const table = new Grid({
columns: [
"ID",
"Key",
"Value",
"Created",
{
name: "Actions",
width: "120px",
formatter: function (cell) {
console.log("cell data", cell);
return gridjs.html(`
<div class="d-flex justify-items-end gap-10">
<a href="/data-settings/${cell}/edit" class="btn btn-yellow me-2">Update</a>
<button class="btn btn-red btn-delete btn-delete-data-settings" data-id="${cell}">Delete</button>
</div>
`);
},
},
],
search: {
server: {
url: (prev, keyword) => `${prev}?search=${keyword}`,
},
},
pagination: {
limit: 15,
server: {
url: (prev, page) =>
`${prev}${prev.includes("?") ? "&" : "?"}page=${
page + 1
}`,
},
},
sort: true,
server: {
url: `${GlobalConfig.apiHost}/api/api-data-settings`,
headers: {
Authorization: `Bearer ${document
.querySelector('meta[name="api-token"]')
.getAttribute("content")}`,
"Content-Type": "application/json",
},
then: (data) =>
data.data.map((item) => [
item.id,
item.key,
item.value,
item.created_at,
item.id,
]),
total: (data) => data.meta.total,
},
});
table.render(document.getElementById("table-data-settings"));
document.addEventListener("click", this.handleDelete);
}
handleDelete(event) {
if (event.target.classList.contains("btn-delete-data-settings")) {
event.preventDefault();
const id = event.target.getAttribute("data-id");
if (confirm("Are you sure you want to delete this item?")) {
fetch(`/data-settings/${id}`, {
method: "DELETE",
headers: {
"X-CSRF-TOKEN": document
.querySelector('meta[name="csrf-token"]')
.getAttribute("content"),
"Content-Type": "application/json",
},
})
.then((response) => {
if (response.ok) {
alert("Item deleted successfully!");
window.location.reload();
} else {
return response.json().then((error) => {
throw new Error(
error.message || "Failed to delete item."
);
});
}
})
.catch((error) => {
console.error("Error deleting item:", error);
alert("Something went wrong. Please try again.");
});
}
}
}
}
document.addEventListener("DOMContentLoaded", function (e) {
new DataSettings().init();
});