video 5

Author: jcnance

TodoListAPI/Repositories/TodoItemRepository.cs

@@ -1,4 +1,5 @@
 using System.Linq;
+using System.Threading.Tasks;
 using JsonApiDotNetCore.Data;
 using JsonApiDotNetCore.Services;
 using Microsoft.Extensions.Logging;
@@ -29,5 +30,11 @@ public override IQueryable<TodoItem> Get()
         {
             return base.Get().Where(e => e.OwnerId == _authenticationService.GetUserId());
         }
+
+        public override async Task<TodoItem> CreateAsync(TodoItem todoItem)
+        {
+            todoItem.OwnerId = _authenticationService.GetUserId();
+            return await base.CreateAsync(todoItem);
+        }
     }
 }

TodoListClient/app/components/forms/todo-item-form/component.js

@@ -0,0 +1,9 @@
+import Ember from 'ember';
+
+export default Ember.Component.extend({
+  actions: {
+    save() {
+      this.get('saveAction')();
+    }
+  }
+});

TodoListClient/app/components/forms/todo-item-form/template.hbs

@@ -0,0 +1,9 @@
+<form {{action "save" on="submit"}}>
+  {{input placeholder="description" value=todoItem.description}}
+  <br />
+  {{#if todoItem.validations.isValid}}
+    <button type="submit">Add</button>
+  {{else}}
+    <button type="submit" disabled>Add</button>
+  {{/if}}
+</form>

TodoListClient/app/models/todo-item.js

@@ -1,8 +1,17 @@
 import DS from 'ember-data';
+import { validator, buildValidations } from 'ember-cp-validations';
 
 const { attr, belongsTo } = DS;
+const Validations = buildValidations({
+  description: [
+    validator('presence', true),
+    validator('length', {
+      min: 4
+    })
+  ]
+});
 
-export default DS.Model.extend({
+export default DS.Model.extend(Validations, {
 
   description: attr('string'),
   owner: belongsTo('person')

TodoListClient/app/router.js

@@ -9,7 +9,9 @@ const Router = Ember.Router.extend({
 Router.map(function() {
   this.route('login');
   this.route('s', function() {
-    this.route('todo-items');
+    this.route('todo-items', function() {
+      this.route('add');
+    });
   });
 });
 

TodoListClient/app/routes/s/todo-items/add.js

@@ -0,0 +1,19 @@
+import Ember from 'ember';
+import DataRoute from 'ember-data-route';
+
+export default Ember.Route.extend(DataRoute, {
+  model() {
+    return this.store.createRecord('todo-item');
+  },
+
+  actions: {
+    save() {
+      this.get('controller.model')
+        .save()
+        .then(() => {
+          this.transitionTo('s.todo-items');
+        });
+    }
+  },
+
+});

TodoListClient/app/routes/s/todo-items.js renamed to TodoListClient/app/routes/s/todo-items/index.js

@@ -1,3 +1,4 @@
 {{login-buttons}}
+<br />
 {{outlet}}
 {{ember-notify}}

TodoListClient/app/templates/application.hbs

@@ -0,0 +1,3 @@
+{{forms/todo-item-form
+  todoItem=model
+  saveAction=(route-action "save")}}

TodoListClient/app/templates/s/todo-items/add.hbs

@@ -1,3 +1,5 @@
+{{#link-to "s.todo-items.add"}}Add{{/link-to}}
+<br />
 {{#each model as |todoItem|}}
   {{todoItem.description}} <br />
 {{/each}}

TodoListClient/app/templates/s/todo-items.hbs renamed to TodoListClient/app/templates/s/todo-items/index.hbs

@@ -31,11 +31,14 @@
     "ember-cli-sri": "^2.1.0",
     "ember-cli-test-loader": "^1.1.0",
     "ember-cli-uglify": "^1.2.0",
+    "ember-cp-validations": "3.2.4",
     "ember-data": "^2.11.0",
+    "ember-data-route": "0.2.0",
     "ember-export-application-global": "^1.0.5",
     "ember-load-initializers": "^0.6.0",
     "ember-notify": "5.2.1",
     "ember-resolver": "^2.0.3",
+    "ember-route-action-helper": "2.0.2",
     "ember-simple-auth": "1.2.0",
     "ember-source": "^2.11.0",
     "ember-welcome-page": "^2.0.2",

TodoListClient/package.json

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

TodoListClient/tests/integration/components/forms/todo-item-form-test.js

@@ -0,0 +1,11 @@
+import { moduleFor, test } from 'ember-qunit';
+
+moduleFor('route:s/todo-items/add', 'Unit | Route | s/todo items/add', {
+  // Specify the other units that are required for this test.
+  // needs: ['controller:foo']
+});
+
+test('it exists', function(assert) {
+  let route = this.subject();
+  assert.ok(route);
+});