Add ability to order fields Asc / Desc

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

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;
+}

public/app.js

@@ -51,20 +51,57 @@ 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();
   }
 });
 
 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');

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>