diff --git a/app/adapters/application.js b/app/adapters/application.js index 711a0d9..14ec3b3 100755 --- a/app/adapters/application.js +++ b/app/adapters/application.js @@ -25,7 +25,7 @@ export default DS.Adapter.extend({ createRecord(store, type, record) { // rather then doing an ajax, just echo back the data that was created - var json = record.toJSON(); + var json = record; // assign a unique ID like the server word json.id = Date.now(); @@ -36,7 +36,7 @@ export default DS.Adapter.extend({ updateRecord(store, type, record) { // rather then doing an ajax, just echo back the data that was updated - var json = record.toJSON(); + var json = record; json.id = record.id; diff --git a/app/components/todo-checkbox/component.js b/app/components/todo-checkbox/component.js new file mode 100644 index 0000000..eb3d785 --- /dev/null +++ b/app/components/todo-checkbox/component.js @@ -0,0 +1,32 @@ +import Ember from 'ember'; + +export default Ember.Component.extend({ + tagName: 'input', + classNames: ['todo-checkbox'], + attributeBindings: [ + 'type', + 'checked', + 'indeterminate', + 'disabled', + 'tabindex', + 'name', + 'autofocus', + 'required', + 'form' + ], + + type: 'checkbox', + checked: false, + disabled: false, + indeterminate: false, + + didInsertElement() { + this.get('element').indeterminate = !!this.get('indeterminate'); + }, + + change() { + var checked = this.$().prop('checked'); + // this.set('checked', checked); + this.sendAction('action', checked); + } +}); \ No newline at end of file diff --git a/app/components/todo-item/component.js b/app/components/todo-item/component.js index 445b49d..4969be7 100644 --- a/app/components/todo-item/component.js +++ b/app/components/todo-item/component.js @@ -4,6 +4,9 @@ export default Ember.Component.extend({ tagName: 'li', classNameBindings: ['todo.isCompleted:completed', 'isEditing:editing'], + isCompleted: Ember.computed.oneWay('todo.isCompleted'), + title: Ember.computed.oneWay('todo.title'), + init() { this._super(...arguments); this.set('isEditing', false); @@ -15,15 +18,16 @@ export default Ember.Component.extend({ }, removeTodo() { - var todo = this.get('todo'); - - todo.deleteRecord(); - todo.save(); + this.sendAction('actionDeleteTodo', this.get('todo')); }, - save() { + titleChange() { this.set('isEditing', false); - this.get('todo').save(); + this.sendAction('actionPatchTodo', this.get('todo'), 'title', this.get('title')); + }, + + isCompletedChange(checked) { + this.sendAction('actionPatchTodo', this.get('todo'), 'isCompleted', checked); } }, -}); +}); \ No newline at end of file diff --git a/app/components/todo-item/template.hbs b/app/components/todo-item/template.hbs index 8c2c8fe..0b887ee 100644 --- a/app/components/todo-item/template.hbs +++ b/app/components/todo-item/template.hbs @@ -1,9 +1,12 @@ {{#if isEditing}} - {{edit-todo class='edit' value=todo.title - focus-out='save' - insert-newline='save'}} + {{edit-todo class='edit' + value=title + focus-out='titleChange' + insert-newline='titleChange'}} {{else}} - {{input type='checkbox' checked=todo.isCompleted class='toggle'}} - + {{todo-checkbox class="toggle" + checked=isCompleted + action='isCompletedChange'}} + {{/if}} diff --git a/app/components/todos-list/component.js b/app/components/todos-list/component.js index f93f8a8..434767f 100644 --- a/app/components/todos-list/component.js +++ b/app/components/todos-list/component.js @@ -2,4 +2,12 @@ import Ember from 'ember'; export default Ember.Component.extend({ tagName: 'ul', + actions: { + patchTodo(todo, propertyName, propertyValue) { + this.sendAction('actionPatchTodo', todo, propertyName, propertyValue); + }, + deleteTodo(todo) { + this.sendAction('actionDeleteTodo', todo); + } + } }); diff --git a/app/components/todos-list/template.hbs b/app/components/todos-list/template.hbs index d16f2cc..029be26 100644 --- a/app/components/todos-list/template.hbs +++ b/app/components/todos-list/template.hbs @@ -1,4 +1,6 @@ {{#each todos as |todo|}} - {{todo-item todo=todo}} + {{todo-item todo=todo + actionPatchTodo='patchTodo' + actionDeleteTodo='deleteTodo'}} {{/each}} diff --git a/app/components/todos-route/component.js b/app/components/todos-route/component.js index 26f9eab..fb8b48b 100644 --- a/app/components/todos-route/component.js +++ b/app/components/todos-route/component.js @@ -1,8 +1,8 @@ import Ember from 'ember'; var isEmpty = Ember.isEmpty; -var filterBy = Ember.computed.filterBy; var computed = Ember.computed; +var filterBy = computed.filterBy; export default Ember.Component.extend({ filtered: computed('todos.@each.isCompleted', 'filter', function() { @@ -22,19 +22,26 @@ export default Ember.Component.extend({ return active === 1 ? 'item' : 'items'; }).readOnly(), - allAreDone: computed('active.@each.isCompleted', function (key, value) { - if (arguments.length === 2) { - // TODO: use action instead of a 2 way CP. - var todos = this.get('active'); - todos.setEach('isCompleted', value); - todos.invoke('save'); - return value; - } else { - return !isEmpty(this) && this.get('length') === this.get('completed.length'); - } + allAreDone: computed('todos.@each.isCompleted', function() { + return isEmpty(this.get('active')); }), actions: { + allAreDoneChange(checked) { + var todos = this.get('todos').filterBy('isCompleted', !checked); + todos.setEach('isCompleted', checked); + todos.invoke('save'); + }, + + patchTodo(todo, propertyName, propertyValue) { + todo.set(propertyName, propertyValue); + todo.save(); + }, + + deleteTodo(todo) { + todo.destroyRecord(); + }, + createTodo() { // Get the todo title set by the "New Todo" text field var title = this.get('newTitle'); @@ -61,8 +68,7 @@ export default Ember.Component.extend({ var completed = this.get('completed'); completed.toArray(). // clone the array, so it is not bound while we iterate over and delete. - invoke('deleteRecord'). - invoke('save'); + invoke('destroyRecord'); } - }, + } }); diff --git a/app/components/todos-route/template.hbs b/app/components/todos-route/template.hbs index 8e1c34f..bee3cc9 100644 --- a/app/components/todos-route/template.hbs +++ b/app/components/todos-route/template.hbs @@ -9,11 +9,14 @@
- {{todos-list todos=filtered class='todo-list'}} + {{todos-list todos=filtered + class="todo-list" + actionPatchTodo='patchTodo' + actionDeleteTodo='deleteTodo'}} - {{input type='checkbox' - class='toggle-all' - checked=allAreDone}} + {{todo-checkbox class="toggle-all" + checked=allAreDone + action='allAreDoneChange'}}