Ember Frontend Developer Challenge

app/components/single-task.hbs

@@ -5,12 +5,12 @@
     </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' this.togglePin}}>
+          {{if this.isPinned "Unpin" "Pin"}}
+        </BsButton>
+        <ToggleComplete @onToggle={{this.toggleComplete}}>
+          {{if this.task.isComplete "Undo" "Done"}}
+        </ToggleComplete>
       </div>
     </div>
   </div>

app/components/single-task.js

@@ -1,7 +1,27 @@
 import Component from '@ember/component';
 import { tagName } from '@ember-decorators/component';
+import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
 
 export default 
 @tagName('')
 class SingleTaskComponent extends Component {
+    @tracked isPinned;
+
+    constructor() {
+        super(...arguments);
+        this.isPinned = false;
+    }
+
+    @action
+    togglePin() {
+        this.isPinned = !this.isPinned;
+        this.task.isNotPinned = !this.isPinned;
+        this.onPinSentUp(this.task);
+    }
+
+    @action
+    toggleComplete() {
+        this.task.isComplete = !this.task.isComplete;
+    }
 }

app/components/task-list.hbs

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

app/components/task-list.js

@@ -1,7 +1,12 @@
 import Component from '@ember/component';
 import { tagName } from '@ember-decorators/component';
+import { action } from '@ember/object';
 
 export default
 @tagName('')
 class TaskListComponent extends Component {
+    @action
+    receivedPinAction() {
+        this.onPinSentUp(arguments[0]);
+    }
 }

app/components/toggle-complete.hbs

@@ -0,0 +1,3 @@
+<BsButton @type="primary" {{on 'click' @onToggle}}>
+  {{yield}}
+</BsButton>

app/controllers/index.js

@@ -1,4 +1,24 @@
 import Controller from '@ember/controller';
+import { action, computed } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
 
 export default class IndexController extends Controller {
+    @tracked pinnedTask = null;
+
+    @action
+    receivedPinAction() {
+        if(this.pinnedTask == null) { // pin a task if there is no current pinned task
+            this.pinnedTask = arguments[0];
+        } else if(this.pinnedTask.id == arguments[0].id){ // unpinning a task
+            this.pinnedTask = null;
+        } else { // replacing the current pinned task
+            this.pinnedTask.isNotPinned = true;
+            this.pinnedTask = arguments[0];
+        }
+    }
+
+    @computed("[email protected]")
+    get completedTasks() {
+        return this.model.filterBy('isComplete', true).length;
+    }
 }

app/models/task.js

@@ -10,4 +10,7 @@ export default class TaskModel extends Model {
 
   @attr('boolean')
   isComplete
+
+  @attr('boolean', { defaultValue: true })
+  isNotPinned
 }

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>
+  <SingleTask @isPinned={{true}} @task={{this.pinnedTask}} @onPinSentUp={{this.receivedPinAction}}/>
 {{else}}
   No Pinned Tasks
 {{/if}}
 <h4>Other Tasks</h4>
-<TaskList @tasks={{this.model}} />
+<TaskList @tasks={{this.model}} @onPinSentUp={{this.receivedPinAction}}/>
 
 <nav class="navbar navbar-light bg-light">
   <span class="navbar-text">