Display existing images in a form

InvenTree/InvenTree/static/css/inventree.css

@@ -183,6 +183,24 @@
     -webkit-opacity: 10%;
 }
 
+/* grid display for part images */
+
+.table-img-grid tr {
+    display: inline;
+}
+
+.table-img-grid td {
+    padding: 10px;
+    margin: 10px;
+}
+
+.table-img-grid .grid-image {
+
+    height: 128px;
+    width: 128px;
+    object-fit: contain;
+    background: #eee;
+}
 
 .btn-glyph {
     padding-left: 6px;

InvenTree/part/templates/part/part_base.html

@@ -35,6 +35,7 @@
                 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 %}",

InvenTree/part/templates/part/select_image.html

@@ -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 %}

InvenTree/part/urls.py

@@ -57,7 +57,8 @@ part_detail_urls = [
     url(r'^qr_code/?', views.PartQRCode.as_view(), name='part-qr'),
 
     # Normal thumbnail with form
-    url(r'^thumbnail/?', views.PartImage.as_view(), name='part-image'),
+    url(r'^thumbnail/?', views.PartImageUpload.as_view(), name='part-image-upload'),
+    url(r'^thumb-select/?', views.PartImageSelect.as_view(), name='part-image-select'),
 
     # Any other URLs go to the part detail page
     url(r'^.*$', views.PartDetail.as_view(), name='part-detail'),

InvenTree/part/views.py

@@ -601,8 +601,8 @@ class PartQRCode(QRCodeView):
             return None
 
 
-class PartImage(AjaxUpdateView):
+class PartImageUpload(AjaxUpdateView):
-    """ View for uploading Part image """
+    """ View for uploading a new Part image """
 
     model = Part
     ajax_template_name = 'modal_form.html'
@@ -622,6 +622,10 @@ class PartImageSelect(AjaxUpdateView):
     ajax_template_name = 'part/select_image.html'
     ajax_form_title = _('Select Part Image')
 
+    fields = [
+        'image',
+    ]
+
     def get_data(self):
         return {
             'success': _('Selected part image')