261 lines
9.6 KiB
JavaScript
261 lines
9.6 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.startDate = undefined;
|
|
this.endDate = undefined;
|
|
}
|
|
init() {
|
|
this.initTablePaymentRecaps();
|
|
this.initFilterDatepicker();
|
|
this.handleFilterBtn();
|
|
this.handleExportPDF();
|
|
this.handleExportToExcel();
|
|
}
|
|
initFilterDatepicker() {
|
|
new InitDatePicker(
|
|
"#datepicker-payment-recap",
|
|
this.handleChangeFilterDate.bind(this)
|
|
).init();
|
|
}
|
|
handleChangeFilterDate(filterDate) {
|
|
this.startDate = moment(filterDate, "YYYY-MM-DD")
|
|
.startOf("day")
|
|
.format("YYYY-MM-DD");
|
|
this.endDate = moment(filterDate, "YYYY-MM-DD")
|
|
.endOf("day")
|
|
.format("YYYY-MM-DD");
|
|
}
|
|
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");
|
|
|
|
// Fetch data from the server
|
|
fetch(
|
|
`${GlobalConfig.apiHost}/api/payment-recaps?start_date=${
|
|
this.startDate || ""
|
|
}&end_date=${this.endDate || ""}`,
|
|
{
|
|
headers: {
|
|
Authorization: `Bearer ${document
|
|
.querySelector('meta[name="api-token"]')
|
|
.getAttribute("content")}`,
|
|
"Content-Type": "application/json",
|
|
},
|
|
}
|
|
)
|
|
.then((response) => response.json())
|
|
.then((data) => {
|
|
if (!data || !Array.isArray(data.data)) {
|
|
console.error("Error: Data is not an array", data);
|
|
return;
|
|
}
|
|
|
|
let formattedData = data.data.map((item) => [
|
|
this.formatCategory(item.category ?? "Unknown"),
|
|
addThousandSeparators(Number(item.nominal).toString() || 0),
|
|
moment(item.created_at).isValid()
|
|
? moment(item.created_at).format("YYYY-MM-DD H:mm:ss")
|
|
: "-",
|
|
]);
|
|
|
|
// 🔥 If the table already exists, update it instead of re-creating
|
|
if (this.table) {
|
|
this.table
|
|
.updateConfig({
|
|
data: formattedData.length > 0 ? formattedData : [],
|
|
})
|
|
.forceRender();
|
|
} else {
|
|
// 🔹 First-time initialization
|
|
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: 50,
|
|
},
|
|
sort: true,
|
|
data: formattedData.length > 0 ? formattedData : [],
|
|
width: "auto",
|
|
fixedHeader: true,
|
|
}).render(tableContainer);
|
|
}
|
|
})
|
|
.catch((error) => console.error("Error fetching data:", error));
|
|
}
|
|
|
|
async handleFilterBtn() {
|
|
const filterBtn = document.getElementById("btnFilterData");
|
|
if (!filterBtn) {
|
|
console.error("Button not found: #btnFilterData");
|
|
return;
|
|
}
|
|
filterBtn.addEventListener("click", async () => {
|
|
if (!this.startDate || !this.endDate) {
|
|
console.log("No date filter applied, using default data");
|
|
} else {
|
|
console.log(
|
|
`Filtering with dates: ${this.startDate} - ${this.endDate}`
|
|
);
|
|
}
|
|
|
|
// Reinitialize table with updated filters
|
|
this.initTablePaymentRecaps();
|
|
});
|
|
}
|
|
|
|
async handleExportToExcel() {
|
|
const button = document.getElementById("btn-export-excel");
|
|
if (!button) {
|
|
console.error("Button not found: #btn-export-excel");
|
|
return;
|
|
}
|
|
|
|
button.addEventListener("click", async () => {
|
|
button.disabled = true;
|
|
let exportUrl = new URL(button.getAttribute("data-url"));
|
|
|
|
if (this.startDate) {
|
|
exportUrl.searchParams.append("start_date", this.startDate);
|
|
} else {
|
|
console.warn("⚠️ start_date is missing");
|
|
}
|
|
|
|
if (this.endDate) {
|
|
exportUrl.searchParams.append("end_date", this.endDate);
|
|
} else {
|
|
console.warn("⚠️ end_date is missing");
|
|
}
|
|
|
|
// Final check
|
|
console.log("Final Export URL:", exportUrl.toString());
|
|
try {
|
|
const response = await fetch(`${exportUrl}`, {
|
|
method: "GET",
|
|
credentials: "include",
|
|
headers: {
|
|
Authorization: `Bearer ${document
|
|
.querySelector('meta[name="api-token"]')
|
|
.getAttribute("content")}`,
|
|
},
|
|
});
|
|
if (!response.ok) {
|
|
console.error("Error fetching data:", response.statusText);
|
|
button.disabled = false;
|
|
return;
|
|
}
|
|
|
|
// Convert response to Blob and trigger download
|
|
const blob = await response.blob();
|
|
const url = window.URL.createObjectURL(blob);
|
|
const a = document.createElement("a");
|
|
a.href = url;
|
|
a.download = "rekap-pembayaran.xlsx";
|
|
document.body.appendChild(a);
|
|
a.click();
|
|
document.body.removeChild(a);
|
|
window.URL.revokeObjectURL(url);
|
|
} catch (error) {
|
|
console.error("Error fetching data:", error);
|
|
button.disabled = false;
|
|
return;
|
|
} finally {
|
|
button.disabled = false;
|
|
}
|
|
});
|
|
}
|
|
|
|
async handleExportPDF() {
|
|
const button = document.getElementById("btn-export-pdf");
|
|
if (!button) {
|
|
console.error("Button not found: #btn-export-pdf");
|
|
return;
|
|
}
|
|
|
|
button.addEventListener("click", async () => {
|
|
button.disabled = true;
|
|
let exportUrl = new URL(button.getAttribute("data-url"));
|
|
|
|
if (this.startDate) {
|
|
exportUrl.searchParams.append("start_date", this.startDate);
|
|
} else {
|
|
console.warn("⚠️ start_date is missing");
|
|
}
|
|
|
|
if (this.endDate) {
|
|
exportUrl.searchParams.append("end_date", this.endDate);
|
|
} else {
|
|
console.warn("⚠️ end_date is missing");
|
|
}
|
|
try {
|
|
const response = await fetch(`${exportUrl}`, {
|
|
method: "GET",
|
|
credentials: "include",
|
|
headers: {
|
|
Authorization: `Bearer ${document
|
|
.querySelector('meta[name="api-token"]')
|
|
.getAttribute("content")}`,
|
|
},
|
|
});
|
|
if (!response.ok) {
|
|
console.error("Error fetching data:", response.statusText);
|
|
button.disabled = false;
|
|
return;
|
|
}
|
|
|
|
// Convert response to Blob and trigger download
|
|
const blob = await response.blob();
|
|
const url = window.URL.createObjectURL(blob);
|
|
const a = document.createElement("a");
|
|
a.href = url;
|
|
a.download = "rekap-pembayaran.pdf";
|
|
document.body.appendChild(a);
|
|
a.click();
|
|
document.body.removeChild(a);
|
|
window.URL.revokeObjectURL(url);
|
|
} catch (error) {
|
|
console.error("Error fetching data:", error);
|
|
button.disabled = false;
|
|
return;
|
|
} finally {
|
|
button.disabled = false;
|
|
}
|
|
});
|
|
}
|
|
}
|
|
document.addEventListener("DOMContentLoaded", function (e) {
|
|
new PaymentRecaps().init();
|
|
});
|