Add a button to clear the filter on item lists

CHANGELOG.md

@@ -6,6 +6,7 @@
 - Reduce memory use in a mongo aggregation pipeline ([#1183](../../pull/1183))
 - Remove rasterio dep on pyproj ([#1182](../../pull/1182))
 - Filter on specific metadata from item lists ([#1184](../../pull/1184))
+- Add a button to clear the filter on item lists ([#1185](../../pull/1185))
 
 ## 1.22.0
 

girder/girder_large_image/web_client/stylesheets/itemList.styl

@@ -104,3 +104,6 @@ ul.g-item-list
   label
     padding-left 5px
     font-weight normal
+
+.li-item-list-filter-clear
+  cursor pointer

girder/girder_large_image/web_client/views/itemList.js

@@ -220,6 +220,12 @@ wrap(ItemListWidget, 'render', function (render) {
         addToRoute({filter: this._generalFilter});
     };
 
+    this._clearFilter = (evt) => {
+        this._generalFilter = '';
+        this._setFilter();
+        addToRoute({filter: this._generalFilter});
+    };
+
     this._unescapePhrase = (val) => {
         if (val !== undefined) {
             val = val.replace('\\\'', '\'').replace('\\"', '"').replace('\\\\', '\\');
@@ -356,12 +362,18 @@ wrap(ItemListWidget, 'render', function (render) {
                     'Column and value names can be quoted to include spaces (single quotes for substring match, double quotes for exact value match).  ' +
                     'If <column>:-<value1>[,<value2>...] is specified, matches will exclude the list of values.  ' +
                     'Non-exact matches without a column specifier will also match columns that start with the specified value.  ' +
-                    '"></input></span>');
+                    '"></input>' +
+                    '<span class="li-item-list-filter-clear"><i class="icon-cancel"></i></span>' +
+                    '</span>');
                 if (this._generalFilter) {
                     root.find('.li-item-list-filter-input').val(this._generalFilter);
                 }
                 this.parentView.events['change .li-item-list-filter-input'] = this._updateFilter;
                 this.parentView.events['input .li-item-list-filter-input'] = this._updateFilter;
+                this.parentView.events['click .li-item-list-filter-clear'] = (evt) => {
+                    this.parentView.$el.find('.li-item-list-filter-input').val('');
+                    this._clearFilter();
+                };
                 this.parentView.delegateEvents();
             }
         }
@@ -502,7 +514,6 @@ function itemListCellFilter(evt) {
     this._setFilter();
     addToRoute({filter: this._generalFilter});
     this._setSort();
-    this.render();
     return false;
 }