fix datatable using token api and paginate when searching, fix skrd_amount column to decimal 20
This commit is contained in:
arifal hidayat
File diff suppressed because it is too large
Load Diff
60
resources/js/master/users/users.js
Normal file
60
resources/js/master/users/users.js
Normal file
@@ -0,0 +1,60 @@
|
||||
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() {
|
||||
new Grid({
|
||||
columns: [
|
||||
"ID",
|
||||
"Name",
|
||||
"Email",
|
||||
"Firstname",
|
||||
"Lastname",
|
||||
"Position",
|
||||
],
|
||||
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/users`,
|
||||
credentials: "include",
|
||||
headers: {
|
||||
Authorization: `Bearer ${localStorage.getItem("token")}`,
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
then: (data) =>
|
||||
data.data.map((item) => [
|
||||
item.id,
|
||||
item.name,
|
||||
item.email,
|
||||
item.firstname,
|
||||
item.lastname,
|
||||
item.position,
|
||||
]),
|
||||
total: (data) => data.meta.total,
|
||||
},
|
||||
}).render(document.getElementById("table-users"));
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener("DOMContentLoaded", function (e) {
|
||||
new UsersTable().init();
|
||||
});
|
||||
67
resources/js/request-assignment/request-assignment.js
Normal file
67
resources/js/request-assignment/request-assignment.js
Normal file
@@ -0,0 +1,67 @@
|
||||
import { Grid } from "gridjs/dist/gridjs.umd.js";
|
||||
import "gridjs/dist/gridjs.umd.js";
|
||||
import GlobalConfig from "../global-config";
|
||||
|
||||
class RequestAssignment {
|
||||
init() {
|
||||
this.initTableRequestAssignment();
|
||||
}
|
||||
|
||||
initTableRequestAssignment() {
|
||||
new Grid({
|
||||
columns: [
|
||||
"ID",
|
||||
"Name",
|
||||
"Condition",
|
||||
"Registration Number",
|
||||
"Document Number",
|
||||
"Address",
|
||||
"Status",
|
||||
"Function Type",
|
||||
"Consultation Type",
|
||||
"Due Date",
|
||||
],
|
||||
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/request-assignments`,
|
||||
credentials: "include",
|
||||
headers: {
|
||||
Authorization: `Bearer ${localStorage.getItem("token")}`,
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
then: (data) =>
|
||||
data.data.map((item) => [
|
||||
item.id,
|
||||
item.name,
|
||||
item.condition,
|
||||
item.registration_number,
|
||||
item.document_number,
|
||||
item.address,
|
||||
item.status_name,
|
||||
item.function_type,
|
||||
item.consultation_type,
|
||||
item.due_date,
|
||||
]),
|
||||
total: (data) => data.meta.total,
|
||||
},
|
||||
}).render(document.getElementById("table-request-assignment"));
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener("DOMContentLoaded", function (e) {
|
||||
new RequestAssignment().init();
|
||||
});
|
||||
@@ -29,24 +29,26 @@ class SyncronizeTask {
|
||||
},
|
||||
},
|
||||
],
|
||||
search: {
|
||||
server: {
|
||||
url: (prev, keyword) => `${prev}?search=${keyword}`,
|
||||
},
|
||||
},
|
||||
pagination: {
|
||||
limit: 15,
|
||||
server: {
|
||||
url: (prev, page, limit) => `${prev}?page=${page}`,
|
||||
url: (prev, page) =>
|
||||
`${prev}${prev.includes("?") ? "&" : "?"}page=${
|
||||
page + 1
|
||||
}`,
|
||||
},
|
||||
},
|
||||
sort: true,
|
||||
search: {
|
||||
server: {
|
||||
url: (prev, page, keyword) =>
|
||||
`${prev}?page=${page}&search=${keyword}`,
|
||||
},
|
||||
},
|
||||
server: {
|
||||
url: `${GlobalConfig.apiHost}/api/global-settings`,
|
||||
headers: {
|
||||
Authorization: `Bearer ${document
|
||||
.querySelector('meta[name="csrf-token"]')
|
||||
.querySelector('meta[name="api-token"]')
|
||||
.getAttribute("content")}`,
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
@@ -59,6 +61,7 @@ class SyncronizeTask {
|
||||
item.created_at,
|
||||
item.id,
|
||||
]),
|
||||
total: (data) => data.meta.total,
|
||||
},
|
||||
});
|
||||
table.render(document.getElementById("general-setting-table"));
|
||||
@@ -100,9 +103,6 @@ class SyncronizeTask {
|
||||
}
|
||||
}
|
||||
}
|
||||
document.addEventListener("click", function (e) {
|
||||
handleDelete(e); // Call the function on click event
|
||||
});
|
||||
document.addEventListener("DOMContentLoaded", function (e) {
|
||||
new SyncronizeTask().init();
|
||||
});
|
||||
|
||||
@@ -1,52 +1,67 @@
|
||||
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.js";
|
||||
|
||||
class SyncronizeTask {
|
||||
init(){
|
||||
this.initTableImportDatasources();
|
||||
this.onSyncSubmit();
|
||||
}
|
||||
initTableImportDatasources(){
|
||||
new Grid({
|
||||
columns: [
|
||||
"ID", "Message", "Response", "Status", "Created",
|
||||
],
|
||||
pagination: {
|
||||
limit: 15,
|
||||
server: {
|
||||
url: (prev, page, limit) => `${prev}?page=${page}`
|
||||
}
|
||||
},
|
||||
sort: true,
|
||||
search: {
|
||||
server: {
|
||||
url: (prev, page, keyword) => `${prev}?page=${page}&search=${keyword}`
|
||||
}
|
||||
},
|
||||
server: {
|
||||
url: `${GlobalConfig.apiHost}/api/import-datasource`,
|
||||
then: data => data.data.map((item) => [item.id, item.message, item.response_body, item.status, item.created_at])
|
||||
}
|
||||
}).render(document.getElementById("table-import-datasources"));
|
||||
}
|
||||
onSyncSubmit(){
|
||||
const form = document.getElementById("sync-form");
|
||||
if(form){
|
||||
form.addEventListener("submit", function (event) {
|
||||
event.preventDefault(); // Prevent the default form submission
|
||||
|
||||
const button = document.getElementById("btn-sync-submit");
|
||||
if (button) {
|
||||
button.disabled = true;
|
||||
button.innerText = "Processing...";
|
||||
}
|
||||
form.submit();
|
||||
});
|
||||
init() {
|
||||
this.initTableImportDatasources();
|
||||
this.onSyncSubmit();
|
||||
}
|
||||
initTableImportDatasources() {
|
||||
new Grid({
|
||||
columns: ["ID", "Message", "Response", "Status", "Created"],
|
||||
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/import-datasource`,
|
||||
headers: {
|
||||
Authorization: `Bearer ${document
|
||||
.querySelector('meta[name="api-token"]')
|
||||
.getAttribute("content")}`,
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
then: (data) =>
|
||||
data.data.map((item) => [
|
||||
item.id,
|
||||
item.message,
|
||||
item.response_body,
|
||||
item.status,
|
||||
item.created_at,
|
||||
]),
|
||||
total: (data) => data.meta.total,
|
||||
},
|
||||
}).render(document.getElementById("table-import-datasources"));
|
||||
}
|
||||
onSyncSubmit() {
|
||||
const form = document.getElementById("sync-form");
|
||||
if (form) {
|
||||
form.addEventListener("submit", function (event) {
|
||||
event.preventDefault(); // Prevent the default form submission
|
||||
|
||||
const button = document.getElementById("btn-sync-submit");
|
||||
if (button) {
|
||||
button.disabled = true;
|
||||
button.innerText = "Processing...";
|
||||
}
|
||||
form.submit();
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
document.addEventListener('DOMContentLoaded', function (e) {
|
||||
new SyncronizeTask().init();
|
||||
});
|
||||
document.addEventListener("DOMContentLoaded", function (e) {
|
||||
new SyncronizeTask().init();
|
||||
});
|
||||
|
||||
@@ -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();
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user