fix show page document pbg
This commit is contained in:
arifal
@@ -11,10 +11,31 @@ class PbgTasks {
|
||||
}
|
||||
|
||||
init() {
|
||||
this.setupFileUploadModal({
|
||||
modalId: "modalBuktiBayar",
|
||||
dropzoneId: "dropzoneBuktiBayar",
|
||||
uploadBtnClass: "upload-btn-bukti-bayar",
|
||||
removeBtnId: "removeFileBtnBuktiBayar",
|
||||
submitBtnId: "submitBuktiBayar",
|
||||
fileNameSpanId: "uploadedFileNameBuktiBayar",
|
||||
fileInfoId: "fileInfoBuktiBayar",
|
||||
pbgType: "bukti_bayar",
|
||||
bindFlag: "uploadHandlerBoundBuktiBayar",
|
||||
});
|
||||
|
||||
this.setupFileUploadModal({
|
||||
modalId: "modalBeritaAcara",
|
||||
dropzoneId: "dropzoneBeritaAcara",
|
||||
uploadBtnClass: "upload-btn-berita-acara",
|
||||
removeBtnId: "removeFileBtnBeritaAcara",
|
||||
submitBtnId: "submitBeritaAcara",
|
||||
fileNameSpanId: "uploadedFileNameBeritaAcara",
|
||||
fileInfoId: "fileInfoBeritaAcara",
|
||||
pbgType: "berita_acara",
|
||||
bindFlag: "uploadHandlerBoundBeritaAcara",
|
||||
});
|
||||
this.initTableRequestAssignment();
|
||||
this.handleSendNotification();
|
||||
this.handleUploadBuktiBayar();
|
||||
this.handleUploadBeritaAcara();
|
||||
}
|
||||
|
||||
initTableRequestAssignment() {
|
||||
@@ -58,10 +79,11 @@ class PbgTasks {
|
||||
${
|
||||
cell.attachment_berita_acara
|
||||
? `
|
||||
<a href="/storage/${cell.attachment_berita_acara.file_path}" target="_blank"
|
||||
<a href="/pbg-task-attachment/${cell.attachment_berita_acara.id}?type=berita-acara"
|
||||
class="btn btn-success btn-sm d-inline-flex align-items-center justify-content-center"
|
||||
style="white-space: nowrap; line-height: 1;">
|
||||
<iconify-icon icon="mingcute:download-2-fill" width="15" height="15" style="vertical-align: middle;"></iconify-icon>
|
||||
style="white-space: nowrap; line-height: 1;"
|
||||
target="_blank">
|
||||
<iconify-icon icon="mingcute:eye-2-fill" width="15" height="15" style="vertical-align: middle;"></iconify-icon>
|
||||
<span class="ms-1">Berita Acara</span>
|
||||
</a>
|
||||
`
|
||||
@@ -78,10 +100,11 @@ class PbgTasks {
|
||||
${
|
||||
cell.attachment_bukti_bayar
|
||||
? `
|
||||
<a href="/storage/${cell.attachment_bukti_bayar.file_path}" target="_blank"
|
||||
<a href="/pbg-task-attachment/${cell.attachment_bukti_bayar.id}?type=bukti-bayar"
|
||||
class="btn btn-success btn-sm d-inline-flex align-items-center justify-content-center"
|
||||
style="white-space: nowrap; line-height: 1;">
|
||||
<iconify-icon icon="mingcute:download-2-fill" width="15" height="15" style="vertical-align: middle;"></iconify-icon>
|
||||
style="white-space: nowrap; line-height: 1;"
|
||||
target="_blank">
|
||||
<iconify-icon icon="mingcute:eye-2-fill" width="15" height="15" style="vertical-align: middle;"></iconify-icon>
|
||||
<span class="ms-1">Bukti Bayar</span>
|
||||
</a>
|
||||
`
|
||||
@@ -173,95 +196,77 @@ class PbgTasks {
|
||||
});
|
||||
}
|
||||
|
||||
handleUploadBuktiBayar() {
|
||||
const modalEl = document.getElementById("modalBuktiBayar");
|
||||
setupFileUploadModal({
|
||||
modalId,
|
||||
dropzoneId,
|
||||
uploadBtnClass,
|
||||
removeBtnId,
|
||||
submitBtnId,
|
||||
fileNameSpanId,
|
||||
fileInfoId,
|
||||
pbgType,
|
||||
bindFlag,
|
||||
}) {
|
||||
const modalEl = document.getElementById(modalId);
|
||||
const modalInstance = new bootstrap.Modal(modalEl);
|
||||
const modalTaskIdSpan = modalEl.querySelector("#modal-task-id span");
|
||||
let taskId;
|
||||
|
||||
// Blur-fix for modal
|
||||
modalEl.addEventListener("hide.bs.modal", () => {
|
||||
if (
|
||||
document.activeElement &&
|
||||
modalEl.contains(document.activeElement)
|
||||
) {
|
||||
document.activeElement.blur();
|
||||
setTimeout(() => {
|
||||
document.body.focus();
|
||||
}, 10);
|
||||
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;
|
||||
|
||||
// Bind click listener only once
|
||||
if (!window[bindFlag]) {
|
||||
document.addEventListener("click", (e) => {
|
||||
const btn = e.target.closest(`.${uploadBtnClass}`);
|
||||
if (btn) {
|
||||
taskId = btn.getAttribute("data-id");
|
||||
modalInstance.show();
|
||||
}
|
||||
});
|
||||
|
||||
window.uploadHandlerBoundBuktiBayar = true;
|
||||
window[bindFlag] = true;
|
||||
}
|
||||
|
||||
// Prevent multiple Dropzone instances
|
||||
if (
|
||||
!Dropzone.instances.some(
|
||||
(dz) => dz.element.id === "dropzoneBuktiBayar"
|
||||
)
|
||||
) {
|
||||
// Avoid reinitializing Dropzone
|
||||
if (!Dropzone.instances.some((dz) => dz.element.id === dropzoneId)) {
|
||||
const self = this;
|
||||
new Dropzone("#dropzoneBuktiBayar", {
|
||||
url: function () {
|
||||
const taskId =
|
||||
document.getElementById("dropzoneBuktiBayar").dataset
|
||||
.taskId;
|
||||
return `/api/pbg-task-attachment/${taskId}`;
|
||||
},
|
||||
|
||||
new Dropzone(`#${dropzoneId}`, {
|
||||
url: () => `/api/pbg-task-attachment/${taskId}`,
|
||||
maxFiles: 1,
|
||||
maxFilesize: 5,
|
||||
maxFilesize: 5, // MB
|
||||
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")}`,
|
||||
Authorization: `Bearer ${
|
||||
document.querySelector('meta[name="api-token"]').content
|
||||
}`,
|
||||
Accept: "application/json",
|
||||
},
|
||||
params: {
|
||||
pbg_type: "bukti_bayar",
|
||||
},
|
||||
params: { pbg_type: pbgType },
|
||||
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
|
||||
dz.on("addedfile", (file) => {
|
||||
if (dz.files.length > 1) dz.removeFile(dz.files[0]);
|
||||
setTimeout(() => {
|
||||
document.getElementById(
|
||||
"uploadedFileNameBuktiBayar"
|
||||
fileNameSpanId
|
||||
).textContent = file.name;
|
||||
document
|
||||
.getElementById("fileInfoBuktiBayar")
|
||||
.getElementById(fileInfoId)
|
||||
.classList.remove("d-none");
|
||||
document
|
||||
.querySelector(".dz-message")
|
||||
@@ -269,26 +274,23 @@ class PbgTasks {
|
||||
}, 10);
|
||||
});
|
||||
|
||||
dz.on("removedfile", function () {
|
||||
dz.on("removedfile", () => {
|
||||
document
|
||||
.getElementById("fileInfoBuktiBayar")
|
||||
.getElementById(fileInfoId)
|
||||
.classList.add("d-none");
|
||||
document.getElementById(
|
||||
"uploadedFileNameBuktiBayar"
|
||||
).textContent = "";
|
||||
document.getElementById(fileNameSpanId).textContent =
|
||||
"";
|
||||
document
|
||||
.querySelector(".dz-message")
|
||||
.classList.remove("d-none");
|
||||
});
|
||||
|
||||
document
|
||||
.getElementById("removeFileBtnBuktiBayar")
|
||||
.addEventListener("click", function () {
|
||||
dz.removeAllFiles();
|
||||
});
|
||||
.getElementById(removeBtnId)
|
||||
.addEventListener("click", () => dz.removeAllFiles());
|
||||
|
||||
document
|
||||
.getElementById("submitBuktiBayar")
|
||||
.getElementById(submitBtnId)
|
||||
.addEventListener("click", () => {
|
||||
if (dz.getQueuedFiles().length > 0) {
|
||||
dz.processQueue();
|
||||
@@ -301,20 +303,18 @@ class PbgTasks {
|
||||
|
||||
dz.on("success", () => {
|
||||
dz.removeAllFiles(true);
|
||||
// Reset UI
|
||||
document
|
||||
.getElementById("fileInfoBuktiBayar")
|
||||
.getElementById(fileInfoId)
|
||||
.classList.add("d-none");
|
||||
document.getElementById(
|
||||
"uploadedFileNameBuktiBayar"
|
||||
).textContent = "";
|
||||
document.getElementById(fileNameSpanId).textContent =
|
||||
"";
|
||||
document.querySelector(".dz-message").style.display =
|
||||
"block";
|
||||
document.activeElement.blur(); // Lepas fokus dari tombol
|
||||
document.activeElement.blur();
|
||||
setTimeout(() => {
|
||||
document.body.focus(); // Atau fokus ke tombol lain kalau mau
|
||||
modalInstance.hide(); // Tutup modal SETELAH fokus dipindah
|
||||
}, 50); // Delay singkat biar aman
|
||||
document.body.focus();
|
||||
modalInstance.hide();
|
||||
}, 50);
|
||||
self.toastMessage.innerText =
|
||||
"File uploaded successfully!";
|
||||
self.toast.show();
|
||||
@@ -331,162 +331,74 @@ class PbgTasks {
|
||||
}
|
||||
}
|
||||
|
||||
handleUploadBeritaAcara() {
|
||||
const modalEl = document.getElementById("modalBeritaAcara");
|
||||
const modalInstance = new bootstrap.Modal(modalEl);
|
||||
const modalTaskIdSpan = modalEl.querySelector("#modal-task-id span");
|
||||
handleDownloadButtons(buttonClass) {
|
||||
const buttons = document.querySelectorAll(`.${buttonClass}`);
|
||||
|
||||
modalEl.addEventListener("hide.bs.modal", () => {
|
||||
if (
|
||||
document.activeElement &&
|
||||
modalEl.contains(document.activeElement)
|
||||
) {
|
||||
document.activeElement.blur();
|
||||
setTimeout(() => {
|
||||
document.body.focus();
|
||||
}, 10);
|
||||
}
|
||||
});
|
||||
buttons.forEach((button) => {
|
||||
button.addEventListener("click", () => {
|
||||
const attachmentId = button.getAttribute("data-id");
|
||||
const originalContent = button.innerHTML;
|
||||
|
||||
// Only bind once
|
||||
if (!window.uploadHandlerBoundBeritaAcara) {
|
||||
document.addEventListener("click", (event) => {
|
||||
const uploadBtn = event.target.closest(
|
||||
".upload-btn-berita-acara"
|
||||
);
|
||||
// Disable button & show loading
|
||||
button.disabled = true;
|
||||
button.innerHTML = `
|
||||
<span class="spinner-border spinner-border-sm me-1" role="status" aria-hidden="true"></span>
|
||||
Loading...
|
||||
`;
|
||||
|
||||
if (uploadBtn) {
|
||||
const taskId = uploadBtn.getAttribute("data-id");
|
||||
modalTaskIdSpan.textContent = taskId;
|
||||
fetch(`/api/pbg-task-attachment/${attachmentId}/download`, {
|
||||
method: "GET",
|
||||
headers: {
|
||||
"X-CSRF-TOKEN": document.querySelector(
|
||||
'meta[name="csrf-token"]'
|
||||
).content,
|
||||
Authorization: `Bearer ${document
|
||||
.querySelector('meta[name="api-token"]')
|
||||
.getAttribute("content")}`,
|
||||
Accept: "application/json",
|
||||
},
|
||||
})
|
||||
.then((response) => {
|
||||
if (!response.ok) {
|
||||
throw new Error("File not found or server error.");
|
||||
}
|
||||
return response
|
||||
.blob()
|
||||
.then((blob) => ({ blob, response }));
|
||||
})
|
||||
.then(({ blob, response }) => {
|
||||
const url = window.URL.createObjectURL(blob);
|
||||
const a = document.createElement("a");
|
||||
a.href = url;
|
||||
|
||||
// Set task ID on the form element so Dropzone can read it
|
||||
document.getElementById(
|
||||
"dropzoneBeritaAcara"
|
||||
).dataset.taskId = taskId;
|
||||
const contentDisposition = response.headers.get(
|
||||
"Content-Disposition"
|
||||
);
|
||||
let fileName = "downloaded-file";
|
||||
|
||||
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]);
|
||||
if (contentDisposition?.includes("filename=")) {
|
||||
fileName = contentDisposition
|
||||
.split("filename=")[1]
|
||||
.replace(/"/g, "")
|
||||
.trim();
|
||||
}
|
||||
|
||||
// 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);
|
||||
a.download = fileName;
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
a.remove();
|
||||
window.URL.revokeObjectURL(url);
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error("Download failed:", error);
|
||||
alert("Failed to download file.");
|
||||
})
|
||||
.finally(() => {
|
||||
button.disabled = false;
|
||||
button.innerHTML = originalContent;
|
||||
});
|
||||
|
||||
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();
|
||||
});
|
||||
},
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user