add business industry crud
This commit is contained in:
arifal
125
resources/js/business-industries/create.js
Normal file
125
resources/js/business-industries/create.js
Normal file
@@ -0,0 +1,125 @@
|
||||
import { Dropzone } from "dropzone";
|
||||
import GlobalConfig from "../global-config";
|
||||
Dropzone.autoDiscover = false;
|
||||
|
||||
var previewTemplate,
|
||||
dropzone,
|
||||
dropzonePreviewNode = document.querySelector("#dropzone-preview-list");
|
||||
console.log(previewTemplate);
|
||||
console.log(dropzone);
|
||||
console.log(dropzonePreviewNode);
|
||||
|
||||
const toastNotification = document.getElementById("toastNotification");
|
||||
const toast = new bootstrap.Toast(toastNotification);
|
||||
|
||||
(dropzonePreviewNode.id = ""),
|
||||
dropzonePreviewNode &&
|
||||
((previewTemplate = dropzonePreviewNode.parentNode.innerHTML),
|
||||
dropzonePreviewNode.parentNode.removeChild(dropzonePreviewNode),
|
||||
(dropzone = new Dropzone(".dropzone", {
|
||||
url: `${GlobalConfig.apiHost}/api/api-business-industries/upload`,
|
||||
method: "post",
|
||||
acceptedFiles: ".xls,.xlsx", // Use acceptedFiles for better validation
|
||||
previewTemplate: previewTemplate,
|
||||
previewsContainer: "#dropzone-preview",
|
||||
autoProcessQueue: false, // Disable auto post
|
||||
headers: {
|
||||
Authorization: `Bearer ${document
|
||||
.querySelector('meta[name="api-token"]')
|
||||
.getAttribute("content")}`,
|
||||
},
|
||||
init: function () {
|
||||
// Listen for the success event
|
||||
this.on("success", function (file, response) {
|
||||
console.log("File successfully uploaded:", file);
|
||||
console.log("API Response:", response);
|
||||
|
||||
// Show success toast
|
||||
document.getElementById("toast-message").innerText =
|
||||
response.message;
|
||||
toast.show();
|
||||
document.getElementById("submit-upload").innerHTML =
|
||||
"Upload Files";
|
||||
// Tunggu sebentar lalu reload halaman
|
||||
setTimeout(() => {
|
||||
window.location.href = "/data/business-industries";
|
||||
}, 2000);
|
||||
});
|
||||
// Listen for the error event
|
||||
this.on("error", function (file, errorMessage) {
|
||||
console.error("Error uploading file:", file);
|
||||
console.error("Error message:", errorMessage);
|
||||
// Handle the error response
|
||||
|
||||
// Show error toast
|
||||
document.getElementById("toast-message").innerText =
|
||||
errorMessage.message;
|
||||
toast.show();
|
||||
document.getElementById("submit-upload").innerHTML =
|
||||
"Upload Files";
|
||||
});
|
||||
},
|
||||
})));
|
||||
|
||||
// Add event listener to control the submission manually
|
||||
document.querySelector("#submit-upload").addEventListener("click", function () {
|
||||
console.log("Ini adalah value dropzone", dropzone.files[0]);
|
||||
const formData = new FormData();
|
||||
console.log("Dropzonefiles", dropzone.files);
|
||||
|
||||
this.innerHTML =
|
||||
'<span class="spinner-border spinner-border-sm me-1" role="status" aria-hidden="true"></span>Loading...';
|
||||
|
||||
// Pastikan ada file dalam queue sebelum memprosesnya
|
||||
if (dropzone.files.length > 0) {
|
||||
formData.append("file", dropzone.files[0]);
|
||||
console.log("ini adalah form data on submit", ...formData);
|
||||
dropzone.processQueue(); // Ini akan manual memicu upload
|
||||
} else {
|
||||
// Show error toast when no file is selected
|
||||
document.getElementById("toast-message").innerText =
|
||||
"Please add a file first.";
|
||||
toast.show();
|
||||
|
||||
document.getElementById("submit-upload").innerHTML = "Upload Files";
|
||||
}
|
||||
});
|
||||
|
||||
// Optional: Listen for the 'addedfile' event to log or control file add behavior
|
||||
dropzone.on("addedfile", function (file) {
|
||||
console.log("File ditambahkan:", file);
|
||||
console.log("Nama File:", file.name);
|
||||
console.log("Tipe File:", file.type);
|
||||
console.log("Ukuran File:", (file.size / 1024).toFixed(2) + " KB");
|
||||
});
|
||||
|
||||
dropzone.on("complete", function (file) {
|
||||
dropzone.removeFile(file);
|
||||
});
|
||||
|
||||
// Function to show toast
|
||||
// function showToast(iconClass, iconColor, message) {
|
||||
// const toastElement = document.getElementById("toastUploadAdvertisement");
|
||||
// const toastBody = toastElement.querySelector(".toast-body");
|
||||
// const toastHeader = toastElement.querySelector(".toast-header");
|
||||
|
||||
// // Remove existing icon (if any) before adding the new one
|
||||
// const existingIcon = toastHeader.querySelector(".bx");
|
||||
// if (existingIcon) {
|
||||
// toastHeader.querySelector(".auth-logo").removeChild(existingIcon); // Remove the existing icon
|
||||
// }
|
||||
|
||||
// // Add the new icon to the toast header
|
||||
// const icon = document.createElement("i");
|
||||
// icon.classList.add("bx", iconClass);
|
||||
// icon.style.fontSize = "25px";
|
||||
// icon.style.color = iconColor;
|
||||
// toastHeader.querySelector(".auth-logo").appendChild(icon);
|
||||
|
||||
// // Set the toast message
|
||||
// toastBody.textContent = message;
|
||||
|
||||
// // Show the toast
|
||||
// const toast = new bootstrap.Toast(toastElement); // Inisialisasi Bootstrap Toast
|
||||
// toast.show();
|
||||
// }
|
||||
260
resources/js/business-industries/index.js
Normal file
260
resources/js/business-industries/index.js
Normal file
@@ -0,0 +1,260 @@
|
||||
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();
|
||||
});
|
||||
79
resources/js/business-industries/update.js
Normal file
79
resources/js/business-industries/update.js
Normal file
@@ -0,0 +1,79 @@
|
||||
class UpdateBusinessIndustries {
|
||||
init() {
|
||||
this.handleUpdateData();
|
||||
}
|
||||
|
||||
handleUpdateData() {
|
||||
const form = document.getElementById("formUpdateBusinessIndustries");
|
||||
const submitButton = document.getElementById(
|
||||
"btnUpdateBusinessIndustries"
|
||||
);
|
||||
const toastNotification = document.getElementById("toastNotification");
|
||||
const toastBody = document.getElementById("toastBody"); // Add an element inside toast to display messages
|
||||
const spinner = document.getElementById("spinner");
|
||||
const toast = new bootstrap.Toast(toastNotification);
|
||||
|
||||
if (!submitButton) {
|
||||
console.error("Error: Submit button not found!");
|
||||
return;
|
||||
}
|
||||
|
||||
submitButton.addEventListener("click", async function (e) {
|
||||
e.preventDefault();
|
||||
|
||||
// Disable button and show spinner
|
||||
submitButton.disabled = true;
|
||||
spinner.classList.remove("d-none");
|
||||
|
||||
// Create FormData object
|
||||
const formData = new FormData(form);
|
||||
const formObject = {};
|
||||
formData.forEach((value, key) => {
|
||||
formObject[key] = value;
|
||||
});
|
||||
formData.append("_method", "PUT");
|
||||
|
||||
try {
|
||||
let response = await fetch(form.action, {
|
||||
method: "POST", // Laravel's update route uses PUT, so adjust accordingly
|
||||
headers: {
|
||||
Authorization: `Bearer ${document
|
||||
.querySelector('meta[name="api-token"]')
|
||||
.getAttribute("content")}`,
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify(formObject),
|
||||
});
|
||||
|
||||
let data = await response.json();
|
||||
|
||||
if (response.ok) {
|
||||
// Show success toast
|
||||
document.getElementById("toast-message").innerText =
|
||||
data.message;
|
||||
toast.show();
|
||||
setTimeout(() => {
|
||||
window.location.href = "/data/business-industries";
|
||||
}, 2000);
|
||||
} else {
|
||||
// Show error toast with message from API
|
||||
document.getElementById("toast-message").innerText =
|
||||
data.message;
|
||||
toast.show();
|
||||
submitButton.disabled = false;
|
||||
spinner.classList.add("d-none");
|
||||
}
|
||||
} catch (error) {
|
||||
// Show error toast for network errors
|
||||
document.getElementById("toast-message").innerText =
|
||||
data.message;
|
||||
toast.show();
|
||||
submitButton.disabled = false;
|
||||
spinner.classList.add("d-none");
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
document.addEventListener("DOMContentLoaded", function (e) {
|
||||
new UpdateBusinessIndustries().init();
|
||||
});
|
||||
@@ -57,7 +57,7 @@ class DataSettings {
|
||||
<a href="/data-settings/${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-centerbtn-delete-data-settings" data-id="${cell}">
|
||||
<button class="btn btn-sm btn-red d-inline-flex align-items-center justify-content-center btn-delete-data-settings" data-id="${cell}">
|
||||
<i class='bx bxs-trash' ></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -44,12 +44,18 @@ document.addEventListener("DOMContentLoaded", function (e) {
|
||||
error.message;
|
||||
toast.show();
|
||||
console.error("Error:", error);
|
||||
|
||||
submitButton.disabled = false;
|
||||
spinner.classList.add("d-none");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Request failed:", error);
|
||||
document.getElementById("toast-message").innerText =
|
||||
error.message;
|
||||
toast.show();
|
||||
|
||||
submitButton.disabled = false;
|
||||
spinner.classList.add("d-none");
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user