arifal/sibedas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix show page document pbg

Browse Source
This commit is contained in:
arifal
2025-04-10 15:44:51 +07:00
parent 7737fee30f
commit d95676d477
7 changed files with 246 additions and 235 deletions
Download Patch File Download Diff File Expand all files Collapse all files

368
resources/js/pbg-task/index.js
View File

@@ -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();
});
},
});
}
});
}
}

50
resources/views/pbg-task-attachment/show.blade.php Normal file
View File

@@ -0,0 +1,50 @@
@extends('layouts.vertical', ['subtitle' => $title])
@section('content')
@include('layouts.partials.page-title', ['title' => 'Data', 'subtitle' => 'PBG'])
<div class="row mb-4">
<div class="col-sm-12">
<div class="card border shadow-sm">
<div class="card-body">
<h5 class="mb-3">{{ $title }}</h5>
<p><strong>Document Number:</strong> {{ $pbg->document_number }}</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="card border shadow-sm">
<div class="card-body">
@php
$extension = strtolower(pathinfo($data->file_name, PATHINFO_EXTENSION));
@endphp
@if (in_array($extension, ['jpg', 'jpeg', 'png']))
<div class="text-center">
<img
src="{{ asset('storage/' . $data->file_path) }}"
alt="{{ $data->file_name }}"
class="img-fluid border rounded"
style="max-height: 600px;"
>
</div>
@elseif ($extension === 'pdf')
<iframe
src="{{ asset('storage/' . $data->file_path) }}"
width="100%"
height="700px"
style="border: none;"
></iframe>
@else
<div class="alert alert-warning">
Unsupported file type: <strong>{{ $extension }}</strong>
</div>
@endif
</div>
</div>
</div>
</div>
@endsection

2
resources/views/pbg_task/index.blade.php
View File

@@ -99,7 +99,6 @@
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<p id="modal-task-id">Task ID: <span></span></p>
<div class="mb-3">
<form action="/upload-bukti-bayar" method="POST" class="dropzone" id="dropzoneBuktiBayar">
<div class="dz-message needsclick">
@@ -137,7 +136,6 @@
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<p id="modal-task-id">Task ID: <span></span></p>
<div class="mb-3">
<form action="/upload-berita-acara" method="POST" class="dropzone" id="dropzoneBeritaAcara">
<div class="dz-message needsclick">