Merge pull request #228 from appirio-tech/list-view-challenges

Implement list view on dashboard

Author: nlitwin

app/directives/challenge-tile/challenge-tile.directive.jade

@@ -1,4 +1,3 @@
-// TILE VIEW
 .challenge.tile-view(ng-show="view === 'tile'", ng-class="challenge.track")
   .challenge-track
 
@@ -11,7 +10,7 @@
     p.currentPhase {{challenge.userCurrentPhase}}
 
     .challenge-calendar(ng-show="challenge.userCurrentPhaseEndTime")
-      p.starts-in Ends In
+      p.ends-in Ends In
       p.time-remaining {{challenge.userCurrentPhaseEndTime[0]}}
       p.unit-of-time {{challenge.userCurrentPhaseEndTime[1]}}
 
@@ -45,36 +44,46 @@
 
         p Forum
 
-// LIST VIEW
-.challenge.list-view(ng-show="view=='list'")
-  .challenge-icons
-    img(ng-show="challenge.track === 'DEVELOP'", src="/images/member-program/svg/development-generic.svg")
-    img(ng-show="challenge.track === 'DESIGN' || challenge.track === 'Data Science'", src="/images/member-program/svg/design-generic.svg")
+.challenge.list-view(ng-show="view=='list'", ng-class="challenge.track")
+  .challenge-track
 
-  .challenge-name
+  header
     a(ng-href="https://www.{{DOMAIN}}/challenge-details/{{challenge.id}}/?type={{challenge.track}}") {{challenge.name}}
-    .phase-status(ng-show="challenge.status === 'Active'")
-      i.fa.fa-check-circle-o
 
-      p {{challenge.memberStatusMsg}}
+    p.subtrack {{challenge.subTrack | underscoreStrip}}
 
-  .roles
-    p Roles : {{challenge.userDetails.roles | listRoles}}
+    // Only show if not data science track
+    p.roles(ng-hide="challenge.track === 'DATA SCIENCE'") #[span Role:] {{challenge.userDetails.roles | listRoles}}
+
+  .challenge-details
+    .challenge-info
+      p.currentPhase {{challenge.userCurrentPhase}}
 
-  p.days-remaining(ng-show="challenge.status === 'Active'") {{challenge.registrationEndDate | timeDiff}}
-    span Registration Ends
-  p.completion-date(ng-show="challenge.status === 'Completed'")
-    span Ended {{challenge.submissionEndDate | date: "mediumDate"}}
+      p.ends-in(ng-show="challenge.userCurrentPhaseEndTime") Ends: {{challenge.userCurrentPhaseEndTime[2] | localTime}}
+
+      p.ends-in(ng-hide="challenge.userCurrentPhaseEndTime") This challenge is currently paused.
+
+    .phase-action(ng-switch="challenge.userAction")
+      .submit(ng-switch-when="Submit") Submit
 
-  .stats
-    .registrants(ng-show="challenge.numRegistrants > 0")
-      i.fa.fa-user
-      a(ng-href="https://www.{{DOMAIN}}/challenge-details/{{challenge.id}}/?type={{challenge.track}}#viewRegistrant") {{challenge.numRegistrants}}
-    .submissions(ng-show="challenge.numSubmissions > 0")
-      i.fa.fa-files-o
-      a(ng-href="https://www.{{DOMAIN}}/challenge-details/{{challenge.id}}/?type={{challenge.track}}#viewRegistrant") {{challenge.numSubmissions}}
+      .submitted(ng-switch-when="Submitted") Submitted
 
+      // Need styling and JS logic for this one
+      .registered(ng-switch-when="Registered") Registered
 
   .challenge-links
-    a(ng-href="http://apps.{{DOMAIN}}/forums//?module=Category&categoryID={{challenge.forumId}}")
-      i.fa.fa-comment
+    a.registrants(ng-href="https://www.{{DOMAIN}}/challenge-details/{{challenge.id}}/?type={{challenge.track}}#viewRegistrant")
+      p {{challenge.numRegistrants}}
+
+      .registrants-icon
+
+    a.submissions(ng-hide="challenge.track === 'DATA SCIENCE'", ng-href="https://www.{{DOMAIN}}/challenge-details/{{challenge.id}}/?type={{challenge.track}}#viewRegistrant")
+      p {{challenge.numSubmissions}}
+
+      .submissions-icon
+
+    a.forum(ng-href="http://apps.{{DOMAIN}}/forums//?module=Category&categoryID={{challenge.forumId}}")
+      .forum-icon
+
+      p Forum
+

app/filters/local-time.filter.js

@@ -6,7 +6,7 @@
   function localTime() {
     var timezone = jstz.determine().name();
     return function(input) {
-      return moment(input).tz(timezone).format('MM/DD/YY hh:mm A z');
+      return moment(input).tz(timezone).format('MM/DD/YY hh:mm a z');
     };
   };
 

app/my-challenges/my-challenges.jade

@@ -10,7 +10,9 @@
 
       p.viewOptions
         a(ng-click="vm.changeView('list')", ng-class="{disabled: vm.view == 'list'}") List
+
         span   |  
+
         a(ng-click="vm.changeView('tile')", ng-class="{disabled: vm.view == 'tile'}") Tile
 
       p.filters
@@ -22,6 +24,7 @@
 
     section.challenges(ng-show="vm.userHasChallenges && !vm.loading")
       tc-paginator(data="vm.myChallenges", page-params="vm.pageParams")
+
       .data(ng-class="vm.view + '-view'")
         challenge-tile(ng-repeat="challenge in vm.myChallenges | orderBy:registrationEndDate:true", challenge="challenge", view="vm.view", ng-class="vm.view + '-view'")
 

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

@@ -10,6 +10,8 @@
     vm.domain = CONSTANTS.domain;
     vm.loading = true;
     vm.userHasChallenges = true;
+    vm.challengeView = 'list';
+    vm.toggleView = toggleView;
 
     var handle = userIdentity.handle;
 
@@ -65,5 +67,11 @@
         vm.loading = false;
       });
     }
+
+    function toggleView(view) {
+      if (vm.challengeView !== view) {
+        vm.challengeView = view;
+      }
+    }
   }
 })();

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

@@ -1,6 +1,11 @@
 header(ng-hide="vm.loading")
   h1.section-title(ng-bind="vm.userHasChallenges ? 'My Challenges' : 'Challenges'")
 
+  .challenge-view-toggle
+    button.grid(ng-click="vm.toggleView('tile')", ng-class="{ disabled: vm.challengeView === 'tile' }") Grid
+
+    button.list(ng-click="vm.toggleView('list')", ng-class="{ disabled: vm.challengeView === 'list' }") List
+
 .section-loading(ng-show="vm.loading")
 
 section.noChallenges(ng-if="!vm.userHasChallenges && !vm.loading")
@@ -29,9 +34,15 @@ section.noChallenges(ng-if="!vm.userHasChallenges && !vm.loading")
 
   a(href="") Learn More
 
-section.hasChallenges(ng-if="vm.userHasChallenges && !vm.loading")
-  .challenges
-    challenge-tile(ng-repeat="challenge in vm.myChallenges | orderBy:registrationEndDate:true", challenge="challenge", view="'tile'", ng-class="'tile-view'")
+section.hasChallenges(ng-if="vm.userHasChallenges && !vm.loading", ng-class="{ 'list-view-active': vm.challengeView === 'list' }")
+  .section-titles(ng-show="vm.challengeView === 'list'")
+    .challenge-title Challenges
+    .phase-title Phase
+    .regs-subs-title Registrations & Submissions
+
+  .challenges(ng-class="vm.challengeView + '-view'")
+
+    challenge-tile(ng-repeat="challenge in vm.myChallenges | orderBy:registrationEndDate:true", challenge="challenge", view="vm.challengeView", ng-class="vm.challengeView + '-view'")
 
 .my-challenges-links(ng-if="vm.userHasChallenges && !vm.loading")
     a(ui-sref="my-challenges") View All Active Challenges

app/services/challenge.service.js

@@ -78,13 +78,17 @@
         }
 
         if (challenge.userCurrentPhaseEndTime) {
-          var timeAndUnit = moment(challenge.userCurrentPhaseEndTime).fromNow(true);
-          // Split into components: ['an', 'hour'] || ['2', months]
+          var fullTime = challenge.userCurrentPhaseEndTime;
+          var timeAndUnit = moment(fullTime).fromNow(true);
+          // Split into components: ['an', 'hour'] || ['2', 'months']
           timeAndUnit = timeAndUnit.split(' ');
 
           if (timeAndUnit[0] === 'a' || timeAndUnit[0] === 'an') {
             timeAndUnit[0] = '1';
           }
+
+          // Add actual time ['2', 'months', actual date]
+          timeAndUnit.push(fullTime);
           challenge.userCurrentPhaseEndTime = timeAndUnit;
         }
       });
@@ -119,13 +123,17 @@
         }
 
         if (challenge.userCurrentPhaseEndTime) {
-          var timeAndUnit = moment(challenge.userCurrentPhaseEndTime).fromNow(true);
-          // Split into components: ['an', 'hour'] || ['2', months]
+          var fullTime = challenge.userCurrentPhaseEndTime;
+          var timeAndUnit = moment(fullTime).fromNow(true);
+          // Split into components: ['an', 'hour'] || ['2', 'months']
           timeAndUnit = timeAndUnit.split(' ');
 
           if (timeAndUnit[0] === 'a' || timeAndUnit[0] === 'an') {
             timeAndUnit[0] = '1';
           }
+
+          // Add actual time ['2', 'months', actual date]
+          timeAndUnit.push(fullTime);
           challenge.userCurrentPhaseEndTime = timeAndUnit;
         }
       });