261 lines
10 KiB
JavaScript
261 lines
10 KiB
JavaScript
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";
|
|
|
|
class BusinessIndustries {
|
|
constructor() {
|
|
this.table = null; // Store Grid.js instance
|
|
}
|
|
init() {
|
|
this.getFetchApiData();
|
|
}
|
|
|
|
getFetchApiData() {
|
|
let tableContainer = document.getElementById(
|
|
"table-business-industries"
|
|
);
|
|
|
|
if (this.table) {
|
|
// If table exists, update its data instead of recreating
|
|
this.table
|
|
.updateConfig({
|
|
server: {
|
|
url: `${GlobalConfig.apiHost}/api/api-business-industries`,
|
|
credentials: "include",
|
|
headers: {
|
|
Authorization: `Bearer ${document
|
|
.querySelector('meta[name="api-token"]')
|
|
.getAttribute("content")}`,
|
|
"Content-Type": "application/json",
|
|
},
|
|
then: (data) =>
|
|
data.data.map((item) => [
|
|
item.id,
|
|
item.nama_kecamatan,
|
|
item.nama_kelurahan,
|
|
item.nop,
|
|
item.nama_wajib_pajak,
|
|
item.alamat_wajib_pajak,
|
|
item.alamat_objek_pajak,
|
|
item.luas_bumi,
|
|
item.luas_bangunan,
|
|
item.njop_bumi,
|
|
item.njop_bangunan,
|
|
item.ketetapan,
|
|
item.tahun_pajak,
|
|
item.created_at,
|
|
item.id,
|
|
]),
|
|
total: (data) => data.total,
|
|
},
|
|
})
|
|
.forceRender();
|
|
return;
|
|
}
|
|
|
|
this.table = new Grid({
|
|
columns: [
|
|
{ name: "ID", width: "80px", hidden: false },
|
|
{ name: "Nama Kecamatan", width: "200px" },
|
|
{ name: "Nama Kelurahan", width: "200px" },
|
|
{ name: "NOP", width: "150px" },
|
|
{ name: "Nama Wajib Pajak", width: "250px" },
|
|
{ name: "Alamat Wajib Pajak", width: "300px" },
|
|
{ name: "Alamat Objek Pajak", width: "300px" },
|
|
{ name: "Luas Bumi", width: "150px" },
|
|
{ name: "Luas Bangunan", width: "150px" },
|
|
{ name: "NJOP Bumi", width: "150px" },
|
|
{ name: "NJOP Bangunan", width: "150px" },
|
|
{ name: "Ketetapan", width: "150px" },
|
|
{ name: "Tahun Pajak", width: "120px" },
|
|
{ name: "Created", width: "180px" },
|
|
{
|
|
name: "Actions",
|
|
width: "120px",
|
|
formatter: function (cell) {
|
|
return gridjs.html(`
|
|
<div class="d-flex justify-content-center gap-2">
|
|
<a href="/data/business-industries/${cell}/edit" class="btn btn-yellow btn-sm d-inline-flex align-items-center justify-content-center">
|
|
<i class='bx bx-edit'></i>
|
|
</a>
|
|
<button class="btn btn-sm btn-red d-inline-flex align-items-center justify-content-center btn-delete-business-industries" data-id="${cell}">
|
|
<i class='bx bxs-trash'></i>
|
|
</button>
|
|
</div>
|
|
`);
|
|
},
|
|
},
|
|
],
|
|
search: {
|
|
server: {
|
|
url: (prev, keyword) => `${prev}?search=${keyword}`,
|
|
},
|
|
},
|
|
pagination: {
|
|
limit: 15,
|
|
server: {
|
|
url: (prev, page) =>
|
|
`${prev}${prev.includes("?") ? "&" : "?"}page=${
|
|
page + 1
|
|
}`,
|
|
},
|
|
},
|
|
sort: true,
|
|
server: {
|
|
url: `${GlobalConfig.apiHost}/api/api-business-industries`,
|
|
headers: {
|
|
Authorization: `Bearer ${document
|
|
.querySelector('meta[name="api-token"]')
|
|
.getAttribute("content")}`,
|
|
"Content-Type": "application/json",
|
|
},
|
|
then: (data) =>
|
|
data.data.map((item) => [
|
|
item.id,
|
|
item.nama_kecamatan,
|
|
item.nama_kelurahan,
|
|
item.nop,
|
|
item.nama_wajib_pajak,
|
|
item.alamat_wajib_pajak,
|
|
item.alamat_objek_pajak,
|
|
item.luas_bumi,
|
|
item.luas_bangunan,
|
|
item.njop_bumi,
|
|
item.njop_bangunan,
|
|
item.ketetapan,
|
|
item.tahun_pajak,
|
|
item.created_at,
|
|
item.id, // ID for Actions column
|
|
]),
|
|
total: (data) => data.total,
|
|
},
|
|
}).render(tableContainer);
|
|
|
|
document.addEventListener("click", this.handleDelete.bind(this));
|
|
}
|
|
handleDelete(event) {
|
|
if (event.target.classList.contains("btn-delete-business-industries")) {
|
|
event.preventDefault();
|
|
const id = event.target.getAttribute("data-id");
|
|
let modalElement = document.getElementById("modalConfirmation");
|
|
let toastMessage = document.getElementById("toast-message");
|
|
|
|
if (!modalElement) {
|
|
console.error("Modal element not found!");
|
|
return;
|
|
}
|
|
|
|
let modal = new bootstrap.Modal(modalElement);
|
|
let btnSaveConfirmation = document.getElementById(
|
|
"btnSaveConfirmation"
|
|
);
|
|
let toastElement = document.getElementById("toastNotification");
|
|
let toast = new bootstrap.Toast(toastElement);
|
|
|
|
// Remove previous event listeners to avoid multiple bindings
|
|
btnSaveConfirmation.replaceWith(
|
|
btnSaveConfirmation.cloneNode(true)
|
|
);
|
|
btnSaveConfirmation = document.getElementById(
|
|
"btnSaveConfirmation"
|
|
);
|
|
|
|
// Set the role ID on the confirm button inside the modal
|
|
btnSaveConfirmation.setAttribute("data-business-industries-id", id);
|
|
|
|
// Show the modal
|
|
modal.show();
|
|
|
|
btnSaveConfirmation.addEventListener("click", async () => {
|
|
let deletedId = btnSaveConfirmation.getAttribute(
|
|
"data-business-industries-id"
|
|
);
|
|
|
|
try {
|
|
let response = await fetch(
|
|
`${GlobalConfig.apiHost}/api/api-business-industries/${deletedId}`,
|
|
{
|
|
method: "DELETE",
|
|
credentials: "include",
|
|
headers: {
|
|
"X-CSRF-TOKEN": document
|
|
.querySelector('meta[name="csrf-token"]')
|
|
.getAttribute("content"),
|
|
Authorization: `Bearer ${document
|
|
.querySelector('meta[name="api-token"]')
|
|
.getAttribute("content")}`,
|
|
"Content-Type": "application/json",
|
|
},
|
|
}
|
|
);
|
|
|
|
if (response.ok) {
|
|
let result = await response.json();
|
|
toastMessage.innerText =
|
|
result.message || "Deleted successfully!";
|
|
toast.show();
|
|
|
|
// Hide modal
|
|
modal.hide();
|
|
|
|
// Refresh Grid.js table
|
|
this.refreshDataSettings();
|
|
} else {
|
|
let error = await response.json();
|
|
console.error("Delete failed:", error);
|
|
toastMessage.innerText =
|
|
error.message || "Delete failed!";
|
|
toast.show();
|
|
}
|
|
} catch (error) {
|
|
console.error("Error deleting item:", error);
|
|
toastMessage.innerText = "An error occurred!";
|
|
toast.show();
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
refreshDataSettings() {
|
|
if (this.table) {
|
|
this.table
|
|
.updateConfig({
|
|
server: {
|
|
url: `${GlobalConfig.apiHost}/api/api-business-industries`,
|
|
credentials: "include",
|
|
headers: {
|
|
Authorization: `Bearer ${document
|
|
.querySelector('meta[name="api-token"]')
|
|
.getAttribute("content")}`,
|
|
"Content-Type": "application/json",
|
|
},
|
|
then: (data) =>
|
|
data.data.map((item) => [
|
|
item.id,
|
|
item.nama_kecamatan,
|
|
item.nama_kelurahan,
|
|
item.nop,
|
|
item.nama_wajib_pajak,
|
|
item.alamat_wajib_pajak,
|
|
item.alamat_objek_pajak,
|
|
item.luas_bumi,
|
|
item.luas_bangunan,
|
|
item.njop_bumi,
|
|
item.njop_bangunan,
|
|
item.ketetapan,
|
|
item.tahun_pajak,
|
|
item.created_at,
|
|
item.id, // ID for Actions column
|
|
]),
|
|
total: (data) => data.total,
|
|
},
|
|
})
|
|
.forceRender();
|
|
}
|
|
}
|
|
}
|
|
document.addEventListener("DOMContentLoaded", function (e) {
|
|
new BusinessIndustries().init();
|
|
});
|