Add database object filter to the sidebar

static/css/app.css

@@ -90,6 +90,7 @@
 
 #sidebar .current-database .wrap {
   position: relative;
+  height: 50px;
 }
 
 #sidebar .current-database span.current-database-name {
@@ -160,10 +161,61 @@
   padding: 3px 10px;
 }
 
+#sidebar .objects-search {
+  position: fixed;
+  top: 50px;
+  left: 0px;
+  width: 250px;
+  height: 30px;
+  overflow: hidden;
+}
+
+#sidebar .objects-search .wrap {
+  position: relative;
+  background: transparent;
+  height: 30px;
+  padding: 4px;
+  box-sizing: border-box;
+  border-bottom: 1px solid #eee;
+}
+
+#sidebar .objects-search i.fa-search {
+  position: absolute;
+  left: 8px;
+  top: 7px;
+  color: #a1a1a1;
+}
+
+#sidebar .objects-search i.fa-times-circle {
+  position: absolute;
+  right: 8px;
+  top: 7px;
+  color: #a1a1a1;
+  display: none;
+  cursor: pointer;
+}
+
+#sidebar .objects-search i.fa-times-circle:hover {
+  color: #888;
+}
+
+#sidebar .objects-search input[type="text"] {
+  background: transparent;
+  border: 0px none;
+  font-size: 12px;
+  color: #000;
+  height: 22px;
+  line-height: 22px;
+  padding: 0px;
+  margin-left: 25px;
+  width: 200px;
+  outline: none;
+}
+
 #sidebar div.tables-list {
   position: fixed;
   width: 250px;
-  top: 50px;
+  top: 80px;
   left: 0px;
   bottom: 130px;
   overflow: auto;

static/index.html

@@ -45,6 +45,13 @@
           <span class="refresh" id="refresh_tables" title="Refresh tables list"><i class="fa fa-refresh"></i></span>
         </div>
       </div>
+      <div class="objects-search">
+        <div class="wrap">
+          <i class="fa fa-search"></i>
+          <i class="fa fa-times-circle clear-objects-filter"></i>
+          <input type="text" placeholder="Filter database objects" id="filter_database_objects" />
+        </div>
+      </div>
       <div class="tables-list">
         <div class="wrap">
           <div id="objects"></div>

static/js/app.js

@@ -130,7 +130,7 @@ function buildSchemaSection(name, objects) {
     if (objects[group]) {
       objects[group].forEach(function(item) {
         var id = name + "." + item;
-        section += "<li class='schema-" + group + "' data-type='" + group + "' data-id='" + id + "'>" + icons[group] + "&nbsp;" + item + "</li>";
+        section += "<li class='schema-item schema-" + group + "' data-type='" + group + "' data-id='" + id + "' data-name='" + item + "'>" + icons[group] + "&nbsp;" + item + "</li>";
       });
       section += "</ul></div>";
     }
@@ -951,6 +951,51 @@ function bindCurrentDatabaseMenu() {
   });
 }
 
+function bindDatabaseObjectsFilter() {
+  var filterTimeout = null;
+
+  $("#filter_database_objects").on("keyup", function (e) {
+    clearTimeout(filterTimeout);
+
+    var val = $(this).val().trim();
+
+    // Reset search on ESC
+    if (e.keyCode == 27 || val == "") {
+      resetObjectsFilter();
+      return;
+    }
+
+    $(".clear-objects-filter").show();
+
+    filterTimeout = setTimeout(function () {
+      filterObjectsByName(val)
+    }, 200);
+  });
+
+  $(".clear-objects-filter").on("click", function(e) {
+    resetObjectsFilter();
+  });
+}
+
+function resetObjectsFilter() {
+  $("#filter_database_objects").val("");
+  $("#objects li.schema-item").show();
+  $(".clear-objects-filter").hide();
+}
+
+function filterObjectsByName(query) {
+  $("#objects li.schema-item").each(function (idx, el) {
+    var item = $(el);
+    var name = $(el).data("name");
+
+    if (name.indexOf(query) < 0) {
+      item.hide();
+    } else {
+      item.show();
+    }
+  });
+}
+
 function getQuotedSchemaTableName(table) {
   if (typeof table === "string" && table.indexOf(".") > -1) {
     var schemaTableComponents = table.split(".");
@@ -1410,4 +1455,6 @@ $(document).ready(function() {
       }
     }
   });
+
+  bindDatabaseObjectsFilter();
 });