diff --git a/CHANGELOG.md b/CHANGELOG.md index f5d484f52..92a9a0d25 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/girder/girder_large_image/web_client/stylesheets/itemList.styl b/girder/girder_large_image/web_client/stylesheets/itemList.styl index 6290d9bd0..de559d012 100644 --- a/girder/girder_large_image/web_client/stylesheets/itemList.styl +++ b/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 diff --git a/girder/girder_large_image/web_client/views/itemList.js b/girder/girder_large_image/web_client/views/itemList.js index c27dd323d..8f29aa583 100644 --- a/girder/girder_large_image/web_client/views/itemList.js +++ b/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; }