Merge pull request uPortal-Attic#132 from UW-Madison-DoIT/typeahead_to_search_beta_feature

MUMUP-1079 : Typeahead to search beta feature

Author: Tim Levett

angularjs-portal-frame/src/main/webapp/css/buckyless/header.less

@@ -1,6 +1,15 @@
 .bucky-nav-large li:first-of-type+li{
   position:absolute;width:30%;left:35%
 }
+.portlet-search-bar ul.dropdown-menu {
+  min-width: 90%;
+
+  li:first-of-type+li {
+    position: relative;
+    width: inherit;
+    left: 0;
+  }
+}
 #myuw-header span {
   font-size:25px;
 }

angularjs-portal-frame/src/main/webapp/frame.html

@@ -62,6 +62,7 @@
 <script type="text/javascript" src="js/sortable.js"></script>
 <script type="text/javascript" src="js/angular-page.js"></script>
 <script type="text/javascript" src="js/main/main-controllers.js"></script>
+<script type="text/javascript" src="js/main/search-controller.js"></script>
 <script type="text/javascript" src="js/main/main-service.js"></script>
 <script type="text/javascript" src="js/main/main-directives.js"></script>
 <script type="text/javascript" src="js/controllers.js"></script>

angularjs-portal-frame/src/main/webapp/js/angular-page.js

@@ -11,7 +11,8 @@
     'portal.misc.service',
     'portal.main.controllers',
     'portal.main.service',
-    'portal.main.directives'
+    'portal.main.directives',
+    'portal.search.controllers',
      ]);
  app.config(['$routeProvider',function($routeProvider, $locationProvider) {
 	 $routeProvider.

angularjs-portal-frame/src/main/webapp/js/main/main-controllers.js

@@ -13,7 +13,8 @@
       sidebarShowProfile: false, 
       profileImg: "img/terrace.jpg", 
       notificationsDemo : false,
-      pithyContentOnHome : false } );
+      pithyContentOnHome : false,
+      typeaheadSearch: false} );
   } ]);
 
   /* Username */
@@ -22,7 +23,7 @@
     var that = this;
     that.user = [];
     mainService.getUser().then(function(result){
-      that.user = result.data.person;
+      that.user = result;
     });
   }]);
 
@@ -31,14 +32,6 @@
     this.navbarCollapsed = true;
     $scope.showSearch = false;
     $scope.showSearchFocus = false;
-    $scope.submit = function(){
-      if($scope.initialFilter != "") {
-        $location.path("/apps/search/"+ $scope.initialFilter);
-        $scope.initialFilter = "";
-        $scope.showSearch = false;
-        $scope.showSearchFocus = false;
-      }
-    };
 
     this.toggleSearch = function() {
         $scope.showSearch = !$scope.showSearch;

angularjs-portal-frame/src/main/webapp/js/main/main-directives.js

@@ -18,12 +18,13 @@
     }
   });
 
-  app.directive('search', function() {
+  app.directive('search', [function() {
     return {
       restrict : 'E',
-      templateUrl : 'partials/search.html'
+      templateUrl : 'partials/search.html',
+      controller: 'SearchController'
     }
-  });
+  }]);
 
   app.directive('username', function() {
     return {

angularjs-portal-frame/src/main/webapp/js/main/main-service.js

@@ -3,18 +3,24 @@
 (function() {
 var app = angular.module('portal.main.service', []);
 
-app.factory('mainService', function($http, miscService) {
+app.factory('mainService', ['$http', 'miscService', function($http, miscService) {
   var prom = $http.get('/portal/api/session.json', { cache: true});
   var sidebarPromise = $http.get('/web/samples/sidebar.json');
+  var userPromise;
 
   var getUser = function() {
-  	return prom.success(
+    if (userPromise) {
+        return userPromise;
+    }
+
+    userPromise = prom.then(
       function(data, status) { //success function
-        return data.person;
-      }).error(function(data, status) { // failure function
+          return data.data.person;
+      }, function(data, status) { // failure function
       miscService.redirectUser(status, "Get User Info");
     });
-  }
+    return userPromise;
+  };
 
   var getSidebar = function() {
     return sidebarPromise.success(
@@ -23,13 +29,13 @@ app.factory('mainService', function($http, miscService) {
       }).error(function(data, status) { // failure function
       miscService.redirectUser(status, "Get sidebar info");
     });
-  }
+  };
 
   return {
     getUser: getUser,
     getSidebar : getSidebar
-  }
+  };
 
-});
+}]);
 
 })();

angularjs-portal-frame/src/main/webapp/js/main/search-controller.js

@@ -0,0 +1,38 @@
+'use strict';
+
+(function() {
+  var app = angular.module('portal.search.controllers', []);
+  app.controller('SearchController', [ 'miscService', '$location', '$scope', '$localStorage', function(miscService, $location, $scope, $localStorage) {
+      $scope.initialFilter = '';
+      $scope.filterMatches = [];
+      $scope.portletListLoading = true;
+      if($localStorage && $localStorage.typeaheadSearch) {
+          //TODO : Add in search for somewhere for frame
+      }
+
+      $scope.$watch('initialFilter', function(newVal, oldVal) {
+          if (!newVal || !$scope.portlets) {
+              $scope.filterMatches = [];
+              return;
+          }
+
+          $scope.filterMatches = [];//this is where you would run your filter function
+      });
+
+      $scope.onSelect = function(portlet) {
+              $location.path("/apps/search/"+ portlet.name);
+              $scope.initialFilter = "";
+              $scope.showSearch = false;
+              $scope.showSearchFocus = false;
+      };
+      
+      $scope.submit = function(){
+          if($scope.initialFilter != "") {
+            $location.path("/apps/search/"+ $scope.initialFilter);
+            $scope.initialFilter = "";
+            $scope.showSearch = false;
+            $scope.showSearchFocus = false;
+          }
+        };
+    }]);
+})();

angularjs-portal-frame/src/main/webapp/js/services.js

@@ -34,7 +34,7 @@ app.factory('miscService', function($http, $window, $location) {
   return {
     redirectUser: redirectUser,
     pushPageview: pushPageview,
-    pushGAEvent : pushGAEvent
+    pushGAEvent : pushGAEvent,
   }
 
 });

angularjs-portal-frame/src/main/webapp/partials/search.html

@@ -1,6 +1,29 @@
 <form ng-submit="submit()">
-  <div class="input-group">
-    <input type="search" class="main-search" placeholder="Search MyUW" name="initialFilter" ng-model="initialFilter" aria-label="Search MyUW" focus-me="showSearchFocus">
+  <div class="input-group portlet-search-bar">
+    <input type="search" class="main-search"
+            placeholder="Search MyUW"
+            name="initialFilter"
+            ng-model="initialFilter"
+            aria-label="Search MyUW"
+            focus-me="showSearchFocus"
+            ng-show="$storage.typeaheadSearch"
+            typeahead="title as match.title for match in filterMatches | limitTo:10"
+            typeahead-on-select="onSelect($item, $model, $label)"
+            typeahead-loading="portletListLoading"
+            typeahead-min-length="2"
+            typeahead-focus-first='false'
+            autocomplete="off" >
+
+      <input type="search" class="main-search"
+            placeholder="Search MyUW"
+            name="initialFilter"
+            ng-model="initialFilter"
+            aria-label="Search MyUW"
+            focus-me="showSearchFocus"
+            ng-hide="$storage.typeaheadSearch"
+            autocomplete="off" />
+
+
     <span class="input-group-btn">
       <button class="btn btn-default btn-search">
         <i class="fa fa-search"></i>

angularjs-portal-home/src/main/webapp/home.html

@@ -62,6 +62,7 @@
   <script type="text/javascript" src="js/sortable.js"></script>
   <script type="text/javascript" src="js/angular-page.js"></script>
   <script type="text/javascript" src="js/main/main-controllers.js"></script>
+  <script type="text/javascript" src="js/main/search-controller.js"></script>
   <script type="text/javascript" src="js/main/main-service.js"></script>
   <script type="text/javascript" src="js/main/main-directives.js"></script>
   <script type="text/javascript" src="js/layout/layout-controller.js"></script>