diff --git a/app/components/single-task.hbs b/app/components/single-task.hbs index d644ec8..cbb24f0 100644 --- a/app/components/single-task.hbs +++ b/app/components/single-task.hbs @@ -5,12 +5,9 @@
- Pin - {{#if this.task.isComplete}} - Undo - {{else}} - Done - {{/if}} + Pin + +
diff --git a/app/components/single-task.js b/app/components/single-task.js index 30b0515..ddcf20d 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 { action } from '@ember/object'; export default @tagName('') class SingleTaskComponent extends Component { + + // Action for toggling the isComplete property between false and true + @action + taskComplete(){ + this.task.isComplete = !this.task.isComplete + } } diff --git a/app/components/task-list.hbs b/app/components/task-list.hbs index 41b6c7c..663860d 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..601f1d0 --- /dev/null +++ b/app/components/toggle-complete.hbs @@ -0,0 +1 @@ + \ 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..33a9bb5 --- /dev/null +++ b/app/components/toggle-complete.js @@ -0,0 +1,11 @@ +import Component from '@glimmer/component'; +import { action } from '@ember/object'; + +export default class ToggleCompleteComponent extends Component { + + @action + onclick(){ + this.args.onChange() + + } +} diff --git a/app/controllers/index.js b/app/controllers/index.js index 78d8779..f8eeff7 100644 --- a/app/controllers/index.js +++ b/app/controllers/index.js @@ -1,4 +1,36 @@ import Controller from '@ember/controller'; +import { tracked } from '@glimmer/tracking'; +import { action,computed,set } from '@ember/object'; + export default class IndexController extends Controller { + // Tracking the pinnedTrack object + @tracked pinnedTask; + + // Action that gets a task from the single task component after the user pins the task + @action + pinTask(task) { + this.pinnedTask = task.toJSON(); + } + + // Action that toggles the is complete property between true and false + @action + taskCompleted(){ + + if (this.pinnedTask.isComplete == false ){ + + set(this.pinnedTask,"isComplete", true) + + } else{ + + set(this.pinnedTask,"isComplete", false) + } + } + + // Computed property that automatically counts the number of completed tasks + @computed('model.@each.isComplete') + get completedTasks() { + const n = this.model.filterBy('isComplete', true).get('length'); + return n + } } diff --git a/app/templates/index.hbs b/app/templates/index.hbs index 13a70b0..df281b1 100644 --- a/app/templates/index.hbs +++ b/app/templates/index.hbs @@ -8,12 +8,10 @@
- Unpin - {{#if this.pinnedTask.isComplete}} - Undo - {{else}} - Done - {{/if}} + Unpin + + +
@@ -25,7 +23,7 @@ No Pinned Tasks {{/if}}

Other Tasks

- +