add separator in js for handle showing value is number

This commit is contained in:
arifal
2025-06-24 12:02:17 +07:00
parent b895f61701
commit e5baf5318f
10 changed files with 105 additions and 74 deletions

View File

@@ -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();
}
}