From 443006bc355cebcde4737d30b17f9131b4a02152 Mon Sep 17 00:00:00 2001
From: mimidots <murage@labskenya.com>
Date: Mon, 11 Jan 2021 05:51:47 +0300
Subject: [PATCH 1/4] -Added `isPinned` tracked property on the application
 index route since the controllers are singleton. - Added `togglePin` action
 on controller to provide a way for user to toggle pinned tasks. (Passed in to
 component as children attribute)

---
 .gitignore                     | 3 +++
 app/components/single-task.hbs | 4 +++-
 app/components/task-list.hbs   | 2 +-
 app/controllers/index.js       | 8 ++++++++
 app/templates/index.hbs        | 2 +-
 package.json                   | 2 +-
 6 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/.gitignore b/.gitignore
index c40a1b2..b43fa38 100644
--- a/.gitignore
+++ b/.gitignore
@@ -23,3 +23,6 @@
 /.node_modules.ember-try/
 /bower.json.ember-try
 /package.json.ember-try
+
+
+/.idea/
diff --git a/app/components/single-task.hbs b/app/components/single-task.hbs
index d644ec8..b8d2e85 100644
--- a/app/components/single-task.hbs
+++ b/app/components/single-task.hbs
@@ -5,7 +5,9 @@
     </h5>
     <div class="toggle-done ml-auto">
       <div class="btn-group btn-group-sm" role="group">
-        <BsButton @type="secondary">Pin</BsButton>
+        <BsButton @type="secondary" {{on "click" (fn @toggleTaskPin this.task)}}>
+          {{if this.task.isPinned "Unpin" "Pin" }}
+        </BsButton>
         {{#if this.task.isComplete}}
           <BsButton @type="primary" onClick={{action (mut this.task.isComplete) false}}>Undo</BsButton>
         {{else}}
diff --git a/app/components/task-list.hbs b/app/components/task-list.hbs
index 41b6c7c..c81cc5e 100644
--- a/app/components/task-list.hbs
+++ b/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}} @toggleTaskPin={{this.toggleTaskPin}}/>
     {{/each}}
   </ul>
 </div>
\ No newline at end of file
diff --git a/app/controllers/index.js b/app/controllers/index.js
index 78d8779..e470f7a 100644
--- a/app/controllers/index.js
+++ b/app/controllers/index.js
@@ -1,4 +1,12 @@
 import Controller from '@ember/controller';
+import {action} from '@ember/object';
 
 export default class IndexController extends Controller {
+
+  isPinnedTask=false;
+
+  @action
+  toggleTaskPin(task) {
+    task.toggleProperty('isPinned');
+  }
 }
diff --git a/app/templates/index.hbs b/app/templates/index.hbs
index 13a70b0..1b7635c 100644
--- a/app/templates/index.hbs
+++ b/app/templates/index.hbs
@@ -25,7 +25,7 @@
   No Pinned Tasks
 {{/if}}
 <h4>Other Tasks</h4>
-<TaskList @tasks={{this.model}} />
+<TaskList @tasks={{this.model}} @toggleTaskPin={{this.toggleTaskPin}}/>
 
 <nav class="navbar navbar-light bg-light">
   <span class="navbar-text">
diff --git a/package.json b/package.json
index 64da720..1759616 100644
--- a/package.json
+++ b/package.json
@@ -52,4 +52,4 @@
   "engines": {
     "node": "8.* || >= 10.*"
   }
-}
\ No newline at end of file
+}

From 61a3c3277f60eb79b22563b03f28846721e0c69c Mon Sep 17 00:00:00 2001
From: mimidots <murage@labskenya.com>
Date: Mon, 11 Jan 2021 06:12:40 +0300
Subject: [PATCH 2/4] - Refactored the index template to utilize `pinnedTasks`
 computed property from the filtered model, leading to re-usability of
 `TaskList` component. - Introduced computed property for `unpinned tasks` in
 the index controller.

---
 app/controllers/index.js | 13 +++++++++++++
 app/templates/index.hbs  | 25 +++----------------------
 2 files changed, 16 insertions(+), 22 deletions(-)

diff --git a/app/controllers/index.js b/app/controllers/index.js
index e470f7a..5c38045 100644
--- a/app/controllers/index.js
+++ b/app/controllers/index.js
@@ -1,5 +1,6 @@
 import Controller from '@ember/controller';
 import {action} from '@ember/object';
+import {filterBy} from '@ember/object/computed';
 
 export default class IndexController extends Controller {
 
@@ -9,4 +10,16 @@ export default class IndexController extends Controller {
   toggleTaskPin(task) {
     task.toggleProperty('isPinned');
   }
+
+  @filterBy('model', 'isPinned', true) pinnedTasks; //computed property using filterBy decorator
+
+
+  get unpinnedTasks() {
+    /**
+     * Filter unpinned tasks from tasks model
+     * returns @computed property : all task where isPinned key doesn't exit or it's value is false
+     */
+    return [...this.model.filterBy('isPinned', undefined),
+      ...this.model.filterBy('isPinned', false)];
+  }
 }
diff --git a/app/templates/index.hbs b/app/templates/index.hbs
index 1b7635c..579efd2 100644
--- a/app/templates/index.hbs
+++ b/app/templates/index.hbs
@@ -1,31 +1,12 @@
 <h1>Task List</h1>
 <h4>Pinned Task</h4>
-{{#if this.pinnedTask}}
-  <div class="list-group-item {{if this.pinnedTask.isComplete "is-complete"}}">
-    <div class="d-flex">
-      <h5 class="card-title flex-fill">
-        {{this.pinnedTask.name}}
-      </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}}
-        </div>
-      </div>
-    </div>
-    <div class="task-description">
-      {{this.pinnedTask.description}}
-    </div>
-  </div>
+{{#if this.pinnedTasks}}
+  <TaskList @tasks={{this.pinnedTasks}} @toggleTaskPin={{this.toggleTaskPin}} />
 {{else}}
   No Pinned Tasks
 {{/if}}
 <h4>Other Tasks</h4>
-<TaskList @tasks={{this.model}} @toggleTaskPin={{this.toggleTaskPin}}/>
+<TaskList @tasks={{this.unpinnedTasks}} @toggleTaskPin={{this.toggleTaskPin}}/>
 
 <nav class="navbar navbar-light bg-light">
   <span class="navbar-text">

From 2c6ffa0ad3754f5cb6efe31543da0f990c8daf1f Mon Sep 17 00:00:00 2001
From: mimidots <murage@labskenya.com>
Date: Mon, 11 Jan 2021 06:17:07 +0300
Subject: [PATCH 3/4] - Added computed property on index controller to
 calculate number of completed tasks

---
 app/controllers/index.js | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/app/controllers/index.js b/app/controllers/index.js
index 5c38045..248c067 100644
--- a/app/controllers/index.js
+++ b/app/controllers/index.js
@@ -4,7 +4,7 @@ import {filterBy} from '@ember/object/computed';
 
 export default class IndexController extends Controller {
 
-  isPinnedTask=false;
+  isPinnedTask = false;
 
   @action
   toggleTaskPin(task) {
@@ -22,4 +22,12 @@ export default class IndexController extends Controller {
     return [...this.model.filterBy('isPinned', undefined),
       ...this.model.filterBy('isPinned', false)];
   }
+
+  get completedTasks() {
+    /**
+     * Get the total count of completed tasks
+     * returns @number: count of all tasks marked as complete
+     */
+    return this.model.filterBy('isComplete').length;
+  }
 }

From b8295e77e9739c062573c78399f76155ff1084e5 Mon Sep 17 00:00:00 2001
From: mimidots <murage@labskenya.com>
Date: Mon, 11 Jan 2021 06:33:20 +0300
Subject: [PATCH 4/4] - To minimize bugs, promote re-usability and DRY
 principle, the toggle button should not modify the data directly through
 actions. The action should reside on SingleTask component layer since it owns
 the data.

---
 app/components/single-task.hbs     |  9 ++++-----
 app/components/single-task.js      | 11 +++++++++--
 app/components/toggle-complete.hbs |  4 ++++
 3 files changed, 17 insertions(+), 7 deletions(-)
 create mode 100644 app/components/toggle-complete.hbs

diff --git a/app/components/single-task.hbs b/app/components/single-task.hbs
index b8d2e85..5208db9 100644
--- a/app/components/single-task.hbs
+++ b/app/components/single-task.hbs
@@ -8,11 +8,10 @@
         <BsButton @type="secondary" {{on "click" (fn @toggleTaskPin this.task)}}>
           {{if this.task.isPinned "Unpin" "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}}
+
+        <ToggleComplete @toggleComplete={{this.toggleComplete}} @isComplete={{this.task.isComplete}}>
+        </ToggleComplete>
+
       </div>
     </div>
   </div>
diff --git a/app/components/single-task.js b/app/components/single-task.js
index 30b0515..4a2891e 100644
--- a/app/components/single-task.js
+++ b/app/components/single-task.js
@@ -1,7 +1,14 @@
 import Component from '@ember/component';
-import { tagName } from '@ember-decorators/component';
+import {tagName} from '@ember-decorators/component';
+import {action} from '@ember/object';
 
-export default 
+export default
 @tagName('')
 class SingleTaskComponent extends Component {
+
+  @action
+  toggleComplete(complete) {
+    this.task.isComplete = !complete;
+  }
+
 }
diff --git a/app/components/toggle-complete.hbs b/app/components/toggle-complete.hbs
new file mode 100644
index 0000000..50c06ad
--- /dev/null
+++ b/app/components/toggle-complete.hbs
@@ -0,0 +1,4 @@
+
+<BsButton @type="primary" {{on "click" (fn @toggleComplete @isComplete)}}>
+  {{if @isComplete "Undo" "Done"}}
+</BsButton>