From 77bf9bf3645897f7f3948bf676b4722327418377 Mon Sep 17 00:00:00 2001
From: Nabil Adouani <nabil.adouani@gmail.com>
Date: Thu, 25 Feb 2021 11:55:02 +0100
Subject: [PATCH] #1670 Add scroll and filter in taxonomy tags selector

---
 .../misc/TaxonomySelectionModalCtrl.js            |  1 +
 .../partials/misc/taxonomy-selection.modal.html   | 15 ++++++++++++---
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/frontend/app/scripts/controllers/misc/TaxonomySelectionModalCtrl.js b/frontend/app/scripts/controllers/misc/TaxonomySelectionModalCtrl.js
index 04953c18b8..88675b131c 100644
--- a/frontend/app/scripts/controllers/misc/TaxonomySelectionModalCtrl.js
+++ b/frontend/app/scripts/controllers/misc/TaxonomySelectionModalCtrl.js
@@ -14,6 +14,7 @@
 
             this.selectTaxonomy = function(taxonomy) {
                 self.formData.selectedTaxonomy = taxonomy;
+                self.search = '';
             }
 
             this.selectTag = function(tag) {
diff --git a/frontend/app/views/partials/misc/taxonomy-selection.modal.html b/frontend/app/views/partials/misc/taxonomy-selection.modal.html
index 810fbbf48b..5a5ce376d5 100644
--- a/frontend/app/views/partials/misc/taxonomy-selection.modal.html
+++ b/frontend/app/views/partials/misc/taxonomy-selection.modal.html
@@ -39,7 +39,7 @@ <h3 class="modal-title">Select tags from library</h3>
             </div>
         </div>
 
-        <div class="form-group" ng-if="$modal.formData.selectedTaxonomy">
+        <div ng-if="$modal.formData.selectedTaxonomy">
             <div class="clearfix">
                 <label>
                     Choose tags from taxonomy: {{$modal.formData.selectedTaxonomy.namespace}}
@@ -47,9 +47,18 @@ <h3 class="modal-title">Select tags from library</h3>
                 <a class="pull-right" href ng-click="$modal.formData.selectedTaxonomy = undefined">Show all taxonomies</a>
             </div>
 
-            <div>
+            <div class="row mb-xxs">
+                <div class="col-sm-12">
+                    <div class="has-feedback">
+                        <input type="text" ng-model="$modal.search" class="form-control" placeholder="Filter tags" autofocus>
+                        <span class="glyphicon glyphicon-search form-control-feedback"></span>
+                    </div>
+                </div>
+            </div>
+
+            <div style="height: 300px; max-height: 300px; overflow-y: scroll;">
                 <div class="list-group">
-                    <a href class="list-group-item" ng-repeat="tag in $modal.formData.selectedTaxonomy.tags"
+                    <a href class="list-group-item" ng-repeat="tag in $modal.formData.selectedTaxonomy.tags | filter:$modal.search"
                         ng-click="$modal.selectTag(tag)">
                         <span class="mr-xs" ng-class="{'text-primary': !!tag.selected, 'text-disabled': !!!tag.selected}">
                             <i class="fa fa-check"></i>