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 --> <!-- Image fragment -->
<div class="image-slot text-center"> <div class="image-slot text-center">
{% if image %} {% if image %}
<img src="{{ url_for('static', filename=image.filename) }}" alt="Image of ID {{ id }}" class="img-thumbnail w-100" <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 }}"> 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 fade" id="imageModal-{{ id }}" tabindex="-1" style="z-index: 9999;">
<div class="modal-dialog modal-dialog-centered modal-lg"> <div class="modal-dialog modal-dialog-centered modal-lg">
<div class="modal-content"> <div class="modal-content">
<div class="modal-body text-center"> <div class="modal-body text-center">
<img src="{{ url_for('static', filename=image.filename) }}" alt="Image of ID {{ id }}" class="img-fluid"> <img src="{{ url_for('static', filename=image.filename) }}" alt="Image of ID {{ id }}"
</div> class="img-fluid">
{% 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>
{% 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>
</div>
{% else %} {% else %}
{% if enabled %} {% if enabled %}
<a href="#" class="link-secondary" onclick="document.getElementById('image-upload-input-{{ id }}').click(); return false;"> <a href="#" class="link-secondary"
{{ icons.render_icon('image', 256) }} onclick="document.getElementById('image-upload-input-{{ id }}').click(); return false;">
</a> {{ icons.render_icon('image', 256) }}
<form method="POST" enctype="multipart/form-data" id="image-upload-form-{{ id }}" class="d-none"> </a>
<input type="file" id="image-upload-input-{{ id }}" name="file" <form method="POST" enctype="multipart/form-data" id="image-upload-form-{{ id }}" class="d-none">
onchange="ImageWidget.submitImageUpload('{{ id }}')"> <input type="file" id="image-upload-input-{{ id }}" name="file"
<input type="hidden" name="target_model" value="inventory"> onchange="ImageWidget.submitImageUpload('{{ id }}')">
<input type="hidden" name="model_id" value="{{ id }}"> <input type="hidden" name="target_model" value="inventory">
<input type="hidden" name="caption" value="Uploaded via UI"> <input type="hidden" name="model_id" value="{{ id }}">
</form> <input type="hidden" name="caption" value="Uploaded via UI">
{% endif %} </form>
{% endif %}
{% endif %} {% endif %}
</div> </div>
{% endmacro %} {% endmacro %}