From 4b2f05796c3fdf8085194e91c70d47eb1f4d2154 Mon Sep 17 00:00:00 2001
From: Fabian Lipp <fabian.lipp@gmx.de>
Date: Mon, 13 Jul 2026 00:44:53 +0200
Subject: [PATCH] Implement searchbox also for grouplist

---
 gruppen.php       | 24 ++++++++++++++++++++----
 js/angular-app.js | 17 ++++++++++++++++-
 2 files changed, 36 insertions(+), 5 deletions(-)

diff --git a/gruppen.php b/gruppen.php
index 2046155..1c22e22 100644
--- a/gruppen.php
+++ b/gruppen.php
@@ -26,8 +26,24 @@
     <div class="container" ng-controller="GrouplistController as list">
       <h1>Gruppen anzeigen</h1>
 
+      <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="list.searchText"
+                          ng-change="list.changedSearch()" />
+                  <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>
+
       <div id="accordion" class="panel-group">
-        <div class="panel panel-default" ng-repeat="ou in list.groupData">
+        <div class="panel panel-default" ng-repeat="ou in list.groupData | filter: list.ouFilterPredicate(list.searchText)">
           <div data-toggle="collapse" href="#collapse{{ou.ou}}"
               data-parent="#accordion"
               class="panel-heading clickable">
@@ -44,7 +60,7 @@ class="panel-heading clickable">
           <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: list.searchText">
                 <h5 class="list-group-item-heading">
                   {{group.cn}}
                   <span class="small">
@@ -55,8 +71,8 @@ class="panel-heading clickable">
                   {{group.description}}
                 </p>
                 <p class="list-group-item-text small">
-                  <a ng-if="!group.showMembers" ng-click="group.showMembers = true">Mitglieder anzeigen</a>
-                  <a ng-if="group.showMembers" ng-click="group.showMembers = false">Mitglieder ausblenden</a>
+                  <a ng-if="!group.showMembers" ng-click="group.showMembers = true">Mitglieder anzeigen ({{group.members.length}})</a>
+                  <a ng-if="group.showMembers" ng-click="group.showMembers = false">Mitglieder ausblenden ({{group.members.length}})</a>
                 </p>
                 <ul ng-if="group.showMembers">
                   <li ng-if="!group.members.length">Keine Mitglieder in dieser Gruppe</li>
diff --git a/js/angular-app.js b/js/angular-app.js
index 1d4e3ff..57fc3f5 100644
--- a/js/angular-app.js
+++ b/js/angular-app.js
@@ -404,7 +404,7 @@
 
 
 
-  useradminApp.controller('GrouplistController', function() {
+  useradminApp.controller('GrouplistController', function(filterFilter) {
     this.groupData = JSON.parse(
         document.getElementById('jsonGroupOus').textContent);
     // Don't show members of any group by default
@@ -414,6 +414,21 @@
         groupOu.groups[j].showMembers = false;
       }
     }
+
+    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('show')
+      }
+    };
+    this.ouFilterPredicate = function(searchText) {
+      return function(ouItem) {
+        let filteredGroups = filterFilter(ouItem.groups, searchText);
+        return (filteredGroups.length > 0);
+      }
+    }
   });