Frontend Developer Challenge

.gitignore

@@ -23,3 +23,6 @@
 /.node_modules.ember-try/
 /bower.json.ember-try
 /package.json.ember-try
+
+
+/.idea/

app/components/single-task.hbs

@@ -5,12 +5,13 @@
     </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" {{on "click" (fn @toggleTaskPin this.task)}}>
+          {{if this.task.isPinned "Unpin" "Pin" }}
+        </BsButton>
+
+        <ToggleComplete @toggleComplete={{this.toggleComplete}} @isComplete={{this.task.isComplete}}>
+        </ToggleComplete>
+
       </div>
     </div>
   </div>

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;
+  }
+
 }

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>

app/components/toggle-complete.hbs

@@ -0,0 +1,4 @@
+
+<BsButton @type="primary" {{on "click" (fn @toggleComplete @isComplete)}}>
+  {{if @isComplete "Undo" "Done"}}
+</BsButton>

app/controllers/index.js

@@ -1,4 +1,33 @@
 import Controller from '@ember/controller';
+import {action} from '@ember/object';
+import {filterBy} from '@ember/object/computed';
 
 export default class IndexController extends Controller {
+
+  isPinnedTask = false;
+
+  @action
+  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)];
+  }
+
+  get completedTasks() {
+    /**
+     * Get the total count of completed tasks
+     * returns @number: count of all tasks marked as complete
+     */
+    return this.model.filterBy('isComplete').length;
+  }
 }

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}} />
+<TaskList @tasks={{this.unpinnedTasks}} @toggleTaskPin={{this.toggleTaskPin}}/>
 
 <nav class="navbar navbar-light bg-light">
   <span class="navbar-text">

package.json

@@ -52,4 +52,4 @@
   "engines": {
     "node": "8.* || >= 10.*"
   }
-}
+}