Files
sibedas/resources/js/master/users/users.js
2025-03-12 21:17:49 +07:00

91 lines
3.1 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 UsersTable {
init() {
this.initTableUsers();
}
initTableUsers() {
let tableContainer = document.getElementById("table-users");
let menuId = tableContainer.getAttribute("data-menuId");
tableContainer.innerHTML = "";
let canUpdate = tableContainer.getAttribute("data-updater") === "1";
new Grid({
columns: [
"ID",
"Name",
"Email",
"Firstname",
"Lastname",
"Position",
"Roles",
{
name: "Action",
formatter: (cell) => {
if (!canUpdate) {
return gridjs.html(
`<span class="text-muted">No Privilege</span>`
);
}
return gridjs.html(`
<div class="d-flex justify-content-center">
<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>
`);
},
},
],
pagination: {
limit: 50,
server: {
url: (prev, page) =>
`${prev}${prev.includes("?") ? "&" : "?"}page=${
page + 1
}`,
},
},
sort: true,
search: {
server: {
url: (prev, keyword) => `${prev}?search=${keyword}`,
},
debounceTimeout: 1000,
},
server: {
url: `${GlobalConfig.apiHost}/api/users`,
credentials: "include",
headers: {
Authorization: `Bearer ${document
.querySelector('meta[name="api-token"]')
.getAttribute("content")}`,
"Content-Type": "application/json",
},
then: (data) => {
console.log(data.data);
return data.data.map((item) => [
item.id,
item.name,
item.email,
item.firstname,
item.lastname,
item.position,
item.roles,
item.id,
]);
},
total: (data) => data.meta.total,
},
}).render(document.getElementById("table-users"));
}
}
document.addEventListener("DOMContentLoaded", function (e) {
new UsersTable().init();
});