Merge pull request #58 from appirio-tech/rank-empty-state

Show empty state if user has no ratings

Author: nlitwin

app/my-dashboard/header-dashboard/header-dashboard.controller.js

@@ -13,8 +13,9 @@
     var vm = this;
     vm.domain = CONSTANTS.domain;
     vm.defaultPhotoUrl = "/images/avatarPlaceholder.png";
-    vm.isCopilot = true;
+    vm.isCopilot = false;
     vm.loading = true;
+    vm.hasRatings = true;
 
     activate();
 
@@ -26,15 +27,24 @@
         vm.profile = profile;
       });
 
-      ProfileService.getUserStats(username).then(function(stats) {
+      ProfileService.getUserStats(username)
+      .then(function(stats) {
         vm.rankStats = ProfileService.getRanks(stats);
+
+        if (vm.rankStats.length === 0) {
+          vm.hasRatings = false;
+        }
+
         vm.loading = false;
-      }).catch(function(err) {
+      })
+      .catch(function(err) {
+        vm.hasRatings = false;
         vm.loading = false;
         // todo handle error
       })
 
-      ProfileService.getUserFinancials(username).then(function(financials) {
+      ProfileService.getUserFinancials(username)
+      .then(function(financials) {
         vm.moneyEarned = financials.overallEarning;
       });
 

app/my-dashboard/header-dashboard/header-dashboard.jade

@@ -8,7 +8,7 @@ header
   //-       a(ng-href="http://community.{{vm.domain}}/tc?module=MyHome") Edit Profile
 
   profile-widget(profile="vm.profile", edit-profile-link="true")
-  
+
   .user-stats
     .money-earned
       p(ng-bind='vm.moneyEarned || 0 | currency:undefined:0')
@@ -22,13 +22,16 @@ header
 
 hr
 
-.section-loading(ng-show="vm.loading")
+.loading(ng-show="vm.loading")
+  .section-loading
+
+  hr
 
-.ratings(ng-hide="vm.loading")
+.ratings(ng-if="vm.hasRatings && !vm.loading")
   .track(ng-repeat="r in vm.rankStats")
     p(ng-bind="r.rank")
 
     p {{r.track}}:
     p {{r.subTrack}}
 
-hr
+  hr

app/my-dashboard/my-challenges/my-challenges.controller.js

@@ -11,17 +11,30 @@
     vm.loading = true;
     vm.myChallenges = [];
 
+    // Can we remove these since the filter is going on a different page?
     vm.viewActiveChallenges = viewActiveChallenges;
     vm.viewPastChallenges = viewPastChallenges;
 
-    var activate = function() {
+    var userId = UserService.getUserIdentity().userId;
+
+    activate();
+
+    function activate() {
       viewActiveChallenges();
     }
 
-    var userId = UserService.getUserIdentity().userId;
+    function viewActiveChallenges() {
+      vm.myChallenges = [];
+      getChallenges('Active', 'submissionEndDate asc');
+    };
+
+    function viewPastChallenges() {
+      vm.myChallenges = [];
+      getChallenges('Completed', 'submissionEndDate asc');
+    };
 
     // get ACTIVE challenges and spotlight challenges
-    var getChallenges = function(status, orderBy) {
+    function getChallenges(status, orderBy) {
       vm.loading = true;
       var challengeOptions = {
         limit: 6,
@@ -57,18 +70,6 @@
       });
     }
 
-    function viewActiveChallenges() {
-      vm.myChallenges = [];
-      getChallenges('Active', 'submissionEndDate asc');
-    };
-
-    function viewPastChallenges() {
-      vm.myChallenges = [];
-      getChallenges('Completed', 'submissionEndDate asc');
-    };
-
-    activate();
-
     function processChallengesResponse(data) {
       angular.forEach(data, function(challenge) {
         var now = moment();

app/my-dashboard/my-challenges/my-challenges.jade

@@ -9,7 +9,7 @@ header
 section.challenges(ng-hide="vm.loading")
   challenge-tile.tile(ng-repeat="challenge in vm.myChallenges", challenge="challenge", domain="vm.domain")
 
-  challenge-tile.tile.spotlight(challenge="vm.spotlightChallenge", domain="vm.domain", spotlight)
+  challenge-tile.tile.spotlight(spotlight, challenge="vm.spotlightChallenge", domain="vm.domain")
 
 .section-links
   .new-challenges.link

assets/css/directives/challenge-tiles.scss

@@ -1,5 +1,6 @@
 @import '../partials/combined';
 
+// Default Challenge Tile Stylings
 .tile {
   background-color: $medium-gray;
   box-sizing: border-box;
@@ -99,3 +100,22 @@
     }
   }
 }
+
+// Stylings for Spotlight Challenges
+.spotlight {
+  width: 48%;
+
+  .placeholder {
+    font-size: 22px;
+    color: $dark-gray;
+    text-align: center;
+    margin-top: 30px;
+  }
+
+  .challenge-status {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    padding-top: 50px;
+  }
+}

assets/css/member-dashboard/header-dashboard.scss

@@ -70,15 +70,19 @@
     }
   }
 
+  .loading {
+    margin-top: -20px;
+  }
+
   .ratings {
     display: flex;
     flex-flow: row wrap;
     justify-content: center;
-    margin-bottom: 27px;
     font-size: 13px;
 
     .track {
       width: 120px;
+      margin-bottom: 20px;
       text-align: center;
 
       p:first-child {

assets/css/member-dashboard/my-challenges.scss

@@ -34,24 +34,5 @@ $url_10: url(../images/sort-arrows.png);
     /* The negative margin here removes the leftmost tiles'
        margin, since we can't use .tile:first-child here */
     margin-left: -20px;
-
-    .spotlight {
-      width: 48%;
-
-      .placeholder {
-        font-size: 22px;
-        color: $dark-gray;
-        text-align: center;
-        margin-top: 15px;
-        margin-bottom: 15px;
-      }
-
-      .challenge-status {
-        display: flex;
-        flex-direction: row;
-        justify-content: space-between;
-        padding-top: 50px;
-      }
-    }
   }
 }