Merge pull request #1622 from SchrodingersGat/grid-view

Grid view

InvenTree/part/templates/part/category.html

@@ -128,6 +128,13 @@
                 <li><a href='#' id='multi-part-export' title='{% trans "Export" %}'>{% trans "Export Data" %}</a></li>
             </ul>
         </div>
+        <!-- Buttons to toggle between grid and table view -->
+        <button id='view-list' class='btn btn-default' type='button' title='{% trans "View list display" %}'>
+            <span class='fas fa-th-list'></span>
+        </button>
+        <button id='view-grid' class='btn btn-default' type='button' title='{% trans "View grid display" %}'>
+            <span class='fas fa-th'></span>
+        </button>
         <div class='filter-list' id='filter-list-parts'>
             <!-- Empty div -->
         </div>
@@ -169,6 +176,22 @@
         toggleId: '#category-menu-toggle',
     });
 
+    $('#view-list').click(function() {
+        $('#view-list').hide();
+        $('#view-grid').show();
+
+        $('#part-table').bootstrapTable('toggleCustomView');
+        inventreeSave('part-grid-view', '');
+    });
+
+    $('#view-grid').click(function() {
+        $('#view-grid').hide();
+        $('#view-list').show();
+
+        $('#part-table').bootstrapTable('toggleCustomView');
+        inventreeSave('part-grid-view', 1);
+    });
+
     $("#cat-create").click(function() {
         launchModalForm(
             "{% url 'category-create' %}",
@@ -273,7 +296,15 @@
             },
             buttons: ['#part-options'],
             checkbox: true,
+            gridView: true,
         },
     );
 
+    if (inventreeLoad("part-grid-view")) {
+        $('#view-grid').hide();
+        $('#part-table').bootstrapTable('toggleCustomView');
+    } else {
+        $('#view-list').hide();
+    }
+
 {% endblock %}

InvenTree/templates/base.html

@@ -124,14 +124,14 @@
 <script type='text/javascript' src="{% static 'script/bootstrap/bootstrap-table-group-by.js' %}"></script>
 <script type='text/javascript' src="{% static 'script/bootstrap/bootstrap-toggle.js' %}"></script>
 <script type='text/javascript' src="{% static 'script/bootstrap/bootstrap-table-filter-control.js' %}"></script>
-<!-- <script type='text/javascript' src="{% static 'script/bootstrap/filter-control-utils.js' %}"></script> -->
 
 <!-- jquery-treegrid -->
 <script type='text/javascript' src='{% static "treegrid/js/jquery.treegrid.js" %}'></script>
 <script type='text/javascript' src='{% static "treegrid/js/jquery.treegrid.bootstrap3.js" %}'></script>
 
-<!-- boostrap-table-treegrid -->
+<!-- boostrap-table extensions -->
 <script type='text/javascript' src='{% static "bootstrap-table/extensions/treegrid/bootstrap-table-treegrid.js" %}'></script>
+<script type='text/javascript' src='{% static "bootstrap-table/extensions/custom-view/bootstrap-table-custom-view.js" %}'></script>
 
 <!-- 3rd party general js -->
 <script type="text/javascript" src="{% static 'fullcalendar/main.js' %}"></script>

InvenTree/templates/js/modals.js

@@ -978,6 +978,7 @@ function showModalImage(image_url) {
     // Set image content
     $('#modal-image').attr('src', image_url);
 
+    modal.hide();
     modal.show();
 
     modal.animate({

InvenTree/templates/js/part.js

@@ -278,6 +278,64 @@ function loadParametricPartTable(table, options={}) {
 }
 
 
+function partGridTile(part) {
+    // Generate a "grid tile" view for a particular part
+
+    // Rows for table view
+    var rows = '';
+
+    if (part.IPN) {
+        rows += `<tr><td><b>{% trans "IPN" %}</b></td><td>${part.IPN}</td></tr>`;
+    }
+
+    var stock = `${part.in_stock}`;
+
+    if (!part.in_stock) {
+        stock = `<span class='label label-red'>{% trans "No Stock" %}</label>`;
+    }
+
+    rows += `<tr><td><b>{% trans "Stock" %}</b></td><td>${stock}</td></tr>`;
+
+    if (part.on_order) {
+        rows += `<tr><td><b>{$ trans "On Order" %}</b></td><td>${part.on_order}</td></tr>`;
+    }
+
+    if (part.building) {
+        rows += `<tr><td><b>{% trans "Building" %}</b></td><td>${part.building}</td></tr>`;
+    }
+
+    var html = `
+    
+    <div class='col-sm-3 card'>
+        <div class='panel panel-default panel-inventree'>
+            <div class='panel-heading'>
+                <a href='/part/${part.pk}/'>
+                    <b>${part.full_name}</b>
+                </a>
+                ${makePartIcons(part)}
+                <br>
+                <i>${part.description}</i>
+            </div>
+            <div class='panel-content'>
+                <div class='row'>
+                    <div class='col-sm-6'>
+                        <img src='${part.thumbnail}' class='card-thumb' onclick='showModalImage("${part.image}")'>
+                    </div>
+                    <div class='col-sm-6'>
+                        <table class='table table-striped table-condensed'>
+                            ${rows}
+                        </table>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>    
+    `;
+
+    return html;
+}
+
+
 function loadPartTable(table, url, options={}) {
     /* Load part listing data into specified table.
      * 
@@ -452,8 +510,20 @@ function loadPartTable(table, url, options={}) {
         formatNoMatches: function() { return '{% trans "No parts found" %}'; },
         columns: columns,
         showColumns: true,
-    });
+        showCustomView: false,
+        showCustomViewButton: false,
+        customView: function(data) {
 
+            var html = '';
+
+            data.forEach(function(row) {
+                html += partGridTile(row);
+            });
+
+            return `<div class='row mx-0'>${html}</div>`;
+        }
+    });
+    
     if (options.buttons) {
         linkButtonsToSelection($(table), options.buttons);
     }