2
0
mirror of https://github.com/inventree/InvenTree.git synced 2025-08-14 23:51:08 +00:00

Display existing images in a form

This commit is contained in:
Oliver Walters
2020-02-10 22:57:36 +11:00
parent a82e219336
commit 17c10da10e
5 changed files with 77 additions and 6 deletions

View File

@@ -28,13 +28,14 @@
<div class="media">
<div class="media-left">
<div class='dropzone' id='part-thumb'>
<img class="part-thumb"
<img class="part-thumb"
{% if part.image %}
src="{{ part.image.url }}"
{% else %}
src="{% static 'img/blank_image.png' %}"
{% endif %}/>
</div>
<a href='#' id='part-image-select'>Select Part Image</a>
</div>
<div class="media-body">
<h4>
@@ -163,7 +164,7 @@
enableDragAndDrop(
'#part-thumb',
"{% url 'part-image' part.id %}",
"{% url 'part-image-upload' part.id %}",
{
label: 'image',
success: function(data, status, xhr) {
@@ -210,13 +211,40 @@
$("#part-thumb").click(function() {
launchModalForm(
"{% url 'part-image' part.id %}",
"{% url 'part-image-upload' part.id %}",
{
reload: true
}
);
});
function onSelectImage(response) {
$("#modal-form").find("#image-select-table").bootstrapTable({
pagination: true,
pageSize: 25,
url: "{% url 'api-part-thumbs' %}",
showHeader: false,
columns: [
{
field: 'image',
title: 'Image',
formatter: function(value, row, index, field) {
return "<img src='/media/" + value + "' class='grid-image'/>"
}
}
],
});
}
$("#part-image-select").click(function() {
launchModalForm("{% url 'part-image-select' part.id %}",
{
reload: true,
after_render: onSelectImage
});
});
$("#part-edit").click(function() {
launchModalForm(
"{% url 'part-edit' part.id %}",

View File

@@ -0,0 +1,20 @@
{% extends "modal_form.html" %}
{% block pre_form_content %}
{{ block.super }}
Select from existing images.
{% endblock %}
{% block form %}
<form method='post' action='' class='js-modal-form' enctype='multipart/form-data'>
{% csrf_token %}
{% load crispy_forms_tags %}
<table id='image-select-table' class='table table-striped table-condensed table-img-grid'>
</table>
</form>
{% endblock %}