[Enhancement] Upgrade changes in search functionality

frontend/src/css/modules/challenge.scss

@@ -370,4 +370,16 @@ md-select .md-select-value span:first-child:after {
 
 .filter-icon {
     padding: 10px;
+}
+
+.domain-filter {
+    margin-top: 45px;
+}
+
+.filter-icon {
+    padding: 10px;
+}
+.md-select-menu-container{
+    z-index: 1000;
+    margin-top: 10px;
 }

frontend/src/js/controllers/challengeListCtrl.js

@@ -6,9 +6,9 @@
         .module('evalai')
         .controller('ChallengeListCtrl', ChallengeListCtrl);
 
-    ChallengeListCtrl.$inject = ['utilities', '$window', 'moment'];
+    ChallengeListCtrl.$inject = ['utilities', '$window', 'moment', '$rootScope'];
 
-    function ChallengeListCtrl(utilities, $window, moment) {
+    function ChallengeListCtrl(utilities, $window, moment, $rootScope) {
         var vm = this;
         var userKey = utilities.getData('userKey');
         var gmtOffset = moment().utcOffset();
@@ -23,6 +23,8 @@
         vm.currentList = [];
         vm.upcomingList = [];
         vm.pastList = [];
+        vm.searchTitle = [];
+        vm.selecteddomain = [];
 
         vm.noneCurrentChallenge = false;
         vm.noneUpcomingChallenge = false;
@@ -112,6 +114,30 @@
                 }
             });
         };
+
+            parameters.url = "challenges/challenge/get_domain_choices/";
+            parameters.method = 'GET';
+            parameters.data = {};
+            vm.domain_choices = [];
+            parameters.callback = {
+                onSuccess: function(response) {
+                    vm.domain_choices.push(["All", "All"]);
+                    for(var i=0; i<response.data.length; i++) {
+                        vm.domain_choices.push([response.data[i][0], response.data[i][1]]);
+                    }
+                    vm.domain_choices.push(["None", "None"]);
+                },
+                onError: function(response) {
+                    var error = response.data;
+                    $rootScope.notify("error", error);
+                }
+            };
+            utilities.sendRequest(parameters);
+
+        vm.resetFilter = function() {
+            vm.selecteddomain = [];
+            vm.searchTitle = [];
+        };
     }
 
 })();

frontend/src/js/controllers/hostedChallengeCtrl.js

@@ -6,9 +6,9 @@
         .module('evalai')
         .controller('HostedChallengesCtrl', HostedChallengesCtrl);
 
-    HostedChallengesCtrl.$inject = ['utilities'];
+    HostedChallengesCtrl.$inject = ['utilities', '$rootScope'];
 
-    function HostedChallengesCtrl(utilities) {
+    function HostedChallengesCtrl(utilities, $rootScope) {
         var vm = this;
         var userKey = utilities.getData('userKey');
 
@@ -21,6 +21,9 @@
 
         vm.challengeList = [];
         vm.challengeCreator = {};
+        vm.searchTitle = [];
+        vm.selecteddomain = [];
+        vm.domain_choices = [];
 
         var parameters = {};
         parameters.url = 'hosts/challenge_host_team/';
@@ -59,5 +62,28 @@
             }
         };
         utilities.sendRequest(parameters);
+
+        parameters.url = "challenges/challenge/get_domain_choices/";
+        parameters.method = 'GET';
+        parameters.data = {};
+        parameters.callback = {
+            onSuccess: function(response) {
+                vm.domain_choices.push(["All", "All"]);
+                for(var i=0; i<response.data.length; i++) {
+                    vm.domain_choices.push([response.data[i][0], response.data[i][1]]);
+                }
+                vm.domain_choices.push(["None", "None"]);
+            },
+            onError: function(response) {
+                var error = response.data;
+                $rootScope.notify("error", error);
+            }
+        };
+        utilities.sendRequest(parameters);
+
+        vm.resetFilter = function() {
+            vm.selecteddomain = [];
+            vm.searchTitle = [];
+        };
     }
 })();

frontend/src/js/filters/filters.js

@@ -35,4 +35,49 @@
         };
     }
 
+    angular.module('evalai')
+    .filter('customTitleFilter', customTitleFilter);
+
+    function customTitleFilter() {
+        return function(challenges, searchText) {
+            if (searchText === undefined) {
+                return challenges;
+            }
+            searchText = searchText.toString().toLowerCase();
+            var searchWords = searchText.split(' ');
+            return challenges.filter(function(challenge) {
+                var title = challenge.title.toLowerCase();
+                var tags = challenge.list_tags.join(' ').toLowerCase();
+                var domain = challenge.domain ? challenge.domain.toLowerCase() : '';
+                var regex = new RegExp("^" + searchWords.join('|'));
+                return title.split(' ').some(item => regex.test(item)) || tags.split(' ').some(item => regex.test(item)) || domain.split(' ').some(item => regex.test(item));
+            });
+        };
+    }
+
+    angular.module('evalai')
+    .filter('customDomainFilter', customDomainFilter);
+
+    function customDomainFilter() {
+        return function(challenges, selecteddomain) {
+            selecteddomain = selecteddomain.toString().toLowerCase();
+            if (selecteddomain === "all") {
+                return challenges;
+            }
+            else if (selecteddomain === "none") {
+                return challenges.filter(function(challenge) {
+                    return challenge.domain_name === null;
+                });
+            }
+            return challenges.filter(function(challenge) {
+                if (selecteddomain === "") {
+                    return true;
+                }
+                if (challenge.domain_name !== null) {
+                    return challenge.domain_name.toLowerCase().indexOf(selecteddomain) !== -1;
+                }
+                });
+        };
+    }
+
 })();

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

@@ -1,9 +1,24 @@
 <section class="ev-sm-container ev-view challenge-container">
+    <div class="row">
+        <div class="col s8 m6">
+            <i class="material-icons prefix"></i>
+            <strong class="text-med-black fs-18">Search</strong>
+            <input type="text" ng-model="challengeList.searchTitle" placeholder="Search challenges by title, tag or domain" style="font-weight: bold;">
+        </div>
+        <div class="col s12 m4 domain-filter right">
+            <button class="btn ev-btn-dark waves-effect waves-dark grad-btn grad-btn-dark fs-14" ng-click="challengeList.resetFilter()">Reset Filter</button>
+            <md-select class="right" id="domain" name="domain" placeholder="Domain Filter" aria-label="Domain Filter" ng-model="challengeList.selecteddomain">
+                <md-option ng-repeat="option in challengeList.domain_choices" value="{{ option[1] }}">{{ option[1] }}</md-option>
+            </md-select>
+            <i class="fa fa-filter right filter-icon" aria-hidden="true"></i>
+        </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-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})">
+        <div class="col s12 m3" ng-repeat="challenge in challengeList.currentList | customTitleFilter:challengeList.searchTitle | customDomainFilter:challengeList.selecteddomain"><a class="ev-card-hover" ui-sref="web.challenge-main.challenge-page({challengeId:challenge.id})">
                 <div class="card ev-card-panel ev-challenge-card ev-card-hover">
                     <div class="card-image ev-card-image">
                         <img class="bg-img" ng-src="{{challenge.image}}">
@@ -46,7 +61,7 @@
     <div class="challenge-page-title"><strong class="text-med-black fs-18">Upcoming Challenges</strong></div>
     <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})">
+        <div class="col s12 m3" ng-repeat="challenge in challengeList.upcomingList | customTitleFilter:challengeList.searchTitle | customDomainFilter:challengeList.selecteddomain"><a class="ev-card-hover" ui-sref="web.challenge-main.challenge-page({challengeId:challenge.id})">
                 <div class="card ev-card-panel ev-challenge-card ev-card-hover">
                     <div class="card-image ev-card-image">
                         <img class="bg-img" ng-src="{{challenge.image}}">
@@ -71,7 +86,7 @@
     <div class="challenge-page-title"><strong class="text-med-black fs-18">Past Challenges</strong></div>
     <div ng-if="challengeList.nonePastChallenge">None</div>
     <div class="row">
-        <div class="col s12 m3" ng-repeat="challenge in challengeList.pastList">
+        <div class="col s12 m3" ng-repeat="challenge in challengeList.pastList | customTitleFilter:challengeList.searchTitle | customDomainFilter:challengeList.selecteddomain">
             <a class="ev-card-hover" ui-sref="web.challenge-main.challenge-page({challengeId:challenge.id})">
                 <div class="card ev-card-panel ev-challenge-card ev-card-hover">
                     <div class="card-image ev-card-image">

frontend/src/views/web/hosted-challenges.html

@@ -1,12 +1,26 @@
 <section class="ev-sm-container ev-view challenge-container">
+    <div class="row">
+        <div class="col s8 m6">
+            <i class="material-icons prefix"></i>
+            <strong class="text-med-black fs-18">Search</strong>
+            <input type="text" ng-model="challengeListhosted.searchTitle" placeholder="Search challenges by title, tag or domain" style="font-weight: bold;">
+        </div>
+        <div class="col s12 m4 domain-filter right">
+            <button class="btn ev-btn-dark waves-effect waves-dark grad-btn grad-btn-dark fs-14" ng-click="challengeListhosted.resetFilter()">Reset Filter</button>
+            <md-select class="right" id="domain" name="domain" placeholder="Domain Filter" aria-label="Domain Filter" ng-model="challengeListhosted.selecteddomain">
+                <md-option ng-repeat="option in challengeListhosted.domain_choices" value="{{ option[1] }}">{{ option[1] }}</md-option>
+            </md-select>
+            <i class="fa fa-filter right filter-icon" aria-hidden="true"></i>
+        </div>
+    </div>
 
    <!-- my challenges -->
     <div class="challenge-page-title" id="ongoing-challenges"><strong class="text-med-black fs-18">My Hosted Challenges</strong></div>
     <div ng-if="!hostedChallenges.challengeList.length">
         You haven't hosted any challenge. Please <a ui-sref="web.challenge-host-teams" class="highlight-link">click here</a> to host one!
     </div>
     <div class="row" ng-if="hostedChallenges.challengeList.length">
-        <div class="col s12 m3" ng-repeat="challenge in hostedChallenges.challengeList"><a class="ev-card-hover" ui-sref="web.challenge-main.challenge-page({challengeId:challenge.id})">
+        <div class="col s12 m3" ng-repeat="challenge in hostedChallenges.challengeList | customTitleFilter:challengeListhosted.searchTitle | customDomainFilter:challengeList.selecteddomain"><a class="ev-card-hover" ui-sref="web.challenge-main.challenge-page({challengeId:challenge.id})">
                 <div class="card ev-card-panel ev-challenge-card ev-card-hover">
                     <div class="card-image ev-card-image">
                         <img class="bg-img" ng-src="{{challenge.image}}">

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

@@ -2715,3 +2715,67 @@ describe('Unit tests for challenge controller', function () {
         });
     });
 });
+
+describe('Filters', function() {
+    beforeEach(angular.mock.module('evalai'));
+
+    var ceilFilter, formatExecutionTimeFilter, customTitleFilter, customDomainFilter;
+
+    beforeEach(inject(function ($injector) {
+        ceilFilter = $injector.get('$filter')('ceil');
+        formatExecutionTimeFilter = $injector.get('$filter')('format_execution_time');
+        customTitleFilter = $injector.get('$filter')('customTitleFilter');
+        customDomainFilter = $injector.get('$filter')('customDomainFilter');
+    }));
+
+    describe('ceil filter', function() {
+        it('should round up input numbers', function() {
+            expect(ceilFilter(1.23)).toEqual(2);
+            expect(ceilFilter(-1.23)).toEqual(-1);
+            expect(ceilFilter(0)).toEqual(0);
+        });
+    });
+
+    describe('format_execution_time filter', function() {
+        it('should format execution times correctly', function() {
+            expect(formatExecutionTimeFilter(0)).toEqual('00 sec');
+            expect(formatExecutionTimeFilter(60)).toEqual('01 min ');
+            expect(formatExecutionTimeFilter(3661)).toEqual('01 hr 01 min 01 sec');
+            expect(formatExecutionTimeFilter(86461)).toEqual('01 day 01 min 01 sec');
+        });
+
+    });
+
+    describe('customTitleFilter', function() {
+        it('should filter challenges based on title search text', function() {
+            var challenges = [
+                {title: 'AngularJS', domain_name: 'web', list_tags: ['js', 'tag2']},
+                {title: 'React', domain_name: 'web', list_tags: ['tag3', 'tag4']},
+                {title: 'Nodejs', domain_name: 'server', list_tags: ['js', 'tag6']},
+                {title: 'ebay facebook', domain_name: 'web', list_tags: ['tag7', 'tag8']},
+
+            ];
+            expect(customTitleFilter(challenges, 'A')).toEqual([challenges[0]]);
+            expect(customTitleFilter(challenges, 'e f')).toEqual([challenges[3]]);
+            expect(customTitleFilter(challenges, 'ebay face')).toEqual([challenges[3]]);
+            expect(customTitleFilter(challenges, 'React')).toEqual([challenges[1]]);
+            expect(customTitleFilter(challenges, 'Ang rea')).toEqual([challenges[0],challenges[1]]);
+            expect(customTitleFilter(challenges, 'js')).toEqual([challenges[0],challenges[2]]);
+
+        });
+    });
+
+    describe('customDomainFilter', function() {
+        it('should filter challenges based on domain', function() {
+            var challenges = [
+                {title: 'AngularJS', domain_name: 'webdev'},
+                {title: 'React', domain_name: 'web'},
+                {title: 'Node.js', domain_name: null}
+            ];
+            expect(customDomainFilter(challenges, 'none')).toEqual([challenges[2]]);
+            expect(customDomainFilter(challenges, 'web')).toEqual([challenges[0], challenges[1]]);
+            expect(customDomainFilter(challenges, 'webdev')).toEqual([challenges[0]]);
+            expect(customDomainFilter(challenges, '')).toEqual([challenges[0], challenges[1], challenges[2]]);
+        });
+    });
+});