rearrange search functionality

admin/templates/admin/group_list.html

@@ -9,9 +9,7 @@
         <a href="{% url 'admin:group_create' %}" class="btn btn-success btn-header float-right">
             {% icon 'plus' %}
         </a>
-        <div class="float-right search">
-            <input id="filter" class="form-control" type="text" placeholder="{% trans "Search" %}">
-        </div>
+        {% include 'search_block.html' %}
         <h1 class="page-header">{% trans "Groups" %}</h1>
     </div>
 </div>

admin/templates/admin/user_list.html

@@ -12,9 +12,7 @@
 <a href="{% url 'admin:user_create' %}" class="btn btn-success btn-header float-right">
     {% icon 'plus' %}
 </a>
-<div class="float-right search">
-    <input id="filter" class="form-control" type="text" placeholder="{% trans "Search" %}">
-</div>
+{% include 'search_block.html' %}
 {% endblock page_heading_extra %}
 
 {% block content %}

computes/templates/computes/instances.html

@@ -14,9 +14,7 @@
     {% icon 'plus' %}
 </a>
 {% if instances %}
-<div class="float-right search">
-    <input id="filter" class="form-control" type="text" placeholder="{% trans 'Search' %}">
-</div>
+    {% include 'search_block.html' %}
 {% endif %}
 {% endblock page_heading_extra %}
 

computes/templates/computes/list.html

@@ -22,9 +22,9 @@
         </div>
     {% else %}
         <div class="col-lg-12">
-            <table class="table table-striped table-hover">
+            <table class="table table-striped table-hover sortable-theme-bootstrap" data-sortable>
                 <thead>
-                    <tr class="d-flex">
+                    <tr>
                         <th span="col" class="col-sm-3">{% trans "Name" %}</th>
                         <th span="col" class="col-sm-2">{% trans "Status" %}</th>
                         <th span="col" class="col-sm-5">{% trans "Details" %}</th>
@@ -33,7 +33,7 @@
                 </thead>
                 <tbody class="searchable">
                 {% for compute in computes %}
-                    <tr class="d-flex">
+                    <tr>
                         <td class="col-sm-3">
                             {{ compute.name }}
                         </td>
@@ -64,5 +64,6 @@
 {% endblock content %}
 
 {% block script %}
-<script src="{% static "js/filter-table.js" %}"></script>
+<script src="{% static 'js/sortable.min.js' %}"></script>
+<script src="{% static 'js/filter-table.js' %}"></script>
 {% endblock script %}

instances/templates/allinstances.html

@@ -4,7 +4,7 @@
 {% load staticfiles %}
 {% block title %}{% trans "Instances" %}{% endblock %}
 {% block style %}
-    <link rel="stylesheet" href="{% static "css/sortable-theme-bootstrap.css" %}" />
+    <link rel="stylesheet" href="{% static 'css/sortable-theme-bootstrap.css' %}" />
 {% endblock %}
 {% block page_heading %}{% trans "Instances" %}{% endblock page_heading %}
 
@@ -12,9 +12,7 @@
 {% if request.user.is_superuser %}
     {% include 'create_inst_block.html' %}
 {% endif %}
-<div class="float-right search">
-    <input id="filter" class="form-control" type="text" placeholder="{% trans 'Search' %}">
-</div>
+    {% include 'search_block.html' %}
 {% endblock page_heading_extra %}
 
 {% block content %}
@@ -37,7 +35,7 @@
     </div>
 {% endblock content %}
 {% block script %}
-    <script src="{% static "js/sortable.min.js" %}"></script>
+    <script src="{% static 'js/sortable.min.js' %}"></script>
     <script src="{% static 'js/filter-table.js' %}"></script>
     {% if request.user.is_superuser %}
         <script>

nwfilters/templates/nwfilter.html

@@ -66,8 +66,6 @@
     <div class="row">
         <div class="col-lg-12">
         <h5 class="page-header mr-auto">{% trans "Filter References" %}
-            
-        
             <form class="form-inline float-right" method="post" role="form" aria-label="Add NWFilter form">{% csrf_token %}
                 <div class="form-group">
                     <div class="input-group">
@@ -108,7 +106,7 @@
                         <td style="width:30px;">
                             <form action="" method="post" role="form" aria-label="Delete NWFilter form">{% csrf_token %}
                                 <input type="hidden" name="ref" value="{{ ref }}">
-                                <button type="submit" class="btn btn-sm btn-danger" name="del_nwfilter_ref" title="{% trans "Delete" %}" onclick="return confirm('{% trans "Are you sure?" %}')">
+                                <button type="submit" class="btn btn-sm btn-danger" name="del_nwfilter_ref" title="{% trans "Delete" %}" onclick="return confirm('{% trans "Are you sure?" %}');">
                                     <i class="fa fa-trash"></i>
                                 </button>
                             </form>
@@ -148,7 +146,7 @@
                             <input type="hidden" name="action" value="{{ rule.action }}">
                             <input type="hidden" name="direction" value="{{ rule.direction }}">
                             <input type="hidden" name="priority" value="{{ rule.priority }}">
-                            <button type="submit" class="btn btn-sm btn-danger" name="del_nwfilter_rule" title="{% trans "Delete" %}" onclick="return confirm('{% trans "Are you sure?" %}')">
+                            <button type="submit" class="btn btn-sm btn-danger" name="del_nwfilter_rule" title="{% trans 'Delete' %}" onclick="return confirm('{% trans "Are you sure?" %}');">
                                 <i class="fa fa-trash"></i>
                             </button>
                         </form>
@@ -162,21 +160,8 @@
 {% endblock %}
 
 {% block script %}
-    <script src="{% static "js/sortable.min.js" %}"></script>
-    <script>
-        $(document).ready(function () {
-            (function ($) {
-                $('#filter').keyup(function () {
-                    var rex = new RegExp($(this).val(), 'i');
-                    $('.searchable tr').hide();
-                    $('.searchable tr').filter(function () {
-                        return rex.test($(this).text());
-                    }).show();
-                })
-            }(jQuery));
-        });
-    </script>
-    <script src="{% static "js/ace/ace.js" %}"></script>
+    <script src="{% static 'js/sortable.min.js' %}"></script>
+    <script src="{% static 'js/ace/ace.js' %}"></script>
     <script>
         var editor = ace.edit("edit_editor");
         editor.getSession().setMode("ace/mode/xml");

nwfilters/templates/nwfilters.html

@@ -8,9 +8,7 @@
 
 {% block page_heading_extra %}
 {% include 'create_nwfilter_block.html' %}
-<div class="float-right search">
-    <input id="filter" class="form-control" type="text" placeholder="{% trans 'Search' %}">
-</div>
+{% include 'search_block.html' %}
 {% endblock page_heading_extra %}
 
 {% block content %}
@@ -142,22 +140,9 @@
 {% endblock %}
 
 {% block script %}
-<script src="{% static "js/sortable.min.js" %}"></script>
-<script>
-    $(document).ready(function () {
-        (function ($) {
-            $('#filter').keyup(function () {
-                var rex = new RegExp($(this).val(), 'i');
-                $('.searchable tr').hide();
-                $('.searchable tr').filter(function () {
-                    return rex.test($(this).text());
-                }).show();
-            })
-        }(jQuery));
-    });
-</script>
-
-<script src="{% static "js/ace/ace.js" %}"></script>
+<script src="{% static 'js/sortable.min.js' %}"></script>
+<script src="{% static 'js/filter-table.js' %}"></script>
+<script src="{% static 'js/ace/ace.js' %}"></script>
 <script>
     var editor = ace.edit("editor");
     editor.getSession().setMode("ace/mode/xml");

static/js/filter-table.js

@@ -4,12 +4,12 @@ function filter_table() {
     $('.searchable tr').filter(function () {
         return rex.test($(this).text());
     }).show();
-    Cookies.set("instances_filter", $(this).val(), { expires: 1 });
+    Cookies.set(document.title + "_filter", $(this).val(), { expires: 1 });
 }
 $(document).ready(function () {
-    instances_filter_cookie = Cookies.get("instances_filter");
-    if (instances_filter_cookie) {
-        $('#filter').val(instances_filter_cookie);
+    filter_cookie = Cookies.get(document.title + "_filter");
+    if (filter_cookie) {
+        $('#filter').val(filter_cookie);
         $('#filter').each(filter_table);
     }
     (function ($) {

storages/templates/storage.html

@@ -81,10 +81,10 @@
     </dl>
     
     {% if state %}
+        <div class="container">
             <div class="row">
                 <h5 class="page-header mr-auto">{% trans "Volumes" %}</h5>
-            <div class="col-3 ">
-                <input id="filter" class="form-control" type="text" placeholder="{% trans 'Search' %}">
+                {% include 'search_block.html' %}
             </div>
         </div>
             
@@ -194,7 +194,8 @@
     {% include 'pleasewaitdialog.html' %}
 {% endblock %}
 {% block script %}
-    <script src="{% static "js/sortable.min.js" %}"></script>
+    <script src="{% static 'js/sortable.min.js' %}"></script>
+    <script src="{% static 'js/filter-table.js' %}"></script>
     <script>
         $('.format-convert').hide();
         $(document).on('change', '.volume-convert', function () {
@@ -216,17 +217,4 @@
             }
         });
     </script>
-    <script>
-        $(document).ready(function () {
-            (function ($) {
-                $('#filter').keyup(function () {
-                    var rex = new RegExp($(this).val(), 'i');
-                    $('.searchable tr').hide();
-                    $('.searchable tr').filter(function () {
-                        return rex.test($(this).text());
-                    }).show();
-                })
-            }(jQuery));
-        });
-    </script>
 {% endblock %}

templates/search_block.html

@@ -1,4 +1,4 @@
 {% load i18n %}
 <div class="float-right search">
-    <input id="filter" class="form-control" type="text" placeholder="{% trans "Search" %}">
+    <input id="filter" class="form-control" type="text" placeholder="{% trans 'Search' %}">
 </div>