group search

app/controllers/sidebar.controller.js

@@ -8,6 +8,11 @@ angular.module('app')
 
             $scope.DataShareBusiness = DataShareBusiness;
 
+            $scope.Search = {
+                value: "",
+                selected: null
+            };
+
             $scope.getCurrentGroups = function()
             {
                 if (DataShareBusiness.CurrentGroups.length != 0) {
@@ -19,4 +24,27 @@ angular.module('app')
                 }
                 return DataShareBusiness.Groups;
             };
+
+            $scope.search = function()
+            {
+                var groups = [];
+                function searchRec(group)
+                {
+                    if (group.Name.toLowerCase().indexOf($scope.Search.value.toLowerCase()) > -1) {
+                        groups.push(group);
+                    }
+                    if (group.Groups != null) {
+                        group.Groups.forEach(searchRec);
+                    }
+                }
+                DataShareBusiness.Groups.forEach(searchRec);
+                return groups;
+            };
+
+            $scope.goTo = function(group)
+            {
+                if (group != null) {
+                    DataShareBusiness.setCurrentGroup(group);
+                }
+            };
         }]);

app/less/app.less

@@ -35,7 +35,7 @@ footer {
   background-color: rgba(0, 0, 0, 0.12);
 }
 
-.md-sidebar {
+.md-sidebar md-content {
   height: 100%;
   min-height: 150px;
 }
@@ -143,4 +143,4 @@ footer {
 .sidebar-group-list {
   height: 100%;
   min-height: 75px;
-}
+}

app/views/sidebar.html

@@ -10,20 +10,38 @@
             This sidenav is locked open on your device. To go back to the default behavior,
             narrow your display.
         </p>-->
-        <ul class="col-sm-12 sidebar-group-list" lu-busy="sidebar">
-            <li ng-show="DataShareBusiness.CurrentGroups.length != 0" class="col-xs-12">
-                <md-button class="md-primary md-hue-1 md-group-button col-xs-12"
-                           ng-href="{{DataShareBusiness.getGroupUrl(DataShareBusiness.getCurrentGroup().Parent)}}">
-                    ..
-                </md-button>
-            </li>
-            <li ng-repeat="group in getCurrentGroups()" class="col-xs-12">
-                <md-button class="md-primary md-hue-1 md-group-button col-xs-12"
-                           ng-class="{'md-group-button-checked': DataShareBusiness.getCurrentGroup().Id == group.Id}"
-                           ng-href="{{DataShareBusiness.getGroupUrl(group)}}">
-                    {{ group.Name }}
-                </md-button>
-            </li>
-        </ul>
+        <div lu-busy="sidebar">
+            <md-autocomplete
+                    md-selected-item="Search.selected"
+                    md-search-text="Search.value"
+                    md-selected-item-change="goTo(item)"
+                    md-items="item in search(ctrl.searchText)"
+                    md-item-text="item.Name"
+                    md-min-length="1"
+                    placeholder="Type a group name...">
+                <md-item-template>
+                    <span md-highlight-text="ctrl.searchText" md-highlight-flags="^i">{{item.Name}}</span>
+                </md-item-template>
+                <md-not-found>
+                    No groups matching "{{Search.value}}" were found.
+                </md-not-found>
+            </md-autocomplete>
+
+            <ul class="col-sm-12 sidebar-group-list">
+                <li ng-show="DataShareBusiness.CurrentGroups.length != 0" class="col-xs-12">
+                    <md-button class="md-primary md-hue-1 md-group-button col-xs-12"
+                               ng-href="{{DataShareBusiness.getGroupUrl(DataShareBusiness.getCurrentGroup().Parent)}}">
+                        ..
+                    </md-button>
+                </li>
+                <li ng-repeat="group in getCurrentGroups()" class="col-xs-12">
+                    <md-button class="md-primary md-hue-1 md-group-button col-xs-12"
+                               ng-class="{'md-group-button-checked': DataShareBusiness.getCurrentGroup().Id == group.Id}"
+                               ng-href="{{DataShareBusiness.getGroupUrl(group)}}">
+                        {{ group.Name }}
+                    </md-button>
+                </li>
+            </ul>
+        </div>
     </md-content>
 </md-sidenav>