Add AJAX filtering of company list

- Search across NAME and DESCRIPTION fields
- TODO - Implement pagination (how?)

InvenTree/company/api.py

@@ -21,6 +21,7 @@ class CompanyList(generics.ListCreateAPIView):
     filter_backends = [
         DjangoFilterBackend,
         filters.SearchFilter,
+        filters.OrderingFilter,
     ]
 
     filter_fields = [

InvenTree/company/templates/company/index.html

@@ -1,30 +1,31 @@
 {% extends "base.html" %}
 
+{% load static %}
+
 {% block content %}
 
 <h3>Companies</h3>
 
+<div class="container">
+<div class='input-group'>
+    <input class="form-control" id="company-filter" type="text" placeholder="Search...">
+    <span class='input-group-btn'>
+    <button type='button' class='btn' id='clear-filter'>Clear</button>
+    </span>
+</div>
 <hr>
-<b>TODO - Filtering! (customer / supplier / search)</b>
-<hr>
-
-<ul class='list-group'>
-{% for company in companies %}
-<li class='list-group-item'>
-    <b><a href="{% url 'company-detail' company.id %}">{{ company.name }}</a></b>
-    <br>
-    {{ company.description }}
-    {% if company.website %}
-    <a href="{{ company.website }}">- {{ company.website }}</a>
-    {% endif %}
-</li>
-{% endfor %}
+<ul class='list-group' id="company-list">
 </ul>
 
+</div>
+
 <div class='container-fluid'>
 <a href="{% url 'company-create' %}">
     <button class="btn btn-success">New Company</button>
 </a>
 </div>
 
+<script type="text/javascript" src="{% static 'script/filter_company.js' %}">
+</script>
+
 {% endblock %}

InvenTree/static/script/filter_company.js

@@ -0,0 +1,72 @@
+var keyDelay = 0;
+
+var delay = (function(){
+    return function(callback, ms){
+        clearTimeout(keyDelay);
+        keyDelay = setTimeout(callback, ms);
+    };
+})();
+
+
+function add_company(company){
+
+    var text = "<li class='list-group-item'>";
+
+    text += "<b><a href='" + company.url + "'>";
+    text += company.name + "</a></b>";
+
+    if (company.description){
+        text += " - " + company.description;
+    }
+
+    text += "</li>";
+
+    $("#company-list").append(text);
+}
+
+
+function filter(text){
+
+    $.ajax(
+        {
+            url: "/api/company/",
+            success: function(result) {
+                $("#company-list").empty();
+                $.each(result.results, function(i, company){
+                    add_company(company);
+                })
+            },
+            data: {
+                'search': text,
+            }
+        }
+    );
+}
+
+$(document).ready(function(){
+  $("#company-filter").keyup(function(e) {
+
+      if (e.keyCode == 27){ // Escape key
+          clearTimeout(keyDelay);
+          $("#company-filter").val('');
+          filter('');
+      }
+      else {
+
+          var value = $(this).val().toLowerCase();
+
+          delay(function() {
+              filter(value);
+          }, 500);
+      }
+  });
+
+  $("#clear-filter").click(function(){
+      clearTimeout(keyDelay);
+      $("#company-filter").val('');
+      filter('');
+  });
+
+  // Initially load the list with all values
+  filter('');
+});

InvenTree/templates/base.html

@@ -16,12 +16,19 @@
 <!-- Local stylesheet -->
 <link rel="stylesheet" href="{% static 'css/inventree.css' %}">
 
+<!-- AJAX -->
+<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
+
 <!-- Bootstrap javascript -->
 <!--
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
 <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
 -->
 
+{% block head %}
+
+{% endblock %}
+
 <title>
 {% block title %}
 InvenTree