Refactor users/index

app/pods/protected/users/index/route.js

@@ -1,7 +1,9 @@
 import Ember from 'ember';
 
-export default Ember.Route.extend({
-  currentUser: Ember.inject.service('session-account'),
+const { Route, inject: { service } } = Ember;
+
+export default Route.extend({
+  currentUser: service('session-account'),
 
   beforeModel: function(transition) {
     this._super(transition);

app/pods/protected/users/index/template.hbs

@@ -1,33 +1,6 @@
 <h2>{{genus-name}} Users</h2>
-<h3 id="total-users">Total users: {{model.length}}</h3>
 
-<table class="flakes-table">
-  <thead>
-    <tr>
-      <th>Name</th>
-      <th>Email</th>
-      <th>Role</th>
-      <th>Date Registered</th>
-    </tr>
-  </thead>
-  <tbody>
-    {{#each model as |row|}}
-      <tr>
-        <td>
-          {{#link-to 'protected.users.show' row}}
-            {{row.name}}
-          {{/link-to}}
-        </td>
-        <td>
-          {{row.email}}
-        </td>
-        <td>
-          {{row.fullRole}}
-        </td>
-        <td>
-          {{null-time row.createdAt 'LL'}}
-        </td>
-      </tr>
-    {{/each}}
-  </tbody>
-</table>
+{{
+  protected/users/index/users-table
+  users=model
+}}

app/pods/protected/users/index/users-table/component.js

@@ -0,0 +1,7 @@
+import Ember from 'ember';
+
+const { Component } = Ember;
+
+export default Component.extend({
+  users: null,
+});

app/pods/protected/users/index/users-table/template.hbs

@@ -0,0 +1,33 @@
+
+<h3 id="total-users">Total users: {{users.length}}</h3>
+
+<table class="flakes-table">
+  <thead>
+    <tr>
+      <th>Name</th>
+      <th>Email</th>
+      <th>Role</th>
+      <th>Date Registered</th>
+    </tr>
+  </thead>
+  <tbody>
+    {{#each users as |user|}}
+      <tr>
+        <td>
+          {{#link-to 'protected.users.show' user}}
+            {{user.name}}
+          {{/link-to}}
+        </td>
+        <td>
+          {{user.email}}
+        </td>
+        <td>
+          {{user.fullRole}}
+        </td>
+        <td>
+          {{null-time user.createdAt 'LL'}}
+        </td>
+      </tr>
+    {{/each}}
+  </tbody>
+</table>

app/pods/protected/users/loading/template.hbs

@@ -0,0 +1 @@
+{{loading-panel}}