2015-05-06 04:06:13 +02:00
|
|
|
/* -*- Mode: javascript; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
|
|
|
|
|
|
|
|
(function() {
|
|
|
|
'use strict';
|
|
|
|
|
|
|
|
/*
|
|
|
|
* sgSearch - Search within a list of items
|
|
|
|
* @memberof SOGo.Common
|
|
|
|
* @restrict attribute
|
|
|
|
* @param {function} sgSearch - the function to call when performing a search.
|
|
|
|
* Two variables are available: searchField and searchText.
|
|
|
|
* @example:
|
|
|
|
|
|
|
|
<div sg-search="mailbox.$filter({ sort: 'date', asc: false }, [{ searchBy: searchField, searchInput: searchText }])">
|
2015-07-08 20:18:13 +02:00
|
|
|
<md-button class="sg-icon-button"
|
|
|
|
sg-search-cancel="ctrl.cancelSearch()">
|
|
|
|
<md-icon>arrow_back</md-icon>
|
|
|
|
</md-button>
|
2015-05-06 04:06:13 +02:00
|
|
|
<md-input-container>
|
|
|
|
<input name="search" type="search"/>
|
|
|
|
</md-input-container>
|
|
|
|
<md-select class="sg-toolbar-sort md-contrast-light">
|
|
|
|
<md-option value="subject">Subject</md-option>
|
|
|
|
<md-option value="sender">sender</md-option>
|
|
|
|
</md-select>
|
|
|
|
</div>
|
|
|
|
*/
|
2015-07-07 22:27:01 +02:00
|
|
|
sgSearchPreTransclude.$inject = ['$parse'];
|
|
|
|
function sgSearchPreTransclude($parse) {
|
2015-05-06 04:06:13 +02:00
|
|
|
return {
|
|
|
|
restrict: 'A',
|
|
|
|
controller: 'sgSearchController',
|
|
|
|
controllerAs: '$sgSearchController',
|
2015-07-07 22:27:01 +02:00
|
|
|
priority: 1001,
|
2015-05-06 04:06:13 +02:00
|
|
|
compile: compile
|
|
|
|
};
|
|
|
|
|
|
|
|
function compile(tElement, tAttr) {
|
|
|
|
var mdInputEl = tElement.find('md-input-container'),
|
|
|
|
inputEl = tElement.find('input'),
|
2015-07-08 20:18:13 +02:00
|
|
|
selectEl = tElement.find('md-select'),
|
|
|
|
buttonEl = tElement.find('md-button');
|
2015-05-06 04:06:13 +02:00
|
|
|
|
|
|
|
inputEl.attr('ng-model', '$sgSearchController.searchText');
|
|
|
|
inputEl.attr('ng-model-options', '$sgSearchController.searchTextOptions');
|
2015-07-07 22:27:01 +02:00
|
|
|
inputEl.attr('ng-change', '$sgSearchController.onChange()');
|
2015-05-06 04:06:13 +02:00
|
|
|
if (selectEl) {
|
|
|
|
selectEl.attr('ng-model', '$sgSearchController.searchField');
|
|
|
|
selectEl.attr('ng-change', '$sgSearchController.onChange()');
|
|
|
|
}
|
2015-07-08 20:18:13 +02:00
|
|
|
if (buttonEl && buttonEl.attr('sg-search-cancel')) {
|
|
|
|
buttonEl.attr('ng-click', buttonEl.attr('sg-search-cancel'));
|
|
|
|
buttonEl.removeAttr('sg-search-cancel');
|
|
|
|
}
|
|
|
|
else {
|
|
|
|
buttonEl = null;
|
|
|
|
}
|
2015-05-06 04:06:13 +02:00
|
|
|
|
|
|
|
return function postLink(scope, iElement, iAttr, controller) {
|
2015-07-08 20:18:13 +02:00
|
|
|
var compiledButtonEl = iElement.find('button');
|
|
|
|
|
2015-07-07 22:27:01 +02:00
|
|
|
// Associate callback to controller
|
|
|
|
controller.doSearch = $parse(iElement.attr('sg-search'));
|
2015-07-08 20:18:13 +02:00
|
|
|
|
|
|
|
// Reset the input field when cancelling the search
|
|
|
|
if (buttonEl && compiledButtonEl) {
|
|
|
|
compiledButtonEl.on('click', controller.cancelSearch);
|
|
|
|
}
|
2015-07-07 22:27:01 +02:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
2015-05-06 04:06:13 +02:00
|
|
|
|
2015-07-07 22:27:01 +02:00
|
|
|
function sgSearch() {
|
|
|
|
return {
|
|
|
|
restrict: 'A',
|
|
|
|
priority: 1000,
|
|
|
|
transclude: true,
|
|
|
|
compile: compile
|
|
|
|
};
|
|
|
|
|
|
|
|
function compile(tElement, tAttr) {
|
|
|
|
return function postLink(scope, iElement, iAttr, controller, transclude) {
|
|
|
|
transclude(function(clone) {
|
|
|
|
iElement.append(clone);
|
|
|
|
});
|
2015-05-06 04:06:13 +02:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* @ngInject
|
|
|
|
*/
|
|
|
|
sgSearchController.$inject = ['$scope', '$element'];
|
|
|
|
function sgSearchController($scope, $element) {
|
2015-07-08 20:18:13 +02:00
|
|
|
var vm = this;
|
|
|
|
|
2015-05-06 04:06:13 +02:00
|
|
|
// Controller variables
|
2015-07-08 20:18:13 +02:00
|
|
|
vm.previous = { searchText: '', searchField: '' };
|
|
|
|
vm.searchText = null;
|
2015-05-06 04:06:13 +02:00
|
|
|
|
|
|
|
// Model options
|
2015-07-08 20:18:13 +02:00
|
|
|
vm.searchTextOptions = {
|
2015-05-06 04:06:13 +02:00
|
|
|
updateOn: 'default blur',
|
|
|
|
debounce: {
|
|
|
|
default: 300,
|
|
|
|
blur: 0
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
// Method to call on data changes
|
2015-07-08 20:18:13 +02:00
|
|
|
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) {
|
2015-07-07 22:27:01 +02:00
|
|
|
// doSearch is the compiled expression of the sg-search attribute
|
2015-07-08 20:18:13 +02:00
|
|
|
vm.doSearch($scope, { searchText: vm.searchText, searchField: vm.searchField });
|
2015-05-06 04:06:13 +02:00
|
|
|
}
|
2015-07-08 20:18:13 +02:00
|
|
|
vm.previous = { searchText: vm.searchText, searchField: vm.searchField };
|
2015-05-06 04:06:13 +02:00
|
|
|
}
|
|
|
|
}
|
|
|
|
};
|
2015-07-08 20:18:13 +02:00
|
|
|
|
|
|
|
// Reset input field when cancelling the search
|
|
|
|
vm.cancelSearch = function() {
|
|
|
|
vm.searchText = "";
|
|
|
|
};
|
2015-05-06 04:06:13 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
angular
|
|
|
|
.module('SOGo.Common')
|
|
|
|
.controller('sgSearchController', sgSearchController)
|
2015-07-07 22:27:01 +02:00
|
|
|
.directive('sgSearch', sgSearchPreTransclude)
|
2015-05-06 04:06:13 +02:00
|
|
|
.directive('sgSearch', sgSearch);
|
|
|
|
})();
|