Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Add ability to order fields Asc / Desc

  • Loading branch information...
commit 22501d710ca2afe8bc0b681920c1cabd578b42c2 1 parent efcf2d6
Lewis Marshall authored
Showing with 113 additions and 27 deletions.
  1. +33 −25 app.rb
  2. +16 −0 public/app.css
  3. +43 −2 public/app.js
  4. +21 −0 views/index.erb
View
58 app.rb
@@ -44,30 +44,38 @@
get '/data' do
content_type :json
- case params['data_type']
- when 'Accounts'
- 50.times.map {
- {
- :first_name => Faker::Name.first_name,
- :last_name => Faker::Name.last_name,
- :email_address => Faker::Internet.email
- }
- }.to_json
- when 'Reports'
- 50.times.map {
- {
- :name => Faker::Lorem.sentence,
- :published_at => (rand 365).days.ago,
- :featured => rand(5) != 0
- }
- }.to_json
- when 'Blog Posts'
- 50.times.map {
- {
- :title => Faker::Lorem.sentence,
- :published_at => (rand 365).days.ago,
- :no_of_views => rand(10000)
- }
- }.to_json
+ data = case params['data_type']
+ when 'Accounts'
+ 50.times.map {
+ {
+ :first_name => Faker::Name.first_name,
+ :last_name => Faker::Name.last_name,
+ :email_address => Faker::Internet.email
+ }
+ }
+ when 'Reports'
+ 50.times.map {
+ {
+ :name => Faker::Lorem.sentence,
+ :published_at => (rand 365).days.ago,
+ :featured => rand(5) != 0
+ }
+ }
+ when 'Blog Posts'
+ 50.times.map {
+ {
+ :title => Faker::Lorem.sentence,
+ :published_at => (rand 365).days.ago,
+ :no_of_views => rand(10000)
+ }
+ }
+ end
+
+ if params['filters'] && order = params['filters']['order']
+ attribute, direction = order.split(',')
+ data = data.sort_by { |e| e[attribute.to_sym] }
+ data = data.reverse if direction == 'Desc'
end
+
+ data.to_json
end
View
16 public/app.css
@@ -2,3 +2,19 @@
float: left;
width: 200px;
}
+
+table th {
+ cursor: pointer;
+}
+
+.modal-body h4 {
+ float: left;
+ width: 200px;
+ line-height: 30px;
+ margin-top: 0;
+}
+
+.modal-body .btn-group {
+ float: left;
+ width: 300px;
+}
View
45 public/app.js
@@ -51,11 +51,17 @@ DataColumnView = Backbone.View.extend({
this.$el.text(this.model.get('name'));
return this;
},
+ events: {
+ click: 'viewFilters'
+ },
toggleVisible: function() {
if(this.model.get('visible'))
$('table thead tr').append(this.render().el);
else
this.remove();
+ },
+ viewFilters: function() {
+ (new DataFilterView({ model: this.model })).render();
}
});
@@ -63,8 +69,39 @@ DataCollection = new (Backbone.Collection.extend({
url: "/data"
}));
+DataFilterView = Backbone.View.extend({
+ template: function(attributes) {
+ return _.template($('#data-filter-template').html(), attributes);
+ },
+ render: function() {
+ $('body').append(this.$el.html(this.template(this.model.toJSON())));
+ this.$el.modal();
+ return this;
+ },
+ events: {
+ 'click .close': 'close',
+ 'click .apply': 'apply'
+ },
+ close: function() {
+ this.$el.modal('hide');
+ this.remove();
+ },
+ apply: function() {
+ order_selection = this.$el.find('.btn.active');
+
+ if(order_selection) {
+ App.filters.order = this.model.get('attribute') + ',' + order_selection.text();
+ }
+
+ App.fetchData();
+
+ this.close();
+ }
+});
+
App = new (Backbone.View.extend({
initialize: function() {
+ this.filters = {}
DataTypeCollection.bind('reset', this.renderDataTypes, this);
DataFieldCollection.bind('reset', this.renderDataFields, this);
DataCollection.bind('reset', this.renderData, this);
@@ -96,8 +133,12 @@ App = new (Backbone.View.extend({
Button.set('visible', DataFieldCollection.where({ visible: true }).length > 0);
},
fetchData: function() {
- console.log('fetching data');
- DataCollection.fetch({ data: { data_type: App.data_type.get('name') } });
+ DataCollection.fetch({
+ data: {
+ data_type: App.data_type.get('name'),
+ filters: App.filters
+ }
+ });
},
renderData: function() {
tbody = $('table tbody');
View
21 views/index.erb
@@ -40,5 +40,26 @@
<script type="text/template" id="data-field-template">
<input type="checkbox" value="0"> <%%= name %>
</script>
+
+ <script type="text/template" id="data-filter-template">
+ <div class="modal">
+ <div class="modal-header">
+ <button class="close">&times;</button>
+ <h3>Filter: <%%= name %></h3>
+ </div>
+
+ <div class="modal-body">
+ <h4>Order:</h4>
+ <div class="btn-group" data-toggle="buttons-radio">
+ <button class="btn">Asc</button>
+ <button class="btn">Desc</button>
+ </div>
+ </div>
+
+ <div class="modal-footer">
+ <button class="btn btn-primary apply">Apply</button>
+ </div>
+ </div>
+ </script>
</body>
</html>
Please sign in to comment.
Something went wrong with that request. Please try again.