Added searchbar

CHANGELOG.md

@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 - Production Decomposition mode allows controlling interoperability productions as individual files for each host (#469)
 - Added saving settings as system default for new namespaces (#535)
+- Added filtering through branch names in UI (#615)
 
 ## [2.7.1] - 2024-11-13
 

git-webui/release/share/git-webui/webui/js/git-webui.js

@@ -394,6 +394,28 @@ webui.SideBarView = function(mainView, noEventHandlers) {
             }
         });
 
+        // Search bar to filter the results
+        if (idPostfix =='popup') {
+            var searchBar = $('<input type="text" id="search-input" placeholder="Filter..." style="width:100%">').appendTo(accordionDiv)[0];
+            searchBar.onkeyup = function(){ 
+                let branchCards = accordionDiv.getElementsByClassName("branch-card");
+
+                var filter = searchBar.value.toUpperCase().replaceAll('/', '-');
+
+                for (let i = 0; i < branchCards.length; i++) {
+                    let card = branchCards[i]
+                    let cardHeader = card.querySelector('.card-header');
+                    if (cardHeader) {
+                        if (cardHeader.id.toUpperCase().indexOf(filter) > -1) {
+                          card.style.display = '';
+                        } else {
+                          card.style.display = 'none';
+                        }
+                      }
+                }
+            };
+        }
+
         for (var i = 0; i < refs.length && i < maxRefsCount; ++i) {
             var ref = refs[i] + ""; // Get a copy of it
             if (ref[2] == '(' && ref[ref.length - 1] == ')') {
@@ -405,7 +427,7 @@ webui.SideBarView = function(mainView, noEventHandlers) {
                     ref = '  ' + newref;
                 }
             }
-            var cardDiv = $('<div class="card custom-card">').appendTo(accordionDiv)[0];
+            var cardDiv = $('<div class="card custom-card branch-card">').appendTo(accordionDiv)[0];
             if (id.indexOf("local-branches") > -1) {
                 // parses the output of git branch --verbose --verbose
                 var matches = /^\*?\s*([\w-.@&_\/]+)\s+([^\s]+)\s+(\[.*\])?.*/.exec(ref);

git-webui/src/share/git-webui/webui/js/git-webui.js

@@ -394,6 +394,28 @@ webui.SideBarView = function(mainView, noEventHandlers) {
             }
         });
 
+        // Search bar to filter the results
+        if (idPostfix =='popup') {
+            var searchBar = $('<input type="text" id="search-input" placeholder="Filter..." style="width:100%">').appendTo(accordionDiv)[0];
+            searchBar.onkeyup = function(){ 
+                let branchCards = accordionDiv.getElementsByClassName("branch-card");
+
+                var filter = searchBar.value.toUpperCase().replaceAll('/', '-');
+
+                for (let i = 0; i < branchCards.length; i++) {
+                    let card = branchCards[i]
+                    let cardHeader = card.querySelector('.card-header');
+                    if (cardHeader) {
+                        if (cardHeader.id.toUpperCase().indexOf(filter) > -1) {
+                          card.style.display = '';
+                        } else {
+                          card.style.display = 'none';
+                        }
+                      }
+                }
+            };
+        }
+
         for (var i = 0; i < refs.length && i < maxRefsCount; ++i) {
             var ref = refs[i] + ""; // Get a copy of it
             if (ref[2] == '(' && ref[ref.length - 1] == ')') {
@@ -405,7 +427,7 @@ webui.SideBarView = function(mainView, noEventHandlers) {
                     ref = '  ' + newref;
                 }
             }
-            var cardDiv = $('<div class="card custom-card">').appendTo(accordionDiv)[0];
+            var cardDiv = $('<div class="card custom-card branch-card">').appendTo(accordionDiv)[0];
             if (id.indexOf("local-branches") > -1) {
                 // parses the output of git branch --verbose --verbose
                 var matches = /^\*?\s*([\w-.@&_\/]+)\s+([^\s]+)\s+(\[.*\])?.*/.exec(ref);