Use Ember.ListView for blocked emails list

Author: nlalonde

app/assets/javascripts/admin.js

@@ -1 +1,2 @@
+//= require list_view.js
 //= require_tree ./admin

app/assets/javascripts/admin/controllers/admin_logs_blocked_emails_controller.js

@@ -8,6 +8,7 @@
 **/
 Discourse.AdminLogsBlockedEmailsController = Ember.ArrayController.extend(Discourse.Presence, {
   loading: false,
+  content: [],
 
   show: function() {
     var self = this;

app/assets/javascripts/admin/templates/logs/blocked_emails.js.handlebars

@@ -2,27 +2,20 @@
   <div class='admin-loading'>{{i18n loading}}</div>
 {{else}}
   {{#if model.length}}
-    <table class='table blocked-emails'>
-      <thead>
-        <th class="email">{{i18n admin.logs.blocked_emails.email}}</th>
-        <th class="action">{{i18n admin.logs.action}}</th>
-        <th class="match_count">{{i18n admin.logs.blocked_emails.match_count}}</th>
-        <th class="last_match_at">{{i18n admin.logs.blocked_emails.last_match_at}}</th>
-        <th class="created_at">{{i18n admin.logs.created_at}}</th>
-      </thead>
 
-      <tbody>
-        {{#each model}}
-          <tr>
-            <td class="email">{{email}}</td>
-            <td class="action">{{actionName}}</td>
-            <td class="match_count">{{match_count}}</td>
-            <td class="last_match_at">{{unboundAgeWithTooltip last_match_at}}</td>
-            <td class="created_at">{{unboundAgeWithTooltip created_at}}</td>
-          </tr>
-        {{/each}}
-      </tbody>
-    </table>
+    <div class='table blocked-emails'>
+      <div class="heading-container">
+        <div class="col heading email">{{i18n admin.logs.blocked_emails.email}}</div>
+        <div class="col heading action">{{i18n admin.logs.action}}</div>
+        <div class="col heading match_count">{{i18n admin.logs.blocked_emails.match_count}}</div>
+        <div class="col heading last_match_at">{{i18n admin.logs.blocked_emails.last_match_at}}</div>
+        <div class="col heading created_at">{{i18n admin.logs.created_at}}</div>
+        <div class="clearfix"></div>
+      </div>
+
+      {{view Discourse.BlockedEmailsListView contentBinding="controller"}}
+    </div>
+
   {{else}}
     {{i18n search.no_results}}
   {{/if}}

app/assets/javascripts/admin/templates/logs/blocked_emails_list_item.js.handlebars

@@ -0,0 +1,6 @@
+<div class="col email">{{email}}</div>
+<div class="col action">{{actionName}}</div>
+<div class="col match_count">{{match_count}}</div>
+<div class="col last_match_at">{{unboundAgeWithTooltip last_match_at}}</div>
+<div class="col created_at">{{unboundAgeWithTooltip created_at}}</div>
+<div class="clearfix"></div>

app/assets/javascripts/admin/views/logs/blocked_emails_list_view.js

@@ -0,0 +1,5 @@
+Discourse.BlockedEmailsListView = Ember.ListView.extend({
+  height: 500,
+  rowHeight: 32,
+  itemViewClass: Ember.ListItemView.extend({templateName: "admin/templates/logs/blocked_emails_list_item"})
+});

app/assets/stylesheets/admin/admin_base.scss

@@ -694,12 +694,35 @@ table {
   }
 }
 
-/* Logs */
+// Logs
 
 .blocked-emails {
-  .match_count, .last_match_at, .created_at {
+  width: 900px;
+  margin-left: 5px;
+  border-bottom: dotted 1px #ddd;
+  .heading-container {
+    width: 100%;
+    background-color: #e4e4e4;
+  }
+  .heading {
+    font-weight: bold;
+  }
+  .col {
+    display: inline-block;
+    padding-top: 6px;
+  }
+  .email {
+    width: 400px;
+    margin-left: 5px;
+  }
+  .action, .match_count, .last_match_at, .created_at {
+    width: 110px;
     text-align: center;
   }
+  .ember-list-item-view {
+    width: 100%;
+    border-top: solid 1px #ddd;
+  }
 }
 
 .staff-actions {
@@ -719,3 +742,14 @@ table {
     }
   }
 }
+
+// Ember.ListView
+
+.ember-list-view {
+  overflow-y: auto;
+  overflow-x: hidden;
+  position: relative;
+}
+.ember-list-item-view {
+  position: absolute;
+}

app/controllers/admin/blocked_emails_controller.rb

@@ -1,7 +1,7 @@
 class Admin::BlockedEmailsController < Admin::AdminController
 
   def index
-    blocked_emails = BlockedEmail.limit(50).order('last_match_at desc').to_a
+    blocked_emails = BlockedEmail.limit(200).order('last_match_at desc').to_a
     render_serialized(blocked_emails, BlockedEmailSerializer)
   end