add separator in js for handle showing value is number
This commit is contained in:
@@ -1,7 +1,7 @@
|
||||
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.js";
|
||||
import GlobalConfig, { addThousandSeparators } from "../global-config.js";
|
||||
import Swal from "sweetalert2";
|
||||
|
||||
class DataSettings {
|
||||
@@ -10,7 +10,7 @@ class DataSettings {
|
||||
this.toastElement = document.getElementById("toastNotification");
|
||||
this.toast = new bootstrap.Toast(this.toastElement);
|
||||
this.table = null;
|
||||
|
||||
|
||||
// Initialize immediately
|
||||
this.init();
|
||||
}
|
||||
@@ -29,7 +29,7 @@ class DataSettings {
|
||||
*/
|
||||
getApiToken() {
|
||||
const tokenMeta = document.querySelector('meta[name="api-token"]');
|
||||
return tokenMeta ? tokenMeta.getAttribute('content') : null;
|
||||
return tokenMeta ? tokenMeta.getAttribute("content") : null;
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -38,19 +38,21 @@ class DataSettings {
|
||||
*/
|
||||
getAuthHeaders() {
|
||||
const token = this.getApiToken();
|
||||
const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
|
||||
|
||||
const csrfToken = document
|
||||
.querySelector('meta[name="csrf-token"]')
|
||||
?.getAttribute("content");
|
||||
|
||||
const headers = {
|
||||
'Content-Type': 'application/json',
|
||||
'Accept': 'application/json',
|
||||
"Content-Type": "application/json",
|
||||
Accept: "application/json",
|
||||
};
|
||||
|
||||
if (token) {
|
||||
headers['Authorization'] = `Bearer ${token}`;
|
||||
headers["Authorization"] = `Bearer ${token}`;
|
||||
}
|
||||
|
||||
if (csrfToken) {
|
||||
headers['X-CSRF-TOKEN'] = csrfToken;
|
||||
headers["X-CSRF-TOKEN"] = csrfToken;
|
||||
}
|
||||
|
||||
return headers;
|
||||
@@ -58,33 +60,37 @@ class DataSettings {
|
||||
|
||||
/**
|
||||
* Make API request with authentication
|
||||
* @param {string} url
|
||||
* @param {object} options
|
||||
* @param {string} url
|
||||
* @param {object} options
|
||||
* @returns {Promise}
|
||||
*/
|
||||
async makeApiRequest(url, options = {}) {
|
||||
const defaultOptions = {
|
||||
headers: this.getAuthHeaders(),
|
||||
...options
|
||||
...options,
|
||||
};
|
||||
|
||||
try {
|
||||
const response = await fetch(url, defaultOptions);
|
||||
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP ${response.status}: ${response.statusText}`);
|
||||
throw new Error(
|
||||
`HTTP ${response.status}: ${response.statusText}`
|
||||
);
|
||||
}
|
||||
|
||||
return response;
|
||||
} catch (error) {
|
||||
console.error('API Request failed:', error);
|
||||
console.error("API Request failed:", error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
initEvents() {
|
||||
document.body.addEventListener("click", async (event) => {
|
||||
const deleteButton = event.target.closest(".btn-delete-data-settings");
|
||||
const deleteButton = event.target.closest(
|
||||
".btn-delete-data-settings"
|
||||
);
|
||||
if (deleteButton) {
|
||||
event.preventDefault();
|
||||
await this.handleDelete(deleteButton);
|
||||
@@ -99,7 +105,7 @@ class DataSettings {
|
||||
let canUpdate = tableContainer.getAttribute("data-updater") === "1";
|
||||
let canDelete = tableContainer.getAttribute("data-destroyer") === "1";
|
||||
let menuId = tableContainer.getAttribute("data-menuId");
|
||||
|
||||
|
||||
// Create a new Grid.js instance
|
||||
this.table = new Grid({
|
||||
columns: [
|
||||
@@ -143,7 +149,9 @@ class DataSettings {
|
||||
limit: 15,
|
||||
server: {
|
||||
url: (prev, page) =>
|
||||
`${prev}${prev.includes("?") ? "&" : "?"}page=${page + 1}`,
|
||||
`${prev}${prev.includes("?") ? "&" : "?"}page=${
|
||||
page + 1
|
||||
}`,
|
||||
},
|
||||
},
|
||||
sort: true,
|
||||
@@ -160,7 +168,9 @@ class DataSettings {
|
||||
data.data.map((item) => [
|
||||
item.id,
|
||||
item.key,
|
||||
item.value,
|
||||
item.type === "decimal"
|
||||
? addThousandSeparators(item.value, 0)
|
||||
: item.value,
|
||||
item.created_at,
|
||||
item.id,
|
||||
]),
|
||||
@@ -190,7 +200,8 @@ class DataSettings {
|
||||
);
|
||||
|
||||
const result = await response.json();
|
||||
this.toastMessage.innerText = result.message || "Deleted successfully!";
|
||||
this.toastMessage.innerText =
|
||||
result.message || "Deleted successfully!";
|
||||
this.toast.show();
|
||||
|
||||
// Refresh Grid.js table
|
||||
@@ -199,7 +210,8 @@ class DataSettings {
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error deleting item:", error);
|
||||
this.toastMessage.innerText = error.message || "An error occurred!";
|
||||
this.toastMessage.innerText =
|
||||
error.message || "An error occurred!";
|
||||
this.toast.show();
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user