diff --git a/app/components/single-task.hbs b/app/components/single-task.hbs index d644ec8..0c0e9db 100644 --- a/app/components/single-task.hbs +++ b/app/components/single-task.hbs @@ -5,12 +5,11 @@
- Pin - {{#if this.task.isComplete}} - Undo - {{else}} - Done - {{/if}} + + {{if this.isPinned "Pinned" "Pin"}} + + +
diff --git a/app/components/single-task.js b/app/components/single-task.js index 30b0515..8c04081 100644 --- a/app/components/single-task.js +++ b/app/components/single-task.js @@ -1,7 +1,26 @@ -import Component from '@ember/component'; -import { tagName } from '@ember-decorators/component'; +import Component from "@ember/component"; +import { tagName } from "@ember-decorators/component"; +import { tracked } from "@glimmer/tracking"; +import { action } from "@ember/object"; -export default -@tagName('') +export default +@tagName("") class SingleTaskComponent extends Component { + @tracked isPinned = false; + + @action + togglePinned() { + if (this.isPinned) { + this.setPinned(null); + this.isPinned = false; + } else { + this.setPinned(this.task); + this.isPinned = true; + } + } + + @action + toggleComplete() { + this.task.isComplete = !this.task.isComplete; + } } diff --git a/app/components/task-list.hbs b/app/components/task-list.hbs index 41b6c7c..97ef85b 100644 --- a/app/components/task-list.hbs +++ b/app/components/task-list.hbs @@ -1,7 +1,7 @@
\ No newline at end of file diff --git a/app/components/toggle-complete.hbs b/app/components/toggle-complete.hbs new file mode 100644 index 0000000..4db5362 --- /dev/null +++ b/app/components/toggle-complete.hbs @@ -0,0 +1,3 @@ + + {{if this.isComplete "Undo" "Done"}} + \ No newline at end of file diff --git a/app/components/toggle-complete.js b/app/components/toggle-complete.js new file mode 100644 index 0000000..0afa15e --- /dev/null +++ b/app/components/toggle-complete.js @@ -0,0 +1,6 @@ +import Component from "@ember/component"; +import { tagName } from "@ember-decorators/component"; + +export default +@tagName("") +class ToggleCompleteComponent extends Component {} diff --git a/app/controllers/index.js b/app/controllers/index.js index 78d8779..6c095b5 100644 --- a/app/controllers/index.js +++ b/app/controllers/index.js @@ -1,4 +1,16 @@ -import Controller from '@ember/controller'; +import Controller from "@ember/controller"; +import { tracked } from "@glimmer/tracking"; +import { action } from "@ember/object"; export default class IndexController extends Controller { + @tracked pinnedTask = null; + + get completedTasks() { + return this.model.filter((task) => task.isComplete).length; + } + + @action + setPinned(task) { + this.pinnedTask = task; + } } diff --git a/app/templates/index.hbs b/app/templates/index.hbs index 13a70b0..7159cd8 100644 --- a/app/templates/index.hbs +++ b/app/templates/index.hbs @@ -1,31 +1,29 @@

Task List

Pinned Task

{{#if this.pinnedTask}} -
-
-
- {{this.pinnedTask.name}} -
-
-
- Unpin - {{#if this.pinnedTask.isComplete}} - Undo - {{else}} - Done - {{/if}} -
+
+
+
+ {{this.pinnedTask.name}} +
+
+
+ + {{if this.pinnedTask.isComplete "Complete" "Incomplete"}} +
-
- {{this.pinnedTask.description}} -
+
+ {{this.pinnedTask.description}} +
+
{{else}} - No Pinned Tasks +No Pinned Tasks {{/if}}

Other Tasks

- + +