Merge pull request Addepar#37 from Cuiyansong/row-loading-indicator-c…

…omponent

Row loading indicator component

addon/styles/addon.less

@@ -723,6 +723,14 @@
   }
 }
 
+.row-loading-indicator {
+  display: inline-block;
+  position: relative;
+  width: 10px;
+  height: 10px;
+  margin-left: 5px;
+}
+
 //
 // Financial theme is included by default.
 //

addon/views/row-loading-indicator.js

@@ -0,0 +1,17 @@
+import Ember from 'ember';
+
+export default Ember.View.extend({
+  templateName: 'row-loading-indicator',
+
+  classNameBindings: ['indicatorClass'],
+
+  isLoading: false,
+
+  indicatorClass: Ember.computed(function() {
+    var classNames = ['row-loading-indicator'];
+    if (this.get('isLoading')) {
+      classNames.push('loading');
+    }
+    return classNames.join(' ');
+  }).property('isLoading')
+});

app/templates/grouping-column-cell.hbs

@@ -1,12 +1,14 @@
 {{#if view.isLoading}}
-	<img class="loading-indicator" src="/ember-table/images/loading.gif" width="75px" height="15px">
+    {{view "row-loading-indicator"
+    isLoading=view.isLoading
+    }}
 {{else}}
-	{{view view.indicatorView
-		hasChildren=view.hasChildren
-		isExpanded=view.isExpanded
-		expandLevel=view.expandLevel
-	}}
-	<span class="ember-table-content">
-	  {{view.cellContent}}
-	</span>
+  {{view view.indicatorView
+  hasChildren=view.hasChildren
+  isExpanded=view.isExpanded
+  expandLevel=view.expandLevel
+  }}
+  <span class="ember-table-content">
+    {{view.cellContent}}
+  </span>
 {{/if}}

app/templates/row-loading-indicator.hbs

@@ -0,0 +1 @@
+<img class="loading-indicator" src="/ember-table/images/loading.gif" width="75px" height="15px">

app/views/row-loading-indicator.js

@@ -0,0 +1,3 @@
+import RowLoadingIndicator from 'ember-table/views/row-loading-indicator';
+
+export default RowLoadingIndicator;

tests/helpers/module-for-ember-table.js

@@ -7,6 +7,7 @@ export default function moduleForEmberTable(description, subject) {
     needs: [
       'view:body-table-container',
       'view:column-sortable-indicator',
+      'view:row-loading-indicator',
       'view:footer-table-container',
       'view:header-cell',
       'view:header-row',
@@ -33,6 +34,7 @@ export default function moduleForEmberTable(description, subject) {
       'template:table-cell',
       'template:table-row',
       'template:grouping-column-cell',
+      'template:row-loading-indicator',
       'template:grouped-row-indicator'
     ],
     subject: subject

tests/unit/components/loading-indicator-test.js

@@ -30,12 +30,11 @@ test('render loading indicator', function(assert) {
   var component = this.subject([{id: 1, isLoading: true}]);
   this.render();
   var helper = EmberTableHelper.create({ _assert: assert, _component: component});
-
   var loadingRow = helper.bodyRows().eq(0);
+
   assert.equal(loadingRow.find('.loading-indicator').length, 3, 'should render loading indicator');
 });
 
-
 test('expand grouped rows', function(assert) {
   var component = this.subject([firstRowObject]);
   this.render();
@@ -55,5 +54,5 @@ test('expand grouped rows', function(assert) {
 
 	secondRow = helper.bodyRows().eq(1);
 	var firstChildrenId = secondRow.find('.ember-table-content:eq(0)').text().trim();
-	assert.equal(firstChildrenId, '11', 'it should render chidlren');
+	assert.equal(firstChildrenId, '11', 'it should render children');
 });