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

[#62,facets,ux][s]: add facets via column menus and tidy up facet viewer (hide support, plus do not show if no facets).

Browse Source
This commit is contained in:
Rufus Pollock 2012-04-01 19:13:08 +01:00
parent ccdc2aed2d
commit aa42e49192
2 changed files with 18 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/view-grid.js
View File

@ -71,6 +71,9 @@ my.DataGrid = Backbone.View.extend({
e.preventDefault();
var actions = {
bulkEdit: function() { self.showTransformColumnDialog('bulkEdit', {name: self.state.currentColumn}) },
facet: function() {
self.model.queryState.addFacet(self.state.currentColumn);
},
transform: function() { self.showTransformDialog('transform') },
sortAsc: function() { self.setColumnSort('asc') },
sortDesc: function() { self.setColumnSort('desc') },
@ -161,10 +164,11 @@ my.DataGrid = Backbone.View.extend({
<div class="btn-group column-header-menu"> \
<a class="btn dropdown-toggle" data-toggle="dropdown"><i class="icon-cog"></i><span class="caret"></span></a> \
<ul class="dropdown-menu data-table-menu pull-right"> \
<li class="write-op"><a data-action="bulkEdit" href="JavaScript:void(0);">Transform...</a></li> \
<li><a data-action="facet" href="JavaScript:void(0);">Facet on this Field</a></li> \
<li><a data-action="sortAsc" href="JavaScript:void(0);">Sort ascending</a></li> \
<li><a data-action="sortDesc" href="JavaScript:void(0);">Sort descending</a></li> \
<li><a data-action="hideColumn" href="JavaScript:void(0);">Hide this column</a></li> \
<li class="write-op"><a data-action="bulkEdit" href="JavaScript:void(0);">Transform...</a></li> \
</ul> \
</div> \
<span class="column-header-name">{{label}}</span> \

26
src/view.js
View File

@ -282,16 +282,11 @@ my.QueryEditor = Backbone.View.extend({
my.FacetViewer = Backbone.View.extend({
className: 'recline-facet-viewer well',
template: ' \
<a class="close" href="#"><i class="icon-chevron-up"></i></a> \
<div class="dropdown js-add-facet"> \
<a class="btn dropdown-toggle" data-toggle="dropdown" href=".js-add-facet">Add Facet On <i class="caret"></i></a> \
<ul class="dropdown-menu"> \
{{#fields}} \
<li><a href="#{{id}}">{{label}}</a></li> \
{{/fields}} \
</ul> \
</div> \
<a class="close js-hide" href="#">&times;</a> \
<div class="facets row"> \
<div class="span1"> \
<h3>Facets</h3> \
</div> \
{{#facets}} \
<div class="facet-summary span2 dropdown" data-facet="{{id}}"> \
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#"><i class="icon-chevron-down"></i> {{id}} {{label}}</a> \
@ -306,7 +301,7 @@ my.FacetViewer = Backbone.View.extend({
',
events: {
'click .js-add-facet .dropdown-menu a': 'onAddFacet',
'click .js-hide': 'onHide'
},
initialize: function(model) {
_.bindAll(this, 'render');
@ -322,11 +317,16 @@ my.FacetViewer = Backbone.View.extend({
};
var templated = $.mustache(this.template, tmplData);
this.el.html(templated);
// are there actually any facets to show?
if (this.model.facets.length > 0) {
this.el.show();
} else {
this.el.hide();
}
},
onAddFacet: function(e) {
onHide: function(e) {
e.preventDefault();
var fieldId = $(e.target).attr('href').slice(1);
this.model.queryState.addFacet(fieldId);
this.el.hide();
}
});