Refactored imaging lists into components

app/imaging/completed/completed-list-item/component.js

@@ -0,0 +1,5 @@
+import Ember from 'ember';
+
+export default Ember.Component.extend({
+  tagName: 'tr'
+});

app/imaging/completed/completed-list-item/template.hbs

@@ -0,0 +1,7 @@
+<td>{{date-format imaging.requestedDate}}</td>
+<td>{{date-format imaging.imagingDate}}</td>
+<td>{{imaging.requestedBy}}</td>
+<td>{{imaging.patient.displayName}}</td>
+<td>{{imaging.imagingType.name}}</td>
+<td>{{imaging.results}}</td>
+<td>{{imaging.notes}}</td>

app/imaging/completed/template.hbs

@@ -1,4 +1,4 @@
-{{#item-listing paginationProps=paginationProps }}
+{{#item-listing paginationProps=paginationProps}}
   {{#if model}}
     <table class="table">
       <tr class="table-header">
@@ -11,20 +11,12 @@
           <th>{{t 'labels.notes'}}</th>
       </tr>
       {{#each model as |imaging|}}
-        <tr>
-          <td>{{date-format imaging.requestedDate}}</td>
-          <td>{{date-format imaging.imagingDate}}</td>
-          <td>{{imaging.requestedBy}}</td>
-          <td>{{imaging.patient.displayName}}</td>
-          <td>{{imaging.imagingType.name}}</td>
-          <td>{{imaging.result}}</td>
-          <td>{{imaging.notes}}</td>
-        </tr>
+        {{imaging/completed/completed-list-item imaging=imaging}}
       {{/each}}
     </table>
   {{else}}
-      <div class="alert alert-info">
-          <p>{{t 'imaging.messages.no_completed'}}</p>
-      </div>
+    <div class="alert alert-info">
+      <p>{{t 'imaging.messages.no_completed'}}</p>
+    </div>
   {{/if}}
 {{/item-listing}}

app/imaging/index/imaging-edit-button/component.js

@@ -0,0 +1,6 @@
+import Ember from 'ember';
+
+export default Ember.Component.extend({
+  tagName: 'button',
+  classNames: ['btn', 'btn-default', 'neutral']
+});

app/imaging/index/imaging-edit-button/template.hbs

@@ -0,0 +1 @@
+{{#link-to 'imaging.edit' imaging}}{{t 'labels.edit'}}{{/link-to}}

app/imaging/index/requested-list-item/component.js

@@ -0,0 +1,10 @@
+import Ember from 'ember';
+
+export default Ember.Component.extend({
+  tagName: 'tr',
+  classNames: ['clickable'],
+
+  click() {
+    this.sendAction('action', this.imaging);
+  }
+});

app/imaging/index/requested-list-item/template.hbs

@@ -0,0 +1,13 @@
+<td>{{date-format imaging.requestedDate}}</td>
+<td>{{imaging.requestedBy}}</td>
+<td>{{imaging.patient.displayName}}</td>
+<td>{{imaging.imagingType.name}}</td>
+<td>{{imaging.notes}}</td>
+
+{{#if showActions}}
+  <td>
+    {{#if canEdit}}
+      {{imaging/index/imaging-edit-button imaging=imaging}}
+    {{/if}}
+  </td>
+{{/if}}

app/imaging/index/template.hbs

@@ -12,20 +12,11 @@
         {{/if}}
       </tr>
       {{#each model as |imaging|}}
-        <tr {{action 'editItem' imaging }} class="clickable">
-          <td>{{date-format imaging.requestedDate}}</td>
-          <td>{{imaging.requestedBy}}</td>
-          <td>{{imaging.patient.displayName}}</td>
-          <td>{{imaging.imagingType.name}}</td>
-          <td>{{imaging.notes}}</td>
-          {{#if showActions}}
-            <td>
-              {{#if canEdit}}
-                <button class="btn btn-default neutral" {{action 'editItem' imaging  bubbles=false }}>{{t 'labels.edit'}}</button>
-              {{/if}}
-            </td>
-          {{/if}}
-        </tr>
+        {{imaging/index/requested-list-item
+          imaging=imaging
+          action="editItem"
+          showActions=showActions
+          canEdit=canEdit}}
       {{/each}}
     </table>
   {{else}}

app/styles/_temp_misc.scss

@@ -91,6 +91,10 @@
   background-color: $white;
 }
 
+.light-text {
+  color: $gray_light;
+}
+
 //Loading icon from http://www.bootply.com/128062
 .glyphicon-refresh-animate {
   -animation: spin .7s infinite linear;