${
cell.attachment_berita_acara
? `
Berita Acara
`
: `
`
}
${
cell.attachment_bukti_bayar
? `
Bukti Bayar
`
: `
`
}
`);
},
},
],
search: {
server: {
url: (prev, keyword) => `${prev}?search=${keyword}`,
},
debounceTimeout: 1000,
},
pagination: {
limit: 15,
server: {
url: (prev, page) =>
`${prev}${prev.includes("?") ? "&" : "?"}page=${
page + 1
}`,
},
},
sort: true,
server: {
url: `${GlobalConfig.apiHost}/api/request-assignments`,
credentials: "include",
headers: {
Authorization: `Bearer ${token}`,
"Content-Type": "application/json",
},
then: (data) =>
data.data.map((item) => [
item.id,
item.name,
item.condition,
item.registration_number,
item.document_number,
item.address,
item.status_name,
item.function_type,
item.consultation_type,
item.due_date,
item,
]),
total: (data) => data.meta.total,
},
};
const tableContainer = document.getElementById("table-pbg-tasks");
if (this.table) {
this.table.updateConfig(config).forceRender();
} else {
tableContainer.innerHTML = "";
this.table = new Grid(config).render(tableContainer);
}
}
handleSendNotification() {
this.toastMessage = document.getElementById("toast-message");
this.toastElement = document.getElementById("toastNotification");
this.toast = new bootstrap.Toast(this.toastElement);
document
.getElementById("sendNotificationBtn")
.addEventListener("click", () => {
let notificationStatus =
document.getElementById("notificationStatus").value;
// Show success toast
this.toastMessage.innerText = "Notifikasi berhasil dikirim!";
this.toast.show();
// Close modal after sending
let modal = bootstrap.Modal.getInstance(
document.getElementById("sendNotificationModal")
);
modal.hide();
});
}
handleUploadBuktiBayar() {
const modalEl = document.getElementById("modalBuktiBayar");
const modalInstance = new bootstrap.Modal(modalEl);
const modalTaskIdSpan = modalEl.querySelector("#modal-task-id span");
modalEl.addEventListener("hide.bs.modal", () => {
if (
document.activeElement &&
modalEl.contains(document.activeElement)
) {
document.activeElement.blur();
setTimeout(() => {
document.body.focus();
}, 10);
}
});
// Only bind once
if (!window.uploadHandlerBoundBuktiBayar) {
document.addEventListener("click", (event) => {
const uploadBtn = event.target.closest(
".upload-btn-bukti-bayar"
);
if (uploadBtn) {
const taskId = uploadBtn.getAttribute("data-id");
modalTaskIdSpan.textContent = taskId;
// Set task ID on the form element so Dropzone can read it
document.getElementById(
"dropzoneBuktiBayar"
).dataset.taskId = taskId;
modalInstance.show();
}
});
window.uploadHandlerBoundBuktiBayar = true;
}
// Prevent multiple Dropzone instances
if (
!Dropzone.instances.some(
(dz) => dz.element.id === "dropzoneBuktiBayar"
)
) {
const self = this;
new Dropzone("#dropzoneBuktiBayar", {
url: function () {
const taskId =
document.getElementById("dropzoneBuktiBayar").dataset
.taskId;
return `/api/pbg-task-attachment/${taskId}`;
},
maxFiles: 1,
maxFilesize: 5,
acceptedFiles: ".jpg,.png,.pdf",
autoProcessQueue: false,
addRemoveLinks: false,
priviewsContainer: null,
paramName: "file",
headers: {
"X-CSRF-TOKEN": document.querySelector(
'meta[name="csrf-token"]'
).content,
Authorization: `Bearer ${document
.querySelector('meta[name="api-token"]')
.getAttribute("content")}`,
Accept: "application/json",
},
params: {
pbg_type: "bukti_bayar",
},
dictDefaultMessage: "Drop your file here or click to upload.",
init: function () {
const dz = this;
dz.on("addedfile", function (file) {
// Always ensure only one file
if (dz.files.length > 1) {
dz.removeFile(dz.files[0]);
}
// Small delay helps ensure UI updates even with same file
setTimeout(() => {
document.getElementById(
"uploadedFileNameBuktiBayar"
).textContent = file.name;
document
.getElementById("fileInfoBuktiBayar")
.classList.remove("d-none");
document
.querySelector(".dz-message")
.classList.add("d-none");
}, 10);
});
dz.on("removedfile", function () {
document
.getElementById("fileInfoBuktiBayar")
.classList.add("d-none");
document.getElementById(
"uploadedFileNameBuktiBayar"
).textContent = "";
document
.querySelector(".dz-message")
.classList.remove("d-none");
});
document
.getElementById("removeFileBtnBuktiBayar")
.addEventListener("click", function () {
dz.removeAllFiles();
});
document
.getElementById("submitBuktiBayar")
.addEventListener("click", () => {
if (dz.getQueuedFiles().length > 0) {
dz.processQueue();
} else {
self.toastMessage.innerText =
"Please select a file to upload.";
self.toast.show();
}
});
dz.on("success", () => {
dz.removeAllFiles(true);
// Reset UI
document
.getElementById("fileInfoBuktiBayar")
.classList.add("d-none");
document.getElementById(
"uploadedFileNameBuktiBayar"
).textContent = "";
document.querySelector(".dz-message").style.display =
"block";
document.activeElement.blur(); // Lepas fokus dari tombol
setTimeout(() => {
document.body.focus(); // Atau fokus ke tombol lain kalau mau
modalInstance.hide(); // Tutup modal SETELAH fokus dipindah
}, 50); // Delay singkat biar aman
self.toastMessage.innerText =
"File uploaded successfully!";
self.toast.show();
self.initTableRequestAssignment();
});
dz.on("error", (file, message) => {
self.toastMessage.innerText =
message || "Upload failed!";
self.toast.show();
});
},
});
}
}
handleUploadBeritaAcara() {
const modalEl = document.getElementById("modalBeritaAcara");
const modalInstance = new bootstrap.Modal(modalEl);
const modalTaskIdSpan = modalEl.querySelector("#modal-task-id span");
modalEl.addEventListener("hide.bs.modal", () => {
if (
document.activeElement &&
modalEl.contains(document.activeElement)
) {
document.activeElement.blur();
setTimeout(() => {
document.body.focus();
}, 10);
}
});
// Only bind once
if (!window.uploadHandlerBoundBeritaAcara) {
document.addEventListener("click", (event) => {
const uploadBtn = event.target.closest(
".upload-btn-berita-acara"
);
if (uploadBtn) {
const taskId = uploadBtn.getAttribute("data-id");
modalTaskIdSpan.textContent = taskId;
// Set task ID on the form element so Dropzone can read it
document.getElementById(
"dropzoneBeritaAcara"
).dataset.taskId = taskId;
modalInstance.show();
}
});
window.uploadHandlerBoundBeritaAcara = true;
}
// Prevent multiple Dropzone instances
if (
!Dropzone.instances.some(
(dz) => dz.element.id === "dropzoneBeritaAcara"
)
) {
const self = this;
new Dropzone("#dropzoneBeritaAcara", {
url: function () {
const taskId = document.getElementById(
"dropzoneBeritaAcara"
).dataset.taskId;
return `/api/pbg-task-attachment/${taskId}`;
},
maxFiles: 1,
maxFilesize: 5,
acceptedFiles: ".jpg,.png,.pdf",
autoProcessQueue: false,
addRemoveLinks: false,
priviewsContainer: null,
paramName: "file",
headers: {
"X-CSRF-TOKEN": document.querySelector(
'meta[name="csrf-token"]'
).content,
Authorization: `Bearer ${document
.querySelector('meta[name="api-token"]')
.getAttribute("content")}`,
Accept: "application/json",
},
params: {
pbg_type: "berita_acara",
},
dictDefaultMessage: "Drop your file here or click to upload.",
init: function () {
const dz = this;
dz.on("addedfile", function (file) {
// Always ensure only one file
if (dz.files.length > 1) {
dz.removeFile(dz.files[0]);
}
// Small delay helps ensure UI updates even with same file
setTimeout(() => {
document.getElementById(
"uploadedFileNameBeritaAcara"
).textContent = file.name;
document
.getElementById("fileInfoBeritaAcara")
.classList.remove("d-none");
document
.querySelector(".dz-message")
.classList.add("d-none");
}, 10);
});
dz.on("removedfile", function () {
document
.getElementById("fileInfoBeritaAcara")
.classList.add("d-none");
document.getElementById(
"uploadedFileNameBeritaAcara"
).textContent = "";
document
.querySelector(".dz-message")
.classList.remove("d-none");
});
document
.getElementById("removeFileBtnBeritaAcara")
.addEventListener("click", function () {
dz.removeAllFiles();
});
document
.getElementById("submitBeritaAcara")
.addEventListener("click", () => {
if (dz.getQueuedFiles().length > 0) {
dz.processQueue();
} else {
self.toastMessage.innerText =
"Please select a file to upload.";
self.toast.show();
}
});
dz.on("success", () => {
dz.removeAllFiles(true);
// Reset UI
document
.getElementById("fileInfoBeritaAcara")
.classList.add("d-none");
document.getElementById(
"uploadedFileNameBeritaAcara"
).textContent = "";
document.querySelector(".dz-message").style.display =
"block";
document.activeElement.blur(); // Lepas fokus dari tombol
setTimeout(() => {
document.body.focus(); // Atau fokus ke tombol lain kalau mau
modalInstance.hide(); // Tutup modal SETELAH fokus dipindah
}, 50); // Delay singkat biar aman
self.toastMessage.innerText =
"File uploaded successfully!";
self.toast.show();
self.initTableRequestAssignment();
});
dz.on("error", (file, message) => {
self.toastMessage.innerText =
message || "Upload failed!";
self.toast.show();
});
},
});
}
}
}
document.addEventListener("DOMContentLoaded", function (e) {
new PbgTasks().init();
});