daengdeni/lpj
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add PDF preview feature in detail-jaminan component

Browse Source 
Introduced a "Preview" button that allows users to view PDF documents directly within the application. Added a modal for PDF viewing and included scripts to handle PDF embedding and modal visibility.
This commit is contained in:
Daeng Deni Mardaeni
2024-10-31 10:03:19 +07:00
parent 2744726e68
commit 5343c424b1
1 changed files with 28 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
resources/views/component/detail-jaminan.blade.php
View File

@@ -74,8 +74,8 @@
</td>
<td class="py-3 text-gray-700 text-2sm font-normal">
@if(isset($detail->dokumen_jaminan))
<a href="{{ route('debitur.jaminan.download',['id'=>$permohonan->debiture->id,'dokumen'=>$detail->id]) }}" class="badge badge-sm badge-outline mt-2">{{ basename($detail->dokumen_jaminan) }}
<i class="ki-filled ki-cloud-download"></i></a>
<a href="{{ route('debitur.jaminan.download',['id'=>$permohonan->debiture->id,'dokumen'=>$detail->id]) }}" class="badge badge-sm badge-outline mt-2 badge-info"><i class="ki-filled ki-cloud-download mr-2"></i> Download</a>
<span class="badge badge-sm badge-outline badge-warning mt-2" onclick="viewPDF('{{ Storage::url($detail->dokumen_jaminan) }}')"><i class="ki-filled ki-eye mr-2"></i>Preview</span>
@endif
</td>
</tr>
@@ -95,3 +95,29 @@
@endforeach
</div>
</div>
<!-- Modal for PDF viewing -->
<div id="pdfModal" class="fixed inset-0 bg-gray-800 bg-opacity-75 flex items-center justify-center hidden w-full">
<div class="bg-white rounded-lg overflow-hidden shadow-xl transform transition-all min-w-3xl w-[1500px] h-[1200px]">
<div class="p-4 h-full">
<button onclick="closePDFModal()" class="float-right text-2xl">
<i class="ki-filled ki-cross-square text-red-600"></i>
</button>
<div id="pdfViewer" class="h-full"></div>
</div>
</div>
</div>
@push('scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfobject/2.3.0/pdfobject.min.js"></script>
<script>
function viewPDF(url) {
PDFObject.embed(url, "#pdfViewer");
document.getElementById('pdfModal').classList.remove('hidden');
}
function closePDFModal() {
document.getElementById('pdfModal').classList.add('hidden');
}
</script>
@endpush