fix: perbaiki navigasi back di halaman laporan penilai dan tampilkan gambar/pdf pada daftar pustaka

This commit is contained in:
majid
2025-07-08 17:04:19 +07:00
parent 05f87f4767
commit 027c698a11
5 changed files with 122 additions and 36 deletions

View File

@@ -13,9 +13,12 @@
<button id="tab-hasil" class="btn btn-sm btn-light">Hasil Inspeksi</button> <button id="tab-hasil" class="btn btn-sm btn-light">Hasil Inspeksi</button>
</div> </div>
<div class="flex items-wrap gap-2.5"> <div class="flex items-wrap gap-2.5">
<a href="{{ $back ?? route()->previous()}}" class="btn btn-xs btn-info"><i {{-- <a href="{{ $back ?? route()->previous()}}" class="btn btn-xs btn-info"><i
class="ki-filled ki-exit-left"></i> class="ki-filled ki-exit-left"></i>
Back</a> Back</a> --}}
<a id="back-button" class="btn btn-xs btn-info">
<i class="ki-filled ki-exit-left"></i> Back
</a>
</div> </div>
</div> </div>
</div> </div>
@@ -87,6 +90,18 @@
hasilContent.classList.remove('hidden-tab'); hasilContent.classList.remove('hidden-tab');
}); });
}); });
document.getElementById('back-button').addEventListener('click', function(e) {
e.preventDefault();
console.log('Back button clicked', window.history.length);
if (window.history.length > 1) {
window.history.back();
} else {
window.location.href = "{{ $back ?? route()->previous()}}";
}
});
</script> </script>
<style> <style>

View File

@@ -57,7 +57,7 @@
</label> </label>
<div class="flex flex-wrap items-baseline w-full"> <div class="flex flex-wrap items-baseline w-full">
{{-- ambil nama file pathnya hilangkan --}} {{-- ambil nama file pathnya hilangkan --}}
<a href="{{ asset($daftarPustaka->attachment) }}" class="badge badge-outline badge-md badge-info">{{ basename($daftarPustaka->attachment) }} &nbsp; <a href="{{ asset('storage/' .$daftarPustaka->attachment) }}" class="badge badge-outline badge-md badge-info">{{ basename($daftarPustaka->attachment) }} &nbsp;
<i class="ki-filled ki-cloud-download"></i> <i class="ki-filled ki-cloud-download"></i>
</a> </a>
</div> </div>

View File

@@ -239,20 +239,24 @@
document.addEventListener('DOMContentLoaded', function() { document.addEventListener('DOMContentLoaded', function() {
document.querySelectorAll('.show-pustaka').forEach(function(element) { document.querySelectorAll('.show-pustaka').forEach(function(element) {
const url = element.getAttribute('data-url'); const url = element.getAttribute('data-url');
console.log(url);
const previewContent = element.querySelector('.preview-content'); const previewContent = element.querySelector('.preview-content');
if (!previewContent || !url) return; if (!previewContent || !url) return;
const fileExtension = url.split('.').pop().toLowerCase(); const fileExtension = url.split('.').pop().toLowerCase();
const urlStorage = 'storage' + '/' + url;
if (fileExtension === 'pdf') { if (fileExtension === 'pdf') {
PDFObject.embed(url, previewContent, { PDFObject.embed(urlStorage, previewContent, {
height: "100%", height: "100%",
width: "100%" width: "100%"
}); });
} else if (['jpg', 'jpeg', 'png', 'gif'].includes(fileExtension)) { } else if (['jpg', 'jpeg', 'png', 'gif'].includes(fileExtension)) {
previewContent.innerHTML = ` previewContent.innerHTML = `
<img src="${url}" alt="Preview" <img src="${urlStorage}" alt="Preview"
class="w-full h-full object-cover rounded" /> class="w-full h-full object-cover rounded" />
`; `;
} else { } else {

View File

@@ -58,11 +58,13 @@
const fileExtension = url.split('.').pop().toLowerCase(); const fileExtension = url.split('.').pop().toLowerCase();
const previewContent = document.getElementById('previewContent'); const previewContent = document.getElementById('previewContent');
const urlStorage = 'storage' + '/' + url;
if (['pdf'].includes(fileExtension)) { if (['pdf'].includes(fileExtension)) {
PDFObject.embed(url, "#previewContent"); PDFObject.embed(urlStorage, "#previewContent");
} else if (['jpg', 'jpeg', 'png', 'gif'].includes(fileExtension)) { } else if (['jpg', 'jpeg', 'png', 'gif'].includes(fileExtension)) {
previewContent.innerHTML = previewContent.innerHTML =
`<img src="${url}" alt="Preview" class="max-w-full max-h-full object-contain">`; `<img src="${urlStorage}" alt="Preview" class="max-w-full max-h-full object-contain">`;
} else { } else {
previewContent.innerHTML = '<p class="text-center">Unsupported file type</p>'; previewContent.innerHTML = '<p class="text-center">Unsupported file type</p>';
} }

View File

@@ -219,7 +219,8 @@
@push('scripts') @push('scripts')
<script type="module"> <script type="module">
const element = document.querySelector('#laporan-penilai-jaminan-table'); const element = document.querySelector('#laporan-penilai-jaminan-table');
const searchInput = document.getElementById('search');;
const searchInput = document.getElementById('search');
const startDateInput = document.getElementById('start_date'); const startDateInput = document.getElementById('start_date');
const endDateInput = document.getElementById('end_date'); const endDateInput = document.getElementById('end_date');
const branchFilter = document.getElementById('branch_filter'); const branchFilter = document.getElementById('branch_filter');
@@ -227,7 +228,6 @@
const filterTanggalButton = document.getElementById('filter_tanggal'); const filterTanggalButton = document.getElementById('filter_tanggal');
const exportButton = document.getElementById('export-btn'); const exportButton = document.getElementById('export-btn');
const selectAllCheckbox = document.getElementById('check-all'); const selectAllCheckbox = document.getElementById('check-all');
const statusCheckboxes = document.querySelectorAll('.status-checkbox'); const statusCheckboxes = document.querySelectorAll('.status-checkbox');
@@ -242,6 +242,11 @@
const exportType = document.getElementById('export_type'); const exportType = document.getElementById('export_type');
const exportSearch = document.getElementById('export_search'); const exportSearch = document.getElementById('export_search');
const apiUrl = element.getAttribute('data-api-url'); const apiUrl = element.getAttribute('data-api-url');
// Simple pagination state management
let currentPage = 1;
let isReturningFromDetail = false;
const dataTableOptions = { const dataTableOptions = {
apiEndpoint: apiUrl, apiEndpoint: apiUrl,
pageSize: 5, pageSize: 5,
@@ -293,7 +298,6 @@
return data.debiture && data.debiture.name ? `${data.debiture.name}` : '-'; return data.debiture && data.debiture.name ? `${data.debiture.name}` : '-';
}, },
}, },
tujuan_penilaian_id: { tujuan_penilaian_id: {
title: 'Tujuan Penilaian', title: 'Tujuan Penilaian',
render: (item, data) => { render: (item, data) => {
@@ -309,12 +313,10 @@
}).join(', '); }).join(', ');
}, },
}, },
laporan: { laporan: {
title: 'Status', title: 'Status',
render: (item, data) => { render: (item, data) => {
let badgeClass = ''; let badgeClass = '';
const statusLaporan = data.penilai?.type_penilai || '-'; const statusLaporan = data.penilai?.type_penilai || '-';
switch (statusLaporan.toLowerCase()) { switch (statusLaporan.toLowerCase()) {
@@ -343,7 +345,7 @@
actions: { actions: {
title: 'Action', title: 'Action',
render: (item, data) => { render: (item, data) => {
const status = data.status; // Anggap status berada di dalam objek data const status = data.status;
const dokumenjaminan = data.dokumenjaminan || []; const dokumenjaminan = data.dokumenjaminan || [];
return ` return `
@@ -352,29 +354,98 @@
['done'].includes(status) ? ['done'].includes(status) ?
dokumenjaminan.map(dokumen => { dokumenjaminan.map(dokumen => {
return ` return `
<a class="btn btn-sm btn-primary" href="surveyor/print-out-inspeksi/${data.id}/${dokumen.id}/${dokumen.jenis_jaminan_id}"> <a class="btn btn-sm btn-primary" href="surveyor/print-out-inspeksi/${data.id}/${dokumen.id}/${dokumen.jenis_jaminan_id}">
<i class="ki-outline ki-printer"></i>Inspeksi <i class="ki-outline ki-printer"></i>Inspeksi
</a> </a>
<a class="btn btn-sm btn-info" href="laporan-penilai-jaminan/show/${data.id}/${dokumen.id}/${dokumen.jenis_jaminan_id}" > <a class="btn btn-sm btn-info detail-btn" href="laporan-penilai-jaminan/show/${data.id}/${dokumen.id}/${dokumen.jenis_jaminan_id}">
<i class="ki-filled ki-eye"></i>Lihat <i class="ki-filled ki-eye"></i>Lihat
</a> </a>
<a class="btn btn-sm btn-success" href="penilai/print-out-laporan/${data.id}/${dokumen.id}/${dokumen.jenis_jaminan_id}"> <a class="btn btn-sm btn-success" href="penilai/print-out-laporan/${data.id}/${dokumen.id}/${dokumen.jenis_jaminan_id}">
<i class="ki-filled ki-printer"></i>Laporan <i class="ki-filled ki-printer"></i>Laporan
</a> </a>
`;
`;
}).join('') : '' }).join('') : ''
} }
</div> </div>
`; `;
} }
} }
}, },
}; };
let dataTable = new KTDataTable(element, dataTableOptions); let dataTable = new KTDataTable(element, dataTableOptions);
const fromDetail = true;
if (fromDetail) {
isReturningFromDetail = true;
console.log('Returning from detail page');
// Remove the parameter from URL
window.history.replaceState({}, document.title, window.location.pathname);
setTimeout(() => {
restoreCurrentPage();
isReturningFromDetail = false;
}, 500);
}
function getCurrentPageFromDOM() {
const activePage = document.querySelector('.pagination .btn.active');
if (activePage) {
const pageText = activePage.textContent.trim();
const pageNum = parseInt(pageText);
return isNaN(pageNum) ? 1 : pageNum;
}
return 1;
}
function saveCurrentPage() {
const page = getCurrentPageFromDOM();
currentPage = page;
sessionStorage.setItem('currentTablePage', currentPage.toString());
}
function restoreCurrentPage() {
const savedPage = sessionStorage.getItem('currentTablePage');
if (savedPage && savedPage !== '1') {
currentPage = parseInt(savedPage);
console.log('Restoring to page:', currentPage);
// Use the goPage method to navigate to the saved page
dataTable.goPage(currentPage);
}
}
// Listen for pagination events to track current page
element.addEventListener('pagination', function(e) {
const page = e.detail.page;
currentPage = page;
console.log('Page changed to:', page);
});
// Alternative: Listen for pagination button clicks
document.addEventListener('click', function(e) {
if (e.target.matches('.pagination .btn') && !e.target.closest('.detail-btn')) {
setTimeout(() => {
currentPage = getCurrentPageFromDOM();
console.log('Current page updated to:', currentPage);
}, 100);
}
});
// Detail page redirection
document.addEventListener('click', function(e) {
if (e.target.closest('.detail-btn')) {
e.preventDefault();
// Save current page before navigating
const currentPageNum = getCurrentPageFromDOM();
currentPage = currentPageNum;
sessionStorage.setItem('currentTablePage', currentPage.toString());
console.log('Saving page before detail navigation:', currentPage);
const link = e.target.closest('.detail-btn');
const href = link.getAttribute('href');
window.location.href = href;
}
});
// Search functionality // Search functionality
searchInput.addEventListener('input', function() { searchInput.addEventListener('input', function() {
@@ -392,7 +463,6 @@
const branch = branchFilter.value; const branch = branchFilter.value;
const laporan = Array.from(laporanFilter.selectedOptions).map(option => option.value); const laporan = Array.from(laporanFilter.selectedOptions).map(option => option.value);
let filters = {}; let filters = {};
if (searchInput.value) { if (searchInput.value) {
filters.search = searchInput.value; filters.search = searchInput.value;
@@ -438,10 +508,8 @@
if (selectedStatuses.length === 0) { if (selectedStatuses.length === 0) {
dataTable.search(''); dataTable.search('');
console.log(selectedStatuses);
} else { } else {
dataTable.search(selectedStatuses.join(','), true); dataTable.search(selectedStatuses.join(','), true);
console.log(selectedStatuses);
} }
dataTable.reload(); dataTable.reload();
@@ -451,16 +519,13 @@
selectAllCheckbox.checked = allChecked; selectAllCheckbox.checked = allChecked;
} }
// Single export button functionality // Export functionality
exportButton.addEventListener('click', function(e) { exportButton.addEventListener('click', function(e) {
e.preventDefault(); e.preventDefault();
// Check if any rows are selected
const selectedIds = getSelectedRowIds(); const selectedIds = getSelectedRowIds();
// Determine export type based on context
if (selectedIds.length > 0) { if (selectedIds.length > 0) {
// If rows are selected, export those
exportData({ exportData({
selected_ids: selectedIds, selected_ids: selectedIds,
export_type: 'selected' export_type: 'selected'
@@ -476,14 +541,11 @@
export_type: 'filtered' export_type: 'filtered'
}); });
} else if (searchInput.value) { } else if (searchInput.value) {
// If only search is applied, export filtered results
exportData({ exportData({
search: searchInput.value, search: searchInput.value,
export_type: 'filtered' export_type: 'filtered'
}); });
} else { } else {
// If no selection and no filters, export all
exportData({ exportData({
export_type: 'all' export_type: 'all'
}); });
@@ -491,7 +553,6 @@
}); });
function exportData(filters = {}) { function exportData(filters = {}) {
// Set filter values in the hidden form
exportStartDate.value = filters.start_date || ''; exportStartDate.value = filters.start_date || '';
exportEndDate.value = filters.end_date || ''; exportEndDate.value = filters.end_date || '';
exportStatus.value = filters.status ? filters.status.join(',') : ''; exportStatus.value = filters.status ? filters.status.join(',') : '';
@@ -500,7 +561,6 @@
exportSelectedIds.value = filters.selected_ids ? filters.selected_ids.join(',') : ''; exportSelectedIds.value = filters.selected_ids ? filters.selected_ids.join(',') : '';
exportType.value = filters.export_type || 'all'; exportType.value = filters.export_type || 'all';
exportSearch.value = filters.search || ''; exportSearch.value = filters.search || '';
// Submit the form
exportForm.submit(); exportForm.submit();
} }
@@ -514,7 +574,12 @@
const checkboxes = document.querySelectorAll('[data-datatable-row-check="true"]:checked'); const checkboxes = document.querySelectorAll('[data-datatable-row-check="true"]:checked');
return Array.from(checkboxes).map(checkbox => checkbox.value); return Array.from(checkboxes).map(checkbox => checkbox.value);
} }
// Save page before leaving (only when not going to detail)
window.addEventListener('beforeunload', function() {
if (!isReturningFromDetail) {
saveCurrentPage();
}
});
</script> </script>
@endpush @endpush