From 581379b98a0d9d2809c3a039c95d05168cc615f9 Mon Sep 17 00:00:00 2001
From: Evgeniia Rassokhina <ea.rassokhina@gmail.com>
Date: Thu, 20 Jun 2024 02:03:24 +0400
Subject: [PATCH] #1778 Clear search text after adding a new class

---
 .../app/app/analysis/patternmatching/index.js  |  4 ++--
 assets/app/app/visualizer/layers/templates.js  | 18 +++++++++++++-----
 .../spectrogram-layer/templates.html           |  2 +-
 assets/app/app/visualizer/validator-main.html  |  4 ++--
 assets/app/app/visualizer/validator.js         | 18 +++++++++++++-----
 5 files changed, 31 insertions(+), 15 deletions(-)

diff --git a/assets/app/app/analysis/patternmatching/index.js b/assets/app/app/analysis/patternmatching/index.js
index 4658eefe..2918ba20 100644
--- a/assets/app/app/analysis/patternmatching/index.js
+++ b/assets/app/app/analysis/patternmatching/index.js
@@ -241,7 +241,7 @@ angular.module('a2.analysis.patternmatching', [
         if (a2UserPermit.isSuper()) {
             return $scope.openExportPopup(exportReport)
         }
-        if (!a2UserPermit.can('manage pattern matchings') || (a2UserPermit.can('manage pattern matchings') && a2UserPermit.getUserRole() !== 'User')) {
+        if (!a2UserPermit.can('manage pattern matchings') || (a2UserPermit.can('manage pattern matchings') && a2UserPermit.getUserRole() === 'User')) {
             return notify.error('You do not have permission to export data');
         }
         $scope.openExportPopup(exportReport)
@@ -676,7 +676,7 @@ angular.module('a2.analysis.patternmatching', [
     exportPmReport: function ($event) {
         $event.stopPropagation();
         if (a2UserPermit.isSuper()) return this.setupExportUrl()
-        if (!a2UserPermit.can('manage pattern matchings') || (a2UserPermit.can('manage pattern matchings') && a2UserPermit.getUserRole() !== 'User')) {
+        if (!a2UserPermit.can('manage pattern matchings') || (a2UserPermit.can('manage pattern matchings') && a2UserPermit.getUserRole() === 'User')) {
             return notify.error('You do not have permission to export Pattern Matching data');
         } else return this.setupExportUrl()
     },
diff --git a/assets/app/app/visualizer/layers/templates.js b/assets/app/app/visualizer/layers/templates.js
index fe2263ca..9a995045 100644
--- a/assets/app/app/visualizer/layers/templates.js
+++ b/assets/app/app/visualizer/layers/templates.js
@@ -29,6 +29,7 @@ angular.module('a2.visualizer.layers.templates', [
     self.toggleSpeciesAdd = false;
     self.toggleSpeciesSelect = false;
     self.toggleSongtypeSelect = false;
+    self.resetSearch = false;
     self.userSearch = '';
     self.allSpecies = [];
     self.songtypes = [];
@@ -48,16 +49,22 @@ angular.module('a2.visualizer.layers.templates', [
 
     self.getClasses();
 
-    self.onSpeciesExists = function(search) {
-        console.log('[onSpeciesExists] search', search)
-        if (!search) {
+    self.onSpeciesExists = function($select) {
+        console.log('[onSpeciesExists] search', $select.search)
+        if (!$select.search) {
             self.userSearch = '';
             return;
         }
-        self.userSearch = search;
+        if (self.resetSearch) {
+            $select.search = '';
+            self.userSearch = '';
+            self.resetSearch = false;
+            return;
+        }
+        self.userSearch = $select.search;
         const classes = self.project_classes ? self.project_classes.filter(function(cl) {
             const species = cl.species_name.toLowerCase()
-            const searchFormatted = search.toLowerCase()
+            const searchFormatted = $select.search.toLowerCase()
             if (species.indexOf(searchFormatted) != -1) {
                 return true;
             } else return false;
@@ -135,6 +142,7 @@ angular.module('a2.visualizer.layers.templates', [
             .success(function(result) {
                 notify.log(self.classToAdd.species + ' ' + self.classToAdd.songtype + " added to the project");
                 self.toggleSongtypeSelect = false;
+                self.resetSearch = true;
                 self.userSearch = '';
                 // Reload the validations list on the Species Presence.
                 $scope.$broadcast('a2-persisted', {
diff --git a/assets/app/app/visualizer/spectrogram-layer/templates.html b/assets/app/app/visualizer/spectrogram-layer/templates.html
index 832c9946..136aa3ff 100644
--- a/assets/app/app/visualizer/spectrogram-layer/templates.html
+++ b/assets/app/app/visualizer/spectrogram-layer/templates.html
@@ -78,7 +78,7 @@ <h3 class="popover-title">
                                     <span class="text-util-gray-01" style="font-size: 12px;line-height: 1.2em;">{{ layer.templates.tempSelected.songtype_name ? layer.templates.tempSelected.songtype_name : $select.selected.songtype_name }}</span>
                                 </div>
                             </ui-select-match>
-                            <ui-select-choices repeat="class in layer.templates.project_classes | filter:$select.search | orderBy: ['species_name']" refresh="layer.templates.onSpeciesExists($select.search)" refresh-delay="0" position="down">
+                            <ui-select-choices repeat="class in layer.templates.project_classes | filter:$select.search | orderBy: ['species_name']" refresh="layer.templates.onSpeciesExists($select)" refresh-delay="0" position="down">
                                 <div class="row-flex flex-self-align-top flex-direction-column">
                                     <span class="text-insight">{{ class.species_name }}</span>
                                     <span class="text-util-gray-01" style="font-size: 12px;line-height: 1.2em;">{{ class.songtype_name }}</span>
diff --git a/assets/app/app/visualizer/validator-main.html b/assets/app/app/visualizer/validator-main.html
index 9da94854..608bd1a1 100644
--- a/assets/app/app/visualizer/validator-main.html
+++ b/assets/app/app/visualizer/validator-main.html
@@ -4,7 +4,7 @@
     </p>
     <div class="form-group validator" style="position:relative;" click-outside="hide()">
         <ui-select ng-model="selected" on-select="selectClass(selected)" ng-click="onSearchClick()" reset-search-input="false" theme="bootstrap">
-            <ui-select-match allow-clear="{{$select.selected.species_name || tempSelected.species_name ? true : false}}">
+            <ui-select-match allow-clear="{{tempSelected.species_name ? true : false}}">
                 <img ng-if="!tempSelected.species_name" class="pl-absolute-icon" style="width: 16px" src="/images/fi-search.svg">
                 <span ng-if="!userSearch.length && !tempSelected.species_name" class="placeholder pl-absolute ml-1">Search for species</span>
                 <div ng-if="userSearch && userSearch.length" class="placeholder pl-absolute ml-1">
@@ -15,7 +15,7 @@
                     <span class="text-util-gray-01" style="font-size: 12px;line-height: 1.2em;">{{ tempSelected.songtype_name ? tempSelected.songtype_name : $select.selected.songtype_name }}</span>
                 </div>
             </ui-select-match>
-            <ui-select-choices repeat="class in classes | filter:$select.search | orderBy: ['species_name']" refresh="onSpeciesExists($select.search)" refresh-delay="0" position="down">
+            <ui-select-choices repeat="class in classes | filter:$select.search | orderBy: ['species_name']" refresh="onSpeciesExists($select)" refresh-delay="0" position="down">
                 <div class="row-flex flex-self-align-top flex-direction-column">
                     <span class="text-insight">{{ class.species_name }}</span>
                     <span class="text-util-gray-01" style="font-size: 12px;line-height: 1.2em;">{{ class.songtype_name }}</span>
diff --git a/assets/app/app/visualizer/validator.js b/assets/app/app/visualizer/validator.js
index 8788fc8c..f348ebbe 100644
--- a/assets/app/app/visualizer/validator.js
+++ b/assets/app/app/visualizer/validator.js
@@ -11,6 +11,7 @@ angular.module('a2.speciesValidator', ['a2.utils', 'a2.infotags', 'a2.directive.
             $scope.toggleSpeciesAdd = false;
             $scope.toggleSpeciesSelect = false;
             $scope.toggleSongtypeSelect = false;
+            $scope.resetSearch = false;
             $scope.userSearch = '';
             $scope.allSpecies = [];
             $scope.songtypes = [];
@@ -19,16 +20,22 @@ angular.module('a2.speciesValidator', ['a2.utils', 'a2.infotags', 'a2.directive.
             $scope.tempSelected = {}
             $scope.timeout;
 
-            $scope.onSpeciesExists = function(search) {
-                console.log('[onSpeciesExists] search', search)
-                if (!search) {
+            $scope.onSpeciesExists = function($select) {
+                console.log('[onSpeciesExists] search', $select.search)
+                if (!$select.search) {
                     $scope.userSearch = '';
                     return;
                 }
-                $scope.userSearch = search;
+                if ($scope.resetSearch) {
+                    $select.search = '';
+                    $scope.userSearch = '';
+                    $scope.resetSearch = false;
+                    return;
+                }
+                $scope.userSearch = $select.search;
                 const classes = $scope.classes ? $scope.classes.filter(function(cl) {
                     const species = cl.species_name.toLowerCase()
-                    const searchFormatted = search.toLowerCase()
+                    const searchFormatted = $select.search.toLowerCase()
                     if (species.indexOf(searchFormatted) != -1) {
                         return true;
                     } else return false;
@@ -106,6 +113,7 @@ angular.module('a2.speciesValidator', ['a2.utils', 'a2.infotags', 'a2.directive.
                     .success(function(result) {
                         notify.log($scope.classToAdd.species + ' ' + $scope.classToAdd.songtype + " added to the project");
                         $scope.toggleSongtypeSelect = false;
+                        $scope.resetSearch = true;
                         $scope.userSearch = '';
                         load_project_classes().finally(() => {
                             const newSelectedClass = $scope.classes.find(cl => cl.species_name === $scope.classToAdd.species && cl.songtype_name === $scope.classToAdd.songtype)