SUP-2231, New Empty States for Dashboard and Profile

-- Refactored the empty state directive to accommodate dynamic content html between title and description
-- Created service for empty state data
-- Added support for themes in empty state directive to avoid any css set in parent page's css
-- Added empty states for profile page (skills, activity, external links)

Author: vikasrohit

app/directives/empty-state-placeholder/empty-state-placeholder.directive.jade

@@ -1,4 +1,9 @@
-.empty-state-placeholder(ng-show="vm.show")
+.empty-state-placeholder(ng-show="vm.show", class="{{vm.theme}}")
   .title(ng-bind="vm.title")
+  .content(ng-transclude, ng-show="transcluded")
   .description(ng-bind="vm.description")
-  .upsell(ng-transclude)
+  .help-links
+    .help-link(ng-repeat="link in vm.helpLinks")
+      a(class="{{link.cssClass}}", title="{{link.title}}", ng-href="{{link.url}}", ng-if="link.url") {{link.title}}
+      a(class="{{link.cssClass}}", title="{{link.title}}", ui-sref="{{link.state}}", ng-if="link.state") {{link.title}}
+      a(class="{{link.cssClass}}", title="{{link.title}}", ng-click="link.onClick", ng-if="link.onClick") {{link.title}}

app/directives/empty-state-placeholder/empty-state-placeholder.directive.js

@@ -4,30 +4,47 @@
   angular.module('tcUIComponents')
     .directive('emptyStatePlaceholder', emptyStatePlaceholder);
 
-  function emptyStatePlaceholder() {
+  emptyStatePlaceholder.$inject = ['CONSTANTS', 'EmptyStateService'];
+
+  function emptyStatePlaceholder(CONSTANTS, EmptyStateService) {
     return {
       restrict: 'E',
       transclude: true,
       templateUrl: 'directives/empty-state-placeholder/empty-state-placeholder.directive.html',
       scope: {
-        title: '@',
-        description: '@',
-        show: '='
+        show: '=',
+        stateName: '@',
+        theme: '@'
+      },
+      link : function(scope, element, attrs) {
+        var rootDiv = angular.element(element.children()[0]);
+        var contentDiv = _.find(rootDiv.children(), function(el) {
+          return angular.element(el).hasClass("content");
+        });
+        scope.transcluded = angular.element(contentDiv)[0].children.length > 0;
       },
-      controller: ['$scope', 'CONSTANTS', '$attrs',
-        function($scope, CONSTANTS, $attrs) {
+      controller: ['$scope', 'CONSTANTS', '$attrs', '$element',
+        function($scope, CONSTANTS, $attrs, $element) {
           $scope.DOMAIN = CONSTANTS.domain;
           var vm = this;
-          vm.title = $scope.title;
-          vm.description = $scope.description;
+          vm.title = null;
+          vm.description = null;
+          vm.theme = _.get($scope, 'theme', null);
+          vm.helpLinks = null;
           vm.show = _.get($scope, 'show', false);
 
           activate();
 
           function activate() {
-            $scope.$watch('show', function (newValue, oldValue) {
-              vm.show = newValue;
-            })
+            var state = EmptyStateService.getState($scope.stateName);
+            if (state) {
+              vm.title = state.title;
+              vm.description = state.description;
+              vm.helpLinks = state.helpLinks;
+              $scope.$watch('show', function (newValue, oldValue) {
+                vm.show = newValue;
+              });
+            }
           }
       }],
       controllerAs: "vm"

app/index.jade

@@ -258,6 +258,7 @@ html
     script(src="services/authtoken.service.js")
     script(src="services/blog.service.js")
     script(src="services/challenge.service.js")
+    script(src="services/emptyState.service.js")
     script(src="services/externalAccounts.service.js")
     script(src="services/helpers.service.js")
     script(src="services/image.service.js")

app/my-challenges/my-challenges.jade

@@ -5,13 +5,8 @@
       page-state-header(handle="{{vm.handle}}", page-title="My Challenges", hide-money="true", show-back-link="true", default-state="dashboard")
 
     .content
-
       .never-participated(ng-if="vm.neverParticipated")
-        empty-state-placeholder(title="My Challenges", description="Compete in challenges to win money, test yourself against the world's best, and learn new skills", show="vm.neverParticipated")
-          .info-links
-            a.find-challenges.tc-btn.tc-btn-s(ng-href="https://www.{{DOMAIN}}/challenges/?pageIndex=1") Find Challenges
-
-            a.learn-more(href="https://www.{{DOMAIN}}/member-onboarding") Learn More
+        empty-state-placeholder(state-name="my-challenges-never-participated", show="vm.neverParticipated", theme="offwhite")
       section.participated(ng-if="!vm.neverParticipated")
         .top
           .filters
@@ -25,13 +20,9 @@
             button.list(ng-click="vm.changeView('list')", ng-class="{ disabled: vm.view === 'list' }") List
 
         section.noChallenges(ng-show="vm.myChallenges.length === 0 && vm.loading === 'ready'")
-          empty-state-placeholder(title="Past Challenges", description="You have not participated in any challenges yet.", show="vm.statusFilter === 'completed'")
-            .info-links
-              a.find-challenges.tc-btn.tc-btn-s(ng-href="https://www.{{DOMAIN}}/challenges/?pageIndex=1") Find Challenges
-              a.learn-more(href="https://www.{{DOMAIN}}/member-onboarding") Learn More
-          empty-state-placeholder(title="Active Challenges", description="You don't have any active challenges. Ready to find your next challenge?", show="vm.statusFilter === 'active'")
-            .info-links
-              a.find-challenges.tc-btn.tc-btn-s(ng-click="vm.changeFilter('completed')") Explore Open Challenges
+
+          empty-state-placeholder(state-name="my-challenges-past", show="vm.statusFilter === 'completed'", theme="offwhite")
+          empty-state-placeholder(state-name="my-challenges-active", show="vm.statusFilter === 'active'", theme="offwhite")
 
         .hasChallenges(ng-show="vm.myChallenges.length", state="vm.loading")
 

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

@@ -10,14 +10,8 @@ header(ng-hide="vm.loading || !vm.userHasChallenges")
 
 section.noChallenges(ng-if="!vm.userHasChallenges && !vm.loading")
   .never-participated(ng-if="vm.neverParticipated")
-    empty-state-placeholder(title="My Challenges", description="Compete in challenges to win money, test yourself against the world's best, and learn new skills", show="vm.neverParticipated")
-      .info-links
-        a.find-challenges.tc-btn.tc-btn-s(ng-href="https://www.{{DOMAIN}}/challenges/?pageIndex=1") Find Challenges
-
-        a.learn-more(href="https://www.{{DOMAIN}}/member-onboarding") Learn More
-  empty-state-placeholder(title="My Challenges", description="You don't have any active challenges. Ready to find your next challenge?", show="!vm.userHasChallenges && !vm.neverParticipated")
-    .info-links
-      a.find-challenges.tc-btn.tc-btn-s(ui-sref="my-challenges({status: 'completed'})") Explore Open Challenges
+    empty-state-placeholder(state-name="dashboard-challenges-never-participated", show="vm.neverParticipated", theme="black")
+  empty-state-placeholder(state-name="dashboard-challenges", show="!vm.userHasChallenges && !vm.neverParticipated", theme="black")
 
 section.hasChallenges(ng-if="vm.userHasChallenges && !vm.loading", ng-class="{ 'list-view-active': vm.challengeView === 'list' }")
   .section-titles(ng-show="vm.challengeView === 'list'")

app/my-dashboard/programs/programs.jade

@@ -5,11 +5,7 @@ header(ng-hide="vm.loading || !vm.registered")
 
 section.ios(ng-hide="vm.loading")
   .unregistered(ng-hide="vm.registered")
-    empty-state-placeholder(title="iOS COMMUNITY", description="Earn iOS topcoder badges and exclusive access to iOS challenges, prizes and special community-related events.", show="!vm.registered")
-      .info-links
-        a.participate.tc-btn.tc-btn-s(ng-click="vm.registerUser()") Participate
-
-        a.learn-more(ng-href="https://ios.{{DOMAIN}}", target="_blank") Learn More
+    empty-state-placeholder(state-name="dashboard-ios-community", show="!vm.registered", theme="sky")
 
   .registered(ng-show="vm.registered")
     .badge-and-challenges

app/profile/about/about.jade

@@ -15,7 +15,7 @@
       tc-section(ng-show="vm.displaySection.skills", state="profileVm.status.skills")
 
         .skills
-          h3.activity Skills
+          h3.activity(ng-hide="!profileVm.skills || (profileVm.skills && profileVm.skills.length == 0)") Skills
 
           .list(ng-show="profileVm.skills && profileVm.skills.length > 0")
 
@@ -25,31 +25,21 @@
           button.tc-btn.tc-btn-s.more(ng-if="vm.skills.length < vm.fullSkills.length", ng-click="vm.skills = vm.fullSkills") VIEW ALL
           button.tc-btn.tc-btn-s.more(ng-if="vm.skills.length > 10", ng-click="vm.skills = vm.someSkills") VIEW LESS
 
-          .empty-state(ng-show="!profileVm.skills || (profileVm.skills && profileVm.skills.length == 0)")
-            .action-text Tell everyone what you know
+          .empty-state
+            empty-state-placeholder(state-name="profile-skills", show="!profileVm.skills || (profileVm.skills && profileVm.skills.length == 0)")
+              .sample-skills
+                .skill(ng-repeat="skill in vm.sampleSkills")
+                  skill-tile(skill="skill")
 
-            .list
-              .skill(ng-repeat="skill in vm.sampleSkills")
-                skill-tile(skill="skill")
 
-            .description You can add languages, environments, frameworks, libraries, platforms, tools, and any other technologies that you know well.
-
-            button.tc-btn.tc-btn-s.link-button(ui-sref="settings.profile") ADD SKILLS
 
     #tcActivity
       tc-section(ng-show="vm.displaySection.stats", state="profileVm.status.stats")
 
         .categories
 
-          .empty-state(ng-if="!profileVm.numProjects")
-            .action-text Start competing within the community
-            .tracks
-              .track.noclick(ng-repeat="track in ['DEVELOP', 'DESIGN', 'DATA_SCIENCE']")
-                div(class="{{profileVm.imgMap[track]}}-icon")
-                  div
-                .text {{track | track}} 
-            .description Compete in challenges to win money, test yourself against the world's best, and learn new skills. Your performance rating will show up here.
-            a.tc-btn.tc-btn-s.link-button(href="/challenges") FIND CHALLENGES
+          .empty-state
+            empty-state-placeholder(state-name="profile-topcoder-activity", show="!profileVm.numProjects", theme="offwhite")
 
           .track(
             ng-repeat="track in profileVm.profile.tracks",
@@ -97,14 +87,10 @@
     #externalLinks
       tc-section(ng-show="vm.displaySection.externalLinks", state="profileVm.status.externalLinks")
         .external-links
-          h3.activity on the web
+          h3.activity(ng-if="vm.hasLinks") on the web
           external-links-data(ng-show="vm.hasLinks", external-links="vm.linkedExternalAccounts", linked-accounts-data="vm.linkedExternalAccountsData")
 
-          .empty-state(ng-hide="vm.hasLinks")
-            .action-text Showcase your work from around the web
-
-            external-accounts.external-account-container(linked-accounts="[]", links-data="{}", read-only="true")
-
-            .description Show off your work and experience outside of Topcoder. Connect accounts from popular services and networks or add a link to any site.
+          .empty-state
+            empty-state-placeholder(state-name="profile-external-links", show="!vm.hasLinks")
+              external-accounts.external-account-container(linked-accounts="[]", links-data="{}", read-only="true")
 
-            button.tc-btn.tc-btn-s.link-button(ui-sref="settings.profile") CONNECT ACCOUNTS

app/services/emptyState.service.js

@@ -0,0 +1,140 @@
+(function() {
+  'use strict';
+
+  angular.module('tc.services').factory('EmptyStateService', EmptyStateService);
+
+  EmptyStateService.$inject = ['CONSTANTS'];
+
+  function EmptyStateService(CONSTANTS) {
+    var states = null;
+    var domain = CONSTANTS.domain;
+    _init();
+
+    var service = {
+      getState: getState
+    };
+
+    return service;
+
+    function getState(stateName) {
+      if (states[stateName]) {
+        return states[stateName];
+      }
+      return null;
+    }
+
+    function _getUrl (path) {
+      return "https://www." + domain + path;
+    }
+
+    function _getIOSUrl(path) {
+      return "https://ios." + domain + path;
+    }
+
+    function _init() {
+      states = {
+        "dashboard-challenges": {
+          title: "My Challenges",
+          description: "You don't have any active challenges. Ready to find your next challenge?",
+          helpLinks: [{
+            title: "Explore Open Challenges",
+            state: "my-challenges({status: 'completed'})",
+            cssClass: "find-challenges tc-btn tc-btn-s"
+          }]
+        },
+        "dashboard-ios-community": {
+          title: "iOS COMMUNITY",
+          description: "Earn iOS topcoder badges and exclusive access to iOS challenges, prizes and special community-related events.",
+          helpLinks: [{
+            title: "Participate",
+            onClick: "vm.registerUser()",
+            cssClass: "participate tc-btn tc-btn-s tc-btn-ghost"
+          }, {
+            title: "Learn More",
+            url: _getIOSUrl("/"),
+            cssClass: "learn-more"
+          }]
+        },
+        "dashboard-challenges-never-participated": {
+          title: "My Challenges",
+          description: "Compete in challenges to win money, test yourself against the world's best, and learn new skills",
+          helpLinks: [{
+            title: "Find Challenges",
+            url: _getUrl("/challenges/?pageIndex=1"),
+            cssClass: "find-challenges tc-btn tc-btn-s"
+          }, {
+            title: "Learn More",
+            url: _getUrl("/member-onboarding"),
+            cssClass: "learn-more"
+          }]
+        },
+        "my-challenges-active": {
+          title: "Active Challenges",
+          description: "You don't have any active challenges. Ready to find your next challenge?",
+          helpLinks: [{
+            title: "Explore Open Challenges",
+            state: "my-challenges({status: 'completed'})",
+            cssClass: "find-challenges tc-btn tc-btn-s tc-btn-ghost"
+          }]
+        },
+        "my-challenges-past": {
+          title: "Past Challenges",
+          description: "You have not participated in any challenges yet.",
+          helpLinks: [{
+            title: "Find Challenges",
+            url: _getUrl("/challenges/?pageIndex=1"),
+            cssClass: "find-challenges tc-btn tc-btn-s tc-btn-ghost"
+          }, {
+            title: "Learn More",
+            url: _getUrl("/member-onboarding"),
+            cssClass: "learn-more"
+          }]
+        },
+        "my-challenges-never-participated": {
+          title: "My Challenges",
+          description: "Compete in challenges to win money, test yourself against the world's best, and learn new skills",
+          helpLinks: [{
+            title: "Find Challenges",
+            url: _getUrl("/challenges/?pageIndex=1"),
+            cssClass: "find-challenges tc-btn tc-btn-s tc-btn-ghost"
+          }, {
+            title: "Learn More",
+            url: _getUrl("/member-onboarding"),
+            cssClass: "learn-more"
+          }]
+        },
+        "profile-topcoder-activity": {
+          title: "My Challenges",
+          description: "You have not participated in any challenges yet.",
+          helpLinks: [{
+            title: "Explore Challenges",
+            url: _getUrl("/challenges/?pageIndex=1"),
+            cssClass: "find-challenges tc-btn tc-btn-s tc-btn-ghost"
+          }, {
+            title: "Learn More",
+            url: _getUrl("/member-onboarding"),
+            cssClass: "learn-more"
+          }]
+        },
+        "profile-skills": {
+          title: "Skills",
+          description: "You can add languages, environments, frameworks, libraries, platforms, tools, and any other technologies that you know well.",
+          helpLinks: [{
+            title: "Add Your Skills",
+            state: "settings.profile",
+            cssClass: "add-skills tc-btn tc-btn-s tc-btn-ghost"
+          }]
+        },
+        "profile-external-links": {
+          title: "External Links",
+          description: "You can add languages, environments, frameworks, libraries, platforms, tools, and any other technologies that you know well.",
+          helpLinks: [{
+            title: "Connect Your Accounts",
+            state: "settings.profile",
+            cssClass: "connect-external-accounts tc-btn tc-btn-s tc-btn-ghost"
+          }]
+        }
+      }
+    }
+  };
+})();