496 lines
20 KiB
JavaScript
496 lines
20 KiB
JavaScript
import { Grid, html } from "gridjs/dist/gridjs.umd.js";
|
|
import GlobalConfig from "../global-config";
|
|
import { Dropzone } from "dropzone";
|
|
Dropzone.autoDiscover = false;
|
|
|
|
class PbgTasks {
|
|
constructor() {
|
|
this.table = null;
|
|
this.toastMessage = document.getElementById("toast-message");
|
|
this.toastElement = document.getElementById("toastNotification");
|
|
}
|
|
|
|
init() {
|
|
this.initTableRequestAssignment();
|
|
this.handleSendNotification();
|
|
this.handleUploadBuktiBayar();
|
|
this.handleUploadBeritaAcara();
|
|
}
|
|
|
|
initTableRequestAssignment() {
|
|
// Ambil token
|
|
const token = document
|
|
.querySelector('meta[name="api-token"]')
|
|
.getAttribute("content");
|
|
|
|
const config = {
|
|
columns: [
|
|
"ID",
|
|
{ name: "Name" },
|
|
{ name: "Condition" },
|
|
"Registration Number",
|
|
"Document Number",
|
|
{ name: "Address" },
|
|
"Status",
|
|
"Function Type",
|
|
"Consultation Type",
|
|
{ name: "Due Date" },
|
|
{
|
|
name: "Action",
|
|
formatter: (cell) => {
|
|
let canUpdate =
|
|
tableContainer.getAttribute("data-updater") === "1";
|
|
|
|
if (!canUpdate) {
|
|
return html(
|
|
`<span class="text-muted">No Privilege</span>`
|
|
);
|
|
}
|
|
|
|
return html(`
|
|
<div class="d-flex justify-content-center align-items-center gap-2">
|
|
<a href="/pbg-task/${cell.id}"
|
|
class="btn btn-yellow btn-sm d-inline-flex align-items-center justify-content-center"
|
|
style="white-space: nowrap; line-height: 1;">
|
|
<iconify-icon icon="mingcute:eye-2-fill" width="15" height="15" style="vertical-align: middle;"></iconify-icon>
|
|
</a>
|
|
|
|
${
|
|
cell.attachment_berita_acara
|
|
? `
|
|
<a href="/storage/${cell.attachment_berita_acara.file_path}" target="_blank"
|
|
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>
|
|
<span class="ms-1">Berita Acara</span>
|
|
</a>
|
|
`
|
|
: `
|
|
<button class="btn btn-sm btn-info d-inline-flex align-items-center justify-content-center upload-btn-berita-acara"
|
|
data-id="${cell.id}"
|
|
style="white-space: nowrap; line-height: 1;">
|
|
<iconify-icon icon="mingcute:upload-2-fill" width="15" height="15" style="vertical-align: middle;"></iconify-icon>
|
|
<span class="ms-1" style="line-height: 1;">Berita Acara</span>
|
|
</button>
|
|
`
|
|
}
|
|
|
|
${
|
|
cell.attachment_bukti_bayar
|
|
? `
|
|
<a href="/storage/${cell.attachment_bukti_bayar.file_path}" target="_blank"
|
|
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>
|
|
<span class="ms-1">Bukti Bayar</span>
|
|
</a>
|
|
`
|
|
: `
|
|
<button class="btn btn-sm btn-info d-inline-flex align-items-center justify-content-center upload-btn-bukti-bayar"
|
|
data-id="${cell.id}"
|
|
style="white-space: nowrap; line-height: 1;">
|
|
<iconify-icon icon="mingcute:upload-2-fill" width="15" height="15" style="vertical-align: middle;"></iconify-icon>
|
|
<span class="ms-1" style="line-height: 1;">Bukti Bayar</span>
|
|
</button>
|
|
`
|
|
}
|
|
</div>
|
|
`);
|
|
},
|
|
},
|
|
],
|
|
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();
|
|
});
|