Add number box component and improve relationship management

app/components/number-box.js

@@ -0,0 +1,7 @@
+import Ember from 'ember';
+
+export default Ember.Component.extend({
+
+  classNames: ['panel panel-warning']
+
+});

app/controllers/admin/seeder.js

@@ -24,7 +24,6 @@ export default Ember.Controller.extend({
 
     deleteLibraries() {
       this._destroyAll(this.get('libraries'));
-      const libraries = this.get('libraries');
 
       this.set('libDelDone', true);
     },
@@ -36,7 +35,7 @@ export default Ember.Controller.extend({
         let newAuthor = this.store.createRecord('author');
         newAuthor.randomize()
           .save().then(() => {
-             if (i == counter-1) {
+             if (i === counter-1) {
                this.set('authorCounter', 0);
                this.set('authDone', true);
              }
@@ -61,19 +60,25 @@ export default Ember.Controller.extend({
     const bookCounter = Faker.random.number(10);
 
     for (let j = 0; j < bookCounter; j++) {
+      const library = this._selectRandomLibrary();
       this.store.createRecord('book')
-        .randomize(author, this._selectRandomLibrary())
-        .save()
+        .randomize(author, library)
+        .save();
+      author.save();
+      library.save();
     }
   },
 
   _selectRandomLibrary() {
     const libraries = this.get('libraries');
     const librariesCounter = libraries.get('length');
-    const randomNumber = Faker.random.number(librariesCounter);
 
-    // You can convert any Ember Data record list to basic javascript array with .toArray()
-    return libraries.toArray()[randomNumber];
+    // Create a new array form ids
+    const libraryIds = libraries.map((lib) => {return lib.get('id')});
+    const randomNumber = Faker.random.number(librariesCounter-1);
+
+    const randomLibrary = libraries.findBy('id', libraryIds[randomNumber]);
+    return randomLibrary;
   },
 
   _destroyAll(records) {

app/models/author.js

@@ -5,7 +5,7 @@ export default DS.Model.extend({
 
   name: DS.attr('string'),
 
-  books: DS.hasMany('book'),
+  books: DS.hasMany('book', {inverse: 'author'}),
 
   randomize() {
     this.set('name', Faker.name.findName());

app/models/book.js

@@ -3,11 +3,11 @@ import Faker from 'faker';
 
 export default DS.Model.extend({
 
-  title: DS.attr('string'),
-  releaseYear: DS.attr('date'),
+  title:        DS.attr('string'),
+  releaseYear:  DS.attr('date'),
 
-  author: DS.belongsTo('author'),
-  library: DS.belongsTo('library'),
+  author:       DS.belongsTo('author', {inverse: 'books', async: true}),
+  library:      DS.belongsTo('library', {inverse: 'books', async: true}),
 
   randomize(author, library) {
     this.set('title', this._bookTitle());

app/models/library.js

@@ -6,7 +6,7 @@ export default DS.Model.extend({
   address: DS.attr('string'),
   phone: DS.attr('string'),
 
-  books: DS.hasMany('books'),
+  books: DS.hasMany('book', {inverse: 'library', async: true}),
 
   isValid: Ember.computed.notEmpty('name'),
 

app/templates/admin/seeder.hbs

@@ -1,6 +1,10 @@
-<h1>Seed some data</h1>
+<h1>Seeder, our Data Center</h1>
 
-<p>Number of books: {{books.length}}</p>
+<div class="row">
+  <div class="col-md-4">{{number-box title="Libraries" numbers=libraries.length}}</div>
+  <div class="col-md-4">{{number-box title="Authors" numbers=authors.length}}</div>
+  <div class="col-md-4">{{number-box title="Books" numbers=books.length}}</div>
+</div>
 
 {{seeder-block
     sectionTitle='Libraries'

app/templates/components/library-item.hbs

@@ -6,7 +6,13 @@
         <p>Address: {{item.address}}</p>
         <p>Phone: {{item.phone}}</p>
     </div>
-    <div class="panel-footer text-right">
-      {{yield}}
+    <div class="panel-footer">
+      Number of books:
+      <span class="text-left badge">
+        {{badge}}
+      </span>
+      <span class="pull-right">
+        {{yield}}
+      </span>
     </div>
 </div>

app/templates/components/number-box.hbs

@@ -0,0 +1,4 @@
+<div class="panel-heading">
+  <h3 class="text-center">{{title}}</h3>
+  <h1 class="text-center">{{if numbers numbers '...'}}</h1>
+</div>

app/templates/libraries/index.hbs

@@ -2,9 +2,9 @@
 <div class="row">
   {{#each model as |library|}}
     <div class="col-md-4">
-      {{#library-item item=library}}
+      {{#library-item item=library badge=library.books.length}}
         {{#link-to 'libraries.edit' library.id class='btn btn-success btn-xs'}}Edit{{/link-to}}
-          <button class="btn btn-danger btn-xs" {{action 'deleteLibrary' library}}>Delete</button>
+        <button class="btn btn-danger btn-xs" {{action 'deleteLibrary' library}}>Delete</button>
       {{/library-item}}
     </div>
   {{/each}}

bower.json

@@ -9,11 +9,11 @@
     "ember-qunit": "0.4.9",
     "ember-qunit-notifications": "0.0.7",
     "ember-resolver": "~0.1.18",
-    "jquery": "^1.11.3",
+    "jquery": "^2.1.4",
     "loader.js": "ember-cli/loader.js#3.2.1",
     "qunit": "~1.18.0",
     "bootstrap-sass": "~3.3.5",
-    "firebase": "^2.1.0",
+    "firebase": "^2.3.1",
     "Faker": "~3.0.1"
   },
   "resolutions": {

package.json

@@ -40,6 +40,6 @@
     "ember-disable-proxy-controllers": "^1.0.0",
     "ember-export-application-global": "^1.0.3",
     "ember-faker": "1.1.0",
-    "emberfire": "1.5.0"
+    "emberfire": "1.6.0"
   }
 }

tests/integration/components/number-box-test.js

@@ -0,0 +1,26 @@
+import { moduleForComponent, test } from 'ember-qunit';
+import hbs from 'htmlbars-inline-precompile';
+
+moduleForComponent('number-box', 'Integration | Component | number box', {
+  integration: true
+});
+
+test('it renders', function(assert) {
+  assert.expect(2);
+
+  // Set any properties with this.set('myProperty', 'value');
+  // Handle any actions with this.on('myAction', function(val) { ... });
+
+  this.render(hbs`{{number-box}}`);
+
+  assert.equal(this.$().text().trim(), '');
+
+  // Template block usage:
+  this.render(hbs`
+    {{#number-box}}
+      template block text
+    {{/number-box}}
+  `);
+
+  assert.equal(this.$().text().trim(), 'template block text');
+});