spouliot/PowderCoatingLogix
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add Print QR Label action to inventory list (desktop + mobile)

Browse Source 
Opens the same iframe modal used on the Details page; the iframe src is
set dynamically so a single shared modal handles every row.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Scott Pouliot
2026-05-23 09:35:13 -04:00
parent 05935b110a
commit a7bf97a2df
1 changed files with 43 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/PowderCoating.Web/Views/Inventory/Index.cshtml
+43
View File
@@ -340,6 +340,11 @@
</td>
<td class="text-end pe-4">
<div class="btn-group btn-group-sm">
<button type="button" class="btn btn-outline-secondary"
title="Print QR Label"
onclick="openQrLabelModal(@item.Id, event)">
<i class="bi bi-qr-code"></i>
</button>
<a asp-action="Details" asp-route-id="@item.Id" class="btn btn-outline-primary" title="View Details">
<i class="bi bi-eye"></i>
</a>
@@ -454,6 +459,10 @@
</div>
<div class="mobile-card-footer">
<button type="button" class="btn btn-sm btn-outline-secondary"
onclick="openQrLabelModal(@item.Id, event)">
<i class="bi bi-qr-code me-1"></i>QR Label
</button>
<a href="@Url.Action("Details", new { id = item.Id })"
class="btn btn-sm btn-outline-primary"
onclick="event.stopPropagation();">
@@ -477,8 +486,42 @@
}
</div>
@* QR Label Modal (shared across all items — src set dynamically by JS) *@
<div class="modal fade" id="qrLabelModal" tabindex="-1" aria-labelledby="qrLabelModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header py-2">
<h6 class="modal-title" id="qrLabelModalLabel">
<i class="bi bi-qr-code me-2"></i>QR Label
</h6>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body p-0 d-flex justify-content-center" style="background:#f0f0f0;min-height:360px;">
<iframe id="qrLabelFrame"
src="about:blank"
style="width:100%;height:400px;border:none;"
title="QR Label Preview"></iframe>
</div>
<div class="modal-footer py-2">
<button type="button" class="btn btn-primary btn-sm"
onclick="document.getElementById('qrLabelFrame').contentWindow.print()">
<i class="bi bi-printer me-2"></i>Print Label
</button>
<button type="button" class="btn btn-outline-secondary btn-sm" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
@section Scripts {
<script>
function openQrLabelModal(itemId, e) {
e.stopPropagation();
const frame = document.getElementById('qrLabelFrame');
frame.src = '@Url.Action("Label", "Inventory")/' + itemId + '?embed=true';
bootstrap.Modal.getOrCreate(document.getElementById('qrLabelModal')).show();
}
// Make table rows clickable
document.querySelectorAll('.inventory-row').forEach(row => {
row.addEventListener('click', function(e) {