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

37
app/Http/Controllers/Api/PbgTaskAttachmentsController.php
View File

@@ -6,6 +6,7 @@ use App\Http\Controllers\Controller;
use App\Models\PbgTaskAttachment;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Storage;
use Symfony\Component\HttpFoundation\Response;
class PbgTaskAttachmentsController extends Controller
{
@@ -28,14 +29,18 @@ class PbgTaskAttachmentsController extends Controller
'pbg_type' => 'string'
]);
$file = $request->file('file');
$path = $file->store("uploads/pbg-tasks/{$pbg_task_id}", "public");
$attachment = PbgTaskAttachment::create([
'pbg_task_id' => $pbg_task_id,
'file_name' => $file->getClientOriginalName(),
'file_name' => $request->file('file')->getClientOriginalName(),
'file_path' => '', // empty path initially
'pbg_type' => $request->pbg_type == 'bukti_bayar' ? 'bukti_bayar' : 'berita_acara'
]);
$file = $request->file('file');
$path = $file->store("uploads/pbg-tasks/{$pbg_task_id}/{$attachment->id}", "public");
$attachment->update([
'file_path' => $path,
'pbg_type' => $request->pbg_type
]);
return response()->json([
@@ -79,4 +84,26 @@ class PbgTaskAttachmentsController extends Controller
{
//
}
public function download(string $id)
{
try {
$data = PbgTaskAttachment::findOrFail($id);
$filePath = $data->file_path; // already relative to 'public' disk
if (!Storage::disk('public')->exists($filePath)) {
return response()->json([
"success" => false,
"message" => "File not found on server"
], Response::HTTP_NOT_FOUND);
}
return Storage::disk('public')->download($filePath, $data->file_name);
} catch (\Exception $e) {
return response()->json([
"success" => false,
"message" => $e->getMessage()
]);
}
}
}

21
app/Http/Controllers/PbgTaskAttachmentsController.php Normal file
View File

@@ -0,0 +1,21 @@
<?php
namespace App\Http\Controllers;
use App\Models\PbgTask;
use App\Models\PbgTaskAttachment;
use Illuminate\Http\Request;
class PbgTaskAttachmentsController extends Controller
{
public function show(string $id, Request $request){
try{
$title = $request->get('type') == "berita-acara" ? "Berita Acara" : "Bukti Bayar";
$data = PbgTaskAttachment::findOrFail($id);
$pbg = PbgTask::findOrFail($data->pbg_task_id);
return view('pbg-task-attachment.show', compact('data', 'pbg', 'title'));
}catch(\Exception $e){
return view('pages.404');
}
}
}

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">

1
routes/api.php
View File

@@ -185,5 +185,6 @@ Route::group(['middleware' => 'auth:sanctum'], function (){
Route::controller(PbgTaskAttachmentsController::class)->group(function (){
Route::post('/pbg-task-attachment/{pbg_task_id}', 'store')->name('api.pbg-task.upload');
Route::get('/pbg-task-attachment/{attachment_id}/download', 'download')->name('api.pbg-task.download');
});
});

2
routes/web.php
View File

@@ -14,6 +14,7 @@ use App\Http\Controllers\InvitationsController;
use App\Http\Controllers\Master\UsersController;
use App\Http\Controllers\MenusController;
use App\Http\Controllers\PaymentRecapsController;
use App\Http\Controllers\PbgTaskAttachmentsController;
use App\Http\Controllers\ReportPaymentRecapsController;
use App\Http\Controllers\ReportPbgPTSPController;
use App\Http\Controllers\RequestAssignment\PbgTaskController;
@@ -64,6 +65,7 @@ Route::group(['middleware' => 'auth'], function(){
// data - PBG
Route::resource('/pbg-task', PbgTaskController::class);
Route::get('/pbg-task-attachment/{attachment_id}', [PbgTaskAttachmentsController::class, 'show'])->name('pbg-task-attachment.show');
// data settings
Route::resource('/data-settings', DataSettingController::class);