Add modal preview for OPD history scans

This commit is contained in:
DevSoftTech Server 2026-07-25 21:41:58 +05:30
parent f90bb94063
commit 9a3f29660b
2 changed files with 69 additions and 1 deletions

View File

@ -460,6 +460,25 @@
object-fit: contain;
background: #f8f9fa;
}
.rx-history-scan-modal-body {
max-height: calc(100vh - 140px);
min-height: 70vh;
overflow: auto;
background: #f8f9fa;
padding: .75rem;
}
.rx-history-scan-modal-dialog {
width: min(96vw, 1600px);
max-width: min(96vw, 1600px);
}
.rx-history-scan-modal-img {
display: block;
max-width: 100%;
max-height: calc(100vh - 190px);
width: auto;
height: auto;
margin: 0 auto;
}
@media (min-width: 992px) {
.rx-two-panel {
--rx-panel-height: calc(100vh - 170px);
@ -1636,6 +1655,20 @@
</div>
</div>
</div>
<div class="modal fade" id="historyScanPreviewModal" tabindex="-1" aria-hidden="true">
<div class="modal-dialog rx-history-scan-modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="historyScanPreviewTitle">OPD Scan</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body rx-history-scan-modal-body text-center">
<img src="" alt="OPD history scan" id="historyScanPreviewImage" class="rx-history-scan-modal-img">
</div>
</div>
</div>
</div>
</section>
<script>
@ -6638,6 +6671,36 @@
$(this).text($item.hasClass('expanded') ? 'Minimize' : 'Expand');
});
$(document).on('click', '.js-history-scan-link', function(e) {
var modalEl;
var modalInst;
var src;
var title;
e.preventDefault();
src = ($(this).data('scan-src') || $(this).attr('href') || '').toString().trim();
if (!src) {
return;
}
title = ($(this).data('scan-title') || 'OPD Scan').toString().trim();
$('#historyScanPreviewImage').attr('src', src);
$('#historyScanPreviewTitle').text(title || 'OPD Scan');
if (window.bootstrap && window.bootstrap.Modal) {
modalEl = document.getElementById('historyScanPreviewModal');
modalInst = window.bootstrap.Modal.getOrCreateInstance(modalEl);
modalInst.show();
} else {
window.open(src, '_blank');
}
});
$('#historyScanPreviewModal').on('hidden.bs.modal', function() {
$('#historyScanPreviewImage').attr('src', '');
});
$(document).on('click', '.btn-use-current-scan-report', function() {
var txt = ($(this).data('report') || '').toString().trim();
if (!txt) {

View File

@ -14,7 +14,12 @@
<?php if (!empty($scan['is_pdf'])) { ?>
<a class="btn btn-outline-secondary btn-sm w-100" target="_blank" href="<?= esc((string) ($scan['path'] ?? '')) ?>">Open PDF</a>
<?php } else { ?>
<a target="_blank" href="<?= esc((string) ($scan['path'] ?? '')) ?>">
<a
href="<?= esc((string) ($scan['path'] ?? '')) ?>"
class="js-history-scan-link"
data-scan-src="<?= esc((string) ($scan['path'] ?? '')) ?>"
data-scan-title="<?= esc((string) (($scan['opd_code'] ?? '') !== '' ? $scan['opd_code'] : ('OPD #' . ((int) ($scan['opd_id'] ?? 0)))) . ' ' . ($scan['opd_date'] ?? '')) ?>"
>
<img src="<?= esc((string) ($scan['path'] ?? '')) ?>" loading="lazy" decoding="async" class="rx-history-preview" alt="history scan">
</a>
<button type="button" class="btn btn-sm btn-outline-secondary mt-1 w-100 btn-history-toggle-image">Expand</button>