diff --git a/UI/WebServerResources/js/Common/sgSearch.directive.js b/UI/WebServerResources/js/Common/sgSearch.directive.js
index 5e05d6e7c..387e47751 100644
--- a/UI/WebServerResources/js/Common/sgSearch.directive.js
+++ b/UI/WebServerResources/js/Common/sgSearch.directive.js
@@ -12,6 +12,10 @@
* @example:
+
+ arrow_back
+
@@ -34,7 +38,8 @@
function compile(tElement, tAttr) {
var mdInputEl = tElement.find('md-input-container'),
inputEl = tElement.find('input'),
- selectEl = tElement.find('md-select');
+ selectEl = tElement.find('md-select'),
+ buttonEl = tElement.find('md-button');
inputEl.attr('ng-model', '$sgSearchController.searchText');
inputEl.attr('ng-model-options', '$sgSearchController.searchTextOptions');
@@ -43,10 +48,24 @@
selectEl.attr('ng-model', '$sgSearchController.searchField');
selectEl.attr('ng-change', '$sgSearchController.onChange()');
}
+ if (buttonEl && buttonEl.attr('sg-search-cancel')) {
+ buttonEl.attr('ng-click', buttonEl.attr('sg-search-cancel'));
+ buttonEl.removeAttr('sg-search-cancel');
+ }
+ else {
+ buttonEl = null;
+ }
return function postLink(scope, iElement, iAttr, controller) {
+ var compiledButtonEl = iElement.find('button');
+
// Associate callback to controller
controller.doSearch = $parse(iElement.attr('sg-search'));
+
+ // Reset the input field when cancelling the search
+ if (buttonEl && compiledButtonEl) {
+ compiledButtonEl.on('click', controller.cancelSearch);
+ }
}
}
}
@@ -73,12 +92,14 @@
*/
sgSearchController.$inject = ['$scope', '$element'];
function sgSearchController($scope, $element) {
+ var vm = this;
+
// Controller variables
- this.previous = { searchText: '', searchField: '' };
- this.searchText = null;
+ vm.previous = { searchText: '', searchField: '' };
+ vm.searchText = null;
// Model options
- this.searchTextOptions = {
+ vm.searchTextOptions = {
updateOn: 'default blur',
debounce: {
default: 300,
@@ -87,17 +108,22 @@
};
// Method to call on data changes
- this.onChange = function(value) {
- if (this.searchText != null) {
- if (this.searchText != this.previous.searchText || this.searchField != this.previous.searchField) {
- if (this.searchText.length > 2 || this.searchText.length == 0) {
+ vm.onChange = function() {
+ if (vm.searchText != null) {
+ if (vm.searchText != vm.previous.searchText || vm.searchField != vm.previous.searchField) {
+ if (vm.searchText.length > 2 || vm.searchText.length == 0) {
// doSearch is the compiled expression of the sg-search attribute
- this.doSearch($scope, { searchText: this.searchText, searchField: this.searchField });
+ vm.doSearch($scope, { searchText: vm.searchText, searchField: vm.searchField });
}
- this.previous = { searchText: this.searchText, searchField: this.searchField };
+ vm.previous = { searchText: vm.searchText, searchField: vm.searchField };
}
}
};
+
+ // Reset input field when cancelling the search
+ vm.cancelSearch = function() {
+ vm.searchText = "";
+ };
}
angular