John mutavi

app/components/single-task.hbs

@@ -5,12 +5,9 @@
     </h5>
     <div class="toggle-done ml-auto">
       <div class="btn-group btn-group-sm" role="group">
-        <BsButton @type="secondary">Pin</BsButton>
-        {{#if this.task.isComplete}}
-          <BsButton @type="primary" onClick={{action (mut this.task.isComplete) false}}>Undo</BsButton>
-        {{else}}
-          <BsButton @type="primary" onClick={{action (mut this.task.isComplete) true}}>Done</BsButton>
-        {{/if}}
+        <BsButton @type="secondary" onClick={{action  this.setPinnedTask this.task}} >Pin</BsButton>
+
+         <ToggleComplete @onChange= {{this.taskComplete}} @text={{if this.task.isComplete "Undo" "Done"}}/>
       </div>
     </div>
   </div>

app/components/single-task.js

@@ -1,7 +1,14 @@
 import Component from '@ember/component';
 import { tagName } from '@ember-decorators/component';
+import { action } from '@ember/object';
 
 export default 
 @tagName('')
 class SingleTaskComponent extends Component {
+
+    // Action for toggling the isComplete property between false and true
+    @action 
+    taskComplete(){
+        this.task.isComplete = !this.task.isComplete
+    }
 }

app/components/task-list.hbs

@@ -1,7 +1,7 @@
 <div class="card">
   <ul class="list-group list-group-flush">
     {{#each this.tasks as |task|}}
-      <SingleTask @task={{task}} />
+      <SingleTask @task={{task}} @setPinnedTask={{ this.pinnedTask}} />
     {{/each}}
   </ul>
 </div>

app/components/toggle-complete.hbs

@@ -0,0 +1 @@
+ <button class="btn-primary" {{action "onclick" }}>{{@text}}</button>

app/components/toggle-complete.js

@@ -0,0 +1,11 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+
+export default class ToggleCompleteComponent extends Component {
+
+    @action
+    onclick(){
+        this.args.onChange()
+
+    }
+}

app/controllers/index.js

@@ -1,4 +1,36 @@
 import Controller from '@ember/controller';
+import { tracked } from '@glimmer/tracking';
+import { action,computed,set } from '@ember/object';
+
 
 export default class IndexController extends Controller {
+    // Tracking the pinnedTrack object
+    @tracked pinnedTask;
+
+    // Action that gets a task from the single task component after the user pins the task
+    @action
+    pinTask(task) {
+        this.pinnedTask = task.toJSON();
+    }
+
+    // Action that toggles the is complete property between true and false
+    @action
+    taskCompleted(){
+
+        if (this.pinnedTask.isComplete == false ){
+
+            set(this.pinnedTask,"isComplete", true)
+
+        } else{
+
+            set(this.pinnedTask,"isComplete", false)
+        }
+    }
+
+    // Computed property that automatically counts the number of completed tasks
+    @computed('[email protected]')
+    get completedTasks() {
+        const n = this.model.filterBy('isComplete', true).get('length');
+        return n
+    }
 }

app/templates/index.hbs

@@ -8,12 +8,10 @@
       </h5>
       <div class="toggle-done ml-auto">
         <div class="btn-group btn-group-sm" role="group">
-          <BsButton @type="secondary">Unpin</BsButton>
-          {{#if this.pinnedTask.isComplete}}
-            <BsButton @type="primary">Undo</BsButton>
-          {{else}}
-            <BsButton @type="primary">Done</BsButton>
-          {{/if}}
+          <BsButton @type="secondary" onClick={{action (mut this.pinnedTask) null}} >Unpin</BsButton>
+
+          <ToggleComplete @onChange= {{ this.taskCompleted}} @text={{if this.pinnedTask.isComplete "Undo" "Done"}}/>
+
         </div>
       </div>
     </div>
@@ -25,7 +23,7 @@
   No Pinned Tasks
 {{/if}}
 <h4>Other Tasks</h4>
-<TaskList @tasks={{this.model}} />
+<TaskList @tasks={{this.model}} @pinnedTask={{this.pinTask }}/>
 
 <nav class="navbar navbar-light bg-light">
   <span class="navbar-text">