From 49b4d09f311f8c2837ee301790174b0490cc30f8 Mon Sep 17 00:00:00 2001 From: Kelly Selden Date: Thu, 26 Mar 2015 16:00:00 -0400 Subject: [PATCH 1/3] the selectAll button can now unselectAll as well --- app/components/todos-route/component.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/app/components/todos-route/component.js b/app/components/todos-route/component.js index 26f9eab..91f8358 100644 --- a/app/components/todos-route/component.js +++ b/app/components/todos-route/component.js @@ -22,15 +22,15 @@ export default Ember.Component.extend({ return active === 1 ? 'item' : 'items'; }).readOnly(), - allAreDone: computed('active.@each.isCompleted', function (key, value) { + allAreDone: computed('filtered.@each.isCompleted', function (key, value) { if (arguments.length === 2) { // TODO: use action instead of a 2 way CP. - var todos = this.get('active'); + var todos = this.get('todos'); todos.setEach('isCompleted', value); todos.invoke('save'); return value; } else { - return !isEmpty(this) && this.get('length') === this.get('completed.length'); + return !isEmpty(this) && this.get('todos.length') === this.get('completed.length'); } }), From 79d5b420307b4a7e1f541f953040ca8952ebb08a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?pierre-arnaud=20lumal=C3=A9?= Date: Thu, 26 Mar 2015 21:24:01 +0100 Subject: [PATCH 2/3] checkbox action up / binding down add todo-checkbox component update ember and ember-data to latest alter css --- app/adapters/application.js | 4 +-- app/components/todo-checkbox/component.js | 33 +++++++++++++++++ app/components/todo-item/component.js | 18 ++++++---- app/components/todo-item/template.hbs | 13 ++++--- app/components/todos-list/component.js | 8 +++++ app/components/todos-list/template.hbs | 4 ++- app/components/todos-route/component.js | 34 ++++++++++-------- app/components/todos-route/template.hbs | 11 +++--- app/styles/app.css | 36 ++++++++----------- bower.json | 4 +-- package.json | 4 +-- .../todo-checkbox/component-test.js | 21 +++++++++++ .../components/todo-item/component-test.js | 1 + 13 files changed, 132 insertions(+), 59 deletions(-) create mode 100644 app/components/todo-checkbox/component.js create mode 100644 tests/unit/components/todo-checkbox/component-test.js 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..bcc70e7 --- /dev/null +++ b/app/components/todo-checkbox/component.js @@ -0,0 +1,33 @@ +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._super(); + 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 91f8358..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('filtered.@each.isCompleted', function (key, value) { - if (arguments.length === 2) { - // TODO: use action instead of a 2 way CP. - var todos = this.get('todos'); - todos.setEach('isCompleted', value); - todos.invoke('save'); - return value; - } else { - return !isEmpty(this) && this.get('todos.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'}}