JS static for dashboard

This commit is contained in:
Dita Aji Pratama 2024-09-26 12:35:19 +07:00
parent 6a72836098
commit a73a5ede4d
2 changed files with 194 additions and 0 deletions

View File

@ -0,0 +1,119 @@
var token = document.getElementById("form-token" ).value;
var table = $('#table-roles').DataTable({
"orderCellsTop": true, // move sorting to top header
"columnDefs": [
{ "orderable": false, "targets": [3] } // Disable sorting on the first and fourth columns
],
"ajax": {
"url": "/api/dashboard/roles/list",
"type": "POST", // Use POST method
"dataSrc": "data",
"contentType": "application/json",
"data": function(d) {
// Customize the data payload sent in the POST request
return JSON.stringify({
"token": token
});
},
"error": function (xhr, error, thrown) {
console.error('Error fetching data:', thrown);
console.error('Response:', xhr.responseText);
}
},
"columns": [
{
"data": "id",
"render": function(data, type, row) {
return `<span class="d-none">${data}</span><input ${data==1 ? 'disabled' : ''} class="form-control form-control-sm" placeholder="ID" id="form-edit-id-${data}" value="${data}">`;
}
},
{
"data": "name",
"render": function(data, type, row) {
return `<span class="d-none">${data}</span><input ${row.id==1 ? 'disabled' : ''} class="form-control form-control-sm" placeholder="Name" id="form-edit-name-${row.id}" value="${data}">`;
}
},
{
"data": "count",
"render": function(data, type, row) {
return `<span class="badge bg-${data==0 ? 'secondary' : 'success'}">${data} User(s)</span>`;
}
},
{
"data": null,
"defaultContent": "",
"render": function(data, type, row) {
if (row.id==1) return "";
else return `<button ${row.id==1 ? 'disabled' : ''} class="btn btn-success btn-sm" type="button" onclick="submitEdit(${row.id})">
<span class="fa fa-save"></span> Save
</button>
<button ${row.id==1 ? 'disabled' : ''} class="btn btn-danger btn-sm" type="button" onclick="if(confirm('Are you sure you want to delete this?')) { submitRemove(${row.id}); }">
<span class="fa fa-trash-alt"></span> Delete
</button>`;
}
}
],
"initComplete": function () {
// Custom init logic if needed
}
});
function submitAdd() {
var id = document.getElementById("form-add-id" ).value;
var name = document.getElementById("form-add-name" ).value;
var url = "/api/dashboard/roles/add";
var payload = {
"token" : token,
"id" : id,
"name" : name
};
sendHttpRequest(url, "POST", payload, function (error, response) {
if (error) console.error("Error:", error);
else {
table.ajax.reload(null, false); // false means keep the current page
console.log("JSON Response:", response);
}
}, "application/json");
}
function submitEdit(key) {
var id = document.getElementById(`form-edit-id-${key}` ).value;
var name = document.getElementById(`form-edit-name-${key}` ).value;
var url = "/api/dashboard/roles/edit";
var payload = {
"token" : token,
"key" : key,
"id" : id,
"name" : name
};
sendHttpRequest(url, "POST", payload, function (error, response) {
if (error) console.error("Error:", error);
else {
table.ajax.reload(null, false); // false means keep the current page
console.log("JSON Response:", response);
}
}, "application/json");
}
function submitRemove(key) {
var url = "/api/dashboard/roles/remove";
var payload = {
"token" : token,
"key" : key
};
sendHttpRequest(url, "POST", payload, function (error, response) {
if (error) console.error("Error:", error);
else {
table.ajax.reload(null, false); // false means keep the current page
console.log("JSON Response:", response);
}
}, "application/json");
}

View File

@ -0,0 +1,75 @@
var token = document.getElementById("form-token" ).value;
var table = $('#table-users').DataTable({
"columnDefs": [
{ "orderable": false, "targets": [4, 5, 6] } // Disable sorting on the first and fourth columns
],
"ajax": {
"url": "/api/dashboard/users/list",
"type": "POST", // Use POST method
"dataSrc": "data",
"contentType": "application/json",
"data": function(d) {
// Customize the data payload sent in the POST request
return JSON.stringify({
"token": token
});
},
"error": function (xhr, error, thrown) {
console.error('Error fetching data:', thrown);
console.error('Response:', xhr.responseText);
}
},
"columns": [
{
"data": "id",
"render": function(data, type, row) {
return `${data}`;
}
},
{
"data": "username",
"render": function(data, type, row) {
return `${data}`;
}
},
{
"data": "email",
"render": function(data, type, row) {
return `${data}`;
}
},
{
"data": "phone",
"render": function(data, type, row) {
return `${data}`;
}
},
{
"data": "roles",
"render": function(data, type, row) {
var roles = ""
for (let i = 0; i < data.length; i++) roles += `<span class="badge bg-primary m-1">${data[i].name}</span>`;
return roles;
}
},
{
"data": "verification",
"render": function(data, type, row) {
var verification = ""
for (let i = 0; i < data.length; i++) verification += `<span class="badge bg-${data[i].verified==0 ? 'danger' : 'success'} m-1"> <i class="fa fa-${data[i].verified==0 ? 'xmark' : 'check'}"></i> ${data[i].type}</span>`;
return verification;
}
},
{
"data": null,
"defaultContent": "",
"render": function(data, type, row) {
return "";
}
}
],
"initComplete": function () {
// Custom init logic if needed
}
});