Skip to content

Commit b1526c6

Browse files
lazyperson1020Harshit28jRishabhJain2018
authored
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>
1 parent e51bd12 commit b1526c6

4 files changed

Lines changed: 122 additions & 12 deletions

File tree

frontend/src/css/modules/challenge.scss

Lines changed: 39 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -370,4 +370,42 @@ md-select .md-select-value span:first-child:after {
370370

371371
.filter-icon {
372372
padding: 10px;
373-
}
373+
}
374+
.no-margin {
375+
margin: 0px;
376+
}
377+
.nav-underline {
378+
display: flex;
379+
justify-content: space-around;
380+
border-bottom: 1px solid #e0e0e0;
381+
li {
382+
margin-bottom: -0.5%;
383+
}
384+
385+
.nav-item {
386+
flex: 1;
387+
text-align: center;
388+
color: #9e9e9e;
389+
390+
.nav-link {
391+
display: block;
392+
padding: 10px 0;
393+
color: #9e9e9e;
394+
text-decoration: none;
395+
border: none;
396+
background-color: transparent;
397+
font-weight: bold;
398+
transition: border-bottom 0.3s ease, color 0.3s ease;
399+
400+
&.active {
401+
border-bottom: 2px solid #000;
402+
color: #000;
403+
}
404+
405+
&:hover {
406+
color: #000;
407+
}
408+
}
409+
}
410+
}
411+

frontend/src/js/controllers/challengeListCtrl.js

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@
2828
vm.noneUpcomingChallenge = false;
2929
vm.nonePastChallenge = false;
3030
vm.getAllResults = function(parameters, resultsArray, typ){
31+
parameters.method = 'GET';
3132
parameters.callback = {
3233
onSuccess: function(response) {
3334
var data = response.data;
@@ -59,7 +60,7 @@
5960
var url = data.next;
6061
var slicedUrl = url.substring(url.indexOf('challenges/challenge'), url.length);
6162
parameters.url = slicedUrl;
62-
vm.getAllResults(parameters, resultsArray);
63+
vm.getAllResults(parameters, resultsArray, typ);
6364
} else {
6465
utilities.hideLoader();
6566
if (resultsArray.length === 0) {
@@ -88,19 +89,13 @@
8889

8990
// calls for ongoing challenges
9091
parameters.url = 'challenges/challenge/present/approved/public';
91-
parameters.method = 'GET';
92-
9392
vm.getAllResults(parameters, vm.currentList, "noneCurrentChallenge");
9493
// calls for upcoming challenges
9594
parameters.url = 'challenges/challenge/future/approved/public';
96-
parameters.method = 'GET';
97-
9895
vm.getAllResults(parameters, vm.upcomingList, "noneUpcomingChallenge");
9996

10097
// calls for past challenges
10198
parameters.url = 'challenges/challenge/past/approved/public';
102-
parameters.method = 'GET';
103-
10499
vm.getAllResults(parameters, vm.pastList, "nonePastChallenge");
105100

106101
vm.scrollUp = function() {
@@ -115,3 +110,4 @@
115110
}
116111

117112
})();
113+

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

Lines changed: 32 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,30 @@
11
<section class="ev-sm-container ev-view challenge-container">
2+
<p class="text-med-black fs-30 no-margin">All Challenges</p>
3+
<!-- tabs for challenges -->
4+
<div class="row">
5+
<div class="col s12">
6+
<ul class="nav nav-underline" ng-init="tab = 1">
7+
<li class="nav-item">
8+
<a href="#" ng-click="tab = 1" class="nav-link" ng-class="{'active': tab === 1}">
9+
<strong class="text-med-black">Ongoing ({{challengeList.currentList.length}})</strong>
10+
</a>
11+
</li>
12+
<li class="nav-item">
13+
<a href="#" ng-click="tab = 2" class="nav-link" ng-class="{'active': tab === 2}">
14+
<strong class="text-med-black">Upcoming ({{challengeList.upcomingList.length}})</strong>
15+
</a>
16+
</li>
17+
<li class="nav-item">
18+
<a href="#" ng-click="tab = 3" class="nav-link" ng-class="{'active': tab === 3}">
19+
<strong class="text-med-black">Past ({{challengeList.pastList.length}})</strong>
20+
</a>
21+
</li>
22+
</ul>
23+
</div>
24+
</div>
25+
226
<!-- ongoing challenges -->
3-
<div class="challenge-page-title" id = "ongoing-challenges"><strong class="text-med-black fs-18">Ongoing Challenges</strong></div>
27+
<div ng-show="tab === 1" class="ongoing-challenges">
428
<div ng-if="challengeList.noneCurrentChallenge">None</div>
529
<div class="row">
630
<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 @@
2246
<div class=" btn-card-detail waves-effect waves-dark w-300 fs-14"> <strong>View Details </strong> &nbsp; </div>
2347
</div>
2448
</a>
49+
</div>
2550
</div>
2651
</div>
2752

@@ -43,7 +68,7 @@
4368
</div>
4469

4570
<!-- upcoming challenges -->
46-
<div class="challenge-page-title"><strong class="text-med-black fs-18">Upcoming Challenges</strong></div>
71+
<div ng-show="tab === 2" class="ongoing-challenges">
4772
<div ng-if="challengeList.noneUpcomingChallenge">None</div>
4873
<div class="row">
4974
<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 @@
6792
</a>
6893
</div>
6994
</div>
95+
</div>
96+
7097
<!-- past challenges -->
71-
<div class="challenge-page-title"><strong class="text-med-black fs-18">Past Challenges</strong></div>
98+
<div ng-show="tab === 3" class="ongoing-challenges">
7299
<div ng-if="challengeList.nonePastChallenge">None</div>
73100
<div class="row">
74101
<div class="col s12 m3" ng-repeat="challenge in challengeList.pastList">
@@ -91,7 +118,9 @@
91118
<div class=" btn-card-detail waves-effect waves-dark w-300 fs-14"> <strong>View Details </strong> &nbsp; </div>
92119
</div>
93120
</a>
121+
</div>
94122
</div>
95123
</div>
96124
</section>
97125
<!-- <ui-view></ui-view> -->
126+

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

Lines changed: 48 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -316,6 +316,53 @@ describe('Unit tests for challenge list controller', function () {
316316
expect(vm.getAllResults).toHaveBeenCalledTimes(2);
317317
});
318318

319-
319+
it('ensures method is set to GET inside getAllResults function', function() {
320+
isPresentChallengeSuccess = true;
321+
isUpcomingChallengeSucess = null;
322+
isPastChallengeSuccess = null;
323+
successResponse = {
324+
next: null,
325+
results: []
326+
};
327+
328+
vm = createController();
329+
spyOn(utilities, 'sendRequest').and.callThrough();
330+
331+
const parameters = {
332+
url: 'challenges/challenge/present/approved/public'
333+
};
334+
335+
vm.getAllResults(parameters, [], 'noneCurrentChallenge');
336+
337+
expect(utilities.sendRequest).toHaveBeenCalled();
338+
expect(utilities.sendRequest.calls.argsFor(0)[0].method).toEqual('GET');
339+
});
340+
it('tests scrollUp function binding to window scroll events', function() {
341+
vm = createController();
342+
343+
var mockElement = {
344+
bind: jasmine.createSpy('bind')
345+
};
346+
347+
spyOn(angular, 'element').and.returnValue(mockElement);
348+
349+
vm.scrollUp();
350+
351+
expect(angular.element).toHaveBeenCalled();
352+
353+
expect(mockElement.bind).toHaveBeenCalledWith('scroll', jasmine.any(Function));
354+
355+
var scrollCallback = mockElement.bind.calls.mostRecent().args[1];
356+
357+
spyOn(utilities, 'showButton');
358+
var mockScrollContext = { pageYOffset: 100 };
359+
scrollCallback.call(mockScrollContext);
360+
expect(utilities.showButton).toHaveBeenCalled();
361+
362+
spyOn(utilities, 'hideButton');
363+
mockScrollContext.pageYOffset = 99;
364+
scrollCallback.call(mockScrollContext);
365+
expect(utilities.hideButton).toHaveBeenCalled();
366+
});
320367
});
321368
});

0 commit comments

Comments
 (0)