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

fix datatable using token api and paginate when searching, fix skrd_amount column to decimal 20

Browse Source
This commit is contained in:
arifal hidayat
2025-01-30 01:28:36 +07:00
parent 538cdb87ae
commit 8591fafd84
27 changed files with 1228 additions and 1012 deletions
Download Patch File Download Diff File Expand all files Collapse all files

170
resources/js/tables/common-table.js
View File

@@ -1,128 +1,70 @@
import { Grid } from "gridjs/dist/gridjs.umd.js";
import gridjs from 'gridjs/dist/gridjs.umd.js'
import '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 CommonTable {
init() {
// this.CommonTableInit();
this.CommonTableInitWithFetchApi();
}
init() {
// this.CommonTableInit();
this.CommonTableInitWithFetchApi();
}
CommonTableInit() {
new Grid({
columns: [
{
name: 'ID',
formatter: (function (cell) {
return gridjs.html('<span class="fw-semibold">' + cell + '</span>');
})
},
"Name",
{
name: 'Email',
formatter: (function (cell) {
return gridjs.html('<a href="">' + cell + '</a>');
})
},
"Position", "Company", "Country",
{
name: 'Actions',
width: '120px',
formatter: (function (cell) {
return gridjs.html(`
CommonTableInitWithFetchApi() {
fetch(`${GlobalConfig.apiHost}/api/users`)
.then((response) => response.json())
.then((data) => {
console.log("check log response");
console.log(data.data);
new Grid({
columns: [
{
name: "id",
formatter: function (cell) {
return gridjs.html(
'<span class="fw-semibold">' +
cell +
"</span>"
);
},
},
"name",
{
name: "email",
formatter: function (cell) {
return gridjs.html(
'<a href="">' + cell + "</a>"
);
},
},
"position",
"firstname",
"lastname",
{
name: "Actions",
width: "120px",
formatter: function (cell) {
return gridjs.html(`
<div class="d-flex justify-items-end gap-10">
<a href="#" class="text-primary text-decoration-underline me-2">Details</a>
<a href="#" class="text-warning text-decoration-underline me-2">Update</a>
<a href="#" class="text-danger text-decoration-underline">Delete</a>
</div>
`);
})
},
],
pagination: {
limit: 10
},
sort: true,
search: true,
data: [
["11", "Alice", "alice@example.com", "Software Engineer", "ABC Company", "United States"],
["12", "Bob", "bob@example.com", "Product Manager", "XYZ Inc", "Canada"],
["13", "Charlie", "charlie@example.com", "Data Analyst", "123 Corp", "Australia"],
["14", "David", "david@example.com", "UI/UX Designer", "456 Ltd", "United Kingdom"],
["15", "Eve", "eve@example.com", "Marketing Specialist", "789 Enterprises", "France"],
["11", "Alice", "alice@example.com", "Software Engineer", "ABC Company", "United States"],
["12", "Bob", "bob@example.com", "Product Manager", "XYZ Inc", "Canada"],
["13", "Charlie", "charlie@example.com", "Data Analyst", "123 Corp", "Australia"],
["14", "David", "david@example.com", "UI/UX Designer", "456 Ltd", "United Kingdom"],
["15", "Eve", "eve@example.com", "Marketing Specialist", "789 Enterprises", "France"],
["11", "Alice", "alice@example.com", "Software Engineer", "ABC Company", "United States"],
["12", "Bob", "bob@example.com", "Product Manager", "XYZ Inc", "Canada"],
["13", "Charlie", "charlie@example.com", "Data Analyst", "123 Corp", "Australia"],
["14", "David", "david@example.com", "UI/UX Designer", "456 Ltd", "United Kingdom"],
["15", "Eve", "eve@example.com", "Marketing Specialist", "789 Enterprises", "France"],
["11", "Alice", "alice@example.com", "Software Engineer", "ABC Company", "United States"],
["12", "Bob", "bob@example.com", "Product Manager", "XYZ Inc", "Canada"],
["13", "Charlie", "charlie@example.com", "Data Analyst", "123 Corp", "Australia"],
["14", "David", "david@example.com", "UI/UX Designer", "456 Ltd", "United Kingdom"],
["15", "Eve", "eve@example.com", "Marketing Specialist", "789 Enterprises", "France"],
["16", "Frank", "frank@example.com", "HR Manager", "ABC Company", "Germany"],
["17", "Grace", "grace@example.com", "Financial Analyst", "XYZ Inc", "Japan"],
["18", "Hannah", "hannah@example.com", "Sales Representative", "123 Corp", "Brazil"],
["19", "Ian", "ian@example.com", "Software Developer", "456 Ltd", "India"],
["20", "Jane", "jane@example.com", "Operations Manager", "789 Enterprises", "China"]
]
}).render(document.getElementById("common-table"));
}
CommonTableInitWithFetchApi(){
fetch(`${GlobalConfig.apiHost}/api/users`)
.then((response) => response.json())
.then((data) => {
console.log("check log response");
console.log(data.data);
new Grid({
columns: [
{
name: 'id',
formatter: (function (cell) {
return gridjs.html('<span class="fw-semibold">' + cell + '</span>');
},
},
],
pagination: {
limit: 10,
},
sort: true,
search: true,
data: data,
}).render(document.getElementById("common-table"));
})
},
"name",
{
name: 'email',
formatter: (function (cell) {
return gridjs.html('<a href="">' + cell + '</a>');
})
},
"position", "firstname", "lastname",
{
name: 'Actions',
width: '120px',
formatter: (function (cell) {
return gridjs.html(`
<div class="d-flex justify-items-end gap-10">
<a href="#" class="text-primary text-decoration-underline me-2">Details</a>
<a href="#" class="text-warning text-decoration-underline me-2">Update</a>
<a href="#" class="text-danger text-decoration-underline">Delete</a>
</div>
`);
})
},
],
pagination: {
limit: 10
},
sort: true,
search: true,
data: data
}).render(document.getElementById("common-table"));
})
.catch((error) => console.error("Error fetching data: " + error));
}
.catch((error) => console.error("Error fetching data: " + error));
}
}
document.addEventListener('DOMContentLoaded', function (e) {
new CommonTable().init();
});
document.addEventListener("DOMContentLoaded", function (e) {
new CommonTable().init();
});