From 0bcd0d25a0015bec1f8cc0032986aee18bd202d9 Mon Sep 17 00:00:00 2001
From: Helen Hood <helen.c.hood@gmail.com>
Date: Thu, 29 Jan 2015 14:32:34 -0500
Subject: [PATCH] Mark task complete with checkboxes - half working
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replaced saveTask action with an observer because I couldn’t get the
checkbox to hit an action. However, the observer fires uncontrollably.

Also, how should I modify my test?  Using Ember.Checkbox, there doesn’t
seem to be anything in the markup to differentiate checked from
unchecked boxes.  Should I check the completedAt property in the model?
Seems wrong to do that in an integration test.
---
 frontend/app/components/task-list-item.js        | 16 +++++++++++-----
 frontend/app/models/task.js                      |  8 +++++++-
 .../app/templates/components/task-list-item.hbs  | 14 +++++++++-----
 3 files changed, 27 insertions(+), 11 deletions(-)

diff --git a/frontend/app/components/task-list-item.js b/frontend/app/components/task-list-item.js
index 0bb283d..63cebc2 100644
--- a/frontend/app/components/task-list-item.js
+++ b/frontend/app/components/task-list-item.js
@@ -4,11 +4,17 @@ export default Ember.Component.extend({
   tagName: 'li',
   classNames: ['task-list-item'],
 
-  actions: {
-    saveTask: function() {
-      var task = this.get('task');
+  // how do I make this not fire uncontrollably?
+  // should it be an action? 
+  updateCompletedStatus: function() {
+    var task = this.get('task');
+
+    if (task.get('completedAt')) {
+      task.set('completedAt', null);
+    } else {
       task.set('completedAt', new Date());
-      task.save();
     }
-  }
+
+    task.save();
+  }.observes('task.isCompleted'),
 });
diff --git a/frontend/app/models/task.js b/frontend/app/models/task.js
index 5cc71fe..df9fa75 100644
--- a/frontend/app/models/task.js
+++ b/frontend/app/models/task.js
@@ -3,5 +3,11 @@ import DS from 'ember-data';
 export default DS.Model.extend({
   name: DS.attr('string'),
   completedAt: DS.attr('date'),
-  project: DS.belongsTo('project', { async: true })
+  project: DS.belongsTo('project', { async: true }),
+
+  isCompleted: function() {
+    if (this.get('completedAt')) {
+      return true;
+    }
+  }.property('completedAt')
 });
diff --git a/frontend/app/templates/components/task-list-item.hbs b/frontend/app/templates/components/task-list-item.hbs
index 9d786cd..c901524 100644
--- a/frontend/app/templates/components/task-list-item.hbs
+++ b/frontend/app/templates/components/task-list-item.hbs
@@ -1,9 +1,13 @@
-{{task.name}}
-
-{{#if task.completedAt}}
-  Completed
+{{#if task.isCompleted}}
+  {{input type="checkbox"
+    checked=task.isCompleted
+    class="toggle"}}
 {{else}}
   {{#if task.project.canEdit}}
-    <button {{action 'saveTask'}}>Complete</button>
+    {{input type="checkbox"
+      checked=task.isCompleted
+      class="toggle"}}
   {{/if}}
 {{/if}}
+
+{{task.name}}