create user role and menu, create seeder for first user and create crud role, menu and user
This commit is contained in:
arifal
@@ -17,6 +17,15 @@ class UsersTable {
|
||||
"Firstname",
|
||||
"Lastname",
|
||||
"Position",
|
||||
"Roles",
|
||||
{
|
||||
name: "Action",
|
||||
formatter: (cell) =>
|
||||
gridjs.html(`
|
||||
<div class="d-flex justify-content-end gap-x-2">
|
||||
<a href="/master/users/${cell}/edit" class="btn btn-yellow me-2">Update</a>
|
||||
`),
|
||||
},
|
||||
],
|
||||
pagination: {
|
||||
limit: 15,
|
||||
@@ -42,15 +51,19 @@ class UsersTable {
|
||||
.getAttribute("content")}`,
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
then: (data) =>
|
||||
data.data.map((item) => [
|
||||
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"));
|
||||
|
||||
109
resources/js/menus/index.js
Normal file
109
resources/js/menus/index.js
Normal file
@@ -0,0 +1,109 @@
|
||||
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 Menus {
|
||||
init() {
|
||||
this.initTableMenus();
|
||||
}
|
||||
|
||||
initTableMenus() {
|
||||
new Grid({
|
||||
columns: [
|
||||
"ID",
|
||||
"Name",
|
||||
"Url",
|
||||
"Icon",
|
||||
"ParentID",
|
||||
"Sort Order",
|
||||
{
|
||||
name: "Action",
|
||||
formatter: (cell) =>
|
||||
gridjs.html(`
|
||||
<div class="d-flex justify-content-end gap-x-2">
|
||||
<a href="/menus/${cell}/edit" class="btn btn-yellow me-2">Update</a>
|
||||
<button class="btn btn-red btn-delete btn-delete-menu" data-id="${cell}">Delete</button>
|
||||
`),
|
||||
},
|
||||
],
|
||||
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-menus`,
|
||||
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.url,
|
||||
item.icon,
|
||||
item.parent_id,
|
||||
item.sort_order,
|
||||
item.id,
|
||||
]),
|
||||
total: (data) => data.total,
|
||||
},
|
||||
}).render(document.getElementById("table-menus"));
|
||||
|
||||
document.addEventListener("click", this.handleDelete);
|
||||
}
|
||||
|
||||
handleDelete(event) {
|
||||
if (event.target.classList.contains("btn-delete-menu")) {
|
||||
event.preventDefault();
|
||||
const id = event.target.getAttribute("data-id");
|
||||
|
||||
if (confirm("Are you sure you want to delete this item?")) {
|
||||
fetch(`/menus/${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 Menus().init();
|
||||
});
|
||||
103
resources/js/roles/index.js
Normal file
103
resources/js/roles/index.js
Normal file
@@ -0,0 +1,103 @@
|
||||
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>
|
||||
<button class="btn btn-red btn-delete btn-delete-role" data-id="${cell}">Delete</button>
|
||||
`),
|
||||
},
|
||||
],
|
||||
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");
|
||||
|
||||
if (confirm("Are you sure you want to delete this item?")) {
|
||||
fetch(`/roles/${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 Roles().init();
|
||||
});
|
||||
Reference in New Issue
Block a user