Move contact create form in a component

README.md

@@ -173,3 +173,14 @@ Adding two buttons (bulk data generator and Delete All). Update Ember.js. | [Com
 * Change `and` to `or` at validation.
 * Add email attribute to contact model.
 * Add computed property for counting records with email addresses.
+
+### 15. Clean up controller with components
+
+* [Official guide about Components](http://guides.emberjs.com/v1.12.0/components/)
+* Generate `contacts/add-contact-form` component with the following ember command: `ember g component contacts/add-contact-form`
+* Move all form related html code from `templates/contacts.hbs` in `templates/components/contacts/add-contact-form.hbs`
+* Insert in `templates/contacts.hbs` the one liner component code: `{{contacts/add-contact-form}}`
+* Move model modifier actions from controller to route.
+* Create action in component and send action with params to higher level route action.
+* Change computed properties for using the new preferred syntax.
+

app/components/contacts/add-contact-form.js

@@ -0,0 +1,28 @@
+import Ember from 'ember';
+
+export default Ember.Component.extend({
+
+  classNames: ['container-fluid'],
+
+  isNameEmpty: Ember.computed('name', function() {return Ember.isBlank(this.get('name'));}),
+  isPhoneEmpty: Ember.computed('phone', function() {return Ember.isBlank(this.get('phone'));}),
+
+  nothingThere: Ember.computed.or('isNameEmpty', 'isPhoneEmpty'),
+
+  actions: {
+    buttonClicked() {
+      if (this.get('nothingThere')) {return;}
+
+      const name = this.get('name');
+      const phone = this.get('phone');
+      const email = this.get('email');
+
+      this.sendAction('action', name, phone, email);
+
+      this.set('name', '');
+      this.set('phone', '');
+      this.set('email', '');
+    }
+  }
+
+});

app/controllers/contacts.js

@@ -4,56 +4,17 @@ export default Ember.Controller.extend({
 
   queryParams: ['isShowingPhoneNumber'],
 
-  name: '',
-  phone: '',
-
   isShowingPhoneNumber: false,
 
-  isNameEmpty: Ember.computed.empty('name'),
-  isPhoneEmpty: Ember.computed.empty('phone'),
-
-  nothingThere: Ember.computed.or('isNameEmpty', 'isPhoneEmpty'),
-
-  contactsWithEmail: function() {
+  contactsWithEmail: Ember.computed('model.@each', function() {
     var model = this.get('model');
     var filteredModel = model.filterBy('email');
     return filteredModel.get('length');
-  }.property('model.@each'),
+  }),
 
   actions: {
-
     toggleShowPhoneNumber() {
-
       this.toggleProperty('isShowingPhoneNumber');
-
-    },
-
-    addNewContact() {
-
-      if (this.get('nothingThere')) {
-        return;
-      }
-
-      var nameFromInput = this.get('name');
-      var phoneFromInput = this.get('phone');
-      var emailFromInput = this.get('email');
-
-      const newContact = this.store.createRecord('contact', {
-        name: nameFromInput,
-        phone: phoneFromInput,
-        email: emailFromInput
-      });
-
-      newContact.save();
-
-      this.set('name', '');
-      this.set('phone', '');
-      this.set('email', '');
-
-    },
-
-    deleteContact(item) {
-      item.destroyRecord();
     }
   }
 

app/routes/contacts.js

@@ -3,8 +3,27 @@ import Ember from 'ember';
 export default Ember.Route.extend({
 
   model() {
+    return this.store.findAll('contact');
+  },
 
-    return this.store.find('contact');
+  actions: {
+    addNewContact(name, phone, email) {
 
+      if (Ember.isBlank(name, phone)) {
+        return;
+      }
+
+      const newContact = this.store.createRecord('contact', {
+        name: name,
+        phone: phone,
+        email: email
+      });
+
+      newContact.save();
+    },
+
+    deleteContact(item) {
+      item.destroyRecord();
+    }
   }
 });

app/templates/components/contacts/add-contact-form.hbs

@@ -0,0 +1,15 @@
+<div class="row well">
+  <div class="col-xs-3">
+    {{input type="text" value=name size="100" placeholder="Enter a new name" class="form-control"}}
+  </div>
+
+  <div class="col-xs-3">
+    {{input type="text" value=phone size="20" placeholder="Phone" class="form-control"}}
+  </div>
+
+  <div class="col-xs-3">
+    {{input type="text" value=email size="100" placeholder="Email" class="form-control"}}
+  </div>
+
+  <button type="submit" class="btn btn-warning" {{action 'buttonClicked'}} disabled={{nothingThere}}>Add New Contact</button>
+</div>

app/templates/contacts.hbs

@@ -3,23 +3,7 @@
 <p>Database size: {{model.length}}</p>
 <p>Contacts with email: {{contactsWithEmail}}</p>
 
-<div class="container-fluid">
-    <div class="row well">
-        <div class="col-xs-3">
-          {{input type="text" value=name size="100" placeholder="Enter a new name" class="form-control"}}
-        </div>
-
-        <div class="col-xs-3">
-          {{input type="text" value=phone size="20" placeholder="Phone" class="form-control"}}
-        </div>
-
-        <div class="col-xs-3">
-          {{input type="text" value=email size="20" placeholder="Email" class="form-control"}}
-        </div>
-
-        <button type="submit" class="btn btn-warning" {{action 'addNewContact'}} disabled={{nothingThere}}>Add New Contact</button>
-    </div>
-</div>
+{{contacts/add-contact-form action='addNewContact'}}
 
 <table class="table table-bordered table-hover">
 

tests/unit/components/contacts/add-contact-form-test.js

@@ -0,0 +1,19 @@
+import { moduleForComponent, test } from 'ember-qunit';
+
+moduleForComponent('contacts/add-contact-form', 'Unit | Component | contacts/add contact form', {
+  // Specify the other units that are required for this test
+  // needs: ['component:foo', 'helper:bar'],
+  unit: true
+});
+
+test('it renders', function(assert) {
+  assert.expect(2);
+
+  // Creates the component instance
+  var component = this.subject();
+  assert.equal(component._state, 'preRender');
+
+  // Renders the component to the page
+  this.render();
+  assert.equal(component._state, 'inDOM');
+});