Merge pull request #131 from gitchrisadams/issue_115_add_x_search_fil…

…ter_cat_harv_reg_mster Add close button to search filter
ioos · Sep 27, 2018 · f74170a · f74170a
2 parents 2f314d2 + 066e312
commit f74170a
Show file tree

Hide file tree

Showing 6 changed files with 75 additions and 0 deletions.
diff --git a/app/imports/ui/components/harvests/harvests-table.jade b/app/imports/ui/components/harvests/harvests-table.jade
@@ -1,2 +1,4 @@
 template(name="harvestsTable")
+  span#cancel-filter
+    i.fa.fa-close
   +tabular table=harvestsTable class="table table-hover" id="harvests-table"
diff --git a/app/imports/ui/components/harvests/harvests-table.js b/app/imports/ui/components/harvests/harvests-table.js
@@ -1,4 +1,5 @@
 import './harvests-table.jade';
+import './harvests-table.less';
 import { Template } from 'meteor/templating';
 import { Harvests, HarvestsTable } from '/imports/api/harvests/harvests.js';
 
@@ -52,6 +53,25 @@ Template.harvestsTable.onCreated(function() {
 });
 
 Template.harvestsTable.onRendered(function() {
+  var eventPressUp = $.Event("keyup");
+  eventPressUp.which = 13;
+  $("#cancel-filter").on("click", function(e) {
+    $('#cancel-filter').hide();
+    $('#harvests-table_filter input').val("");
+    $('#harvests-table_filter input').focus();
+    $("#harvests-table_filter input").trigger(eventPressUp);
+  });
+
+  $('#harvests-table_filter input').keypress(function(e) {
+    var keycode = (e.keyCode ? e.keyCode : e.which);
+    if (keycode == '13') {
+      if ($('#harvests-table_filter input').val()) {
+        $('#cancel-filter').show();
+      } else {
+        $('#cancel-filter').hide();
+      }
+    }
+  });
 });
 
 Template.harvestsTable.onDestroyed(function() {

diff --git a/app/imports/ui/components/harvests/harvests-table.less b/app/imports/ui/components/harvests/harvests-table.less
@@ -0,0 +1,15 @@
+#cancel-filter {
+    color: red;
+    position: absolute;
+    right: 20px;
+    top: 23px;
+    z-index: 999;
+    margin-left: 5px;
+    display: none;
+    font-size: 16px;
+    cursor: pointer;
+}
+
+#harvests-table_filter input {
+    padding-right: 20px;
+}
diff --git a/app/imports/ui/pages/records/records.jade b/app/imports/ui/pages/records/records.jade
@@ -35,6 +35,8 @@ template(name='records')
             span Job Status
       .row
         .box.box-tabular.col-md-12.col-xs-12
+          span#cancel-filter-records
+            i.fa.fa-close
           +tabular id="records-table" selector=selector table=recordsTable class="table table-striped"
 
 template(name="recordsTitle")

diff --git a/app/imports/ui/pages/records/records.js b/app/imports/ui/pages/records/records.js
@@ -81,6 +81,26 @@ Template.records.onCreated(function() {
 });
 
 Template.records.onRendered(function() {
+  var eventPressUp = $.Event("keyup");
+  eventPressUp.which = 13;
+  $("#cancel-filter-records").on("click", function(e) {
+    $('#cancel-filter-records').hide();
+    $('#records-table_filter input').val("");
+    $('#records-table_filter input').focus();
+    $("#records-table_filter input").trigger(eventPressUp);
+  });
+
+  $('#records-table_filter input').keypress(function(e) {
+    var keycode = (e.keyCode ? e.keyCode : e.which);
+    if (keycode == '13') {
+      if ($('#records-table_filter input').val()) {
+        $('#cancel-filter-records').show();
+      } else {
+        $('#cancel-filter-records').hide();
+      }
+    }
+  });
+
   let sorting = FlowRouter.getQueryParam("sort");
   let dt = this.$('#records-table').DataTable();
   if (sorting == "errors") {

diff --git a/app/imports/ui/pages/records/records.less b/app/imports/ui/pages/records/records.less
@@ -17,3 +17,19 @@
     cursor: pointer;
   }
 }
+
+#cancel-filter-records {
+    color: red;
+    position: absolute;
+    right: 20px;
+    top: 23px;
+    z-index: 999;
+    margin-left: 5px;
+    display: none;
+    font-size: 16px;
+    cursor: pointer;
+}
+
+#records-table_filter input {
+    padding-right: 20px;
+}