Refactor image fragment to improve code readability and maintainability

This commit is contained in:
Yaro Kasear 2025-07-25 08:43:03 -05:00
parent d488324c50
commit 028cb84fed

View file

@ -4,49 +4,51 @@
<!-- Image fragment -->
<div class="image-slot text-center">
{% if image %}
<img src="{{ url_for('static', filename=image.filename) }}" alt="Image of ID {{ id }}" class="img-thumbnail w-100"
style="height: auto;" data-bs-toggle="modal" data-bs-target="#imageModal-{{ id }}">
<div class="modal fade" id="imageModal-{{ id }}" tabindex="-1" style="z-index: 9999;">
<div class="modal-dialog modal-dialog-centered modal-lg">
<div class="modal-content">
<div class="modal-body text-center">
<img src="{{ url_for('static', filename=image.filename) }}" alt="Image of ID {{ id }}" class="img-fluid">
</div>
{% if enabled %}
<div class="modal-footer justify-content-between">
<button class="btn btn-danger" onclick="ImageWidget.deleteImage('{{ id }}', '{{ image.id }}')">
{{ icons.render_icon('trash') }}
</button>
<form method="POST" enctype="multipart/form-data" id="image-upload-form-{{ id }}" class="d-none">
<input type="file" id="image-upload-input-{{ id }}" name="file"
onchange="ImageWidget.submitImageUpload('{{ id }}')">
<input type="hidden" name="target_model" value="inventory">
<input type="hidden" name="model_id" value="{{ id }}">
<input type="hidden" name="caption" value="Uploaded via UI">
</form>
<label class="btn btn-secondary mb0" for="image-upload-input-{{ id }}">
{{ icons.render_icon('upload') }}
</label>
</div>
{% endif %}
</div>
<img src="{{ url_for('static', filename=image.filename) }}" alt="Image of ID {{ id }}" class="img-thumbnail w-100"
style="height: auto;" data-bs-toggle="modal" data-bs-target="#imageModal-{{ id }}">
<div class="modal fade" id="imageModal-{{ id }}" tabindex="-1" style="z-index: 9999;">
<div class="modal-dialog modal-dialog-centered modal-lg">
<div class="modal-content">
<div class="modal-body text-center">
<img src="{{ url_for('static', filename=image.filename) }}" alt="Image of ID {{ id }}"
class="img-fluid">
</div>
{% if enabled %}
<div class="modal-footer justify-content-between">
<button class="btn btn-danger" onclick="ImageWidget.deleteImage('{{ id }}', '{{ image.id }}')">
{{ icons.render_icon('trash') }}
</button>
<form method="POST" enctype="multipart/form-data" id="image-upload-form-{{ id }}" class="d-none">
<input type="file" id="image-upload-input-{{ id }}" name="file"
onchange="ImageWidget.submitImageUpload('{{ id }}')">
<input type="hidden" name="target_model" value="inventory">
<input type="hidden" name="model_id" value="{{ id }}">
<input type="hidden" name="caption" value="Uploaded via UI">
</form>
<label class="btn btn-secondary mb0" for="image-upload-input-{{ id }}">
{{ icons.render_icon('upload') }}
</label>
</div>
{% endif %}
</div>
</div>
</div>
{% else %}
{% if enabled %}
<a href="#" class="link-secondary" onclick="document.getElementById('image-upload-input-{{ id }}').click(); return false;">
{{ icons.render_icon('image', 256) }}
</a>
<form method="POST" enctype="multipart/form-data" id="image-upload-form-{{ id }}" class="d-none">
<input type="file" id="image-upload-input-{{ id }}" name="file"
onchange="ImageWidget.submitImageUpload('{{ id }}')">
<input type="hidden" name="target_model" value="inventory">
<input type="hidden" name="model_id" value="{{ id }}">
<input type="hidden" name="caption" value="Uploaded via UI">
</form>
{% endif %}
{% if enabled %}
<a href="#" class="link-secondary"
onclick="document.getElementById('image-upload-input-{{ id }}').click(); return false;">
{{ icons.render_icon('image', 256) }}
</a>
<form method="POST" enctype="multipart/form-data" id="image-upload-form-{{ id }}" class="d-none">
<input type="file" id="image-upload-input-{{ id }}" name="file"
onchange="ImageWidget.submitImageUpload('{{ id }}')">
<input type="hidden" name="target_model" value="inventory">
<input type="hidden" name="model_id" value="{{ id }}">
<input type="hidden" name="caption" value="Uploaded via UI">
</form>
{% endif %}
{% endif %}
</div>
{% endmacro %}
{% endmacro %}