Refactor skills-list

app/components/skills-input.js → app/components/skills-typeahead.js

@@ -14,8 +14,8 @@ const {
 } = Ember;
 
 export default Component.extend({
-  classNames: ['skills-input'],
-  classNameBindings: ['centered:skills-input--centered'],
+  classNames: ['skills-typeahead'],
+  classNameBindings: ['centered:skills-typeahead--centered'],
   cursorAt: 0,
   cursorWas: 0,
   hidden: true,

app/services/project-skills-list.js

@@ -1,5 +1,5 @@
 import Ember from 'ember';
-import skillsList from 'code-corps-ember/utils/skills-list';
+import recordsList from 'code-corps-ember/utils/records-list';
 
 const {
   computed: {
@@ -24,12 +24,12 @@ export default Service.extend({
 
   contains(skill) {
     let projectSkills = get(this, 'projectSkills');
-    return skillsList.contains(projectSkills, skill);
+    return recordsList.contains(projectSkills, skill);
   },
 
   find(skill) {
     let { projectSkills, project } = getProperties(this, 'projectSkills', 'project');
-    return skillsList.find(projectSkills, skill, project);
+    return recordsList.find(projectSkills, skill, project);
   },
 
   remove(skill) {
@@ -44,8 +44,7 @@ export default Service.extend({
 
   toggle(skill) {
     let projectSkills = get(this, 'projectSkills');
-
-    if (skillsList.contains(projectSkills, skill)) {
+    if (recordsList.contains(projectSkills, skill)) {
       return this.remove(skill);
     } else {
       return this.add(skill);

app/services/user-skills-list.js

@@ -1,5 +1,5 @@
 import Ember from 'ember';
-import skillsList from 'code-corps-ember/utils/skills-list';
+import recordsList from 'code-corps-ember/utils/records-list';
 
 const {
   computed: {
@@ -26,24 +26,22 @@ export default Service.extend({
 
   contains(skill) {
     let userSkills = get(this, 'userSkills');
-    return skillsList.contains(userSkills, skill);
+    return recordsList.contains(userSkills, skill);
   },
 
   find(skill) {
-    let userSkills = get(this, 'userSkills');
-    let user = get(this, 'user');
-    return skillsList.find(userSkills, skill, user);
+    let { userSkills, user } = getProperties(this, 'userSkills', 'user');
+    return recordsList.find(userSkills, skill, user);
   },
 
   remove(skill) {
-    let { userSkills, user } = getProperties(this, 'userSkills', 'user');
-    let userSkill = skillsList.find(userSkills, skill, user);
+    let userSkill = this.find(skill);
     return userSkill.destroyRecord();
   },
 
   toggle(skill) {
     let userSkills = get(this, 'userSkills');
-    if (skillsList.contains(userSkills, skill)) {
+    if (recordsList.contains(userSkills, skill)) {
       return this.remove(skill);
     } else {
       return this.add(skill);

app/styles/app.scss

@@ -85,7 +85,7 @@
 @import "components/user-menu";
 @import "components/user-organizations-list";
 @import "components/user-sidebar";
-@import "components/skills-input";
+@import "components/skills-typeahead";
 
 @import "templates/about";
 @import "templates/project/index";

app/styles/components/skills-input.scss → app/styles/components/skills-typeahead.scss

@@ -1,15 +1,15 @@
-.skills-input-container {
+.skills-typeahead-container {
   @include span-columns(12);
 
   margin-top: 15px;
   margin-bottom: 30px;
 }
 
-.skills-input-area {
+.skills-typeahead-area {
 
 }
 
-.skills-input {
+.skills-typeahead {
   &--centered {
     margin: 0 auto;    
   }

app/templates/components/skills-typeahead.hbs

@@ -0,0 +1,22 @@
+{{skill-textfield
+  autofocus=true
+  focus-in="focus"
+  focus-out="blur"
+  getKeyDown=(action "getKeyDown")
+  placeholder="Start typing a skill, like Ruby or PhotoShop"
+  value=query
+}}
+
+{{#if canShow}}
+  <div class="dropdown-menu">
+    {{#each results as |skill index|}}
+      {{skills-typeahead-result
+        hover="hoverSkill"
+        query=query
+        selectSkill="selectSkill"
+        skill=skill
+        skillsList=skillsList
+      }}
+    {{/each}}
+  </div>
+{{/if}}

app/templates/project/settings/profile.hbs

@@ -21,8 +21,8 @@
   {{/each}}
   </div>
 
-  <div class="skills-input-container">
-  {{skills-input
+  <div class="skills-typeahead-container">
+  {{skills-typeahead
     centered=true
     selectSkill=(action toggleSkill)
     skillsList=projectSkillsList

app/templates/start/skills.hbs

@@ -17,8 +17,8 @@
   {{/each}}
   </div>
 
-  <div class="skills-input-container">
-    {{skills-input
+  <div class="skills-typeahead-container">
+    {{skills-typeahead
       centered=true
       selectSkill=(action selectSkill)
       skillsList=userSkillsList

app/utils/records-list.js

@@ -0,0 +1,70 @@
+import Ember from 'ember';
+
+const { get } = Ember;
+
+export default {
+  /**
+    Returns `true` or `false` depending on whether an array of models contains
+    the target model instance.
+    @method contains
+    @param {[DS.Model]} records The records to search
+    @param {DS.Model} target The target model
+    @return {Boolean} `true` if found, otherwise `false`
+    @public
+  */
+  contains(records, target) {
+    if (records) {
+      return records.any((found) => {
+        let targetId = get(target, 'id');
+        let targetModelName = get(target, 'constructor.modelName')
+                              || get(target, 'content.constructor.modelName');
+        let foundId = found.belongsTo(targetModelName).id();
+
+        return (foundId === targetId);
+      });
+    } else {
+      false;
+    }
+  },
+
+  /**
+    Returns the first record within an array of join model relationships
+    for the given target and relationship. For example given `user-skill`
+    records, we can pass in a `skill` as `target` and a `user` as the
+    relationship.
+    @method find
+    @param {[DS.Model]} records The relationship records to search
+    @param {DS.Model} target The target model
+    @param {DS.Model} relationship The relationship model
+    @return {DS.Model} Found item or `undefined`
+    @public
+  */
+  find(records, target, relationship) {
+    if (records) {
+      return records.find((found) => {
+        // Get relationship id and model name
+        let relationshipId = get(relationship, 'id');
+        let relationshipModelName = get(relationship, 'constructor.modelName')
+                                 || get(relationship, 'content.constructor.modelName');
+
+        // Get target id and model name
+        let targetId = get(target, 'id');
+        let targetModelName = get(target, 'constructor.modelName')
+                           || get(target, 'content.constructor.modelName');
+
+        // Exit early with `false` if we're missing values
+        if (!(relationshipId && relationshipModelName && targetId && targetModelName)) {
+          return false;
+        }
+
+        // Get the id of the found model instance and
+        // get the id of the found model's relationship model instance
+        let foundId = found.belongsTo(targetModelName).id();
+        let foundRelationshipId = found.belongsTo(relationshipModelName).id();
+
+        return (foundRelationshipId === relationshipId) // relationships match
+            && (foundId === targetId); // found matches target
+      });
+    }
+  }
+};

tests/acceptance/onboarding-test.js

@@ -96,13 +96,13 @@ test('A user can onboard as expected', function(assert) {
 
   andThen(() => {
     assert.equal(currentURL(), '/start/skills');
-    onboardingPage.skillsInput.fillIn('ru');
+    onboardingPage.skillsTypeahead.fillIn('ru');
   });
 
   andThen(() => {
-    onboardingPage.skillsInput.focus();
-    assert.equal(onboardingPage.skillsInput.inputItems(0).text, 'Ruby');
-    onboardingPage.skillsInput.inputItems(0).click();
+    onboardingPage.skillsTypeahead.focus();
+    assert.equal(onboardingPage.skillsTypeahead.inputItems(0).text, 'Ruby');
+    onboardingPage.skillsTypeahead.inputItems(0).click();
   });
 
   andThen(() => {
@@ -112,13 +112,13 @@ test('A user can onboard as expected', function(assert) {
 
   andThen(() => {
     assert.equal(onboardingPage.userSkillsList().count, 0);
-    onboardingPage.skillsInput.fillIn('r');
+    onboardingPage.skillsTypeahead.fillIn('r');
   });
 
   andThen(() => {
-    onboardingPage.skillsInput.focus();
-    assert.equal(onboardingPage.skillsInput.inputItems(0).text, 'Ruby');
-    onboardingPage.skillsInput.inputItems(0).click();
+    onboardingPage.skillsTypeahead.focus();
+    assert.equal(onboardingPage.skillsTypeahead.inputItems(0).text, 'Ruby');
+    onboardingPage.skillsTypeahead.inputItems(0).click();
   });
 
   andThen(() => {

tests/acceptance/project-settings-test.js

@@ -120,14 +120,14 @@ test("it allows editing of project's skills", function(assert) {
   });
 
   andThen(() => {
-    projectSettingsPage.skillsInput.fillIn('ru');
+    projectSettingsPage.skillsTypeahead.fillIn('ru');
   });
 
   andThen(() => {
     assert.equal(currentURL(), `${project.organization.slug}/${project.slug}/settings/profile`);
-    projectSettingsPage.skillsInput.focus();
-    assert.equal(projectSettingsPage.skillsInput.inputItems(0).text, 'Ruby');
-    projectSettingsPage.skillsInput.inputItems(0).click();
+    projectSettingsPage.skillsTypeahead.focus();
+    assert.equal(projectSettingsPage.skillsTypeahead.inputItems(0).text, 'Ruby');
+    projectSettingsPage.skillsTypeahead.inputItems(0).click();
   });
 
   andThen(() => {

tests/integration/components/skills-input-item-test.js → tests/integration/components/skills-typeahead-result-test.js

@@ -2,11 +2,11 @@ import { moduleForComponent, test } from 'ember-qunit';
 import hbs from 'htmlbars-inline-precompile';
 import Ember from 'ember';
 import PageObject from 'ember-cli-page-object';
-import skillsInputItemComponent from '../../pages/components/skills-input-item';
+import skillsTypeaheadResultComponent from '../../pages/components/skills-typeahead-result';
 
 const { Object, set } = Ember;
 
-let page = PageObject.create(skillsInputItemComponent);
+let page = PageObject.create(skillsTypeaheadResultComponent);
 
 let skill = Object.create({
   selected: true,
@@ -24,7 +24,7 @@ let userSkillsList = {
   }
 };
 
-moduleForComponent('skills-input-item', 'Integration | Component | skills input item', {
+moduleForComponent('skills-typeahead-result', 'Integration | Component | skills input item', {
   integration: true,
   beforeEach() {
     this.set('userSkillsList', userSkillsList);
@@ -44,7 +44,7 @@ test('it renders as selected with the highlighted string', function(assert) {
   set(this, 'query', query);
 
   page.render(hbs`
-    {{skills-input-item
+    {{skills-typeahead-result
       query=query
       skill=skill
       skillsList=userSkillsList
@@ -68,7 +68,7 @@ test('it sends the hover action on mouseEnter', function(assert) {
     assert.deepEqual(skill, hoveredSkill);
   });
   page.render(hbs`
-    {{skills-input-item
+    {{skills-typeahead-result
       hover="hover"
       query=query
       skill=skill
@@ -89,7 +89,7 @@ test('it sends the selectSkill action on mouseDown', function(assert) {
   });
 
   page.render(hbs`
-    {{skills-input-item
+    {{skills-typeahead-result
       hover="hover"
       query=query
       selectSkill=selectSkill