Frontend: Refactor challenge list tab management to use controller scope for better state handling (#4993)

Author: RishabhJain2018

frontend/src/js/controllers/challengeListCtrl.js

@@ -32,6 +32,7 @@
         vm.noneUpcomingChallenge = false;
         vm.nonePastChallenge = false;
         vm.challengeCreator = {};
+        vm.tab = 1;
 
         vm.getAllResults = function(parameters, resultsArray, typ, countKey, isFirstPage){
             parameters.method = 'GET';

frontend/src/views/web/challenge-list.html

@@ -3,19 +3,19 @@
     <!-- tabs for challenges -->
     <div class="row">
         <div class="col s12">
-            <ul class="nav nav-underline" ng-init="tab = 1">
+            <ul class="nav nav-underline">
                 <li class="nav-item">
-                    <a href="#" ng-click="tab = 1" class="nav-link" ng-class="{'active': tab === 1}">
+                    <a href="#" ng-click="challengeList.tab = 1" class="nav-link" ng-class="{'active': challengeList.tab === 1}">
                         <strong class="text-med-black">Ongoing ({{challengeList.currentCount}})</strong>
                     </a>
                 </li>
                 <li class="nav-item" ng-if="challengeList.upcomingCount > 0">
-                    <a href="#" ng-click="tab = 2" class="nav-link" ng-class="{'active': tab === 2}">
+                    <a href="#" ng-click="challengeList.tab = 2" class="nav-link" ng-class="{'active': challengeList.tab === 2}">
                         <strong class="text-med-black">Upcoming ({{challengeList.upcomingCount}})</strong>
                     </a>
                 </li>
                 <li class="nav-item">
-                    <a href="#" ng-click="tab = 3" class="nav-link" ng-class="{'active': tab === 3}">
+                    <a href="#" ng-click="challengeList.tab = 3" class="nav-link" ng-class="{'active': challengeList.tab === 3}">
                         <strong class="text-med-black">Past ({{challengeList.pastCount}})</strong>
                     </a>
                 </li>
@@ -24,7 +24,7 @@
     </div>
 
     <!-- ongoing challenges -->
-    <div ng-show="tab === 1" class="ongoing-challenges">
+    <div ng-show="challengeList.tab === 1" class="ongoing-challenges">
     <div ng-if="challengeList.noneCurrentChallenge">None</div>
     <div class="row">
         <div class="col s12 m3" ng-repeat="challenge in challengeList.currentList"><a class="ev-card-hover" ui-sref="web.challenge-main.challenge-page({challengeId:challenge.id})">
@@ -70,7 +70,7 @@
     </div>
 
     <!-- upcoming challenges -->
-    <div ng-show="tab === 2" class="ongoing-challenges">
+    <div ng-show="challengeList.tab === 2" class="ongoing-challenges">
     <div ng-if="challengeList.noneUpcomingChallenge">None</div>
     <div class="row">
         <div class="col s12 m3" ng-repeat="challenge in challengeList.upcomingList"><a class="ev-card-hover" ui-sref="web.challenge-main.challenge-page({challengeId:challenge.id})">
@@ -99,7 +99,7 @@
     </div>
 
     <!-- past challenges -->
-    <div ng-show="tab === 3" class="ongoing-challenges">
+    <div ng-show="challengeList.tab === 3" class="ongoing-challenges">
     <div ng-if="challengeList.nonePastChallenge">None</div>
     <div class="row">
         <div class="col s12 m3" ng-repeat="challenge in challengeList.pastList">