Search box for group selection (fixes #26)

css/useradmin.css

@@ -83,6 +83,10 @@ div#alert-container {
   margin-left: 5px;
 }
 
+/* This is needed because otherwise the delete icon in textboxes is hidden while field has focus. */
+.has-feedback .form-control-feedback {
+  z-index: 3;
+}
 
 
 

js/angular-app.js

@@ -191,15 +191,25 @@
 
 
 
-  useradminApp.directive('usradmGroupAddListAccordion', function(editUserService) {
+  useradminApp.directive('usradmGroupAddListAccordion',
+      function(editUserService, filterFilter) {
     return {
       restrict: 'E',
       templateUrl: 'templates/groupAddList.html',
       scope: {
         groupData: '=groupData',
+        searchText: '=searchText',
       },
       link: function(scope, elemet, attrs) {
         scope.editUserService = editUserService;
+
+        scope.ouFilterPredicate = function(searchText) {
+          return function(ouItem) {
+            let filteredGroups = filterFilter(ouItem.groups, searchText);
+            let availableGroups = filteredGroups.filter(group => !editUserService.userHasGroup(group));
+            return (availableGroups.length > 0);
+          }
+        }
       }
     };
   });
@@ -369,13 +379,26 @@
 
 
 
-  useradminApp.directive('usradmGroupAddModal', function() {
+  useradminApp.directive('usradmGroupAddModal', function(filterFilter) {
     return {
       restrict: 'E',
       templateUrl: 'templates/groupAddModal.html',
       scope: {
         groupData: '=groupData'
-      }
+      },
+      controller: function() {
+        this.searchText = "";
+
+        this.changedSearch = function() {
+          let ouCount = filterFilter(this.groupData, this.searchText).length;
+          if (ouCount === 1) {
+            // Automatically open the only existing ou
+            $("#accordion>div>div.panel-collapse").collapse('toggle')
+          }
+        }
+      },
+      controllerAs: "groupAddModal",
+      bindToController: true,
     };
   });
 

templates/groupAddList.html

@@ -1,5 +1,5 @@
 <div id="accordion" class="panel-group">
-  <div class="panel panel-default" ng-repeat="ou in groupData">
+  <div class="panel panel-default" ng-repeat="ou in groupData | filter: ouFilterPredicate(searchText)">
     <div data-toggle="collapse" href="#collapse{{ou.ou}}"
         data-parent="#accordion"
         class="panel-heading clickable">
@@ -16,7 +16,7 @@ <h4 class="panel-title">
     <div id="collapse{{ou.ou}}" class="panel-collapse collapse">
       <ul class="list-group" ng-if="ou.groups.length">
         <li class="list-group-item clickable"
-            ng-repeat="group in ou.groups"
+            ng-repeat="group in ou.groups | filter: searchText"
             ng-show="!editUserService.userHasGroup(group)"
             ng-click="editUserService.addGroupToUser(group)">
           <h5 class="list-group-item-heading">

templates/groupAddModal.html

@@ -8,8 +8,23 @@
         <h4 class="modal-title">Gruppe hinzufügen</h4>
       </div>
       <div class="modal-body">
+          <form>
+              <div class="form-group has-feedback">
+                  <div class="input-group">
+                      <div class="input-group-addon"><i class="fa fa-search"></i></div>
+                      <input type="text" class="form-control"
+                             placeholder="Suchen" ng-model="groupAddModal.searchText"
+                             ng-change="groupAddModal.changedSearch()" />
+                      <span ng-if="groupAddModal.searchText"
+                            ng-click="groupAddModal.searchText = ''"
+                            class="glyphicon glyphicon-remove form-control-feedback"
+                            style="cursor: pointer; pointer-events: all;"
+                            uib-tooltip="clear"></span>
+                  </div>
+              </div>
+          </form>
         <usradm-group-add-list-accordion
-          group-data="groupData">
+          group-data="groupAddModal.groupData" search-text="groupAddModal.searchText">
         </usradm-group-add-list-accordion>
       </div> <!-- modal-body -->
       <div class="modal-footer">

templates/userlistSearch.html

@@ -1,9 +1,14 @@
 <form>
   <div class="form-group">
-    <div class="input-group">
+    <div class="input-group has-feedback">
       <div class="input-group-addon"><i class="fa fa-search"></i></div>
       <input type="text" class="form-control"
           placeholder="Suchen" ng-model="list.searchText">
+      <span ng-if="list.searchText"
+            ng-click="list.searchText = ''"
+            class="glyphicon glyphicon-remove form-control-feedback"
+            style="cursor: pointer; pointer-events: all;"
+            uib-tooltip="clear"></span>
     </div>
   </div>
 </form>