diff --git a/app/Http/Controllers/Api/PbgTaskAttachmentsController.php b/app/Http/Controllers/Api/PbgTaskAttachmentsController.php new file mode 100644 index 0000000..aa01c4b --- /dev/null +++ b/app/Http/Controllers/Api/PbgTaskAttachmentsController.php @@ -0,0 +1,82 @@ +validate([ + 'file' => 'required|file|mimes:jpg,png,pdf|max:5120', + '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_path' => $path, + 'pbg_type' => $request->pbg_type + ]); + + return response()->json([ + 'message' => 'File uploaded successfully.', + 'attachment' => [ + 'id' => $attachment->id, + 'file_name' => $attachment->file_name, + 'file_url' => Storage::url($attachment->file_path), + 'pbg_type' => $attachment->pbg_type + ] + ]); + }catch(\Exception $e){ + \Log::error($e->getMessage()); + return response()->json([ + "success" => false, + "message" => $e->getTraceAsString() + ]); + } + } + + /** + * Display the specified resource. + */ + public function show(string $id) + { + // + } + + /** + * Update the specified resource in storage. + */ + public function update(Request $request, string $id) + { + // + } + + /** + * Remove the specified resource from storage. + */ + public function destroy(string $id) + { + // + } +} diff --git a/app/Http/Controllers/Api/RequestAssignmentController.php b/app/Http/Controllers/Api/RequestAssignmentController.php index 486476d..f364016 100644 --- a/app/Http/Controllers/Api/RequestAssignmentController.php +++ b/app/Http/Controllers/Api/RequestAssignmentController.php @@ -21,12 +21,18 @@ class RequestAssignmentController extends Controller */ public function index(Request $request) { - $query = PbgTask::query()->orderBy('id', 'desc'); - if($request->has('search') && !empty($request->get("search"))){ - $query->where('name', 'LIKE', '%'.$request->get('search').'%') - ->orWhere('registration_number', 'LIKE', '%'.$request->get('search').'%') - ->orWhere('document_number', 'LIKE', '%'.$request->get('search').'%'); + $query = PbgTask::with(['attachments' => function ($q) { + $q->whereIn('pbg_type', ['berita_acara', 'bukti_bayar']); + }])->orderBy('id', 'desc'); + + if ($request->has('search') && !empty($request->get("search"))) { + $query->where(function ($q) use ($request) { + $q->where('name', 'LIKE', '%' . $request->get('search') . '%') + ->orWhere('registration_number', 'LIKE', '%' . $request->get('search') . '%') + ->orWhere('document_number', 'LIKE', '%' . $request->get('search') . '%'); + }); } + return RequestAssignmentResouce::collection($query->paginate()); } diff --git a/app/Http/Resources/RequestAssignmentResouce.php b/app/Http/Resources/RequestAssignmentResouce.php index 2d10d7b..b4f32ae 100644 --- a/app/Http/Resources/RequestAssignmentResouce.php +++ b/app/Http/Resources/RequestAssignmentResouce.php @@ -34,6 +34,14 @@ class RequestAssignmentResouce extends JsonResource 'due_date' => $this->due_date, 'land_certificate_phase' => $this->land_certificate_phase, 'task_created_at' => $this->task_created_at, + 'attachment_berita_acara' => $this->attachments + ->where('pbg_type', 'berita_acara') + ->sortByDesc('created_at') + ->first(), + 'attachment_bukti_bayar' => $this->attachments + ->where('pbg_type', 'bukti_bayar') + ->sortByDesc('created_at') + ->first(), ]; } } diff --git a/app/Models/PbgTask.php b/app/Models/PbgTask.php index a8cacfe..5d8bc37 100644 --- a/app/Models/PbgTask.php +++ b/app/Models/PbgTask.php @@ -46,4 +46,8 @@ class PbgTask extends Model { return $this->hasMany(TaskAssignment::class, 'pbg_task_uid', 'uuid'); } + + public function attachments(){ + return $this->hasMany(PbgTaskAttachment::class, 'pbg_task_id', 'id'); + } } diff --git a/app/Models/PbgTaskAttachment.php b/app/Models/PbgTaskAttachment.php new file mode 100644 index 0000000..7b5a025 --- /dev/null +++ b/app/Models/PbgTaskAttachment.php @@ -0,0 +1,14 @@ +belongsTo(PbgTask::class); + } +} diff --git a/database/migrations/2025_04_09_141512_create_pbg_task_attachments_table.php b/database/migrations/2025_04_09_141512_create_pbg_task_attachments_table.php new file mode 100644 index 0000000..b35e817 --- /dev/null +++ b/database/migrations/2025_04_09_141512_create_pbg_task_attachments_table.php @@ -0,0 +1,32 @@ +id(); + $table->foreignId('pbg_task_id')->constrained('pbg_task')->onDelete('cascade'); + $table->string('file_name'); + $table->string('file_path'); + $table->string('pbg_type'); + $table->timestamps(); + }); + } + + /** + * Reverse the migrations. + */ + public function down(): void + { + Schema::dropIfExists('pbg_task_attachments'); + } +}; diff --git a/resources/js/pbg-task/index.js b/resources/js/pbg-task/index.js index 51c0b96..0c22e58 100644 --- a/resources/js/pbg-task/index.js +++ b/resources/js/pbg-task/index.js @@ -1,63 +1,101 @@ -import { Grid } from "gridjs/dist/gridjs.umd.js"; -import "gridjs/dist/gridjs.umd.js"; -import gridjs from "gridjs/dist/gridjs.umd.js"; +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.handleUpload(); + this.handleUploadBuktiBayar(); this.handleUploadBeritaAcara(); } initTableRequestAssignment() { - let tableContainer = document.getElementById("table-pbg-tasks"); + // Ambil token + const token = document + .querySelector('meta[name="api-token"]') + .getAttribute("content"); - // Pastikan kontainer kosong sebelum merender ulang Grid.js - tableContainer.innerHTML = ""; - let canUpdate = tableContainer.getAttribute("data-updater") === "1"; - new Grid({ + const config = { columns: [ "ID", - { name: "Name", width: "15%" }, - { name: "Condition", width: "7%" }, + { name: "Name" }, + { name: "Condition" }, "Registration Number", "Document Number", - { name: "Address", width: "30%" }, + { name: "Address" }, "Status", "Function Type", "Consultation Type", - { name: "Due Date", width: "10%" }, + { name: "Due Date" }, { name: "Action", formatter: (cell) => { - let tableContainer = - document.getElementById("table-pbg-tasks"); let canUpdate = tableContainer.getAttribute("data-updater") === "1"; if (!canUpdate) { - return gridjs.html( + return html( `No Privilege` ); } - return gridjs.html(` -
- - Detail - - - -
- `); + return html(` +
+ + + + + ${ + cell.attachment_berita_acara + ? ` + + + Berita Acara + + ` + : ` + + ` + } + + ${ + cell.attachment_bukti_bayar + ? ` + + + Bukti Bayar + + ` + : ` + + ` + } +
+ `); }, }, ], @@ -81,9 +119,7 @@ class PbgTasks { url: `${GlobalConfig.apiHost}/api/request-assignments`, credentials: "include", headers: { - Authorization: `Bearer ${document - .querySelector('meta[name="api-token"]') - .getAttribute("content")}`, + Authorization: `Bearer ${token}`, "Content-Type": "application/json", }, then: (data) => @@ -98,11 +134,20 @@ class PbgTasks { item.function_type, item.consultation_type, item.due_date, - item.id, + item, ]), total: (data) => data.meta.total, }, - }).render(document.getElementById("table-pbg-tasks")); + }; + + 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() { @@ -128,71 +173,320 @@ class PbgTasks { }); } - handleUpload() { - // Handle button click to show modal - document.addEventListener("click", function (event) { - if (event.target.classList.contains("upload-btn")) { - // Show modal - let uploadModal = new bootstrap.Modal( - document.getElementById("uploadModal") - ); - uploadModal.show(); + 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); } }); - let dropzone = new Dropzone("#singleFileDropzone", { - url: "/upload-bukti-bayar", // Adjust to your backend endpoint - maxFiles: 1, // Allow only 1 file - maxFilesize: 5, // Limit size to 5MB - acceptedFiles: ".jpg,.png,.pdf", // Allowed file types - autoProcessQueue: false, // Prevent automatic upload - addRemoveLinks: true, // Show remove button - dictDefaultMessage: "Drop your file here or click to upload.", - init: function () { - let dz = this; - // Remove previous file when a new file is added - dz.on("addedfile", function () { - if (dz.files.length > 1) { - dz.removeFile(dz.files[0]); - } - }); + // Only bind once + if (!window.uploadHandlerBoundBuktiBayar) { + document.addEventListener("click", (event) => { + const uploadBtn = event.target.closest( + ".upload-btn-bukti-bayar" + ); - // Handle upload button click - document - .getElementById("uploadBtn") - .addEventListener("click", function () { - if (dz.getQueuedFiles().length > 0) { - dz.processQueue(); // Manually process upload - } else { - alert("Please select a file to upload."); + 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); }); - // Success callback - dz.on("success", function (file, response) { - alert("File uploaded successfully!"); - dz.removeAllFiles(); // Clear after upload - }); + dz.on("removedfile", function () { + document + .getElementById("fileInfoBuktiBayar") + .classList.add("d-none"); + document.getElementById( + "uploadedFileNameBuktiBayar" + ).textContent = ""; + document + .querySelector(".dz-message") + .classList.remove("d-none"); + }); - // Error callback - dz.on("error", function (file, errorMessage) { - alert("Upload failed: " + errorMessage); - }); - }, - }); + 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() { - // Handle button click to show modal - document.addEventListener("click", function (event) { - if (event.target.classList.contains("upload-btn-berita-acara")) { - // Show modal - let uploadModal = new bootstrap.Modal( - document.getElementById("uploadBeritaAcara") - ); - uploadModal.show(); + 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(); + }); + }, + }); + } } } diff --git a/resources/views/pbg_task/index.blade.php b/resources/views/pbg_task/index.blade.php index 770dec9..c8042ac 100644 --- a/resources/views/pbg_task/index.blade.php +++ b/resources/views/pbg_task/index.blade.php @@ -2,6 +2,26 @@ @section('css') @vite(['node_modules/gridjs/dist/theme/mermaid.min.css']) + @endsection @section('content') @@ -71,7 +91,7 @@ -