Keithkiarie 2021

.gitignore

@@ -23,3 +23,4 @@
 /.node_modules.ember-try/
 /bower.json.ember-try
 /package.json.ember-try
+package-lock.json

app/components/single-task.hbs

@@ -5,7 +5,8 @@
     </h5>
     <div class="toggle-done ml-auto">
       <div class="btn-group btn-group-sm" role="group">
-        <BsButton @type="secondary">Pin</BsButton>
+        <ToggleComplete @onToggled={{action "toggle_task"}}/>
+        <BsButton @type="secondary" onClick={{action "pin_task"}}>Pin</BsButton>
         {{#if this.task.isComplete}}
           <BsButton @type="primary" onClick={{action (mut this.task.isComplete) false}}>Undo</BsButton>
         {{else}}

app/components/single-task.js

@@ -1,7 +1,18 @@
 import Component from '@ember/component';
-import { tagName } from '@ember-decorators/component';
+import {
+  action
+} from '@ember/object';
+
+export default
 
-export default 
-@tagName('')
 class SingleTaskComponent extends Component {
+  @action
+  pin_task() {
+    this.onSentUp(this.task);
+  }
+
+  @action
+  toggle_task() {
+    this.task.isComplete = !this.task.isComplete;
+  }
 }

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 @onSentUp={{action "receivedAction"}} @task={{task}} />
     {{/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
+    receivedAction() {
+        this.onSentUp(arguments[0]);
+    }
 }

app/components/toggle-complete.hbs

@@ -0,0 +1 @@
+<button onClick={{action "toggled"}}>Toggle</button>

app/components/toggle-complete.js

@@ -0,0 +1,12 @@
+import Component from '@ember/component';
+import {
+  action
+} from '@ember/object';
+
+export default
+class TaskListComponent extends Component {
+    @action
+    toggled() {
+        this.onToggled();
+    }
+}

app/controllers/index.js

@@ -1,4 +1,17 @@
 import Controller from '@ember/controller';
+import {
+  action
+} from '@ember/object';
+import { computed } from '@ember/object';
 
 export default class IndexController extends Controller {
+    @action
+    pinned() {
+        this.set('pinnedTask', arguments[0]);
+    }
+
+    @computed('[email protected]')
+    get completedTasks() {
+        return this.model.filterBy('isComplete', true).length;
+    }
 }

app/templates/index.hbs

@@ -8,11 +8,11 @@
       </h5>
       <div class="toggle-done ml-auto">
         <div class="btn-group btn-group-sm" role="group">
-          <BsButton @type="secondary">Unpin</BsButton>
+          <BsButton @type="secondary" onClick={{action (mut this.pinnedTask) false}}>Unpin</BsButton>
           {{#if this.pinnedTask.isComplete}}
-            <BsButton @type="primary">Undo</BsButton>
+            <BsButton @type="primary" onClick={{action (mut this.pinnedTask.isComplete) false}}>Undo</BsButton>
           {{else}}
-            <BsButton @type="primary">Done</BsButton>
+            <BsButton @type="primary" onClick={{action (mut this.pinnedTask.isComplete) true}}>Done</BsButton>
           {{/if}}
         </div>
       </div>
@@ -25,7 +25,7 @@
   No Pinned Tasks
 {{/if}}
 <h4>Other Tasks</h4>
-<TaskList @tasks={{this.model}} />
+<TaskList @onSentUp={{action "pinned"}} @tasks={{this.model}} />
 
 <nav class="navbar navbar-light bg-light">
   <span class="navbar-text">

package.json

@@ -18,38 +18,38 @@
     "test": "ember test"
   },
   "devDependencies": {
-    "@ember/edition-utils": "^1.1.1",
-    "@ember/optional-features": "^1.0.0",
+    "@ember/edition-utils": "^1.2.0",
+    "@ember/optional-features": "^1.3.0",
     "@glimmer/component": "^0.14.0-alpha.12",
-    "babel-eslint": "^10.0.2",
-    "bootstrap": "^4.3.1",
+    "babel-eslint": "^10.1.0",
+    "bootstrap": "^4.5.3",
     "broccoli-asset-rev": "^3.0.0",
-    "ember-auto-import": "^1.2.20",
-    "ember-bootstrap": "^3.0.0",
-    "ember-cli": "^3.23.0",
+    "ember-auto-import": "^1.10.1",
+    "ember-bootstrap": "^3.1.4",
+    "ember-cli": "^3.24.0",
     "ember-cli-app-version": "^3.2.0",
-    "ember-cli-babel": "^7.11.1",
+    "ember-cli-babel": "^7.23.0",
     "ember-cli-dependency-checker": "^3.1.0",
-    "ember-cli-htmlbars": "^4.0.0",
+    "ember-cli-htmlbars": "^4.4.0",
     "ember-cli-inject-live-reload": "^2.0.1",
     "ember-cli-sri": "^2.1.1",
     "ember-cli-uglify": "^3.0.0",
-    "ember-data": "~3.13.0",
-    "ember-export-application-global": "^2.0.0",
-    "ember-load-initializers": "^2.0.0",
+    "ember-data": "^3.13.3",
+    "ember-export-application-global": "^2.0.1",
+    "ember-load-initializers": "^2.1.2",
     "ember-maybe-import-regenerator": "^0.1.6",
-    "ember-qunit": "^4.4.1",
+    "ember-qunit": "^4.6.0",
     "ember-resolver": "^5.1.3",
     "ember-source": "https://s3.amazonaws.com/builds.emberjs.com/beta/shas/6e99174bb69b4670f65a58cf8c436210d38ffebb.tgz",
-    "ember-template-lint": "^1.5.0",
+    "ember-template-lint": "^1.14.0",
     "ember-welcome-page": "^4.0.0",
-    "eslint": "^6.1.0",
-    "eslint-plugin-ember": "^7.1.0",
+    "eslint": "^6.8.0",
+    "eslint-plugin-ember": "^7.13.0",
     "eslint-plugin-node": "^10.0.0",
     "loader.js": "^4.7.0",
-    "qunit-dom": "^0.9.0"
+    "qunit-dom": "^0.9.2"
   },
   "engines": {
     "node": "8.* || >= 10.*"
   }
-}
+}

tests/integration/components/toggle-complete-test.js

@@ -0,0 +1,26 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Component | toggle-complete', function(hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function(assert) {
+    // Set any properties with this.set('myProperty', 'value');
+    // Handle any actions with this.set('myAction', function(val) { ... });
+
+    await render(hbs`<ToggleComplete />`);
+
+    assert.equal(this.element.textContent.trim(), '');
+
+    // Template block usage:
+    await render(hbs`
+      <ToggleComplete>
+        template block text
+      </ToggleComplete>
+    `);
+
+    assert.equal(this.element.textContent.trim(), 'template block text');
+  });
+});