create page tax with data, upload and export group by subdistrict
This commit is contained in:
arifal hidayat
168
resources/js/taxation/index.js
Normal file
168
resources/js/taxation/index.js
Normal file
@@ -0,0 +1,168 @@
|
||||
import { Grid } from "gridjs/dist/gridjs.umd.js";
|
||||
import "gridjs/dist/gridjs.umd.js";
|
||||
import GlobalConfig from "../global-config";
|
||||
import { addThousandSeparators } from "../global-config";
|
||||
|
||||
class Taxation {
|
||||
constructor() {
|
||||
this.toastMessage = document.getElementById("toast-message");
|
||||
this.toastElement = document.getElementById("toastNotification");
|
||||
this.toast = new bootstrap.Toast(this.toastElement);
|
||||
this.table = null;
|
||||
|
||||
this.initTableTaxation();
|
||||
// this.initEvents();
|
||||
this.handleExportToExcel();
|
||||
}
|
||||
|
||||
handleExportToExcel() {
|
||||
const button = document.getElementById("btn-export-excel");
|
||||
if (!button) {
|
||||
console.error("Button not found: #btn-export-excel");
|
||||
return;
|
||||
}
|
||||
|
||||
const exportUrl = button.getAttribute("data-url");
|
||||
|
||||
button.addEventListener("click", function () {
|
||||
button.disabled = true;
|
||||
|
||||
fetch(exportUrl, {
|
||||
method: "GET",
|
||||
credentials: "include",
|
||||
headers: {
|
||||
Authorization:
|
||||
"Bearer " +
|
||||
document
|
||||
.querySelector('meta[name="api-token"]')
|
||||
.getAttribute("content"),
|
||||
},
|
||||
})
|
||||
.then(function (response) {
|
||||
if (!response.ok) {
|
||||
throw new Error(
|
||||
"Error fetching data: " + response.statusText
|
||||
);
|
||||
}
|
||||
return response.blob();
|
||||
})
|
||||
.then(function (blob) {
|
||||
const url = window.URL.createObjectURL(blob);
|
||||
const a = document.createElement("a");
|
||||
a.href = url;
|
||||
a.download = "laporan-rekap-data-pembayaran.xlsx";
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
document.body.removeChild(a);
|
||||
window.URL.revokeObjectURL(url);
|
||||
})
|
||||
.catch(function (error) {
|
||||
console.error("Error fetching data:", error);
|
||||
})
|
||||
.finally(function () {
|
||||
button.disabled = false;
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
initEvents() {
|
||||
document.body.addEventListener("click", async (event) => {
|
||||
const deleteButton = event.target.closest(".btn-delete-taxation");
|
||||
if (deleteButton) {
|
||||
event.preventDefault();
|
||||
await this.handleDelete(deleteButton);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
initTableTaxation() {
|
||||
let tableContainer = document.getElementById("table-taxation");
|
||||
|
||||
if (!tableContainer) {
|
||||
console.error("Table container not found!");
|
||||
return;
|
||||
}
|
||||
|
||||
// Clear previous table content
|
||||
tableContainer.innerHTML = "";
|
||||
|
||||
this.table = new Grid({
|
||||
columns: [
|
||||
"ID",
|
||||
{ name: "Tax No" },
|
||||
{ name: "Tax Code" },
|
||||
{ name: "WP Name" },
|
||||
{ name: "Business Name" },
|
||||
{ name: "Address" },
|
||||
{ name: "Start Validity" },
|
||||
{ name: "End Validity" },
|
||||
{ name: "Tax Value" },
|
||||
{ name: "Subdistrict" },
|
||||
{ name: "Village" },
|
||||
],
|
||||
pagination: {
|
||||
limit: 50,
|
||||
server: {
|
||||
url: (prev, page) => {
|
||||
let separator = prev.includes("?") ? "&" : "?";
|
||||
return `${prev}${separator}page=${page + 1}`;
|
||||
},
|
||||
},
|
||||
},
|
||||
sort: true,
|
||||
search: {
|
||||
server: {
|
||||
url: (prev, keyword) => {
|
||||
let separator = prev.includes("?") ? "&" : "?";
|
||||
return `${prev}${separator}search=${encodeURIComponent(
|
||||
keyword
|
||||
)}`;
|
||||
},
|
||||
},
|
||||
debounceTimeout: 1000,
|
||||
},
|
||||
server: {
|
||||
url: `${GlobalConfig.apiHost}/api/taxs`,
|
||||
headers: {
|
||||
Authorization: `Bearer ${document
|
||||
.querySelector('meta[name="api-token"]')
|
||||
.getAttribute("content")}`,
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
then: (data) => {
|
||||
if (!data || !data.data) {
|
||||
console.warn("⚠️ No data received from API");
|
||||
return [];
|
||||
}
|
||||
|
||||
return data.data.map((item) => {
|
||||
return [
|
||||
item.id,
|
||||
item.tax_no,
|
||||
item.tax_code,
|
||||
item.wp_name,
|
||||
item.business_name,
|
||||
item.address,
|
||||
item.start_validity,
|
||||
item.end_validity,
|
||||
addThousandSeparators(item.tax_value),
|
||||
item.subdistrict,
|
||||
item.village,
|
||||
];
|
||||
});
|
||||
},
|
||||
total: (data) => {
|
||||
let totalRecords = data?.meta?.total || 0;
|
||||
return totalRecords;
|
||||
},
|
||||
catch: (error) => {
|
||||
console.error("❌ Error fetching data:", error);
|
||||
},
|
||||
},
|
||||
}).render(tableContainer);
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener("DOMContentLoaded", function (e) {
|
||||
new Taxation();
|
||||
});
|
||||
79
resources/js/taxation/upload.js
Normal file
79
resources/js/taxation/upload.js
Normal file
@@ -0,0 +1,79 @@
|
||||
import { Dropzone } from "dropzone";
|
||||
Dropzone.autoDiscover = false;
|
||||
|
||||
class UploadTaxation {
|
||||
constructor() {
|
||||
this.spatialDropzone = null;
|
||||
this.formElement = document.getElementById("formUploadTaxation");
|
||||
this.uploadButton = document.getElementById("submit-upload");
|
||||
this.spinner = document.getElementById("spinner");
|
||||
if (!this.formElement) {
|
||||
console.error("Element formUploadTaxation tidak ditemukan!");
|
||||
}
|
||||
}
|
||||
|
||||
init() {
|
||||
this.initDropzone();
|
||||
this.setupUploadButton();
|
||||
}
|
||||
|
||||
initDropzone() {
|
||||
const toastNotification = document.getElementById("toastNotification");
|
||||
const toast = new bootstrap.Toast(toastNotification);
|
||||
let menuId = document.getElementById("menuId").value;
|
||||
var previewTemplate,
|
||||
dropzonePreviewNode = document.querySelector(
|
||||
"#dropzone-preview-list"
|
||||
);
|
||||
(dropzonePreviewNode.id = ""),
|
||||
dropzonePreviewNode &&
|
||||
((previewTemplate = dropzonePreviewNode.parentNode.innerHTML),
|
||||
dropzonePreviewNode.parentNode.removeChild(dropzonePreviewNode),
|
||||
(this.spatialDropzone = new Dropzone(".dropzone", {
|
||||
url: this.formElement.action,
|
||||
method: "post",
|
||||
acceptedFiles: ".xls,.xlsx",
|
||||
previewTemplate: previewTemplate,
|
||||
previewsContainer: "#dropzone-preview",
|
||||
autoProcessQueue: false,
|
||||
headers: {
|
||||
Authorization: `Bearer ${document
|
||||
.querySelector('meta[name="api-token"]')
|
||||
.getAttribute("content")}`,
|
||||
},
|
||||
init: function () {
|
||||
this.on("success", function (file, response) {
|
||||
document.getElementById("toast-message").innerText =
|
||||
response.message;
|
||||
toast.show();
|
||||
setTimeout(() => {
|
||||
window.location.href = `/tax?menu_id=${menuId}`;
|
||||
}, 2000);
|
||||
});
|
||||
this.on("error", function (file, errorMessage) {
|
||||
document.getElementById("toast-message").innerText =
|
||||
errorMessage.message;
|
||||
toast.show();
|
||||
this.uploadButton.disabled = false;
|
||||
this.spinner.classList.add("d-none");
|
||||
});
|
||||
},
|
||||
})));
|
||||
}
|
||||
|
||||
setupUploadButton() {
|
||||
this.uploadButton.addEventListener("click", (e) => {
|
||||
if (this.spatialDropzone.files.length > 0) {
|
||||
this.spatialDropzone.processQueue();
|
||||
this.uploadButton.disabled = true;
|
||||
this.spinner.classList.remove("d-none");
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener("DOMContentLoaded", function (e) {
|
||||
new UploadTaxation().init();
|
||||
});
|
||||
Reference in New Issue
Block a user