diff --git a/app/components/single-task.hbs b/app/components/single-task.hbs
index d644ec8..1b2af5c 100644
--- a/app/components/single-task.hbs
+++ b/app/components/single-task.hbs
@@ -5,12 +5,12 @@
- Pin
- {{#if this.task.isComplete}}
- Undo
- {{else}}
- Done
- {{/if}}
+
+ {{if this.isPinned "Unpin" "Pin"}}
+
+
+ {{if this.task.isComplete "Undo" "Done"}}
+
diff --git a/app/components/single-task.js b/app/components/single-task.js
index 30b0515..73efb15 100644
--- a/app/components/single-task.js
+++ b/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;
+ }
}
diff --git a/app/components/task-list.hbs b/app/components/task-list.hbs
index 41b6c7c..7489d36 100644
--- a/app/components/task-list.hbs
+++ b/app/components/task-list.hbs
@@ -1,7 +1,9 @@
{{#each this.tasks as |task|}}
-
+ {{#if task.isNotPinned }}
+
+ {{/if}}
{{/each}}
\ No newline at end of file
diff --git a/app/components/task-list.js b/app/components/task-list.js
index d02703f..9aadbe2 100644
--- a/app/components/task-list.js
+++ b/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]);
+ }
}
diff --git a/app/components/toggle-complete.hbs b/app/components/toggle-complete.hbs
new file mode 100644
index 0000000..42d0f77
--- /dev/null
+++ b/app/components/toggle-complete.hbs
@@ -0,0 +1,3 @@
+
+ {{yield}}
+
diff --git a/app/controllers/index.js b/app/controllers/index.js
index 78d8779..07d34ce 100644
--- a/app/controllers/index.js
+++ b/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("model.@each.isComplete")
+ get completedTasks() {
+ return this.model.filterBy('isComplete', true).length;
+ }
}
diff --git a/app/models/task.js b/app/models/task.js
index 41d4ce9..378eaf1 100644
--- a/app/models/task.js
+++ b/app/models/task.js
@@ -10,4 +10,7 @@ export default class TaskModel extends Model {
@attr('boolean')
isComplete
+
+ @attr('boolean', { defaultValue: true })
+ isNotPinned
}
diff --git a/app/templates/index.hbs b/app/templates/index.hbs
index 13a70b0..9ef229b 100644
--- a/app/templates/index.hbs
+++ b/app/templates/index.hbs
@@ -1,31 +1,12 @@
Task List
Pinned Task
{{#if this.pinnedTask}}
-
-
-
- {{this.pinnedTask.name}}
-
-
-
- Unpin
- {{#if this.pinnedTask.isComplete}}
- Undo
- {{else}}
- Done
- {{/if}}
-
-
-
-
- {{this.pinnedTask.description}}
-
-
+
{{else}}
No Pinned Tasks
{{/if}}
Other Tasks
-
+