From d9c23291debdc3c683eb18d247c09c7ce149ea77 Mon Sep 17 00:00:00 2001
From: catborise <catborise@yahoo.com>
Date: Thu, 10 Jun 2021 15:17:53 +0300
Subject: [PATCH] rearrange search functionality

---
 admin/templates/admin/group_list.html      |  4 +---
 admin/templates/admin/user_list.html       |  4 +---
 computes/templates/computes/instances.html |  4 +---
 computes/templates/computes/list.html      |  9 ++++----
 instances/templates/allinstances.html      |  8 +++----
 nwfilters/templates/nwfilter.html          | 23 ++++----------------
 nwfilters/templates/nwfilters.html         | 25 +++++-----------------
 static/js/filter-table.js                  |  8 +++----
 storages/templates/storage.html            | 24 ++++++---------------
 templates/search_block.html                |  2 +-
 10 files changed, 31 insertions(+), 80 deletions(-)

diff --git a/admin/templates/admin/group_list.html b/admin/templates/admin/group_list.html
index d101466..1f9562f 100644
--- a/admin/templates/admin/group_list.html
+++ b/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>
diff --git a/admin/templates/admin/user_list.html b/admin/templates/admin/user_list.html
index f1a6323..9bcb683 100644
--- a/admin/templates/admin/user_list.html
+++ b/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 %}
diff --git a/computes/templates/computes/instances.html b/computes/templates/computes/instances.html
index f69143f..bdac072 100644
--- a/computes/templates/computes/instances.html
+++ b/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 %}
 
diff --git a/computes/templates/computes/list.html b/computes/templates/computes/list.html
index 8e4b899..9cb3233 100644
--- a/computes/templates/computes/list.html
+++ b/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 %}
diff --git a/instances/templates/allinstances.html b/instances/templates/allinstances.html
index 8c29794..8a71a44 100644
--- a/instances/templates/allinstances.html
+++ b/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>
diff --git a/nwfilters/templates/nwfilter.html b/nwfilters/templates/nwfilter.html
index c14282f..2034cdb 100644
--- a/nwfilters/templates/nwfilter.html
+++ b/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");
diff --git a/nwfilters/templates/nwfilters.html b/nwfilters/templates/nwfilters.html
index eac9c96..73d75de 100644
--- a/nwfilters/templates/nwfilters.html
+++ b/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,24 +140,11 @@
 {% 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 src="{% static 'js/ace/ace.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>
-   var editor = ace.edit("editor");
+    var editor = ace.edit("editor");
     editor.getSession().setMode("ace/mode/xml");
 
     var input = $('input[name="nwfilter_xml"]');
diff --git a/static/js/filter-table.js b/static/js/filter-table.js
index 3c73c8c..300a989 100644
--- a/static/js/filter-table.js
+++ b/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 ($) {
diff --git a/storages/templates/storage.html b/storages/templates/storage.html
index cec96b5..8a6bd46 100644
--- a/storages/templates/storage.html
+++ b/storages/templates/storage.html
@@ -81,10 +81,10 @@
     </dl>
     
     {% if state %}
-        <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' %}">
+        <div class="container">
+            <div class="row">
+                <h5 class="page-header mr-auto">{% trans "Volumes" %}</h5>
+                {% 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 %}
diff --git a/templates/search_block.html b/templates/search_block.html
index 7f2b515..f80a4ce 100644
--- a/templates/search_block.html
+++ b/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>