Add view all barcodes feature with print functionality
Added a new feature that allows viewing all product barcodes for a tenant in a grid layout with print-optimized styling. This makes it easy to print barcode sheets for all products at once. Changes: - Add new route /<tenant_id>/barcodes for viewing all barcodes - Create view_all_barcodes() function in routes/admin.py - Add all_barcodes.html template with responsive grid and print CSS - Add "View All Barcodes" button to tenant index page - Print layout optimized for 3-column barcode sheets
This commit is contained in:
@@ -400,7 +400,7 @@ def serve_barcode(tenant_id, filename):
|
||||
|
||||
# Import product management routes
|
||||
from routes.admin import (add_product, edit_product, delete_product,
|
||||
generate_barcode, manage_ar_fields)
|
||||
generate_barcode, manage_ar_fields, view_all_barcodes)
|
||||
|
||||
# Register product management routes (remove /admin/ from paths)
|
||||
app.add_url_rule('/<tenant:tenant_id>/add', 'admin.add_product', add_product, methods=['GET', 'POST'])
|
||||
@@ -408,6 +408,7 @@ app.add_url_rule('/<tenant:tenant_id>/edit/<product_id>', 'admin.edit_product',
|
||||
app.add_url_rule('/<tenant:tenant_id>/delete/<product_id>', 'admin.delete_product', delete_product, methods=['POST'])
|
||||
app.add_url_rule('/<tenant:tenant_id>/generate_barcode/<product_id>/<code_type>', 'admin.generate_barcode', generate_barcode)
|
||||
app.add_url_rule('/<tenant:tenant_id>/ar_fields', 'admin.manage_ar_fields', manage_ar_fields, methods=['GET', 'POST'])
|
||||
app.add_url_rule('/<tenant:tenant_id>/barcodes', 'admin.view_all_barcodes', view_all_barcodes, methods=['GET'])
|
||||
|
||||
# Register API routes with tenant prefix
|
||||
from routes.api import api_index
|
||||
|
||||
@@ -316,19 +316,32 @@ def generate_barcode(tenant_id, product_id, code_type):
|
||||
products = load_products(tenant_id)
|
||||
if product_id not in products:
|
||||
return jsonify({"error": "Product not found"}), 404
|
||||
|
||||
|
||||
# Map code_type to the expected format for the main endpoint
|
||||
type_mapping = {
|
||||
'qrcode': 'qr',
|
||||
'ean13': 'ean13',
|
||||
'code128': 'code128'
|
||||
}
|
||||
|
||||
|
||||
barcode_type = type_mapping.get(code_type, code_type)
|
||||
|
||||
|
||||
# Redirect to the main barcode endpoint which generates dynamically
|
||||
return redirect(f'/{tenant_id}/barcodes/{product_id}_{barcode_type}.png')
|
||||
|
||||
def view_all_barcodes(tenant_id):
|
||||
"""Display all product barcodes for printing"""
|
||||
products = load_products(tenant_id)
|
||||
tenant = database.get_or_create_tenant(tenant_id)
|
||||
|
||||
# Get barcode type setting for this tenant
|
||||
barcode_type = tenant.get('barcode_type', 'qr')
|
||||
|
||||
return render_template('admin/all_barcodes.html',
|
||||
products=products,
|
||||
tenant=tenant,
|
||||
barcode_type=barcode_type)
|
||||
|
||||
def manage_credentials(tenant_id):
|
||||
"""Manage tenant login credentials"""
|
||||
tenant = database.get_or_create_tenant(tenant_id)
|
||||
|
||||
149
src/templates/admin/all_barcodes.html
Normal file
149
src/templates/admin/all_barcodes.html
Normal file
@@ -0,0 +1,149 @@
|
||||
{% extends "layout.html" %}
|
||||
|
||||
{% block title %}All Barcodes - {{ tenant.name }} - KCAP Demo Server{% endblock %}
|
||||
|
||||
{% block extra_css %}
|
||||
<style>
|
||||
/* Screen styles */
|
||||
@media screen {
|
||||
.barcode-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
|
||||
gap: 20px;
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
.barcode-item {
|
||||
border: 1px solid #ddd;
|
||||
padding: 15px;
|
||||
border-radius: 8px;
|
||||
text-align: center;
|
||||
background: white;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.barcode-item img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.barcode-item .product-id {
|
||||
font-weight: bold;
|
||||
font-size: 1.1em;
|
||||
margin-bottom: 10px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.print-buttons {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Print styles */
|
||||
@media print {
|
||||
/* Hide everything except barcodes */
|
||||
nav, .navbar, .print-buttons, .alert, .btn {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 100% !important;
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
/* Grid layout for print */
|
||||
.barcode-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 10px;
|
||||
padding: 10px;
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
|
||||
.barcode-item {
|
||||
border: 1px solid #ddd;
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
page-break-inside: avoid;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.barcode-item img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
margin: 5px auto;
|
||||
}
|
||||
|
||||
.barcode-item .product-id {
|
||||
font-weight: bold;
|
||||
font-size: 0.9em;
|
||||
margin-bottom: 5px;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
/* Page breaks */
|
||||
@page {
|
||||
margin: 0.5cm;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="row mt-4">
|
||||
<div class="col-md-12">
|
||||
<div class="alert alert-info">
|
||||
<strong>Current Tenant:</strong> {{ tenant.name }} (ID: {{ tenant.id }})
|
||||
<div class="mt-2">
|
||||
<a href="{{ url_for('tenant_index', tenant_id=tenant.id) }}" class="btn btn-sm btn-secondary">Back to Dashboard</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="print-buttons d-flex justify-content-between align-items-center mb-4">
|
||||
<h1>All Product Barcodes</h1>
|
||||
<button onclick="window.print()" class="btn btn-primary">
|
||||
<i class="bi bi-printer"></i> Print Barcodes
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{% if products %}
|
||||
<div class="barcode-grid">
|
||||
{% for product_id, product_data in products.items() %}
|
||||
<div class="barcode-item">
|
||||
<div class="product-id">{{ product_id }}</div>
|
||||
<img src="/{{ tenant.id }}/barcodes/{{ product_id }}_{{ barcode_type }}.png"
|
||||
alt="Barcode for {{ product_id }}"
|
||||
onerror="this.src='data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' width=\'200\' height=\'100\'%3E%3Crect width=\'200\' height=\'100\' fill=\'%23f0f0f0\'/%3E%3Ctext x=\'50%25\' y=\'50%25\' dominant-baseline=\'middle\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'12\' fill=\'%23999\'%3EBarcode unavailable%3C/text%3E%3C/svg%3E';">
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="alert alert-info">
|
||||
No products available to generate barcodes.
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block extra_js %}
|
||||
<script>
|
||||
// Optional: Automatically print when page loads if requested via URL parameter
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
if (urlParams.get('autoprint') === 'true') {
|
||||
window.onload = function() {
|
||||
setTimeout(function() {
|
||||
window.print();
|
||||
}, 500);
|
||||
};
|
||||
}
|
||||
</script>
|
||||
{% endblock %}
|
||||
@@ -10,6 +10,9 @@
|
||||
<div class="mt-2">
|
||||
<a href="{{ url_for('admin.manage_credentials', tenant_id=tenant.id) }}" class="btn btn-sm btn-secondary">Manage Credentials</a>
|
||||
<a href="{{ url_for('admin.manage_ar_fields', tenant_id=tenant.id) }}" class="btn btn-sm btn-secondary">Manage AR Fields</a>
|
||||
<a href="{{ url_for('admin.view_all_barcodes', tenant_id=tenant.id) }}" class="btn btn-sm btn-success">
|
||||
<i class="bi bi-upc-scan"></i> View All Barcodes
|
||||
</a>
|
||||
<a href="/" class="btn btn-sm btn-outline-secondary">Switch Tenant</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -18,9 +18,14 @@
|
||||
<div class="mt-4">
|
||||
<div class="d-flex justify-content-between align-items-center mb-3">
|
||||
<h2>Products</h2>
|
||||
<a href="/{{ tenant.id }}/add" class="btn btn-primary">
|
||||
<i class="bi bi-plus-circle"></i> Add New Product
|
||||
</a>
|
||||
<div>
|
||||
<a href="/{{ tenant.id }}/barcodes" class="btn btn-success me-2">
|
||||
<i class="bi bi-upc-scan"></i> View All Barcodes
|
||||
</a>
|
||||
<a href="/{{ tenant.id }}/add" class="btn btn-primary">
|
||||
<i class="bi bi-plus-circle"></i> Add New Product
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if products %}
|
||||
|
||||
Reference in New Issue
Block a user