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>
</div>
<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>
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>
@@ -87,6 +90,18 @@
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>
<style>

View File

@@ -57,7 +57,7 @@
</label>
<div class="flex flex-wrap items-baseline w-full">
{{-- 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>
</a>
</div>

View File

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

View File

@@ -58,11 +58,13 @@
const fileExtension = url.split('.').pop().toLowerCase();
const previewContent = document.getElementById('previewContent');
const urlStorage = 'storage' + '/' + url;
if (['pdf'].includes(fileExtension)) {
PDFObject.embed(url, "#previewContent");
PDFObject.embed(urlStorage, "#previewContent");
} else if (['jpg', 'jpeg', 'png', 'gif'].includes(fileExtension)) {
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 {
previewContent.innerHTML = '<p class="text-center">Unsupported file type</p>';
}

View File

@@ -219,7 +219,8 @@
@push('scripts')
<script type="module">
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 endDateInput = document.getElementById('end_date');
const branchFilter = document.getElementById('branch_filter');
@@ -227,7 +228,6 @@
const filterTanggalButton = document.getElementById('filter_tanggal');
const exportButton = document.getElementById('export-btn');
const selectAllCheckbox = document.getElementById('check-all');
const statusCheckboxes = document.querySelectorAll('.status-checkbox');
@@ -242,6 +242,11 @@
const exportType = document.getElementById('export_type');
const exportSearch = document.getElementById('export_search');
const apiUrl = element.getAttribute('data-api-url');
// Simple pagination state management
let currentPage = 1;
let isReturningFromDetail = false;
const dataTableOptions = {
apiEndpoint: apiUrl,
pageSize: 5,
@@ -293,7 +298,6 @@
return data.debiture && data.debiture.name ? `${data.debiture.name}` : '-';
},
},
tujuan_penilaian_id: {
title: 'Tujuan Penilaian',
render: (item, data) => {
@@ -309,12 +313,10 @@
}).join(', ');
},
},
laporan: {
title: 'Status',
render: (item, data) => {
let badgeClass = '';
const statusLaporan = data.penilai?.type_penilai || '-';
switch (statusLaporan.toLowerCase()) {
@@ -343,7 +345,7 @@
actions: {
title: 'Action',
render: (item, data) => {
const status = data.status; // Anggap status berada di dalam objek data
const status = data.status;
const dokumenjaminan = data.dokumenjaminan || [];
return `
@@ -355,13 +357,12 @@
<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
</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
</a>
<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
</a>
`;
}).join('') : ''
}
@@ -369,12 +370,82 @@
`;
}
}
},
};
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
searchInput.addEventListener('input', function() {
@@ -392,7 +463,6 @@
const branch = branchFilter.value;
const laporan = Array.from(laporanFilter.selectedOptions).map(option => option.value);
let filters = {};
if (searchInput.value) {
filters.search = searchInput.value;
@@ -438,10 +508,8 @@
if (selectedStatuses.length === 0) {
dataTable.search('');
console.log(selectedStatuses);
} else {
dataTable.search(selectedStatuses.join(','), true);
console.log(selectedStatuses);
}
dataTable.reload();
@@ -451,16 +519,13 @@
selectAllCheckbox.checked = allChecked;
}
// Single export button functionality
// Export functionality
exportButton.addEventListener('click', function(e) {
e.preventDefault();
// Check if any rows are selected
const selectedIds = getSelectedRowIds();
// Determine export type based on context
if (selectedIds.length > 0) {
// If rows are selected, export those
exportData({
selected_ids: selectedIds,
export_type: 'selected'
@@ -476,14 +541,11 @@
export_type: 'filtered'
});
} else if (searchInput.value) {
// If only search is applied, export filtered results
exportData({
search: searchInput.value,
export_type: 'filtered'
});
} else {
// If no selection and no filters, export all
exportData({
export_type: 'all'
});
@@ -491,7 +553,6 @@
});
function exportData(filters = {}) {
// Set filter values in the hidden form
exportStartDate.value = filters.start_date || '';
exportEndDate.value = filters.end_date || '';
exportStatus.value = filters.status ? filters.status.join(',') : '';
@@ -500,7 +561,6 @@
exportSelectedIds.value = filters.selected_ids ? filters.selected_ids.join(',') : '';
exportType.value = filters.export_type || 'all';
exportSearch.value = filters.search || '';
// Submit the form
exportForm.submit();
}
@@ -514,7 +574,12 @@
const checkboxes = document.querySelectorAll('[data-datatable-row-check="true"]:checked');
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>
@endpush