knight/datahub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[#242,bugfix][s]: remove filter in filtereditor now removes correct filter rather than first one - fixes #242.

Browse Source 
* Also tweak so that name of field comes before type of filter
This commit is contained in:
Rufus Pollock
2012-10-12 20:08:05 +01:00
parent 939d0786b3
commit f8bcf28d14
2 changed files with 32 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/widget.filtereditor.js
View File

@@ -13,18 +13,18 @@ my.FilterEditor = Backbone.View.extend({
<a href="#" class="js-add-filter">Add filter</a> \ <a href="#" class="js-add-filter">Add filter</a> \
<form class="form-stacked js-add" style="display: none;"> \ <form class="form-stacked js-add" style="display: none;"> \
<fieldset> \ <fieldset> \
<label>Filter type</label> \
<select class="filterType"> \
<option value="term">Term (text)</option> \
<option value="range">Range</option> \
<option value="geo_distance">Geo distance</option> \
</select> \
<label>Field</label> \ <label>Field</label> \
<select class="fields"> \ <select class="fields"> \
{{#fields}} \ {{#fields}} \
<option value="{{id}}">{{label}}</option> \ <option value="{{id}}">{{label}}</option> \
{{/fields}} \ {{/fields}} \
</select> \ </select> \
<label>Filter type</label> \
<select class="filterType"> \
<option value="term">Value</option> \
<option value="range">Range</option> \
<option value="geo_distance">Geo distance</option> \
</select> \
<button type="submit" class="btn">Add</button> \ <button type="submit" class="btn">Add</button> \
</fieldset> \ </fieldset> \
</form> \ </form> \
@@ -44,7 +44,7 @@ my.FilterEditor = Backbone.View.extend({
<fieldset> \ <fieldset> \
<legend> \ <legend> \
{{field}} <small>{{type}}</small> \ {{field}} <small>{{type}}</small> \
<a class="js-remove-filter" href="#" title="Remove this filter">&times;</a> \ <a class="js-remove-filter" href="#" title="Remove this filter" data-filter-id="{{id}}">&times;</a> \
</legend> \ </legend> \
<input type="text" value="{{term}}" name="term" data-filter-field="{{field}}" data-filter-id="{{id}}" data-filter-type="{{type}}" /> \ <input type="text" value="{{term}}" name="term" data-filter-field="{{field}}" data-filter-id="{{id}}" data-filter-type="{{type}}" /> \
</fieldset> \ </fieldset> \
@@ -55,7 +55,7 @@ my.FilterEditor = Backbone.View.extend({
<fieldset> \ <fieldset> \
<legend> \ <legend> \
{{field}} <small>{{type}}</small> \ {{field}} <small>{{type}}</small> \
<a class="js-remove-filter" href="#" title="Remove this filter">&times;</a> \ <a class="js-remove-filter" href="#" title="Remove this filter" data-filter-id="{{id}}">&times;</a> \
</legend> \ </legend> \
<label class="control-label" for="">From</label> \ <label class="control-label" for="">From</label> \
<input type="text" value="{{start}}" name="start" data-filter-field="{{field}}" data-filter-id="{{id}}" data-filter-type="{{type}}" /> \ <input type="text" value="{{start}}" name="start" data-filter-field="{{field}}" data-filter-id="{{id}}" data-filter-type="{{type}}" /> \
@@ -69,7 +69,7 @@ my.FilterEditor = Backbone.View.extend({
<fieldset> \ <fieldset> \
<legend> \ <legend> \
{{field}} <small>{{type}}</small> \ {{field}} <small>{{type}}</small> \
<a class="js-remove-filter" href="#" title="Remove this filter">&times;</a> \ <a class="js-remove-filter" href="#" title="Remove this filter" data-filter-id="{{id}}">&times;</a> \
</legend> \ </legend> \
<label class="control-label" for="">Longitude</label> \ <label class="control-label" for="">Longitude</label> \
<input type="text" value="{{point.lon}}" name="lon" data-filter-field="{{field}}" data-filter-id="{{id}}" data-filter-type="{{type}}" /> \ <input type="text" value="{{point.lon}}" name="lon" data-filter-field="{{field}}" data-filter-id="{{id}}" data-filter-type="{{type}}" /> \
@@ -129,7 +129,7 @@ my.FilterEditor = Backbone.View.extend({
onRemoveFilter: function(e) { onRemoveFilter: function(e) {
e.preventDefault(); e.preventDefault();
var $target = $(e.target); var $target = $(e.target);
var filterId = $target.closest('.filter').attr('data-filter-id'); var filterId = $target.attr('data-filter-id');
this.model.queryState.removeFilter(filterId); this.model.queryState.removeFilter(filterId);
}, },
onTermFiltersUpdate: function(e) { onTermFiltersUpdate: function(e) {

24
test/widget.filtereditor.test.js
View File

@@ -29,11 +29,31 @@ test('basics', function () {
equal(dataset.queryState.attributes.filters[0].term, 'UK'); equal(dataset.queryState.attributes.filters[0].term, 'UK');
equal(dataset.records.length, 3); equal(dataset.records.length, 3);
// now set a second range filter ...
view.el.find('.js-add-filter').click();
var $addForm = view.el.find('form.js-add');
$addForm.find('select.fields').val('x');
$addForm.find('select.filterType').val('range');
$addForm.submit();
$editForm = view.el.find('form.js-edit');
$editForm.find('.filter-range input').first().val('2');
$editForm.find('.filter-range input').last().val('4');
$editForm.submit();
equal(dataset.queryState.attributes.filters[1].start, 2);
equal(dataset.records.length, 2);
// now remove filter // now remove filter
$editForm = view.el.find('form.js-edit'); $editForm = view.el.find('form.js-edit');
$editForm.find('.js-remove-filter').click(); $editForm.find('.js-remove-filter').last().click();
$editForm = view.el.find('form.js-edit'); $editForm = view.el.find('form.js-edit');
equal($editForm.find('.filter-term').length, 0) equal($editForm.find('.filter').length, 1)
equal(dataset.records.length, 3);
$editForm = view.el.find('form.js-edit');
$editForm.find('.js-remove-filter').last().click();
$editForm = view.el.find('form.js-edit');
equal($editForm.find('.filter').length, 0)
equal(dataset.records.length, 6); equal(dataset.records.length, 6);
view.remove(); view.remove();