105 lines
4.0 KiB
JavaScript
105 lines
4.0 KiB
JavaScript
import { Grid } from "gridjs/dist/gridjs.umd.js";
|
|
import "gridjs/dist/gridjs.umd.js";
|
|
import gridjs from "gridjs/dist/gridjs.umd.js";
|
|
import GlobalConfig, { addThousandSeparators } from "../global-config.js";
|
|
import moment from "moment";
|
|
import InitDatePicker from "../utils/InitDatePicker.js";
|
|
|
|
class PaymentRecaps {
|
|
constructor() {
|
|
this.toastMessage = document.getElementById("toast-message");
|
|
this.toastElement = document.getElementById("toastNotification");
|
|
this.toast = new bootstrap.Toast(this.toastElement);
|
|
this.table = null;
|
|
this.initTablePaymentRecaps();
|
|
this.initFilterDatepicker();
|
|
}
|
|
initFilterDatepicker() {
|
|
new InitDatePicker(
|
|
"#datepicker-payment-recap",
|
|
this.handleChangeFilterDate.bind(this)
|
|
).init();
|
|
}
|
|
handleChangeFilterDate(strDate) {
|
|
console.log("filter date : ", strDate);
|
|
}
|
|
formatCategory(category) {
|
|
const categoryMap = {
|
|
potention_sum: "Potensi",
|
|
non_verified_sum: "Belum Terverifikasi",
|
|
verified_sum: "Terverifikasi",
|
|
business_sum: "Usaha",
|
|
non_business_sum: "Non Usaha",
|
|
spatial_sum: "Tata Ruang",
|
|
waiting_click_dpmptsp_sum: "Menunggu Klik DPMPTSP",
|
|
issuance_realization_pbg_sum: "Realisasi Terbit PBG",
|
|
process_in_technical_office_sum: "Proses Di Dinas Teknis",
|
|
};
|
|
|
|
return categoryMap[category] || category; // Return mapped value or original category
|
|
}
|
|
initTablePaymentRecaps() {
|
|
let tableContainer = document.getElementById("table-payment-recaps");
|
|
|
|
this.table = new Grid({
|
|
columns: [
|
|
{ name: "Kategori", data: (row) => row[0] },
|
|
{ name: "Nominal", data: (row) => row[1] },
|
|
{
|
|
name: "Created",
|
|
data: (row) => row[2],
|
|
attributes: { style: "width: 200px; white-space: nowrap;" },
|
|
},
|
|
],
|
|
pagination: {
|
|
limit: 10,
|
|
server: {
|
|
url: (prev, page) =>
|
|
`${prev}${prev.includes("?") ? "&" : "?"}page=${
|
|
page + 1
|
|
}`,
|
|
},
|
|
},
|
|
sort: true,
|
|
server: {
|
|
url: `${GlobalConfig.apiHost}/api/payment-recaps`,
|
|
headers: {
|
|
Authorization: `Bearer ${document
|
|
.querySelector('meta[name="api-token"]')
|
|
.getAttribute("content")}`,
|
|
"Content-Type": "application/json",
|
|
},
|
|
then: (response) => {
|
|
console.log("API Response:", response); // Debugging
|
|
|
|
if (!response.data || !Array.isArray(response.data)) {
|
|
console.error(
|
|
"Error: Data is not an array",
|
|
response.data
|
|
);
|
|
return [];
|
|
}
|
|
|
|
return response.data.map((item) => [
|
|
this.formatCategory(item.category ?? "Unknown"), // Ensure category is not null
|
|
addThousandSeparators(
|
|
Number(item.nominal).toString() || 0
|
|
), // Ensure nominal is a valid number
|
|
moment(item.created_at).isValid()
|
|
? moment(item.created_at).format(
|
|
"YYYY-MM-DD H:mm:ss"
|
|
)
|
|
: "-", // Handle invalid dates
|
|
]);
|
|
},
|
|
total: (response) => response.pagination?.total || 0,
|
|
},
|
|
width: "auto",
|
|
fixedHeader: true,
|
|
}).render(tableContainer);
|
|
}
|
|
}
|
|
document.addEventListener("DOMContentLoaded", function (e) {
|
|
new PaymentRecaps();
|
|
});
|