show skills on edit profile

Author: thabofletcher

app/services/profile.service.js

@@ -14,6 +14,7 @@
       getUserProfile: getUserProfile,
       updateUserProfile: updateUserProfile,
       getUserSkills: getUserSkills,
+      addUserSkill: addUserSkill,
       getUserFinancials: getUserFinancials,
       getUserStats: getUserStats,
       getDistributionStats: getDistributionStats,
@@ -41,6 +42,12 @@
     function getUserSkills(username) {
       return restangular.one('members', username).one('skills').get();
     }
+    
+    function addUserSkill(username, skillTagId) {
+      var body = {};
+      body[skillTagId] = { 'hidden': false };
+      return restangular.one('members', username).one('skills').patch(JSON.stringify(body));
+    }
 
     function getUserFinancials(username) {
       return restangular.one('members', username).one('financial').get();

app/settings/edit-profile/edit-profile.controller.js

@@ -3,14 +3,17 @@
 
   angular.module('tc.settings').controller('EditProfileController', EditProfileController);
 
-  EditProfileController.$inject = ['userData', 'userHandle', 'ProfileService', '$log', 'ISO3166', 'ImageService', '$rootScope', 'CONSTANTS'];
+  EditProfileController.$inject = ['userData', 'userHandle', 'ProfileService', '$log', 'ISO3166', 'ImageService', '$rootScope', 'CONSTANTS', 'TagsService'];
 
-  function EditProfileController(userData, userHandle, ProfileService, $log, ISO3166, ImageService, $rootScope, CONSTANTS) {
+  function EditProfileController(userData, userHandle, ProfileService, $log, ISO3166, ImageService, $rootScope, CONSTANTS, TagsService) {
     var vm = this;
     vm.toggleTrack    = toggleTrack;
     vm.updateCountry  = updateCountry;
     vm.onFileChange   = onFileChange;
     vm.updateProfile  = updateProfile;
+    vm.skills = false;
+    vm.addSkill = addSkill;
+    vm.tags = [];
 
     activate();
 
@@ -19,7 +22,28 @@
       vm.countryObj = ISO3166.getCountryObjFromAlpha3(userData.competitionCountryCode);
 
       processData(userData);
-      vm.userData = userData
+      vm.userData = userData;
+      
+      TagsService.getApprovedSkillTags()
+      .then(function(tags) {
+        vm.tags = tags;
+      })
+      .catch(function(err) {
+        $log.error(err);
+      });
+
+      ProfileService.getUserSkills(vm.userData.handle)
+      .then(function(skills) {
+        vm.skills = skills.skills;
+      })
+      .catch(function(err) {
+        $log.error(err);
+      });
+    }
+    
+    function addSkill(skill) {
+      var skillTagId = _.get(skill, 'originalObject.id');
+      ProfileService.addUserSkill(vm.userData.handle, skillTagId);
     }
 
     function updateCountry(angucompleteCountryObj) {

app/settings/edit-profile/edit-profile.jade

@@ -85,9 +85,29 @@
               p Find challenges about data and algorithms. You know data sets, algorithms, DB structures, statistics, data analysis.
 
       button(type="submit", ng-disabled="vm.editProfile.$invalid", ng-class="{'enabled-button': vm.editProfile.$valid}") Save
-
-      .field-section
-        h4.field-title Add Your Skills
-
-      .field-section
-        h4.field-title Links to Work
+    
+  .field-section.edit-skills
+    h4.field-title My Skills
+    h5 This skills are shown on the
+    
+    angucomplete-alt(
+      id="tagId",
+      input-name="skill-input",
+      placeholder='Type skill name here and press "Enter" to add it',
+      pause="100",
+      selected-object="vm.addSkill",
+      local-data="vm.tags",
+      search-fields="name",
+      title-field="name",
+      match-class="angucomplete-highlight",
+      minlength="1"
+    )
+    
+    .skills
+      .skill(ng-repeat="skill in vm.skills")
+        skill-tile(skill="skill")
+
+  .clearfix
+
+  .field-section
+    h4.field-title Links to Work

assets/css/settings/edit-profile.scss

@@ -108,6 +108,37 @@
 
     }
   }
+  
+  .edit-skills {
+    input {
+      width: 790px;
+      margin: 16px 0 16px 0;
+    }
+  }
+  
+  .skills {
+    .skill {
+      margin: 10px 10px 0 0;
+      padding: 26px 0px 10px 4px;
+      cursor: pointer;
+      width: 150px;
+      text-align: center;
+      float: left;
+      background-color: #d1d3d4;
+      i {
+        font-size: 50px;
+      }
+      .name {
+        text-align: center;
+        margin: 14px auto;
+      }
+    }
+  }
+  
+  .clearfix {
+     @include clearfix;
+     margin-bottom: 40px;
+  }
 
   button {
     width: 200px;