Frontend fixes #4479: Add ongoing, past, future tabs on all challenges page(#4512)

* Add tabs for challenges

* Optimized api call & added blank space in SCSS

* revert changes to js

* Add new line

* tests

* no change

* no change

* added tests

* changes

---------

Co-authored-by: hj <harshitjain0562@gmail.com>
Co-authored-by: Rishabh Jain <rishabhjain2018@gmail.com>

Author: 3 people

frontend/src/css/modules/challenge.scss

@@ -370,4 +370,42 @@ md-select .md-select-value span:first-child:after {
 
 .filter-icon {
     padding: 10px;
-}
+}
+.no-margin {
+    margin: 0px;
+}
+.nav-underline {
+    display: flex;
+    justify-content: space-around;
+    border-bottom: 1px solid #e0e0e0;
+    li {
+        margin-bottom: -0.5%;
+    }
+    
+    .nav-item {
+        flex: 1;
+        text-align: center;
+        color: #9e9e9e;
+
+        .nav-link {
+            display: block;
+            padding: 10px 0;
+            color: #9e9e9e;
+            text-decoration: none;
+            border: none;
+            background-color: transparent;
+            font-weight: bold;
+            transition: border-bottom 0.3s ease, color 0.3s ease;
+
+            &.active {
+                border-bottom: 2px solid #000;
+                color: #000;
+            }
+
+            &:hover {
+                color: #000;
+            }
+        }
+    }
+}
+

frontend/src/js/controllers/challengeListCtrl.js

@@ -28,6 +28,7 @@
         vm.noneUpcomingChallenge = false;
         vm.nonePastChallenge = false;
         vm.getAllResults = function(parameters, resultsArray, typ){
+            parameters.method = 'GET';
             parameters.callback = {
                 onSuccess: function(response) {
                     var data = response.data;
@@ -59,7 +60,7 @@
                         var url = data.next;
                         var slicedUrl = url.substring(url.indexOf('challenges/challenge'), url.length);
                         parameters.url = slicedUrl;
-                        vm.getAllResults(parameters, resultsArray);
+                        vm.getAllResults(parameters, resultsArray, typ);
                     } else {
                         utilities.hideLoader();
                         if (resultsArray.length === 0) {
@@ -88,19 +89,13 @@
 
         // calls for ongoing challenges
         parameters.url = 'challenges/challenge/present/approved/public';
-        parameters.method = 'GET';
-        
         vm.getAllResults(parameters, vm.currentList, "noneCurrentChallenge");
         // calls for upcoming challenges
         parameters.url = 'challenges/challenge/future/approved/public';
-        parameters.method = 'GET';
-
         vm.getAllResults(parameters, vm.upcomingList, "noneUpcomingChallenge");
 
         // calls for past challenges
         parameters.url = 'challenges/challenge/past/approved/public';
-        parameters.method = 'GET';
-
         vm.getAllResults(parameters, vm.pastList, "nonePastChallenge");
 
         vm.scrollUp = function() {
@@ -115,3 +110,4 @@
     }
 
 })();
+

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

@@ -1,6 +1,30 @@
 <section class="ev-sm-container ev-view challenge-container">
+    <p class="text-med-black fs-30 no-margin">All Challenges</p>
+    <!-- tabs for challenges -->
+    <div class="row">
+        <div class="col s12">
+            <ul class="nav nav-underline" ng-init="tab = 1">
+                <li class="nav-item">
+                    <a href="#" ng-click="tab = 1" class="nav-link" ng-class="{'active': tab === 1}">
+                        <strong class="text-med-black">Ongoing ({{challengeList.currentList.length}})</strong>
+                    </a>
+                </li>
+                <li class="nav-item">
+                    <a href="#" ng-click="tab = 2" class="nav-link" ng-class="{'active': tab === 2}">
+                        <strong class="text-med-black">Upcoming ({{challengeList.upcomingList.length}})</strong>
+                    </a>
+                </li>
+                <li class="nav-item">
+                    <a href="#" ng-click="tab = 3" class="nav-link" ng-class="{'active': tab === 3}">
+                        <strong class="text-med-black">Past ({{challengeList.pastList.length}})</strong>
+                    </a>
+                </li>
+            </ul>
+        </div>
+    </div>
+
     <!-- ongoing challenges -->
-    <div class="challenge-page-title" id = "ongoing-challenges"><strong class="text-med-black fs-18">Ongoing Challenges</strong></div>
+    <div ng-show="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})">
@@ -22,6 +46,7 @@
                     <div class=" btn-card-detail waves-effect waves-dark w-300 fs-14"> <strong>View Details </strong> &nbsp; </div>
                 </div>
             </a>
+            </div>
         </div>
     </div>
 
@@ -43,7 +68,7 @@
     </div>
 
     <!-- upcoming challenges -->
-    <div class="challenge-page-title"><strong class="text-med-black fs-18">Upcoming Challenges</strong></div>
+    <div ng-show="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})">
@@ -67,8 +92,10 @@
             </a>
         </div>
     </div>
+    </div>
+
     <!-- past challenges -->
-    <div class="challenge-page-title"><strong class="text-med-black fs-18">Past Challenges</strong></div>
+    <div ng-show="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">
@@ -91,7 +118,9 @@
                     <div class=" btn-card-detail waves-effect waves-dark w-300 fs-14"> <strong>View Details </strong> &nbsp; </div>
                 </div>
             </a>
+            </div>
         </div>
     </div>
 </section>
 <!-- <ui-view></ui-view> -->
+ 

frontend/tests/controllers-test/challengeListCtrl.test.js

@@ -316,6 +316,53 @@ describe('Unit tests for challenge list controller', function () {
             expect(vm.getAllResults).toHaveBeenCalledTimes(2);
         });
 
-
+        it('ensures method is set to GET inside getAllResults function', function() {
+            isPresentChallengeSuccess = true;
+            isUpcomingChallengeSucess = null;
+            isPastChallengeSuccess = null;
+            successResponse = {
+                next: null,
+                results: []
+            };
+            
+            vm = createController();
+            spyOn(utilities, 'sendRequest').and.callThrough();
+            
+            const parameters = {
+                url: 'challenges/challenge/present/approved/public'
+            };
+            
+            vm.getAllResults(parameters, [], 'noneCurrentChallenge');
+            
+            expect(utilities.sendRequest).toHaveBeenCalled();
+            expect(utilities.sendRequest.calls.argsFor(0)[0].method).toEqual('GET');
+        });
+        it('tests scrollUp function binding to window scroll events', function() {
+            vm = createController();
+            
+            var mockElement = {
+                bind: jasmine.createSpy('bind')
+            };
+            
+            spyOn(angular, 'element').and.returnValue(mockElement);
+            
+            vm.scrollUp();
+            
+            expect(angular.element).toHaveBeenCalled();
+            
+            expect(mockElement.bind).toHaveBeenCalledWith('scroll', jasmine.any(Function));
+            
+            var scrollCallback = mockElement.bind.calls.mostRecent().args[1];
+            
+            spyOn(utilities, 'showButton');
+            var mockScrollContext = { pageYOffset: 100 };
+            scrollCallback.call(mockScrollContext);
+            expect(utilities.showButton).toHaveBeenCalled();
+            
+            spyOn(utilities, 'hideButton');
+            mockScrollContext.pageYOffset = 99;
+            scrollCallback.call(mockScrollContext);
+            expect(utilities.hideButton).toHaveBeenCalled();
+        });
     });
 });